@tetrascience-npm/tetrascience-react-ui 1.0.0-beta.151.1 → 1.0.0-beta.153.1

package/dist/ui/select.js

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import { CheckIcon as c, ChevronDownIcon as i, ChevronUpIcon as u } from "lucide-react";
 import { Select as o } from "radix-ui";
-import { cn as n } from "../lib/utils.js";
-function x({
+import { cn as s } from "../lib/utils.js";
+function h({
   ...e
 }) {
   return /* @__PURE__ */ t(o.Root, { "data-slot": "select", ...e });
@@ -15,32 +15,34 @@ function b({
     o.Group,
     {
       "data-slot": "select-group",
-      className: n("scroll-my-1 p-1", e),
+      className: s("scroll-my-1 p-1", e),
       ...a
     }
   );
 }
-function w({
+function z({
   ...e
 }) {
   return /* @__PURE__ */ t(o.Value, { "data-slot": "select-value", ...e });
 }
-function z({
+function w({
   className: e,
   size: a = "default",
   children: r,
-  ...s
+  ...n
 }) {
   return /* @__PURE__ */ l(
     o.Trigger,
     {
       "data-slot": "select-trigger",
       "data-size": a,
-      className: n(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className: s(
+        // Shared control scale (SW-2591): xs 24 / sm 28 / default 32 / lg 36,
+        // radius 8 at xs/sm and 10 at default/lg — matching Button.
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=lg]:h-9 data-[size=lg]:pl-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:text-[0.8rem] data-[size=xs]:h-6 data-[size=xs]:rounded-[min(var(--radius-md),10px)] data-[size=xs]:pl-2 data-[size=xs]:text-xs *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         e
       ),
-      ...s,
+      ...n,
       children: [
         r,
         /* @__PURE__ */ t(o.Icon, { asChild: !0, children: /* @__PURE__ */ t(i, { className: "pointer-events-none size-4 text-muted-foreground" }) })
@@ -52,7 +54,7 @@ function S({
   className: e,
   children: a,
   position: r = "item-aligned",
-  align: s = "center",
+  align: n = "center",
   ...d
 }) {
   return /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ l(
@@ -60,9 +62,9 @@ function S({
     {
       "data-slot": "select-content",
       "data-align-trigger": r === "item-aligned",
-      className: n("relative z-50 max-h-(--radix-select-content-available-height) p-1 min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-elevation-4 ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", e),
+      className: s("relative z-50 max-h-(--radix-select-content-available-height) p-1 min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-elevation-4 ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", e),
       position: r,
-      align: s,
+      align: n,
       ...d,
       children: [
         /* @__PURE__ */ t(p, {}),
@@ -70,7 +72,7 @@ function S({
           o.Viewport,
           {
             "data-position": r,
-            className: n(
+            className: s(
               "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
               r === "popper" && ""
             ),
@@ -90,7 +92,7 @@ function y({
     o.Label,
     {
       "data-slot": "select-label",
-      className: n("px-1.5 py-1 text-xs text-muted-foreground", e),
+      className: s("px-1.5 py-1 text-xs text-muted-foreground", e),
       ...a
     }
   );
@@ -104,7 +106,7 @@ function N({
     o.Item,
     {
       "data-slot": "select-item",
-      className: n(
+      className: s(
         "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         e
       ),
@@ -124,7 +126,7 @@ function I({
     o.Separator,
     {
       "data-slot": "select-separator",
-      className: n("pointer-events-none -mx-1 my-1 h-px bg-border", e),
+      className: s("pointer-events-none -mx-1 my-1 h-px bg-border", e),
       ...a
     }
   );
@@ -137,7 +139,7 @@ function p({
     o.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: n(
+      className: s(
         "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
         e
       ),
@@ -157,7 +159,7 @@ function m({
     o.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: n(
+      className: s(
         "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
         e
       ),
@@ -170,7 +172,7 @@ function m({
   );
 }
 export {
-  x as Select,
+  h as Select,
   S as SelectContent,
   b as SelectGroup,
   N as SelectItem,
@@ -178,7 +180,7 @@ export {
   m as SelectScrollDownButton,
   p as SelectScrollUpButton,
   I as SelectSeparator,
-  z as SelectTrigger,
-  w as SelectValue
+  w as SelectTrigger,
+  z as SelectValue
 };
 //# sourceMappingURL=select.js.map

package/dist/ui/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../src/components/ui/select.tsx"],"sourcesContent":["\"use client\"\n\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\"relative z-50 max-h-(--radix-select-content-available-height) p-1 min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-elevation-4 ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", position ===\"popper\"&&\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\", className )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-1.5 py-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"pointer-events-none\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"names":["Select","props","SelectPrimitive","SelectGroup","className","jsx","cn","SelectValue","SelectTrigger","size","children","jsxs","ChevronDownIcon","SelectContent","position","align","SelectScrollUpButton","SelectScrollDownButton","SelectLabel","SelectItem","CheckIcon","SelectSeparator","ChevronUpIcon"],"mappings":";;;;AASA,SAASA,EAAO;AAAA,EACd,GAAGC;AACL,GAAsD;AACpD,2BAAQC,EAAgB,MAAhB,EAAqB,aAAU,UAAU,GAAGD,GAAO;AAC7D;AAEA,SAASE,EAAY;AAAA,EACnB,WAAAC;AAAA,EACA,GAAGH;AACL,GAAuD;AACrD,SACE,gBAAAI;AAAA,IAACH,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWI,EAAG,mBAAmBF,CAAS;AAAA,MACzC,GAAGH;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASM,EAAY;AAAA,EACnB,GAAGN;AACL,GAAuD;AACrD,2BAAQC,EAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAGD,GAAO;AACpE;AAEA,SAASO,EAAc;AAAA,EACrB,WAAAJ;AAAA,EACA,MAAAK,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,GAAGT;AACL,GAEG;AACD,SACE,gBAAAU;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,aAAWO;AAAA,MACX,WAAWH;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGH;AAAA,MAEH,UAAA;AAAA,QAAAS;AAAA,QACD,gBAAAL,EAACH,EAAgB,MAAhB,EAAqB,SAAO,IAC3B,UAAA,gBAAAG,EAACO,GAAA,EAAgB,WAAU,mDAAA,CAAmD,EAAA,CAChF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAASC,EAAc;AAAA,EACrB,WAAAT;AAAA,EACA,UAAAM;AAAA,EACA,UAAAI,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,GAAGd;AACL,GAAyD;AACvD,SACE,gBAAAI,EAACH,EAAgB,QAAhB,EACC,UAAA,gBAAAS;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,sBAAoBY,MAAa;AAAA,MACjC,WAAWR,EAAG,ilBAAilBQ,MAAY,YAAU,mIAAmIV,CAAU;AAAA,MAClwB,UAAAU;AAAA,MACA,OAAAC;AAAA,MACC,GAAGd;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACW,GAAA,EAAqB;AAAA,QACtB,gBAAAX;AAAA,UAACH,EAAgB;AAAA,UAAhB;AAAA,YACC,iBAAeY;AAAA,YACf,WAAWR;AAAA,cACT;AAAA,cACAQ,MAAa,YAAY;AAAA,YAAA;AAAA,YAG1B,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEFO,GAAA,CAAA,CAAuB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5B;AAEJ;AAEA,SAASC,EAAY;AAAA,EACnB,WAAAd;AAAA,EACA,GAAGH;AACL,GAAuD;AACrD,SACE,gBAAAI;AAAA,IAACH,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWI,EAAG,6CAA6CF,CAAS;AAAA,MACnE,GAAGH;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASkB,EAAW;AAAA,EAClB,WAAAf;AAAA,EACA,UAAAM;AAAA,EACA,GAAGT;AACL,GAAsD;AACpD,SACE,gBAAAU;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWI;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGH;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,gFACd,UAAA,gBAAAA,EAACH,EAAgB,eAAhB,EACC,UAAA,gBAAAG,EAACe,GAAA,EAAU,WAAU,sBAAA,CAAsB,EAAA,CAC7C,GACF;AAAA,QACA,gBAAAf,EAACH,EAAgB,UAAhB,EAA0B,UAAAQ,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;AAEA,SAASW,EAAgB;AAAA,EACvB,WAAAjB;AAAA,EACA,GAAGH;AACL,GAA2D;AACzD,SACE,gBAAAI;AAAA,IAACH,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWI,EAAG,iDAAiDF,CAAS;AAAA,MACvE,GAAGH;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASe,EAAqB;AAAA,EAC5B,WAAAZ;AAAA,EACA,GAAGH;AACL,GAAgE;AAC9D,SACE,gBAAAI;AAAA,IAACH,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWI;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGH;AAAA,MAEJ,UAAA,gBAAAI;AAAA,QAACiB;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAGN;AAEA,SAASL,EAAuB;AAAA,EAC9B,WAAAb;AAAA,EACA,GAAGH;AACL,GAAkE;AAChE,SACE,gBAAAI;AAAA,IAACH,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWI;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGH;AAAA,MAEJ,UAAA,gBAAAI;AAAA,QAACO;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"select.js","sources":["../../src/components/ui/select.tsx"],"sourcesContent":["\"use client\"\n\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"xs\" | \"sm\" | \"default\" | \"lg\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        // Shared control scale (SW-2591): xs 24 / sm 28 / default 32 / lg 36,\n        // radius 8 at xs/sm and 10 at default/lg — matching Button.\n        \"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=lg]:h-9 data-[size=lg]:pl-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:text-[0.8rem] data-[size=xs]:h-6 data-[size=xs]:rounded-[min(var(--radius-md),10px)] data-[size=xs]:pl-2 data-[size=xs]:text-xs *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\"relative z-50 max-h-(--radix-select-content-available-height) p-1 min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-elevation-4 ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", position ===\"popper\"&&\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\", className )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-1.5 py-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"pointer-events-none\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"names":["Select","props","SelectPrimitive","SelectGroup","className","jsx","cn","SelectValue","SelectTrigger","size","children","jsxs","ChevronDownIcon","SelectContent","position","align","SelectScrollUpButton","SelectScrollDownButton","SelectLabel","SelectItem","CheckIcon","SelectSeparator","ChevronUpIcon"],"mappings":"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"}

package/dist/ui/textarea.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../lib/utils.cjs");function a({className:e,...r}){return t.jsx("textarea",{"data-slot":"textarea",className:i.cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50",e),...r})}exports.Textarea=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("class-variance-authority"),s=require("../lib/utils.cjs"),t=d.cva("flex field-sizing-content w-full border border-input bg-card transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50",{variants:{size:{xs:"min-h-12 rounded-md px-2 py-1 text-xs",sm:"min-h-14 rounded-md px-2.5 py-1.5 text-[0.8rem]",default:"min-h-16 rounded-lg px-2.5 py-2 text-base md:text-sm",lg:"min-h-20 rounded-lg px-3 py-2.5 text-base md:text-sm"}},defaultVariants:{size:"default"}});function n({className:a,size:e,...r}){return i.jsx("textarea",{"data-slot":"textarea","data-size":e??"default",className:s.cn(t({size:e}),a),...r})}exports.Textarea=n;exports.textareaVariants=t;
 //# sourceMappingURL=textarea.cjs.map

package/dist/ui/textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.cjs","sources":["../../src/components/ui/textarea.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n"],"names":["Textarea","className","props","jsx","cn"],"mappings":"mJAIA,SAASA,EAAS,CAAE,UAAAC,EAAW,GAAGC,GAA2C,CAC3E,OACEC,EAAAA,IAAC,WAAA,CACC,YAAU,WACV,UAAWC,EAAAA,GACT,4bACAH,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV"}
+{"version":3,"file":"textarea.cjs","sources":["../../src/components/ui/textarea.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst textareaVariants = cva(\n  \"flex field-sizing-content w-full border border-input bg-card transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50\",\n  {\n    variants: {\n      // Shared control scale (SW-2591): min-height + padding/radius/text step\n      // with the same rhythm as the single-line inputs.\n      size: {\n        xs: \"min-h-12 rounded-md px-2 py-1 text-xs\",\n        sm: \"min-h-14 rounded-md px-2.5 py-1.5 text-[0.8rem]\",\n        default: \"min-h-16 rounded-lg px-2.5 py-2 text-base md:text-sm\",\n        lg: \"min-h-20 rounded-lg px-3 py-2.5 text-base md:text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nfunction Textarea({\n  className,\n  size,\n  ...props\n}: React.ComponentProps<\"textarea\"> & VariantProps<typeof textareaVariants>) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      data-size={size ?? \"default\"}\n      className={cn(textareaVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea, textareaVariants }\n"],"names":["textareaVariants","cva","Textarea","className","size","props","jsx","cn"],"mappings":"yLAKMA,EAAmBC,EAAAA,IACvB,uYACA,CACE,SAAU,CAGR,KAAM,CACJ,GAAI,wCACJ,GAAI,kDACJ,QAAS,uDACT,GAAI,sDAAA,CACN,EAEF,gBAAiB,CACf,KAAM,SAAA,CACR,CAEJ,EAEA,SAASC,EAAS,CAChB,UAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAA6E,CAC3E,OACEC,EAAAA,IAAC,WAAA,CACC,YAAU,WACV,YAAWF,GAAQ,UACnB,UAAWG,EAAAA,GAAGP,EAAiB,CAAE,KAAAI,CAAA,CAAM,EAAGD,CAAS,EAClD,GAAGE,CAAA,CAAA,CAGV"}

package/dist/ui/textarea.js

@@ -1,19 +1,41 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cn as a } from "../lib/utils.js";
-function o({ className: e, ...r }) {
-  return /* @__PURE__ */ i(
+import { jsx as r } from "react/jsx-runtime";
+import { cva as d } from "class-variance-authority";
+import { cn as i } from "../lib/utils.js";
+const o = d(
+  "flex field-sizing-content w-full border border-input bg-card transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50",
+  {
+    variants: {
+      // Shared control scale (SW-2591): min-height + padding/radius/text step
+      // with the same rhythm as the single-line inputs.
+      size: {
+        xs: "min-h-12 rounded-md px-2 py-1 text-xs",
+        sm: "min-h-14 rounded-md px-2.5 py-1.5 text-[0.8rem]",
+        default: "min-h-16 rounded-lg px-2.5 py-2 text-base md:text-sm",
+        lg: "min-h-20 rounded-lg px-3 py-2.5 text-base md:text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function u({
+  className: t,
+  size: e,
+  ...a
+}) {
+  return /* @__PURE__ */ r(
     "textarea",
     {
       "data-slot": "textarea",
-      className: a(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50",
-        e
-      ),
-      ...r
+      "data-size": e ?? "default",
+      className: i(o({ size: e }), t),
+      ...a
     }
   );
 }
 export {
-  o as Textarea
+  u as Textarea,
+  o as textareaVariants
 };
 //# sourceMappingURL=textarea.js.map

package/dist/ui/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../src/components/ui/textarea.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n"],"names":["Textarea","className","props","jsx","cn"],"mappings":";;AAIA,SAASA,EAAS,EAAE,WAAAC,GAAW,GAAGC,KAA2C;AAC3E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"textarea.js","sources":["../../src/components/ui/textarea.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst textareaVariants = cva(\n  \"flex field-sizing-content w-full border border-input bg-card transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50\",\n  {\n    variants: {\n      // Shared control scale (SW-2591): min-height + padding/radius/text step\n      // with the same rhythm as the single-line inputs.\n      size: {\n        xs: \"min-h-12 rounded-md px-2 py-1 text-xs\",\n        sm: \"min-h-14 rounded-md px-2.5 py-1.5 text-[0.8rem]\",\n        default: \"min-h-16 rounded-lg px-2.5 py-2 text-base md:text-sm\",\n        lg: \"min-h-20 rounded-lg px-3 py-2.5 text-base md:text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nfunction Textarea({\n  className,\n  size,\n  ...props\n}: React.ComponentProps<\"textarea\"> & VariantProps<typeof textareaVariants>) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      data-size={size ?? \"default\"}\n      className={cn(textareaVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea, textareaVariants }\n"],"names":["textareaVariants","cva","Textarea","className","size","props","jsx","cn"],"mappings":";;;AAKA,MAAMA,IAAmBC;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA,MAGR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,SAASC,EAAS;AAAA,EAChB,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,GAA6E;AAC3E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAWF,KAAQ;AAAA,MACnB,WAAWG,EAAGP,EAAiB,EAAE,MAAAI,EAAA,CAAM,GAAGD,CAAS;AAAA,MAClD,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/ui/toggle-group.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("lucide-react"),c=require("radix-ui"),m=require("react"),v=require("./toggle.cjs"),s=require("../lib/utils.cjs");function x(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const u=x(m),p=u.createContext({size:"default",variant:"default",spacing:0,orientation:"horizontal"});function h({className:e,variant:r,size:t,spacing:a=0,orientation:g="horizontal",children:n,...o}){return i.jsx(c.ToggleGroup.Root,{"data-slot":"toggle-group","data-variant":r,"data-size":t,"data-spacing":a,"data-orientation":g,style:{"--gap":a},className:s.cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",e),...o,children:i.jsx(p.Provider,{value:{variant:r,size:t,spacing:a,orientation:g},children:n})})}function z({className:e,children:r,variant:t="default",size:a="default",selectedIndicator:g,...n}){const o=u.useContext(p),l=(o.spacing??0)===0,f=o.orientation==="vertical"?"[&:not(:first-child)]:border-t-0":"[&:not(:first-child)]:border-l-0";return i.jsxs(c.ToggleGroup.Item,{"data-slot":"toggle-group-item","data-variant":o.variant||t,"data-size":o.size||a,"data-spacing":o.spacing,className:s.cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg",v.toggleVariants({variant:o.variant||t,size:o.size||a}),l&&"border border-input",l&&f,e),...n,children:[g!=="none"&&i.jsxs("span",{"aria-hidden":!0,"data-slot":"toggle-group-indicator",className:s.cn("grid size-4 shrink-0 place-items-center [&>svg]:[grid-area:1/1]",g===void 0&&"group-has-[svg:not([data-slot=toggle-group-indicator]_svg)]/toggle:hidden"),children:[i.jsx(d.CircleDashed,{className:"size-3.5 text-muted-foreground/50 transition-opacity group-data-[state=on]/toggle:opacity-0"}),i.jsx(d.Check,{className:"size-3.5 opacity-0 transition-opacity group-data-[state=on]/toggle:opacity-100"})]}),r]})}exports.ToggleGroup=h;exports.ToggleGroupItem=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),u=require("lucide-react"),l=require("radix-ui"),v=require("react"),x=require("./toggle.cjs"),s=require("../lib/utils.cjs");function f(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(e,a,o.get?o:{enumerable:!0,get:()=>t[a]})}}return e.default=t,Object.freeze(e)}const p=f(v),c=p.createContext({size:"default",variant:"default",spacing:0,orientation:"horizontal"});function z({className:t,variant:e,size:a,spacing:o=0,orientation:i="horizontal",children:d,...r}){return g.jsx(l.ToggleGroup.Root,{"data-slot":"toggle-group","data-variant":e,"data-size":a,"data-spacing":o,"data-orientation":i,style:{"--gap":o},className:s.cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=xs]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",t),...r,children:g.jsx(c.Provider,{value:{variant:e,size:a,spacing:o,orientation:i},children:d})})}function h({className:t,children:e,variant:a="default",size:o="default",selectedIndicator:i,...d}){const r=p.useContext(c),n=(r.spacing??0)===0,m=r.orientation==="vertical"?"[&:not(:first-child)]:border-t-0":"[&:not(:first-child)]:border-l-0";return g.jsxs(l.ToggleGroup.Item,{"data-slot":"toggle-group-item","data-variant":r.variant||a,"data-size":r.size||o,"data-spacing":r.spacing,className:s.cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[size=xs]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-[min(var(--radius-md),10px)]",x.toggleVariants({variant:r.variant||a,size:r.size||o}),n&&"border border-input",n&&m,t),...d,children:[i!=="none"&&g.jsxs("span",{"aria-hidden":!0,"data-slot":"toggle-group-indicator",className:s.cn("grid size-4 shrink-0 place-items-center [&>svg]:[grid-area:1/1]",i===void 0&&"group-has-[svg:not([data-slot=toggle-group-indicator]_svg)]/toggle:hidden"),children:[g.jsx(u.CircleDashed,{className:"size-3.5 text-muted-foreground/50 transition-opacity group-data-[state=on]/toggle:opacity-0"}),g.jsx(u.Check,{className:"size-3.5 opacity-0 transition-opacity group-data-[state=on]/toggle:opacity-100"})]}),e]})}exports.ToggleGroup=z;exports.ToggleGroupItem=h;
 //# sourceMappingURL=toggle-group.cjs.map

package/dist/ui/toggle-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.cjs","sources":["../../src/components/ui/toggle-group.tsx"],"sourcesContent":["import { type VariantProps } from \"class-variance-authority\"\nimport { CircleDashed, Check } from \"lucide-react\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { toggleVariants } from \"@/components/ui/toggle\"\nimport { cn } from \"@/lib/utils\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  selectedIndicator,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants> & {\n    /**\n     * Leading indicator for the selectable state (SW-2445). `\"dot\"` shows a\n     * faint dotted ring when off that cross-fades to a check when on — a resting\n     * affordance so an item reads as \"selectable\" and stays legible when every\n     * option is selected.\n     *\n     * Defaults by content: **label-only** items get `\"dot\"`; items that render\n     * an **icon** (icon-only or icon + label) get `\"none\"` — the icon carries\n     * the state and there's no room for a ring. The default is decided in CSS\n     * from the rendered DOM (`:has(svg)`), not from the React children, so a\n     * label wrapped in a `<span>`, a translation component or a tooltip still\n     * keeps its ring. Pass the prop to override either way.\n     */\n    selectedIndicator?: \"dot\" | \"none\"\n  }) {\n  const context = React.useContext(ToggleGroupContext)\n\n  // Segmented (spacing=0) items carry their own border. Applied as plain\n  // `border` rather than a `group-data-*:` variant on purpose: a group-scoped\n  // selector compiles to specificity (0,2,0) and would silently beat a\n  // consumer's own `border-r-0`/`border-l-0` in `className` (0,1,0). Plain\n  // utilities stay at (0,1,0), so `className` keeps winning — which is the\n  // contract every other component here follows.\n  const segmented = (context.spacing ?? 0) === 0\n  const collapseLeadingEdge =\n    context.orientation === \"vertical\"\n      ? \"[&:not(:first-child)]:border-t-0\"\n      : \"[&:not(:first-child)]:border-l-0\"\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        // SW-2445: every segmented item is bordered (not only variant=outline),\n        // so the group always reads as outlined and stays countable when all are\n        // selected. Non-first items drop their shared (leading) edge so adjacent\n        // borders collapse to a single divider. Border + rounded corners live on\n        // the same element, so the selected fill always aligns with the outline.\n        segmented && \"border border-input\",\n        segmented && collapseLeadingEdge,\n        className\n      )}\n      {...props}\n    >\n      {selectedIndicator !== \"none\" && (\n        <span\n          aria-hidden\n          data-slot=\"toggle-group-indicator\"\n          className={cn(\n            \"grid size-4 shrink-0 place-items-center [&>svg]:[grid-area:1/1]\",\n            // Content-aware default, decided in CSS rather than by inspecting\n            // React children: hide the ring when the item renders any *other*\n            // svg (an icon carries the state). Inspecting children would treat\n            // a `<span>`-wrapped or translated label as \"has icon\" and silently\n            // drop the ring — misaligning a group that mixes plain and wrapped\n            // labels. `display:none` also drops the slot, so no layout shift.\n            selectedIndicator === undefined &&\n              \"group-has-[svg:not([data-slot=toggle-group-indicator]_svg)]/toggle:hidden\"\n          )}\n        >\n          <CircleDashed className=\"size-3.5 text-muted-foreground/50 transition-opacity group-data-[state=on]/toggle:opacity-0\" />\n          <Check className=\"size-3.5 opacity-0 transition-opacity group-data-[state=on]/toggle:opacity-100\" />\n        </span>\n      )}\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n"],"names":["ToggleGroupContext","React","ToggleGroup","className","variant","size","spacing","orientation","children","props","jsx","ToggleGroupPrimitive","cn","ToggleGroupItem","selectedIndicator","context","segmented","collapseLeadingEdge","jsxs","toggleVariants","CircleDashed","Check"],"mappings":"0gBAQMA,EAAqBC,EAAM,cAK/B,CACA,KAAM,UACN,QAAS,UACT,QAAS,EACT,YAAa,YACf,CAAC,EAED,SAASC,EAAY,CACnB,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,EACV,YAAAC,EAAc,aACd,SAAAC,EACA,GAAGC,CACL,EAIK,CACH,OACEC,EAAAA,IAACC,EAAAA,YAAqB,KAArB,CACC,YAAU,eACV,eAAcP,EACd,YAAWC,EACX,eAAcC,EACd,mBAAkBC,EAClB,MAAO,CAAE,QAASD,CAAA,EAClB,UAAWM,EAAAA,GACT,oMACAT,CAAA,EAED,GAAGM,EAEJ,SAAAC,EAAAA,IAACV,EAAmB,SAAnB,CACC,MAAO,CAAE,QAAAI,EAAS,KAAAC,EAAM,QAAAC,EAAS,YAAAC,CAAA,EAEhC,SAAAC,CAAA,CAAA,CACH,CAAA,CAGN,CAEA,SAASK,EAAgB,CACvB,UAAAV,EACA,SAAAK,EACA,QAAAJ,EAAU,UACV,KAAAC,EAAO,UACP,kBAAAS,EACA,GAAGL,CACL,EAgBK,CACH,MAAMM,EAAUd,EAAM,WAAWD,CAAkB,EAQ7CgB,GAAaD,EAAQ,SAAW,KAAO,EACvCE,EACJF,EAAQ,cAAgB,WACpB,mCACA,mCAEN,OACEG,EAAAA,KAACP,EAAAA,YAAqB,KAArB,CACC,YAAU,oBACV,eAAcI,EAAQ,SAAWX,EACjC,YAAWW,EAAQ,MAAQV,EAC3B,eAAcU,EAAQ,QACtB,UAAWH,EAAAA,GACT,yZACAO,iBAAe,CACb,QAASJ,EAAQ,SAAWX,EAC5B,KAAMW,EAAQ,MAAQV,CAAA,CACvB,EAMDW,GAAa,sBACbA,GAAaC,EACbd,CAAA,EAED,GAAGM,EAEH,SAAA,CAAAK,IAAsB,QACrBI,EAAAA,KAAC,OAAA,CACC,cAAW,GACX,YAAU,yBACV,UAAWN,EAAAA,GACT,kEAOAE,IAAsB,QACpB,2EAAA,EAGJ,SAAA,CAAAJ,EAAAA,IAACU,EAAAA,aAAA,CAAa,UAAU,6FAAA,CAA8F,EACtHV,EAAAA,IAACW,EAAAA,MAAA,CAAM,UAAU,gFAAA,CAAiF,CAAA,CAAA,CAAA,EAGrGb,CAAA,CAAA,CAAA,CAGP"}
+{"version":3,"file":"toggle-group.cjs","sources":["../../src/components/ui/toggle-group.tsx"],"sourcesContent":["import { type VariantProps } from \"class-variance-authority\"\nimport { CircleDashed, Check } from \"lucide-react\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { toggleVariants } from \"@/components/ui/toggle\"\nimport { cn } from \"@/lib/utils\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=xs]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  selectedIndicator,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants> & {\n    /**\n     * Leading indicator for the selectable state (SW-2445). `\"dot\"` shows a\n     * faint dotted ring when off that cross-fades to a check when on — a resting\n     * affordance so an item reads as \"selectable\" and stays legible when every\n     * option is selected.\n     *\n     * Defaults by content: **label-only** items get `\"dot\"`; items that render\n     * an **icon** (icon-only or icon + label) get `\"none\"` — the icon carries\n     * the state and there's no room for a ring. The default is decided in CSS\n     * from the rendered DOM (`:has(svg)`), not from the React children, so a\n     * label wrapped in a `<span>`, a translation component or a tooltip still\n     * keeps its ring. Pass the prop to override either way.\n     */\n    selectedIndicator?: \"dot\" | \"none\"\n  }) {\n  const context = React.useContext(ToggleGroupContext)\n\n  // Segmented (spacing=0) items carry their own border. Applied as plain\n  // `border` rather than a `group-data-*:` variant on purpose: a group-scoped\n  // selector compiles to specificity (0,2,0) and would silently beat a\n  // consumer's own `border-r-0`/`border-l-0` in `className` (0,1,0). Plain\n  // utilities stay at (0,1,0), so `className` keeps winning — which is the\n  // contract every other component here follows.\n  const segmented = (context.spacing ?? 0) === 0\n  const collapseLeadingEdge =\n    context.orientation === \"vertical\"\n      ? \"[&:not(:first-child)]:border-t-0\"\n      : \"[&:not(:first-child)]:border-l-0\"\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg \" +\n          // SW-2588: xs/sm end corners follow the smaller radius so a segmented\n          // group matches Button/Toggle at those sizes (base above rounds to lg).\n          \"group-data-[size=xs]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-[min(var(--radius-md),10px)]\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        // SW-2445: every segmented item is bordered (not only variant=outline),\n        // so the group always reads as outlined and stays countable when all are\n        // selected. Non-first items drop their shared (leading) edge so adjacent\n        // borders collapse to a single divider. Border + rounded corners live on\n        // the same element, so the selected fill always aligns with the outline.\n        segmented && \"border border-input\",\n        segmented && collapseLeadingEdge,\n        className\n      )}\n      {...props}\n    >\n      {selectedIndicator !== \"none\" && (\n        <span\n          aria-hidden\n          data-slot=\"toggle-group-indicator\"\n          className={cn(\n            \"grid size-4 shrink-0 place-items-center [&>svg]:[grid-area:1/1]\",\n            // Content-aware default, decided in CSS rather than by inspecting\n            // React children: hide the ring when the item renders any *other*\n            // svg (an icon carries the state). Inspecting children would treat\n            // a `<span>`-wrapped or translated label as \"has icon\" and silently\n            // drop the ring — misaligning a group that mixes plain and wrapped\n            // labels. `display:none` also drops the slot, so no layout shift.\n            selectedIndicator === undefined &&\n              \"group-has-[svg:not([data-slot=toggle-group-indicator]_svg)]/toggle:hidden\"\n          )}\n        >\n          <CircleDashed className=\"size-3.5 text-muted-foreground/50 transition-opacity group-data-[state=on]/toggle:opacity-0\" />\n          <Check className=\"size-3.5 opacity-0 transition-opacity group-data-[state=on]/toggle:opacity-100\" />\n        </span>\n      )}\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n"],"names":["ToggleGroupContext","React","ToggleGroup","className","variant","size","spacing","orientation","children","props","jsx","ToggleGroupPrimitive","cn","ToggleGroupItem","selectedIndicator","context","segmented","collapseLeadingEdge","jsxs","toggleVariants","CircleDashed","Check"],"mappings":"0gBAQMA,EAAqBC,EAAM,cAK/B,CACA,KAAM,UACN,QAAS,UACT,QAAS,EACT,YAAa,YACf,CAAC,EAED,SAASC,EAAY,CACnB,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,EACV,YAAAC,EAAc,aACd,SAAAC,EACA,GAAGC,CACL,EAIK,CACH,OACEC,EAAAA,IAACC,EAAAA,YAAqB,KAArB,CACC,YAAU,eACV,eAAcP,EACd,YAAWC,EACX,eAAcC,EACd,mBAAkBC,EAClB,MAAO,CAAE,QAASD,CAAA,EAClB,UAAWM,EAAAA,GACT,wPACAT,CAAA,EAED,GAAGM,EAEJ,SAAAC,EAAAA,IAACV,EAAmB,SAAnB,CACC,MAAO,CAAE,QAAAI,EAAS,KAAAC,EAAM,QAAAC,EAAS,YAAAC,CAAA,EAEhC,SAAAC,CAAA,CAAA,CACH,CAAA,CAGN,CAEA,SAASK,EAAgB,CACvB,UAAAV,EACA,SAAAK,EACA,QAAAJ,EAAU,UACV,KAAAC,EAAO,UACP,kBAAAS,EACA,GAAGL,CACL,EAgBK,CACH,MAAMM,EAAUd,EAAM,WAAWD,CAAkB,EAQ7CgB,GAAaD,EAAQ,SAAW,KAAO,EACvCE,EACJF,EAAQ,cAAgB,WACpB,mCACA,mCAEN,OACEG,EAAAA,KAACP,EAAAA,YAAqB,KAArB,CACC,YAAU,oBACV,eAAcI,EAAQ,SAAWX,EACjC,YAAWW,EAAQ,MAAQV,EAC3B,eAAcU,EAAQ,QACtB,UAAWH,EAAAA,GACT,q6CAIAO,iBAAe,CACb,QAASJ,EAAQ,SAAWX,EAC5B,KAAMW,EAAQ,MAAQV,CAAA,CACvB,EAMDW,GAAa,sBACbA,GAAaC,EACbd,CAAA,EAED,GAAGM,EAEH,SAAA,CAAAK,IAAsB,QACrBI,EAAAA,KAAC,OAAA,CACC,cAAW,GACX,YAAU,yBACV,UAAWN,EAAAA,GACT,kEAOAE,IAAsB,QACpB,2EAAA,EAGJ,SAAA,CAAAJ,EAAAA,IAACU,EAAAA,aAAA,CAAa,UAAU,6FAAA,CAA8F,EACtHV,EAAAA,IAACW,EAAAA,MAAA,CAAM,UAAU,gFAAA,CAAiF,CAAA,CAAA,CAAA,EAGrGb,CAAA,CAAA,CAAA,CAGP"}

package/dist/ui/toggle-group.js

@@ -1,10 +1,10 @@
-import { jsx as g, jsxs as l } from "react/jsx-runtime";
-import { CircleDashed as f, Check as v } from "lucide-react";
-import { ToggleGroup as p } from "radix-ui";
-import * as c from "react";
-import { toggleVariants as h } from "./toggle.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { CircleDashed as v, Check as f } from "lucide-react";
+import { ToggleGroup as u } from "radix-ui";
+import * as l from "react";
+import { toggleVariants as x } from "./toggle.js";
 import { cn as s } from "../lib/utils.js";
-const u = c.createContext({
+const c = l.createContext({
   size: "default",
   variant: "default",
   spacing: 0,
@@ -12,32 +12,32 @@ const u = c.createContext({
 });
 function G({
   className: i,
-  variant: r,
+  variant: g,
   size: o,
-  spacing: a = 0,
-  orientation: e = "horizontal",
-  children: n,
-  ...t
+  spacing: t = 0,
+  orientation: r = "horizontal",
+  children: d,
+  ...a
 }) {
-  return /* @__PURE__ */ g(
-    p.Root,
+  return /* @__PURE__ */ e(
+    u.Root,
     {
       "data-slot": "toggle-group",
-      "data-variant": r,
+      "data-variant": g,
       "data-size": o,
-      "data-spacing": a,
-      "data-orientation": e,
-      style: { "--gap": a },
+      "data-spacing": t,
+      "data-orientation": r,
+      style: { "--gap": t },
       className: s(
-        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=xs]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
         i
       ),
-      ...t,
-      children: /* @__PURE__ */ g(
-        u.Provider,
+      ...a,
+      children: /* @__PURE__ */ e(
+        c.Provider,
         {
-          value: { variant: r, size: o, spacing: a, orientation: e },
-          children: n
+          value: { variant: g, size: o, spacing: t, orientation: r },
+          children: d
         }
       )
     }
@@ -45,38 +45,38 @@ function G({
 }
 function N({
   className: i,
-  children: r,
+  children: g,
   variant: o = "default",
-  size: a = "default",
-  selectedIndicator: e,
-  ...n
+  size: t = "default",
+  selectedIndicator: r,
+  ...d
 }) {
-  const t = c.useContext(u), d = (t.spacing ?? 0) === 0, m = t.orientation === "vertical" ? "[&:not(:first-child)]:border-t-0" : "[&:not(:first-child)]:border-l-0";
-  return /* @__PURE__ */ l(
-    p.Item,
+  const a = l.useContext(c), p = (a.spacing ?? 0) === 0, m = a.orientation === "vertical" ? "[&:not(:first-child)]:border-t-0" : "[&:not(:first-child)]:border-l-0";
+  return /* @__PURE__ */ n(
+    u.Item,
     {
       "data-slot": "toggle-group-item",
-      "data-variant": t.variant || o,
-      "data-size": t.size || a,
-      "data-spacing": t.spacing,
+      "data-variant": a.variant || o,
+      "data-size": a.size || t,
+      "data-spacing": a.spacing,
       className: s(
-        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg",
-        h({
-          variant: t.variant || o,
-          size: t.size || a
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[size=xs]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-[min(var(--radius-md),10px)]",
+        x({
+          variant: a.variant || o,
+          size: a.size || t
         }),
         // SW-2445: every segmented item is bordered (not only variant=outline),
         // so the group always reads as outlined and stays countable when all are
         // selected. Non-first items drop their shared (leading) edge so adjacent
         // borders collapse to a single divider. Border + rounded corners live on
         // the same element, so the selected fill always aligns with the outline.
-        d && "border border-input",
-        d && m,
+        p && "border border-input",
+        p && m,
         i
       ),
-      ...n,
+      ...d,
       children: [
-        e !== "none" && /* @__PURE__ */ l(
+        r !== "none" && /* @__PURE__ */ n(
           "span",
           {
             "aria-hidden": !0,
@@ -89,15 +89,15 @@ function N({
               // a `<span>`-wrapped or translated label as "has icon" and silently
               // drop the ring — misaligning a group that mixes plain and wrapped
               // labels. `display:none` also drops the slot, so no layout shift.
-              e === void 0 && "group-has-[svg:not([data-slot=toggle-group-indicator]_svg)]/toggle:hidden"
+              r === void 0 && "group-has-[svg:not([data-slot=toggle-group-indicator]_svg)]/toggle:hidden"
             ),
             children: [
-              /* @__PURE__ */ g(f, { className: "size-3.5 text-muted-foreground/50 transition-opacity group-data-[state=on]/toggle:opacity-0" }),
-              /* @__PURE__ */ g(v, { className: "size-3.5 opacity-0 transition-opacity group-data-[state=on]/toggle:opacity-100" })
+              /* @__PURE__ */ e(v, { className: "size-3.5 text-muted-foreground/50 transition-opacity group-data-[state=on]/toggle:opacity-0" }),
+              /* @__PURE__ */ e(f, { className: "size-3.5 opacity-0 transition-opacity group-data-[state=on]/toggle:opacity-100" })
             ]
           }
         ),
-        r
+        g
       ]
     }
   );

package/dist/ui/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","sources":["../../src/components/ui/toggle-group.tsx"],"sourcesContent":["import { type VariantProps } from \"class-variance-authority\"\nimport { CircleDashed, Check } from \"lucide-react\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { toggleVariants } from \"@/components/ui/toggle\"\nimport { cn } from \"@/lib/utils\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  selectedIndicator,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants> & {\n    /**\n     * Leading indicator for the selectable state (SW-2445). `\"dot\"` shows a\n     * faint dotted ring when off that cross-fades to a check when on — a resting\n     * affordance so an item reads as \"selectable\" and stays legible when every\n     * option is selected.\n     *\n     * Defaults by content: **label-only** items get `\"dot\"`; items that render\n     * an **icon** (icon-only or icon + label) get `\"none\"` — the icon carries\n     * the state and there's no room for a ring. The default is decided in CSS\n     * from the rendered DOM (`:has(svg)`), not from the React children, so a\n     * label wrapped in a `<span>`, a translation component or a tooltip still\n     * keeps its ring. Pass the prop to override either way.\n     */\n    selectedIndicator?: \"dot\" | \"none\"\n  }) {\n  const context = React.useContext(ToggleGroupContext)\n\n  // Segmented (spacing=0) items carry their own border. Applied as plain\n  // `border` rather than a `group-data-*:` variant on purpose: a group-scoped\n  // selector compiles to specificity (0,2,0) and would silently beat a\n  // consumer's own `border-r-0`/`border-l-0` in `className` (0,1,0). Plain\n  // utilities stay at (0,1,0), so `className` keeps winning — which is the\n  // contract every other component here follows.\n  const segmented = (context.spacing ?? 0) === 0\n  const collapseLeadingEdge =\n    context.orientation === \"vertical\"\n      ? \"[&:not(:first-child)]:border-t-0\"\n      : \"[&:not(:first-child)]:border-l-0\"\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        // SW-2445: every segmented item is bordered (not only variant=outline),\n        // so the group always reads as outlined and stays countable when all are\n        // selected. Non-first items drop their shared (leading) edge so adjacent\n        // borders collapse to a single divider. Border + rounded corners live on\n        // the same element, so the selected fill always aligns with the outline.\n        segmented && \"border border-input\",\n        segmented && collapseLeadingEdge,\n        className\n      )}\n      {...props}\n    >\n      {selectedIndicator !== \"none\" && (\n        <span\n          aria-hidden\n          data-slot=\"toggle-group-indicator\"\n          className={cn(\n            \"grid size-4 shrink-0 place-items-center [&>svg]:[grid-area:1/1]\",\n            // Content-aware default, decided in CSS rather than by inspecting\n            // React children: hide the ring when the item renders any *other*\n            // svg (an icon carries the state). Inspecting children would treat\n            // a `<span>`-wrapped or translated label as \"has icon\" and silently\n            // drop the ring — misaligning a group that mixes plain and wrapped\n            // labels. `display:none` also drops the slot, so no layout shift.\n            selectedIndicator === undefined &&\n              \"group-has-[svg:not([data-slot=toggle-group-indicator]_svg)]/toggle:hidden\"\n          )}\n        >\n          <CircleDashed className=\"size-3.5 text-muted-foreground/50 transition-opacity group-data-[state=on]/toggle:opacity-0\" />\n          <Check className=\"size-3.5 opacity-0 transition-opacity group-data-[state=on]/toggle:opacity-100\" />\n        </span>\n      )}\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n"],"names":["ToggleGroupContext","React","ToggleGroup","className","variant","size","spacing","orientation","children","props","jsx","ToggleGroupPrimitive","cn","ToggleGroupItem","selectedIndicator","context","segmented","collapseLeadingEdge","jsxs","toggleVariants","CircleDashed","Check"],"mappings":";;;;;;AAQA,MAAMA,IAAqBC,EAAM,cAK/B;AAAA,EACA,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,SAASC,EAAY;AAAA,EACnB,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,GAAGC;AACL,GAIK;AACH,SACE,gBAAAC;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,gBAAcP;AAAA,MACd,aAAWC;AAAA,MACX,gBAAcC;AAAA,MACd,oBAAkBC;AAAA,MAClB,OAAO,EAAE,SAASD,EAAA;AAAA,MAClB,WAAWM;AAAA,QACT;AAAA,QACAT;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAACV,EAAmB;AAAA,QAAnB;AAAA,UACC,OAAO,EAAE,SAAAI,GAAS,MAAAC,GAAM,SAAAC,GAAS,aAAAC,EAAA;AAAA,UAEhC,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,SAASK,EAAgB;AAAA,EACvB,WAAAV;AAAA,EACA,UAAAK;AAAA,EACA,SAAAJ,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,mBAAAS;AAAA,EACA,GAAGL;AACL,GAgBK;AACH,QAAMM,IAAUd,EAAM,WAAWD,CAAkB,GAQ7CgB,KAAaD,EAAQ,WAAW,OAAO,GACvCE,IACJF,EAAQ,gBAAgB,aACpB,qCACA;AAEN,SACE,gBAAAG;AAAA,IAACP,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,gBAAcI,EAAQ,WAAWX;AAAA,MACjC,aAAWW,EAAQ,QAAQV;AAAA,MAC3B,gBAAcU,EAAQ;AAAA,MACtB,WAAWH;AAAA,QACT;AAAA,QACAO,EAAe;AAAA,UACb,SAASJ,EAAQ,WAAWX;AAAA,UAC5B,MAAMW,EAAQ,QAAQV;AAAA,QAAA,CACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMDW,KAAa;AAAA,QACbA,KAAaC;AAAA,QACbd;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,MAEH,UAAA;AAAA,QAAAK,MAAsB,UACrB,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,aAAU;AAAA,YACV,WAAWN;AAAA,cACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOAE,MAAsB,UACpB;AAAA,YAAA;AAAA,YAGJ,UAAA;AAAA,cAAA,gBAAAJ,EAACU,GAAA,EAAa,WAAU,8FAAA,CAA8F;AAAA,cACtH,gBAAAV,EAACW,GAAA,EAAM,WAAU,iFAAA,CAAiF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrGb;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"toggle-group.js","sources":["../../src/components/ui/toggle-group.tsx"],"sourcesContent":["import { type VariantProps } from \"class-variance-authority\"\nimport { CircleDashed, Check } from \"lucide-react\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { toggleVariants } from \"@/components/ui/toggle\"\nimport { cn } from \"@/lib/utils\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=xs]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  selectedIndicator,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants> & {\n    /**\n     * Leading indicator for the selectable state (SW-2445). `\"dot\"` shows a\n     * faint dotted ring when off that cross-fades to a check when on — a resting\n     * affordance so an item reads as \"selectable\" and stays legible when every\n     * option is selected.\n     *\n     * Defaults by content: **label-only** items get `\"dot\"`; items that render\n     * an **icon** (icon-only or icon + label) get `\"none\"` — the icon carries\n     * the state and there's no room for a ring. The default is decided in CSS\n     * from the rendered DOM (`:has(svg)`), not from the React children, so a\n     * label wrapped in a `<span>`, a translation component or a tooltip still\n     * keeps its ring. Pass the prop to override either way.\n     */\n    selectedIndicator?: \"dot\" | \"none\"\n  }) {\n  const context = React.useContext(ToggleGroupContext)\n\n  // Segmented (spacing=0) items carry their own border. Applied as plain\n  // `border` rather than a `group-data-*:` variant on purpose: a group-scoped\n  // selector compiles to specificity (0,2,0) and would silently beat a\n  // consumer's own `border-r-0`/`border-l-0` in `className` (0,1,0). Plain\n  // utilities stay at (0,1,0), so `className` keeps winning — which is the\n  // contract every other component here follows.\n  const segmented = (context.spacing ?? 0) === 0\n  const collapseLeadingEdge =\n    context.orientation === \"vertical\"\n      ? \"[&:not(:first-child)]:border-t-0\"\n      : \"[&:not(:first-child)]:border-l-0\"\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg \" +\n          // SW-2588: xs/sm end corners follow the smaller radius so a segmented\n          // group matches Button/Toggle at those sizes (base above rounds to lg).\n          \"group-data-[size=xs]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-[min(var(--radius-md),10px)] group-data-[size=xs]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-[min(var(--radius-md),10px)] group-data-[size=sm]/toggle-group:group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-[min(var(--radius-md),10px)]\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        // SW-2445: every segmented item is bordered (not only variant=outline),\n        // so the group always reads as outlined and stays countable when all are\n        // selected. Non-first items drop their shared (leading) edge so adjacent\n        // borders collapse to a single divider. Border + rounded corners live on\n        // the same element, so the selected fill always aligns with the outline.\n        segmented && \"border border-input\",\n        segmented && collapseLeadingEdge,\n        className\n      )}\n      {...props}\n    >\n      {selectedIndicator !== \"none\" && (\n        <span\n          aria-hidden\n          data-slot=\"toggle-group-indicator\"\n          className={cn(\n            \"grid size-4 shrink-0 place-items-center [&>svg]:[grid-area:1/1]\",\n            // Content-aware default, decided in CSS rather than by inspecting\n            // React children: hide the ring when the item renders any *other*\n            // svg (an icon carries the state). Inspecting children would treat\n            // a `<span>`-wrapped or translated label as \"has icon\" and silently\n            // drop the ring — misaligning a group that mixes plain and wrapped\n            // labels. `display:none` also drops the slot, so no layout shift.\n            selectedIndicator === undefined &&\n              \"group-has-[svg:not([data-slot=toggle-group-indicator]_svg)]/toggle:hidden\"\n          )}\n        >\n          <CircleDashed className=\"size-3.5 text-muted-foreground/50 transition-opacity group-data-[state=on]/toggle:opacity-0\" />\n          <Check className=\"size-3.5 opacity-0 transition-opacity group-data-[state=on]/toggle:opacity-100\" />\n        </span>\n      )}\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n"],"names":["ToggleGroupContext","React","ToggleGroup","className","variant","size","spacing","orientation","children","props","jsx","ToggleGroupPrimitive","cn","ToggleGroupItem","selectedIndicator","context","segmented","collapseLeadingEdge","jsxs","toggleVariants","CircleDashed","Check"],"mappings":";;;;;;AAQA,MAAMA,IAAqBC,EAAM,cAK/B;AAAA,EACA,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,SAASC,EAAY;AAAA,EACnB,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,GAAGC;AACL,GAIK;AACH,SACE,gBAAAC;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,gBAAcP;AAAA,MACd,aAAWC;AAAA,MACX,gBAAcC;AAAA,MACd,oBAAkBC;AAAA,MAClB,OAAO,EAAE,SAASD,EAAA;AAAA,MAClB,WAAWM;AAAA,QACT;AAAA,QACAT;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAACV,EAAmB;AAAA,QAAnB;AAAA,UACC,OAAO,EAAE,SAAAI,GAAS,MAAAC,GAAM,SAAAC,GAAS,aAAAC,EAAA;AAAA,UAEhC,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,SAASK,EAAgB;AAAA,EACvB,WAAAV;AAAA,EACA,UAAAK;AAAA,EACA,SAAAJ,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,mBAAAS;AAAA,EACA,GAAGL;AACL,GAgBK;AACH,QAAMM,IAAUd,EAAM,WAAWD,CAAkB,GAQ7CgB,KAAaD,EAAQ,WAAW,OAAO,GACvCE,IACJF,EAAQ,gBAAgB,aACpB,qCACA;AAEN,SACE,gBAAAG;AAAA,IAACP,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,gBAAcI,EAAQ,WAAWX;AAAA,MACjC,aAAWW,EAAQ,QAAQV;AAAA,MAC3B,gBAAcU,EAAQ;AAAA,MACtB,WAAWH;AAAA,QACT;AAAA,QAIAO,EAAe;AAAA,UACb,SAASJ,EAAQ,WAAWX;AAAA,UAC5B,MAAMW,EAAQ,QAAQV;AAAA,QAAA,CACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMDW,KAAa;AAAA,QACbA,KAAaC;AAAA,QACbd;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,MAEH,UAAA;AAAA,QAAAK,MAAsB,UACrB,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,aAAU;AAAA,YACV,WAAWN;AAAA,cACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOAE,MAAsB,UACpB;AAAA,YAAA;AAAA,YAGJ,UAAA;AAAA,cAAA,gBAAAJ,EAACU,GAAA,EAAa,WAAU,8FAAA,CAA8F;AAAA,cACtH,gBAAAV,EAACW,GAAA,EAAM,WAAU,iFAAA,CAAiF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrGb;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/ui/toggle.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("class-variance-authority"),i=require("radix-ui"),d=require("../lib/utils.cjs"),e=o.cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus aria-pressed:bg-selected aria-pressed:text-selected-foreground aria-pressed:shadow-(--shadow-inset-pressed) data-[state=on]:bg-selected data-[state=on]:text-selected-foreground data-[state=on]:shadow-(--shadow-inset-pressed) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-transparent",outline:"border border-input bg-transparent hover:bg-accent aria-pressed:border-selected-border data-[state=on]:border-selected-border"},size:{default:"h-8 min-w-8 px-2",sm:"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",lg:"h-9 min-w-9 px-2.5"}},defaultVariants:{variant:"default",size:"default"}});function l({className:t,variant:a="default",size:r="default",...s}){return n.jsx(i.Toggle.Root,{"data-slot":"toggle",className:d.cn(e({variant:a,size:r,className:t})),...s})}exports.Toggle=l;exports.toggleVariants=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("class-variance-authority"),o=require("radix-ui"),d=require("../lib/utils.cjs"),e=i.cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus aria-pressed:bg-selected aria-pressed:text-selected-foreground aria-pressed:shadow-(--shadow-inset-pressed) data-[state=on]:bg-selected data-[state=on]:text-selected-foreground data-[state=on]:shadow-(--shadow-inset-pressed) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-transparent",outline:"border border-input bg-transparent hover:bg-accent aria-pressed:border-selected-border data-[state=on]:border-selected-border"},size:{default:"h-8 min-w-8 px-2",xs:"h-6 min-w-6 rounded-[min(var(--radius-md),10px)] px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3",sm:"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",lg:"h-9 min-w-9 px-2.5"}},defaultVariants:{variant:"default",size:"default"}});function l({className:t,variant:s="default",size:a="default",...r}){return n.jsx(o.Toggle.Root,{"data-slot":"toggle",className:d.cn(e({variant:s,size:a,className:t})),...r})}exports.Toggle=l;exports.toggleVariants=e;
 //# sourceMappingURL=toggle.cjs.map

package/dist/ui/toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.cjs","sources":["../../src/components/ui/toggle.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus aria-pressed:bg-selected aria-pressed:text-selected-foreground aria-pressed:shadow-(--shadow-inset-pressed) data-[state=on]:bg-selected data-[state=on]:text-selected-foreground data-[state=on]:shadow-(--shadow-inset-pressed) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent aria-pressed:border-selected-border data-[state=on]:border-selected-border\",\n      },\n      size: {\n        default: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]\",\n        lg: \"h-9 min-w-9 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n"],"names":["toggleVariants","cva","Toggle","className","variant","size","props","jsx","TogglePrimitive","cn"],"mappings":"+MAMMA,EAAiBC,EAAAA,IACrB,0oBACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,iBACT,QACE,+HAAA,EAEJ,KAAM,CACJ,QAAS,mBACT,GAAI,wEACJ,GAAI,oBAAA,CACN,EAEF,gBAAiB,CACf,QAAS,UACT,KAAM,SAAA,CACR,CAEJ,EAEA,SAASC,EAAO,CACd,UAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,UACP,GAAGC,CACL,EACuC,CACrC,OACEC,EAAAA,IAACC,EAAAA,OAAgB,KAAhB,CACC,YAAU,SACV,UAAWC,EAAAA,GAAGT,EAAe,CAAE,QAAAI,EAAS,KAAAC,EAAM,UAAAF,CAAA,CAAW,CAAC,EACzD,GAAGG,CAAA,CAAA,CAGV"}
+{"version":3,"file":"toggle.cjs","sources":["../../src/components/ui/toggle.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-focus aria-pressed:bg-selected aria-pressed:text-selected-foreground aria-pressed:shadow-(--shadow-inset-pressed) data-[state=on]:bg-selected data-[state=on]:text-selected-foreground data-[state=on]:shadow-(--shadow-inset-pressed) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent aria-pressed:border-selected-border data-[state=on]:border-selected-border\",\n      },\n      size: {\n        default: \"h-8 min-w-8 px-2\",\n        xs: \"h-6 min-w-6 rounded-[min(var(--radius-md),10px)] px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]\",\n        lg: \"h-9 min-w-9 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n"],"names":["toggleVariants","cva","Toggle","className","variant","size","props","jsx","TogglePrimitive","cn"],"mappings":"+MAMMA,EAAiBC,EAAAA,IACrB,0oBACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,iBACT,QACE,+HAAA,EAEJ,KAAM,CACJ,QAAS,mBACT,GAAI,uGACJ,GAAI,wEACJ,GAAI,oBAAA,CACN,EAEF,gBAAiB,CACf,QAAS,UACT,KAAM,SAAA,CACR,CAEJ,EAEA,SAASC,EAAO,CACd,UAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,UACP,GAAGC,CACL,EACuC,CACrC,OACEC,EAAAA,IAACC,EAAAA,OAAgB,KAAhB,CACC,YAAU,SACV,UAAWC,EAAAA,GAAGT,EAAe,CAAE,QAAAI,EAAS,KAAAC,EAAM,UAAAF,CAAA,CAAW,CAAC,EACzD,GAAGG,CAAA,CAAA,CAGV"}

package/dist/ui/toggle.js

@@ -1,4 +1,4 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { cva as o } from "class-variance-authority";
 import { Toggle as n } from "radix-ui";
 import { cn as d } from "../lib/utils.js";
@@ -12,6 +12,7 @@ const i = o(
       },
       size: {
         default: "h-8 min-w-8 px-2",
+        xs: "h-6 min-w-6 rounded-[min(var(--radius-md),10px)] px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3",
         sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
         lg: "h-9 min-w-9 px-2.5"
       }
@@ -25,15 +26,15 @@ const i = o(
 function p({
   className: e,
   variant: t = "default",
-  size: a = "default",
-  ...r
+  size: s = "default",
+  ...a
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ r(
     n.Root,
     {
       "data-slot": "toggle",
-      className: d(i({ variant: t, size: a, className: e })),
-      ...r
+      className: d(i({ variant: t, size: s, className: e })),
+      ...a
     }
   );
 }