@boxcustodia/library 2.0.0-alpha.27 → 2.0.0-alpha.28

package/dist/components/combobox/combobox.cjs.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("@base-ui/react/combobox"),W=require("@base-ui/react/field"),h=require("lucide-react"),A=require("react"),_=require("../input/input.cjs.js"),H=require("../field/field.cjs.js"),B=require("../../hooks/internal/use-isomorphic-layout-effect.cjs.js"),b=require("../../lib/cn.cjs.js"),X=require("../scroll-area/scroll-area.cjs.js");function U(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(e,s,n.get?n:{enumerable:!0,get:()=>o[s]})}}return e.default=o,Object.freeze(e)}const m=U(A),p=m.createContext({chipsRef:null,multiple:!1});function S({...o}){const e=m.useRef(null);return t.jsx(p.Provider,{value:{chipsRef:e,multiple:!!o.multiple},children:t.jsx(r.Combobox.Root,{...o})})}function R({className:o,...e}){return t.jsx(r.Combobox.Input,{className:b.cn("min-w-12 flex-1 text-base outline-none placeholder:text-muted-foreground sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",o),"data-slot":"combobox-chips-input",...e})}function P({className:o,showTrigger:e=!0,showClear:s=!1,startAddon:n,triggerProps:a,clearProps:i,...l}){return t.jsxs(r.Combobox.InputGroup,{className:"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64","data-slot":"combobox-input-group",children:[n&&t.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5","data-slot":"combobox-start-addon",children:n}),t.jsx(r.Combobox.Input,{className:b.cn(n&&"*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]","pr-6",o),"data-slot":"combobox-input",render:c=>t.jsx(_.Input,{className:"has-disabled:opacity-100",nativeInput:!0,...c}),...l}),t.jsx(y,{showTrigger:e,showClear:s,triggerProps:a,clearProps:i})]})}function T({className:o,children:e,...s}){return t.jsx(r.Combobox.Trigger,{className:o,"data-slot":"combobox-trigger",...s,children:e})}function Q({className:o,placeholder:e,children:s,showClear:n,clearProps:a,...i}){const l=t.jsx(r.Combobox.Trigger,{className:b.cn("relative flex w-full items-center rounded-md border border-input bg-background px-3 py-2 pe-9 text-sm outline-none transition-shadow","focus-visible:border-ring","aria-invalid:border-error focus-visible:aria-invalid:ring-error/20","data-disabled:cursor-not-allowed data-disabled:opacity-50","data-placeholder:text-muted-foreground",o),"data-slot":"combobox-select-trigger",...i,children:s??t.jsx(r.Combobox.Value,{placeholder:e})});return n?t.jsxs("div",{className:"relative w-full text-foreground has-disabled:opacity-64","data-slot":"combobox-select-trigger-group",children:[l,t.jsx(y,{showTrigger:!0,showClear:!0,clearProps:a})]}):t.jsx(r.Combobox.Trigger,{className:b.cn("relative flex w-full items-center rounded-md border border-input bg-background px-3 py-2 pe-9 text-sm outline-none transition-shadow","focus-visible:border-ring","aria-invalid:border-error focus-visible:aria-invalid:ring-error/20","data-disabled:cursor-not-allowed data-disabled:opacity-50","data-placeholder:text-muted-foreground",o),"data-slot":"combobox-select-trigger",...i,children:s??t.jsxs(t.Fragment,{children:[t.jsx(r.Combobox.Value,{placeholder:e}),t.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute end-0.5 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center text-muted-foreground opacity-80 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",children:t.jsx(h.ChevronsUpDownIcon,{})})]})})}function $({className:o,...e}){return t.jsx("div",{className:"border-b p-2","data-slot":"combobox-search-input-wrapper",children:t.jsx(r.Combobox.Input,{className:b.cn("flex h-9 w-full rounded-md bg-transparent text-base placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-64 sm:h-8 sm:text-sm",o),autoComplete:"off","data-slot":"combobox-search-input",...e})})}function k({className:o,children:e,side:s="bottom",sideOffset:n=4,alignOffset:a,align:i="start",anchor:l,portalProps:c,...u}){const{chipsRef:d}=m.useContext(p),g=l??d;return t.jsx(r.Combobox.Portal,{...c,children:t.jsx(r.Combobox.Positioner,{align:i,alignOffset:a,anchor:g,className:"z-50 select-none","data-slot":"combobox-positioner",side:s,sideOffset:n,children:t.jsx(r.Combobox.Popup,{className:b.cn("relative flex max-h-[min(var(--available-height),23rem)] min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) flex-1 flex-col rounded-lg border bg-popover not-dark:bg-clip-padding text-foreground shadow-lg/5","before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]","duration-100 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","data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",o),"data-slot":"combobox-popup",...u,children:e})})})}function L({className:o,children:e,...s}){return t.jsxs(r.Combobox.Item,{className:b.cn("flex justify-between min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 px-2 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",o),"data-slot":"combobox-item",...s,children:[e,t.jsx(r.Combobox.ItemIndicator,{className:"col-end-1",children:t.jsx("svg",{"aria-hidden":"true",fill:"none",height:"24",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M5.252 12.7 10.2 18.63 18.748 5.37"})})})]})}function J({className:o,...e}){return t.jsx(r.Combobox.Separator,{className:b.cn("mx-2 my-1 h-px bg-border last:hidden",o),"data-slot":"combobox-separator",...e})}function K({className:o,...e}){return t.jsx(r.Combobox.Group,{className:b.cn("[[role=group]+&]:mt-1.5",o),"data-slot":"combobox-group",...e})}function Y({className:o,...e}){return t.jsx(r.Combobox.GroupLabel,{className:b.cn("px-2 py-1.5 font-medium text-muted-foreground text-xs",o),"data-slot":"combobox-group-label",...e})}function O({className:o,...e}){return t.jsx(r.Combobox.Empty,{className:b.cn("not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm",o),"data-slot":"combobox-empty",...e})}function Z({className:o,...e}){return t.jsx(r.Combobox.Row,{className:o,"data-slot":"combobox-row",...e})}function G({...o}){return t.jsx(r.Combobox.Value,{"data-slot":"combobox-value",...o})}function q({className:o,...e}){return t.jsx(X.ScrollArea,{scrollbarGutter:!0,scrollFade:!0,children:t.jsx(r.Combobox.List,{className:b.cn("not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3",o),"data-slot":"combobox-list",...e})})}function E({className:o,...e}){return t.jsx(r.Combobox.Clear,{className:o,"data-slot":"combobox-clear",...e})}const z="absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";function y({showTrigger:o=!0,showClear:e=!1,triggerProps:s,clearProps:n}){return!o&&!e?null:t.jsxs("div",{className:"text-muted-foreground hover:text-foreground transition-colors",children:[o&&t.jsx(T,{className:b.cn(z,"text-muted-foreground has-[+[data-slot=combobox-clear]]:hidden"),...s,children:t.jsx(r.Combobox.Icon,{"data-slot":"combobox-icon",children:t.jsx(h.ChevronsUpDownIcon,{})})}),e&&t.jsx(E,{className:z,...n,children:t.jsx(h.XIcon,{})})]})}function oo({className:o,...e}){return t.jsx(r.Combobox.Status,{className:b.cn("px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0",o),"data-slot":"combobox-status",...e})}function eo(o){return t.jsx(r.Combobox.Collection,{"data-slot":"combobox-collection",...o})}function F({className:o,children:e,startAddon:s,...n}){const{chipsRef:a}=m.useContext(p),i=H.useIsInsideFieldRoot(),l=c=>t.jsxs(r.Combobox.Chips,{"aria-invalid":c,className:b.cn(_.inputBaseClasses,"relative inline-flex pr-6 w-full flex-wrap gap-1","placeholder:text-muted-foreground","focus-within:border-ring","aria-invalid:border-error focus-within:aria-invalid:ring-error/20","has-disabled:cursor-not-allowed has-disabled:opacity-50",o),"data-slot":"combobox-chips",ref:a,...n,children:[s&&t.jsx("div",{"aria-hidden":"true",className:"flex shrink-0 items-center ps-2 opacity-80 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5","data-slot":"combobox-start-addon",children:s}),e]});return i?t.jsx(W.Field.Validity,{children:({validity:c})=>l(c.valid===!1?!0:void 0)}):l(void 0)}function V({children:o,removeProps:e,...s}){return t.jsxs(r.Combobox.Chip,{className:"flex my-auto items-center pl-1 rounded-[calc(var(--radius-md)-1px)] bg-accent font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 h-6","data-slot":"combobox-chip",...s,children:[o,t.jsx(D,{...e})]})}function D(o){return t.jsx(r.Combobox.ChipRemove,{"aria-label":"Quitar",className:"h-full shrink-0 cursor-pointer px-1 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5","data-slot":"combobox-chip-remove",...o,children:t.jsx(h.XIcon,{})})}const j=4,to=24,so=36,ro=68;function I(o,e){const s=o-to-so;let n=0,a=0;for(let i=0;i<e.length;i++){const l=e[i],c=i<e.length-1;if(n+(i>0?j:0)+l+(c?j+ro:0)>s)break;n+=(i>0?j:0)+l,a++}return a}function no(o,e){const[s,n]=m.useState(null),a=m.useRef([]),i=s===null||s.items!==o;return B.useIsomorphicLayoutEffect(()=>{if(!i)return;const l=e?.current;if(!l)return;const c=l.querySelectorAll('[data-slot="combobox-chip"]');a.current=Array.from(c).map(d=>d.offsetWidth);const u=I(l.clientWidth,a.current);n({items:o,visible:u})},[i,o,e]),m.useEffect(()=>{const l=e?.current;if(!l)return;const c=new ResizeObserver(()=>{if(!a.current.length)return;const u=I(l.clientWidth,a.current);n(d=>d?{...d,visible:u}:null)});return c.observe(l),()=>c.disconnect()},[e]),{visibleCount:s?.visible??o,isMeasuring:i}}function io({value:o,getLabel:e,getId:s}){const{chipsRef:n}=m.useContext(p),{visibleCount:a,isMeasuring:i}=no(o.length,n),l=i?o:o.slice(0,a),c=i?0:o.length-a;return t.jsxs(t.Fragment,{children:[l.map(u=>t.jsx(V,{"aria-label":e(u),children:e(u)},s(u))),c>0&&t.jsxs("span",{className:"flex items-center whitespace-nowrap px-1 text-sm text-muted-foreground",children:["+",c," más"]})]})}function ao(o){if(o==null)return"";if(typeof o=="string"||typeof o=="number")return String(o);if(typeof o=="object"){const e=o;if("label"in e)return String(e.label);if("name"in e)return String(e.name);if("title"in e)return String(e.title)}return String(o)}function lo(o){if(o==null)return"";if(typeof o=="string"||typeof o=="number")return String(o);if(typeof o=="object"){const e=o;if("id"in e)return String(e.id);if("value"in e)return String(e.value)}return String(o)}function co({placeholder:o,showClear:e,startAddon:s,className:n}){return t.jsx(P,{className:n,placeholder:o,showClear:e,startAddon:s})}function bo({getLabel:o,getId:e,showClear:s,startAddon:n,className:a}){return t.jsxs(F,{className:a,startAddon:n,children:[t.jsx(G,{children:i=>t.jsx(io,{value:i,getLabel:o,getId:e})}),t.jsx(y,{showTrigger:!s,showClear:s})]})}function uo(o){const{items:e,getLabel:s,getId:n,renderItem:a,placeholder:i,emptyText:l="Sin resultados.",multiple:c,onValueChange:u,value:d,defaultValue:g,startAddon:w,classNames:x,showClear:N=!0,...M}=o,C=s??ao,v=n??lo;return t.jsxs(S,{items:e,itemToStringLabel:C,itemToStringValue:v,multiple:c,onValueChange:u,value:d,defaultValue:g,autoHighlight:!0,loopFocus:!0,...M,children:[c?t.jsx(bo,{getLabel:C,getId:v,showClear:N,startAddon:w,className:x?.chips}):t.jsx(co,{placeholder:i,showClear:N,startAddon:w,className:x?.input}),t.jsxs(k,{className:x?.popup,children:[c&&t.jsx("div",{className:"border-b p-2","data-slot":"combobox-chips-input-wrapper",children:t.jsx(R,{className:x?.chipsInput,placeholder:i})}),t.jsx(O,{className:x?.empty,children:l}),t.jsx(q,{className:x?.list,children:f=>t.jsx(L,{value:f,className:x?.item,children:a?a(f):C(f)},v(f))})]})]})}const mo=r.Combobox.useFilter;Object.defineProperty(exports,"ComboboxPrimitive",{enumerable:!0,get:()=>r.Combobox});exports.Combobox=uo;exports.ComboboxChip=V;exports.ComboboxChipRemove=D;exports.ComboboxChips=F;exports.ComboboxChipsInput=R;exports.ComboboxClear=E;exports.ComboboxCollection=eo;exports.ComboboxContext=p;exports.ComboboxEmpty=O;exports.ComboboxGroup=K;exports.ComboboxGroupLabel=Y;exports.ComboboxInput=P;exports.ComboboxItem=L;exports.ComboboxList=q;exports.ComboboxPopup=k;exports.ComboboxRoot=S;exports.ComboboxRow=Z;exports.ComboboxSearchInput=$;exports.ComboboxSelectTrigger=Q;exports.ComboboxSeparator=J;exports.ComboboxStatus=oo;exports.ComboboxTrigger=T;exports.ComboboxValue=G;exports.useComboboxFilter=mo;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@base-ui/react/combobox"),A=require("@base-ui/react/field"),C=require("lucide-react"),H=require("react"),_=require("../input/input.cjs.js"),B=require("../field/field.cjs.js"),X=require("../../hooks/internal/use-isomorphic-layout-effect.cjs.js"),u=require("../../lib/cn.cjs.js"),U=require("../scroll-area/scroll-area.cjs.js");function Q(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>o[r]})}}return e.default=o,Object.freeze(e)}const x=Q(H),h=x.createContext({chipsRef:null,multiple:!1});function S({...o}){const e=x.useRef(null);return t.jsx(h.Provider,{value:{chipsRef:e,multiple:!!o.multiple},children:t.jsx(s.Combobox.Root,{...o})})}function R({className:o,...e}){return t.jsx(s.Combobox.Input,{className:u.cn("min-w-12 flex-1 text-base outline-none placeholder:text-muted-foreground sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",o),"data-slot":"combobox-chips-input",...e})}function P({className:o,showTrigger:e=!0,showClear:r=!1,startAddon:n,triggerProps:a,clearProps:i,...l}){return t.jsxs(s.Combobox.InputGroup,{className:"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64","data-slot":"combobox-input-group",children:[n&&t.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5","data-slot":"combobox-start-addon",children:n}),t.jsx(s.Combobox.Input,{className:u.cn(n&&"*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]","pr-6",o),"data-slot":"combobox-input",render:c=>t.jsx(_.Input,{className:"has-disabled:opacity-100",nativeInput:!0,...c}),...l}),t.jsx(N,{showTrigger:e,showClear:r,triggerProps:a,clearProps:i})]})}function T({className:o,children:e,...r}){return t.jsx(s.Combobox.Trigger,{className:o,"data-slot":"combobox-trigger",...r,children:e})}function $({className:o,placeholder:e,children:r,showClear:n,clearProps:a,...i}){const l=t.jsx(s.Combobox.Trigger,{className:u.cn("relative flex w-full items-center rounded-md border border-input bg-background px-3 py-2 pe-9 text-sm outline-none transition-shadow","focus-visible:border-ring","aria-invalid:border-error focus-visible:aria-invalid:ring-error/20","data-disabled:cursor-not-allowed data-disabled:opacity-50","data-placeholder:text-muted-foreground",o),"data-slot":"combobox-select-trigger",...i,children:r??t.jsx(s.Combobox.Value,{placeholder:e})});return n?t.jsxs("div",{className:"relative w-full text-foreground has-disabled:opacity-64","data-slot":"combobox-select-trigger-group",children:[l,t.jsx(N,{showTrigger:!0,showClear:!0,clearProps:a})]}):t.jsx(s.Combobox.Trigger,{className:u.cn("relative flex w-full items-center rounded-md border border-input bg-background px-3 py-2 pe-9 text-sm outline-none transition-shadow","focus-visible:border-ring","aria-invalid:border-error focus-visible:aria-invalid:ring-error/20","data-disabled:cursor-not-allowed data-disabled:opacity-50","data-placeholder:text-muted-foreground",o),"data-slot":"combobox-select-trigger",...i,children:r??t.jsxs(t.Fragment,{children:[t.jsx(s.Combobox.Value,{placeholder:e}),t.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute end-0.5 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center text-muted-foreground opacity-80 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",children:t.jsx(C.ChevronsUpDownIcon,{})})]})})}function J({className:o,...e}){return t.jsx("div",{className:"border-b p-2","data-slot":"combobox-search-input-wrapper",children:t.jsx(s.Combobox.Input,{className:u.cn("flex h-9 w-full rounded-md bg-transparent text-base placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-64 sm:h-8 sm:text-sm",o),autoComplete:"off","data-slot":"combobox-search-input",...e})})}function k({className:o,children:e,side:r="bottom",sideOffset:n=4,alignOffset:a,align:i="start",anchor:l,portalProps:c,...b}){const{chipsRef:d}=x.useContext(h),f=l??d;return t.jsx(s.Combobox.Portal,{...c,children:t.jsx(s.Combobox.Positioner,{align:i,alignOffset:a,anchor:f,className:"z-50 select-none","data-slot":"combobox-positioner",side:r,sideOffset:n,children:t.jsx(s.Combobox.Popup,{className:u.cn("relative flex max-h-[min(var(--available-height),23rem)] min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) flex-1 flex-col rounded-lg border bg-popover not-dark:bg-clip-padding text-foreground shadow-lg/5","before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]","duration-100 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","data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",o),"data-slot":"combobox-popup",...b,children:e})})})}function L({className:o,children:e,...r}){return t.jsxs(s.Combobox.Item,{className:u.cn("flex justify-between min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 px-2 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",o),"data-slot":"combobox-item",...r,children:[e,t.jsx(s.Combobox.ItemIndicator,{className:"col-end-1",children:t.jsx("svg",{"aria-hidden":"true",fill:"none",height:"24",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M5.252 12.7 10.2 18.63 18.748 5.37"})})})]})}function K({className:o,...e}){return t.jsx(s.Combobox.Separator,{className:u.cn("mx-2 my-1 h-px bg-border last:hidden",o),"data-slot":"combobox-separator",...e})}function Y({className:o,...e}){return t.jsx(s.Combobox.Group,{className:u.cn("[[role=group]+&]:mt-1.5",o),"data-slot":"combobox-group",...e})}function Z({className:o,...e}){return t.jsx(s.Combobox.GroupLabel,{className:u.cn("px-2 py-1.5 font-medium text-muted-foreground text-xs",o),"data-slot":"combobox-group-label",...e})}function E({className:o,...e}){return t.jsx(s.Combobox.Empty,{className:u.cn("not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm",o),"data-slot":"combobox-empty",...e})}function oo({className:o,...e}){return t.jsx(s.Combobox.Row,{className:o,"data-slot":"combobox-row",...e})}function O({...o}){return t.jsx(s.Combobox.Value,{"data-slot":"combobox-value",...o})}function q({className:o,...e}){return t.jsx(U.ScrollArea,{scrollbarGutter:!0,scrollFade:!0,children:t.jsx(s.Combobox.List,{className:u.cn("not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3",o),"data-slot":"combobox-list",...e})})}function G({className:o,...e}){return t.jsx(s.Combobox.Clear,{className:o,"data-slot":"combobox-clear",...e})}const I="absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";function N({showTrigger:o=!0,showClear:e=!1,triggerProps:r,clearProps:n}){return!o&&!e?null:t.jsxs("div",{className:"text-muted-foreground hover:text-foreground transition-colors",children:[o&&t.jsx(T,{className:u.cn(I,"text-muted-foreground has-[+[data-slot=combobox-clear]]:hidden"),...r,children:t.jsx(s.Combobox.Icon,{"data-slot":"combobox-icon",children:t.jsx(C.ChevronsUpDownIcon,{})})}),e&&t.jsx(G,{className:I,...n,children:t.jsx(C.XIcon,{})})]})}function eo({className:o,...e}){return t.jsx(s.Combobox.Status,{className:u.cn("px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0",o),"data-slot":"combobox-status",...e})}function to(o){return t.jsx(s.Combobox.Collection,{"data-slot":"combobox-collection",...o})}function F({className:o,children:e,startAddon:r,...n}){const{chipsRef:a}=x.useContext(h),i=B.useIsInsideFieldRoot(),l=c=>t.jsxs(s.Combobox.Chips,{"aria-invalid":c,className:u.cn(_.inputBaseClasses,"relative inline-flex pr-6 w-full flex-wrap gap-1","placeholder:text-muted-foreground","focus-within:border-ring","aria-invalid:border-error focus-within:aria-invalid:ring-error/20","has-disabled:cursor-not-allowed has-disabled:opacity-50",o),"data-slot":"combobox-chips",ref:a,...n,children:[r&&t.jsx("div",{"aria-hidden":"true",className:"flex shrink-0 items-center ps-2 opacity-80 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5","data-slot":"combobox-start-addon",children:r}),e]});return i?t.jsx(A.Field.Validity,{children:({validity:c})=>l(c.valid===!1?!0:void 0)}):l(void 0)}function V({children:o,removeProps:e,...r}){return t.jsxs(s.Combobox.Chip,{className:"flex my-auto items-center pl-1 rounded-[calc(var(--radius-md)-1px)] bg-accent font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 h-6","data-slot":"combobox-chip",...r,children:[o,t.jsx(D,{...e})]})}function D(o){return t.jsx(s.Combobox.ChipRemove,{"aria-label":"Quitar",className:"h-full shrink-0 cursor-pointer px-1 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5","data-slot":"combobox-chip-remove",...o,children:t.jsx(C.XIcon,{})})}const y=4,ro=24,so=36,no=68;function w(o,e){const r=o-ro-so;let n=0,a=0;for(let i=0;i<e.length;i++){const l=e[i],c=i<e.length-1;if(n+(i>0?y:0)+l+(c?y+no:0)>r)break;n+=(i>0?y:0)+l,a++}return a}function io(o,e){const[r,n]=x.useState(null),a=x.useRef([]),i=r===null||r.items!==o;return X.useIsomorphicLayoutEffect(()=>{if(!i)return;const l=e?.current;if(!l)return;const c=l.querySelectorAll('[data-slot="combobox-chip"]');a.current=Array.from(c).map(d=>d.offsetWidth);const b=w(l.clientWidth,a.current);n({items:o,visible:b})},[i,o,e]),x.useEffect(()=>{const l=a.current.length>0&&a.current.every(m=>m===0);if(!i&&!l)return;const c=e?.current;if(!c)return;const b=c.querySelectorAll('[data-slot="combobox-chip"]');if(!b.length)return;const d=Array.from(b).map(m=>m.offsetWidth);if(d.every(m=>m===0))return;a.current=d;const f=w(c.clientWidth,d);n(m=>m?{...m,visible:f}:{items:o,visible:f})},[i,o,e]),x.useEffect(()=>{const l=e?.current;if(!l)return;const c=new ResizeObserver(()=>{if(!a.current.length)return;const b=w(l.clientWidth,a.current);n(d=>d?{...d,visible:b}:null)});return c.observe(l),()=>c.disconnect()},[e]),{visibleCount:r?.visible??o,isMeasuring:i}}function ao({value:o,getLabel:e,getId:r}){const{chipsRef:n}=x.useContext(h),{visibleCount:a,isMeasuring:i}=io(o.length,n),l=i?o:o.slice(0,a),c=i?0:o.length-a;return t.jsxs(t.Fragment,{children:[l.map(b=>t.jsx(V,{"aria-label":e(b),children:e(b)},r(b))),c>0&&t.jsxs("span",{className:"flex items-center whitespace-nowrap px-1 text-sm text-muted-foreground",children:["+",c," más"]})]})}function lo(o){if(o==null)return"";if(typeof o=="string"||typeof o=="number")return String(o);if(typeof o=="object"){const e=o;if("label"in e)return String(e.label);if("name"in e)return String(e.name);if("title"in e)return String(e.title)}return String(o)}function co(o){if(o==null)return"";if(typeof o=="string"||typeof o=="number")return String(o);if(typeof o=="object"){const e=o;if("id"in e)return String(e.id);if("value"in e)return String(e.value)}return String(o)}function bo({placeholder:o,showClear:e,startAddon:r,className:n}){return t.jsx(P,{className:n,placeholder:o,showClear:e,startAddon:r})}function uo({getLabel:o,getId:e,showClear:r,startAddon:n,className:a}){return t.jsxs(F,{className:a,startAddon:n,children:[t.jsx(O,{children:i=>t.jsx(ao,{value:i,getLabel:o,getId:e})}),t.jsx(N,{showTrigger:!r,showClear:r})]})}function mo(o){const{items:e,getLabel:r,getId:n,renderItem:a,placeholder:i,emptyText:l="Sin resultados.",multiple:c,onValueChange:b,value:d,defaultValue:f,startAddon:m,classNames:p,showClear:z=!0,searchable:M=!0,...W}=o,v=r??lo,j=n??co;return t.jsxs(S,{items:e,itemToStringLabel:v,itemToStringValue:j,multiple:c,onValueChange:b,value:d,defaultValue:f,autoHighlight:!0,loopFocus:!0,...W,children:[c?t.jsx(uo,{getLabel:v,getId:j,showClear:z,startAddon:m,className:p?.chips}):t.jsx(bo,{placeholder:i,showClear:z,startAddon:m,className:p?.input}),t.jsxs(k,{className:p?.popup,children:[c&&M&&t.jsx("div",{className:"border-b p-2","data-slot":"combobox-chips-input-wrapper",children:t.jsx(R,{className:p?.chipsInput,placeholder:i})}),t.jsx(E,{className:p?.empty,children:l}),t.jsx(q,{className:p?.list,children:g=>t.jsx(L,{value:g,className:p?.item,children:a?a(g):v(g)},j(g))})]})]})}const xo=s.Combobox.useFilter;Object.defineProperty(exports,"ComboboxPrimitive",{enumerable:!0,get:()=>s.Combobox});exports.Combobox=mo;exports.ComboboxChip=V;exports.ComboboxChipRemove=D;exports.ComboboxChips=F;exports.ComboboxChipsInput=R;exports.ComboboxClear=G;exports.ComboboxCollection=to;exports.ComboboxContext=h;exports.ComboboxEmpty=E;exports.ComboboxGroup=Y;exports.ComboboxGroupLabel=Z;exports.ComboboxInput=P;exports.ComboboxItem=L;exports.ComboboxList=q;exports.ComboboxPopup=k;exports.ComboboxRoot=S;exports.ComboboxRow=oo;exports.ComboboxSearchInput=J;exports.ComboboxSelectTrigger=$;exports.ComboboxSeparator=K;exports.ComboboxStatus=eo;exports.ComboboxTrigger=T;exports.ComboboxValue=O;exports.useComboboxFilter=xo;

package/dist/components/combobox/combobox.es.js

@@ -1,33 +1,33 @@
 "use client";
-import { jsx as t, jsxs as m, Fragment as S } from "react/jsx-runtime";
+import { jsx as t, jsxs as b, Fragment as S } from "react/jsx-runtime";
 import { Combobox as n } from "@base-ui/react/combobox";
-import { Combobox as Ie } from "@base-ui/react/combobox";
-import { Field as L } from "@base-ui/react/field";
-import { ChevronsUpDownIcon as R, XIcon as k } from "lucide-react";
-import * as p from "react";
-import { Input as P, inputBaseClasses as j } from "../input/input.es.js";
+import { Combobox as Se } from "@base-ui/react/combobox";
+import { Field as P } from "@base-ui/react/field";
+import { ChevronsUpDownIcon as k, XIcon as R } from "lucide-react";
+import * as f from "react";
+import { Input as E, inputBaseClasses as j } from "../input/input.es.js";
 import { useIsInsideFieldRoot as G } from "../field/field.es.js";
 import { useIsomorphicLayoutEffect as V } from "../../hooks/internal/use-isomorphic-layout-effect.es.js";
-import { cn as d } from "../../lib/cn.es.js";
-import { ScrollArea as E } from "../scroll-area/scroll-area.es.js";
-const h = p.createContext({
+import { cn as u } from "../../lib/cn.es.js";
+import { ScrollArea as F } from "../scroll-area/scroll-area.es.js";
+const v = f.createContext({
   chipsRef: null,
   multiple: !1
 });
-function F({
+function W({
   ...e
 }) {
-  const o = p.useRef(null);
-  return /* @__PURE__ */ t(h.Provider, { value: { chipsRef: o, multiple: !!e.multiple }, children: /* @__PURE__ */ t(n.Root, { ...e }) });
+  const o = f.useRef(null);
+  return /* @__PURE__ */ t(v.Provider, { value: { chipsRef: o, multiple: !!e.multiple }, children: /* @__PURE__ */ t(n.Root, { ...e }) });
 }
-function W({
+function A({
   className: e,
   ...o
 }) {
   return /* @__PURE__ */ t(
     n.Input,
     {
-      className: d(
+      className: u(
         "min-w-12 flex-1 text-base outline-none placeholder:text-muted-foreground sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
         e
       ),
@@ -36,7 +36,7 @@ function W({
     }
   );
 }
-function D({
+function M({
   className: e,
   showTrigger: o = !0,
   showClear: r = !1,
@@ -45,7 +45,7 @@ function D({
   clearProps: s,
   ...l
 }) {
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ b(
     n.InputGroup,
     {
       className: "relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64",
@@ -63,18 +63,18 @@ function D({
         /* @__PURE__ */ t(
           n.Input,
           {
-            className: d(
+            className: u(
               i && "*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]",
               "pr-6",
               e
             ),
             "data-slot": "combobox-input",
-            render: (c) => /* @__PURE__ */ t(P, { className: "has-disabled:opacity-100", nativeInput: !0, ...c }),
+            render: (c) => /* @__PURE__ */ t(E, { className: "has-disabled:opacity-100", nativeInput: !0, ...c }),
             ...l
           }
         ),
         /* @__PURE__ */ t(
-          w,
+          z,
           {
             showTrigger: o,
             showClear: r,
@@ -86,7 +86,7 @@ function D({
     }
   );
 }
-function M({
+function D({
   className: e,
   children: o,
   ...r
@@ -101,7 +101,7 @@ function M({
     }
   );
 }
-function pe({
+function fe({
   className: e,
   placeholder: o,
   children: r,
@@ -112,7 +112,7 @@ function pe({
   const l = /* @__PURE__ */ t(
     n.Trigger,
     {
-      className: d(
+      className: u(
         "relative flex w-full items-center rounded-md border border-input bg-background px-3 py-2 pe-9 text-sm outline-none transition-shadow",
         "focus-visible:border-ring",
         "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
@@ -125,20 +125,20 @@ function pe({
       children: r ?? /* @__PURE__ */ t(n.Value, { placeholder: o })
     }
   );
-  return i ? /* @__PURE__ */ m(
+  return i ? /* @__PURE__ */ b(
     "div",
     {
       className: "relative w-full text-foreground has-disabled:opacity-64",
       "data-slot": "combobox-select-trigger-group",
       children: [
         l,
-        /* @__PURE__ */ t(w, { showTrigger: !0, showClear: !0, clearProps: a })
+        /* @__PURE__ */ t(z, { showTrigger: !0, showClear: !0, clearProps: a })
       ]
     }
   ) : /* @__PURE__ */ t(
     n.Trigger,
     {
-      className: d(
+      className: u(
         "relative flex w-full items-center rounded-md border border-input bg-background px-3 py-2 pe-9 text-sm outline-none transition-shadow",
         "focus-visible:border-ring",
         "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
@@ -148,28 +148,28 @@ function pe({
       ),
       "data-slot": "combobox-select-trigger",
       ...s,
-      children: r ?? /* @__PURE__ */ m(S, { children: [
+      children: r ?? /* @__PURE__ */ b(S, { children: [
         /* @__PURE__ */ t(n.Value, { placeholder: o }),
         /* @__PURE__ */ t(
           "div",
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute end-0.5 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center text-muted-foreground opacity-80 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
-            children: /* @__PURE__ */ t(R, {})
+            children: /* @__PURE__ */ t(k, {})
           }
         )
       ] })
     }
   );
 }
-function fe({
+function he({
   className: e,
   ...o
 }) {
   return /* @__PURE__ */ t("div", { className: "border-b p-2", "data-slot": "combobox-search-input-wrapper", children: /* @__PURE__ */ t(
     n.Input,
     {
-      className: d(
+      className: u(
         "flex h-9 w-full rounded-md bg-transparent text-base placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-64 sm:h-8 sm:text-sm",
         e
       ),
@@ -188,15 +188,15 @@ function O({
   align: s = "start",
   anchor: l,
   portalProps: c,
-  ...u
+  ...d
 }) {
-  const { chipsRef: b } = p.useContext(h), g = l ?? b;
+  const { chipsRef: m } = f.useContext(v), x = l ?? m;
   return /* @__PURE__ */ t(n.Portal, { ...c, children: /* @__PURE__ */ t(
     n.Positioner,
     {
       align: s,
       alignOffset: a,
-      anchor: g,
+      anchor: x,
       className: "z-50 select-none",
       "data-slot": "combobox-positioner",
       side: r,
@@ -204,7 +204,7 @@ function O({
       children: /* @__PURE__ */ t(
         n.Popup,
         {
-          className: d(
+          className: u(
             "relative flex max-h-[min(var(--available-height),23rem)] min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) flex-1 flex-col rounded-lg border bg-popover not-dark:bg-clip-padding text-foreground shadow-lg/5",
             "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
             "duration-100 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",
@@ -212,22 +212,22 @@ function O({
             e
           ),
           "data-slot": "combobox-popup",
-          ...u,
+          ...d,
           children: o
         }
       )
     }
   ) });
 }
-function A({
+function H({
   className: e,
   children: o,
   ...r
 }) {
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ b(
     n.Item,
     {
-      className: d(
+      className: u(
         "flex justify-between min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 px-2 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         e
       ),
@@ -262,33 +262,33 @@ function xe({
   return /* @__PURE__ */ t(
     n.Separator,
     {
-      className: d("mx-2 my-1 h-px bg-border last:hidden", e),
+      className: u("mx-2 my-1 h-px bg-border last:hidden", e),
       "data-slot": "combobox-separator",
       ...o
     }
   );
 }
-function he({
+function ge({
   className: e,
   ...o
 }) {
   return /* @__PURE__ */ t(
     n.Group,
     {
-      className: d("[[role=group]+&]:mt-1.5", e),
+      className: u("[[role=group]+&]:mt-1.5", e),
       "data-slot": "combobox-group",
       ...o
     }
   );
 }
-function ge({
+function ve({
   className: e,
   ...o
 }) {
   return /* @__PURE__ */ t(
     n.GroupLabel,
     {
-      className: d(
+      className: u(
         "px-2 py-1.5 font-medium text-muted-foreground text-xs",
         e
       ),
@@ -297,14 +297,14 @@ function ge({
     }
   );
 }
-function H({
+function B({
   className: e,
   ...o
 }) {
   return /* @__PURE__ */ t(
     n.Empty,
     {
-      className: d(
+      className: u(
         "not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm",
         e
       ),
@@ -313,7 +313,7 @@ function H({
     }
   );
 }
-function ve({
+function Ce({
   className: e,
   ...o
 }) {
@@ -326,7 +326,7 @@ function ve({
     }
   );
 }
-function B({
+function q({
   ...e
 }) {
   return /* @__PURE__ */ t(n.Value, { "data-slot": "combobox-value", ...e });
@@ -335,10 +335,10 @@ function X({
   className: e,
   ...o
 }) {
-  return /* @__PURE__ */ t(E, { scrollbarGutter: !0, scrollFade: !0, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(F, { scrollbarGutter: !0, scrollFade: !0, children: /* @__PURE__ */ t(
     n.List,
     {
-      className: d(
+      className: u(
         "not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3",
         e
       ),
@@ -347,7 +347,7 @@ function X({
     }
   ) });
 }
-function q({
+function Q({
   className: e,
   ...o
 }) {
@@ -360,36 +360,36 @@ function q({
     }
   );
 }
-const _ = "absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
-function w({
+const I = "absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+function z({
   showTrigger: e = !0,
   showClear: o = !1,
   triggerProps: r,
   clearProps: i
 }) {
-  return !e && !o ? null : /* @__PURE__ */ m("div", { className: "text-muted-foreground hover:text-foreground transition-colors", children: [
+  return !e && !o ? null : /* @__PURE__ */ b("div", { className: "text-muted-foreground hover:text-foreground transition-colors", children: [
     e && /* @__PURE__ */ t(
-      M,
+      D,
       {
-        className: d(
-          _,
+        className: u(
+          I,
           "text-muted-foreground has-[+[data-slot=combobox-clear]]:hidden"
         ),
         ...r,
-        children: /* @__PURE__ */ t(n.Icon, { "data-slot": "combobox-icon", children: /* @__PURE__ */ t(R, {}) })
+        children: /* @__PURE__ */ t(n.Icon, { "data-slot": "combobox-icon", children: /* @__PURE__ */ t(k, {}) })
       }
     ),
-    o && /* @__PURE__ */ t(q, { className: _, ...i, children: /* @__PURE__ */ t(k, {}) })
+    o && /* @__PURE__ */ t(Q, { className: I, ...i, children: /* @__PURE__ */ t(R, {}) })
   ] });
 }
-function Ce({
+function ye({
   className: e,
   ...o
 }) {
   return /* @__PURE__ */ t(
     n.Status,
     {
-      className: d(
+      className: u(
         "px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0",
         e
       ),
@@ -398,20 +398,20 @@ function Ce({
     }
   );
 }
-function ye(e) {
+function we(e) {
   return /* @__PURE__ */ t(n.Collection, { "data-slot": "combobox-collection", ...e });
 }
-function Q({
+function U({
   className: e,
   children: o,
   startAddon: r,
   ...i
 }) {
-  const { chipsRef: a } = p.useContext(h), s = G(), l = (c) => /* @__PURE__ */ m(
+  const { chipsRef: a } = f.useContext(v), s = G(), l = (c) => /* @__PURE__ */ b(
     n.Chips,
     {
       "aria-invalid": c,
-      className: d(
+      className: u(
         j,
         "relative inline-flex pr-6 w-full flex-wrap gap-1",
         "placeholder:text-muted-foreground",
@@ -437,14 +437,14 @@ function Q({
       ]
     }
   );
-  return s ? /* @__PURE__ */ t(L.Validity, { children: ({ validity: c }) => l(c.valid === !1 ? !0 : void 0) }) : l(void 0);
+  return s ? /* @__PURE__ */ t(P.Validity, { children: ({ validity: c }) => l(c.valid === !1 ? !0 : void 0) }) : l(void 0);
 }
-function U({
+function $({
   children: e,
   removeProps: o,
   ...r
 }) {
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ b(
     n.Chip,
     {
       className: "flex my-auto items-center pl-1 rounded-[calc(var(--radius-md)-1px)] bg-accent font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 h-6",
@@ -452,12 +452,12 @@ function U({
       ...r,
       children: [
         e,
-        /* @__PURE__ */ t($, { ...o })
+        /* @__PURE__ */ t(J, { ...o })
       ]
     }
   );
 }
-function $(e) {
+function J(e) {
   return /* @__PURE__ */ t(
     n.ChipRemove,
     {
@@ -465,66 +465,82 @@ function $(e) {
       className: "h-full shrink-0 cursor-pointer px-1 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
       "data-slot": "combobox-chip-remove",
       ...e,
-      children: /* @__PURE__ */ t(k, {})
+      children: /* @__PURE__ */ t(R, {})
     }
   );
 }
-const y = 4, J = 24, K = 36, Y = 68;
-function I(e, o) {
-  const r = e - J - K;
+const w = 4, K = 24, Y = 36, Z = 68;
+function N(e, o) {
+  const r = e - K - Y;
   let i = 0, a = 0;
   for (let s = 0; s < o.length; s++) {
     const l = o[s], c = s < o.length - 1;
-    if (i + (s > 0 ? y : 0) + l + (c ? y + Y : 0) > r) break;
-    i += (s > 0 ? y : 0) + l, a++;
+    if (i + (s > 0 ? w : 0) + l + (c ? w + Z : 0) > r) break;
+    i += (s > 0 ? w : 0) + l, a++;
   }
   return a;
 }
-function Z(e, o) {
-  const [r, i] = p.useState(null), a = p.useRef([]), s = r === null || r.items !== e;
+function ee(e, o) {
+  const [r, i] = f.useState(null), a = f.useRef([]), s = r === null || r.items !== e;
   return V(() => {
     if (!s) return;
     const l = o?.current;
     if (!l) return;
     const c = l.querySelectorAll('[data-slot="combobox-chip"]');
     a.current = Array.from(c).map(
-      (b) => b.offsetWidth
+      (m) => m.offsetWidth
     );
-    const u = I(
+    const d = N(
       l.clientWidth,
       a.current
     );
-    i({ items: e, visible: u });
-  }, [s, e, o]), p.useEffect(() => {
+    i({ items: e, visible: d });
+  }, [s, e, o]), f.useEffect(() => {
+    const l = a.current.length > 0 && a.current.every((p) => p === 0);
+    if (!s && !l) return;
+    const c = o?.current;
+    if (!c) return;
+    const d = c.querySelectorAll('[data-slot="combobox-chip"]');
+    if (!d.length) return;
+    const m = Array.from(d).map(
+      (p) => p.offsetWidth
+    );
+    if (m.every((p) => p === 0)) return;
+    a.current = m;
+    const x = N(c.clientWidth, m);
+    i(
+      (p) => p ? { ...p, visible: x } : { items: e, visible: x }
+    );
+  }, [s, e, o]), f.useEffect(() => {
     const l = o?.current;
     if (!l) return;
     const c = new ResizeObserver(() => {
       if (!a.current.length) return;
-      const u = I(
+      const d = N(
         l.clientWidth,
         a.current
       );
-      i((b) => b ? { ...b, visible: u } : null);
+      i((m) => m ? { ...m, visible: d } : null);
     });
     return c.observe(l), () => c.disconnect();
   }, [o]), { visibleCount: r?.visible ?? e, isMeasuring: s };
 }
-function ee({
+function oe({
   value: e,
   getLabel: o,
   getId: r
 }) {
-  const { chipsRef: i } = p.useContext(h), { visibleCount: a, isMeasuring: s } = Z(e.length, i), l = s ? e : e.slice(0, a), c = s ? 0 : e.length - a;
-  return /* @__PURE__ */ m(S, { children: [
-    l.map((u) => /* @__PURE__ */ t(U, { "aria-label": o(u), children: o(u) }, r(u))),
-    c > 0 && /* @__PURE__ */ m("span", { className: "flex items-center whitespace-nowrap px-1 text-sm text-muted-foreground", children: [
+  const { chipsRef: i } = f.useContext(v), { visibleCount: a, isMeasuring: s } = ee(e.length, i), l = s ? e : e.slice(0, a), c = s ? 0 : e.length - a;
+  return /* @__PURE__ */ b(S, { children: [
+    l.map((d) => /* @__PURE__ */ t($, { "aria-label": o(d), children: o(d) }, r(d))),
+    c > 0 && /* @__PURE__ */ b("span", { className: "flex items-center whitespace-nowrap px-1 text-sm text-muted-foreground", children: [
       "+",
       c,
       " más"
     ] })
   ] });
 }
-function oe(e) {
+function te(e) {
   if (e == null) return "";
   if (typeof e == "string" || typeof e == "number") return String(e);
   if (typeof e == "object") {
@@ -535,7 +551,7 @@ function oe(e) {
   }
   return String(e);
 }
-function te(e) {
+function re(e) {
   if (e == null) return "";
   if (typeof e == "string" || typeof e == "number") return String(e);
   if (typeof e == "object") {
@@ -545,14 +561,14 @@ function te(e) {
   }
   return String(e);
 }
-function re({
+function ne({
   placeholder: e,
   showClear: o,
   startAddon: r,
   className: i
 }) {
   return /* @__PURE__ */ t(
-    D,
+    M,
     {
       className: i,
       placeholder: e,
@@ -561,26 +577,26 @@ function re({
     }
   );
 }
-function ne({
+function se({
   getLabel: e,
   getId: o,
   showClear: r,
   startAddon: i,
   className: a
 }) {
-  return /* @__PURE__ */ m(Q, { className: a, startAddon: i, children: [
-    /* @__PURE__ */ t(B, { children: (s) => /* @__PURE__ */ t(
-      ee,
+  return /* @__PURE__ */ b(U, { className: a, startAddon: i, children: [
+    /* @__PURE__ */ t(q, { children: (s) => /* @__PURE__ */ t(
+      oe,
       {
         value: s,
         getLabel: e,
         getId: o
       }
     ) }),
-    /* @__PURE__ */ t(w, { showTrigger: !r, showClear: r })
+    /* @__PURE__ */ t(z, { showTrigger: !r, showClear: r })
   ] });
 }
-function we(e) {
+function Ne(e) {
   const {
     items: o,
     getLabel: r,
@@ -589,101 +605,102 @@ function we(e) {
     placeholder: s,
     emptyText: l = "Sin resultados.",
     multiple: c,
-    onValueChange: u,
-    value: b,
-    defaultValue: g,
-    startAddon: N,
-    classNames: f,
-    showClear: z = !0,
-    ...T
-  } = e, v = r ?? oe, C = i ?? te;
-  return /* @__PURE__ */ m(
-    F,
+    onValueChange: d,
+    value: m,
+    defaultValue: x,
+    startAddon: p,
+    classNames: h,
+    showClear: _ = !0,
+    searchable: T = !0,
+    ...L
+  } = e, C = r ?? te, y = i ?? re;
+  return /* @__PURE__ */ b(
+    W,
     {
       items: o,
-      itemToStringLabel: v,
-      itemToStringValue: C,
+      itemToStringLabel: C,
+      itemToStringValue: y,
       multiple: c,
-      onValueChange: u,
-      value: b,
-      defaultValue: g,
+      onValueChange: d,
+      value: m,
+      defaultValue: x,
       autoHighlight: !0,
       loopFocus: !0,
-      ...T,
+      ...L,
       children: [
         c ? /* @__PURE__ */ t(
-          ne,
+          se,
           {
-            getLabel: v,
-            getId: C,
-            showClear: z,
-            startAddon: N,
-            className: f?.chips
+            getLabel: C,
+            getId: y,
+            showClear: _,
+            startAddon: p,
+            className: h?.chips
           }
         ) : /* @__PURE__ */ t(
-          re,
+          ne,
           {
             placeholder: s,
-            showClear: z,
-            startAddon: N,
-            className: f?.input
+            showClear: _,
+            startAddon: p,
+            className: h?.input
           }
         ),
-        /* @__PURE__ */ m(O, { className: f?.popup, children: [
-          c && /* @__PURE__ */ t(
+        /* @__PURE__ */ b(O, { className: h?.popup, children: [
+          c && T && /* @__PURE__ */ t(
             "div",
             {
               className: "border-b p-2",
               "data-slot": "combobox-chips-input-wrapper",
               children: /* @__PURE__ */ t(
-                W,
+                A,
                 {
-                  className: f?.chipsInput,
+                  className: h?.chipsInput,
                   placeholder: s
                 }
               )
             }
           ),
-          /* @__PURE__ */ t(H, { className: f?.empty, children: l }),
-          /* @__PURE__ */ t(X, { className: f?.list, children: (x) => /* @__PURE__ */ t(
-            A,
+          /* @__PURE__ */ t(B, { className: h?.empty, children: l }),
+          /* @__PURE__ */ t(X, { className: h?.list, children: (g) => /* @__PURE__ */ t(
+            H,
             {
-              value: x,
-              className: f?.item,
-              children: a ? a(x) : v(x)
+              value: g,
+              className: h?.item,
+              children: a ? a(g) : C(g)
             },
-            C(x)
+            y(g)
           ) })
         ] })
       ]
     }
   );
 }
-const Ne = n.useFilter;
+const ze = n.useFilter;
 export {
-  we as Combobox,
-  U as ComboboxChip,
-  $ as ComboboxChipRemove,
-  Q as ComboboxChips,
-  W as ComboboxChipsInput,
-  q as ComboboxClear,
-  ye as ComboboxCollection,
-  h as ComboboxContext,
-  H as ComboboxEmpty,
-  he as ComboboxGroup,
-  ge as ComboboxGroupLabel,
-  D as ComboboxInput,
-  A as ComboboxItem,
+  Ne as Combobox,
+  $ as ComboboxChip,
+  J as ComboboxChipRemove,
+  U as ComboboxChips,
+  A as ComboboxChipsInput,
+  Q as ComboboxClear,
+  we as ComboboxCollection,
+  v as ComboboxContext,
+  B as ComboboxEmpty,
+  ge as ComboboxGroup,
+  ve as ComboboxGroupLabel,
+  M as ComboboxInput,
+  H as ComboboxItem,
   X as ComboboxList,
   O as ComboboxPopup,
-  Ie as ComboboxPrimitive,
-  F as ComboboxRoot,
-  ve as ComboboxRow,
-  fe as ComboboxSearchInput,
-  pe as ComboboxSelectTrigger,
+  Se as ComboboxPrimitive,
+  W as ComboboxRoot,
+  Ce as ComboboxRow,
+  he as ComboboxSearchInput,
+  fe as ComboboxSelectTrigger,
   xe as ComboboxSeparator,
-  Ce as ComboboxStatus,
-  M as ComboboxTrigger,
-  B as ComboboxValue,
-  Ne as useComboboxFilter
+  ye as ComboboxStatus,
+  D as ComboboxTrigger,
+  q as ComboboxValue,
+  ze as useComboboxFilter
 };

package/dist/src/components/combobox/combobox.d.ts

@@ -63,6 +63,8 @@ type ComboboxBaseProps<TItem = unknown> = Omit<ComboboxPrimitive.Root.Props<TIte
     /** Icon or element displayed before the input text (single mode) or chips (multiple mode). */
     startAddon?: React.ReactNode;
     showClear?: boolean;
+    /** When false, hides the search input inside the popup in multiple-select mode. Default true. */
+    searchable?: boolean;
     /** Styles applied to each internal slot. */
     classNames?: {
         /** Text input field in single-select mode. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.27",
+  "version": "2.0.0-alpha.28",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/components/combobox/combobox.stories.tsx

@@ -133,6 +133,36 @@ export const Multiple: Story = {
   ),
 };
 
+/**
+ * Chips overflow into "+N more" when selections exceed the container width.
+ * Resize the container to see the overflow recalculate.
+ */
+export const MultiplePreselected: Story = {
+  render: () => (
+    <Combobox<Item>
+      items={items}
+      multiple
+      defaultValue={items.slice(0, 7)}
+      placeholder="Select fruits…"
+    />
+  ),
+};
+
+/**
+ * `searchable={false}` hides the search input inside the popup. Use this when
+ * the list is short enough that filtering adds no value.
+ */
+export const MultipleWithoutSearch: Story = {
+  render: () => (
+    <Combobox<Item>
+      items={items.slice(0, 5)}
+      multiple
+      searchable={false}
+      placeholder="Select fruits…"
+    />
+  ),
+};
+
 interface TechItem {
   label: string;
   value: string;

package/src/components/combobox/combobox.tsx

@@ -621,6 +621,34 @@ function useChipOverflow(
     setStableCount({ items: itemCount, visible });
   }, [isMeasuring, itemCount, containerRef]);
 
+  // Fallback: fires after browser paint. Handles two failure modes of the layout effect:
+  // 1. container null on first commit (Base UI CompositeList chip registration races our effect)
+  // 2. chips measured with offsetWidth=0 before the browser has done a layout pass
+  React.useEffect(() => {
+    const hasBadMeasurement =
+      chipWidthsRef.current.length > 0 &&
+      chipWidthsRef.current.every((w) => w === 0);
+
+    if (!isMeasuring && !hasBadMeasurement) return;
+
+    const container = containerRef?.current as HTMLElement | null;
+    if (!container) return;
+
+    const chipEls = container.querySelectorAll('[data-slot="combobox-chip"]');
+    if (!chipEls.length) return;
+
+    const widths = Array.from(chipEls).map(
+      (el) => (el as HTMLElement).offsetWidth,
+    );
+    if (widths.every((w) => w === 0)) return;
+
+    chipWidthsRef.current = widths;
+    const visible = calculateChipVisible(container.clientWidth, widths);
+    setStableCount((prev) =>
+      prev ? { ...prev, visible } : { items: itemCount, visible },
+    );
+  }, [isMeasuring, itemCount, containerRef]);
+
   React.useEffect(() => {
     const container = containerRef?.current as HTMLElement | null;
     if (!container) return;
@@ -771,6 +799,8 @@ type ComboboxBaseProps<TItem = unknown> = Omit<
   /** Icon or element displayed before the input text (single mode) or chips (multiple mode). */
   startAddon?: React.ReactNode;
   showClear?: boolean;
+  /** When false, hides the search input inside the popup in multiple-select mode. Default true. */
+  searchable?: boolean;
   /** Styles applied to each internal slot. */
   classNames?: {
     /** Text input field in single-select mode. */
@@ -839,6 +869,7 @@ export function Combobox<TItem = unknown>(
     startAddon,
     classNames,
     showClear = true,
+    searchable = true,
     ...rest
   } = allProps as ComboboxBaseProps<TItem> & {
     multiple?: boolean;
@@ -880,7 +911,7 @@ export function Combobox<TItem = unknown>(
         />
       )}
       <ComboboxPopup className={classNames?.popup}>
-        {multiple && (
+        {multiple && searchable && (
           <div
             className="border-b p-2"
             data-slot="combobox-chips-input-wrapper"