@psnext/design-system 2.3.0 → 2.5.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 "../../index22.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 "../../index22.js";
 export { Credits, CreditsProps, CreditsVariant, creditsVariants };

package/dist/primitives/Credits/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
-import { CirclePlus } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as Icon } from "../../Icon.js";
 import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CirclePlus } from "lucide-react";
 //#region src/primitives/Credits/Credits.tsx
 const creditsVariants = cva("inline-flex w-fit items-center gap-1 rounded-8 px-2 py-0.5 text-xs leading-4 font-semibold tabular-nums whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0", {
 	variants: { variant: {
@@ -29,7 +30,10 @@ function Credits({ className, value, variant, lowThreshold = 200, icon, format =
 		"data-variant": resolved,
 		className: cn(creditsVariants({ variant: resolved }), className),
 		...props,
-		children: [icon ?? /* @__PURE__ */ jsx(CirclePlus, { "aria-hidden": "true" }), format(value)]
+		children: [icon ?? /* @__PURE__ */ jsx(Icon, {
+			as: CirclePlus,
+			"aria-hidden": "true"
+		}), format(value)]
 	});
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Credits/Credits.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { CirclePlus } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Credits — a pill showing a remaining-credits balance. Badge-like, but its own\n// primitive: the colour escalates with how low the balance is (Figma): neutral\n// when healthy, soft amber when low, soft red at zero. The variant is derived\n// from `value` (override with `variant`), and the value is formatted for display.\n\nexport type CreditsVariant = \"default\" | \"warning\" | \"critical\";\n\nconst creditsVariants = cva(\n  \"inline-flex w-fit items-center gap-1 rounded-8 px-2 py-0.5 text-xs leading-4 font-semibold tabular-nums whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"border border-primary-border bg-outline-bg text-primary-txt\",\n        warning: \"border border-transparent bg-warning-bg text-warning-txt\",\n        critical: \"border border-transparent bg-danger-bg text-danger-txt\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/** Escalate the variant as the balance drops. */\nfunction resolveVariant(value: number, lowThreshold: number): CreditsVariant {\n  if (value <= 0) return \"critical\";\n  if (value <= lowThreshold) return \"warning\";\n  return \"default\";\n}\n\n/** Whole-number, thousands-separated (e.g. 9995.79 → \"9,995\"). */\nfunction formatCredits(value: number): string {\n  return Math.floor(value).toLocaleString();\n}\n\ntype CreditsProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The numeric balance to display. */\n  value: number;\n  /** Force a variant; by default it is derived from `value`. */\n  variant?: CreditsVariant;\n  /** Balance at/below which the warning variant kicks in. Default 200. */\n  lowThreshold?: number;\n  /** Override the leading icon. */\n  icon?: React.ReactNode;\n  /** Override how the value is rendered. */\n  format?: (value: number) => string;\n};\n\n/** A pill showing a remaining-credits balance, colour-escalating as it drops. */\nfunction Credits({\n  className,\n  value,\n  variant,\n  lowThreshold = 200,\n  icon,\n  format = formatCredits,\n  ...props\n}: CreditsProps) {\n  const resolved = variant ?? resolveVariant(value, lowThreshold);\n  return (\n    <span\n      data-slot=\"credits\"\n      data-variant={resolved}\n      className={cn(creditsVariants({ variant: resolved }), className)}\n      {...props}\n    >\n      {icon ?? <CirclePlus aria-hidden=\"true\" />}\n      {format(value)}\n    </span>\n  );\n}\n\nexport { Credits, creditsVariants, type CreditsProps };\n"],"mappings":";;;;;AAaA,MAAM,kBAAkB,IACtB,6JACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,UAAU;CACZ,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;;AAGA,SAAS,eAAe,OAAe,cAAsC;CAC3E,IAAI,SAAS,GAAG,OAAO;CACvB,IAAI,SAAS,cAAc,OAAO;CAClC,OAAO;AACT;;AAGA,SAAS,cAAc,OAAuB;CAC5C,OAAO,KAAK,MAAM,KAAK,EAAE,eAAe;AAC1C;;AAgBA,SAAS,QAAQ,EACf,WACA,OACA,SACA,eAAe,KACf,MACA,SAAS,eACT,GAAG,SACY;CACf,MAAM,WAAW,WAAW,eAAe,OAAO,YAAY;CAC9D,OACE,qBAAC,QAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,gBAAgB,EAAE,SAAS,SAAS,CAAC,GAAG,SAAS;EAC/D,GAAI;YAJN,CAMG,QAAQ,oBAAC,YAAD,EAAY,eAAY,OAAQ,CAAA,GACxC,OAAO,KAAK,CACT;;AAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Credits/Credits.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { cva } from \"class-variance-authority\";\nimport { CirclePlus } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Credits — a pill showing a remaining-credits balance. Badge-like, but its own\n// primitive: the colour escalates with how low the balance is (Figma): neutral\n// when healthy, soft amber when low, soft red at zero. The variant is derived\n// from `value` (override with `variant`), and the value is formatted for display.\n\nexport type CreditsVariant = \"default\" | \"warning\" | \"critical\";\n\nconst creditsVariants = cva(\n  \"inline-flex w-fit items-center gap-1 rounded-8 px-2 py-0.5 text-xs leading-4 font-semibold tabular-nums whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"border border-primary-border bg-outline-bg text-primary-txt\",\n        warning: \"border border-transparent bg-warning-bg text-warning-txt\",\n        critical: \"border border-transparent bg-danger-bg text-danger-txt\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/** Escalate the variant as the balance drops. */\nfunction resolveVariant(value: number, lowThreshold: number): CreditsVariant {\n  if (value <= 0) return \"critical\";\n  if (value <= lowThreshold) return \"warning\";\n  return \"default\";\n}\n\n/** Whole-number, thousands-separated (e.g. 9995.79 → \"9,995\"). */\nfunction formatCredits(value: number): string {\n  return Math.floor(value).toLocaleString();\n}\n\ntype CreditsProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The numeric balance to display. */\n  value: number;\n  /** Force a variant; by default it is derived from `value`. */\n  variant?: CreditsVariant;\n  /** Balance at/below which the warning variant kicks in. Default 200. */\n  lowThreshold?: number;\n  /** Override the leading icon. */\n  icon?: React.ReactNode;\n  /** Override how the value is rendered. */\n  format?: (value: number) => string;\n};\n\n/** A pill showing a remaining-credits balance, colour-escalating as it drops. */\nfunction Credits({\n  className,\n  value,\n  variant,\n  lowThreshold = 200,\n  icon,\n  format = formatCredits,\n  ...props\n}: CreditsProps) {\n  const resolved = variant ?? resolveVariant(value, lowThreshold);\n  return (\n    <span\n      data-slot=\"credits\"\n      data-variant={resolved}\n      className={cn(creditsVariants({ variant: resolved }), className)}\n      {...props}\n    >\n      {icon ?? <Icon as={CirclePlus} aria-hidden=\"true\" />}\n      {format(value)}\n    </span>\n  );\n}\n\nexport { Credits, creditsVariants, type CreditsProps };\n"],"mappings":";;;;;;AAcA,MAAM,kBAAkB,IACtB,6JACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,UAAU;CACZ,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;;AAGA,SAAS,eAAe,OAAe,cAAsC;CAC3E,IAAI,SAAS,GAAG,OAAO;CACvB,IAAI,SAAS,cAAc,OAAO;CAClC,OAAO;AACT;;AAGA,SAAS,cAAc,OAAuB;CAC5C,OAAO,KAAK,MAAM,KAAK,EAAE,eAAe;AAC1C;;AAgBA,SAAS,QAAQ,EACf,WACA,OACA,SACA,eAAe,KACf,MACA,SAAS,eACT,GAAG,SACY;CACf,MAAM,WAAW,WAAW,eAAe,OAAO,YAAY;CAC9D,OACE,qBAAC,QAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,gBAAgB,EAAE,SAAS,SAAS,CAAC,GAAG,SAAS;EAC/D,GAAI;YAJN,CAMG,QAAQ,oBAAC,MAAD;GAAM,IAAI;GAAY,eAAY;EAAQ,CAAA,GAClD,OAAO,KAAK,CACT;;AAEV"}

package/dist/primitives/Dialog/index.cjs

@@ -1,9 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 const require_primitives_Button_index = require("../Button/index.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let radix_ui = require("radix-ui");
-let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Dialog/Dialog.tsx
 /** Modal dialog root — owns open/closed state and renders its content in a portal. */
 function Dialog({ ...props }) {
@@ -59,7 +60,7 @@ function DialogContent({ className, children, size = "default", showCloseButton
 			children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Close, {
 				"data-slot": "dialog-close",
 				className: "absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { as: lucide_react.XIcon }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "sr-only",
 					children: "Close"
 				})]

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["DialogPrimitive","cn","XIcon","Button"],"sources":["../../../src/primitives/Dialog/Dialog.tsx"],"sourcesContent":["import { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Modal dialog root — owns open/closed state and renders its content in a portal. */\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\n/** Element that toggles the dialog open when activated. */\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\n/** Portals the dialog overlay and content to the document body. */\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\n/** Element that closes the dialog when activated. */\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\n/** Dimmed backdrop rendered behind the dialog content. */\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-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 dialogSizes = {\n  sm: \"sm:max-w-sm\",\n  default: \"sm:max-w-lg\",\n  lg: \"sm:max-w-2xl\",\n  xl: \"sm:max-w-4xl\",\n} as const;\n\n/** The dialog panel: centered, animated content with overlay and optional close button. */\nfunction DialogContent({\n  className,\n  children,\n  size = \"default\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  /** Width preset for the panel. */\n  size?: keyof typeof dialogSizes;\n  /** Whether to render the top-right \"X\" close button. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        data-size={size}\n        className={cn(\n          \"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-16 border bg-primary-bg p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          dialogSizes[size],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\n/** Top section of the dialog, holds the title and description. */\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Bottom action row of the dialog, with an optional built-in Close button. */\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Whether to append a built-in outline \"Close\" button after the children. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\n/** Accessible heading for the dialog (announced to screen readers). */\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Supporting text beneath the dialog title (linked for assistive tech). */\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm leading-5 text-secondary-txt\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,OAAO,EAAE,GAAG,SAA4D;CAC/E,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;;AAGA,SAAS,cAAc,EAAE,GAAG,SAA+D;CACzF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;AAGA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,4JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;CACJ,IAAI;AACN;;AAGA,SAAS,cAAc,EACrB,WACA,UACA,OAAO,WACP,kBAAkB,MAClB,GAAG,SAMF;CACD,OACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAc,aAAU;YAAxB,CACE,iBAAA,GAAA,kBAAA,KAAC,eAAD,CAAgB,CAAA,GAChB,iBAAA,GAAA,kBAAA,MAACD,SAAAA,OAAgB,SAAjB;GACE,aAAU;GACV,aAAW;GACX,WAAWC,WAAAA,GACT,gXACA,YAAY,OACZ,SACF;GACA,GAAI;aARN,CAUG,UACA,mBACC,iBAAA,GAAA,kBAAA,MAACD,SAAAA,OAAgB,OAAjB;IACE,aAAU;IACV,WAAU;cAFZ,CAIE,iBAAA,GAAA,kBAAA,KAACE,aAAAA,OAAD,CAAQ,CAAA,GACR,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAU;IAAW,CAAA,CAChB;KAEF;IACb;;AAElB;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWD,WAAAA,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,0DAA0D,SAAS;EACjF,GAAI;YAHN,CAKG,UACA,mBACC,iBAAA,GAAA,kBAAA,KAACD,SAAAA,OAAgB,OAAjB;GAAuB,SAAA;aACrB,iBAAA,GAAA,kBAAA,KAACG,gCAAAA,QAAD;IAAQ,SAAQ;cAAU;GAAa,CAAA;EAClB,CAAA,CAEtB;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,iBAAA,GAAA,kBAAA,KAACH,SAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["DialogPrimitive","cn","Icon","XIcon","Button"],"sources":["../../../src/primitives/Dialog/Dialog.tsx"],"sourcesContent":["import { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Icon } from \"@/primitives/Icon\";\nimport { cn } from \"@/utils\";\n\n/** Modal dialog root — owns open/closed state and renders its content in a portal. */\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\n/** Element that toggles the dialog open when activated. */\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\n/** Portals the dialog overlay and content to the document body. */\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\n/** Element that closes the dialog when activated. */\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\n/** Dimmed backdrop rendered behind the dialog content. */\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-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 dialogSizes = {\n  sm: \"sm:max-w-sm\",\n  default: \"sm:max-w-lg\",\n  lg: \"sm:max-w-2xl\",\n  xl: \"sm:max-w-4xl\",\n} as const;\n\n/** The dialog panel: centered, animated content with overlay and optional close button. */\nfunction DialogContent({\n  className,\n  children,\n  size = \"default\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  /** Width preset for the panel. */\n  size?: keyof typeof dialogSizes;\n  /** Whether to render the top-right \"X\" close button. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        data-size={size}\n        className={cn(\n          \"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-16 border bg-primary-bg p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          dialogSizes[size],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <Icon as={XIcon} />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\n/** Top section of the dialog, holds the title and description. */\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Bottom action row of the dialog, with an optional built-in Close button. */\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Whether to append a built-in outline \"Close\" button after the children. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\n/** Accessible heading for the dialog (announced to screen readers). */\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Supporting text beneath the dialog title (linked for assistive tech). */\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm leading-5 text-secondary-txt\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":"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"}

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/Dialog/index.js

@@ -1,8 +1,9 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
 import { Button } from "../Button/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
 import { Dialog as Dialog$1 } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/Dialog/Dialog.tsx
 /** Modal dialog root — owns open/closed state and renders its content in a portal. */
 function Dialog({ ...props }) {
@@ -58,7 +59,7 @@ function DialogContent({ className, children, size = "default", showCloseButton
 			children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
 				"data-slot": "dialog-close",
 				className: "absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsx(Icon, { as: XIcon }), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: "Close"
 				})]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DialogPrimitive"],"sources":["../../../src/primitives/Dialog/Dialog.tsx"],"sourcesContent":["import { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Modal dialog root — owns open/closed state and renders its content in a portal. */\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\n/** Element that toggles the dialog open when activated. */\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\n/** Portals the dialog overlay and content to the document body. */\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\n/** Element that closes the dialog when activated. */\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\n/** Dimmed backdrop rendered behind the dialog content. */\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-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 dialogSizes = {\n  sm: \"sm:max-w-sm\",\n  default: \"sm:max-w-lg\",\n  lg: \"sm:max-w-2xl\",\n  xl: \"sm:max-w-4xl\",\n} as const;\n\n/** The dialog panel: centered, animated content with overlay and optional close button. */\nfunction DialogContent({\n  className,\n  children,\n  size = \"default\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  /** Width preset for the panel. */\n  size?: keyof typeof dialogSizes;\n  /** Whether to render the top-right \"X\" close button. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        data-size={size}\n        className={cn(\n          \"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-16 border bg-primary-bg p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          dialogSizes[size],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\n/** Top section of the dialog, holds the title and description. */\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Bottom action row of the dialog, with an optional built-in Close button. */\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Whether to append a built-in outline \"Close\" button after the children. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\n/** Accessible heading for the dialog (announced to screen readers). */\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Supporting text beneath the dialog title (linked for assistive tech). */\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm leading-5 text-secondary-txt\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";;;;;;;AAQA,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,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;CACJ,IAAI;AACN;;AAGA,SAAS,cAAc,EACrB,WACA,UACA,OAAO,WACP,kBAAkB,MAClB,GAAG,SAMF;CACD,OACE,qBAAC,cAAD;EAAc,aAAU;YAAxB,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,SAAgB,SAAjB;GACE,aAAU;GACV,aAAW;GACX,WAAW,GACT,gXACA,YAAY,OACZ,SACF;GACA,GAAI;aARN,CAUG,UACA,mBACC,qBAACA,SAAgB,OAAjB;IACE,aAAU;IACV,WAAU;cAFZ,CAIE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;KAAM,WAAU;eAAU;IAAW,CAAA,CAChB;KAEF;IACb;;AAElB;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAIF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;YAHN,CAKG,UACA,mBACC,oBAACA,SAAgB,OAAjB;GAAuB,SAAA;aACrB,oBAAC,QAAD;IAAQ,SAAQ;cAAU;GAAa,CAAA;EAClB,CAAA,CAEtB;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":["DialogPrimitive"],"sources":["../../../src/primitives/Dialog/Dialog.tsx"],"sourcesContent":["import { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Icon } from \"@/primitives/Icon\";\nimport { cn } from \"@/utils\";\n\n/** Modal dialog root — owns open/closed state and renders its content in a portal. */\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\n/** Element that toggles the dialog open when activated. */\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\n/** Portals the dialog overlay and content to the document body. */\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\n/** Element that closes the dialog when activated. */\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\n/** Dimmed backdrop rendered behind the dialog content. */\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-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 dialogSizes = {\n  sm: \"sm:max-w-sm\",\n  default: \"sm:max-w-lg\",\n  lg: \"sm:max-w-2xl\",\n  xl: \"sm:max-w-4xl\",\n} as const;\n\n/** The dialog panel: centered, animated content with overlay and optional close button. */\nfunction DialogContent({\n  className,\n  children,\n  size = \"default\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  /** Width preset for the panel. */\n  size?: keyof typeof dialogSizes;\n  /** Whether to render the top-right \"X\" close button. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        data-size={size}\n        className={cn(\n          \"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-16 border bg-primary-bg p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          dialogSizes[size],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <Icon as={XIcon} />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\n/** Top section of the dialog, holds the title and description. */\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Bottom action row of the dialog, with an optional built-in Close button. */\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Whether to append a built-in outline \"Close\" button after the children. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\n/** Accessible heading for the dialog (announced to screen readers). */\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Supporting text beneath the dialog title (linked for assistive tech). */\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm leading-5 text-secondary-txt\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";;;;;;;;AASA,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,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,4JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;CACJ,IAAI;AACN;;AAGA,SAAS,cAAc,EACrB,WACA,UACA,OAAO,WACP,kBAAkB,MAClB,GAAG,SAMF;CACD,OACE,qBAAC,cAAD;EAAc,aAAU;YAAxB,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,SAAgB,SAAjB;GACE,aAAU;GACV,aAAW;GACX,WAAW,GACT,gXACA,YAAY,OACZ,SACF;GACA,GAAI;aARN,CAUG,UACA,mBACC,qBAACA,SAAgB,OAAjB;IACE,aAAU;IACV,WAAU;cAFZ,CAIE,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA,GAClB,oBAAC,QAAD;KAAM,WAAU;eAAU;IAAW,CAAA,CAChB;KAEF;IACb;;AAElB;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAIF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;YAHN,CAKG,UACA,mBACC,oBAACA,SAAgB,OAAjB;GAAuB,SAAA;aACrB,oBAAC,QAAD;IAAQ,SAAQ;cAAU;GAAa,CAAA;EAClB,CAAA,CAEtB;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL"}

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 "../../index23.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 "../../index23.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.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let radix_ui = require("radix-ui");
-let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/DropdownMenu/DropdownMenu.tsx
 /** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */
 function DropdownMenu({ ...props }) {
@@ -60,7 +61,10 @@ function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, { className: "size-4" }) })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.CheckIcon,
+				className: "size-4"
+			}) })
 		}), children]
 	});
 }
@@ -79,7 +83,10 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleIcon, { className: "size-2 fill-current" }) })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.CircleIcon,
+				className: "size-2 fill-current"
+			}) })
 		}), children]
 	});
 }
@@ -122,7 +129,10 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 		"data-inset": inset,
 		className: require_cn.cn("flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt", className),
 		...props,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: "ml-auto size-4" })]
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			as: lucide_react.ChevronRightIcon,
+			className: "ml-auto size-4"
+		})]
 	});
 }
 /** The floating surface for a nested submenu's items. */

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["DropdownMenuPrimitive","cn","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          // Figma Menu spec (Select & Combobox page): glass-none surface, primary\n          // border, radius-12, shadow-sm, 8px padding.\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-60-bg backdrop-blur-glass p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":";;;;;;;AAOA,SAAS,aAAa,EAAE,GAAG,SAAkE;CAC3F,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,aAAsB,MAAvB;EAA4B,aAAU;EAAgB,GAAI;CAAQ,CAAA;AAC3E;;AAGA,SAAS,mBAAmB,EAC1B,GAAG,SACyD;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,aAAsB,QAAvB;EAA8B,aAAU;EAAuB,GAAI;CAAQ,CAAA;AACpF;;AAGA,SAAS,oBAAoB,EAC3B,GAAG,SAC0D;CAC7D,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,aAAsB,SAAvB;EAA+B,aAAU;EAAwB,GAAI;CAAQ,CAAA;AACtF;;AAGA,SAAS,oBAAoB,EAC3B,WAEA,aAAa,GACb,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,aAAsB,QAAvB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,aAAsB,SAAvB;EACE,aAAU;EACE;EACZ,WAAWC,WAAAA,GAGT,6lBAGA,+GACA,gHACA,sHACA,SACF;EACA,GAAI;CACL,CAAA,EAC2B,CAAA;AAElC;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAmE;CACjG,OAAO,iBAAA,GAAA,kBAAA,KAACD,SAAAA,aAAsB,OAAvB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAClF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,OAEA,UAAU,WACV,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,aAAsB,MAAvB;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAWC,WAAAA,GACT,ofACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,yBAAyB,EAChC,WACA,UAEA,SACA,GAAG,SAC+D;CAClE,OACE,iBAAA,GAAA,kBAAA,MAACD,SAAAA,aAAsB,cAAvB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6SACA,SACF;EACS;EACT,GAAI;YAPN,CASE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACd,iBAAA,GAAA,kBAAA,KAACD,SAAAA,aAAsB,eAAvB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACE,aAAAA,WAAD,EAAW,WAAU,SAAU,CAAA,EACI,CAAA;EACjC,CAAA,GACL,QACiC;;AAExC;;AAGA,SAAS,uBAAuB,EAC9B,GAAG,SAC6D;CAChE,OAAO,iBAAA,GAAA,kBAAA,KAACF,SAAAA,aAAsB,YAAvB;EAAkC,aAAU;EAA4B,GAAI;CAAQ,CAAA;AAC7F;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,MAACA,SAAAA,aAAsB,WAAvB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6SACA,SACF;EACA,GAAI;YANN,CAQE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACd,iBAAA,GAAA,kBAAA,KAACD,SAAAA,aAAsB,eAAvB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACG,aAAAA,YAAD,EAAY,WAAU,sBAAuB,CAAA,EACV,CAAA;EACjC,CAAA,GACL,QAC8B;;AAErC;;AAGA,SAAS,kBAAkB,EACzB,WAEA,OACA,GAAG,SAGF;CACD,OACE,iBAAA,GAAA,kBAAA,KAACH,SAAAA,aAAsB,OAAvB;EACE,aAAU;EACV,cAAY;EACZ,WAAWC,WAAAA,GACT,8EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,aAAsB,WAAvB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CACnF,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,GAAG,SAAiE;CAC7F,OAAO,iBAAA,GAAA,kBAAA,KAACD,SAAAA,aAAsB,KAAvB;EAA2B,aAAU;EAAoB,GAAI;CAAQ,CAAA;AAC9E;;AAGA,SAAS,uBAAuB,EAC9B,WAEA,OACA,UACA,GAAG,SAGF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACA,SAAAA,aAAsB,YAAvB;EACE,aAAU;EACV,cAAY;EACZ,WAAWC,WAAAA,GACT,mUACA,SACF;EACA,GAAI;YAPN,CASG,UACD,iBAAA,GAAA,kBAAA,KAACG,aAAAA,kBAAD,EAAkB,WAAU,iBAAkB,CAAA,CACd;;AAEtC;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAACJ,SAAAA,aAAsB,YAAvB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,kgBAGA,+GACA,gHACA,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["DropdownMenuPrimitive","cn","Icon","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          // Figma Menu spec (Select & Combobox page): glass-none surface, primary\n          // border, radius-12, shadow-sm, 8px padding.\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-60-bg backdrop-blur-glass p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Icon as={CheckIcon} className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Icon as={CircleIcon} className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <Icon as={ChevronRightIcon} className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":"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"}

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 "../../index24.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 "../../index24.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/primitives/DropdownMenu/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/DropdownMenu/DropdownMenu.tsx
 /** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */
 function DropdownMenu({ ...props }) {
@@ -59,7 +60,10 @@ function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				as: CheckIcon,
+				className: "size-4"
+			}) })
 		}), children]
 	});
 }
@@ -78,7 +82,10 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) })
+			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				as: CircleIcon,
+				className: "size-2 fill-current"
+			}) })
 		}), children]
 	});
 }
@@ -121,7 +128,10 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 		"data-inset": inset,
 		className: cn("flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+		children: [children, /* @__PURE__ */ jsx(Icon, {
+			as: ChevronRightIcon,
+			className: "ml-auto size-4"
+		})]
 	});
 }
 /** The floating surface for a nested submenu's items. */