4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T222d,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { ShapeMorph } from "@/components/ui/shape"; import { Icon } from "@/components/ui/icon"; import { MotionPresence, MotionSurface } from "@/components/ui/presence"; export const dropzoneVariants = cva("v-drop", { variants: { variant: { default: "", compact: "-compact" } }, defaultVariants: { variant: "default" }, }); export type DropzoneFile = { name: string; size: number; type: string; lastModified: number; }; export type DropzoneRejection = { file: File; code: "file-type" | "file-size"; reason: string; }; export type DropzoneProps = React.ComponentProps<"div"> & VariantProps & { onFilesSelected?: (files: File[]) => void; onFilesRejected?: (files: DropzoneRejection[]) => void; accept?: string; /** Maximum bytes per file. Omit to leave file size unrestricted. */ maxSize?: number; multiple?: boolean; disabled?: boolean; showReceipt?: boolean; }; function fileSize(bytes: number) { return bytes < 1024 ? `${bytes} B` : bytes < 1024 * 1024 ? `${Math.round(bytes / 1024)} KB` : `${(bytes / (1024 * 1024)).toFixed(1)} MB`; } function acceptsFile(file: File, accept?: string) { if (!accept?.trim()) return true; return accept.split(",").some((rule) => { const type = rule.trim().toLowerCase(); return type.startsWith(".") ? file.name.toLowerCase().endsWith(type) : type.endsWith("/*") ? file.type.toLowerCase().startsWith(type.slice(0, -1)) : file.type.toLowerCase() === type; }); } export function Dropzone({ className, children, variant, onFilesSelected, onFilesRejected, accept, maxSize, multiple = true, disabled, showReceipt = true, onDragEnter, onDragOver, onDragLeave, onDrop, onClick, onKeyDown, "aria-describedby": describedBy, ...props }: DropzoneProps) { const picker = React.useRef(null), depth = React.useRef(0); const id = React.useId(); const [over, setOver] = React.useState(false); const [selected, setSelected] = React.useState([]); const [rejections, setRejections] = React.useState([]); const receive = (files: File[]) => { const chosen = multiple ? files : files.slice(0, 1), accepted: File[] = [], rejected: DropzoneRejection[] = []; for (const file of chosen) { if (!acceptsFile(file, accept)) rejected.push({ file, code: "file-type", reason: "This file type is not accepted.", }); else if ( maxSize !== undefined && Number.isFinite(maxSize) && maxSize >= 0 && file.size > maxSize ) rejected.push({ file, code: "file-size", reason: `Choose a file smaller than ${fileSize(maxSize)}.`, }); else accepted.push(file); } setSelected( accepted.map(({ name, size, type, lastModified }) => ({ name, size, type, lastModified, })), ); setRejections(rejected); onFilesSelected?.(accepted); if (rejected.length) onFilesRejected?.(rejected); }; const state = disabled ? "disabled" : over ? "over" : rejections.length ? "error" : selected.length ? "selected" : "rest"; return (

{ onClick?.(event); if ( !event.defaultPrevented && !disabled && event.target !== picker.current ) picker.current?.click(); }} onKeyDown={(event) => { onKeyDown?.(event); if ( !event.defaultPrevented && !disabled && (event.key === "Enter" || event.key === " ") ) { event.preventDefault(); picker.current?.click(); } }} onDragEnter={(event) => { onDragEnter?.(event); const cancelled = event.defaultPrevented; event.preventDefault(); if (!cancelled && !disabled && ++depth.current > 0) setOver(true); }} onDragOver={(event) => { onDragOver?.(event); event.preventDefault(); event.dataTransfer.dropEffect = disabled ? "none" : "copy"; }} onDragLeave={(event) => { onDragLeave?.(event); event.preventDefault(); if (--depth.current <= 0) { depth.current = 0; setOver(false); } }} onDrop={(event) => { onDrop?.(event); const cancelled = event.defaultPrevented; event.preventDefault(); depth.current = 0; setOver(false); if (!cancelled && !disabled) receive(Array.from(event.dataTransfer.files)); }} {...props} > { receive(Array.from(event.target.files ?? [])); event.target.value = ""; }} /> {children ?? ( <> {over ? "Let them land here" : selected.length ? "Ready when you are" : "A place for your files"} {over ? "Release to add your files" : "Drop files here, or choose from your device."} {selected.length ? "Choose files again" : "Choose files"} )} {accept ? `Accepts ${accept .split(",") .map((type) => type.trim()) .join(", ")}.` : "Any file type."} {maxSize !== undefined && Number.isFinite(maxSize) && maxSize >= 0 ? ` Up to ${fileSize(maxSize)} per file.` : ""} {!multiple ? " One file at a time." : ""} {showReceipt && selected.length > 0 && (

{selected.length} file{selected.length === 1 ? "" : "s"}{" "} selected {selected.slice(0, 3).map((file, index) => ( {file.name} {fileSize(file.size)} ))} {selected.length > 3 && ( And {selected.length - 3} more. )}

)} {rejections.length > 0 && (

{rejections.length === 1 ? rejections[0].file.name : `${rejections.length} files`}{" "} couldn’t be added. {" "} {rejections[0].reason}

)}

); } 51:T1085,@layer cojeev-states { [data-slot="dropzone"] { position:relative; isolation:isolate; display:grid; justify-items:center; gap:14px; width:100%; min-width:0; padding:30px 24px 24px; border:1.5px dashed var(--v-text-2); border-radius:26px 34px 28px 38px; background:var(--v-canvas); color:var(--v-text); text-align:center; cursor:pointer; transition:background var(--t-element),border-color var(--t-element); } [data-slot="dropzone"]:not([aria-disabled="true"]):hover { background:color-mix(in oklab,var(--v-blue) 8%,var(--v-canvas)); border-color:var(--v-text); } [data-slot="dropzone"][data-state="over"] { background:color-mix(in oklab,var(--v-blue) 18%,var(--v-canvas)); border:1.5px solid var(--v-text); } [data-slot="dropzone"][data-state="error"] { border-color:var(--v-danger-ink); } [data-slot="dropzone"]:focus-visible { outline:2px solid var(--ring); outline-offset:4px; } [data-slot="dropzone-art"] { position:relative; display:grid; place-items:center; width:104px; height:90px; margin:0 0 4px; } [data-slot="dropzone-art"] .v-drop__pebble { position:absolute; width:94px; height:94px; color:var(--v-blue); transform:rotate(-18deg); } [data-slot="dropzone-art"] .v-drop__flower { position:absolute; right:-2px; bottom:-2px; width:38px; height:38px; color:var(--v-yellow); transform:rotate(8deg); } [data-slot="dropzone-symbol"] { position:relative; display:grid; place-items:center; color:var(--ink-fixed); } [data-slot="dropzone-symbol"] .v-icon { width:32px; height:32px; stroke-width:1.8; } [data-slot="dropzone-copy"] { display:grid; gap:6px; max-width:38ch; } [data-slot="dropzone-copy"] b { font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.2; } [data-slot="dropzone-copy"] > span { font-size:14px; color:var(--v-text-2); line-height:1.45; } [data-slot="dropzone-action"] { display:inline-flex; align-items:center; gap:7px; border-bottom:1px solid currentColor; padding-bottom:2px; font-size:13px; font-weight:600; } [data-slot="dropzone-action"] .v-icon { width:15px; height:15px; } [data-slot="dropzone-help"] { max-width:48ch; font-size:12px; line-height:1.5; color:var(--v-text-2); overflow-wrap:anywhere; } [data-slot="dropzone-receipt"] { display:grid; gap:9px; width:100%; min-width:0; margin-top:2px; padding-top:14px; border-top:1px solid var(--v-border); text-align:start; font-size:13px; } [data-slot="dropzone-receipt"] > b { font-size:12px; font-weight:600; } [data-slot="dropzone-file"] { display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:8px; align-items:start; } [data-slot="dropzone-file"] .v-icon { width:16px; height:16px; } [data-slot="dropzone-file"] > span { overflow-wrap:anywhere; line-height:1.4; } [data-slot="dropzone-file"] small { color:var(--v-text-2); font-size:11px; line-height:1.6; } [data-slot="dropzone-error"] { width:100%; padding:12px 14px; background:color-mix(in oklab,var(--v-danger-ink) 8%,var(--v-canvas)); border-radius:12px; color:var(--v-danger-ink); font-size:13px; line-height:1.5; text-align:start; overflow-wrap:anywhere; } [data-slot="dropzone"][aria-disabled="true"] { cursor:not-allowed; color:var(--v-disabled-ink); background:var(--v-disabled-face); border-color:var(--v-disabled-edge); } [data-slot="dropzone"][aria-disabled="true"] [data-slot="dropzone-art"] { opacity:.5; } [data-slot="dropzone"].-compact { grid-template-columns:60px minmax(0,1fr); justify-items:start; gap:8px 16px; padding:20px; text-align:start; } [data-slot="dropzone"].-compact [data-slot="dropzone-art"] { grid-row:1 / 4; width:60px; height:64px; margin:0; } [data-slot="dropzone"].-compact .v-drop__pebble { width:62px; height:62px; } [data-slot="dropzone"].-compact .v-drop__flower { width:24px; height:24px; } [data-slot="dropzone"].-compact [data-slot="dropzone-symbol"] .v-icon { width:24px; height:24px; } [data-slot="dropzone"].-compact [data-slot="dropzone-copy"] b { font-size:18px; } [data-slot="dropzone"].-compact :is([data-slot="dropzone-help"],[data-slot="dropzone-receipt"],[data-slot="dropzone-error"]) { grid-column:1 / -1; } @media(max-width:420px) { [data-slot="dropzone"] { padding:24px 18px 20px; } } @media(prefers-reduced-motion:reduce) { [data-slot="dropzone"] { transition:none; } } } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/shape.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/presence.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/dropzone.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/dropzone.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/dropzone.css","content":"$51","type":"registry:file","target":"styles/cojeev/dropzone.css"}],"className":"h-[70svh] min-h-80"}]]}]