@psnext/design-system 1.2.0 → 1.3.0

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
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["DropdownMenuPrimitive","cn","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-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    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex 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 row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex 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        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex 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        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex 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-[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 size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-dropdown-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\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["DropdownMenuPrimitive","cn","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-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    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex 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 row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex 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        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex 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        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex 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-[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 size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-dropdown-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\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":"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"}

package/dist/primitives/DropdownMenu/index.js

@@ -46,7 +46,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-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/DropdownMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DropdownMenuPrimitive"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-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    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex 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 row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex 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        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex 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        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex 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-[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 size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-dropdown-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\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DropdownMenuPrimitive"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-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    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex 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 row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex 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        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex 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        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex 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-[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 size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-dropdown-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\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":"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"}

package/dist/primitives/Field/index.cjs

@@ -69,7 +69,7 @@ function FieldContent({ className, ...props }) {
 function FieldLabel({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Label_index.Label, {
 		"data-slot": "field-label",
-		className: require_cn.cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10", className),
+		className: require_cn.cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","Label","Separator"],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["cn","Label","Separator"],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}

package/dist/primitives/Field/index.js

@@ -68,7 +68,7 @@ function FieldContent({ className, ...props }) {
 function FieldLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Label, {
 		"data-slot": "field-label",
-		className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10", className),
+		className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}

package/dist/primitives/HoverCard/index.cjs

@@ -25,7 +25,7 @@ function HoverCardContent({ className, align = "center", sideOffset = 4, ...prop
 			"data-slot": "hover-card-content",
 			align,
 			sideOffset,
-			className: require_cn.cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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", className),
+			className: require_cn.cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-foreground shadow-md outline-hidden 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", className),
 			...props
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["HoverCardPrimitive","cn"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,QAApB;EAA2B,aAAU;YACnC,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAWC,WAAAA,GACT,qeACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}
+{"version":3,"file":"index.cjs","names":["HoverCardPrimitive","cn"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-foreground shadow-md outline-hidden 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    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,QAApB;EAA2B,aAAU;YACnC,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAWC,WAAAA,GACT,6dACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}

package/dist/primitives/HoverCard/index.js

@@ -24,7 +24,7 @@ function HoverCardContent({ className, align = "center", sideOffset = 4, ...prop
 			"data-slot": "hover-card-content",
 			align,
 			sideOffset,
-			className: cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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", className),
+			className: cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-foreground shadow-md outline-hidden 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", className),
 			...props
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HoverCardPrimitive"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,oBAACA,YAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,oBAACA,YAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,oBAACA,YAAmB,QAApB;EAA2B,aAAU;YACnC,oBAACA,YAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAW,GACT,qeACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}
+{"version":3,"file":"index.js","names":["HoverCardPrimitive"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-foreground shadow-md outline-hidden 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    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,oBAACA,YAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,oBAACA,YAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,oBAACA,YAAmB,QAApB;EAA2B,aAAU;YACnC,oBAACA,YAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAW,GACT,6dACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}

package/dist/primitives/Input/index.cjs

@@ -2,16 +2,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Input/Input.tsx
-const inputVariants = (0, require("class-variance-authority").cva)(require_cn.cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"), {
+const inputVariants = (0, require("class-variance-authority").cva)(require_cn.cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-ring-error aria-invalid:border-destructive"), {
 	variants: {
 		size: {
 			xs: "h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs",
 			sm: "h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs",
-			default: "h-9 px-3 py-1 text-base md:text-sm file:h-7 file:text-sm",
-			lg: "h-10 px-4 py-2 text-base file:h-8 file:text-sm"
+			default: "h-9 px-3 py-1 text-sm file:h-7 file:text-sm",
+			lg: "h-10 px-4 py-2 text-sm file:h-8 file:text-sm"
 		},
 		shape: {
-			default: "rounded-md",
+			default: "rounded-xl",
 			round: "rounded-full"
 		}
 	},

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  ),\n  {\n    variants: {\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs\",\n        sm: \"h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-1 text-base md:text-sm file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2 text-base file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (rounded-md) and Round (pill).\n      shape: {\n        default: \"rounded-md\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (rounded-md) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAKA,MAAM,iBAAA,qCAAA,EAAA,KACJA,WAAAA,GACE,0XACA,iFACA,wGACF,GACA;CACE,UAAU;EAER,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAWA,WAAAA,GAAG,cAAc;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-ring-error aria-invalid:border-destructive\",\n  ),\n  {\n    variants: {\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs\",\n        sm: \"h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-1 text-sm file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2 text-sm file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (rounded-xl) and Round (pill).\n      shape: {\n        default: \"rounded-xl\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (rounded-xl) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAKA,MAAM,iBAAA,qCAAA,EAAA,KACJA,WAAAA,GACE,0WACA,iFACA,8DACF,GACA;CACE,UAAU;EAER,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAWA,WAAAA,GAAG,cAAc;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Input/index.js

@@ -2,16 +2,16 @@ import { t as cn } from "../../cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/primitives/Input/Input.tsx
-const inputVariants = cva(cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"), {
+const inputVariants = cva(cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-ring-error aria-invalid:border-destructive"), {
 	variants: {
 		size: {
 			xs: "h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs",
 			sm: "h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs",
-			default: "h-9 px-3 py-1 text-base md:text-sm file:h-7 file:text-sm",
-			lg: "h-10 px-4 py-2 text-base file:h-8 file:text-sm"
+			default: "h-9 px-3 py-1 text-sm file:h-7 file:text-sm",
+			lg: "h-10 px-4 py-2 text-sm file:h-8 file:text-sm"
 		},
 		shape: {
-			default: "rounded-md",
+			default: "rounded-xl",
 			round: "rounded-full"
 		}
 	},

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  ),\n  {\n    variants: {\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs\",\n        sm: \"h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-1 text-base md:text-sm file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2 text-base file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (rounded-md) and Round (pill).\n      shape: {\n        default: \"rounded-md\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (rounded-md) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAKA,MAAM,gBAAgB,IACpB,GACE,0XACA,iFACA,wGACF,GACA;CACE,UAAU;EAER,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GAAG,cAAc;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-ring-error aria-invalid:border-destructive\",\n  ),\n  {\n    variants: {\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs\",\n        sm: \"h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-1 text-sm file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2 text-sm file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (rounded-xl) and Round (pill).\n      shape: {\n        default: \"rounded-xl\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (rounded-xl) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAKA,MAAM,gBAAgB,IACpB,GACE,0WACA,iFACA,8DACF,GACA;CACE,UAAU;EAER,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GAAG,cAAc;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL"}