@clasing/ui 0.1.125 → 0.1.126

package/dist/components/blocks/date-range-picker.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../jsx-runtime-DUiatUiq.cjs"),$=require("../../label-CbzkBbPT.cjs"),b=require("../../index-DoxiiusW.cjs"),I=require("../../index-C8P6Mn4U.cjs"),a=require("date-fns"),w=require("react"),T=require("react-day-picker"),f=require("../../style-CA5976Oh.cjs"),P=require("../../icon-component-LY_vGYHZ.cjs"),j=require("../../popover-B8wp2cHF.cjs"),L=I.cva("border-neutral-050 focus-visible:ring-ring-default lg:hover:bg-neutral-000 flex w-full items-center gap-2 border-[0.5px] bg-white text-base whitespace-pre-wrap focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden disabled:border-neutral-100 disabled:bg-neutral-100 disabled:text-neutral-700 lg:disabled:hover:bg-neutral-100",{variants:{size:{sm:"text-label-md h-8 rounded-sm px-2 py-1",md:"text-label-lg h-12 rounded-md px-3 py-1",lg:"text-label-xl h-16 rounded-lg px-4 py-2"},rounded:{default:"",full:"rounded-full"},state:{default:"",selected:"bg-blue-050 focus:blue-800 border-blue-800 font-semibold text-blue-800 active:border-blue-800 lg:hover:bg-blue-100",error:"border-error-main"}},defaultVariants:{size:"md",rounded:"default",state:"default"}}),B=({onChange:d,value:o,options:x})=>e.jsxRuntimeExports.jsx("select",{className:"text-md focus-visible:ring-ring-default h-fit w-fit! cursor-pointer appearance-none rounded-md border-none pr-9 pl-1 font-semibold transition-colors focus:border-0 focus:border-transparent focus:ring-0 focus:ring-transparent focus:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden",onChange:d,value:o,children:x?.map((n,m)=>{const g=n.value===o;return e.jsxRuntimeExports.jsx("option",{value:n.value,disabled:n.disabled,className:b.cn("disabled:hidden",{"bg-blue-050 font-semibold text-blue-800":g}),children:n.label},m)})}),G=({orientation:d="down",size:o=16})=>e.jsxRuntimeExports.jsx(P.IconComponent,{iconName:d==="left"?"IconChevronLeft":"IconChevronRight",stroke:"1.5",size:o}),F=w.forwardRef(({className:d,locale:o="enGB",placeholder:x,label:n,size:m="md",rounded:g="default",disabledDates:N,helperText:C,side:q="bottom",align:M="center",error:c,touched:p,startDate:i,endDate:l,calendarDropdowns:S=!0,onChange:R,minDate:k,maxDate:_,disabled:h=!1,...u},z)=>{const[t,v]=w.useState({from:i?new Date(i):void 0,to:l?new Date(l):void 0}),D=r=>{if(v(r),R){const s={from:r.from?a.format(r.from,"yyyy-MM-dd"):"",to:r.to?a.format(r.to,"yyyy-MM-dd"):""};R({target:{name:u.name,value:s}})}};w.useEffect(()=>{if(i){const r=new Date(i);isNaN(r.getTime())||v(s=>({...s,from:r}))}if(l){const r=new Date(l);isNaN(r.getTime())||v(s=>({...s,to:r}))}},[i,l]);const y=o==="enGB"?f.enGB:o==="enUS"?f.enUS:o==="fr"?f.fr:f.es;return e.jsxRuntimeExports.jsxs("div",{ref:z,className:b.cn("flex flex-col gap-3",d),...u,children:[n&&e.jsxRuntimeExports.jsx($.Label,{htmlFor:u.id,className:b.cn({"text-neutral-700":h}),children:n}),e.jsxRuntimeExports.jsxs(j.Popover,{children:[e.jsxRuntimeExports.jsx(j.PopoverTrigger,{children:e.jsxRuntimeExports.jsxs("button",{type:"button",className:b.cn(L({size:m,rounded:g,state:t.from&&t.to||p&&!c?"selected":c&&p?"error":"default"}),{"text-neutral-800":!t.from&&!t.to}),disabled:h,children:[e.jsxRuntimeExports.jsx(P.IconComponent,{iconName:"IconCalendar",size:20,className:"pointer-events-none"}),t.from&&t.to?`${a.format(t.from,"PPP",{locale:y})} - ${a.format(t.to,"PPP",{locale:y})}`:x||"Select a date range",e.jsxRuntimeExports.jsx("input",{hidden:!0,onChange:()=>null,value:t.from&&t.to?`${a.format(t.from,"yyyy-MM-dd")} to ${a.format(t.to,"yyyy-MM-dd")}`:`${i||""} to ${l||""}`})]})}),e.jsxRuntimeExports.jsx(j.PopoverContent,{side:q,align:M,children:e.jsxRuntimeExports.jsx(T.DayPicker,{mode:"range",captionLayout:S?"dropdown":"label",selected:t,onSelect:D,locale:y,startMonth:k||new Date(1900,0,1),endMonth:_||new Date(2100,11,31),showOutsideDays:!0,disabled:N,className:"p-2",required:!0,classNames:{root:"w-fit text-sm text-center",weekday:"text-muted-foreground font-regular",month_grid:"border-separate",month_caption:"h-9 relative flex items-center w-full",dropdowns:"absolute w-fit items-center justify-center z-10 left-1/2 flex -translate-x-1/2 top-1/2 -translate-y-1/2",button_next:"rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",button_previous:"rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",nav:"w-full h-9 top-0 left-0 absolute flex justify-between items-center gap-2",selected:"bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",today:"bg-blue-050 border-[0.5px] text-blue-800 lg:hover:bg-blue-100",outside:"bg-white text-neutral-200 border-[0.5px] border-neutral-000",day_button:"text-sm h-9 w-9 whitespace-nowrap border-none focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] rounded-2xl",caption_label:"text-neutral-1000 text-base font-semibold leading-none self-center w-full",disabled:"bg-white text-neutral-200 border-[0.5px] border-neutral-000 lg:hover:bg-white!",day:"h-9 w-9 aspect-square text-sm rounded-2xl border-[0.5px] border-neutral-050 lg:hover:bg-blue-050 transition-colors p-0 whitespace-nowrap",range_end:"bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",range_start:"bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",range_middle:"bg-blue-050! border-[0.5px] border-blue-800! text-blue-800! lg:hover:bg-blue-100 transition-colors font-semibold"},components:{Dropdown:B,Chevron:({orientation:r,size:s})=>e.jsxRuntimeExports.jsx(G,{orientation:r,size:s})}})})]}),c&&p?e.jsxRuntimeExports.jsx("span",{"aria-describedby":u.id,"aria-invalid":"true",className:"text-error-main text-label-md -mt-1",children:c}):e.jsxRuntimeExports.jsx("span",{className:b.clsx("text-muted-foreground -mt-1",{"text-neutral-700":h}),"aria-describedby":u.id,children:C})]})}),E=F;E.displayName="DateRangePicker";exports.DateRangePicker=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../jsx-runtime-DUiatUiq.cjs"),$=require("../../label-CbzkBbPT.cjs"),b=require("../../index-DoxiiusW.cjs"),I=require("../../index-C8P6Mn4U.cjs"),a=require("date-fns"),w=require("react"),T=require("react-day-picker"),f=require("../../style-CA5976Oh.cjs"),N=require("../../icon-component-LY_vGYHZ.cjs"),j=require("../../popover-B8wp2cHF.cjs"),L=I.cva("border-neutral-050 focus-visible:ring-ring-default lg:hover:bg-neutral-000 flex w-full items-center gap-2 border-[0.5px] bg-white text-base whitespace-pre-wrap focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden disabled:border-neutral-100 disabled:bg-neutral-100 disabled:text-neutral-700 lg:disabled:hover:bg-neutral-100",{variants:{size:{sm:"text-label-md h-8 rounded-sm px-2 py-1",md:"text-label-lg h-12 rounded-md px-3 py-1",lg:"text-label-xl h-16 rounded-lg px-4 py-2"},rounded:{default:"",full:"rounded-full"},state:{default:"",selected:"bg-blue-050 focus:blue-800 border-blue-800 font-semibold text-blue-800 active:border-blue-800 lg:hover:bg-blue-100",error:"border-error-main"}},defaultVariants:{size:"md",rounded:"default",state:"default"}}),B=({onChange:d,value:o,options:x})=>e.jsxRuntimeExports.jsx("select",{className:"text-md focus-visible:ring-ring-default h-fit w-fit! cursor-pointer appearance-none rounded-md border-none pr-9 pl-1 font-semibold transition-colors focus:border-0 focus:border-transparent focus:ring-0 focus:ring-transparent focus:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden",onChange:d,value:o,children:x?.map((n,m)=>{const g=n.value===o;return e.jsxRuntimeExports.jsx("option",{value:n.value,disabled:n.disabled,className:b.cn("disabled:hidden",{"bg-blue-050 font-semibold text-blue-800":g}),children:n.label},m)})}),G=({orientation:d="down",size:o=16})=>e.jsxRuntimeExports.jsx(N.IconComponent,{iconName:d==="left"?"IconChevronLeft":"IconChevronRight",stroke:"1.5",size:o}),F=w.forwardRef(({className:d,locale:o="enGB",placeholder:x,label:n,size:m="md",rounded:g="default",disabledDates:E,helperText:C,side:q="bottom",align:M="center",error:c,touched:p,startDate:i,endDate:l,calendarDropdowns:S=!0,onChange:R,minDate:k,maxDate:_,disabled:h=!1,...u},z)=>{const[t,v]=w.useState({from:i?new Date(i):void 0,to:l?new Date(l):void 0}),D=r=>{if(v(r),R){const s={from:r.from?a.format(r.from,"yyyy-MM-dd"):"",to:r.to?a.format(r.to,"yyyy-MM-dd"):""};R({target:{name:u.name,value:s}})}};w.useEffect(()=>{if(i){const r=new Date(i);isNaN(r.getTime())||v(s=>({...s,from:r}))}if(l){const r=new Date(l);isNaN(r.getTime())||v(s=>({...s,to:r}))}},[i,l]);const y=o==="enGB"?f.enGB:o==="enUS"?f.enUS:o==="fr"?f.fr:f.es;return e.jsxRuntimeExports.jsxs("div",{ref:z,className:b.cn("flex flex-col gap-3",d),...u,children:[n&&e.jsxRuntimeExports.jsx($.Label,{htmlFor:u.id,className:b.cn({"text-neutral-700":h}),children:n}),e.jsxRuntimeExports.jsxs(j.Popover,{children:[e.jsxRuntimeExports.jsx(j.PopoverTrigger,{children:e.jsxRuntimeExports.jsxs("button",{type:"button",className:b.cn(L({size:m,rounded:g,state:t.from&&t.to||p&&!c?"selected":c&&p?"error":"default"}),{"text-neutral-800":!t.from&&!t.to}),disabled:h,children:[e.jsxRuntimeExports.jsx(N.IconComponent,{iconName:"IconCalendar",size:20,className:"pointer-events-none"}),t.from&&t.to?`${a.format(t.from,"PPP",{locale:y})} - ${a.format(t.to,"PPP",{locale:y})}`:x||"Select a date range",e.jsxRuntimeExports.jsx("input",{hidden:!0,onChange:()=>null,value:t.from&&t.to?`${a.format(t.from,"yyyy-MM-dd")} to ${a.format(t.to,"yyyy-MM-dd")}`:`${i||""} to ${l||""}`})]})}),e.jsxRuntimeExports.jsx(j.PopoverContent,{className:"w-auto overflow-hidden p-0",side:q,align:M,children:e.jsxRuntimeExports.jsx(T.DayPicker,{mode:"range",captionLayout:S?"dropdown":"label",selected:t,onSelect:D,locale:y,startMonth:k||new Date(1900,0,1),endMonth:_||new Date(2100,11,31),showOutsideDays:!0,disabled:E,className:"p-2",required:!0,classNames:{root:"w-fit text-sm text-center",weekday:"text-muted-foreground font-regular",month_grid:"border-separate",month_caption:"h-9 relative flex items-center w-full",dropdowns:"absolute w-fit items-center justify-center z-10 left-1/2 flex -translate-x-1/2 top-1/2 -translate-y-1/2",button_next:"rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",button_previous:"rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",nav:"w-full h-9 top-0 left-0 absolute flex justify-between items-center gap-2",selected:"bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",today:"bg-blue-050 border-[0.5px] text-blue-800 lg:hover:bg-blue-100",outside:"bg-white text-neutral-200 border-[0.5px] border-neutral-000",day_button:"text-sm h-9 w-9 whitespace-nowrap border-none focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] rounded-2xl",caption_label:"text-neutral-1000 text-base font-semibold leading-none self-center w-full",disabled:"bg-white text-neutral-200 border-[0.5px] border-neutral-000 lg:hover:bg-white!",day:"h-9 w-9 aspect-square text-sm rounded-2xl border-[0.5px] border-neutral-050 lg:hover:bg-blue-050 transition-colors p-0 whitespace-nowrap",range_end:"bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",range_start:"bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",range_middle:"bg-blue-050! border-[0.5px] border-blue-800! text-blue-800! lg:hover:bg-blue-100 transition-colors font-semibold"},components:{Dropdown:B,Chevron:({orientation:r,size:s})=>e.jsxRuntimeExports.jsx(G,{orientation:r,size:s})}})})]}),c&&p?e.jsxRuntimeExports.jsx("span",{"aria-describedby":u.id,"aria-invalid":"true",className:"text-error-main text-label-md -mt-1",children:c}):e.jsxRuntimeExports.jsx("span",{className:b.clsx("text-muted-foreground -mt-1",{"text-neutral-700":h}),"aria-describedby":u.id,children:C})]})}),P=F;P.displayName="DateRangePicker";exports.DateRangePicker=P;

package/dist/components/blocks/date-range-picker.es.js

@@ -168,46 +168,54 @@ const A = $(
                 ]
               }
             ) }),
-            /* @__PURE__ */ e.jsx(O, { side: P, align: C, children: /* @__PURE__ */ e.jsx(
-              B,
+            /* @__PURE__ */ e.jsx(
+              O,
               {
-                mode: "range",
-                captionLayout: M ? "dropdown" : "label",
-                selected: t,
-                onSelect: k,
-                locale: v,
-                startMonth: R || new Date(1900, 0, 1),
-                endMonth: S || new Date(2100, 11, 31),
-                showOutsideDays: !0,
-                disabled: j,
-                className: "p-2",
-                required: !0,
-                classNames: {
-                  root: "w-fit text-sm text-center",
-                  weekday: "text-muted-foreground font-regular",
-                  month_grid: "border-separate",
-                  month_caption: "h-9 relative flex items-center w-full",
-                  dropdowns: "absolute w-fit items-center justify-center z-10 left-1/2 flex -translate-x-1/2 top-1/2 -translate-y-1/2",
-                  button_next: "rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",
-                  button_previous: "rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",
-                  nav: "w-full h-9 top-0 left-0 absolute flex justify-between items-center gap-2",
-                  selected: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
-                  today: "bg-blue-050 border-[0.5px] text-blue-800 lg:hover:bg-blue-100",
-                  outside: "bg-white text-neutral-200 border-[0.5px] border-neutral-000",
-                  day_button: "text-sm h-9 w-9 whitespace-nowrap border-none focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] rounded-2xl",
-                  caption_label: "text-neutral-1000 text-base font-semibold leading-none self-center w-full",
-                  disabled: "bg-white text-neutral-200 border-[0.5px] border-neutral-000 lg:hover:bg-white!",
-                  day: "h-9 w-9 aspect-square text-sm rounded-2xl border-[0.5px] border-neutral-050 lg:hover:bg-blue-050 transition-colors p-0 whitespace-nowrap",
-                  range_end: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
-                  range_start: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
-                  range_middle: "bg-blue-050! border-[0.5px] border-blue-800! text-blue-800! lg:hover:bg-blue-100 transition-colors font-semibold"
-                },
-                components: {
-                  Dropdown: H,
-                  Chevron: ({ orientation: o, size: l }) => /* @__PURE__ */ e.jsx(J, { orientation: o, size: l })
-                }
+                className: "w-auto overflow-hidden p-0",
+                side: P,
+                align: C,
+                children: /* @__PURE__ */ e.jsx(
+                  B,
+                  {
+                    mode: "range",
+                    captionLayout: M ? "dropdown" : "label",
+                    selected: t,
+                    onSelect: k,
+                    locale: v,
+                    startMonth: R || new Date(1900, 0, 1),
+                    endMonth: S || new Date(2100, 11, 31),
+                    showOutsideDays: !0,
+                    disabled: j,
+                    className: "p-2",
+                    required: !0,
+                    classNames: {
+                      root: "w-fit text-sm text-center",
+                      weekday: "text-muted-foreground font-regular",
+                      month_grid: "border-separate",
+                      month_caption: "h-9 relative flex items-center w-full",
+                      dropdowns: "absolute w-fit items-center justify-center z-10 left-1/2 flex -translate-x-1/2 top-1/2 -translate-y-1/2",
+                      button_next: "rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",
+                      button_previous: "rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",
+                      nav: "w-full h-9 top-0 left-0 absolute flex justify-between items-center gap-2",
+                      selected: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
+                      today: "bg-blue-050 border-[0.5px] text-blue-800 lg:hover:bg-blue-100",
+                      outside: "bg-white text-neutral-200 border-[0.5px] border-neutral-000",
+                      day_button: "text-sm h-9 w-9 whitespace-nowrap border-none focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] rounded-2xl",
+                      caption_label: "text-neutral-1000 text-base font-semibold leading-none self-center w-full",
+                      disabled: "bg-white text-neutral-200 border-[0.5px] border-neutral-000 lg:hover:bg-white!",
+                      day: "h-9 w-9 aspect-square text-sm rounded-2xl border-[0.5px] border-neutral-050 lg:hover:bg-blue-050 transition-colors p-0 whitespace-nowrap",
+                      range_end: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
+                      range_start: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
+                      range_middle: "bg-blue-050! border-[0.5px] border-blue-800! text-blue-800! lg:hover:bg-blue-100 transition-colors font-semibold"
+                    },
+                    components: {
+                      Dropdown: H,
+                      Chevron: ({ orientation: o, size: l }) => /* @__PURE__ */ e.jsx(J, { orientation: o, size: l })
+                    }
+                  }
+                )
               }
-            ) })
+            )
           ] }),
           b && x ? /* @__PURE__ */ e.jsx(
             "span",

package/dist/components/checkbox.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../jsx-runtime-DUiatUiq.cjs"),c=require("@radix-ui/react-checkbox"),a=require("../index-DoxiiusW.cjs"),s=require("../icon-component-LY_vGYHZ.cjs");function d(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const o=d(c);function u({className:e,...t}){return n.jsxRuntimeExports.jsx(o.Root,{"data-slot":"checkbox",className:a.cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground dark:data-[state=checked]:bg-secondary data-[state=checked]:border-secondary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",e),...t,children:n.jsxRuntimeExports.jsx(o.Indicator,{"data-slot":"checkbox-indicator",className:"flex items-center justify-center text-current transition-none",children:n.jsxRuntimeExports.jsx(s.IconComponent,{iconName:"IconCheck",className:"size-3.5"})})})}exports.Checkbox=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../jsx-runtime-DUiatUiq.cjs"),c=require("@radix-ui/react-checkbox"),a=require("../index-DoxiiusW.cjs"),s=require("../icon-component-LY_vGYHZ.cjs");function d(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const o=d(c);function u({className:e,...t}){return n.jsxRuntimeExports.jsx(o.Root,{"data-slot":"checkbox",className:a.cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground dark:data-[state=checked]:bg-secondary data-[state=checked]:border-secondary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",e),...t,children:n.jsxRuntimeExports.jsx(o.Indicator,{"data-slot":"checkbox-indicator",className:"flex items-center justify-center text-current transition-none",children:n.jsxRuntimeExports.jsx(s.IconComponent,{iconName:"IconCheck",className:"size-3.5"})})})}exports.Checkbox=u;

package/dist/components/checkbox.es.js

@@ -11,7 +11,7 @@ function d({
     {
       "data-slot": "checkbox",
       className: a(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground dark:data-[state=checked]:bg-secondary data-[state=checked]:border-secondary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground dark:data-[state=checked]:bg-secondary data-[state=checked]:border-secondary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         i
       ),
       ...t,

package/dist/components/multi-select.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../jsx-runtime-DUiatUiq.cjs"),M=require("../badge-Czof3oqL.cjs"),x=require("../command-D9M8dk1M.cjs"),y=require("../popover-B8wp2cHF.cjs"),R=require("../index-DoxiiusW.cjs"),r=require("react"),v=require("../icon-component-LY_vGYHZ.cjs"),I=r.createContext(null);function k({children:e,values:n,defaultValues:i,onValuesChange:u}){const[g,m]=r.useState(!1),[h,p]=r.useState(new Set(n??i)),[E,f]=r.useState(new Map);function w(c){const s=l=>{const a=new Set(l);return a.has(c)?a.delete(c):a.add(c),a};p(s),u?.([...s(h)])}const j=r.useCallback((c,s)=>{f(l=>l.get(c)===s?l:new Map(l).set(c,s))},[]);return t.jsxRuntimeExports.jsx(I,{value:{open:g,setOpen:m,selectedValues:n?new Set(n):h,toggleValue:w,items:E,onItemAdded:j},children:t.jsxRuntimeExports.jsx(y.Popover,{open:g,onOpenChange:m,children:e})})}function V({className:e,children:n,...i}){const{open:u}=b();return t.jsxRuntimeExports.jsx(y.PopoverTrigger,{asChild:!0,children:t.jsxRuntimeExports.jsxs("button",{...i,role:i.role??"combobox","aria-expanded":i["aria-expanded"]??u,className:R.cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='text-'])]:text-muted-foreground flex h-auto min-h-9 w-fit items-center justify-between gap-2 overflow-hidden rounded-md border bg-transparent px-3 py-1.5 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",e),children:[n,t.jsxRuntimeExports.jsx(v.IconComponent,{iconName:"IconSelector",className:"size-4 shrink-0 opacity-50"})]})})}function z({placeholder:e,clickToRemove:n=!0,className:i,overflowBehavior:u="wrap-when-open",...g}){const{selectedValues:m,toggleValue:h,items:p,open:E}=b(),[f,w]=r.useState(0),j=r.useRef(null),c=r.useRef(null),s=r.useRef(new Set),l=u==="wrap"||u==="wrap-when-open"&&E;r.useEffect(()=>{l&&s.current.forEach(o=>o.style.removeProperty("display"))},[l]);const a=r.useCallback(()=>{if(j.current==null)return;const o=j.current,d=c.current;d!=null&&(d.style.display="none"),s.current.forEach(S=>S.style.removeProperty("display"));let C=0;for(let S=s.current.size-1;S>=0;S--){const N=[...s.current][S];if(o.scrollWidth<=o.clientWidth)break;C=s.current.size-S,N.style.display="none",d?.style.removeProperty("display")}w(C)},[]);return r.useEffect(()=>{if(j.current==null)return;const o=new ResizeObserver(a);return o.observe(j.current),()=>o.disconnect()},[a]),r.useLayoutEffect(()=>{a()},[m,a]),m.size===0&&e?t.jsxRuntimeExports.jsx("span",{className:"text-muted-foreground font-normal",children:e}):t.jsxRuntimeExports.jsxs("div",{...g,ref:j,className:R.cn("flex w-full gap-1.5 overflow-hidden",l&&"h-full flex-wrap",i),children:[[...m].filter(o=>p.has(o)).map(o=>t.jsxRuntimeExports.jsxs(M.Badge,{ref:d=>{if(d!=null)return s.current.add(d),()=>{s.current.delete(d)}},variant:"outline",className:"group flex items-center gap-1",onClick:n?d=>{d.stopPropagation(),h(o)}:void 0,children:[p.get(o),n&&t.jsxRuntimeExports.jsx(v.IconComponent,{iconName:"IconX",className:"text-muted-foreground group-hover:text-destructive size-2"})]},o)),t.jsxRuntimeExports.jsxs(M.Badge,{style:{display:f>0&&!l?"block":"none"},variant:"outline",ref:c,children:["+",f]})]})}function P({search:e=!0,children:n,...i}){const u=typeof e=="object"?!0:e;return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx("div",{style:{display:"none"},children:t.jsxRuntimeExports.jsx(x.Command,{children:t.jsxRuntimeExports.jsx(x.CommandList,{children:n})})}),t.jsxRuntimeExports.jsx(y.PopoverContent,{className:"min-w-[var(--radix-popover-trigger-width)] p-0",children:t.jsxRuntimeExports.jsxs(x.Command,{...i,children:[u?t.jsxRuntimeExports.jsx(x.CommandInput,{placeholder:typeof e=="object"?e.placeholder:void 0}):t.jsxRuntimeExports.jsx("button",{autoFocus:!0,"aria-hidden":"true",className:"sr-only"}),t.jsxRuntimeExports.jsxs(x.CommandList,{children:[u&&t.jsxRuntimeExports.jsx(x.CommandEmpty,{children:typeof e=="object"?e.emptyMessage:void 0}),n]})]})})]})}function q({value:e,children:n,badgeLabel:i,onSelect:u,...g}){const{toggleValue:m,selectedValues:h,onItemAdded:p}=b(),E=h.has(e);return r.useEffect(()=>{p(e,i??n)},[e,n,p,i]),t.jsxRuntimeExports.jsxs(x.CommandItem,{...g,value:e,onSelect:f=>{m(f),u?.(f)},children:[t.jsxRuntimeExports.jsx(v.IconComponent,{iconName:"IconCheck",className:R.cn("mr-2 size-4",E?"opacity-100":"opacity-0")}),n]})}function O(e){return t.jsxRuntimeExports.jsx(x.CommandGroup,{...e})}function A(e){return t.jsxRuntimeExports.jsx(x.CommandSeparator,{...e})}function b(){const e=r.useContext(I);if(e==null)throw new Error("useMultiSelectContext must be used within a MultiSelectContext");return e}exports.MultiSelect=k;exports.MultiSelectContent=P;exports.MultiSelectGroup=O;exports.MultiSelectItem=q;exports.MultiSelectSeparator=A;exports.MultiSelectTrigger=V;exports.MultiSelectValue=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../jsx-runtime-DUiatUiq.cjs"),M=require("../badge-Czof3oqL.cjs"),x=require("../command-D9M8dk1M.cjs"),b=require("../popover-B8wp2cHF.cjs"),w=require("../index-DoxiiusW.cjs"),s=require("react"),R=require("../icon-component-LY_vGYHZ.cjs"),I=s.createContext(null);function k({children:e,values:n,defaultValues:r,onValuesChange:o}){const[m,p]=s.useState(!1),[h,f]=s.useState(new Set(n??r)),[y,j]=s.useState(new Map);function E(c){const i=l=>{const a=new Set(l);return a.has(c)?a.delete(c):a.add(c),a};f(i),o?.([...i(h)])}const g=s.useCallback((c,i)=>{j(l=>l.get(c)===i?l:new Map(l).set(c,i))},[]);return t.jsxRuntimeExports.jsx(I,{value:{open:m,setOpen:p,selectedValues:n?new Set(n):h,toggleValue:E,items:y,onItemAdded:g},children:t.jsxRuntimeExports.jsx(b.Popover,{open:m,onOpenChange:p,children:e})})}function V({className:e,children:n,size:r="md",...o}){const{open:m}=v();return t.jsxRuntimeExports.jsx(b.PopoverTrigger,{asChild:!0,children:t.jsxRuntimeExports.jsxs("button",{...o,role:o.role??"combobox","aria-expanded":o["aria-expanded"]??m,"data-size":r,className:w.cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 overflow-hidden rounded-md border bg-transparent whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",r==="xs"&&'text-label-sm h-7 px-2 py-1 [&_svg:not([class*="size-"])]:size-3.5',r==="sm"&&"text-label-md h-8 px-2 py-1",r==="md"&&"text-label-lg h-12 px-3 py-1",r==="lg"&&"text-label-xl h-16 px-4 py-2",e),children:[n,t.jsxRuntimeExports.jsx(R.IconComponent,{iconName:"IconSelector",className:"size-4 shrink-0 opacity-50"})]})})}function z({placeholder:e,clickToRemove:n=!0,className:r,overflowBehavior:o="wrap-when-open",...m}){const{selectedValues:p,toggleValue:h,items:f,open:y}=v(),[j,E]=s.useState(0),g=s.useRef(null),c=s.useRef(null),i=s.useRef(new Set),l=o==="wrap"||o==="wrap-when-open"&&y;s.useEffect(()=>{l&&i.current.forEach(u=>u.style.removeProperty("display"))},[l]);const a=s.useCallback(()=>{if(g.current==null)return;const u=g.current,d=c.current;d!=null&&(d.style.display="none"),i.current.forEach(S=>S.style.removeProperty("display"));let C=0;for(let S=i.current.size-1;S>=0;S--){const N=[...i.current][S];if(u.scrollWidth<=u.clientWidth)break;C=i.current.size-S,N.style.display="none",d?.style.removeProperty("display")}E(C)},[]);return s.useEffect(()=>{if(g.current==null)return;const u=new ResizeObserver(a);return u.observe(g.current),()=>u.disconnect()},[a]),s.useLayoutEffect(()=>{a()},[p,a]),p.size===0&&e?t.jsxRuntimeExports.jsx("span",{className:"text-muted-foreground font-normal",children:e}):t.jsxRuntimeExports.jsxs("div",{...m,ref:g,className:w.cn("flex w-full gap-1.5 overflow-hidden min-h-[1.75rem]",l&&"flex-wrap",r),children:[[...p].filter(u=>f.has(u)).map(u=>t.jsxRuntimeExports.jsxs(M.Badge,{ref:d=>{if(d!=null)return i.current.add(d),()=>{i.current.delete(d)}},variant:"outline",className:"group flex items-center gap-1",onClick:n?d=>{d.stopPropagation(),h(u)}:void 0,children:[f.get(u),n&&t.jsxRuntimeExports.jsx(R.IconComponent,{iconName:"IconX",className:"text-muted-foreground group-hover:text-destructive size-2"})]},u)),t.jsxRuntimeExports.jsxs(M.Badge,{style:{display:j>0&&!l?"block":"none"},variant:"outline",ref:c,children:["+",j]})]})}function P({search:e=!0,children:n,...r}){const o=typeof e=="object"?!0:e;return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx("div",{style:{display:"none"},children:t.jsxRuntimeExports.jsx(x.Command,{children:t.jsxRuntimeExports.jsx(x.CommandList,{children:n})})}),t.jsxRuntimeExports.jsx(b.PopoverContent,{className:"min-w-[var(--radix-popover-trigger-width)] p-0",children:t.jsxRuntimeExports.jsxs(x.Command,{...r,children:[o?t.jsxRuntimeExports.jsx(x.CommandInput,{placeholder:typeof e=="object"?e.placeholder:void 0}):t.jsxRuntimeExports.jsx("button",{autoFocus:!0,"aria-hidden":"true",className:"sr-only"}),t.jsxRuntimeExports.jsxs(x.CommandList,{children:[o&&t.jsxRuntimeExports.jsx(x.CommandEmpty,{children:typeof e=="object"?e.emptyMessage:void 0}),n]})]})})]})}function q({value:e,children:n,badgeLabel:r,onSelect:o,...m}){const{toggleValue:p,selectedValues:h,onItemAdded:f}=v(),y=h.has(e);return s.useEffect(()=>{f(e,r??n)},[e,n,f,r]),t.jsxRuntimeExports.jsxs(x.CommandItem,{...m,value:e,onSelect:j=>{p(j),o?.(j)},children:[t.jsxRuntimeExports.jsx(R.IconComponent,{iconName:"IconCheck",className:w.cn("mr-2 size-4",y?"opacity-100":"opacity-0")}),n]})}function O(e){return t.jsxRuntimeExports.jsx(x.CommandGroup,{...e})}function _(e){return t.jsxRuntimeExports.jsx(x.CommandSeparator,{...e})}function v(){const e=s.useContext(I);if(e==null)throw new Error("useMultiSelectContext must be used within a MultiSelectContext");return e}exports.MultiSelect=k;exports.MultiSelectContent=P;exports.MultiSelectGroup=O;exports.MultiSelectItem=q;exports.MultiSelectSeparator=_;exports.MultiSelectTrigger=V;exports.MultiSelectValue=z;

package/dist/components/multi-select.d.ts

@@ -7,9 +7,10 @@ declare function MultiSelect({ children, values, defaultValues, onValuesChange,
     defaultValues?: string[];
     onValuesChange?: (values: string[]) => void;
 }): import("react/jsx-runtime").JSX.Element;
-declare function MultiSelectTrigger({ className, children, ...props }: {
+declare function MultiSelectTrigger({ className, children, size, ...props }: {
     className?: string;
     children?: ReactNode;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
 } & ComponentPropsWithoutRef<typeof Button>): import("react/jsx-runtime").JSX.Element;
 declare function MultiSelectValue({ placeholder, clickToRemove, className, overflowBehavior, ...props }: {
     placeholder?: string;

package/dist/components/multi-select.es.js

@@ -1,59 +1,65 @@
 import { j as t } from "../jsx-runtime-C5mzlN2N.js";
 import { B as I } from "../badge-BnerQ2lF.js";
-import { C as k, f as z, d as O, b as R, c as A, e as _, g as W } from "../command-BGCSJ9vX.js";
+import { C as k, f as E, d as O, b as R, c as _, e as A, g as W } from "../command-BGCSJ9vX.js";
 import { P as F, b as G, c as B } from "../popover-BoDRCUh2.js";
 import { c as S } from "../index-CRiPKpXj.js";
-import { createContext as L, useState as j, useCallback as E, useEffect as b, useRef as v, useLayoutEffect as T, useContext as X } from "react";
+import { createContext as L, useState as y, useCallback as V, useEffect as v, useRef as j, useLayoutEffect as T, useContext as X } from "react";
 import { I as C } from "../icon-component-BZ-4FDV6.js";
-const V = L(null);
+const z = L(null);
 function Y({
   children: e,
   values: n,
-  defaultValues: s,
-  onValuesChange: i
+  defaultValues: r,
+  onValuesChange: o
 }) {
-  const [x, d] = j(!1), [g, m] = j(
-    new Set(n ?? s)
-  ), [w, p] = j(/* @__PURE__ */ new Map());
-  function y(c) {
-    const r = (l) => {
-      const a = new Set(l);
-      return a.has(c) ? a.delete(c) : a.add(c), a;
+  const [d, m] = y(!1), [g, p] = y(
+    new Set(n ?? r)
+  ), [w, f] = y(/* @__PURE__ */ new Map());
+  function b(a) {
+    const s = (l) => {
+      const c = new Set(l);
+      return c.has(a) ? c.delete(a) : c.add(a), c;
     };
-    m(r), i?.([...r(g)]);
+    p(s), o?.([...s(g)]);
   }
-  const f = E((c, r) => {
-    p((l) => l.get(c) === r ? l : new Map(l).set(c, r));
+  const x = V((a, s) => {
+    f((l) => l.get(a) === s ? l : new Map(l).set(a, s));
   }, []);
   return /* @__PURE__ */ t.jsx(
-    V,
+    z,
     {
       value: {
-        open: x,
-        setOpen: d,
+        open: d,
+        setOpen: m,
         selectedValues: n ? new Set(n) : g,
-        toggleValue: y,
+        toggleValue: b,
         items: w,
-        onItemAdded: f
+        onItemAdded: x
       },
-      children: /* @__PURE__ */ t.jsx(F, { open: x, onOpenChange: d, children: e })
+      children: /* @__PURE__ */ t.jsx(F, { open: d, onOpenChange: m, children: e })
     }
   );
 }
 function Z({
   className: e,
   children: n,
-  ...s
+  size: r = "md",
+  ...o
 }) {
-  const { open: i } = M();
+  const { open: d } = M();
   return /* @__PURE__ */ t.jsx(B, { asChild: !0, children: /* @__PURE__ */ t.jsxs(
     "button",
     {
-      ...s,
-      role: s.role ?? "combobox",
-      "aria-expanded": s["aria-expanded"] ?? i,
+      ...o,
+      role: o.role ?? "combobox",
+      "aria-expanded": o["aria-expanded"] ?? d,
+      "data-size": r,
       className: S(
-        "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='text-'])]:text-muted-foreground flex h-auto min-h-9 w-fit items-center justify-between gap-2 overflow-hidden rounded-md border bg-transparent px-3 py-1.5 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 overflow-hidden rounded-md border bg-transparent whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        r === "xs" && 'text-label-sm h-7 px-2 py-1 [&_svg:not([class*="size-"])]:size-3.5',
+        r === "sm" && "text-label-md h-8 px-2 py-1",
+        r === "md" && "text-label-lg h-12 px-3 py-1",
+        r === "lg" && "text-label-xl h-16 px-4 py-2",
         e
       ),
       children: [
@@ -72,60 +78,60 @@ function Z({
 function $({
   placeholder: e,
   clickToRemove: n = !0,
-  className: s,
-  overflowBehavior: i = "wrap-when-open",
-  ...x
+  className: r,
+  overflowBehavior: o = "wrap-when-open",
+  ...d
 }) {
-  const { selectedValues: d, toggleValue: g, items: m, open: w } = M(), [p, y] = j(0), f = v(null), c = v(null), r = v(/* @__PURE__ */ new Set()), l = i === "wrap" || i === "wrap-when-open" && w;
-  b(() => {
-    l && r.current.forEach((o) => o.style.removeProperty("display"));
+  const { selectedValues: m, toggleValue: g, items: p, open: w } = M(), [f, b] = y(0), x = j(null), a = j(null), s = j(/* @__PURE__ */ new Set()), l = o === "wrap" || o === "wrap-when-open" && w;
+  v(() => {
+    l && s.current.forEach((i) => i.style.removeProperty("display"));
   }, [l]);
-  const a = E(() => {
-    if (f.current == null) return;
-    const o = f.current, u = c.current;
-    u != null && (u.style.display = "none"), r.current.forEach((h) => h.style.removeProperty("display"));
+  const c = V(() => {
+    if (x.current == null) return;
+    const i = x.current, u = a.current;
+    u != null && (u.style.display = "none"), s.current.forEach((h) => h.style.removeProperty("display"));
     let N = 0;
-    for (let h = r.current.size - 1; h >= 0; h--) {
-      const P = [...r.current][h];
-      if (o.scrollWidth <= o.clientWidth)
+    for (let h = s.current.size - 1; h >= 0; h--) {
+      const P = [...s.current][h];
+      if (i.scrollWidth <= i.clientWidth)
         break;
-      N = r.current.size - h, P.style.display = "none", u?.style.removeProperty("display");
+      N = s.current.size - h, P.style.display = "none", u?.style.removeProperty("display");
     }
-    y(N);
+    b(N);
   }, []);
-  return b(() => {
-    if (f.current == null) return;
-    const o = new ResizeObserver(a);
-    return o.observe(f.current), () => o.disconnect();
-  }, [a]), T(() => {
-    a();
-  }, [d, a]), d.size === 0 && e ? /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground font-normal", children: e }) : /* @__PURE__ */ t.jsxs(
+  return v(() => {
+    if (x.current == null) return;
+    const i = new ResizeObserver(c);
+    return i.observe(x.current), () => i.disconnect();
+  }, [c]), T(() => {
+    c();
+  }, [m, c]), m.size === 0 && e ? /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground font-normal", children: e }) : /* @__PURE__ */ t.jsxs(
     "div",
     {
-      ...x,
-      ref: f,
+      ...d,
+      ref: x,
       className: S(
-        "flex w-full gap-1.5 overflow-hidden",
-        l && "h-full flex-wrap",
-        s
+        "flex w-full gap-1.5 overflow-hidden min-h-[1.75rem]",
+        l && "flex-wrap",
+        r
       ),
       children: [
-        [...d].filter((o) => m.has(o)).map((o) => /* @__PURE__ */ t.jsxs(
+        [...m].filter((i) => p.has(i)).map((i) => /* @__PURE__ */ t.jsxs(
           I,
           {
             ref: (u) => {
               if (u != null)
-                return r.current.add(u), () => {
-                  r.current.delete(u);
+                return s.current.add(u), () => {
+                  s.current.delete(u);
                 };
             },
             variant: "outline",
             className: "group flex items-center gap-1",
             onClick: n ? (u) => {
-              u.stopPropagation(), g(o);
+              u.stopPropagation(), g(i);
             } : void 0,
             children: [
-              m.get(o),
+              p.get(i),
               n && /* @__PURE__ */ t.jsx(
                 C,
                 {
@@ -135,19 +141,19 @@ function $({
               )
             ]
           },
-          o
+          i
         )),
         /* @__PURE__ */ t.jsxs(
           I,
           {
             style: {
-              display: p > 0 && !l ? "block" : "none"
+              display: f > 0 && !l ? "block" : "none"
             },
             variant: "outline",
-            ref: c,
+            ref: a,
             children: [
               "+",
-              p
+              f
             ]
           }
         )
@@ -158,20 +164,20 @@ function $({
 function ee({
   search: e = !0,
   children: n,
-  ...s
+  ...r
 }) {
-  const i = typeof e == "object" ? !0 : e;
+  const o = typeof e == "object" ? !0 : e;
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(z, { children: n }) }) }),
-    /* @__PURE__ */ t.jsx(G, { className: "min-w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ t.jsxs(k, { ...s, children: [
-      i ? /* @__PURE__ */ t.jsx(
+    /* @__PURE__ */ t.jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(E, { children: n }) }) }),
+    /* @__PURE__ */ t.jsx(G, { className: "min-w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ t.jsxs(k, { ...r, children: [
+      o ? /* @__PURE__ */ t.jsx(
         O,
         {
           placeholder: typeof e == "object" ? e.placeholder : void 0
         }
       ) : /* @__PURE__ */ t.jsx("button", { autoFocus: !0, "aria-hidden": "true", className: "sr-only" }),
-      /* @__PURE__ */ t.jsxs(z, { children: [
-        i && /* @__PURE__ */ t.jsx(R, { children: typeof e == "object" ? e.emptyMessage : void 0 }),
+      /* @__PURE__ */ t.jsxs(E, { children: [
+        o && /* @__PURE__ */ t.jsx(R, { children: typeof e == "object" ? e.emptyMessage : void 0 }),
         n
       ] })
     ] }) })
@@ -180,20 +186,20 @@ function ee({
 function te({
   value: e,
   children: n,
-  badgeLabel: s,
-  onSelect: i,
-  ...x
+  badgeLabel: r,
+  onSelect: o,
+  ...d
 }) {
-  const { toggleValue: d, selectedValues: g, onItemAdded: m } = M(), w = g.has(e);
-  return b(() => {
-    m(e, s ?? n);
-  }, [e, n, m, s]), /* @__PURE__ */ t.jsxs(
-    _,
+  const { toggleValue: m, selectedValues: g, onItemAdded: p } = M(), w = g.has(e);
+  return v(() => {
+    p(e, r ?? n);
+  }, [e, n, p, r]), /* @__PURE__ */ t.jsxs(
+    A,
     {
-      ...x,
+      ...d,
       value: e,
-      onSelect: (p) => {
-        d(p), i?.(p);
+      onSelect: (f) => {
+        m(f), o?.(f);
       },
       children: [
         /* @__PURE__ */ t.jsx(
@@ -209,13 +215,13 @@ function te({
   );
 }
 function ne(e) {
-  return /* @__PURE__ */ t.jsx(A, { ...e });
+  return /* @__PURE__ */ t.jsx(_, { ...e });
 }
 function re(e) {
   return /* @__PURE__ */ t.jsx(W, { ...e });
 }
 function M() {
-  const e = X(V);
+  const e = X(z);
   if (e == null)
     throw new Error(
       "useMultiSelectContext must be used within a MultiSelectContext"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clasing/ui",
-  "version": "0.1.125",
+  "version": "0.1.126",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",