cortena-ui 1.3.0 → 1.4.0

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,54 @@
+"use client";
+import * as React from "react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/dropdown-menu.d.ts
+/**
+ * DropdownMenu over Base UI's Menu.
+ *
+ * `DropdownMenuContent` and `DropdownMenuSubContent` compose Portal +
+ * Positioner + Popup, so consumers keep writing one element; `side`, `align`
+ * and `sideOffset` are forwarded to the Positioner where Base UI reads them.
+ *
+ * Radix users: `asChild` on the trigger becomes `render={<Button />}`;
+ * `onSelect` on items is `onClick`; `DropdownMenuLabel` is Base UI's
+ * `Menu.GroupLabel` (place it inside a `DropdownMenuGroup` for the
+ * `aria-labelledby` wiring); `DropdownMenuCheckboxItem` reports through
+ * `onCheckedChange(checked, eventDetails)`; `DropdownMenuRadioGroup` through
+ * `onValueChange(value, eventDetails)`. Highlight state is `data-highlighted`,
+ * not `:focus`.
+ */
+declare function DropdownMenu(props: Menu.Root.Props): React.JSX.Element;
+declare function DropdownMenuTrigger(props: Menu.Trigger.Props): React.JSX.Element;
+declare function DropdownMenuPortal(props: Menu.Portal.Props): React.JSX.Element;
+declare function DropdownMenuGroup(props: Menu.Group.Props): React.JSX.Element;
+declare function DropdownMenuSub(props: Menu.SubmenuRoot.Props): React.JSX.Element;
+declare function DropdownMenuRadioGroup(props: Menu.RadioGroup.Props): React.JSX.Element;
+type PositionerProps = Pick<Menu.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface DropdownMenuContentProps extends Menu.Popup.Props, PositionerProps {
+  /** Keep the menu mounted in the DOM while hidden. */
+  keepMounted?: boolean;
+  /** Where to portal the menu; defaults to `<body>`. */
+  container?: Menu.Portal.Props["container"];
+}
+declare function DropdownMenuContent({ className, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }: DropdownMenuContentProps): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }: DropdownMenuContentProps): React.JSX.Element;
+export interface DropdownMenuItemProps extends Menu.Item.Props {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}
+declare function DropdownMenuItem({ className, inset, variant, ...props }: DropdownMenuItemProps): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, ...props }: Menu.CheckboxItem.Props): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: Menu.RadioItem.Props): React.JSX.Element;
+export interface DropdownMenuLabelProps extends Menu.GroupLabel.Props {
+  inset?: boolean;
+}
+declare function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: Menu.Separator.Props): React.JSX.Element;
+export interface DropdownMenuSubTriggerProps extends Menu.SubmenuTrigger.Props {
+  inset?: boolean;
+}
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: DropdownMenuSubTriggerProps): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/dropdown-menu.js

@@ -0,0 +1,191 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/dropdown-menu.tsx
+/**
+* DropdownMenu over Base UI's Menu.
+*
+* `DropdownMenuContent` and `DropdownMenuSubContent` compose Portal +
+* Positioner + Popup, so consumers keep writing one element; `side`, `align`
+* and `sideOffset` are forwarded to the Positioner where Base UI reads them.
+*
+* Radix users: `asChild` on the trigger becomes `render={<Button />}`;
+* `onSelect` on items is `onClick`; `DropdownMenuLabel` is Base UI's
+* `Menu.GroupLabel` (place it inside a `DropdownMenuGroup` for the
+* `aria-labelledby` wiring); `DropdownMenuCheckboxItem` reports through
+* `onCheckedChange(checked, eventDetails)`; `DropdownMenuRadioGroup` through
+* `onValueChange(value, eventDetails)`. Highlight state is `data-highlighted`,
+* not `:focus`.
+*/
+function DropdownMenu(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+function DropdownMenuTrigger(props) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuPortal(props) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuSub(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+}
+function DropdownMenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+const popupClassName = [
+	"min-w-[8rem] overflow-hidden p-1 outline-none",
+	"rounded-[var(--ds-radius-md)] border border-[var(--ds-border)]",
+	"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]",
+	"open:animate-in open:fade-in-0 open:zoom-in-95",
+	"closed:animate-out closed:fade-out-0 closed:zoom-out-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 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2",
+	"duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]"
+];
+function DropdownMenuContent({ className, side, align, sideOffset = 4, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		keepMounted,
+		container,
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			"data-slot": "dropdown-menu-positioner",
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			anchor,
+			collisionBoundary,
+			collisionPadding,
+			collisionAvoidance,
+			sticky,
+			positionMethod,
+			className: "isolate z-50",
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				"data-slot": "dropdown-menu-content",
+				className: cn(popupClassName, className),
+				...props
+			})
+		})
+	});
+}
+function DropdownMenuSubContent({ className, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		keepMounted,
+		container,
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			"data-slot": "dropdown-menu-sub-positioner",
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			anchor,
+			collisionBoundary,
+			collisionPadding,
+			collisionAvoidance,
+			sticky,
+			positionMethod,
+			className: "isolate z-50",
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				"data-slot": "dropdown-menu-sub-content",
+				className: cn(popupClassName, className),
+				...props
+			})
+		})
+	});
+}
+const itemClassName = [
+	"relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 outline-none",
+	"rounded-[var(--ds-radius-sm)] text-[length:var(--ds-text-body-sm)]",
+	"transition-colors duration-[var(--ds-duration-fast)]",
+	"data-[highlighted]:bg-[var(--ds-hover)] data-[highlighted]:text-[color:var(--ds-foreground)]",
+	"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+	"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+];
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset ? "" : void 0,
+		"data-variant": variant,
+		className: cn(itemClassName, inset && "pl-8", variant === "destructive" && "text-[color:var(--ds-destructive)] data-[highlighted]:bg-[var(--ds-destructive-soft)] data-[highlighted]:text-[color:var(--ds-destructive)]", className),
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: cn(itemClassName, "pl-8 pr-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+				"data-slot": "dropdown-menu-checkbox-item-indicator",
+				children: /* @__PURE__ */ jsx(Check, { className: "size-3.5" })
+			})
+		}), children]
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: cn(itemClassName, "pl-8 pr-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+				"data-slot": "dropdown-menu-radio-item-indicator",
+				children: /* @__PURE__ */ jsx(Circle, { className: "size-2 fill-current" })
+			})
+		}), children]
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset ? "" : void 0,
+		className: cn("px-2 py-1.5 text-[length:var(--ds-text-caption-lg)] font-semibold text-[color:var(--ds-muted-foreground)]", inset && "pl-8", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-[var(--ds-border-subtle)]", className),
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset ? "" : void 0,
+		className: cn(itemClassName, "popup-open:bg-[var(--ds-hover)] popup-open:text-[color:var(--ds-foreground)]", inset && "pl-8", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })]
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("ml-auto text-[length:var(--ds-text-caption)] tracking-widest text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+//#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/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":["MenuPrimitive"],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Check, ChevronRight, Circle } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * DropdownMenu over Base UI's Menu.\n *\n * `DropdownMenuContent` and `DropdownMenuSubContent` compose Portal +\n * Positioner + Popup, so consumers keep writing one element; `side`, `align`\n * and `sideOffset` are forwarded to the Positioner where Base UI reads them.\n *\n * Radix users: `asChild` on the trigger becomes `render={<Button />}`;\n * `onSelect` on items is `onClick`; `DropdownMenuLabel` is Base UI's\n * `Menu.GroupLabel` (place it inside a `DropdownMenuGroup` for the\n * `aria-labelledby` wiring); `DropdownMenuCheckboxItem` reports through\n * `onCheckedChange(checked, eventDetails)`; `DropdownMenuRadioGroup` through\n * `onValueChange(value, eventDetails)`. Highlight state is `data-highlighted`,\n * not `:focus`.\n */\nfunction DropdownMenu(props: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root {...props} />;\n}\n\nfunction DropdownMenuTrigger(props: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuPortal(props: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuGroup(props: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuSub(props: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot {...props} />;\n}\n\nfunction DropdownMenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\ntype PositionerProps = Pick<\n  MenuPrimitive.Positioner.Props,\n  | \"side\"\n  | \"align\"\n  | \"sideOffset\"\n  | \"alignOffset\"\n  | \"anchor\"\n  | \"collisionBoundary\"\n  | \"collisionPadding\"\n  | \"collisionAvoidance\"\n  | \"sticky\"\n  | \"positionMethod\"\n>;\n\nexport interface DropdownMenuContentProps extends MenuPrimitive.Popup.Props, PositionerProps {\n  /** Keep the menu mounted in the DOM while hidden. */\n  keepMounted?: boolean;\n  /** Where to portal the menu; defaults to `<body>`. */\n  container?: MenuPrimitive.Portal.Props[\"container\"];\n}\n\nconst popupClassName = [\n  \"min-w-[8rem] overflow-hidden p-1 outline-none\",\n  \"rounded-[var(--ds-radius-md)] border border-[var(--ds-border)]\",\n  \"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]\",\n  \"open:animate-in open:fade-in-0 open:zoom-in-95\",\n  \"closed:animate-out closed:fade-out-0 closed:zoom-out-95\",\n  \"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-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2\",\n  \"duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n];\n\nfunction DropdownMenuContent({\n  className,\n  side,\n  align,\n  sideOffset = 4,\n  alignOffset,\n  anchor,\n  collisionBoundary,\n  collisionPadding,\n  collisionAvoidance,\n  sticky,\n  positionMethod,\n  keepMounted,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal keepMounted={keepMounted} container={container}>\n      <MenuPrimitive.Positioner\n        data-slot=\"dropdown-menu-positioner\"\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        collisionBoundary={collisionBoundary}\n        collisionPadding={collisionPadding}\n        collisionAvoidance={collisionAvoidance}\n        sticky={sticky}\n        positionMethod={positionMethod}\n        className=\"isolate z-50\"\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(popupClassName, className)}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  anchor,\n  collisionBoundary,\n  collisionPadding,\n  collisionAvoidance,\n  sticky,\n  positionMethod,\n  keepMounted,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal keepMounted={keepMounted} container={container}>\n      <MenuPrimitive.Positioner\n        data-slot=\"dropdown-menu-sub-positioner\"\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        collisionBoundary={collisionBoundary}\n        collisionPadding={collisionPadding}\n        collisionAvoidance={collisionAvoidance}\n        sticky={sticky}\n        positionMethod={positionMethod}\n        className=\"isolate z-50\"\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-sub-content\"\n          className={cn(popupClassName, className)}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nconst itemClassName = [\n  \"relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 outline-none\",\n  \"rounded-[var(--ds-radius-sm)] text-[length:var(--ds-text-body-sm)]\",\n  \"transition-colors duration-[var(--ds-duration-fast)]\",\n  \"data-[highlighted]:bg-[var(--ds-hover)] data-[highlighted]:text-[color:var(--ds-foreground)]\",\n  \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n  \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n];\n\nexport interface DropdownMenuItemProps extends MenuPrimitive.Item.Props {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}\n\nfunction DropdownMenuItem({ className, inset, variant = \"default\", ...props }: DropdownMenuItemProps) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset ? \"\" : undefined}\n      data-variant={variant}\n      className={cn(\n        itemClassName,\n        inset && \"pl-8\",\n        variant === \"destructive\" &&\n          \"text-[color:var(--ds-destructive)] data-[highlighted]:bg-[var(--ds-destructive-soft)] data-[highlighted]:text-[color:var(--ds-destructive)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({ className, children, ...props }: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(itemClassName, \"pl-8 pr-2\", className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator data-slot=\"dropdown-menu-checkbox-item-indicator\">\n          <Check className=\"size-3.5\" />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(itemClassName, \"pl-8 pr-2\", className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator data-slot=\"dropdown-menu-radio-item-indicator\">\n          <Circle className=\"size-2 fill-current\" />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport interface DropdownMenuLabelProps extends MenuPrimitive.GroupLabel.Props {\n  inset?: boolean;\n}\n\nfunction DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset ? \"\" : undefined}\n      className={cn(\n        \"px-2 py-1.5 text-[length:var(--ds-text-caption-lg)] font-semibold text-[color:var(--ds-muted-foreground)]\",\n        inset && \"pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-[var(--ds-border-subtle)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface DropdownMenuSubTriggerProps extends MenuPrimitive.SubmenuTrigger.Props {\n  inset?: boolean;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset ? \"\" : undefined}\n      className={cn(\n        itemClassName,\n        \"popup-open:bg-[var(--ds-hover)] popup-open:text-[color:var(--ds-foreground)]\",\n        inset && \"pl-8\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-[length:var(--ds-text-caption)] tracking-widest text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n};\n"],"mappings":"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"}

package/dist/components/dropzone.d.ts

@@ -0,0 +1,48 @@
+"use client";
+import * as React from "react";
+import { Accept, DropzoneState, FileRejection } from "react-dropzone";
+//#region src/components/dropzone.d.ts
+/** `1536` → `1.5 KB`, `0` → `0 B`; base 1024, one decimal above bytes. */
+declare function formatFileSize(bytes: number): string;
+export interface DropzoneProps extends Omit<React.ComponentProps<"div">, "children" | "onDrop" | "onDragEnter" | "onDragOver" | "onDragLeave"> {
+  /** Called with the accepted files after a drop, a paste or the file dialog. */
+  onFiles: (files: File[]) => void;
+  /** Called with the rejected files and their reasons. */
+  onReject?: (rejections: FileRejection[]) => void;
+  /** MIME type to extension map, e.g. `{ "image/png": [".png"] }`. */
+  accept?: Accept;
+  /** Allow more than one file; defaults to true. */
+  multiple?: boolean;
+  /** Largest accepted file in bytes. */
+  maxSize?: number;
+  /** Most files accepted per drop; `0` means unlimited. */
+  maxFiles?: number;
+  disabled?: boolean;
+  /** Do not open the file dialog on click; for a zone that wraps clickable content. @default false */
+  noClick?: boolean;
+  /** Do not open the file dialog on Enter or Space; pair with `noClick`. @default false */
+  noKeyboard?: boolean;
+  /** Primary line of the default body. */
+  label?: React.ReactNode;
+  /** Muted second line of the default body; derived from `accept` and `maxSize` when omitted. */
+  hint?: React.ReactNode;
+  /** Replace the default body. A function receives react-dropzone's state. */
+  children?: React.ReactNode | ((state: DropzoneState) => React.ReactNode);
+}
+declare function Dropzone({ onFiles, onReject, accept, multiple, maxSize, maxFiles, disabled, noClick, noKeyboard, label, hint, children, className, ref, ...props }: DropzoneProps): React.JSX.Element;
+export interface FileListProps extends Omit<React.ComponentProps<"ul">, "children"> {
+  files: readonly File[];
+  /** Called with the file and its index when its remove button is pressed; the button is hidden when omitted. */
+  onRemove?: (file: File, index: number) => void;
+  /** Formats the size column; defaults to `formatFileSize`. */
+  formatSize?: (bytes: number) => string;
+}
+/**
+ * The files a Dropzone picked: name, size and a remove button per row. Rows
+ * are keyed by name, size and last-modified time so re-picking the same file
+ * keeps its row stable.
+ */
+declare function FileList({ files, onRemove, formatSize, className, ...props }: FileListProps): React.JSX.Element | null;
+//#endregion
+export { type Accept, Dropzone, type DropzoneState, FileList, type FileRejection, formatFileSize };
+//# sourceMappingURL=dropzone.d.ts.map

package/dist/components/dropzone.js

@@ -0,0 +1,185 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { FileIcon, Upload, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useDropzone } from "react-dropzone";
+//#region src/components/dropzone.tsx
+/**
+* Dropzone.
+*
+* A drop target over react-dropzone's `useDropzone`. The root is a focusable
+* region that opens the file dialog on click or Enter; the hidden `<input>` is
+* what the dialog fills. Every state is exposed as a data attribute so the
+* classes below (and a consumer's) can paint it:
+*
+* - `data-active`  a drag is over the zone
+* - `data-accept`  every dragged file passes `accept` / `maxSize`
+* - `data-reject`  at least one dragged file fails
+* - `data-disabled`
+*
+* `onFiles` receives only the accepted files; rejections go to `onReject`.
+* `FileList` and `formatFileSize` are separate parts for listing what was
+* picked, so a form can keep the zone and the list in different places.
+*
+* ## Wrapping a whole page as a drop target
+*
+* `noClick` and `noKeyboard` turn off the two activators that only make sense
+* on a dashed box: clicking anywhere inside opens the file dialog, and Enter /
+* Space on the focused root does the same. A page-sized zone wraps content
+* that has its own buttons and inputs, so both have to go — otherwise every
+* click in the page opens a file picker.
+*
+* ```tsx
+* <Dropzone noClick noKeyboard onFiles={upload} className="min-h-dvh border-0 bg-transparent p-0">
+*   {({ isDragActive, open }) => (
+*     <>
+*       <PageContent />
+*       <Button onClick={open}>Browse…</Button>
+*       {isDragActive ? <DropHint /> : null}
+*     </>
+*   )}
+* </Dropzone>
+* ```
+*
+* The render-prop form gets react-dropzone's `open()`, which is the way back
+* to the file dialog from a deliberate control. With `noClick` the root also
+* drops its `cursor-pointer`, since it is no longer clickable.
+*/
+const UNITS = [
+	"B",
+	"KB",
+	"MB",
+	"GB",
+	"TB"
+];
+/** `1536` → `1.5 KB`, `0` → `0 B`; base 1024, one decimal above bytes. */
+function formatFileSize(bytes) {
+	if (!Number.isFinite(bytes) || bytes < 0) return "0 B";
+	let value = bytes;
+	let unit = 0;
+	while (value >= 1024 && unit < UNITS.length - 1) {
+		value /= 1024;
+		unit += 1;
+	}
+	return `${unit === 0 ? Math.round(value) : Math.round(value * 10) / 10} ${UNITS[unit]}`;
+}
+/** Turns an `accept` map into a hint such as `PNG, JPG, PDF`. */
+function describeAccept(accept) {
+	if (!accept) return void 0;
+	const exts = /* @__PURE__ */ new Set();
+	for (const [mime, list] of Object.entries(accept)) {
+		const items = typeof list === "string" ? [list] : list;
+		if (items.length > 0) for (const ext of items) exts.add(ext.replace(/^\./, "").toUpperCase());
+		else {
+			const sub = mime.split("/")[1];
+			if (sub && sub !== "*") exts.add(sub.toUpperCase());
+		}
+	}
+	return exts.size > 0 ? [...exts].join(", ") : void 0;
+}
+function Dropzone({ onFiles, onReject, accept, multiple = true, maxSize, maxFiles, disabled = false, noClick = false, noKeyboard = false, label, hint, children, className, ref, ...props }) {
+	const state = useDropzone({
+		accept,
+		multiple,
+		maxSize,
+		maxFiles,
+		disabled,
+		noClick,
+		noKeyboard,
+		onDropAccepted: (files) => onFiles(files),
+		onDropRejected: (rejections) => onReject?.(rejections)
+	});
+	const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, isFocused, rootRef } = state;
+	const setRoot = (node) => {
+		rootRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const derivedHint = hint ?? [describeAccept(accept), maxSize ? `up to ${formatFileSize(maxSize)}` : void 0].filter(Boolean).join(" ");
+	const body = typeof children === "function" ? children(state) : children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"data-slot": "dropzone-icon",
+			className: cn("flex size-10 items-center justify-center rounded-[var(--ds-radius-full)]", "bg-[var(--ds-muted)] text-[color:var(--ds-muted-foreground)]", "group-data-[active]/dropzone:bg-[var(--ds-primary-soft)] group-data-[active]/dropzone:text-[color:var(--ds-primary)]", "group-data-[reject]/dropzone:bg-[var(--ds-destructive-soft)] group-data-[reject]/dropzone:text-[color:var(--ds-destructive)]"),
+			children: /* @__PURE__ */ jsx(Upload, {
+				"aria-hidden": true,
+				className: "size-5"
+			})
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"data-slot": "dropzone-label",
+			className: "text-[length:var(--ds-text-body-sm)] font-medium text-[color:var(--ds-foreground)]",
+			children: label ?? (isDragReject ? "Some of these files are not allowed" : isDragActive ? "Drop to upload" : multiple ? "Drop files here, or click to browse" : "Drop a file here, or click to browse")
+		}),
+		derivedHint ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "dropzone-hint",
+			className: "text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+			children: derivedHint
+		}) : null
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		...getRootProps({
+			...props,
+			ref: setRoot,
+			className: cn("group/dropzone flex flex-col items-center justify-center gap-2 p-6 text-center", "rounded-[var(--ds-radius-lg)] border border-dashed border-[var(--ds-border)] bg-[var(--ds-card)]", noClick ? "select-none outline-none" : "cursor-pointer select-none outline-none", "transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:border-[var(--ds-border-strong)] hover:bg-[var(--ds-hover)]", "focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[active]:border-[var(--ds-primary)] data-[active]:bg-[var(--ds-primary-soft)]", "data-[reject]:border-[var(--ds-destructive)] data-[reject]:bg-[var(--ds-destructive-soft)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
+		}),
+		"data-slot": "dropzone",
+		"data-active": isDragActive || void 0,
+		"data-accept": isDragActive && isDragAccept || void 0,
+		"data-reject": isDragReject || void 0,
+		"data-focused": isFocused || void 0,
+		"data-disabled": disabled || void 0,
+		"data-no-click": noClick || void 0,
+		"data-no-keyboard": noKeyboard || void 0,
+		children: [/* @__PURE__ */ jsx("input", {
+			"data-slot": "dropzone-input",
+			...getInputProps()
+		}), body]
+	});
+}
+/**
+* The files a Dropzone picked: name, size and a remove button per row. Rows
+* are keyed by name, size and last-modified time so re-picking the same file
+* keeps its row stable.
+*/
+function FileList({ files, onRemove, formatSize = formatFileSize, className, ...props }) {
+	if (files.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "file-list",
+		className: cn("flex list-none flex-col gap-1.5 p-0", className),
+		...props,
+		children: files.map((file, index) => /* @__PURE__ */ jsxs("li", {
+			"data-slot": "file-list-item",
+			className: cn("flex items-center gap-3 px-3 py-2", "rounded-[var(--ds-radius-md)] border border-[var(--ds-border-subtle)] bg-[var(--ds-card)]"),
+			children: [
+				/* @__PURE__ */ jsx(FileIcon, {
+					"aria-hidden": true,
+					className: "size-4 shrink-0 text-[color:var(--ds-muted-foreground)]"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "file-list-name",
+					className: "min-w-0 flex-1 truncate text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]",
+					title: file.name,
+					children: file.name
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "file-list-size",
+					className: "shrink-0 font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+					children: formatSize(file.size)
+				}),
+				onRemove ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-slot": "file-list-remove",
+					"aria-label": `Remove ${file.name}`,
+					onClick: () => onRemove(file, index),
+					className: cn("inline-flex size-6 shrink-0 items-center justify-center rounded-[var(--ds-radius-sm)]", "text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "[&_svg]:size-3.5"),
+					children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+				}) : null
+			]
+		}, `${file.name}-${file.size}-${file.lastModified}`))
+	});
+}
+//#endregion
+export { Dropzone, FileList, formatFileSize };
+
+//# sourceMappingURL=dropzone.js.map

package/dist/components/dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.js","names":[],"sources":["../../src/components/dropzone.tsx"],"sourcesContent":["\"use client\";\n\nimport { FileIcon, Upload, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useDropzone, type Accept, type DropzoneState, type FileRejection } from \"react-dropzone\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Dropzone.\n *\n * A drop target over react-dropzone's `useDropzone`. The root is a focusable\n * region that opens the file dialog on click or Enter; the hidden `<input>` is\n * what the dialog fills. Every state is exposed as a data attribute so the\n * classes below (and a consumer's) can paint it:\n *\n * - `data-active`  a drag is over the zone\n * - `data-accept`  every dragged file passes `accept` / `maxSize`\n * - `data-reject`  at least one dragged file fails\n * - `data-disabled`\n *\n * `onFiles` receives only the accepted files; rejections go to `onReject`.\n * `FileList` and `formatFileSize` are separate parts for listing what was\n * picked, so a form can keep the zone and the list in different places.\n *\n * ## Wrapping a whole page as a drop target\n *\n * `noClick` and `noKeyboard` turn off the two activators that only make sense\n * on a dashed box: clicking anywhere inside opens the file dialog, and Enter /\n * Space on the focused root does the same. A page-sized zone wraps content\n * that has its own buttons and inputs, so both have to go — otherwise every\n * click in the page opens a file picker.\n *\n * ```tsx\n * <Dropzone noClick noKeyboard onFiles={upload} className=\"min-h-dvh border-0 bg-transparent p-0\">\n *   {({ isDragActive, open }) => (\n *     <>\n *       <PageContent />\n *       <Button onClick={open}>Browse…</Button>\n *       {isDragActive ? <DropHint /> : null}\n *     </>\n *   )}\n * </Dropzone>\n * ```\n *\n * The render-prop form gets react-dropzone's `open()`, which is the way back\n * to the file dialog from a deliberate control. With `noClick` the root also\n * drops its `cursor-pointer`, since it is no longer clickable.\n */\n\nconst UNITS = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\"] as const;\n\n/** `1536` → `1.5 KB`, `0` → `0 B`; base 1024, one decimal above bytes. */\nfunction formatFileSize(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0) return \"0 B\";\n  let value = bytes;\n  let unit = 0;\n  while (value >= 1024 && unit < UNITS.length - 1) {\n    value /= 1024;\n    unit += 1;\n  }\n  const rounded = unit === 0 ? Math.round(value) : Math.round(value * 10) / 10;\n  return `${rounded} ${UNITS[unit]}`;\n}\n\n/** Turns an `accept` map into a hint such as `PNG, JPG, PDF`. */\nfunction describeAccept(accept: Accept | undefined): string | undefined {\n  if (!accept) return undefined;\n  const exts = new Set<string>();\n  for (const [mime, list] of Object.entries(accept)) {\n    const items = typeof list === \"string\" ? [list] : list;\n    if (items.length > 0) {\n      for (const ext of items) exts.add(ext.replace(/^\\./, \"\").toUpperCase());\n    } else {\n      const sub = mime.split(\"/\")[1];\n      if (sub && sub !== \"*\") exts.add(sub.toUpperCase());\n    }\n  }\n  return exts.size > 0 ? [...exts].join(\", \") : undefined;\n}\n\nexport interface DropzoneProps extends Omit<\n  React.ComponentProps<\"div\">,\n  \"children\" | \"onDrop\" | \"onDragEnter\" | \"onDragOver\" | \"onDragLeave\"\n> {\n  /** Called with the accepted files after a drop, a paste or the file dialog. */\n  onFiles: (files: File[]) => void;\n  /** Called with the rejected files and their reasons. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** MIME type to extension map, e.g. `{ \"image/png\": [\".png\"] }`. */\n  accept?: Accept;\n  /** Allow more than one file; defaults to true. */\n  multiple?: boolean;\n  /** Largest accepted file in bytes. */\n  maxSize?: number;\n  /** Most files accepted per drop; `0` means unlimited. */\n  maxFiles?: number;\n  disabled?: boolean;\n  /** Do not open the file dialog on click; for a zone that wraps clickable content. @default false */\n  noClick?: boolean;\n  /** Do not open the file dialog on Enter or Space; pair with `noClick`. @default false */\n  noKeyboard?: boolean;\n  /** Primary line of the default body. */\n  label?: React.ReactNode;\n  /** Muted second line of the default body; derived from `accept` and `maxSize` when omitted. */\n  hint?: React.ReactNode;\n  /** Replace the default body. A function receives react-dropzone's state. */\n  children?: React.ReactNode | ((state: DropzoneState) => React.ReactNode);\n}\n\nfunction Dropzone({\n  onFiles,\n  onReject,\n  accept,\n  multiple = true,\n  maxSize,\n  maxFiles,\n  disabled = false,\n  noClick = false,\n  noKeyboard = false,\n  label,\n  hint,\n  children,\n  className,\n  ref,\n  ...props\n}: DropzoneProps) {\n  const state = useDropzone({\n    accept,\n    multiple,\n    maxSize,\n    maxFiles,\n    disabled,\n    noClick,\n    noKeyboard,\n    onDropAccepted: (files) => onFiles(files),\n    onDropRejected: (rejections) => onReject?.(rejections),\n  });\n  const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, isFocused, rootRef } =\n    state;\n  // getRootProps would let a consumer `ref` replace its own; hold both.\n  const setRoot = (node: HTMLDivElement | null) => {\n    (rootRef as React.MutableRefObject<HTMLElement | null>).current = node;\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) ref.current = node;\n  };\n\n  const derivedHint =\n    hint ??\n    [describeAccept(accept), maxSize ? `up to ${formatFileSize(maxSize)}` : undefined]\n      .filter(Boolean)\n      .join(\" \");\n\n  const body =\n    typeof children === \"function\" ? (\n      children(state)\n    ) : children !== undefined ? (\n      children\n    ) : (\n      <>\n        <span\n          data-slot=\"dropzone-icon\"\n          className={cn(\n            \"flex size-10 items-center justify-center rounded-[var(--ds-radius-full)]\",\n            \"bg-[var(--ds-muted)] text-[color:var(--ds-muted-foreground)]\",\n            \"group-data-[active]/dropzone:bg-[var(--ds-primary-soft)] group-data-[active]/dropzone:text-[color:var(--ds-primary)]\",\n            \"group-data-[reject]/dropzone:bg-[var(--ds-destructive-soft)] group-data-[reject]/dropzone:text-[color:var(--ds-destructive)]\",\n          )}\n        >\n          <Upload aria-hidden className=\"size-5\" />\n        </span>\n        <span\n          data-slot=\"dropzone-label\"\n          className=\"text-[length:var(--ds-text-body-sm)] font-medium text-[color:var(--ds-foreground)]\"\n        >\n          {label ??\n            (isDragReject\n              ? \"Some of these files are not allowed\"\n              : isDragActive\n                ? \"Drop to upload\"\n                : multiple\n                  ? \"Drop files here, or click to browse\"\n                  : \"Drop a file here, or click to browse\")}\n        </span>\n        {derivedHint ? (\n          <span\n            data-slot=\"dropzone-hint\"\n            className=\"text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\"\n          >\n            {derivedHint}\n          </span>\n        ) : null}\n      </>\n    );\n\n  return (\n    <div\n      {...getRootProps({\n        ...props,\n        ref: setRoot,\n        className: cn(\n          \"group/dropzone flex flex-col items-center justify-center gap-2 p-6 text-center\",\n          \"rounded-[var(--ds-radius-lg)] border border-dashed border-[var(--ds-border)] bg-[var(--ds-card)]\",\n          noClick ? \"select-none outline-none\" : \"cursor-pointer select-none outline-none\",\n          \"transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n          \"hover:border-[var(--ds-border-strong)] hover:bg-[var(--ds-hover)]\",\n          \"focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n          \"data-[active]:border-[var(--ds-primary)] data-[active]:bg-[var(--ds-primary-soft)]\",\n          \"data-[reject]:border-[var(--ds-destructive)] data-[reject]:bg-[var(--ds-destructive-soft)]\",\n          \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n          className,\n        ),\n      })}\n      data-slot=\"dropzone\"\n      data-active={isDragActive || undefined}\n      data-accept={(isDragActive && isDragAccept) || undefined}\n      data-reject={isDragReject || undefined}\n      data-focused={isFocused || undefined}\n      data-disabled={disabled || undefined}\n      data-no-click={noClick || undefined}\n      data-no-keyboard={noKeyboard || undefined}\n    >\n      <input data-slot=\"dropzone-input\" {...getInputProps()} />\n      {body}\n    </div>\n  );\n}\n\nexport interface FileListProps extends Omit<React.ComponentProps<\"ul\">, \"children\"> {\n  files: readonly File[];\n  /** Called with the file and its index when its remove button is pressed; the button is hidden when omitted. */\n  onRemove?: (file: File, index: number) => void;\n  /** Formats the size column; defaults to `formatFileSize`. */\n  formatSize?: (bytes: number) => string;\n}\n\n/**\n * The files a Dropzone picked: name, size and a remove button per row. Rows\n * are keyed by name, size and last-modified time so re-picking the same file\n * keeps its row stable.\n */\nfunction FileList({ files, onRemove, formatSize = formatFileSize, className, ...props }: FileListProps) {\n  if (files.length === 0) return null;\n  return (\n    <ul data-slot=\"file-list\" className={cn(\"flex list-none flex-col gap-1.5 p-0\", className)} {...props}>\n      {files.map((file, index) => (\n        <li\n          key={`${file.name}-${file.size}-${file.lastModified}`}\n          data-slot=\"file-list-item\"\n          className={cn(\n            \"flex items-center gap-3 px-3 py-2\",\n            \"rounded-[var(--ds-radius-md)] border border-[var(--ds-border-subtle)] bg-[var(--ds-card)]\",\n          )}\n        >\n          <FileIcon\n            aria-hidden\n            className=\"size-4 shrink-0 text-[color:var(--ds-muted-foreground)]\"\n          />\n          <span\n            data-slot=\"file-list-name\"\n            className=\"min-w-0 flex-1 truncate text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]\"\n            title={file.name}\n          >\n            {file.name}\n          </span>\n          <span\n            data-slot=\"file-list-size\"\n            className=\"shrink-0 font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\"\n          >\n            {formatSize(file.size)}\n          </span>\n          {onRemove ? (\n            <button\n              type=\"button\"\n              data-slot=\"file-list-remove\"\n              aria-label={`Remove ${file.name}`}\n              onClick={() => onRemove(file, index)}\n              className={cn(\n                \"inline-flex size-6 shrink-0 items-center justify-center rounded-[var(--ds-radius-sm)]\",\n                \"text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]\",\n                \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n                \"[&_svg]:size-3.5\",\n              )}\n            >\n              <X aria-hidden />\n            </button>\n          ) : null}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nexport { Dropzone, FileList, formatFileSize };\nexport type { Accept, FileRejection, DropzoneState };\n"],"mappings":"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"}

package/dist/components/empty-state.d.ts

@@ -0,0 +1,22 @@
+"use client";
+import * as React from "react";
+//#region src/components/empty-state.d.ts
+export interface EmptyStateProps extends Omit<React.ComponentProps<"div">, "title"> {
+  /** A lucide icon; sized and coloured by the state. */
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** One or two buttons offering the next step. */
+  action?: React.ReactNode;
+  /** `compact` for an empty panel inside a card; `default` for an empty page. */
+  size?: "default" | "compact";
+}
+/**
+ * EmptyState — the centred, muted "nothing here yet" surface. The icon sits
+ * in a soft disc on the muted token; the title stays in the foreground so the
+ * eye lands on it, and everything else recedes.
+ */
+declare function EmptyState({ className, icon, title, description, action, size, children, ...props }: EmptyStateProps): React.JSX.Element;
+//#endregion
+export { EmptyState };
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state.js

@@ -0,0 +1,46 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/empty-state.tsx
+/**
+* EmptyState — the centred, muted "nothing here yet" surface. The icon sits
+* in a soft disc on the muted token; the title stays in the foreground so the
+* eye lands on it, and everything else recedes.
+*/
+function EmptyState({ className, icon, title, description, action, size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "empty-state",
+		"data-size": size,
+		className: cn("flex flex-col items-center justify-center text-center", size === "compact" ? "gap-2 px-4 py-8" : "gap-3 px-6 py-16", "text-[color:var(--ds-muted-foreground)]", className),
+		...props,
+		children: [
+			icon ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "empty-state-icon",
+				"aria-hidden": true,
+				className: cn("mb-1 flex items-center justify-center rounded-[var(--ds-radius-full)]", "bg-[var(--ds-muted)] text-[color:var(--ds-text-tertiary)]", size === "compact" ? "size-10 [&_svg]:size-5" : "size-12 [&_svg]:size-6"),
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("p", {
+				"data-slot": "empty-state-title",
+				className: cn("font-semibold text-[color:var(--ds-foreground)]", size === "compact" ? "text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)]" : "text-[length:var(--ds-text-body-md)] leading-[var(--ds-text-body-md--line-height)]"),
+				children: title
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				"data-slot": "empty-state-description",
+				className: cn("max-w-sm text-balance", size === "compact" ? "text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)]" : "text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)]"),
+				children: description
+			}) : null,
+			children,
+			action ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "empty-state-action",
+				className: "mt-2 flex flex-wrap items-center justify-center gap-2",
+				children: action
+			}) : null
+		]
+	});
+}
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface EmptyStateProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  /** A lucide icon; sized and coloured by the state. */\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** One or two buttons offering the next step. */\n  action?: React.ReactNode;\n  /** `compact` for an empty panel inside a card; `default` for an empty page. */\n  size?: \"default\" | \"compact\";\n}\n\n/**\n * EmptyState — the centred, muted \"nothing here yet\" surface. The icon sits\n * in a soft disc on the muted token; the title stays in the foreground so the\n * eye lands on it, and everything else recedes.\n */\nfunction EmptyState({\n  className,\n  icon,\n  title,\n  description,\n  action,\n  size = \"default\",\n  children,\n  ...props\n}: EmptyStateProps) {\n  return (\n    <div\n      data-slot=\"empty-state\"\n      data-size={size}\n      className={cn(\n        \"flex flex-col items-center justify-center text-center\",\n        size === \"compact\" ? \"gap-2 px-4 py-8\" : \"gap-3 px-6 py-16\",\n        \"text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    >\n      {icon ? (\n        <div\n          data-slot=\"empty-state-icon\"\n          aria-hidden\n          className={cn(\n            \"mb-1 flex items-center justify-center rounded-[var(--ds-radius-full)]\",\n            \"bg-[var(--ds-muted)] text-[color:var(--ds-text-tertiary)]\",\n            size === \"compact\" ? \"size-10 [&_svg]:size-5\" : \"size-12 [&_svg]:size-6\",\n          )}\n        >\n          {icon}\n        </div>\n      ) : null}\n      <p\n        data-slot=\"empty-state-title\"\n        className={cn(\n          \"font-semibold text-[color:var(--ds-foreground)]\",\n          size === \"compact\"\n            ? \"text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)]\"\n            : \"text-[length:var(--ds-text-body-md)] leading-[var(--ds-text-body-md--line-height)]\",\n        )}\n      >\n        {title}\n      </p>\n      {description ? (\n        <p\n          data-slot=\"empty-state-description\"\n          className={cn(\n            \"max-w-sm text-balance\",\n            size === \"compact\"\n              ? \"text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)]\"\n              : \"text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)]\",\n          )}\n        >\n          {description}\n        </p>\n      ) : null}\n      {children}\n      {action ? (\n        <div data-slot=\"empty-state-action\" className=\"mt-2 flex flex-wrap items-center justify-center gap-2\">\n          {action}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { EmptyState };\n"],"mappings":";;;;;;;;;;AAqBA,SAAS,WAAW,EAClB,WACA,MACA,OACA,aACA,QACA,OAAO,WACP,UACA,GAAG,SACe;CAClB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,yDACA,SAAS,YAAY,oBAAoB,oBACzC,2CACA,SACF;EACA,GAAI;EATN,UAAA;GAWG,OACC,oBAAC,OAAD;IACE,aAAU;IACV,eAAA;IACA,WAAW,GACT,yEACA,6DACA,SAAS,YAAY,2BAA2B,wBAClD;IAEC,UAAA;GACE,CAAA,IACH;GACJ,oBAAC,KAAD;IACE,aAAU;IACV,WAAW,GACT,mDACA,SAAS,YACL,uFACA,oFACN;IAEC,UAAA;GACA,CAAA;GACF,cACC,oBAAC,KAAD;IACE,aAAU;IACV,WAAW,GACT,yBACA,SAAS,YACL,6FACA,oFACN;IAEC,UAAA;GACA,CAAA,IACD;GACH;GACA,SACC,oBAAC,OAAD;IAAK,aAAU;IAAqB,WAAU;IAC3C,UAAA;GACE,CAAA,IACH;EACD;;AAET"}

package/dist/components/error-banner.d.ts

@@ -0,0 +1,17 @@
+"use client";
+import * as React from "react";
+//#region src/components/error-banner.d.ts
+export interface ErrorBannerProps extends Omit<React.ComponentProps<"div">, "children"> {
+  message: string;
+  onDismiss?: () => void;
+  onRetry?: () => void;
+}
+/**
+ * ErrorBanner — the one error surface every screen uses: a warning icon, the
+ * message, and optional Retry / Dismiss actions. Renders nothing for an empty
+ * message so callers can pass their error state straight through.
+ */
+declare function ErrorBanner({ message, onDismiss, onRetry, className, ...props }: ErrorBannerProps): React.JSX.Element | null;
+//#endregion
+export { ErrorBanner };
+//# sourceMappingURL=error-banner.d.ts.map