@psnext/design-system 1.2.0 → 1.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["CommandPrimitive","cn","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","SearchIcon"],"sources":["../../../src/primitives/Command/Command.tsx"],"sourcesContent":["\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/primitives/Dialog\";\nimport { cn } from \"@/utils\";\n\n/** Command palette root: a filterable list of commands built on `cmdk`. */\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A `Command` rendered inside a centered, modal `Dialog` — the classic ⌘K palette. */\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  /** Accessible (visually hidden) dialog title for screen readers. */\n  title?: string;\n  /** Accessible (visually hidden) dialog description for screen readers. */\n  description?: string;\n  /** Extra classes applied to the dialog content surface. */\n  className?: string;\n  /** Whether to render the dialog's top-right close button. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/** The search field that filters the command list, with a leading search icon. */\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-9 items-center gap-2 border-b px-3\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** Scrollable container for command groups, items, and the empty state. */\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Placeholder shown when the search query matches no items. */\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  );\n}\n\n/** A labelled group of related command items, with an optional `heading`. */\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between command groups. */\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A selectable command row supporting keyboard navigation and a disabled state. */\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned keyboard-shortcut hint shown inside a `CommandItem`. */\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n"],"mappings":";;;;;;;;AAgBA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,SAAD;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,MAClB,GAAG,SAUF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACC,gCAAAA,QAAD;EAAQ,GAAI;YAAZ,CACE,iBAAA,GAAA,kBAAA,MAACC,gCAAAA,cAAD;GAAc,WAAU;aAAxB,CACE,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;MACd,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,eAAD;GACE,WAAWL,WAAAA,GAAG,uBAAuB,SAAS;GAC7B;aAEjB,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAS,WAAU;IAChB;GACM,CAAA;EACI,CAAA,CACT;;AAEZ;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;YAAjD,CACE,iBAAA,GAAA,kBAAA,KAACM,aAAAA,YAAD,EAAY,WAAU,6BAA8B,CAAA,GACpD,iBAAA,GAAA,kBAAA,KAACP,KAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,4JACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,+DAA+D,SAAS;EACtF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,0NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,uYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["CommandPrimitive","cn","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","SearchIcon"],"sources":["../../../src/primitives/Command/Command.tsx"],"sourcesContent":["\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/primitives/Dialog\";\nimport { cn } from \"@/utils\";\n\n/** Command palette root: a filterable list of commands built on `cmdk`. */\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A `Command` rendered inside a centered, modal `Dialog` — the classic ⌘K palette. */\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  /** Accessible (visually hidden) dialog title for screen readers. */\n  title?: string;\n  /** Accessible (visually hidden) dialog description for screen readers. */\n  description?: string;\n  /** Extra classes applied to the dialog content surface. */\n  className?: string;\n  /** Whether to render the dialog's top-right close button. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/** The search field that filters the command list, with a leading search icon. */\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-9 items-center gap-2 border-b px-3\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** Scrollable container for command groups, items, and the empty state. */\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Placeholder shown when the search query matches no items. */\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  );\n}\n\n/** A labelled group of related command items, with an optional `heading`. */\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between command groups. */\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A selectable command row supporting keyboard navigation and a disabled state. */\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned keyboard-shortcut hint shown inside a `CommandItem`. */\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n"],"mappings":";;;;;;;;AAgBA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,SAAD;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,MAClB,GAAG,SAUF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACC,gCAAAA,QAAD;EAAQ,GAAI;YAAZ,CACE,iBAAA,GAAA,kBAAA,MAACC,gCAAAA,cAAD;GAAc,WAAU;aAAxB,CACE,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;MACd,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,eAAD;GACE,WAAWL,WAAAA,GAAG,uBAAuB,SAAS;GAC7B;aAEjB,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAS,WAAU;IAChB;GACM,CAAA;EACI,CAAA,CACT;;AAEZ;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;YAAjD,CACE,iBAAA,GAAA,kBAAA,KAACM,aAAAA,YAAD,EAAY,WAAU,6BAA8B,CAAA,GACpD,iBAAA,GAAA,kBAAA,KAACP,KAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,4JACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,+DAA+D,SAAS;EACtF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,0NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,uYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Command/index.js

@@ -8,7 +8,7 @@ import { Command as Command$1 } from "cmdk";
 function Command({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command$1, {
 		"data-slot": "command",
-		className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
+		className: cn("flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CommandPrimitive"],"sources":["../../../src/primitives/Command/Command.tsx"],"sourcesContent":["\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/primitives/Dialog\";\nimport { cn } from \"@/utils\";\n\n/** Command palette root: a filterable list of commands built on `cmdk`. */\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A `Command` rendered inside a centered, modal `Dialog` — the classic ⌘K palette. */\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  /** Accessible (visually hidden) dialog title for screen readers. */\n  title?: string;\n  /** Accessible (visually hidden) dialog description for screen readers. */\n  description?: string;\n  /** Extra classes applied to the dialog content surface. */\n  className?: string;\n  /** Whether to render the dialog's top-right close button. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/** The search field that filters the command list, with a leading search icon. */\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-9 items-center gap-2 border-b px-3\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** Scrollable container for command groups, items, and the empty state. */\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Placeholder shown when the search query matches no items. */\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  );\n}\n\n/** A labelled group of related command items, with an optional `heading`. */\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between command groups. */\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A selectable command row supporting keyboard navigation and a disabled state. */\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned keyboard-shortcut hint shown inside a `CommandItem`. */\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n"],"mappings":";;;;;;;AAgBA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACA,WAAD;EACE,aAAU;EACV,WAAW,GACT,6FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,MAClB,GAAG,SAUF;CACD,OACE,qBAAC,QAAD;EAAQ,GAAI;YAAZ,CACE,qBAAC,cAAD;GAAc,WAAU;aAAxB,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;MACd,oBAAC,eAAD;GACE,WAAW,GAAG,uBAAuB,SAAS;GAC7B;aAEjB,oBAAC,SAAD;IAAS,WAAU;IAChB;GACM,CAAA;EACI,CAAA,CACT;;AAEZ;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;YAAjD,CACE,oBAAC,YAAD,EAAY,WAAU,6BAA8B,CAAA,GACpD,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,4JACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OACE,oBAACA,UAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,UAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,0NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,UAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GACT,uYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":["CommandPrimitive"],"sources":["../../../src/primitives/Command/Command.tsx"],"sourcesContent":["\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/primitives/Dialog\";\nimport { cn } from \"@/utils\";\n\n/** Command palette root: a filterable list of commands built on `cmdk`. */\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A `Command` rendered inside a centered, modal `Dialog` — the classic ⌘K palette. */\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  /** Accessible (visually hidden) dialog title for screen readers. */\n  title?: string;\n  /** Accessible (visually hidden) dialog description for screen readers. */\n  description?: string;\n  /** Extra classes applied to the dialog content surface. */\n  className?: string;\n  /** Whether to render the dialog's top-right close button. */\n  showCloseButton?: boolean;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/** The search field that filters the command list, with a leading search icon. */\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-9 items-center gap-2 border-b px-3\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** Scrollable container for command groups, items, and the empty state. */\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Placeholder shown when the search query matches no items. */\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  );\n}\n\n/** A labelled group of related command items, with an optional `heading`. */\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between command groups. */\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A selectable command row supporting keyboard navigation and a disabled state. */\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned keyboard-shortcut hint shown inside a `CommandItem`. */\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n"],"mappings":";;;;;;;AAgBA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACA,WAAD;EACE,aAAU;EACV,WAAW,GACT,6FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,MAClB,GAAG,SAUF;CACD,OACE,qBAAC,QAAD;EAAQ,GAAI;YAAZ,CACE,qBAAC,cAAD;GAAc,WAAU;aAAxB,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;MACd,oBAAC,eAAD;GACE,WAAW,GAAG,uBAAuB,SAAS;GAC7B;aAEjB,oBAAC,SAAD;IAAS,WAAU;IAChB;GACM,CAAA;EACI,CAAA,CACT;;AAEZ;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;YAAjD,CACE,oBAAC,YAAD,EAAY,WAAU,6BAA8B,CAAA,GACpD,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,4JACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OACE,oBAACA,UAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,UAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,0NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,UAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GACT,uYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/ContextMenu/index.cjs

@@ -78,7 +78,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: require_cn.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		className: require_cn.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["ContextMenuPrimitive","cn","ChevronRightIcon","CheckIcon","CircleIcon"],"sources":["../../../src/primitives/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a right-click context menu; wires the trigger to its portalled content. */\nfunction ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\n/** The target region that opens the menu on right-click (context menu). */\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\n/** Groups related items together for labelling and accessibility. */\nfunction ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\n/** Portals the menu content into the document body. */\nfunction ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\n/** Wraps a nested submenu (pair with `ContextMenuSubTrigger` and `ContextMenuSubContent`). */\nfunction ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\n/** Groups `ContextMenuRadioItem`s into a single-select set. */\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\n/** Item that opens a nested submenu; renders a trailing chevron. */\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The popover surface for a nested submenu. */\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[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        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The portalled popover surface that holds the menu items. */\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[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          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\n/** A selectable menu item; supports a `destructive` variant and `inset` alignment. */\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n  /** Visual intent; `destructive` colours the item with the danger palette. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio indicator; use inside `ContextMenuRadioGroup`. */\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that labels a group of items. */\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of items. */\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned text for a keyboard shortcut hint inside an item. */\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["ContextMenuPrimitive","cn","ChevronRightIcon","CheckIcon","CircleIcon"],"sources":["../../../src/primitives/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a right-click context menu; wires the trigger to its portalled content. */\nfunction ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\n/** The target region that opens the menu on right-click (context menu). */\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\n/** Groups related items together for labelling and accessibility. */\nfunction ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\n/** Portals the menu content into the document body. */\nfunction ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\n/** Wraps a nested submenu (pair with `ContextMenuSubTrigger` and `ContextMenuSubContent`). */\nfunction ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\n/** Groups `ContextMenuRadioItem`s into a single-select set. */\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\n/** Item that opens a nested submenu; renders a trailing chevron. */\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The popover surface for a nested submenu. */\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[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        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The portalled popover surface that holds the menu items. */\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[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          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\n/** A selectable menu item; supports a `destructive` variant and `inset` alignment. */\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n  /** Visual intent; `destructive` colours the item with the danger palette. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio indicator; use inside `ContextMenuRadioGroup`. */\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that labels a group of items. */\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of items. */\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned text for a keyboard shortcut hint inside an item. */\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n"],"mappings":";;;;;;;AAOA,SAAS,YAAY,EAAE,GAAG,SAAiE;CACzF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;CAAQ,CAAA;AACzE;;AAGA,SAAS,mBAAmB,EAC1B,GAAG,SACyD;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,SAAtB;EAA8B,aAAU;EAAuB,GAAI;CAAQ,CAAA;AACpF;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,OAAtB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAmE;CACjG,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAClF;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAgE;CAC3F,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,KAAtB;EAA0B,aAAU;EAAmB,GAAI;CAAQ,CAAA;AAC5E;;AAGA,SAAS,sBAAsB,EAC7B,GAAG,SAC4D;CAC/D,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,YAAtB;EAAiC,aAAU;EAA2B,GAAI;CAAQ,CAAA;AAC3F;;AAGA,SAAS,sBAAsB,EAC7B,WACA,OACA,UACA,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACA,SAAAA,YAAqB,YAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAWC,WAAAA,GACT,wWACA,SACF;EACA,GAAI;YAPN,CASG,UACD,iBAAA,GAAA,kBAAA,KAACC,aAAAA,kBAAD,EAAkB,WAAU,UAAW,CAAA,CACR;;AAErC;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAACF,SAAAA,YAAqB,YAAtB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,gfACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,YAAqB,QAAtB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,wjBACA,SACF;EACA,GAAI;CACL,CAAA,EAC0B,CAAA;AAEjC;;AAGA,SAAS,gBAAgB,EACvB,WACA,OACA,UAAU,WACV,GAAG,SAMF;CACD,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,YAAqB,MAAtB;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAWC,WAAAA,GACT,2jBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,wBAAwB,EAC/B,WACA,UACA,SACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,MAACD,SAAAA,YAAqB,cAAtB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,gTACA,SACF;EACS;EACT,GAAI;YAPN,CASE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACd,iBAAA,GAAA,kBAAA,KAACD,SAAAA,YAAqB,eAAtB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACG,aAAAA,WAAD,EAAW,WAAU,SAAU,CAAA,EACG,CAAA;EAChC,CAAA,GACL,QACgC;;AAEvC;;AAGA,SAAS,qBAAqB,EAC5B,WACA,UACA,GAAG,SAC2D;CAC9D,OACE,iBAAA,GAAA,kBAAA,MAACH,SAAAA,YAAqB,WAAtB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,gTACA,SACF;EACA,GAAI;YANN,CAQE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACd,iBAAA,GAAA,kBAAA,KAACD,SAAAA,YAAqB,eAAtB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACI,aAAAA,YAAD,EAAY,WAAU,sBAAuB,CAAA,EACX,CAAA;EAChC,CAAA,GACL,QAC6B;;AAEpC;;AAGA,SAAS,iBAAiB,EACxB,WACA,OACA,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAACJ,SAAAA,YAAqB,OAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAWC,WAAAA,GAAG,qEAAqE,SAAS;EAC5F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,qBAAqB,EAC5B,WACA,GAAG,SAC2D;CAC9D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,YAAqB,WAAtB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAuC;CAClF,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/ContextMenu/index.js

@@ -77,7 +77,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ContextMenuPrimitive"],"sources":["../../../src/primitives/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a right-click context menu; wires the trigger to its portalled content. */\nfunction ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\n/** The target region that opens the menu on right-click (context menu). */\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\n/** Groups related items together for labelling and accessibility. */\nfunction ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\n/** Portals the menu content into the document body. */\nfunction ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\n/** Wraps a nested submenu (pair with `ContextMenuSubTrigger` and `ContextMenuSubContent`). */\nfunction ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\n/** Groups `ContextMenuRadioItem`s into a single-select set. */\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\n/** Item that opens a nested submenu; renders a trailing chevron. */\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The popover surface for a nested submenu. */\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[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        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The portalled popover surface that holds the menu items. */\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[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          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\n/** A selectable menu item; supports a `destructive` variant and `inset` alignment. */\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n  /** Visual intent; `destructive` colours the item with the danger palette. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio indicator; use inside `ContextMenuRadioGroup`. */\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that labels a group of items. */\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of items. */\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned text for a keyboard shortcut hint inside an item. */\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ContextMenuPrimitive"],"sources":["../../../src/primitives/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a right-click context menu; wires the trigger to its portalled content. */\nfunction ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\n/** The target region that opens the menu on right-click (context menu). */\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\n/** Groups related items together for labelling and accessibility. */\nfunction ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\n/** Portals the menu content into the document body. */\nfunction ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\n/** Wraps a nested submenu (pair with `ContextMenuSubTrigger` and `ContextMenuSubContent`). */\nfunction ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\n/** Groups `ContextMenuRadioItem`s into a single-select set. */\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\n/** Item that opens a nested submenu; renders a trailing chevron. */\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The popover surface for a nested submenu. */\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[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        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The portalled popover surface that holds the menu items. */\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[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          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\n/** A selectable menu item; supports a `destructive` variant and `inset` alignment. */\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n  /** Visual intent; `destructive` colours the item with the danger palette. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio indicator; use inside `ContextMenuRadioGroup`. */\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that labels a group of items. */\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of items. */\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned text for a keyboard shortcut hint inside an item. */\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n"],"mappings":"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"}

package/dist/primitives/Credits/index.cjs

@@ -7,7 +7,7 @@ const creditsVariants = (0, require("class-variance-authority").cva)("inline-fle
 	variants: { variant: {
 		default: "bg-muted text-foreground [&>svg]:text-muted-foreground",
 		warning: "bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]",
-		critical: "bg-[var(--bg-error-subtle)] text-[var(--content-error-bold)]"
+		critical: "bg-error-subtle text-[var(--content-error-bold)]"
 	} },
 	defaultVariants: { variant: "default" }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","CirclePlus"],"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-full px-2.5 py-0.5 text-sm font-medium tabular-nums whitespace-nowrap [&>svg]:size-3.5 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted text-foreground [&>svg]:text-muted-foreground\",\n        warning: \"bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]\",\n        critical: \"bg-[var(--bg-error-subtle)] text-[var(--content-error-bold)]\",\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,mBAAA,qCAAA,EAAA,KACJ,wJACA;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,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,gBAAgB,EAAE,SAAS,SAAS,CAAC,GAAG,SAAS;EAC/D,GAAI;YAJN,CAMG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,YAAD,EAAY,eAAY,OAAQ,CAAA,GACxC,OAAO,KAAK,CACT;;AAEV"}
+{"version":3,"file":"index.cjs","names":["cn","CirclePlus"],"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-full px-2.5 py-0.5 text-sm font-medium tabular-nums whitespace-nowrap [&>svg]:size-3.5 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted text-foreground [&>svg]:text-muted-foreground\",\n        warning: \"bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]\",\n        critical: \"bg-error-subtle text-[var(--content-error-bold)]\",\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,mBAAA,qCAAA,EAAA,KACJ,wJACA;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,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,gBAAgB,EAAE,SAAS,SAAS,CAAC,GAAG,SAAS;EAC/D,GAAI;YAJN,CAMG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,YAAD,EAAY,eAAY,OAAQ,CAAA,GACxC,OAAO,KAAK,CACT;;AAEV"}

package/dist/primitives/Credits/index.js

@@ -7,7 +7,7 @@ const creditsVariants = cva("inline-flex w-fit items-center gap-1 rounded-full p
 	variants: { variant: {
 		default: "bg-muted text-foreground [&>svg]:text-muted-foreground",
 		warning: "bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]",
-		critical: "bg-[var(--bg-error-subtle)] text-[var(--content-error-bold)]"
+		critical: "bg-error-subtle text-[var(--content-error-bold)]"
 	} },
 	defaultVariants: { variant: "default" }
 });

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-full px-2.5 py-0.5 text-sm font-medium tabular-nums whitespace-nowrap [&>svg]:size-3.5 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted text-foreground [&>svg]:text-muted-foreground\",\n        warning: \"bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]\",\n        critical: \"bg-[var(--bg-error-subtle)] text-[var(--content-error-bold)]\",\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,wJACA;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 { 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-full px-2.5 py-0.5 text-sm font-medium tabular-nums whitespace-nowrap [&>svg]:size-3.5 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted text-foreground [&>svg]:text-muted-foreground\",\n        warning: \"bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]\",\n        critical: \"bg-error-subtle text-[var(--content-error-bold)]\",\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,wJACA;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"}

package/dist/primitives/Dialog/index.cjs

@@ -54,7 +54,7 @@ function DialogContent({ className, children, size = "default", showCloseButton
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Content, {
 			"data-slot": "dialog-content",
 			"data-size": size,
-			className: require_cn.cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background 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", dialogSizes[size], className),
+			className: require_cn.cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border bg-background 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", dialogSizes[size], className),
 			...props,
 			children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Close, {
 				"data-slot": "dialog-close",
@@ -94,7 +94,7 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Title, {
 		"data-slot": "dialog-title",
-		className: require_cn.cn("text-lg leading-none font-semibold", className),
+		className: require_cn.cn("font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal", className),
 		...props
 	});
 }

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-[var(--overlay)] 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-xl border bg-background 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-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_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-2 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(\"text-lg leading-none font-semibold\", className)}\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 text-muted-foreground\", 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,kKACA,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,GAAG,sCAAsC,SAAS;EAC7D,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,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"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-[var(--overlay)] 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-2xl border bg-background 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-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_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-2 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 text-muted-foreground\", 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,kKACA,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,iXACA,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,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Dialog/index.js

@@ -53,7 +53,7 @@ function DialogContent({ className, children, size = "default", showCloseButton
 		children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
 			"data-slot": "dialog-content",
 			"data-size": size,
-			className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background 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", dialogSizes[size], className),
+			className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border bg-background 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", dialogSizes[size], className),
 			...props,
 			children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
 				"data-slot": "dialog-close",
@@ -93,7 +93,7 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
 		"data-slot": "dialog-title",
-		className: cn("text-lg leading-none font-semibold", className),
+		className: cn("font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal", className),
 		...props
 	});
 }

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-[var(--overlay)] 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-xl border bg-background 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-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_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-2 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(\"text-lg leading-none font-semibold\", className)}\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 text-muted-foreground\", 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,kKACA,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,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,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 { 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-[var(--overlay)] 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-2xl border bg-background 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-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_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-2 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 text-muted-foreground\", 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,kKACA,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,iXACA,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,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Drawer/index.cjs

@@ -35,7 +35,7 @@ function DrawerClose({ ...props }) {
 function DrawerOverlay({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Overlay, {
 		"data-slot": "drawer-overlay",
-		className: require_cn.cn("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
+		className: require_cn.cn("fixed inset-0 z-50 bg-[var(--overlay)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
 		...props
 	});
 }

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-black/50 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-background\",\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-lg 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-lg 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-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted 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(\"font-semibold text-foreground\", className)}\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-sm text-muted-foreground\", 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,0JACA,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,sEACA,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,GAAG,iCAAiC,SAAS;EACxD,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,iCAAiC,SAAS;EACxD,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-[var(--overlay)] 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-background\",\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-lg 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-lg 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-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted 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(\"font-semibold text-foreground\", className)}\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-sm text-muted-foreground\", 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,kKACA,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,sEACA,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,GAAG,iCAAiC,SAAS;EACxD,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,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Drawer/index.js

@@ -34,7 +34,7 @@ function DrawerClose({ ...props }) {
 function DrawerOverlay({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer$1.Overlay, {
 		"data-slot": "drawer-overlay",
-		className: cn("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
+		className: cn("fixed inset-0 z-50 bg-[var(--overlay)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
 		...props
 	});
 }

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-black/50 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-background\",\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-lg 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-lg 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-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted 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(\"font-semibold text-foreground\", className)}\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-sm text-muted-foreground\", 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,0JACA,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,sEACA,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,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAEzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,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-[var(--overlay)] 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-background\",\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-lg 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-lg 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-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted 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(\"font-semibold text-foreground\", className)}\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-sm text-muted-foreground\", 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,kKACA,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,sEACA,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,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAEzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/DropdownMenu/index.cjs

@@ -47,7 +47,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: require_cn.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		className: require_cn.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
 		...props
 	});
 }