@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,173 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { getPortalContainer } from "../../lib/scope.js";
+import "react";
+import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/dropdown-menu.tsx
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		container: getPortalContainer(),
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuContent({ className, align = "start", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, {
+		container: getPortalContainer(),
+		children: /* @__PURE__ */ jsx(DropdownMenu$1.Content, {
+			"data-slot": "dropdown-menu-content",
+			sideOffset,
+			align,
+			className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+			...props
+		})
+	});
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu$1.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu$1.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Label, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu$1.SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1.SubContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Secondary or tertiary actions on a row or entity, behind a "..." overflow trigger
+* - View/appearance toggles via DropdownMenuCheckboxItem, or a single-select list via
+*   DropdownMenuRadioGroup + DropdownMenuRadioItem
+* - Actions that benefit from grouping (DropdownMenuGroup/Label/Separator), keyboard shortcut
+*   hints (DropdownMenuShortcut), or nested submenus (DropdownMenuSub)
+*
+* NOT WHEN
+* - The action is a page's primary action — use Button directly
+* - The user is picking a value for a form field — use Select
+* - The menu opens on right-click rather than a click trigger — use ContextMenu
+*
+* KEY RULES
+* - DropdownMenuItem accepts variant="default" | "destructive"; use "destructive" for
+*   irreversible entries (delete, log out, remove) instead of custom text-color classes
+* - Wrap DropdownMenuTrigger's child in asChild so the trigger renders as that element
+*   (e.g. a Button) rather than being wrapped in an extra <button>
+* - DropdownMenuContent defaults to align="start" and sideOffset={4}; width is controlled
+*   via className (e.g. "w-56"), not a prop
+* - DropdownMenuCheckboxItem/RadioItem are controlled — checked/value and their onChange
+*   handlers must be wired by the caller, they hold no internal state
+*
+* USAGE
+* <DropdownMenu>
+*   <DropdownMenuTrigger asChild><Button variant="outline">Open menu</Button></DropdownMenuTrigger>
+*   <DropdownMenuContent className="w-56">
+*     <DropdownMenuLabel>My account</DropdownMenuLabel>
+*     <DropdownMenuSeparator />
+*     <DropdownMenuItem><UserIcon />Profile<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut></DropdownMenuItem>
+*     <DropdownMenuItem variant="destructive"><LogOutIcon />Log out</DropdownMenuItem>
+*   </DropdownMenuContent>
+* </DropdownMenu>
+*
+* <DropdownMenuCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>
+*   Status bar
+* </DropdownMenuCheckboxItem>
+*/
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/ui/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../src/components/ui/dropdown-menu.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * DropdownMenu — menu of actions or options opened from a trigger element\n *\n * Built on the Radix DropdownMenu primitive (Root/Trigger/Content/Item/...),\n * styled with MMDS popover/accent tokens, with a `variant=\"destructive\"`\n * styling hook on DropdownMenuItem for dangerous entries.\n */\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { getPortalContainer } from \"@/lib/scope\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal\n      data-slot=\"dropdown-menu-portal\"\n      container={getPortalContainer()}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal container={getPortalContainer()}>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n\n/**\n * WHEN TO USE\n * - Secondary or tertiary actions on a row or entity, behind a \"...\" overflow trigger\n * - View/appearance toggles via DropdownMenuCheckboxItem, or a single-select list via\n *   DropdownMenuRadioGroup + DropdownMenuRadioItem\n * - Actions that benefit from grouping (DropdownMenuGroup/Label/Separator), keyboard shortcut\n *   hints (DropdownMenuShortcut), or nested submenus (DropdownMenuSub)\n *\n * NOT WHEN\n * - The action is a page's primary action — use Button directly\n * - The user is picking a value for a form field — use Select\n * - The menu opens on right-click rather than a click trigger — use ContextMenu\n *\n * KEY RULES\n * - DropdownMenuItem accepts variant=\"default\" | \"destructive\"; use \"destructive\" for\n *   irreversible entries (delete, log out, remove) instead of custom text-color classes\n * - Wrap DropdownMenuTrigger's child in asChild so the trigger renders as that element\n *   (e.g. a Button) rather than being wrapped in an extra <button>\n * - DropdownMenuContent defaults to align=\"start\" and sideOffset={4}; width is controlled\n *   via className (e.g. \"w-56\"), not a prop\n * - DropdownMenuCheckboxItem/RadioItem are controlled — checked/value and their onChange\n *   handlers must be wired by the caller, they hold no internal state\n *\n * USAGE\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild><Button variant=\"outline\">Open menu</Button></DropdownMenuTrigger>\n *   <DropdownMenuContent className=\"w-56\">\n *     <DropdownMenuLabel>My account</DropdownMenuLabel>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem><UserIcon />Profile<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut></DropdownMenuItem>\n *     <DropdownMenuItem variant=\"destructive\"><LogOutIcon />Log out</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n *\n * <DropdownMenuCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>\n *   Status bar\n * </DropdownMenuCheckboxItem>\n */\n"],"mappings":";;;;;;;;AAiBA,SAAS,aAAa,EACpB,GAAG,SACuD;CAC1D,OAAO,oBAAC,eAAsB,MAAvB;EAA4B,aAAU;EAAgB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,mBAAmB,EAC1B,GAAG,SACyD;CAC5D,OACE,oBAAC,eAAsB,QAAvB;EACE,aAAU;EACV,WAAW,mBAAmB;EAC9B,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,GAAG,SAC0D;CAC7D,OACE,oBAAC,eAAsB,SAAvB;EACE,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,QAAQ,SACR,aAAa,GACb,GAAG,SAC0D;CAC7D,OACE,oBAAC,eAAsB,QAAvB;EAA8B,WAAW,mBAAmB;EAC1D,UAAA,oBAAC,eAAsB,SAAvB;GACE,aAAU;GACE;GACL;GACP,WAAW,GACT,uqBACA,SACF;GACA,GAAI;EACL,CAAA;CAC2B,CAAA;AAElC;AAEA,SAAS,kBAAkB,EACzB,GAAG,SACwD;CAC3D,OACE,oBAAC,eAAsB,OAAvB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAE7E;AAEA,SAAS,iBAAiB,EACxB,WACA,OACA,UAAU,WACV,GAAG,SAIF;CACD,OACE,oBAAC,eAAsB,MAAvB;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,8oBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,yBAAyB,EAChC,WACA,UACA,SACA,OACA,GAAG,SAGF;CACD,OACE,qBAAC,eAAsB,cAAvB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,8VACA,SACF;EACS;EACT,GAAI;EARN,UAAA,CAUE,oBAAC,QAAD;GACE,WAAU;GACV,aAAU;GAEV,UAAA,oBAAC,eAAsB,eAAvB,EAAA,UACE,oBAAC,WAAD,CAAY,CAAA,EACuB,CAAA;EACjC,CAAA,GACL,QACiC;;AAExC;AAEA,SAAS,uBAAuB,EAC9B,GAAG,SAC6D;CAChE,OACE,oBAAC,eAAsB,YAAvB;EACE,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,WACA,UACA,OACA,GAAG,SAGF;CACD,OACE,qBAAC,eAAsB,WAAvB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,8VACA,SACF;EACA,GAAI;EAPN,UAAA,CASE,oBAAC,QAAD;GACE,WAAU;GACV,aAAU;GAEV,UAAA,oBAAC,eAAsB,eAAvB,EAAA,UACE,oBAAC,WAAD,CAAY,CAAA,EACuB,CAAA;EACjC,CAAA,GACL,QAC8B;;AAErC;AAEA,SAAS,kBAAkB,EACzB,WACA,OACA,GAAG,SAGF;CACD,OACE,oBAAC,eAAsB,OAAvB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,yEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,oBAAC,eAAsB,WAAvB;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,qBAAqB,EAC5B,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,+GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EACvB,GAAG,SACsD;CACzD,OAAO,oBAAC,eAAsB,KAAvB;EAA2B,aAAU;EAAoB,GAAI;CAAQ,CAAA;AAC9E;AAEA,SAAS,uBAAuB,EAC9B,WACA,OACA,UACA,GAAG,SAGF;CACD,OACE,qBAAC,eAAsB,YAAvB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,yXACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACD,oBAAC,kBAAD,EAAkB,WAAU,UAAW,CAAA,CACP;;AAEtC;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAAC,eAAsB,YAAvB;EACE,aAAU;EACV,WAAW,GACT,shBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/dropzone.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Dropzone — click-or-drag target that hands files to the caller.
+ *
+ * A composite over Attachment, not a new primitive: it's Attachment's
+ * `state="idle"` dashed-border look wired up with a native hidden file
+ * input plus drag-and-drop handlers. Selected files themselves aren't
+ * rendered here — map them to a stack of Attachment rows below the
+ * dropzone (state="uploading"/"error"/"done" per file, AttachmentAction
+ * for retry/remove) the same way any other Attachment list works.
+ * FileTypeIcon (below) gives each row a colored icon circle per file type,
+ * as an AttachmentMedia composition.
+ */
+import * as React from "react";
+import { AttachmentMedia } from "../../components/ui/attachment";
+type FileTypeFamily = "video" | "image" | "document" | "audio" | "other";
+/** Derives a file-type family from a File or a plain MIME-type string. */
+declare function getFileTypeFamily(file: File | string): FileTypeFamily;
+/**
+ * FileTypeIcon — colored icon-circle, per file type.
+ *
+ * A thin AttachmentMedia composition, not a new primitive: swaps its default
+ * square muted-bg look for a `rounded-full` circle tinted per file-type
+ * family (derived from `file`'s MIME type, or pass `family` directly).
+ */
+declare function FileTypeIcon({ file, family, className, ...props }: Omit<React.ComponentProps<typeof AttachmentMedia>, "variant" | "children"> & {
+    file?: File | string;
+    family?: FileTypeFamily;
+}): React.JSX.Element;
+declare function Dropzone({ className, onFilesSelected, accept, multiple, disabled, size, state, activeContent, errorContent, children, id, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, inputRef, ...props }: Omit<React.ComponentProps<"label">, "onDrop" | "onDragOver" | "onDragLeave"> & {
+    onFilesSelected: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    size?: "default" | "sm" | "xs";
+    /** Overrides the drag-derived visual state — mainly for demos; leave unset for real drag-and-drop. */
+    state?: "default" | "active" | "error";
+    /** Overrides the built-in "active" feedback content (icon + "Drag your files here"). */
+    activeContent?: React.ReactNode;
+    /** Overrides the built-in "error" feedback content (icon + "File format not accepted"). */
+    errorContent?: React.ReactNode;
+    /** Ref to the underlying (visually-hidden) `<input type="file">` — the actual control `id`/`aria-describedby`/`aria-invalid` land on, not the outer `<label>`. */
+    inputRef?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+export { Dropzone, FileTypeIcon, getFileTypeFamily };
+/**
+ * WHEN TO USE
+ * - A drag-and-drop or click-to-browse target for picking one or more files
+ * - Paired with a list of Attachment rows below it, one per selected file,
+ *   for per-file progress/error/remove — this is Dropzone's job, not the
+ *   list's; there's no dedicated list component, just Attachment rows
+ * - FileTypeIcon on each row's AttachmentMedia slot for colored, per-type
+ *   icon circles (video/image/document/audio/other)
+ *
+ * NOT WHEN
+ * - A plain, unstyled file input with no drop target or preview — use Input type="file"
+ * - Files are already attached and just need to be displayed — use Attachment/AttachmentGroup directly
+ *
+ * KEY RULES
+ * - `onFilesSelected(files: File[])` fires from both the native picker (click) and drag-and-drop —
+ *   handle it once, not twice
+ * - `size`: "default" | "sm" | "xs" — controls LAYOUT (Dropzone owns this via `dropzoneVariants`,
+ *   not just padding/icon-size): "default" stacks the icon above the text, "sm" puts the icon on
+ *   the left instead (row, not stacked — the format/size hint stays, it's not optional info, just
+ *   repositioned), "xs" drops the icon entirely down to one compact text line — same rule every
+ *   other xs UI state in this library follows (see Empty). The children themselves (icon, hint
+ *   text) are still fully custom — Dropzone only dictates the flex direction and whether there's
+ *   room to show a leading icon; get the actual "which size shows what" split from a real example
+ *   like the Sizes story, don't just eyeball it from this list.
+ * - `state` is normally left unset — Dropzone derives "active" (valid drag-over) and "error"
+ *   (drag-over with a file type `accept` would reject) from real drag events by inspecting
+ *   `dataTransfer.items[].type`, which browsers expose pre-drop. Pass `state` explicitly only
+ *   to force a look for a demo; a real Dropzone should let this stay derived.
+ * - Unlike the idle look, "active"/"error" REPLACE `children` with built-in feedback (a filled
+ *   icon + a short line — "Drag your files here" / "File format not accepted", no icon at
+ *   `size="xs"` same as everywhere else) — override via `activeContent`/`errorContent` if the
+ *   defaults don't fit; this is deliberate, not something to fight with children-based tricks.
+ * - The drag-over "error" look is a file-type warning ONLY, and it does not block the drop —
+ *   the file still reaches `onFilesSelected`. File size can't be checked before drop (browsers
+ *   don't expose it until then), so "file too large" is always a file-list-level error — render
+ *   that file's Attachment with `state="error"` and the reason in AttachmentDescription, not
+ *   as a Dropzone state.
+ * - The dropzone renders as a `label` wrapping a visually-hidden `<input type="file">`, so
+ *   clicking anywhere in it opens the OS file picker with zero extra JS
+ * - `accept`/`multiple`/`disabled` map straight to the underlying input's attributes
+ * - `id`/`aria-describedby`/`aria-invalid` land on the underlying `<input type="file">`, not the
+ *   outer `<label>` — a label only passes its accessible *name* through, not these relationships —
+ *   so wire hint/error text (e.g. a rejection reason) through `aria-describedby`/`aria-invalid`
+ *   rather than assuming label-wrapping is enough. `id` falls back to a generated one if unset.
+ *   `inputRef` reaches the same underlying input if you need the ref itself.
+ * - Idle-state content (icon, "Drag files here or browse", format/size hints, an optional sample-
+ *   file link) is fully custom via children — nothing is hardcoded, this component only owns the
+ *   interaction wiring, the idle-state look, and the active/error feedback swap above
+ * - FileTypeIcon derives its color+icon from `file`'s MIME type (or pass `family` directly) — it's
+ *   an AttachmentMedia composition (`rounded-full` + a per-family tint), not a new component tree
+ * - Attachment defaults to `w-fit` (sized to its own content, right for a horizontal chip strip) —
+ *   for a vertical file list where every row should line up at the same width, pass
+ *   `className="w-full"` on each Attachment row
+ * - AttachmentAction covers both retry and remove — render two of them (retry then remove) on an
+ *   error row, one (remove) otherwise
+ *
+ * USAGE
+ * const [files, setFiles] = React.useState<Array<{ file: File; state: "uploading" | "error" | "done" }>>([])
+ * <div className="grid gap-3">
+ *   <Dropzone
+ *     accept="image/png,image/jpeg"
+ *     onFilesSelected={(picked) =>
+ *       setFiles((prev) => [...prev, ...picked.map((file) => ({ file, state: "uploading" as const }))])
+ *     }
+ *   >
+ *     <UploadIcon className="text-muted-foreground" />
+ *     <p className="text-sm font-medium">Drag your files here or <span className="text-primary">browse</span></p>
+ *     <p className="text-xs text-muted-foreground">PNG or JPEG, up to 25MB</p>
+ *   </Dropzone>
+ *
+ *   {files.map(({ file, state }) => (
+ *     <Attachment key={file.name} state={state} className="w-full">
+ *       <FileTypeIcon file={file} />
+ *       <AttachmentContent>
+ *         <AttachmentTitle>{file.name}</AttachmentTitle>
+ *         <AttachmentDescription>
+ *           {state === "error" ? "File exceeds the 25MB limit" : `${(file.size / 1024).toFixed(1)} KB`}
+ *         </AttachmentDescription>
+ *       </AttachmentContent>
+ *       <AttachmentActions>
+ *         {state === "error" && (
+ *           <AttachmentAction aria-label={`Retry ${file.name}`} onClick={() => retry(file)}>
+ *             <RefreshCwIcon />
+ *           </AttachmentAction>
+ *         )}
+ *         <AttachmentAction
+ *           aria-label={`Remove ${file.name}`}
+ *           onClick={() => setFiles((prev) => prev.filter((f) => f.file !== file))}
+ *         >
+ *           <XIcon />
+ *         </AttachmentAction>
+ *       </AttachmentActions>
+ *     </Attachment>
+ *   ))}
+ * </div>
+ */
+//# sourceMappingURL=dropzone.d.ts.map

package/dist/components/ui/dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropzone.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,EAAc,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAExE,KAAK,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAA;AAExE,0EAA0E;AAC1E,iBAAS,iBAAiB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,cAAc,CAO9D;AAkDD;;;;;;GAMG;AACH,iBAAS,YAAY,CAAC,EACpB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CACL,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAC5C,SAAS,GAAG,UAAU,CACvB,GAAG;IACF,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,qBAaA;AA4ED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,eAAe,EACf,MAAM,EACN,QAAe,EACf,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,EAAE,EACF,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CACL,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,QAAQ,GAAG,YAAY,GAAG,aAAa,CACxC,GAAG;IACF,eAAe,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;IACtC,wFAAwF;IACxF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,2FAA2F;IAC3F,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kKAAkK;IAClK,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CACvC,qBAyEA;AAED,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG"}

package/dist/components/ui/dropzone.js

@@ -0,0 +1,257 @@
+import { cn } from "../../lib/utils.js";
+import { Attachment, AttachmentMedia } from "./attachment.js";
+import * as React from "react";
+import { ArrowDownToLineIcon, FileAudioIcon, FileIcon, FileTextIcon, FileVideoIcon, ImageIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/dropzone.tsx
+/**
+* Dropzone — click-or-drag target that hands files to the caller.
+*
+* A composite over Attachment, not a new primitive: it's Attachment's
+* `state="idle"` dashed-border look wired up with a native hidden file
+* input plus drag-and-drop handlers. Selected files themselves aren't
+* rendered here — map them to a stack of Attachment rows below the
+* dropzone (state="uploading"/"error"/"done" per file, AttachmentAction
+* for retry/remove) the same way any other Attachment list works.
+* FileTypeIcon (below) gives each row a colored icon circle per file type,
+* as an AttachmentMedia composition.
+*/
+/** Derives a file-type family from a File or a plain MIME-type string. */
+function getFileTypeFamily(file) {
+	const type = typeof file === "string" ? file : file.type;
+	if (type.startsWith("video/")) return "video";
+	if (type.startsWith("image/")) return "image";
+	if (type.startsWith("audio/")) return "audio";
+	if (type.startsWith("application/")) return "document";
+	return "other";
+}
+/** Whether a dragged item's MIME type matches an `accept` list (comma-separated, wildcards like "image/*" supported). */
+function matchesAccept(type, accept) {
+	if (!type) return true;
+	return accept.split(",").map((entry) => entry.trim()).filter(Boolean).some((entry) => entry.endsWith("/*") ? type.startsWith(entry.slice(0, -1)) : type === entry);
+}
+var fileTypeIcons = {
+	video: FileVideoIcon,
+	image: ImageIcon,
+	document: FileTextIcon,
+	audio: FileAudioIcon,
+	other: FileIcon
+};
+var fileTypeAccents = {
+	video: "!bg-chart-2/15 !text-chart-2",
+	image: "!bg-chart-6/15 !text-chart-6",
+	document: "!bg-chart-3/15 !text-chart-3",
+	audio: "!bg-chart-1/15 !text-chart-1",
+	other: "!bg-chart-4/15 !text-chart-4"
+};
+/**
+* FileTypeIcon — colored icon-circle, per file type.
+*
+* A thin AttachmentMedia composition, not a new primitive: swaps its default
+* square muted-bg look for a `rounded-full` circle tinted per file-type
+* family (derived from `file`'s MIME type, or pass `family` directly).
+*/
+function FileTypeIcon({ file, family, className, ...props }) {
+	const resolvedFamily = family ?? (file ? getFileTypeFamily(file) : "other");
+	const Icon = fileTypeIcons[resolvedFamily];
+	return /* @__PURE__ */ jsx(AttachmentMedia, {
+		variant: "icon",
+		className: cn("rounded-full", fileTypeAccents[resolvedFamily], className),
+		...props,
+		children: /* @__PURE__ */ jsx(Icon, {})
+	});
+}
+var dropzoneVariants = cva("group/dropzone w-full cursor-pointer items-center justify-center transition-colors", {
+	variants: { size: {
+		default: "flex-col gap-1.5 p-6 text-center [&_svg:not([class*='size-'])]:size-8",
+		sm: "flex-row gap-3 p-4 text-left [&_svg:not([class*='size-'])]:size-6",
+		xs: "flex-row gap-2 p-2.5 text-left [&_svg:not([class*='size-'])]:size-5"
+	} },
+	defaultVariants: { size: "default" }
+});
+var dropzoneFeedbackIconVariants = cva("flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", {
+	variants: { size: {
+		default: "size-10 [&_svg:not([class*='size-'])]:size-5",
+		sm: "size-9 [&_svg:not([class*='size-'])]:size-4",
+		xs: "size-7 [&_svg:not([class*='size-'])]:size-4"
+	} },
+	defaultVariants: { size: "default" }
+});
+/** Default "active" (valid drag-over) feedback — a filled icon plus a short instruction, replacing `children` entirely while dragging. No icon at xs, same as everywhere else in this file. */
+function DropzoneActiveContent({ size }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [size !== "xs" && /* @__PURE__ */ jsx("div", {
+		className: cn(dropzoneFeedbackIconVariants({ size }), "rounded-lg bg-primary text-primary-foreground"),
+		children: /* @__PURE__ */ jsx(ArrowDownToLineIcon, {})
+	}), /* @__PURE__ */ jsx("p", {
+		className: "font-medium text-primary",
+		children: "Drag your files here"
+	})] });
+}
+/** Default "error" (rejected file type on drag-over) feedback — a filled "!" plus a short reason, replacing `children` entirely while dragging. No icon at xs, same as everywhere else in this file. */
+function DropzoneErrorContent({ size }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [size !== "xs" && /* @__PURE__ */ jsx("div", {
+		className: cn(dropzoneFeedbackIconVariants({ size }), "rounded-full bg-destructive text-destructive-foreground"),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-base leading-none font-bold",
+			children: "!"
+		})
+	}), /* @__PURE__ */ jsx("p", {
+		className: "font-medium text-destructive",
+		children: "File format not accepted"
+	})] });
+}
+function Dropzone({ className, onFilesSelected, accept, multiple = true, disabled, size = "default", state, activeContent, errorContent, children, id, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, inputRef, ...props }) {
+	const [dragState, setDragState] = React.useState("default");
+	const resolvedState = state ?? dragState;
+	const generatedId = React.useId();
+	const inputId = id ?? generatedId;
+	return /* @__PURE__ */ jsxs("label", {
+		"data-slot": "dropzone",
+		"data-state": resolvedState,
+		className: cn("block", disabled && "cursor-not-allowed"),
+		...props,
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			type: "file",
+			id: inputId,
+			"data-slot": "dropzone-input",
+			className: "sr-only",
+			accept,
+			multiple,
+			disabled,
+			"aria-describedby": ariaDescribedby,
+			"aria-invalid": ariaInvalid,
+			onChange: (e) => {
+				const files = Array.from(e.target.files ?? []);
+				e.target.value = "";
+				if (files.length) onFilesSelected(files);
+			}
+		}), /* @__PURE__ */ jsxs(Attachment, {
+			"data-slot": "dropzone-target",
+			state: "idle",
+			orientation: "vertical",
+			onDragOver: (e) => {
+				e.preventDefault();
+				if (disabled) return;
+				const items = Array.from(e.dataTransfer.items ?? []);
+				const allAccepted = !accept || items.every((item) => matchesAccept(item.type, accept));
+				setDragState(allAccepted ? "active" : "error");
+			},
+			onDragLeave: () => setDragState("default"),
+			onDrop: (e) => {
+				e.preventDefault();
+				setDragState("default");
+				if (disabled) return;
+				const files = Array.from(e.dataTransfer.files ?? []);
+				if (files.length) onFilesSelected(files);
+			},
+			className: cn(dropzoneVariants({ size }), resolvedState === "active" && "border-primary bg-primary/10", resolvedState === "error" && "border-destructive bg-destructive/10", disabled && "pointer-events-none opacity-50", className),
+			children: [
+				resolvedState === "default" && children,
+				resolvedState === "active" && (activeContent ?? /* @__PURE__ */ jsx(DropzoneActiveContent, { size })),
+				resolvedState === "error" && (errorContent ?? /* @__PURE__ */ jsx(DropzoneErrorContent, { size }))
+			]
+		})]
+	});
+}
+/**
+* WHEN TO USE
+* - A drag-and-drop or click-to-browse target for picking one or more files
+* - Paired with a list of Attachment rows below it, one per selected file,
+*   for per-file progress/error/remove — this is Dropzone's job, not the
+*   list's; there's no dedicated list component, just Attachment rows
+* - FileTypeIcon on each row's AttachmentMedia slot for colored, per-type
+*   icon circles (video/image/document/audio/other)
+*
+* NOT WHEN
+* - A plain, unstyled file input with no drop target or preview — use Input type="file"
+* - Files are already attached and just need to be displayed — use Attachment/AttachmentGroup directly
+*
+* KEY RULES
+* - `onFilesSelected(files: File[])` fires from both the native picker (click) and drag-and-drop —
+*   handle it once, not twice
+* - `size`: "default" | "sm" | "xs" — controls LAYOUT (Dropzone owns this via `dropzoneVariants`,
+*   not just padding/icon-size): "default" stacks the icon above the text, "sm" puts the icon on
+*   the left instead (row, not stacked — the format/size hint stays, it's not optional info, just
+*   repositioned), "xs" drops the icon entirely down to one compact text line — same rule every
+*   other xs UI state in this library follows (see Empty). The children themselves (icon, hint
+*   text) are still fully custom — Dropzone only dictates the flex direction and whether there's
+*   room to show a leading icon; get the actual "which size shows what" split from a real example
+*   like the Sizes story, don't just eyeball it from this list.
+* - `state` is normally left unset — Dropzone derives "active" (valid drag-over) and "error"
+*   (drag-over with a file type `accept` would reject) from real drag events by inspecting
+*   `dataTransfer.items[].type`, which browsers expose pre-drop. Pass `state` explicitly only
+*   to force a look for a demo; a real Dropzone should let this stay derived.
+* - Unlike the idle look, "active"/"error" REPLACE `children` with built-in feedback (a filled
+*   icon + a short line — "Drag your files here" / "File format not accepted", no icon at
+*   `size="xs"` same as everywhere else) — override via `activeContent`/`errorContent` if the
+*   defaults don't fit; this is deliberate, not something to fight with children-based tricks.
+* - The drag-over "error" look is a file-type warning ONLY, and it does not block the drop —
+*   the file still reaches `onFilesSelected`. File size can't be checked before drop (browsers
+*   don't expose it until then), so "file too large" is always a file-list-level error — render
+*   that file's Attachment with `state="error"` and the reason in AttachmentDescription, not
+*   as a Dropzone state.
+* - The dropzone renders as a `label` wrapping a visually-hidden `<input type="file">`, so
+*   clicking anywhere in it opens the OS file picker with zero extra JS
+* - `accept`/`multiple`/`disabled` map straight to the underlying input's attributes
+* - `id`/`aria-describedby`/`aria-invalid` land on the underlying `<input type="file">`, not the
+*   outer `<label>` — a label only passes its accessible *name* through, not these relationships —
+*   so wire hint/error text (e.g. a rejection reason) through `aria-describedby`/`aria-invalid`
+*   rather than assuming label-wrapping is enough. `id` falls back to a generated one if unset.
+*   `inputRef` reaches the same underlying input if you need the ref itself.
+* - Idle-state content (icon, "Drag files here or browse", format/size hints, an optional sample-
+*   file link) is fully custom via children — nothing is hardcoded, this component only owns the
+*   interaction wiring, the idle-state look, and the active/error feedback swap above
+* - FileTypeIcon derives its color+icon from `file`'s MIME type (or pass `family` directly) — it's
+*   an AttachmentMedia composition (`rounded-full` + a per-family tint), not a new component tree
+* - Attachment defaults to `w-fit` (sized to its own content, right for a horizontal chip strip) —
+*   for a vertical file list where every row should line up at the same width, pass
+*   `className="w-full"` on each Attachment row
+* - AttachmentAction covers both retry and remove — render two of them (retry then remove) on an
+*   error row, one (remove) otherwise
+*
+* USAGE
+* const [files, setFiles] = React.useState<Array<{ file: File; state: "uploading" | "error" | "done" }>>([])
+* <div className="grid gap-3">
+*   <Dropzone
+*     accept="image/png,image/jpeg"
+*     onFilesSelected={(picked) =>
+*       setFiles((prev) => [...prev, ...picked.map((file) => ({ file, state: "uploading" as const }))])
+*     }
+*   >
+*     <UploadIcon className="text-muted-foreground" />
+*     <p className="text-sm font-medium">Drag your files here or <span className="text-primary">browse</span></p>
+*     <p className="text-xs text-muted-foreground">PNG or JPEG, up to 25MB</p>
+*   </Dropzone>
+*
+*   {files.map(({ file, state }) => (
+*     <Attachment key={file.name} state={state} className="w-full">
+*       <FileTypeIcon file={file} />
+*       <AttachmentContent>
+*         <AttachmentTitle>{file.name}</AttachmentTitle>
+*         <AttachmentDescription>
+*           {state === "error" ? "File exceeds the 25MB limit" : `${(file.size / 1024).toFixed(1)} KB`}
+*         </AttachmentDescription>
+*       </AttachmentContent>
+*       <AttachmentActions>
+*         {state === "error" && (
+*           <AttachmentAction aria-label={`Retry ${file.name}`} onClick={() => retry(file)}>
+*             <RefreshCwIcon />
+*           </AttachmentAction>
+*         )}
+*         <AttachmentAction
+*           aria-label={`Remove ${file.name}`}
+*           onClick={() => setFiles((prev) => prev.filter((f) => f.file !== file))}
+*         >
+*           <XIcon />
+*         </AttachmentAction>
+*       </AttachmentActions>
+*     </Attachment>
+*   ))}
+* </div>
+*/
+//#endregion
+export { Dropzone, FileTypeIcon, getFileTypeFamily };
+
+//# sourceMappingURL=dropzone.js.map