@giddaa-housing/ui 0.1.0

package/dist/dropdown-menu.js

@@ -0,0 +1,376 @@
+// src/components/ui/dropdown-menu.tsx
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cva } from "class-variance-authority";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/size-context.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var SizeContext = createContext(void 0);
+function SizeProvider({
+  children,
+  size
+}) {
+  if (!size) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
+}
+function useComponentSize(size, fallback = "md") {
+  const inheritedSize = useContext(SizeContext);
+  return size ?? inheritedSize ?? fallback;
+}
+
+// src/components/ui/dropdown-menu.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DropdownMenu({
+  children,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(SizeProvider, { size, children: /* @__PURE__ */ jsx2(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props, children }) });
+}
+function DropdownMenuPortal({ ...props }) {
+  return /* @__PURE__ */ jsx2(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx2(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+var dropdownMenuContentVariants = cva(
+  "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+  {
+    variants: {
+      size: {
+        sm: "rounded-lg p-1",
+        md: "rounded-xl p-1.5",
+        lg: "rounded-[18px] p-2"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var dropdownMenuItemVariants = cva(
+  "group/dropdown-menu-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none transition-colors select-none focus:bg-surface focus:text-fg-primary data-highlighted:bg-surface data-highlighted:text-fg-primary data-[variant=destructive]:text-fg-danger data-[variant=destructive]:focus:bg-surface-danger-subtle data-[variant=destructive]:focus:text-fg-danger data-[variant=destructive]:data-highlighted:bg-surface-danger-subtle data-[variant=destructive]:data-highlighted:text-fg-danger data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder data-disabled:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:[&_svg]:text-fg-danger",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+        md: "gap-2 rounded-md px-4 py-2 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
+        lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var dropdownMenuLabelVariants = cva(
+  "font-medium text-fg-secondary data-inset:pl-8",
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-1 text-gdt-xs",
+        md: "px-3 py-1 text-gdt-xs",
+        lg: "px-4 py-1.5 text-gdt-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 6,
+  className,
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsx2(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+    MenuPrimitive.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx2(
+        MenuPrimitive.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          "data-size": resolvedSize,
+          className: cn(
+            dropdownMenuContentVariants({ size: resolvedSize }),
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    MenuPrimitive.Group,
+    {
+      "data-slot": "dropdown-menu-group",
+      className: cn("scroll-my-1 space-y-0.5", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsx2(
+    MenuPrimitive.GroupLabel,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        dropdownMenuLabelVariants({ size: resolvedSize }),
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsx2(
+    MenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-size": resolvedSize,
+      "data-variant": variant,
+      className: cn(
+        dropdownMenuItemVariants({ size: resolvedSize }),
+        "data-inset:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({ ...props }) {
+  return /* @__PURE__ */ jsx2(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.SubmenuTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      "data-size": resolvedSize,
+      className: cn(
+        dropdownMenuItemVariants({ size: resolvedSize }),
+        "data-inset:pl-8 data-open:bg-surface data-open:text-fg-primary data-popup-open:bg-surface data-popup-open:text-fg-primary",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "cn-rtl-flip ml-auto" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "w-auto min-w-28 shadow-(--elevation-e2-shadow)",
+        className
+      ),
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      "data-inset": inset,
+      "data-size": resolvedSize,
+      className: cn(
+        dropdownMenuItemVariants({ size: resolvedSize }),
+        "pr-10 data-inset:pl-8",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand",
+            "data-slot": "dropdown-menu-checkbox-item-indicator",
+            children: /* @__PURE__ */ jsx2(MenuPrimitive.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx2(CheckIcon, {}) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({ ...props }) {
+  return /* @__PURE__ */ jsx2(
+    MenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  const resolvedSize = useComponentSize();
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      "data-inset": inset,
+      "data-size": resolvedSize,
+      className: cn(
+        dropdownMenuItemVariants({ size: resolvedSize }),
+        "pr-10 data-inset:pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand",
+            "data-slot": "dropdown-menu-radio-item-indicator",
+            children: /* @__PURE__ */ jsx2(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx2(CheckIcon, {}) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    MenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("pointer-events-none my-1 h-px bg-line-subtle", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "ml-auto text-gdt-xs tracking-widest text-fg-secondary group-focus/dropdown-menu-item:text-fg-primary group-data-highlighted/dropdown-menu-item:text-fg-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+};
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/dropdown-menu.tsx","../src/lib/cn.ts","../src/components/ui/size-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { cva } from \"class-variance-authority\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\ntype DropdownMenuSize = ComponentSize;\n\nfunction DropdownMenu({\n\tchildren,\n\tsize,\n\t...props\n}: MenuPrimitive.Root.Props & {\n\tsize?: DropdownMenuSize;\n}) {\n\treturn (\n\t\t<SizeProvider size={size}>\n\t\t\t<MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props}>\n\t\t\t\t{children}\n\t\t\t</MenuPrimitive.Root>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n\treturn <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n\treturn <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nconst dropdownMenuContentVariants = cva(\n\t\"relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"rounded-lg p-1\",\n\t\t\t\tmd: \"rounded-xl p-1.5\",\n\t\t\t\tlg: \"rounded-[18px] p-2\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst dropdownMenuItemVariants = cva(\n\t\"group/dropdown-menu-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none transition-colors select-none focus:bg-surface focus:text-fg-primary data-highlighted:bg-surface data-highlighted:text-fg-primary data-[variant=destructive]:text-fg-danger data-[variant=destructive]:focus:bg-surface-danger-subtle data-[variant=destructive]:focus:text-fg-danger data-[variant=destructive]:data-highlighted:bg-surface-danger-subtle data-[variant=destructive]:data-highlighted:text-fg-danger data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder data-disabled:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:[&_svg]:text-fg-danger\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5\",\n\t\t\t\tmd: \"gap-2 rounded-md px-4 py-2 text-gdt-sm [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\tlg: \"gap-2.5 rounded-md px-4 py-2.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst dropdownMenuLabelVariants = cva(\n\t\"font-medium text-fg-secondary data-inset:pl-8\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"px-3 py-1 text-gdt-xs\",\n\t\t\t\tmd: \"px-3 py-1 text-gdt-xs\",\n\t\t\t\tlg: \"px-4 py-1.5 text-gdt-sm\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nfunction DropdownMenuContent({\n\talign = \"start\",\n\talignOffset = 0,\n\tside = \"bottom\",\n\tsideOffset = 6,\n\tclassName,\n\t...props\n}: MenuPrimitive.Popup.Props &\n\tPick<\n\t\tMenuPrimitive.Positioner.Props,\n\t\t\"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n\t>) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.Portal>\n\t\t\t<MenuPrimitive.Positioner\n\t\t\t\tclassName=\"isolate z-50 outline-none\"\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t>\n\t\t\t\t<MenuPrimitive.Popup\n\t\t\t\t\tdata-slot=\"dropdown-menu-content\"\n\t\t\t\t\tdata-size={resolvedSize}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tdropdownMenuContentVariants({ size: resolvedSize }),\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</MenuPrimitive.Positioner>\n\t\t</MenuPrimitive.Portal>\n\t);\n}\n\nfunction DropdownMenuGroup({ className, ...props }: MenuPrimitive.Group.Props) {\n\treturn (\n\t\t<MenuPrimitive.Group\n\t\t\tdata-slot=\"dropdown-menu-group\"\n\t\t\tclassName={cn(\"scroll-my-1 space-y-0.5\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuLabel({\n\tclassName,\n\tinset,\n\t...props\n}: MenuPrimitive.GroupLabel.Props & {\n\tinset?: boolean;\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.GroupLabel\n\t\t\tdata-slot=\"dropdown-menu-label\"\n\t\t\tdata-inset={inset}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuLabelVariants({ size: resolvedSize }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuItem({\n\tclassName,\n\tinset,\n\tvariant = \"default\",\n\t...props\n}: MenuPrimitive.Item.Props & {\n\tinset?: boolean;\n\tvariant?: \"default\" | \"destructive\";\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.Item\n\t\t\tdata-slot=\"dropdown-menu-item\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-size={resolvedSize}\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuItemVariants({ size: resolvedSize }),\n\t\t\t\t\"data-inset:pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n\treturn <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n\tclassName,\n\tinset,\n\tchildren,\n\t...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n\tinset?: boolean;\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.SubmenuTrigger\n\t\t\tdata-slot=\"dropdown-menu-sub-trigger\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-size={resolvedSize}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuItemVariants({ size: resolvedSize }),\n\t\t\t\t\"data-inset:pl-8 data-open:bg-surface data-open:text-fg-primary data-popup-open:bg-surface data-popup-open:text-fg-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n\t\t</MenuPrimitive.SubmenuTrigger>\n\t);\n}\n\nfunction DropdownMenuSubContent({\n\talign = \"start\",\n\talignOffset = -3,\n\tside = \"right\",\n\tsideOffset = 4,\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n\treturn (\n\t\t<DropdownMenuContent\n\t\t\tdata-slot=\"dropdown-menu-sub-content\"\n\t\t\tclassName={cn(\n\t\t\t\t\"w-auto min-w-28 shadow-(--elevation-e2-shadow)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\talign={align}\n\t\t\talignOffset={alignOffset}\n\t\t\tside={side}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuCheckboxItem({\n\tclassName,\n\tchildren,\n\tchecked,\n\tinset,\n\t...props\n}: MenuPrimitive.CheckboxItem.Props & {\n\tinset?: boolean;\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.CheckboxItem\n\t\t\tdata-slot=\"dropdown-menu-checkbox-item\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-size={resolvedSize}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuItemVariants({ size: resolvedSize }),\n\t\t\t\t\"pr-10 data-inset:pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand\"\n\t\t\t\tdata-slot=\"dropdown-menu-checkbox-item-indicator\"\n\t\t\t>\n\t\t\t\t<MenuPrimitive.CheckboxItemIndicator>\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</MenuPrimitive.CheckboxItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</MenuPrimitive.CheckboxItem>\n\t);\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n\treturn (\n\t\t<MenuPrimitive.RadioGroup\n\t\t\tdata-slot=\"dropdown-menu-radio-group\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuRadioItem({\n\tclassName,\n\tchildren,\n\tinset,\n\t...props\n}: MenuPrimitive.RadioItem.Props & {\n\tinset?: boolean;\n}) {\n\tconst resolvedSize = useComponentSize();\n\n\treturn (\n\t\t<MenuPrimitive.RadioItem\n\t\t\tdata-slot=\"dropdown-menu-radio-item\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-size={resolvedSize}\n\t\t\tclassName={cn(\n\t\t\t\tdropdownMenuItemVariants({ size: resolvedSize }),\n\t\t\t\t\"pr-10 data-inset:pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span\n\t\t\t\tclassName=\"pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand\"\n\t\t\t\tdata-slot=\"dropdown-menu-radio-item-indicator\"\n\t\t\t>\n\t\t\t\t<MenuPrimitive.RadioItemIndicator>\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</MenuPrimitive.RadioItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</MenuPrimitive.RadioItem>\n\t);\n}\n\nfunction DropdownMenuSeparator({\n\tclassName,\n\t...props\n}: MenuPrimitive.Separator.Props) {\n\treturn (\n\t\t<MenuPrimitive.Separator\n\t\t\tdata-slot=\"dropdown-menu-separator\"\n\t\t\tclassName={cn(\"pointer-events-none my-1 h-px bg-line-subtle\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuShortcut({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"dropdown-menu-shortcut\"\n\t\t\tclassName={cn(\n\t\t\t\t\"ml-auto text-gdt-xs tracking-widest text-fg-secondary group-focus/dropdown-menu-item:text-fg-primary group-data-highlighted/dropdown-menu-item:text-fg-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuPortal,\n\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuLabel,\n\tDropdownMenuItem,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuSubContent,\n\ttype DropdownMenuSize,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":"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","names":["jsx"]}

package/dist/dropzone.d.ts

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { ComponentPropsWithoutRef, Ref, DragEvent, ChangeEvent, RefObject, ReactNode, ComponentProps } from 'react';
+
+type FilePickerErrorCode = "file-invalid-type" | "file-too-large" | "too-many-files";
+type FilePickerError = {
+    code: FilePickerErrorCode;
+    message: string;
+};
+type FileRejection = {
+    file: File;
+    errors: FilePickerError[];
+};
+type FilePickerResult = {
+    acceptedFiles: File[];
+    rejectedFiles: FileRejection[];
+};
+type UseFilePickerOptions = {
+    accept?: string;
+    disabled?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+    multiple?: boolean;
+    onFilesAccepted?: (files: File[]) => void;
+    onFilesChange?: (result: FilePickerResult) => void;
+    onFilesRejected?: (rejectedFiles: FileRejection[]) => void;
+};
+type FilePickerInputProps = Omit<ComponentPropsWithoutRef<"input">, "type" | "accept" | "multiple"> & {
+    accept?: string;
+    multiple?: boolean;
+    ref?: Ref<HTMLInputElement>;
+};
+type UseFilePickerReturn = {
+    getInputProps: (props?: FilePickerInputProps) => FilePickerInputProps & {
+        type: "file";
+        ref: Ref<HTMLInputElement>;
+    };
+    handleDragEnter: (event: DragEvent<HTMLElement>) => void;
+    handleDragLeave: (event: DragEvent<HTMLElement>) => void;
+    handleDragOver: (event: DragEvent<HTMLElement>) => void;
+    handleDrop: (event: DragEvent<HTMLElement>) => void;
+    handleFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    inputRef: RefObject<HTMLInputElement | null>;
+    isDragging: boolean;
+    openFileDialog: () => void;
+    pickFiles: (files: FileList | File[]) => FilePickerResult;
+};
+
+type DropzoneContextValue = Pick<UseFilePickerReturn, "isDragging" | "openFileDialog" | "getInputProps" | "handleDragEnter" | "handleDragLeave" | "handleDragOver" | "handleDrop"> & {
+    isDisabled: boolean;
+};
+declare function useDropzoneContext(): DropzoneContextValue;
+interface DropzoneProps extends UseFilePickerOptions {
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Context provider that owns the `useFilePicker` instance.
+ * Wrap `<DropzoneArea>` and `<DropzoneInput>` (plus any content helpers)
+ * inside this component.
+ *
+ * @example
+ * ```tsx
+ * <Dropzone accept="image/*" multiple maxFiles={5} onFilesAccepted={handleFiles}>
+ *   <DropzoneArea>
+ *     <DropzoneIcon />
+ *     <DropzoneTitle>Choose a file or drag & drop</DropzoneTitle>
+ *     <DropzoneDescription>JPEG, PNG – up to 2 MB</DropzoneDescription>
+ *     <DropzoneTrigger />
+ *   </DropzoneArea>
+ *   <DropzoneInput />
+ * </Dropzone>
+ * ```
+ */
+declare function Dropzone({ children, className, disabled, ...options }: DropzoneProps): React.JSX.Element;
+interface DropzoneAreaProps extends Omit<ComponentProps<"div">, "onClick" | "onKeyDown"> {
+    /**
+     * Accessible label for the drop zone.
+     * Defaults to a sensible description.
+     */
+    label?: string;
+}
+/**
+ * The visual, interactive drop zone.
+ *
+ * - Behaves as a `button` (role, tabIndex, Enter/Space keyboard support).
+ * - Announces drag-state changes to screen readers via a live region.
+ * - Applies design-token-based styles and reacts to `data-dragging` /
+ *   `data-disabled` for visual feedback.
+ */
+declare function DropzoneArea({ children, className, label, ...props }: DropzoneAreaProps): React.JSX.Element;
+type DropzoneInputProps = Omit<ComponentProps<"input">, "type">;
+/**
+ * The hidden `<input type="file">` that backs the drop zone.
+ * Rendered off-screen (not `display:none`) so it remains accessible.
+ * Place it as a sibling to `<DropzoneArea>` inside `<Dropzone>`.
+ */
+declare function DropzoneInput({ className, ...props }: DropzoneInputProps): React.JSX.Element;
+type DropzoneStateLabelProps = {
+    children?: ReactNode;
+    disabledLabel?: ReactNode;
+    draggingLabel?: ReactNode;
+    idleLabel?: ReactNode;
+};
+type DropzoneTextProps = Omit<ComponentProps<"p">, "children"> & DropzoneStateLabelProps;
+/**
+ * A centred, brand-coloured icon container pre-populated with an upload cloud
+ * icon. Pass `children` to swap the icon.
+ */
+declare function DropzoneIcon({ className, children, ...props }: ComponentProps<"div">): React.JSX.Element;
+/**
+ * Primary heading text inside the drop zone.
+ */
+declare function DropzoneTitle({ className, children, disabledLabel, draggingLabel, idleLabel, ...props }: DropzoneTextProps): React.JSX.Element;
+/**
+ * Secondary descriptive text inside the drop zone (file-type hints, size
+ * limits, etc.).
+ */
+declare function DropzoneDescription({ className, children, disabledLabel, draggingLabel, idleLabel, ...props }: DropzoneTextProps): React.JSX.Element;
+/**
+ * A decorative "Browse File" pill that visually suggests the click action.
+ *
+ * This element is `aria-hidden` because the surrounding `<DropzoneArea>`
+ * already exposes a labelled `button` role to assistive technologies.
+ * The pill is purely a visual affordance.
+ */
+declare function DropzoneTrigger({ className, children, ...props }: ComponentProps<"span">): React.JSX.Element;
+
+export { Dropzone, DropzoneArea, DropzoneDescription, DropzoneIcon, DropzoneInput, DropzoneTitle, DropzoneTrigger, useDropzoneContext };