@psnext/design-system 1.2.0 → 1.3.0

package/dist/primitives/InputGroup/index.cjs

@@ -11,11 +11,11 @@ function InputGroup({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "input-group",
 		role: "group",
-		className: require_cn.cn("group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
+		className: require_cn.cn("group/input-group relative flex w-full items-center rounded-xl border border-input shadow-xs transition-[color,box-shadow] outline-none", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-ring-error", className),
 		...props
 	});
 }
-const inputGroupAddonVariants = (0, class_variance_authority.cva)("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+const inputGroupAddonVariants = (0, class_variance_authority.cva)("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-5 [&>svg:not([class*='size-'])]:size-4", {
 	variants: { align: {
 		"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
 		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
@@ -40,9 +40,9 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 }
 const inputGroupButtonVariants = (0, class_variance_authority.cva)("flex items-center gap-2 text-sm shadow-none", {
 	variants: { size: {
-		xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+		xs: "h-6 gap-1 rounded-5 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
 		sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-		"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+		"icon-xs": "size-6 rounded-5 p-0 has-[>svg]:p-0",
 		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
 	} },
 	defaultVariants: { size: "xs" }
@@ -68,7 +68,7 @@ function InputGroupText({ className, ...props }) {
 function InputGroupInput({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Input_index.Input, {
 		"data-slot": "input-group-control",
-		className: require_cn.cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		className: require_cn.cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0", className),
 		...props
 	});
 }
@@ -76,7 +76,7 @@ function InputGroupInput({ className, ...props }) {
 function InputGroupTextarea({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Textarea_index.Textarea, {
 		"data-slot": "input-group-control",
-		className: require_cn.cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		className: require_cn.cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","Button","Input","Textarea"],"sources":["../../../src/primitives/InputGroup/InputGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Textarea } from \"@/primitives/Textarea\";\nimport { cn } from \"@/utils\";\n\n/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\n/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */\nfunction InputGroupAddon({\n  className,\n  /** Where the addon sits relative to the control: inline (left/right) or block (top/bottom). */\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n\n/** A compact Button sized to sit inside an addon without overflowing the group's height. */\nfunction InputGroupButton({\n  className,\n  /** The button's HTML type; defaults to `\"button\"` so it does not submit forms. */\n  type = \"button\",\n  /** Visual style forwarded to the underlying Button; defaults to `\"ghost\"`. */\n  variant = \"ghost\",\n  /** Compact sizing tuned for the group: text (`xs`/`sm`) or square icon (`icon-xs`/`icon-sm`). */\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Input control for the group: borderless and transparent so the group container provides the chrome. */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;;AAWA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAWA,WAAAA,GACT,4JACA,sCAGA,mDACA,iDACA,kIACA,4HAGA,mMAGA,kLAEA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;;AAGA,SAAS,gBAAgB,EACvB,WAEA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAWA,WAAAA,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,MAAM;GACd,IAAK,EAAE,OAAuB,QAAQ,QAAQ,GAC5C;GAEF,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAAA,GAAA,yBAAA,KAA+B,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAGD,SAAS,iBAAiB,EACxB,WAEA,OAAO,UAEP,UAAU,SAEV,OAAO,MACP,GAAG,SAE4C;CAC/C,OACE,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAWD,WAAAA,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,WAAWA,WAAAA,GACT,0HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA6C;CACpF,OACE,iBAAA,GAAA,kBAAA,KAACE,+BAAAA,OAAD;EACE,aAAU;EACV,WAAWF,WAAAA,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA2C;CACrF,OACE,iBAAA,GAAA,kBAAA,KAACG,kCAAAA,UAAD;EACE,aAAU;EACV,WAAWH,WAAAA,GACT,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn","Button","Input","Textarea"],"sources":["../../../src/primitives/InputGroup/InputGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Textarea } from \"@/primitives/Textarea\";\nimport { cn } from \"@/utils\";\n\n/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex w-full items-center rounded-xl border border-input shadow-xs transition-[color,box-shadow] outline-none\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-ring-error\",\n\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-5 [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\n/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */\nfunction InputGroupAddon({\n  className,\n  /** Where the addon sits relative to the control: inline (left/right) or block (top/bottom). */\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-5 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-5 p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n\n/** A compact Button sized to sit inside an addon without overflowing the group's height. */\nfunction InputGroupButton({\n  className,\n  /** The button's HTML type; defaults to `\"button\"` so it does not submit forms. */\n  type = \"button\",\n  /** Visual style forwarded to the underlying Button; defaults to `\"ghost\"`. */\n  variant = \"ghost\",\n  /** Compact sizing tuned for the group: text (`xs`/`sm`) or square icon (`icon-xs`/`icon-sm`). */\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Input control for the group: borderless and transparent so the group container provides the chrome. */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;;AAWA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAWA,WAAAA,GACT,2IACA,sCAGA,mDACA,iDACA,kIACA,4HAGA,mMAGA,gHAEA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,mOACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;;AAGA,SAAS,gBAAgB,EACvB,WAEA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAWA,WAAAA,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,MAAM;GACd,IAAK,EAAE,OAAuB,QAAQ,QAAQ,GAC5C;GAEF,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAAA,GAAA,yBAAA,KAA+B,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAGD,SAAS,iBAAiB,EACxB,WAEA,OAAO,UAEP,UAAU,SAEV,OAAO,MACP,GAAG,SAE4C;CAC/C,OACE,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAWD,WAAAA,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,WAAWA,WAAAA,GACT,0HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA6C;CACpF,OACE,iBAAA,GAAA,kBAAA,KAACE,+BAAAA,OAAD;EACE,aAAU;EACV,WAAWF,WAAAA,GACT,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA2C;CACrF,OACE,iBAAA,GAAA,kBAAA,KAACG,kCAAAA,UAAD;EACE,aAAU;EACV,WAAWH,WAAAA,GACT,iGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/InputGroup/index.js

@@ -10,11 +10,11 @@ function InputGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		role: "group",
-		className: cn("group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
+		className: cn("group/input-group relative flex w-full items-center rounded-xl border border-input shadow-xs transition-[color,box-shadow] outline-none", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-ring-error", className),
 		...props
 	});
 }
-const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-5 [&>svg:not([class*='size-'])]:size-4", {
 	variants: { align: {
 		"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
 		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
@@ -39,9 +39,9 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 }
 const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
 	variants: { size: {
-		xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+		xs: "h-6 gap-1 rounded-5 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
 		sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-		"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+		"icon-xs": "size-6 rounded-5 p-0 has-[>svg]:p-0",
 		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
 	} },
 	defaultVariants: { size: "xs" }
@@ -67,7 +67,7 @@ function InputGroupText({ className, ...props }) {
 function InputGroupInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Input, {
 		"data-slot": "input-group-control",
-		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0", className),
 		...props
 	});
 }
@@ -75,7 +75,7 @@ function InputGroupInput({ className, ...props }) {
 function InputGroupTextarea({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Textarea, {
 		"data-slot": "input-group-control",
-		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InputGroup/InputGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Textarea } from \"@/primitives/Textarea\";\nimport { cn } from \"@/utils\";\n\n/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\n/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */\nfunction InputGroupAddon({\n  className,\n  /** Where the addon sits relative to the control: inline (left/right) or block (top/bottom). */\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n\n/** A compact Button sized to sit inside an addon without overflowing the group's height. */\nfunction InputGroupButton({\n  className,\n  /** The button's HTML type; defaults to `\"button\"` so it does not submit forms. */\n  type = \"button\",\n  /** Visual style forwarded to the underlying Button; defaults to `\"ghost\"`. */\n  variant = \"ghost\",\n  /** Compact sizing tuned for the group: text (`xs`/`sm`) or square icon (`icon-xs`/`icon-sm`). */\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Input control for the group: borderless and transparent so the group container provides the chrome. */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;AAWA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,4JACA,sCAGA,mDACA,iDACA,kIACA,4HAGA,mMAGA,kLAEA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,IAC9B,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;;AAGA,SAAS,gBAAgB,EACvB,WAEA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,MAAM;GACd,IAAK,EAAE,OAAuB,QAAQ,QAAQ,GAC5C;GAEF,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAA2B,IAAI,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAGD,SAAS,iBAAiB,EACxB,WAEA,OAAO,UAEP,UAAU,SAEV,OAAO,MACP,GAAG,SAE4C;CAC/C,OACE,oBAAC,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA6C;CACpF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA2C;CACrF,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InputGroup/InputGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Textarea } from \"@/primitives/Textarea\";\nimport { cn } from \"@/utils\";\n\n/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex w-full items-center rounded-xl border border-input shadow-xs transition-[color,box-shadow] outline-none\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-ring-error\",\n\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-5 [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\n/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */\nfunction InputGroupAddon({\n  className,\n  /** Where the addon sits relative to the control: inline (left/right) or block (top/bottom). */\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-5 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-5 p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n\n/** A compact Button sized to sit inside an addon without overflowing the group's height. */\nfunction InputGroupButton({\n  className,\n  /** The button's HTML type; defaults to `\"button\"` so it does not submit forms. */\n  type = \"button\",\n  /** Visual style forwarded to the underlying Button; defaults to `\"ghost\"`. */\n  variant = \"ghost\",\n  /** Compact sizing tuned for the group: text (`xs`/`sm`) or square icon (`icon-xs`/`icon-sm`). */\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Input control for the group: borderless and transparent so the group container provides the chrome. */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;AAWA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,2IACA,sCAGA,mDACA,iDACA,kIACA,4HAGA,mMAGA,gHAEA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,IAC9B,mOACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;;AAGA,SAAS,gBAAgB,EACvB,WAEA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,MAAM;GACd,IAAK,EAAE,OAAuB,QAAQ,QAAQ,GAC5C;GAEF,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAA2B,IAAI,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAGD,SAAS,iBAAiB,EACxB,WAEA,OAAO,UAEP,UAAU,SAEV,OAAO,MACP,GAAG,SAE4C;CAC/C,OACE,oBAAC,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA6C;CACpF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA2C;CACrF,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,iGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/InputOtp/index.cjs

@@ -47,7 +47,7 @@ function InputOTPSlot({ index, className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-slot": "input-otp-slot",
 		"data-active": isActive,
-		className: require_cn.cn("data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]", inputOTPSlotSizes[size], className),
+		className: require_cn.cn("data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-ring-error aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-[3px]", inputOTPSlotSizes[size], className),
 		...props,
 		children: [
 			char,

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","OTPInput","cn","OTPInputContext","MinusIcon"],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-foreground pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;;;;AAiBA,MAAM,0BAA0BA,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAWA,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,iBAAA,GAAA,kBAAA,KAACC,UAAAA,UAAD;GACE,aAAU;GACV,oBAAoBC,WAAAA,GAClB,mDACA,kBACF;GACA,WAAWA,WAAAA,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkBF,MAAM,WAAWG,UAAAA,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgBH,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAWE,WAAAA,GACT,sfACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA6C;GAAkB,CAAA;GAEhF,gBACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;GACxE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,iBAAA,GAAA,kBAAA,KAACE,aAAAA,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}
+{"version":3,"file":"index.cjs","names":["React","OTPInput","cn","OTPInputContext","MinusIcon"],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-ring-error aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-foreground pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;;;;AAiBA,MAAM,0BAA0BA,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAWA,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,iBAAA,GAAA,kBAAA,KAACC,UAAAA,UAAD;GACE,aAAU;GACV,oBAAoBC,WAAAA,GAClB,mDACA,kBACF;GACA,WAAWA,WAAAA,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkBF,MAAM,WAAWG,UAAAA,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgBH,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAWE,WAAAA,GACT,waACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA6C;GAAkB,CAAA;GAEhF,gBACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;GACxE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,iBAAA,GAAA,kBAAA,KAACE,aAAAA,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}

package/dist/primitives/InputOtp/index.js

@@ -44,7 +44,7 @@ function InputOTPSlot({ index, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "input-otp-slot",
 		"data-active": isActive,
-		className: cn("data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]", inputOTPSlotSizes[size], className),
+		className: cn("data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-ring-error aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-[3px]", inputOTPSlotSizes[size], className),
 		...props,
 		children: [
 			char,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-foreground pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;AAiBA,MAAM,0BAA0B,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAW,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,UAAD;GACE,aAAU;GACV,oBAAoB,GAClB,mDACA,kBACF;GACA,WAAW,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkB,MAAM,WAAW,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgB,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,sfACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,oBAAC,QAAD;IAAM,WAAU;cAA6C;GAAkB,CAAA;GAEhF,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;GACxE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,oBAAC,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-ring-error aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-foreground pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;AAiBA,MAAM,0BAA0B,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAW,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,UAAD;GACE,aAAU;GACV,oBAAoB,GAClB,mDACA,kBACF;GACA,WAAW,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkB,MAAM,WAAW,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgB,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,waACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,oBAAC,QAAD;IAAM,WAAU;cAA6C;GAAkB,CAAA;GAEhF,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;GACxE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,oBAAC,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}

package/dist/primitives/Item/index.cjs

@@ -23,12 +23,12 @@ function ItemSeparator({ className, ...props }) {
 		...props
 	});
 }
-const itemVariants = (0, class_variance_authority.cva)("group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50", {
+const itemVariants = (0, class_variance_authority.cva)("group/item flex flex-wrap items-center rounded-xl border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-secondary", {
 	variants: {
 		variant: {
 			default: "bg-transparent",
 			outline: "border-border",
-			muted: "bg-muted/50"
+			muted: "bg-secondary"
 		},
 		size: {
 			default: "gap-4 p-4",

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","Separator","Slot"],"sources":["../../../src/primitives/Item/Item.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** Vertical list container that groups related `Item`s (role=\"list\"). */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\"group/item-group flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal divider rendered between `Item`s inside an `ItemGroup`. */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-0\", className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  \"group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50\",\n      },\n      size: {\n        default: \"gap-4 p-4\",\n        sm: \"gap-2.5 px-4 py-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\n/** A flexible list/row primitive composing media, content, and actions into a single line. */\nfunction Item({\n  className,\n  /** Visual treatment of the row surface. */\n  variant = \"default\",\n  /** Vertical density / padding of the row. */\n  size = \"default\",\n  /** Render as the child element (e.g. an anchor) via Radix `Slot` instead of a `div`. */\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Leading media slot for an `Item` — holds an icon, image, or avatar. */\nfunction ItemMedia({\n  className,\n  /** Media framing: bare, a bordered icon tile, or a clipped image box. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** Primary content column of an `Item`, stacking title and description. */\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Emphasised title line within `ItemContent`. */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\"flex w-fit items-center gap-2 text-sm leading-snug font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted, line-clamped supporting text within `ItemContent`. */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing actions slot of an `Item` — holds buttons or controls. */\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"item-actions\" className={cn(\"flex items-center gap-2\", className)} {...props} />\n  );\n}\n\n/** Full-width header row spanning the top of an `Item`. */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Full-width footer row spanning the bottom of an `Item`. */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAWA,WAAAA,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAiD;CACtF,OACE,iBAAA,GAAA,kBAAA,KAACC,mCAAAA,WAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAWD,WAAAA,GAAG,QAAQ,SAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAA,GAAA,yBAAA,KACJ,8PACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;AAGA,SAAS,KAAK,EACZ,WAEA,UAAU,WAEV,OAAO,WAEP,UAAU,OACV,GAAG,SACuF;CAE1F,OACE,iBAAA,GAAA,kBAAA,KAFW,UAAUE,SAAAA,KAAK,OAAO,OAEjC;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,WAAWF,WAAAA,GAAG,aAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAA,GAAA,yBAAA,KACJ,sMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,UAAU,EACjB,WAEA,UAAU,WACV,GAAG,SACoE;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,kBAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EACvD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,qEAAqE,SAAS;EAC5F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,kEAAkE,SAAS;EACzF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAoC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,sFACA,qEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAe,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn","Separator","Slot"],"sources":["../../../src/primitives/Item/Item.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** Vertical list container that groups related `Item`s (role=\"list\"). */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\"group/item-group flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal divider rendered between `Item`s inside an `ItemGroup`. */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-0\", className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  \"group/item flex flex-wrap items-center rounded-xl border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-secondary\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-secondary\",\n      },\n      size: {\n        default: \"gap-4 p-4\",\n        sm: \"gap-2.5 px-4 py-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\n/** A flexible list/row primitive composing media, content, and actions into a single line. */\nfunction Item({\n  className,\n  /** Visual treatment of the row surface. */\n  variant = \"default\",\n  /** Vertical density / padding of the row. */\n  size = \"default\",\n  /** Render as the child element (e.g. an anchor) via Radix `Slot` instead of a `div`. */\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Leading media slot for an `Item` — holds an icon, image, or avatar. */\nfunction ItemMedia({\n  className,\n  /** Media framing: bare, a bordered icon tile, or a clipped image box. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** Primary content column of an `Item`, stacking title and description. */\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Emphasised title line within `ItemContent`. */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\"flex w-fit items-center gap-2 text-sm leading-snug font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted, line-clamped supporting text within `ItemContent`. */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing actions slot of an `Item` — holds buttons or controls. */\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"item-actions\" className={cn(\"flex items-center gap-2\", className)} {...props} />\n  );\n}\n\n/** Full-width header row spanning the top of an `Item`. */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Full-width footer row spanning the bottom of an `Item`. */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAWA,WAAAA,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAiD;CACtF,OACE,iBAAA,GAAA,kBAAA,KAACC,mCAAAA,WAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAWD,WAAAA,GAAG,QAAQ,SAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAA,GAAA,yBAAA,KACJ,8PACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;AAGA,SAAS,KAAK,EACZ,WAEA,UAAU,WAEV,OAAO,WAEP,UAAU,OACV,GAAG,SACuF;CAE1F,OACE,iBAAA,GAAA,kBAAA,KAFW,UAAUE,SAAAA,KAAK,OAAO,OAEjC;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,WAAWF,WAAAA,GAAG,aAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAA,GAAA,yBAAA,KACJ,sMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,UAAU,EACjB,WAEA,UAAU,WACV,GAAG,SACoE;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,kBAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EACvD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,qEAAqE,SAAS;EAC5F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,kEAAkE,SAAS;EACzF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAoC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,sFACA,qEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAe,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Item/index.js

@@ -22,12 +22,12 @@ function ItemSeparator({ className, ...props }) {
 		...props
 	});
 }
-const itemVariants = cva("group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50", {
+const itemVariants = cva("group/item flex flex-wrap items-center rounded-xl border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-secondary", {
 	variants: {
 		variant: {
 			default: "bg-transparent",
 			outline: "border-border",
-			muted: "bg-muted/50"
+			muted: "bg-secondary"
 		},
 		size: {
 			default: "gap-4 p-4",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Separator"],"sources":["../../../src/primitives/Item/Item.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** Vertical list container that groups related `Item`s (role=\"list\"). */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\"group/item-group flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal divider rendered between `Item`s inside an `ItemGroup`. */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-0\", className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  \"group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50\",\n      },\n      size: {\n        default: \"gap-4 p-4\",\n        sm: \"gap-2.5 px-4 py-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\n/** A flexible list/row primitive composing media, content, and actions into a single line. */\nfunction Item({\n  className,\n  /** Visual treatment of the row surface. */\n  variant = \"default\",\n  /** Vertical density / padding of the row. */\n  size = \"default\",\n  /** Render as the child element (e.g. an anchor) via Radix `Slot` instead of a `div`. */\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Leading media slot for an `Item` — holds an icon, image, or avatar. */\nfunction ItemMedia({\n  className,\n  /** Media framing: bare, a bordered icon tile, or a clipped image box. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** Primary content column of an `Item`, stacking title and description. */\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Emphasised title line within `ItemContent`. */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\"flex w-fit items-center gap-2 text-sm leading-snug font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted, line-clamped supporting text within `ItemContent`. */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing actions slot of an `Item` — holds buttons or controls. */\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"item-actions\" className={cn(\"flex items-center gap-2\", className)} {...props} />\n  );\n}\n\n/** Full-width header row spanning the top of an `Item`. */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Full-width footer row spanning the bottom of an `Item`. */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAiD;CACtF,OACE,oBAACA,aAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAW,GAAG,QAAQ,SAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,eAAe,IACnB,8PACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;AAGA,SAAS,KAAK,EACZ,WAEA,UAAU,WAEV,OAAO,WAEP,UAAU,OACV,GAAG,SACuF;CAE1F,OACE,oBAFW,UAAU,KAAK,OAAO,OAEjC;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,oBAAoB,IACxB,sMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,UAAU,EACjB,WAEA,UAAU,WACV,GAAG,SACoE;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,kBAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EACvD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qEAAqE,SAAS;EAC5F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAoC;CAC3E,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,sFACA,qEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":["Separator"],"sources":["../../../src/primitives/Item/Item.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** Vertical list container that groups related `Item`s (role=\"list\"). */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\"group/item-group flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal divider rendered between `Item`s inside an `ItemGroup`. */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-0\", className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  \"group/item flex flex-wrap items-center rounded-xl border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-secondary\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-secondary\",\n      },\n      size: {\n        default: \"gap-4 p-4\",\n        sm: \"gap-2.5 px-4 py-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\n/** A flexible list/row primitive composing media, content, and actions into a single line. */\nfunction Item({\n  className,\n  /** Visual treatment of the row surface. */\n  variant = \"default\",\n  /** Vertical density / padding of the row. */\n  size = \"default\",\n  /** Render as the child element (e.g. an anchor) via Radix `Slot` instead of a `div`. */\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Leading media slot for an `Item` — holds an icon, image, or avatar. */\nfunction ItemMedia({\n  className,\n  /** Media framing: bare, a bordered icon tile, or a clipped image box. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** Primary content column of an `Item`, stacking title and description. */\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Emphasised title line within `ItemContent`. */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\"flex w-fit items-center gap-2 text-sm leading-snug font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted, line-clamped supporting text within `ItemContent`. */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing actions slot of an `Item` — holds buttons or controls. */\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"item-actions\" className={cn(\"flex items-center gap-2\", className)} {...props} />\n  );\n}\n\n/** Full-width header row spanning the top of an `Item`. */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Full-width footer row spanning the bottom of an `Item`. */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAiD;CACtF,OACE,oBAACA,aAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAW,GAAG,QAAQ,SAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,eAAe,IACnB,8PACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;AAGA,SAAS,KAAK,EACZ,WAEA,UAAU,WAEV,OAAO,WAEP,UAAU,OACV,GAAG,SACuF;CAE1F,OACE,oBAFW,UAAU,KAAK,OAAO,OAEjC;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,oBAAoB,IACxB,sMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,UAAU,EACjB,WAEA,UAAU,WACV,GAAG,SACoE;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,kBAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EACvD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qEAAqE,SAAS;EAC5F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAoC;CAC3E,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,sFACA,qEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Kbd/index.cjs

@@ -6,7 +6,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
 		"data-slot": "kbd",
-		className: require_cn.cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10", className),
+		className: require_cn.cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-inverse-foreground/20 [[data-slot=tooltip-content]_&]:text-inverse-foreground", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Kbd/Kbd.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** A small key cap that renders a single keyboard key or symbol (e.g. ⌘, Ctrl, ↩). */\nfunction Kbd({\n  /** Extra classes merged onto the key cap. */\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none\",\n        \"[&_svg:not([class*='size-'])]:size-3\",\n        \"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Lays out multiple `Kbd` keys (and separators) inline as a single shortcut combo. */\nfunction KbdGroup({\n  /** Extra classes merged onto the group wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":";;;;;AAKA,SAAS,IAAI,EAEX,WACA,GAAG,SAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,gLACA,wCACA,0JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,SAAS,EAEhB,WACA,GAAG,SAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Kbd/Kbd.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** A small key cap that renders a single keyboard key or symbol (e.g. ⌘, Ctrl, ↩). */\nfunction Kbd({\n  /** Extra classes merged onto the key cap. */\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none\",\n        \"[&_svg:not([class*='size-'])]:size-3\",\n        \"[[data-slot=tooltip-content]_&]:bg-inverse-foreground/20 [[data-slot=tooltip-content]_&]:text-inverse-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Lays out multiple `Kbd` keys (and separators) inline as a single shortcut combo. */\nfunction KbdGroup({\n  /** Extra classes merged onto the group wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":";;;;;AAKA,SAAS,IAAI,EAEX,WACA,GAAG,SAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,gLACA,wCACA,oHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,SAAS,EAEhB,WACA,GAAG,SAC2B;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Kbd/index.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd",
-		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10", className),
+		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-inverse-foreground/20 [[data-slot=tooltip-content]_&]:text-inverse-foreground", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Kbd/Kbd.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** A small key cap that renders a single keyboard key or symbol (e.g. ⌘, Ctrl, ↩). */\nfunction Kbd({\n  /** Extra classes merged onto the key cap. */\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none\",\n        \"[&_svg:not([class*='size-'])]:size-3\",\n        \"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Lays out multiple `Kbd` keys (and separators) inline as a single shortcut combo. */\nfunction KbdGroup({\n  /** Extra classes merged onto the group wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":";;;;AAKA,SAAS,IAAI,EAEX,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,gLACA,wCACA,0JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,SAAS,EAEhB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Kbd/Kbd.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** A small key cap that renders a single keyboard key or symbol (e.g. ⌘, Ctrl, ↩). */\nfunction Kbd({\n  /** Extra classes merged onto the key cap. */\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none\",\n        \"[&_svg:not([class*='size-'])]:size-3\",\n        \"[[data-slot=tooltip-content]_&]:bg-inverse-foreground/20 [[data-slot=tooltip-content]_&]:text-inverse-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Lays out multiple `Kbd` keys (and separators) inline as a single shortcut combo. */\nfunction KbdGroup({\n  /** Extra classes merged onto the group wrapper. */\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":";;;;AAKA,SAAS,IAAI,EAEX,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,gLACA,wCACA,oHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,SAAS,EAEhB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Menubar/index.cjs

@@ -65,7 +65,7 @@ function MenubarItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "menubar-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/Menubar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["MenubarPrimitive","cn","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/Menubar/Menubar.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { Menubar as MenubarPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single menu within the bar — wraps a trigger and its content. */\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\n/** Groups related menu items together for semantic structure. */\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\n/** Portals menu content into the document body so it escapes overflow/stacking contexts. */\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />;\n}\n\n/** Groups `MenubarRadioItem`s so only one can be selected at a time. */\nfunction MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\n/** The clickable label in the bar that opens its menu's content. */\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The dropdown surface that holds a menu's items; portalled and animated. */\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden 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]: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    </MenubarPortal>\n  );\n}\n\n/** A selectable action inside a menu's content. */\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n  /** Visual intent — `destructive` styles the item in the danger colour. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-xs 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        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio dot indicator; use inside a `MenubarRadioGroup`. */\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-xs 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        <MenubarPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that titles a group of menu items. */\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-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 between groups of menu items. */\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint text for an item's keyboard shortcut (e.g. ⌘T). */\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Wraps a nested submenu (its trigger and content). */\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\n/** An item that opens a nested submenu; shows a trailing chevron. */\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\n/** The dropdown surface for a nested submenu's items. */\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-menubar-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  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["MenubarPrimitive","cn","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/Menubar/Menubar.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { Menubar as MenubarPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single menu within the bar — wraps a trigger and its content. */\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\n/** Groups related menu items together for semantic structure. */\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\n/** Portals menu content into the document body so it escapes overflow/stacking contexts. */\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />;\n}\n\n/** Groups `MenubarRadioItem`s so only one can be selected at a time. */\nfunction MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\n/** The clickable label in the bar that opens its menu's content. */\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The dropdown surface that holds a menu's items; portalled and animated. */\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden 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]: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    </MenubarPortal>\n  );\n}\n\n/** A selectable action inside a menu's content. */\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n  /** Visual intent — `destructive` styles the item in the danger colour. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-xs 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        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio dot indicator; use inside a `MenubarRadioGroup`. */\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-xs 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        <MenubarPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that titles a group of menu items. */\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-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 between groups of menu items. */\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint text for an item's keyboard shortcut (e.g. ⌘T). */\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Wraps a nested submenu (its trigger and content). */\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\n/** An item that opens a nested submenu; shows a trailing chevron. */\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\n/** The dropdown surface for a nested submenu's items. */\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-menubar-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  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n};\n"],"mappings":"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"}

package/dist/primitives/Menubar/index.js

@@ -64,7 +64,7 @@ function MenubarItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "menubar-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
 	});
 }