@hex-core/components 1.3.0 → 1.4.0

package/dist/drawer.d.ts

@@ -0,0 +1,41 @@
+import * as vaul from 'vaul';
+import { Drawer as Drawer$1 } from 'vaul';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type DrawerRootProps = React.ComponentPropsWithoutRef<typeof Drawer$1.Root>;
+/**
+ * Root container for a bottom drawer (vaul). Manages open state, drag, and snap points.
+ * @returns A drawer root that coordinates overlay, content, and dismiss behavior.
+ */
+declare function Drawer({ shouldScaleBackground, ...props }: DrawerRootProps): react_jsx_runtime.JSX.Element;
+declare namespace Drawer {
+    var displayName: string;
+}
+/** The element that opens the drawer when clicked. */
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Portals drawer overlay and content into the body. */
+declare const DrawerPortal: typeof vaul.Portal;
+/** Closes the drawer when rendered inside DrawerContent. */
+declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/** Dimmed backdrop behind the drawer content. */
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** The drawer content panel. Slides up from the bottom and can be dragged down to dismiss. */
+declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Header container inside DrawerContent; stacks title and description.
+ * @returns A div with vertical rhythm.
+ */
+declare function DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+/**
+ * Footer container inside DrawerContent; stacks action buttons.
+ * @returns A div that stacks buttons vertically with consistent gutters.
+ */
+declare function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+/** Accessible drawer title; vaul wires it to aria-labelledby automatically. */
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+/** Accessible drawer description; vaul wires it to aria-describedby automatically. */
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

package/dist/drawer.js

@@ -0,0 +1,82 @@
+"use client";
+import * as React from 'react';
+import { Drawer as Drawer$1 } from 'vaul';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Drawer({ shouldScaleBackground = true, ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { shouldScaleBackground, ...props });
+}
+Drawer.displayName = "Drawer";
+var DrawerTrigger = Drawer$1.Trigger;
+var DrawerPortal = Drawer$1.Portal;
+var DrawerClose = Drawer$1.Close;
+var DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+var DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    Drawer$1.Content,
+    {
+      ref,
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-foreground/[0.08] bg-background",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-[var(--space-4,1rem)] h-2 w-[100px] rounded-full bg-muted", "aria-hidden": "true" }),
+        children
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid gap-1.5 p-[var(--space-4,1rem)] text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col gap-[var(--gap-sm,0.5rem)] p-[var(--space-4,1rem)]", className), ...props });
+}
+var DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = "DrawerDescription";
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
+//# sourceMappingURL=drawer.js.map
+//# sourceMappingURL=drawer.js.map

package/dist/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/drawer/drawer.tsx"],"names":["DrawerPrimitive"],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACEA,SAAS,OAAO,EAAE,qBAAA,GAAwB,IAAA,EAAM,GAAG,OAAM,EAAoB;AAC5E,EAAA,2BAAQA,QAAA,CAAgB,IAAA,EAAhB,EAAqB,qBAAA,EAA+C,GAAG,KAAA,EAAO,CAAA;AACvF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AAGrB,IAAM,gBAAgBA,QAAA,CAAgB;AAGtC,IAAM,eAAeA,QAAA,CAAgB;AAGrC,IAAM,cAAcA,QAAA,CAAgB;AAGpC,IAAM,aAAA,GAAsB,iBAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAACA,QAAA,CAAgB,OAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,sDAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAG5B,IAAM,aAAA,GAAsB,KAAA,CAAA,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACrC,IAAA,CAAC,YAAA,EAAA,EACA,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,kBACf,IAAA;AAAA,IAACA,QAAA,CAAgB,OAAA;AAAA,IAAhB;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,yHAAA;AAAA,QACA;AAAA,OACD;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sEAAA,EAAuE,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,QACxG;AAAA;AAAA;AAAA;AACF,CAAA,EACD,CACA;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAM5B,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAyC;AACpF,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,+DAAA,EAAiE,SAAS,CAAA;AAAA,MACvF,GAAG;AAAA;AAAA,GACL;AAEF;AAMA,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAyC;AACpF,EAAA,uBAAO,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,4EAA4E,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC9H;AAGA,IAAM,WAAA,GAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAACA,QAAA,CAAgB,KAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,IAC3E,GAAG;AAAA;AACL,CACA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,iBAAA,GAA0B,iBAG9B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAACA,QAAA,CAAgB,WAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACL,CACA;AACD,iBAAA,CAAkB,WAAA,GAAc,mBAAA","file":"drawer.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\nimport { cn } from \"../../lib/utils.js\";\n\ntype DrawerRootProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>;\n\n/**\n * Root container for a bottom drawer (vaul). Manages open state, drag, and snap points.\n * @returns A drawer root that coordinates overlay, content, and dismiss behavior.\n */\nfunction Drawer({ shouldScaleBackground = true, ...props }: DrawerRootProps) {\n\treturn <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />;\n}\nDrawer.displayName = \"Drawer\";\n\n/** The element that opens the drawer when clicked. */\nconst DrawerTrigger = DrawerPrimitive.Trigger;\n\n/** Portals drawer overlay and content into the body. */\nconst DrawerPortal = DrawerPrimitive.Portal;\n\n/** Closes the drawer when rendered inside DrawerContent. */\nconst DrawerClose = DrawerPrimitive.Close;\n\n/** Dimmed backdrop behind the drawer content. */\nconst DrawerOverlay = React.forwardRef<\n\tReact.ComponentRef<typeof DrawerPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DrawerPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDrawerOverlay.displayName = \"DrawerOverlay\";\n\n/** The drawer content panel. Slides up from the bottom and can be dragged down to dismiss. */\nconst DrawerContent = React.forwardRef<\n\tReact.ComponentRef<typeof DrawerPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n\t<DrawerPortal>\n\t\t<DrawerOverlay />\n\t\t<DrawerPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-foreground/[0.08] bg-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"mx-auto mt-[var(--space-4,1rem)] h-2 w-[100px] rounded-full bg-muted\" aria-hidden=\"true\" />\n\t\t\t{children}\n\t\t</DrawerPrimitive.Content>\n\t</DrawerPortal>\n));\nDrawerContent.displayName = \"DrawerContent\";\n\n/**\n * Header container inside DrawerContent; stacks title and description.\n * @returns A div with vertical rhythm.\n */\nfunction DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"grid gap-1.5 p-[var(--space-4,1rem)] text-center sm:text-left\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Footer container inside DrawerContent; stacks action buttons.\n * @returns A div that stacks buttons vertically with consistent gutters.\n */\nfunction DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn <div className={cn(\"mt-auto flex flex-col gap-[var(--gap-sm,0.5rem)] p-[var(--space-4,1rem)]\", className)} {...props} />;\n}\n\n/** Accessible drawer title; vaul wires it to aria-labelledby automatically. */\nconst DrawerTitle = React.forwardRef<\n\tReact.ComponentRef<typeof DrawerPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DrawerPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDrawerTitle.displayName = \"DrawerTitle\";\n\n/** Accessible drawer description; vaul wires it to aria-describedby automatically. */\nconst DrawerDescription = React.forwardRef<\n\tReact.ComponentRef<typeof DrawerPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DrawerPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-sm text-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDrawerDescription.displayName = \"DrawerDescription\";\n\nexport {\n\tDrawer,\n\tDrawerPortal,\n\tDrawerOverlay,\n\tDrawerTrigger,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerHeader,\n\tDrawerFooter,\n\tDrawerTitle,\n\tDrawerDescription,\n};\n"]}

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+
+/** Root container for a dropdown menu. */
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+/** The element (button) that opens the dropdown. */
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Groups related menu items for a11y. */
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** Portals dropdown content into the body. */
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+/** Nested submenu root. */
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+/** Group for checkable radio items (one selected at a time). */
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** The visible dropdown panel. */
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A clickable menu item. */
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** A menu item with a checkbox state. */
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A menu item in a radio group. */
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A non-interactive section heading inside the menu. */
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** Horizontal divider between menu items. */
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Right-aligned shortcut text (e.g. ⌘K) shown next to a menu item.
+ * @returns A span with muted, tracked typography
+ */
+declare function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger };

package/dist/dropdown-menu.js

@@ -0,0 +1,133 @@
+"use client";
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "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",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-[var(--space-8,2rem)]",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "h-4 w-4",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+        }
+      ) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+var DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-2 w-2 fill-current", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }) }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+var DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("px-[var(--space-2,0.5rem)] py-1.5 text-sm font-semibold", inset && "pl-[var(--space-8,2rem)]", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+function DropdownMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger };
+//# sourceMappingURL=dropdown-menu.js.map
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","file":"dropdown-menu.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container for a dropdown menu. */\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\n/** The element (button) that opens the dropdown. */\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\n/** Groups related menu items for a11y. */\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\n/** Portals dropdown content into the body. */\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\n/** Nested submenu root. */\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\n/** Group for checkable radio items (one selected at a time). */\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/** The visible dropdown panel. */\nconst DropdownMenuContent = React.forwardRef<\n\tReact.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Portal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md\",\n\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\t\"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\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/** A clickable menu item. */\nconst DropdownMenuItem = React.forwardRef<\n\tReact.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\tinset && \"pl-[var(--space-8,2rem)]\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\n/** A menu item with a checkbox state. */\nconst DropdownMenuCheckboxItem = React.forwardRef<\n\tReact.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tReact.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"3\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\tclassName=\"h-4 w-4\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\" />\n\t\t\t\t</svg>\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\n/** A menu item in a radio group. */\nconst DropdownMenuRadioItem = React.forwardRef<\n\tReact.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,\n\tReact.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.RadioItem\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<svg viewBox=\"0 0 24 24\" className=\"h-2 w-2 fill-current\" aria-hidden=\"true\">\n\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t\t</svg>\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\n/** A non-interactive section heading inside the menu. */\nconst DropdownMenuLabel = React.forwardRef<\n\tReact.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tReact.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\"px-[var(--space-2,0.5rem)] py-1.5 text-sm font-semibold\", inset && \"pl-[var(--space-8,2rem)]\", className)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\n/** Horizontal divider between menu items. */\nconst DropdownMenuSeparator = React.forwardRef<\n\tReact.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n\tReact.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Separator\n\t\tref={ref}\n\t\tclassName={cn(\"-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]\", className)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\n/**\n * Right-aligned shortcut text (e.g. ⌘K) shown next to a menu item.\n * @returns A span with muted, tracked typography\n */\nfunction DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuRadioItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuGroup,\n\tDropdownMenuPortal,\n\tDropdownMenuSub,\n\tDropdownMenuRadioGroup,\n};\n"]}

package/dist/dropzone.d.ts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface DropzoneProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onDrop" | "children"> {
+    /** Fired with the accepted file list every time the user picks or drops files. */
+    onFilesSelected?: (files: File[]) => void;
+    /**
+     * Fired when files are dropped/picked but ALL of them are filtered out by
+     * `accept` / `maxSize` / `maxFiles`. Useful for surfacing "file too large"
+     * or "wrong type" toasts to the user. Receives the rejected File[].
+     */
+    onFilesRejected?: (files: File[]) => void;
+    /** `accept` attribute forwarded to the hidden file input (e.g. "image/*", ".csv"). */
+    accept?: string;
+    /** Allow multiple files. Default true. */
+    multiple?: boolean;
+    /** Maximum total file count (after dedupe). Excess files are dropped silently — surface in your handler. */
+    maxFiles?: number;
+    /** Maximum size per file in bytes. Files over the cap are filtered before onFilesSelected fires. */
+    maxSize?: number;
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Optional render override for the dropzone body. Receives drag state. */
+    children?: React.ReactNode | ((state: DropzoneRenderState) => React.ReactNode);
+    /** Required accessible name for the drop area. */
+    "aria-label": string;
+}
+interface DropzoneRenderState {
+    isDragOver: boolean;
+    isDisabled: boolean;
+    openFileDialog: () => void;
+}
+/**
+ * Drag-and-drop file input built on the native HTML5 drag-drop API plus a
+ * visually-hidden (sr-only) `<input type="file">` for screen-reader and
+ * keyboard access.
+ *
+ * Two interaction surfaces:
+ * - The visible drop area is a `role="button"` div with `tabIndex=0` and the
+ *   required `aria-label`. Click, Enter, or Space proxies through to click the
+ *   hidden input, opening the system file dialog.
+ * - The hidden input itself remains in the accessibility tree (sr-only, NOT
+ *   `aria-hidden`) so AT-driven file pickers can find it directly.
+ *
+ * Pass `children` as a node (default placeholder) or a function receiving
+ * `{ isDragOver, isDisabled, openFileDialog }` for full layout control.
+ * @returns A drop area + hidden file input pair that yields a File[].
+ */
+declare function Dropzone({ onFilesSelected, onFilesRejected, accept, multiple, maxFiles, maxSize, disabled, children, className, "aria-label": ariaLabel, ...rest }: DropzoneProps): react_jsx_runtime.JSX.Element;
+declare namespace Dropzone {
+    var displayName: string;
+}
+
+export { Dropzone, type DropzoneProps, type DropzoneRenderState };

package/dist/dropzone.js

@@ -0,0 +1,194 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function filterFiles(files, { accept, maxSize, maxFiles }) {
+  const list = Array.from(files);
+  const acceptList = accept ? accept.split(",").map((s) => s.trim()).filter(Boolean) : void 0;
+  const matchAccept = (file) => {
+    if (!acceptList) return true;
+    return acceptList.some((entry) => {
+      if (entry.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(entry.toLowerCase());
+      }
+      if (entry.endsWith("/*")) {
+        const prefix = entry.slice(0, -1);
+        return file.type.startsWith(prefix);
+      }
+      return file.type === entry;
+    });
+  };
+  const sized = typeof maxSize === "number" ? list.filter((f) => f.size <= maxSize) : list;
+  const accepted = sized.filter(matchAccept);
+  if (typeof maxFiles === "number") return accepted.slice(0, maxFiles);
+  return accepted;
+}
+function Dropzone({
+  onFilesSelected,
+  onFilesRejected,
+  accept,
+  multiple = true,
+  maxFiles,
+  maxSize,
+  disabled = false,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const inputRef = React.useRef(null);
+  const [isDragOver, setIsDragOver] = React.useState(false);
+  const dragCounter = React.useRef(0);
+  const emit = React.useCallback(
+    (files) => {
+      if (!files || disabled) return;
+      const all = Array.from(files);
+      if (all.length === 0) return;
+      const accepted = filterFiles(all, { accept, maxSize, maxFiles });
+      if (accepted.length === 0) {
+        onFilesRejected?.(all);
+        return;
+      }
+      const finalAccepted = !multiple ? accepted.slice(0, 1) : accepted;
+      const rejected = all.filter((f) => !finalAccepted.includes(f));
+      onFilesSelected?.(finalAccepted);
+      if (rejected.length > 0) onFilesRejected?.(rejected);
+    },
+    [
+      accept,
+      disabled,
+      maxFiles,
+      maxSize,
+      multiple,
+      onFilesSelected,
+      onFilesRejected
+    ]
+  );
+  React.useEffect(() => {
+    const reset = () => {
+      dragCounter.current = 0;
+      setIsDragOver(false);
+    };
+    window.addEventListener("dragend", reset);
+    window.addEventListener("drop", reset);
+    return () => {
+      window.removeEventListener("dragend", reset);
+      window.removeEventListener("drop", reset);
+    };
+  }, []);
+  const openFileDialog = React.useCallback(() => {
+    if (disabled) return;
+    inputRef.current?.click();
+  }, [disabled]);
+  const handleDragEnter = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    dragCounter.current += 1;
+    if (e.dataTransfer.types.includes("Files")) setIsDragOver(true);
+  };
+  const handleDragOver = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  };
+  const handleDragLeave = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    dragCounter.current = Math.max(0, dragCounter.current - 1);
+    if (dragCounter.current === 0) setIsDragOver(false);
+  };
+  const handleDrop = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    dragCounter.current = 0;
+    setIsDragOver(false);
+    emit(e.dataTransfer.files);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openFileDialog();
+    }
+  };
+  const renderState = {
+    isDragOver,
+    isDisabled: disabled,
+    openFileDialog
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-disabled": disabled || void 0,
+      "data-drag-over": isDragOver || void 0,
+      onClick: openFileDialog,
+      onKeyDown: handleKeyDown,
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      className: cn(
+        "flex w-full cursor-pointer select-none flex-col items-center justify-center gap-[var(--space-2,0.5rem)] rounded-md border-2 border-dashed border-input bg-background px-[var(--space-6,1.5rem)] py-[var(--space-8,2rem)] text-center text-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        isDragOver && "border-primary bg-accent text-accent-foreground",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      ...rest,
+      children: [
+        typeof children === "function" ? children(renderState) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "h-6 w-6 text-muted-foreground",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: isDragOver ? "Drop files to upload" : "Drag files here or click to browse" }),
+          accept ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: accept }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            disabled,
+            className: "sr-only",
+            onChange: (e) => {
+              emit(e.target.files);
+              e.target.value = "";
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+Dropzone.displayName = "Dropzone";
+
+export { Dropzone };
+//# sourceMappingURL=dropzone.js.map
+//# sourceMappingURL=dropzone.js.map

package/dist/dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/dropzone/dropzone.tsx"],"names":[],"mappings":"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","file":"dropzone.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\ninterface DropzoneProps\n\textends Omit<\n\t\tReact.HTMLAttributes<HTMLDivElement>,\n\t\t\"onChange\" | \"onDrop\" | \"children\"\n\t> {\n\t/** Fired with the accepted file list every time the user picks or drops files. */\n\tonFilesSelected?: (files: File[]) => void;\n\t/**\n\t * Fired when files are dropped/picked but ALL of them are filtered out by\n\t * `accept` / `maxSize` / `maxFiles`. Useful for surfacing \"file too large\"\n\t * or \"wrong type\" toasts to the user. Receives the rejected File[].\n\t */\n\tonFilesRejected?: (files: File[]) => void;\n\t/** `accept` attribute forwarded to the hidden file input (e.g. \"image/*\", \".csv\"). */\n\taccept?: string;\n\t/** Allow multiple files. Default true. */\n\tmultiple?: boolean;\n\t/** Maximum total file count (after dedupe). Excess files are dropped silently — surface in your handler. */\n\tmaxFiles?: number;\n\t/** Maximum size per file in bytes. Files over the cap are filtered before onFilesSelected fires. */\n\tmaxSize?: number;\n\t/** Disable interaction. */\n\tdisabled?: boolean;\n\t/** Optional render override for the dropzone body. Receives drag state. */\n\tchildren?: React.ReactNode | ((state: DropzoneRenderState) => React.ReactNode);\n\t/** Required accessible name for the drop area. */\n\t\"aria-label\": string;\n}\n\ninterface DropzoneRenderState {\n\tisDragOver: boolean;\n\tisDisabled: boolean;\n\topenFileDialog: () => void;\n}\n\n/** Apply `accept` / `maxSize` / `maxFiles` filters before emitting to onFilesSelected. */\nfunction filterFiles(\n\tfiles: FileList | File[],\n\t{ accept, maxSize, maxFiles }: { accept?: string; maxSize?: number; maxFiles?: number },\n): File[] {\n\tconst list = Array.from(files);\n\tconst acceptList = accept\n\t\t? accept\n\t\t\t\t.split(\",\")\n\t\t\t\t.map((s) => s.trim())\n\t\t\t\t.filter(Boolean)\n\t\t: undefined;\n\n\tconst matchAccept = (file: File): boolean => {\n\t\tif (!acceptList) return true;\n\t\treturn acceptList.some((entry) => {\n\t\t\tif (entry.startsWith(\".\")) {\n\t\t\t\treturn file.name.toLowerCase().endsWith(entry.toLowerCase());\n\t\t\t}\n\t\t\tif (entry.endsWith(\"/*\")) {\n\t\t\t\tconst prefix = entry.slice(0, -1); // \"image/\"\n\t\t\t\treturn file.type.startsWith(prefix);\n\t\t\t}\n\t\t\treturn file.type === entry;\n\t\t});\n\t};\n\n\tconst sized =\n\t\ttypeof maxSize === \"number\" ? list.filter((f) => f.size <= maxSize) : list;\n\tconst accepted = sized.filter(matchAccept);\n\tif (typeof maxFiles === \"number\") return accepted.slice(0, maxFiles);\n\treturn accepted;\n}\n\n/**\n * Drag-and-drop file input built on the native HTML5 drag-drop API plus a\n * visually-hidden (sr-only) `<input type=\"file\">` for screen-reader and\n * keyboard access.\n *\n * Two interaction surfaces:\n * - The visible drop area is a `role=\"button\"` div with `tabIndex=0` and the\n *   required `aria-label`. Click, Enter, or Space proxies through to click the\n *   hidden input, opening the system file dialog.\n * - The hidden input itself remains in the accessibility tree (sr-only, NOT\n *   `aria-hidden`) so AT-driven file pickers can find it directly.\n *\n * Pass `children` as a node (default placeholder) or a function receiving\n * `{ isDragOver, isDisabled, openFileDialog }` for full layout control.\n * @returns A drop area + hidden file input pair that yields a File[].\n */\nfunction Dropzone({\n\tonFilesSelected,\n\tonFilesRejected,\n\taccept,\n\tmultiple = true,\n\tmaxFiles,\n\tmaxSize,\n\tdisabled = false,\n\tchildren,\n\tclassName,\n\t\"aria-label\": ariaLabel,\n\t...rest\n}: DropzoneProps) {\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\tconst [isDragOver, setIsDragOver] = React.useState(false);\n\tconst dragCounter = React.useRef(0);\n\n\tconst emit = React.useCallback(\n\t\t(files: FileList | File[] | null | undefined) => {\n\t\t\tif (!files || disabled) return;\n\t\t\tconst all = Array.from(files);\n\t\t\tif (all.length === 0) return;\n\t\t\tconst accepted = filterFiles(all, { accept, maxSize, maxFiles });\n\t\t\tif (accepted.length === 0) {\n\t\t\t\tonFilesRejected?.(all);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst finalAccepted = !multiple ? accepted.slice(0, 1) : accepted;\n\t\t\tconst rejected = all.filter((f) => !finalAccepted.includes(f));\n\t\t\tonFilesSelected?.(finalAccepted);\n\t\t\tif (rejected.length > 0) onFilesRejected?.(rejected);\n\t\t},\n\t\t[\n\t\t\taccept,\n\t\t\tdisabled,\n\t\t\tmaxFiles,\n\t\t\tmaxSize,\n\t\t\tmultiple,\n\t\t\tonFilesSelected,\n\t\t\tonFilesRejected,\n\t\t],\n\t);\n\n\t/*\n\t * Reset the drag counter + isDragOver when the user cancels a drag outside\n\t * the dropzone (Esc, drag off the page, switch tab). Without this, the\n\t * counter can stay >0 and the dropzone gets stuck in its hover style.\n\t */\n\tReact.useEffect(() => {\n\t\tconst reset = () => {\n\t\t\tdragCounter.current = 0;\n\t\t\tsetIsDragOver(false);\n\t\t};\n\t\twindow.addEventListener(\"dragend\", reset);\n\t\twindow.addEventListener(\"drop\", reset);\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"dragend\", reset);\n\t\t\twindow.removeEventListener(\"drop\", reset);\n\t\t};\n\t}, []);\n\n\tconst openFileDialog = React.useCallback(() => {\n\t\tif (disabled) return;\n\t\tinputRef.current?.click();\n\t}, [disabled]);\n\n\tconst handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\t\te.preventDefault();\n\t\tdragCounter.current += 1;\n\t\tif (e.dataTransfer.types.includes(\"Files\")) setIsDragOver(true);\n\t};\n\tconst handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\t\te.preventDefault();\n\t\te.dataTransfer.dropEffect = \"copy\";\n\t};\n\tconst handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\t\te.preventDefault();\n\t\tdragCounter.current = Math.max(0, dragCounter.current - 1);\n\t\tif (dragCounter.current === 0) setIsDragOver(false);\n\t};\n\tconst handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\t\te.preventDefault();\n\t\tdragCounter.current = 0;\n\t\tsetIsDragOver(false);\n\t\temit(e.dataTransfer.files);\n\t};\n\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\te.preventDefault();\n\t\t\topenFileDialog();\n\t\t}\n\t};\n\n\tconst renderState: DropzoneRenderState = {\n\t\tisDragOver,\n\t\tisDisabled: disabled,\n\t\topenFileDialog,\n\t};\n\n\treturn (\n\t\t<div\n\t\t\trole=\"button\"\n\t\t\ttabIndex={disabled ? -1 : 0}\n\t\t\taria-label={ariaLabel}\n\t\t\taria-disabled={disabled || undefined}\n\t\t\tdata-drag-over={isDragOver || undefined}\n\t\t\tonClick={openFileDialog}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonDragEnter={handleDragEnter}\n\t\t\tonDragOver={handleDragOver}\n\t\t\tonDragLeave={handleDragLeave}\n\t\t\tonDrop={handleDrop}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex w-full cursor-pointer select-none flex-col items-center justify-center gap-[var(--space-2,0.5rem)] rounded-md border-2 border-dashed border-input bg-background px-[var(--space-6,1.5rem)] py-[var(--space-8,2rem)] text-center text-sm transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\"hover:bg-accent hover:text-accent-foreground\",\n\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\tisDragOver && \"border-primary bg-accent text-accent-foreground\",\n\t\t\t\tdisabled && \"pointer-events-none opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{typeof children === \"function\"\n\t\t\t\t? children(renderState)\n\t\t\t\t: (children ?? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\tclassName=\"h-6 w-6 text-muted-foreground\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n\t\t\t\t\t\t\t\t<polyline points=\"17 8 12 3 7 8\" />\n\t\t\t\t\t\t\t\t<line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<span className=\"font-medium\">\n\t\t\t\t\t\t\t\t{isDragOver ? \"Drop files to upload\" : \"Drag files here or click to browse\"}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{accept ? (\n\t\t\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">{accept}</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</>\n\t\t\t\t\t))}\n\t\t\t<input\n\t\t\t\tref={inputRef}\n\t\t\t\ttype=\"file\"\n\t\t\t\taccept={accept}\n\t\t\t\tmultiple={multiple}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName=\"sr-only\"\n\t\t\t\t/*\n\t\t\t\t * Intentionally NOT aria-hidden + NOT tabIndex=-1: the input\n\t\t\t\t * stays in the a11y tree so AT-driven file pickers (NVDA's\n\t\t\t\t * forms mode, JAWS) can find it. Visually hidden via sr-only.\n\t\t\t\t */\n\t\t\t\tonChange={(e) => {\n\t\t\t\t\temit(e.target.files);\n\t\t\t\t\t// Reset so picking the same file twice still fires onChange\n\t\t\t\t\te.target.value = \"\";\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n}\nDropzone.displayName = \"Dropzone\";\n\nexport { Dropzone };\nexport type { DropzoneProps, DropzoneRenderState };\n"]}