@psnext/design-system 2.4.0 → 2.6.0

package/dist/primitives/Credits/index.d.cts

@@ -1,2 +1,2 @@
-import { i as creditsVariants, n as CreditsProps, r as CreditsVariant, t as Credits } from "../../index21.cjs";
+import { i as creditsVariants, n as CreditsProps, r as CreditsVariant, t as Credits } from "../../index24.cjs";
 export { Credits, CreditsProps, CreditsVariant, creditsVariants };

package/dist/primitives/Credits/index.d.ts

@@ -1,2 +1,2 @@
-import { i as creditsVariants, n as CreditsProps, r as CreditsVariant, t as Credits } from "../../index21.js";
+import { i as creditsVariants, n as CreditsProps, r as CreditsVariant, t as Credits } from "../../index24.js";
 export { Credits, CreditsProps, CreditsVariant, creditsVariants };

package/dist/primitives/Dialog/index.d.cts

@@ -1,2 +1,2 @@
-import { a as DialogFooter, c as DialogPortal, i as DialogDescription, l as DialogTitle, n as DialogClose, o as DialogHeader, r as DialogContent, s as DialogOverlay, t as Dialog, u as DialogTrigger } from "../../index18.cjs";
+import { a as DialogFooter, c as DialogPortal, i as DialogDescription, l as DialogTitle, n as DialogClose, o as DialogHeader, r as DialogContent, s as DialogOverlay, t as Dialog, u as DialogTrigger } from "../../index19.cjs";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/primitives/Dialog/index.d.ts

@@ -1,2 +1,2 @@
-import { a as DialogFooter, c as DialogPortal, i as DialogDescription, l as DialogTitle, n as DialogClose, o as DialogHeader, r as DialogContent, s as DialogOverlay, t as Dialog, u as DialogTrigger } from "../../index18.js";
+import { a as DialogFooter, c as DialogPortal, i as DialogDescription, l as DialogTitle, n as DialogClose, o as DialogHeader, r as DialogContent, s as DialogOverlay, t as Dialog, u as DialogTrigger } from "../../index19.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/primitives/Drawer/index.cjs

@@ -39,13 +39,45 @@ function DrawerOverlay({ className, ...props }) {
 		...props
 	});
 }
+const drawerSizeVariants = {
+	small: [
+		"data-[vaul-drawer-direction=top]:max-h-[60vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[60vh]",
+		"data-[vaul-drawer-direction=right]:w-2/3 data-[vaul-drawer-direction=right]:sm:max-w-xs",
+		"data-[vaul-drawer-direction=left]:w-2/3 data-[vaul-drawer-direction=left]:sm:max-w-xs"
+	].join(" "),
+	default: [
+		"data-[vaul-drawer-direction=top]:max-h-[80vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[80vh]",
+		"data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
+		"data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm"
+	].join(" "),
+	medium: [
+		"data-[vaul-drawer-direction=top]:max-h-[85vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[85vh]",
+		"data-[vaul-drawer-direction=right]:w-4/5 data-[vaul-drawer-direction=right]:sm:max-w-md",
+		"data-[vaul-drawer-direction=left]:w-4/5 data-[vaul-drawer-direction=left]:sm:max-w-md"
+	].join(" "),
+	large: [
+		"data-[vaul-drawer-direction=top]:max-h-[90vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[90vh]",
+		"data-[vaul-drawer-direction=right]:w-11/12 data-[vaul-drawer-direction=right]:sm:max-w-lg",
+		"data-[vaul-drawer-direction=left]:w-11/12 data-[vaul-drawer-direction=left]:sm:max-w-lg"
+	].join(" "),
+	extraLarge: [
+		"data-[vaul-drawer-direction=top]:max-h-[95vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[95vh]",
+		"data-[vaul-drawer-direction=right]:w-[95vw] data-[vaul-drawer-direction=right]:sm:max-w-2xl",
+		"data-[vaul-drawer-direction=left]:w-[95vw] data-[vaul-drawer-direction=left]:sm:max-w-2xl"
+	].join(" ")
+};
 /** Sliding panel that holds the drawer's content; auto-portals and renders the overlay. */
-function DrawerContent({ className, children, ...props }) {
+function DrawerContent({ className, children, size = "default", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DrawerPortal, {
 		"data-slot": "drawer-portal",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul.Drawer.Content, {
 			"data-slot": "drawer-content",
-			className: require_cn.cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-primary-bg shadow-lg", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-10 data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-10 data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", className),
+			className: require_cn.cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-primary-bg shadow-lg", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:rounded-b-10 data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:rounded-t-10 data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:border-l", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:border-r", drawerSizeVariants[size], className),
 			...props,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-auto mt-2 hidden h-0.75 w-12.5 shrink-0 rounded-2 bg-muted-bg group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
 		})]

package/dist/primitives/Drawer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["DrawerPrimitive","cn"],"sources":["../../../src/primitives/Drawer/Drawer.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a vaul-backed sliding drawer; controls open state and slide `direction`. */\nfunction Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\n/** Element that toggles the drawer open when interacted with. */\nfunction DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\n/** Portals the overlay and content out to the document body. */\nfunction DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\n/** Element that closes the drawer when interacted with. */\nfunction DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\n/** Dimmed backdrop rendered behind the drawer content. */\nfunction DrawerOverlay({\n  /** Extra classes merged onto the overlay surface. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-overlay-bg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sliding panel that holds the drawer's content; auto-portals and renders the overlay. */\nfunction DrawerContent({\n  /** Extra classes merged onto the content panel. */\n  className,\n  /** Body of the drawer, typically header/footer plus content. */\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-primary-bg shadow-lg\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-10 data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-10 data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-2 hidden h-0.75 w-12.5 shrink-0 rounded-2 bg-muted-bg group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\n/** Top region of the drawer; groups the title and description. */\nfunction DrawerHeader({\n  /** Extra classes merged onto the header wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Bottom region of the drawer; typically holds actions, pinned to the panel base. */\nfunction DrawerFooter({\n  /** Extra classes merged onto the footer wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the drawer, announced to assistive tech. */\nfunction DrawerTitle({\n  /** Extra classes merged onto the title. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Supporting description text shown beneath the drawer title. */\nfunction DrawerDescription({\n  /** Extra classes merged onto the description. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-txt text-sm leading-5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],"mappings":";;;;;;AAMA,SAAS,OAAO,EAAE,GAAG,SAA4D;CAC/E,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;;AAGA,SAAS,cAAc,EAAE,GAAG,SAA+D;CACzF,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;AAGA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,cAAc,EAErB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,4JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAErB,WAEA,UACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAc,aAAU;YAAxB,CACE,iBAAA,GAAA,kBAAA,KAAC,eAAD,CAAgB,CAAA,GAChB,iBAAA,GAAA,kBAAA,MAACD,KAAAA,OAAgB,SAAjB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,gFACA,kQACA,uRACA,+NACA,yNACA,SACF;GACA,GAAI;aAVN,CAYE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,kIAAmI,CAAA,GACjJ,QACsB;IACb;;AAElB;;AAGA,SAAS,aAAa,EAEpB,WACA,GAAG,SAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAEpB,WACA,GAAG,SAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAEnB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAEzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["DrawerPrimitive","cn"],"sources":["../../../src/primitives/Drawer/Drawer.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a vaul-backed sliding drawer; controls open state and slide `direction`. */\nfunction Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\n/** Element that toggles the drawer open when interacted with. */\nfunction DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\n/** Portals the overlay and content out to the document body. */\nfunction DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\n/** Element that closes the drawer when interacted with. */\nfunction DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\n/** Dimmed backdrop rendered behind the drawer content. */\nfunction DrawerOverlay({\n  /** Extra classes merged onto the overlay surface. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-overlay-bg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst drawerSizeVariants = {\n  small: [\n    \"data-[vaul-drawer-direction=top]:max-h-[60vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[60vh]\",\n    \"data-[vaul-drawer-direction=right]:w-2/3 data-[vaul-drawer-direction=right]:sm:max-w-xs\",\n    \"data-[vaul-drawer-direction=left]:w-2/3 data-[vaul-drawer-direction=left]:sm:max-w-xs\",\n  ].join(\" \"),\n  default: [\n    \"data-[vaul-drawer-direction=top]:max-h-[80vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[80vh]\",\n    \"data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n    \"data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n  ].join(\" \"),\n  medium: [\n    \"data-[vaul-drawer-direction=top]:max-h-[85vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[85vh]\",\n    \"data-[vaul-drawer-direction=right]:w-4/5 data-[vaul-drawer-direction=right]:sm:max-w-md\",\n    \"data-[vaul-drawer-direction=left]:w-4/5 data-[vaul-drawer-direction=left]:sm:max-w-md\",\n  ].join(\" \"),\n  large: [\n    \"data-[vaul-drawer-direction=top]:max-h-[90vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[90vh]\",\n    \"data-[vaul-drawer-direction=right]:w-11/12 data-[vaul-drawer-direction=right]:sm:max-w-lg\",\n    \"data-[vaul-drawer-direction=left]:w-11/12 data-[vaul-drawer-direction=left]:sm:max-w-lg\",\n  ].join(\" \"),\n  extraLarge: [\n    \"data-[vaul-drawer-direction=top]:max-h-[95vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[95vh]\",\n    \"data-[vaul-drawer-direction=right]:w-[95vw] data-[vaul-drawer-direction=right]:sm:max-w-2xl\",\n    \"data-[vaul-drawer-direction=left]:w-[95vw] data-[vaul-drawer-direction=left]:sm:max-w-2xl\",\n  ].join(\" \"),\n} as const;\n\n/** Sliding panel that holds the drawer's content; auto-portals and renders the overlay. */\nfunction DrawerContent({\n  /** Extra classes merged onto the content panel. */\n  className,\n  /** Body of the drawer, typically header/footer plus content. */\n  children,\n  /** Optional size variant for the drawer panel. */\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content> & {\n  /** Panel size. `default` matches the existing production sizing. */\n  size?: keyof typeof drawerSizeVariants;\n}) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-primary-bg shadow-lg\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:rounded-b-10 data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:rounded-t-10 data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:border-l\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:border-r\",\n          drawerSizeVariants[size],\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-2 hidden h-0.75 w-12.5 shrink-0 rounded-2 bg-muted-bg group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\n/** Top region of the drawer; groups the title and description. */\nfunction DrawerHeader({\n  /** Extra classes merged onto the header wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Bottom region of the drawer; typically holds actions, pinned to the panel base. */\nfunction DrawerFooter({\n  /** Extra classes merged onto the footer wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the drawer, announced to assistive tech. */\nfunction DrawerTitle({\n  /** Extra classes merged onto the title. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Supporting description text shown beneath the drawer title. */\nfunction DrawerDescription({\n  /** Extra classes merged onto the description. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-txt text-sm leading-5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],"mappings":";;;;;;AAMA,SAAS,OAAO,EAAE,GAAG,SAA4D;CAC/E,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;;AAGA,SAAS,cAAc,EAAE,GAAG,SAA+D;CACzF,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;AAGA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,cAAc,EAErB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,4JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAqB;CACzB,OAAO;EACL;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;CACV,SAAS;EACP;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;CACV,QAAQ;EACN;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;CACV,YAAY;EACV;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;AACZ;;AAGA,SAAS,cAAc,EAErB,WAEA,UAEA,OAAO,WACP,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAc,aAAU;YAAxB,CACE,iBAAA,GAAA,kBAAA,KAAC,eAAD,CAAgB,CAAA,GAChB,iBAAA,GAAA,kBAAA,MAACD,KAAAA,OAAgB,SAAjB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,gFACA,oNACA,sOACA,uIACA,mIACA,mBAAmB,OACnB,SACF;GACA,GAAI;aAXN,CAaE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,kIAAmI,CAAA,GACjJ,QACsB;IACb;;AAElB;;AAGA,SAAS,aAAa,EAEpB,WACA,GAAG,SAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAEpB,WACA,GAAG,SAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAEnB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAEzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Drawer/index.d.cts

@@ -1,2 +1,2 @@
-import { a as DrawerFooter, c as DrawerPortal, i as DrawerDescription, l as DrawerTitle, n as DrawerClose, o as DrawerHeader, r as DrawerContent, s as DrawerOverlay, t as Drawer, u as DrawerTrigger } from "../../index22.cjs";
+import { a as DrawerFooter, c as DrawerPortal, i as DrawerDescription, l as DrawerTitle, n as DrawerClose, o as DrawerHeader, r as DrawerContent, s as DrawerOverlay, t as Drawer, u as DrawerTrigger } from "../../index25.cjs";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

package/dist/primitives/Drawer/index.d.ts

@@ -1,2 +1,2 @@
-import { a as DrawerFooter, c as DrawerPortal, i as DrawerDescription, l as DrawerTitle, n as DrawerClose, o as DrawerHeader, r as DrawerContent, s as DrawerOverlay, t as Drawer, u as DrawerTrigger } from "../../index22.js";
+import { a as DrawerFooter, c as DrawerPortal, i as DrawerDescription, l as DrawerTitle, n as DrawerClose, o as DrawerHeader, r as DrawerContent, s as DrawerOverlay, t as Drawer, u as DrawerTrigger } from "../../index25.js";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

package/dist/primitives/Drawer/index.js

@@ -38,13 +38,45 @@ function DrawerOverlay({ className, ...props }) {
 		...props
 	});
 }
+const drawerSizeVariants = {
+	small: [
+		"data-[vaul-drawer-direction=top]:max-h-[60vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[60vh]",
+		"data-[vaul-drawer-direction=right]:w-2/3 data-[vaul-drawer-direction=right]:sm:max-w-xs",
+		"data-[vaul-drawer-direction=left]:w-2/3 data-[vaul-drawer-direction=left]:sm:max-w-xs"
+	].join(" "),
+	default: [
+		"data-[vaul-drawer-direction=top]:max-h-[80vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[80vh]",
+		"data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
+		"data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm"
+	].join(" "),
+	medium: [
+		"data-[vaul-drawer-direction=top]:max-h-[85vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[85vh]",
+		"data-[vaul-drawer-direction=right]:w-4/5 data-[vaul-drawer-direction=right]:sm:max-w-md",
+		"data-[vaul-drawer-direction=left]:w-4/5 data-[vaul-drawer-direction=left]:sm:max-w-md"
+	].join(" "),
+	large: [
+		"data-[vaul-drawer-direction=top]:max-h-[90vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[90vh]",
+		"data-[vaul-drawer-direction=right]:w-11/12 data-[vaul-drawer-direction=right]:sm:max-w-lg",
+		"data-[vaul-drawer-direction=left]:w-11/12 data-[vaul-drawer-direction=left]:sm:max-w-lg"
+	].join(" "),
+	extraLarge: [
+		"data-[vaul-drawer-direction=top]:max-h-[95vh]",
+		"data-[vaul-drawer-direction=bottom]:max-h-[95vh]",
+		"data-[vaul-drawer-direction=right]:w-[95vw] data-[vaul-drawer-direction=right]:sm:max-w-2xl",
+		"data-[vaul-drawer-direction=left]:w-[95vw] data-[vaul-drawer-direction=left]:sm:max-w-2xl"
+	].join(" ")
+};
 /** Sliding panel that holds the drawer's content; auto-portals and renders the overlay. */
-function DrawerContent({ className, children, ...props }) {
+function DrawerContent({ className, children, size = "default", ...props }) {
 	return /* @__PURE__ */ jsxs(DrawerPortal, {
 		"data-slot": "drawer-portal",
 		children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
 			"data-slot": "drawer-content",
-			className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-primary-bg shadow-lg", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-10 data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-10 data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", className),
+			className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-primary-bg shadow-lg", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:rounded-b-10 data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:rounded-t-10 data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:border-l", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:border-r", drawerSizeVariants[size], className),
 			...props,
 			children: [/* @__PURE__ */ jsx("div", { className: "mx-auto mt-2 hidden h-0.75 w-12.5 shrink-0 rounded-2 bg-muted-bg group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
 		})]

package/dist/primitives/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DrawerPrimitive"],"sources":["../../../src/primitives/Drawer/Drawer.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a vaul-backed sliding drawer; controls open state and slide `direction`. */\nfunction Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\n/** Element that toggles the drawer open when interacted with. */\nfunction DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\n/** Portals the overlay and content out to the document body. */\nfunction DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\n/** Element that closes the drawer when interacted with. */\nfunction DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\n/** Dimmed backdrop rendered behind the drawer content. */\nfunction DrawerOverlay({\n  /** Extra classes merged onto the overlay surface. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-overlay-bg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sliding panel that holds the drawer's content; auto-portals and renders the overlay. */\nfunction DrawerContent({\n  /** Extra classes merged onto the content panel. */\n  className,\n  /** Body of the drawer, typically header/footer plus content. */\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-primary-bg shadow-lg\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-10 data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-10 data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-2 hidden h-0.75 w-12.5 shrink-0 rounded-2 bg-muted-bg group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\n/** Top region of the drawer; groups the title and description. */\nfunction DrawerHeader({\n  /** Extra classes merged onto the header wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Bottom region of the drawer; typically holds actions, pinned to the panel base. */\nfunction DrawerFooter({\n  /** Extra classes merged onto the footer wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the drawer, announced to assistive tech. */\nfunction DrawerTitle({\n  /** Extra classes merged onto the title. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Supporting description text shown beneath the drawer title. */\nfunction DrawerDescription({\n  /** Extra classes merged onto the description. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-txt text-sm leading-5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],"mappings":";;;;;AAMA,SAAS,OAAO,EAAE,GAAG,SAA4D;CAC/E,OAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;;AAGA,SAAS,cAAc,EAAE,GAAG,SAA+D;CACzF,OAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;AAGA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,cAAc,EAErB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAErB,WAEA,UACA,GAAG,SACoD;CACvD,OACE,qBAAC,cAAD;EAAc,aAAU;YAAxB,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,SAAgB,SAAjB;GACE,aAAU;GACV,WAAW,GACT,gFACA,kQACA,uRACA,+NACA,yNACA,SACF;GACA,GAAI;aAVN,CAYE,oBAAC,OAAD,EAAK,WAAU,kIAAmI,CAAA,GACjJ,QACsB;IACb;;AAElB;;AAGA,SAAS,aAAa,EAEpB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAEpB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAEnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAEzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":["DrawerPrimitive"],"sources":["../../../src/primitives/Drawer/Drawer.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a vaul-backed sliding drawer; controls open state and slide `direction`. */\nfunction Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\n/** Element that toggles the drawer open when interacted with. */\nfunction DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\n/** Portals the overlay and content out to the document body. */\nfunction DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\n/** Element that closes the drawer when interacted with. */\nfunction DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\n/** Dimmed backdrop rendered behind the drawer content. */\nfunction DrawerOverlay({\n  /** Extra classes merged onto the overlay surface. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-overlay-bg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst drawerSizeVariants = {\n  small: [\n    \"data-[vaul-drawer-direction=top]:max-h-[60vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[60vh]\",\n    \"data-[vaul-drawer-direction=right]:w-2/3 data-[vaul-drawer-direction=right]:sm:max-w-xs\",\n    \"data-[vaul-drawer-direction=left]:w-2/3 data-[vaul-drawer-direction=left]:sm:max-w-xs\",\n  ].join(\" \"),\n  default: [\n    \"data-[vaul-drawer-direction=top]:max-h-[80vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[80vh]\",\n    \"data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n    \"data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n  ].join(\" \"),\n  medium: [\n    \"data-[vaul-drawer-direction=top]:max-h-[85vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[85vh]\",\n    \"data-[vaul-drawer-direction=right]:w-4/5 data-[vaul-drawer-direction=right]:sm:max-w-md\",\n    \"data-[vaul-drawer-direction=left]:w-4/5 data-[vaul-drawer-direction=left]:sm:max-w-md\",\n  ].join(\" \"),\n  large: [\n    \"data-[vaul-drawer-direction=top]:max-h-[90vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[90vh]\",\n    \"data-[vaul-drawer-direction=right]:w-11/12 data-[vaul-drawer-direction=right]:sm:max-w-lg\",\n    \"data-[vaul-drawer-direction=left]:w-11/12 data-[vaul-drawer-direction=left]:sm:max-w-lg\",\n  ].join(\" \"),\n  extraLarge: [\n    \"data-[vaul-drawer-direction=top]:max-h-[95vh]\",\n    \"data-[vaul-drawer-direction=bottom]:max-h-[95vh]\",\n    \"data-[vaul-drawer-direction=right]:w-[95vw] data-[vaul-drawer-direction=right]:sm:max-w-2xl\",\n    \"data-[vaul-drawer-direction=left]:w-[95vw] data-[vaul-drawer-direction=left]:sm:max-w-2xl\",\n  ].join(\" \"),\n} as const;\n\n/** Sliding panel that holds the drawer's content; auto-portals and renders the overlay. */\nfunction DrawerContent({\n  /** Extra classes merged onto the content panel. */\n  className,\n  /** Body of the drawer, typically header/footer plus content. */\n  children,\n  /** Optional size variant for the drawer panel. */\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content> & {\n  /** Panel size. `default` matches the existing production sizing. */\n  size?: keyof typeof drawerSizeVariants;\n}) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-primary-bg shadow-lg\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:rounded-b-10 data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:rounded-t-10 data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:border-l\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:border-r\",\n          drawerSizeVariants[size],\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-2 hidden h-0.75 w-12.5 shrink-0 rounded-2 bg-muted-bg group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\n/** Top region of the drawer; groups the title and description. */\nfunction DrawerHeader({\n  /** Extra classes merged onto the header wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Bottom region of the drawer; typically holds actions, pinned to the panel base. */\nfunction DrawerFooter({\n  /** Extra classes merged onto the footer wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the drawer, announced to assistive tech. */\nfunction DrawerTitle({\n  /** Extra classes merged onto the title. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Supporting description text shown beneath the drawer title. */\nfunction DrawerDescription({\n  /** Extra classes merged onto the description. */\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-txt text-sm leading-5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],"mappings":";;;;;AAMA,SAAS,OAAO,EAAE,GAAG,SAA4D;CAC/E,OAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;;AAGA,SAAS,cAAc,EAAE,GAAG,SAA+D;CACzF,OAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;AAGA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,cAAc,EAErB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAqB;CACzB,OAAO;EACL;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;CACV,SAAS;EACP;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;CACV,QAAQ;EACN;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;CACV,YAAY;EACV;EACA;EACA;EACA;CACF,EAAE,KAAK,GAAG;AACZ;;AAGA,SAAS,cAAc,EAErB,WAEA,UAEA,OAAO,WACP,GAAG,SAIF;CACD,OACE,qBAAC,cAAD;EAAc,aAAU;YAAxB,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,SAAgB,SAAjB;GACE,aAAU;GACV,WAAW,GACT,gFACA,oNACA,sOACA,uIACA,mIACA,mBAAmB,OACnB,SACF;GACA,GAAI;aAXN,CAaE,oBAAC,OAAD,EAAK,WAAU,kIAAmI,CAAA,GACjJ,QACsB;IACb;;AAElB;;AAGA,SAAS,aAAa,EAEpB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAEpB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAEnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAEzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/DropdownMenu/index.d.cts

@@ -1,2 +1,2 @@
-import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../../index23.cjs";
+import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../../index26.cjs";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/primitives/DropdownMenu/index.d.ts

@@ -1,2 +1,2 @@
-import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../../index23.js";
+import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../../index26.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/primitives/Empty/index.d.cts

@@ -1,2 +1,2 @@
-import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index24.cjs";
+import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index27.cjs";
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyVariants };

package/dist/primitives/Empty/index.d.ts

@@ -1,2 +1,2 @@
-import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index24.js";
+import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index27.js";
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyVariants };

package/dist/primitives/Field/index.d.cts

@@ -1,2 +1,2 @@
-import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index26.cjs";
+import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index29.cjs";
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/primitives/Field/index.d.ts

@@ -1,2 +1,2 @@
-import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index26.js";
+import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index29.js";
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/primitives/FileUpload/index.cjs

@@ -0,0 +1,354 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+const require_primitives_Button_index = require("../Button/index.cjs");
+const require_primitives_Progress_index = require("../Progress/index.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/primitives/FileUpload/FileUpload.tsx
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function formatBytes(value) {
+	if (!Number.isFinite(value) || value <= 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const exponent = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
+	const size = value / 1024 ** exponent;
+	return `${size.toFixed(size >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`;
+}
+function getAcceptTokens(accept) {
+	return (accept ?? "").split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+}
+function matchesAccept(file, accept) {
+	const tokens = getAcceptTokens(accept);
+	if (tokens.length === 0) return true;
+	const fileName = file.name.toLowerCase();
+	const fileType = file.type.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return fileName.endsWith(token);
+		if (token.endsWith("/*")) {
+			const category = token.slice(0, token.length - 1);
+			return fileType.startsWith(category);
+		}
+		return fileType === token;
+	});
+}
+function createFileItem(file) {
+	return {
+		id: typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `${file.name}-${file.lastModified}-${Math.random().toString(36).slice(2)}`,
+		file,
+		status: "idle",
+		progress: 0
+	};
+}
+function hasFiles(event) {
+	return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+function getStatusLabel(item) {
+	if (item.status === "idle") return "Ready to upload";
+	if (item.status === "uploading") return `Uploading… ${Math.round(item.progress)}%`;
+	if (item.status === "success") return "Upload complete";
+	return item.error ? `Upload failed: ${item.error}` : "Upload failed";
+}
+/** File upload primitive with click-to-browse and drag-and-drop interactions, validation, and per-file upload states. */
+function FileUpload({ className, multiple = false, accept, maxFiles, maxFileSize, validateFile, onUpload, onItemsChange, dropzoneAriaLabel = "File upload drop zone", disabled, ...props }) {
+	const inputRef = react.useRef(null);
+	const uploadControllersRef = react.useRef(/* @__PURE__ */ new Map());
+	const [items, setItems] = react.useState([]);
+	const [errors, setErrors] = react.useState([]);
+	const [dragState, setDragState] = react.useState("idle");
+	const dragDepthRef = react.useRef(0);
+	const baseId = react.useId();
+	const hintId = `${baseId}-hint`;
+	const errorId = `${baseId}-errors`;
+	const updateItem = react.useCallback((itemId, updater) => {
+		setItems((current) => current.map((item) => item.id === itemId ? updater(item) : item));
+	}, []);
+	const removeItem = react.useCallback((itemId) => {
+		uploadControllersRef.current.get(itemId)?.abort();
+		uploadControllersRef.current.delete(itemId);
+		setItems((current) => current.filter((item) => item.id !== itemId));
+	}, []);
+	const beginUpload = react.useCallback((item) => {
+		if (!onUpload) return;
+		const controller = new AbortController();
+		uploadControllersRef.current.set(item.id, controller);
+		updateItem(item.id, (current) => ({
+			...current,
+			status: "uploading",
+			progress: 0,
+			error: void 0
+		}));
+		onUpload({
+			file: item.file,
+			signal: controller.signal,
+			reportProgress: (value) => {
+				updateItem(item.id, (current) => {
+					if (current.status !== "uploading") return current;
+					return {
+						...current,
+						progress: clamp(value, 0, 100)
+					};
+				});
+			}
+		}).then(() => {
+			if (controller.signal.aborted) return;
+			updateItem(item.id, (current) => ({
+				...current,
+				status: "success",
+				progress: 100,
+				error: void 0
+			}));
+		}).catch((uploadError) => {
+			if (controller.signal.aborted) return;
+			const message = uploadError instanceof Error && uploadError.message ? uploadError.message : "Upload failed.";
+			updateItem(item.id, (current) => ({
+				...current,
+				status: "error",
+				error: message
+			}));
+		}).finally(() => {
+			uploadControllersRef.current.delete(item.id);
+		});
+	}, [onUpload, updateItem]);
+	const queueFiles = react.useCallback((queuedFiles) => {
+		const incoming = Array.isArray(queuedFiles) ? queuedFiles : Array.from(queuedFiles);
+		if (incoming.length === 0) return;
+		if (!multiple) {
+			uploadControllersRef.current.forEach((controller) => controller.abort());
+			uploadControllersRef.current.clear();
+		}
+		const nextErrors = [];
+		const acceptedItems = [];
+		const nextItems = multiple ? [...items] : [];
+		const effectiveMaxFiles = multiple ? maxFiles ?? Number.POSITIVE_INFINITY : 1;
+		let candidates = incoming;
+		if (!multiple && incoming.length > 1) {
+			nextErrors.push("Only one file can be selected at a time.");
+			candidates = [incoming[0]];
+		}
+		const availableSlots = Math.max(0, effectiveMaxFiles - nextItems.length);
+		if (availableSlots < candidates.length) {
+			nextErrors.push(`You can upload up to ${effectiveMaxFiles} file${effectiveMaxFiles === 1 ? "" : "s"}.`);
+			candidates = candidates.slice(0, availableSlots);
+		}
+		for (const file of candidates) {
+			if (!matchesAccept(file, accept)) {
+				nextErrors.push(`${file.name} has an unsupported file type.`);
+				continue;
+			}
+			if (maxFileSize != null && file.size > maxFileSize) {
+				nextErrors.push(`${file.name} exceeds the ${formatBytes(maxFileSize)} size limit.`);
+				continue;
+			}
+			const customError = validateFile?.(file);
+			if (customError) {
+				nextErrors.push(customError);
+				continue;
+			}
+			const item = createFileItem(file);
+			acceptedItems.push(item);
+			nextItems.push(item);
+		}
+		setItems(nextItems);
+		setErrors(nextErrors);
+		setDragState(nextErrors.length > 0 ? "invalid-drop" : "idle");
+		if (onUpload) acceptedItems.forEach((item) => beginUpload(item));
+	}, [
+		accept,
+		beginUpload,
+		items,
+		maxFileSize,
+		maxFiles,
+		multiple,
+		onUpload,
+		validateFile
+	]);
+	const openPicker = react.useCallback(() => {
+		if (disabled) return;
+		inputRef.current?.click();
+	}, [disabled]);
+	const handleInputChange = react.useCallback((event) => {
+		queueFiles(event.target.files ?? []);
+		event.target.value = "";
+	}, [queueFiles]);
+	const handleDragEnter = react.useCallback((event) => {
+		event.preventDefault();
+		if (disabled) return;
+		if (!hasFiles(event)) {
+			setDragState("invalid-drop");
+			return;
+		}
+		dragDepthRef.current += 1;
+		setDragState("drag-over");
+	}, [disabled]);
+	const handleDragOver = react.useCallback((event) => {
+		event.preventDefault();
+		if (disabled) return;
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+		if (!hasFiles(event)) setDragState("invalid-drop");
+	}, [disabled]);
+	const handleDragLeave = react.useCallback((event) => {
+		event.preventDefault();
+		dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+		if (dragDepthRef.current === 0) setDragState("idle");
+	}, []);
+	const handleDrop = react.useCallback((event) => {
+		event.preventDefault();
+		dragDepthRef.current = 0;
+		if (disabled) return;
+		if (!hasFiles(event)) {
+			setErrors(["Only files can be dropped here."]);
+			setDragState("invalid-drop");
+			return;
+		}
+		queueFiles(event.dataTransfer.files);
+	}, [disabled, queueFiles]);
+	react.useEffect(() => {
+		onItemsChange?.(items);
+	}, [items, onItemsChange]);
+	react.useEffect(() => () => {
+		uploadControllersRef.current.forEach((controller) => controller.abort());
+		uploadControllersRef.current.clear();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "file-upload",
+		className: require_cn.cn("flex flex-col gap-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				type: "file",
+				accept,
+				multiple,
+				disabled,
+				"data-slot": "file-upload-input",
+				className: "hidden",
+				onChange: handleInputChange,
+				tabIndex: -1
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-slot": "file-upload-dropzone",
+				"data-drag-state": dragState,
+				role: "button",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": dropzoneAriaLabel,
+				"aria-disabled": disabled || void 0,
+				"aria-describedby": errors.length > 0 ? `${hintId} ${errorId}` : hintId,
+				className: require_cn.cn("flex cursor-pointer flex-col items-center justify-center gap-2 rounded-12 border-2 border-dashed px-5 py-8 text-center outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus", "data-[drag-state=idle]:border-primary-border data-[drag-state=idle]:bg-secondary-bg/25", "data-[drag-state=drag-over]:border-primary-invert-border data-[drag-state=drag-over]:bg-primary-bg", "data-[drag-state=invalid-drop]:border-danger-border data-[drag-state=invalid-drop]:bg-danger-bg/35", disabled && "cursor-not-allowed opacity-60"),
+				onClick: openPicker,
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						openPicker();
+					}
+				},
+				onDragEnter: handleDragEnter,
+				onDragOver: handleDragOver,
+				onDragLeave: handleDragLeave,
+				onDrop: handleDrop,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UploadCloud, {
+						className: "size-8 text-muted-txt",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "font-medium text-sm text-primary-txt",
+						children: "Drag files here or click to browse"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						id: hintId,
+						className: "text-muted-txt text-xs",
+						children: [
+							multiple ? "Supports multiple files." : "Supports one file.",
+							accept ? ` Accepted: ${accept}.` : "",
+							maxFileSize ? ` Max file size: ${formatBytes(maxFileSize)}.` : ""
+						]
+					})
+				]
+			}),
+			errors.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				id: errorId,
+				role: "alert",
+				className: "space-y-1 text-danger-txt text-xs",
+				children: errors.map((message, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-start gap-1.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleAlert, {
+						className: "mt-0.5 size-3.5 shrink-0",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: message })]
+				}, `${message}-${index}`))
+			}) : null,
+			items.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				"data-slot": "file-upload-list",
+				className: "space-y-2",
+				"aria-live": "polite",
+				children: items.map((item) => {
+					const showProgress = item.status === "uploading" || item.status === "success";
+					const progressVariant = item.status === "error" ? "destructive" : "default";
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						"data-slot": "file-upload-item",
+						"data-state": item.status,
+						className: "rounded-12 border border-primary-border bg-secondary-bg/20 px-3 py-2",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-start gap-2.5",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "mt-0.5 shrink-0 text-muted-txt",
+									"aria-hidden": "true",
+									children: item.status === "success" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "size-4 text-success-txt" }) : item.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleAlert, { className: "size-4 text-danger-txt" }) : item.status === "uploading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileIcon, { className: "size-4" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "min-w-0 flex-1",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex items-center justify-between gap-3",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "truncate font-medium text-sm text-primary-txt",
+												children: item.file.name
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "shrink-0 text-muted-txt text-xs",
+												children: formatBytes(item.file.size)
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+											className: "mt-0.5 text-muted-txt text-xs",
+											children: getStatusLabel(item)
+										}),
+										showProgress ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Progress_index.Progress, {
+											className: "mt-2",
+											value: item.status === "success" ? 100 : item.progress,
+											variant: progressVariant,
+											"aria-label": `Upload progress for ${item.file.name}`
+										}) : null
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
+									type: "button",
+									variant: item.status === "uploading" ? "destructive-ghost" : "ghost",
+									size: "icon-sm",
+									shape: "square",
+									"aria-label": item.status === "uploading" ? `Cancel upload for ${item.file.name}` : `Remove ${item.file.name}`,
+									onClick: () => removeItem(item.id),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {})
+								})
+							]
+						})
+					}, item.id);
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+exports.FileUpload = FileUpload;
+
+//# sourceMappingURL=index.cjs.map