2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T4562,"use client"; import { IconFileUpload, IconUpload, IconX } from "@tabler/icons-react"; import { cva } from "class-variance-authority"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { fileMarkFor } from "@/components/ui/file-badge"; import { Dropzone } from "@/components/ui/magnetic-dropzone"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------------------------------------ * DropZone: the state and the parts around Kobra's magnetic dropzone. * * owns the file list, the rules (accept, maxSize, maxFiles) and the hidden input. * is the Kobra magnetic dropzone wired to it. and * are plainer drop surfaces (custom icon, custom button) for the cases the magnetic one does not fit. * shows what was added, as a list, a compact list or thumbnails. * ---------------------------------------------------------------------------------------------- */ export type DropZoneFile = { id: string; file: File; preview?: string }; type DropZoneContextValue = { files: DropZoneFile[]; accept?: string; maxSize?: number; multiple: boolean; disabled: boolean; error: string | null; add: (files: File[]) => void; remove: (id: string) => void; clearError: () => void; open: () => void; errorId: string; }; const Context = React.createContext(null); function useDropZone(part: string) { const ctx = React.useContext(Context); if (!ctx) throw new Error(`${part} must be rendered inside `); return ctx; } export function formatBytes(bytes: number) { if (bytes < 1024) return `${bytes} B`; const units = ["KB", "MB", "GB"]; let value = bytes / 1024; let unit = 0; while (value >= 1024 && unit < units.length - 1) { value /= 1024; unit += 1; } return `${value >= 10 ? Math.round(value) : value.toFixed(1).replace(/\.0$/, "")} ${units[unit]}`; } function matchesAccept(file: File, accept: string | undefined) { if (!accept?.trim()) return true; const name = file.name.toLowerCase(); return accept .split(",") .map((s) => s.trim().toLowerCase()) .filter(Boolean) .some((rule) => { if (rule.startsWith(".")) return name.endsWith(rule); if (rule.endsWith("/*")) return file.type.toLowerCase().startsWith(rule.slice(0, -1)); return file.type.toLowerCase() === rule; }); } const newId = (() => { let n = 0; return () => `file-${(n += 1)}`; })(); const isImage = (file: File) => file.type.startsWith("image/"); function toEntry(file: File, withPreview = true): DropZoneFile { return { id: newId(), file, preview: withPreview && isImage(file) ? URL.createObjectURL(file) : undefined }; } export type DropZoneProps = { /** Native `accept` syntax: ".pdf,image/*". */ accept?: string; /** Largest file in bytes. Larger files are turned away with a message beside the field. */ maxSize?: number; /** Most files the list can hold. Only with `multiple`. */ maxFiles?: number; multiple?: boolean; disabled?: boolean; /** Files already in the list. */ defaultFiles?: File[]; onFilesChange?: (files: File[]) => void; /** Called with the message when a file is turned away. */ onReject?: (message: string, files: File[]) => void; className?: string; children?: React.ReactNode; }; export function DropZone({ accept, maxSize, maxFiles, multiple = false, disabled = false, defaultFiles, onFilesChange, onReject, className, children, }: DropZoneProps) { const [files, setFiles] = React.useState(() => (defaultFiles ?? []).map((f) => toEntry(f, false))); const [error, setError] = React.useState(null); const inputRef = React.useRef(null); const errorId = React.useId(); const live = React.useRef(files); const cb = React.useRef({ onFilesChange, onReject }); React.useEffect(() => { live.current = files; cb.current = { onFilesChange, onReject }; }); // Previews are blob URLs, so they exist only on the client: make them after mount (this also covers the // strict-mode remount) and revoke every one when the zone goes away. React.useEffect(() => { const next = live.current.map((f) => (isImage(f.file) ? { ...f, preview: URL.createObjectURL(f.file) } : f)); live.current = next; setFiles(next); return () => { for (const f of live.current) if (f.preview) URL.revokeObjectURL(f.preview); }; }, []); const reject = React.useCallback((message: string, rejected: File[]) => { setError(message); cb.current.onReject?.(message, rejected); }, []); const add = React.useCallback( (incoming: File[]) => { if (incoming.length === 0) return; const wrongType = incoming.find((f) => !matchesAccept(f, accept)); if (wrongType) return reject(`${wrongType.name} is not a supported file type.`, [wrongType]); const tooBig = maxSize ? incoming.find((f) => f.size > maxSize) : undefined; if (tooBig) return reject(`${tooBig.name} is larger than ${formatBytes(maxSize ?? 0)}.`, [tooBig]); const current = live.current; let next: DropZoneFile[]; if (!multiple) { const first = incoming[0]; if (!first) return; for (const f of current) if (f.preview) URL.revokeObjectURL(f.preview); next = [toEntry(first)]; } else { const room = maxFiles ? maxFiles - current.length : Infinity; if (incoming.length > room) { return reject(room <= 0 ? `The list is full. Remove a file to add another (${maxFiles} at most).` : `Only ${room} more ${room === 1 ? "file fits" : "files fit"} (${maxFiles} at most).`, incoming); } next = [...current, ...incoming.map((f) => toEntry(f))]; } setError(null); live.current = next; setFiles(next); cb.current.onFilesChange?.(next.map((f) => f.file)); }, [accept, maxFiles, maxSize, multiple, reject], ); const remove = React.useCallback((id: string) => { const gone = live.current.find((f) => f.id === id); if (gone?.preview) URL.revokeObjectURL(gone.preview); const next = live.current.filter((f) => f.id !== id); live.current = next; setFiles(next); setError(null); cb.current.onFilesChange?.(next.map((f) => f.file)); }, []); const ctx = React.useMemo( () => ({ files, accept, maxSize, multiple, disabled, error, add, remove, clearError: () => setError(null), open: () => inputRef.current?.click(), errorId, }), [files, accept, maxSize, multiple, disabled, error, add, remove, errorId], ); return (

{ add([...(e.target.files ?? [])]); e.target.value = ""; }} /> {children}

); } /** Rules in words: "PNG, JPG up to 2 MB". */ export function DropZoneHint({ className, children, ...props }: React.ComponentProps<"p">) { const { accept, maxSize, multiple } = useDropZone("DropZoneHint"); const kinds = accept ?.split(",") .map((s) => s.trim()) .map((s) => (s === "image/*" ? "Images" : s.replace(/^\./, "").replace(/^[a-z]+\//, "").toUpperCase())) .filter(Boolean) .join(", "); return (

{children ?? [kinds, maxSize ? `up to ${formatBytes(maxSize)}` : null, multiple ? "several files" : null].filter(Boolean).join(" · ")}

); } /** Words beside the field when a file is turned away. `role="alert"`, so it is announced. */ export function DropZoneError({ className, ...props }: React.ComponentProps<"p">) { const { error, errorId } = useDropZone("DropZoneError"); return (

{error}

); } /** Kobra's magnetic dropzone, wired to the list. It returns to its prompt after a beat so more files can follow. */ export function DropZoneArea({ className }: { className?: string }) { const { accept, maxSize, multiple, disabled, add, clearError } = useDropZone("DropZoneArea"); const [round, setRound] = React.useState(0); const timer = React.useRef(0); React.useEffect(() => () => window.clearTimeout(timer.current), []); return (

{ if (files.length === 0) return; clearError(); add(files); window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setRound((n) => n + 1), 1600); }} />

); } const target = cva( "relative grid w-full place-items-center gap-1 rounded-xl border border-dashed border-input px-6 py-8 text-center outline-none transition-[background-color,border-color] duration-200 ease-(--ease-out) focus-visible:ring-3 focus-visible:ring-ring/50 data-dragging:border-foreground/40 data-dragging:bg-muted data-disabled:cursor-not-allowed data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:not-data-disabled:bg-muted/50", ); function useDragState(onDropFiles: (files: File[]) => void, disabled: boolean) { const [dragging, setDragging] = React.useState(false); const depth = React.useRef(0); return { dragging, handlers: { onDragEnter: (e: React.DragEvent) => { if (disabled) return; e.preventDefault(); depth.current += 1; setDragging(true); }, onDragOver: (e: React.DragEvent) => { if (disabled) return; e.preventDefault(); e.dataTransfer.dropEffect = "copy"; }, onDragLeave: () => { depth.current = Math.max(0, depth.current - 1); if (depth.current === 0) setDragging(false); }, onDrop: (e: React.DragEvent) => { if (disabled) return; e.preventDefault(); depth.current = 0; setDragging(false); onDropFiles([...e.dataTransfer.files]); }, }, }; } /** A plain drop surface with a custom icon and copy. Click or Enter opens the picker. */ export function DropZoneTarget({ icon, title = "Drop files here or browse", description, className, children, }: { icon?: React.ReactNode; title?: React.ReactNode; description?: React.ReactNode; className?: string; children?: React.ReactNode; }) { const { disabled, add, open, error, errorId, clearError } = useDropZone("DropZoneTarget"); const { dragging, handlers } = useDragState((files) => { clearError(); add(files); }, disabled); return (

!disabled && open()} onKeyDown={(e) => { if (!disabled && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); open(); } }} className={cn(target(), "cursor-pointer", className)} {...handlers} > {children ?? ( <> {icon ?? } {title} {description ? {description} : null} )}

); } /** Any button as the trigger. It opens the picker, and accepts a dropped file too. */ export function DropZoneTrigger({ render, children, className, }: { render?: React.ReactElement>; children?: React.ReactNode; className?: string; }) { const { disabled, add, open, clearError } = useDropZone("DropZoneTrigger"); const { dragging, handlers } = useDragState((files) => { clearError(); add(files); }, disabled); const props = { type: "button" as const, disabled, "data-slot": "drop-zone-trigger", "data-dragging": dragging ? "" : undefined, onClick: open, ...handlers, }; if (render) return React.cloneElement(render, props, children ?? (render.props.children as React.ReactNode)); return ( ); } export type DropZoneListProps = { /** `default`: a row per file. `compact`: a dense row with no size line. `thumbnails`: a grid of image tiles. */ variant?: "default" | "compact" | "thumbnails"; className?: string; /** Shown when the list is empty. Nothing renders by default. */ empty?: React.ReactNode; }; export function DropZoneList({ variant = "default", className, empty }: DropZoneListProps) { const { files, remove, disabled } = useDropZone("DropZoneList"); if (files.length === 0) return empty ?

{empty}

: null; return (

remove(f.id)} disabled={disabled} /> ))}

); } const itemRow = cva( "group/item relative flex items-center gap-3 rounded-lg border border-border bg-card text-card-foreground starting:translate-y-1 starting:opacity-0 transition-[translate,opacity] duration-200 ease-(--ease-out) motion-reduce:transition-none motion-reduce:starting:translate-y-0", { variants: { variant: { default: "p-2.5", compact: "px-2 py-1.5", thumbnails: "" } }, defaultVariants: { variant: "default" } }, ); export function DropZoneItem({ entry, variant = "default", onRemove, disabled, className, }: { entry: DropZoneFile; variant?: "default" | "compact" | "thumbnails"; onRemove: () => void; disabled?: boolean; className?: string; }) { const { file, preview } = entry; const mark = fileMarkFor(file); const removeButton = ( ); if (variant === "thumbnails") { return (

{preview ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( {file.name} )} {removeButton}

); } const compact = variant === "compact"; return (

{preview ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( mark )} {file.name} {compact ? null : {formatBytes(file.size)}} {compact ? {formatBytes(file.size)} : null} {removeButton}

); } export default DropZone; 31:T10eb,"use client"; import { IconCamera, IconPhotoUp, IconPaperclip } from "@tabler/icons-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { DemoGroup, DemoPage } from "../../feedback/_demo-group"; import { makeSampleFile, sampleFileSpecs } from "../_fixtures-b"; import { DropZone, DropZoneArea, DropZoneError, DropZoneHint, DropZoneList, DropZoneTarget, DropZoneTrigger } from "./drop-zone"; const seed = () => sampleFileSpecs.map(makeSampleFile); function useSeed() { return useState(seed)[0]; } function WithList() { return ( ); } function Attachments() { const files = useSeed(); return ( } title="Attach up to three files" description="Drop them here, or press Enter to browse" /> ); } function MultipleSeeded() { const files = useSeed(); return ( ); } function DisabledSeeded() { const files = useSeed(); return ( ); } export function DropZoneDemo() { return ( } title="Upload a cover image" description="Wide images work best" />

}> Take a photo } > or paste from a link

); } export default DropZoneDemo; 32:T82f,import type { BlockMeta } from "../../../lib/block-meta"; export const dropZoneMeta: BlockMeta = { slug: "drop-zone", title: "Drop zone", description: "The state and parts around Kobra's magnetic dropzone: accept filters, max size and max files with an alert beside the field, a file list (default, compact, thumbnails) with remove, custom icon and triggers.", group: "forms", kobraDeps: ["magnetic-dropzone", "file-badge", "button"], files: ["blocks/forms/drop-zone/drop-zone.tsx"], props: [ { name: "accept", type: "string", description: "Native accept syntax, e.g. '.pdf,image/*'." }, { name: "maxSize", type: "number", description: "Largest file in bytes; larger files are turned away in words." }, { name: "maxFiles", type: "number", description: "Most files the list holds (with multiple)." }, { name: "multiple", type: "boolean", default: "false", description: "Several files; otherwise a new file replaces the old one." }, { name: "disabled", type: "boolean", default: "false", description: "Inert and dimmed." }, { name: "defaultFiles", type: "File[]", description: "Files already in the list." }, { name: "onFilesChange", type: "(files: File[]) => void", description: "Called when the list changes." }, { name: "onReject", type: "(message: string, files: File[]) => void", description: "Called when files are turned away." }, { name: "DropZoneArea", type: "component", description: "The Kobra magnetic dropzone, wired in." }, { name: "DropZoneTarget", type: "{ icon, title, description }", description: "A plain drop surface with custom icon and copy." }, { name: "DropZoneTrigger", type: "{ render }", description: "Any button as a trigger that also takes drops." }, { name: "DropZoneList", type: "{ variant: 'default' | 'compact' | 'thumbnails' }", description: "What was added, with a remove action each." }, { name: "DropZoneHint / DropZoneError", type: "components", description: "The rules in words, and the role=alert message." }, ], tags: ["upload", "files", "dropzone", "form"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#forms","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Forms"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Drop zone"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Drop zone"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"The state and parts around Kobra's magnetic dropzone: accept filters, max size and max files with an alert beside the field, a file list (default, compact, thumbnails) with remove, custom icon and triggers."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"drop-zone","group":"forms","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/forms/drop-zone/drop-zone.tsx","code":"$30"},{"path":"blocks/forms/drop-zone/demo.tsx","code":"$31"},{"path":"blocks/forms/drop-zone/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]