npm - @brycks/core-front - Versions diffs - 0.3.5 → 0.5.0 - Mend

@brycks/core-front 0.3.5 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

package/dist/components/form/MultiSelect/MultiSelect.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),ye=require("react-dom"),be=require("../../../utils/styles.cjs"),d=require("../../../design-system/tokens/motion.cjs"),n=require("../../../design-system/tokens/spacing.cjs"),g=require("../../../design-system/primitives/sizing.cjs"),k=require("../../../design-system/tokens/typography.cjs"),me={sm:{minHeight:g.componentHeights.sm,fontSize:k.fontSizes.base-1,chipHeight:n.spacing[5],padding:g.componentPaddingX.xs,gap:n.spacing[1]},md:{minHeight:g.componentHeights.md,fontSize:k.fontSizes.base,chipHeight:n.spacing[6],padding:g.componentPaddingX.sm,gap:n.spacing[1.5]},lg:{minHeight:g.componentHeights.lg,fontSize:k.fontSizes.md,chipHeight:n.spacing[7],padding:g.componentPaddingX.sm,gap:n.spacing[2]}};function ve(){return r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M4 6l4 4 4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function N(){return r.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M3 3l6 6M9 3l-6 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}function ke(){return r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M3 8l3 3 7-7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}const Y=s.forwardRef(function({options:x,value:w,defaultValue:K=[],onChange:H,placeholder:O="Select options...",size:D="md",maxSelections:z,searchable:P=!0,disabled:b=!1,isInvalid:T=!1,clearable:G=!0,emptyText:U="No options found",closeOnSelect:q=!1,"aria-label":W,"aria-labelledby":_,className:J,testId:Q},S){const[V,Z]=s.useState(K),[a,f]=s.useState(!1),[h,I]=s.useState(""),[c,u]=s.useState(-1),[A,B]=s.useState(!1),j=s.useRef(null),C=s.useRef(null),X=s.useRef(null),i=w!==void 0?w:V,l=me[D],R=s.useMemo(()=>x.filter(e=>i.includes(e.value)),[x,i]),$=s.useMemo(()=>{let e=x.filter(o=>!o.disabled&&(o.label.toLowerCase().includes(h.toLowerCase())||o.description?.toLowerCase().includes(h.toLowerCase())));const t=new Map;return e.forEach(o=>{const y=o.group;t.has(y)||t.set(y,[]),t.get(y).push(o)}),t},[x,h]),m=s.useMemo(()=>{const e=[];return $.forEach(t=>e.push(...t)),e},[$]),p=s.useCallback(e=>{w===void 0&&Z(e),H?.(e)},[w,H]),M=s.useCallback(e=>{if(i.includes(e))p(i.filter(o=>o!==e));else{if(z&&i.length>=z)return;p([...i,e])}q&&f(!1),I(""),C.current?.focus()},[i,z,q,p]),L=s.useCallback((e,t)=>{t?.stopPropagation(),p(i.filter(o=>o!==e))},[i,p]),ee=s.useCallback(e=>{e.stopPropagation(),p([]),C.current?.focus()},[p]),te=s.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),a?u(t=>Math.min(t+1,m.length-1)):(f(!0),u(0));break;case"ArrowUp":e.preventDefault(),a&&u(t=>Math.max(t-1,0));break;case"Enter":e.preventDefault(),a&&c>=0&&m[c]&&M(m[c].value);break;case"Escape":e.preventDefault(),f(!1),u(-1);break;case"Backspace":!h&&i.length>0&&L(i[i.length-1]);break}},[a,c,m,h,i,M,L]);s.useEffect(()=>{if(!a)return;const e=t=>{j.current?.contains(t.target)||(f(!1),u(-1),I(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[a]),s.useEffect(()=>{if(!a||c<0)return;X.current?.querySelectorAll('[role="option"]')?.[c]?.scrollIntoView({block:"nearest"})},[a,c]);const[E,re]=s.useState({top:0,left:0,width:0});s.useEffect(()=>{if(!a||!j.current)return;const e=()=>{const t=j.current.getBoundingClientRect();re({top:t.bottom+window.scrollY+n.spacing[1],left:t.left+window.scrollX,width:t.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[a]);const ne={position:"relative",width:"100%"},se={display:"flex",flexWrap:"wrap",alignItems:"center",gap:l.gap,minHeight:l.minHeight,padding:`${n.spacing[1]}px ${l.padding}px`,paddingRight:n.spacing[10],backgroundColor:b?"var(--brycks-background-muted)":"var(--brycks-background-default)",border:`1px solid ${T?"var(--brycks-error-default)":A?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",transition:`all ${d.durations.fast}ms ${d.easings.easeOut}`,cursor:b?"not-allowed":"pointer",boxShadow:A?"var(--brycks-focus-ring)":void 0},oe={display:"inline-flex",alignItems:"center",gap:n.spacing[1],height:l.chipHeight,padding:`0 ${n.spacing[2]}px`,fontSize:l.fontSize-1,fontWeight:500,color:"var(--brycks-foreground-default)",backgroundColor:"var(--brycks-background-muted)",borderRadius:"var(--brycks-radius-full)",whiteSpace:"nowrap"},ie={display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[4],height:n.spacing[4],marginLeft:n.spacing[.5],marginRight:-n.spacing[1],color:"inherit",opacity:.7,cursor:"pointer",borderRadius:"var(--brycks-radius-full)"},ae={flex:1,minWidth:60,height:l.chipHeight,padding:0,fontSize:l.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none"},le={position:"absolute",right:l.padding,top:"50%",transform:"translateY(-50%)",display:"flex",alignItems:"center",gap:n.spacing[1]},ce={display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[5],height:n.spacing[5],color:"var(--brycks-foreground-muted)",cursor:"pointer",borderRadius:"var(--brycks-radius-sm)",transition:`all ${d.durations.fast}ms ${d.easings.easeOut}`},de={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",transform:a?"rotate(180deg)":"rotate(0)",transition:`transform ${d.durations.fast}ms ${d.easings.easeOut}`,pointerEvents:"none"},ue={position:"absolute",top:E.top,left:E.left,width:E.width,maxHeight:300,overflowY:"auto",backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",zIndex:"var(--brycks-z-dropdown)",padding:n.spacing[1]},pe={padding:`${n.spacing[2]}px ${n.spacing[3]}px ${n.spacing[1]}px`,fontSize:k.fontSizes.xs,fontWeight:600,color:"var(--brycks-foreground-muted)",textTransform:"uppercase",letterSpacing:"0.05em"},ge=(e,t)=>({display:"flex",alignItems:"center",gap:g.componentGap.md,padding:`${n.spacing[2]}px ${n.spacing[3]}px`,fontSize:l.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:"pointer",transition:`background-color ${d.durations.fast}ms ${d.easings.easeOut}`}),fe={padding:`${n.spacing[4]}px ${n.spacing[3]}px`,fontSize:l.fontSize,color:"var(--brycks-foreground-muted)",textAlign:"center"};let F=-1;return r.jsxs("div",{ref:e=>{j.current=e,typeof S=="function"?S(e):S&&(S.current=e)},className:be.cx("brycks-multiselect",`brycks-multiselect--${D}`,J),style:ne,"data-testid":Q,children:[r.jsxs("div",{style:se,onClick:()=>{b||(f(!0),C.current?.focus())},children:[R.map(e=>r.jsxs("span",{style:oe,children:[e.label,r.jsx("button",{type:"button","aria-label":`Remove ${e.label}`,style:ie,onClick:t=>L(e.value,t),onMouseEnter:t=>{t.currentTarget.style.opacity="1",t.currentTarget.style.backgroundColor="rgba(0,0,0,0.1)"},onMouseLeave:t=>{t.currentTarget.style.opacity="0.7",t.currentTarget.style.backgroundColor="transparent"},children:r.jsx(N,{})})]},e.value)),P&&r.jsx("input",{ref:C,type:"text",role:"combobox","aria-label":W,"aria-labelledby":_,"aria-expanded":a,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-invalid":T,value:h,placeholder:R.length===0?O:"",disabled:b,style:ae,onChange:e=>{I(e.target.value),a||f(!0),u(0)},onKeyDown:te,onFocus:()=>B(!0),onBlur:()=>B(!1)}),!P&&R.length===0&&r.jsx("span",{style:{color:"var(--brycks-foreground-muted)",fontSize:l.fontSize},children:O}),r.jsxs("div",{style:le,children:[G&&i.length>0&&!b&&r.jsx("button",{type:"button","aria-label":"Clear all",style:ce,onClick:ee,onMouseEnter:e=>{e.currentTarget.style.backgroundColor="var(--brycks-background-muted)",e.currentTarget.style.color="var(--brycks-foreground-default)"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color="var(--brycks-foreground-muted)"},children:r.jsx(N,{})}),r.jsx("span",{style:de,children:r.jsx(ve,{})})]})]}),a&&ye.createPortal(r.jsx("ul",{ref:X,role:"listbox","aria-label":W||"Options","aria-multiselectable":"true",style:ue,children:m.length>0?Array.from($.entries()).map(([e,t])=>r.jsxs("li",{role:"group","aria-label":e,children:[e&&r.jsx("div",{style:pe,children:e}),r.jsx("ul",{role:"presentation",style:{listStyle:"none",margin:0,padding:0},children:t.map(o=>{F++;const y=F,v=i.includes(o.value),he=y===c;return r.jsxs("li",{role:"option","aria-selected":v,style:ge(he),onClick:()=>M(o.value),onMouseEnter:()=>u(y),children:[r.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[5],height:n.spacing[5],borderRadius:"var(--brycks-radius-sm)",border:v?"none":"1px solid var(--brycks-border-default)",backgroundColor:v?"var(--brycks-primary-default)":"transparent",color:"white",flexShrink:0},children:v&&r.jsx(ke,{})}),o.icon&&r.jsx("span",{style:{flexShrink:0},children:o.icon}),r.jsxs("div",{style:{flex:1,minWidth:0},children:[r.jsx("div",{style:{fontWeight:v?500:400},children:o.label}),o.description&&r.jsx("div",{style:{fontSize:k.fontSizes.sm,color:"var(--brycks-foreground-muted)"},children:o.description})]})]},o.value)})})]},e||"ungrouped")):r.jsx("li",{style:fe,children:U})}),document.body)]})});Y.displayName="MultiSelect";exports.MultiSelect=Y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),ye=require("react-dom"),be=require("../../../utils/styles.cjs"),d=require("../../../design-system/tokens/motion.cjs"),n=require("../../../design-system/tokens/spacing.cjs"),g=require("../../../design-system/primitives/sizing.cjs"),k=require("../../../design-system/tokens/typography.cjs"),me={sm:{minHeight:g.componentHeights.sm,fontSize:k.fontSizes.base-1,chipHeight:n.spacing[5],padding:g.componentPaddingX.xs,gap:n.spacing[1]},md:{minHeight:g.componentHeights.md,fontSize:k.fontSizes.base,chipHeight:n.spacing[6],padding:g.componentPaddingX.sm,gap:n.spacing[1.5]},lg:{minHeight:g.componentHeights.lg,fontSize:k.fontSizes.md,chipHeight:n.spacing[7],padding:g.componentPaddingX.sm,gap:n.spacing[2]}};function ve(){return r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M4 6l4 4 4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function N(){return r.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M3 3l6 6M9 3l-6 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}function ke(){return r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M3 8l3 3 7-7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}const Y=s.forwardRef(function({options:x,value:w,defaultValue:K=[],onChange:H,placeholder:O="Select options...",size:D="md",maxSelections:z,searchable:P=!0,disabled:b=!1,isInvalid:T=!1,clearable:G=!0,emptyText:U="No options found",closeOnSelect:q=!1,"aria-label":W,"aria-labelledby":_,className:J,testId:Q},S){const[V,Z]=s.useState(K),[a,f]=s.useState(!1),[h,I]=s.useState(""),[c,u]=s.useState(-1),[A,B]=s.useState(!1),j=s.useRef(null),C=s.useRef(null),X=s.useRef(null),i=w!==void 0?w:V,l=me[D],R=s.useMemo(()=>x.filter(e=>i.includes(e.value)),[x,i]),$=s.useMemo(()=>{const e=x.filter(o=>!o.disabled&&(o.label.toLowerCase().includes(h.toLowerCase())||o.description?.toLowerCase().includes(h.toLowerCase()))),t=new Map;return e.forEach(o=>{const y=o.group;t.has(y)||t.set(y,[]),t.get(y).push(o)}),t},[x,h]),m=s.useMemo(()=>{const e=[];return $.forEach(t=>e.push(...t)),e},[$]),p=s.useCallback(e=>{w===void 0&&Z(e),H?.(e)},[w,H]),M=s.useCallback(e=>{if(i.includes(e))p(i.filter(o=>o!==e));else{if(z&&i.length>=z)return;p([...i,e])}q&&f(!1),I(""),C.current?.focus()},[i,z,q,p]),L=s.useCallback((e,t)=>{t?.stopPropagation(),p(i.filter(o=>o!==e))},[i,p]),ee=s.useCallback(e=>{e.stopPropagation(),p([]),C.current?.focus()},[p]),te=s.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),a?u(t=>Math.min(t+1,m.length-1)):(f(!0),u(0));break;case"ArrowUp":e.preventDefault(),a&&u(t=>Math.max(t-1,0));break;case"Enter":e.preventDefault(),a&&c>=0&&m[c]&&M(m[c].value);break;case"Escape":e.preventDefault(),f(!1),u(-1);break;case"Backspace":!h&&i.length>0&&L(i[i.length-1]);break}},[a,c,m,h,i,M,L]);s.useEffect(()=>{if(!a)return;const e=t=>{j.current?.contains(t.target)||(f(!1),u(-1),I(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[a]),s.useEffect(()=>{if(!a||c<0)return;X.current?.querySelectorAll('[role="option"]')?.[c]?.scrollIntoView({block:"nearest"})},[a,c]);const[E,re]=s.useState({top:0,left:0,width:0});s.useEffect(()=>{if(!a||!j.current)return;const e=()=>{const t=j.current.getBoundingClientRect();re({top:t.bottom+window.scrollY+n.spacing[1],left:t.left+window.scrollX,width:t.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[a]);const ne={position:"relative",width:"100%"},se={display:"flex",flexWrap:"wrap",alignItems:"center",gap:l.gap,minHeight:l.minHeight,padding:`${n.spacing[1]}px ${l.padding}px`,paddingRight:n.spacing[10],backgroundColor:b?"var(--brycks-background-muted)":"var(--brycks-background-default)",border:`1px solid ${T?"var(--brycks-error-default)":A?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",transition:`all ${d.durations.fast}ms ${d.easings.easeOut}`,cursor:b?"not-allowed":"pointer",boxShadow:A?"var(--brycks-focus-ring)":void 0},oe={display:"inline-flex",alignItems:"center",gap:n.spacing[1],height:l.chipHeight,padding:`0 ${n.spacing[2]}px`,fontSize:l.fontSize-1,fontWeight:500,color:"var(--brycks-foreground-default)",backgroundColor:"var(--brycks-background-muted)",borderRadius:"var(--brycks-radius-full)",whiteSpace:"nowrap"},ie={display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[4],height:n.spacing[4],marginLeft:n.spacing[.5],marginRight:-n.spacing[1],color:"inherit",opacity:.7,cursor:"pointer",borderRadius:"var(--brycks-radius-full)"},ae={flex:1,minWidth:60,height:l.chipHeight,padding:0,fontSize:l.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none"},le={position:"absolute",right:l.padding,top:"50%",transform:"translateY(-50%)",display:"flex",alignItems:"center",gap:n.spacing[1]},ce={display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[5],height:n.spacing[5],color:"var(--brycks-foreground-muted)",cursor:"pointer",borderRadius:"var(--brycks-radius-sm)",transition:`all ${d.durations.fast}ms ${d.easings.easeOut}`},de={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",transform:a?"rotate(180deg)":"rotate(0)",transition:`transform ${d.durations.fast}ms ${d.easings.easeOut}`,pointerEvents:"none"},ue={position:"absolute",top:E.top,left:E.left,width:E.width,maxHeight:300,overflowY:"auto",backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",zIndex:"var(--brycks-z-dropdown)",padding:n.spacing[1]},pe={padding:`${n.spacing[2]}px ${n.spacing[3]}px ${n.spacing[1]}px`,fontSize:k.fontSizes.xs,fontWeight:600,color:"var(--brycks-foreground-muted)",textTransform:"uppercase",letterSpacing:"0.05em"},ge=(e,t)=>({display:"flex",alignItems:"center",gap:g.componentGap.md,padding:`${n.spacing[2]}px ${n.spacing[3]}px`,fontSize:l.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:"pointer",transition:`background-color ${d.durations.fast}ms ${d.easings.easeOut}`}),fe={padding:`${n.spacing[4]}px ${n.spacing[3]}px`,fontSize:l.fontSize,color:"var(--brycks-foreground-muted)",textAlign:"center"};let F=-1;return r.jsxs("div",{ref:e=>{j.current=e,typeof S=="function"?S(e):S&&(S.current=e)},className:be.cx("brycks-multiselect",`brycks-multiselect--${D}`,J),style:ne,"data-testid":Q,children:[r.jsxs("div",{style:se,onClick:()=>{b||(f(!0),C.current?.focus())},children:[R.map(e=>r.jsxs("span",{style:oe,children:[e.label,r.jsx("button",{type:"button","aria-label":`Remove ${e.label}`,style:ie,onClick:t=>L(e.value,t),onMouseEnter:t=>{t.currentTarget.style.opacity="1",t.currentTarget.style.backgroundColor="rgba(0,0,0,0.1)"},onMouseLeave:t=>{t.currentTarget.style.opacity="0.7",t.currentTarget.style.backgroundColor="transparent"},children:r.jsx(N,{})})]},e.value)),P&&r.jsx("input",{ref:C,type:"text",role:"combobox","aria-label":W,"aria-labelledby":_,"aria-expanded":a,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-invalid":T,value:h,placeholder:R.length===0?O:"",disabled:b,style:ae,onChange:e=>{I(e.target.value),a||f(!0),u(0)},onKeyDown:te,onFocus:()=>B(!0),onBlur:()=>B(!1)}),!P&&R.length===0&&r.jsx("span",{style:{color:"var(--brycks-foreground-muted)",fontSize:l.fontSize},children:O}),r.jsxs("div",{style:le,children:[G&&i.length>0&&!b&&r.jsx("button",{type:"button","aria-label":"Clear all",style:ce,onClick:ee,onMouseEnter:e=>{e.currentTarget.style.backgroundColor="var(--brycks-background-muted)",e.currentTarget.style.color="var(--brycks-foreground-default)"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color="var(--brycks-foreground-muted)"},children:r.jsx(N,{})}),r.jsx("span",{style:de,children:r.jsx(ve,{})})]})]}),a&&ye.createPortal(r.jsx("ul",{ref:X,role:"listbox","aria-label":W||"Options","aria-multiselectable":"true",style:ue,children:m.length>0?Array.from($.entries()).map(([e,t])=>r.jsxs("li",{role:"group","aria-label":e,children:[e&&r.jsx("div",{style:pe,children:e}),r.jsx("ul",{role:"presentation",style:{listStyle:"none",margin:0,padding:0},children:t.map(o=>{F++;const y=F,v=i.includes(o.value),he=y===c;return r.jsxs("li",{role:"option","aria-selected":v,style:ge(he),onClick:()=>M(o.value),onMouseEnter:()=>u(y),children:[r.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[5],height:n.spacing[5],borderRadius:"var(--brycks-radius-sm)",border:v?"none":"1px solid var(--brycks-border-default)",backgroundColor:v?"var(--brycks-primary-default)":"transparent",color:"white",flexShrink:0},children:v&&r.jsx(ke,{})}),o.icon&&r.jsx("span",{style:{flexShrink:0},children:o.icon}),r.jsxs("div",{style:{flex:1,minWidth:0},children:[r.jsx("div",{style:{fontWeight:v?500:400},children:o.label}),o.description&&r.jsx("div",{style:{fontSize:k.fontSizes.sm,color:"var(--brycks-foreground-muted)"},children:o.description})]})]},o.value)})})]},e||"ungrouped")):r.jsx("li",{style:fe,children:U})}),document.body)]})});Y.displayName="MultiSelect";exports.MultiSelect=Y;
 //# sourceMappingURL=MultiSelect.cjs.map

package/dist/components/form/MultiSelect/MultiSelect.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.cjs","sources":["../../../../src/components/form/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/*\n MultiSelect Component\n \n A dropdown component for selecting multiple options.\n * Displays selected items as chips with removal capability.\n \n @module components/form/MultiSelect\n /\n\nimport {\n forwardRef,\n useState,\n useCallback,\n useRef,\n useEffect,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type KeyboardEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX, componentGap } from '../../../design-system/primitives'\n\nexport type MultiSelectSize = 'sm' \| 'md' \| 'lg'\n\nexport interface MultiSelectOption {\n /* Unique identifier /\n value: string\n /* Display label /\n label: string\n /* Optional description /\n description?: string\n /* Optional icon /\n icon?: ReactNode\n /* Whether the option is disabled /\n disabled?: boolean\n /* Optional group /\n group?: string\n}\n\nexport interface MultiSelectProps {\n /* Available options /\n options: MultiSelectOption[]\n /* Selected values (controlled) /\n value?: string[]\n /* Default selected values (uncontrolled) /\n defaultValue?: string[]\n /* Callback when selection changes /\n onChange?: (values: string[]) => void\n /* Placeholder text /\n placeholder?: string\n /* Component size /\n size?: MultiSelectSize\n /* Maximum selections allowed /\n maxSelections?: number\n /* Whether the select is searchable /\n searchable?: boolean\n /* Whether the select is disabled /\n disabled?: boolean\n /* Whether the select is invalid /\n isInvalid?: boolean\n /* Whether to allow clearing all /\n clearable?: boolean\n /* Text when no options match search /\n emptyText?: string\n /* Whether to close on select /\n closeOnSelect?: boolean\n /* Label for accessibility /\n 'aria-label'?: string\n /* ID of element that labels this select /\n 'aria-labelledby'?: string\n /* Custom class name /\n className?: string\n /* Test ID */\n testId?: string\n}\n\nconst sizeConfig: Record<MultiSelectSize, { minHeight: number; fontSize: number; chipHeight: number; padding: number; gap: number }> = {\n sm: { minHeight: componentHeights.sm, fontSize: fontSizes.base - 1, chipHeight: spacing[5], padding: componentPaddingX.xs, gap: spacing[1] },\n md: { minHeight: componentHeights.md, fontSize: fontSizes.base, chipHeight: spacing[6], padding: componentPaddingX.sm, gap: spacing[1.5] },\n lg: { minHeight: componentHeights.lg, fontSize: fontSizes.md, chipHeight: spacing[7], padding: componentPaddingX.sm, gap: spacing[2] },\n}\n\nfunction ChevronDownIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\nfunction CheckIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 8l3 3 7-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\nexport const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(\n {\n options,\n value: controlledValue,\n defaultValue = [],\n onChange,\n placeholder = 'Select options...',\n size = 'md',\n maxSelections,\n searchable = true,\n disabled = false,\n isInvalid = false,\n clearable = true,\n emptyText = 'No options found',\n closeOnSelect = false,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n className,\n testId,\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState<string[]>(defaultValue)\n const [isOpen, setIsOpen] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n const [activeIndex, setActiveIndex] = useState(-1)\n const [isFocused, setIsFocused] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLUListElement>(null)\n\n const value = controlledValue !== undefined ? controlledValue : internalValue\n const config = sizeConfig[size]\n\n // Get selected options\n const selectedOptions = useMemo(\n () => options.filter((opt) => value.includes(opt.value)),\n [options, value]\n )\n\n // Filter and group options\n const filteredOptions = useMemo(() => {\n let filtered = options.filter(\n (opt) =>\n !opt.disabled &&\n (opt.label.toLowerCase().includes(searchValue.toLowerCase()) \|\|\n opt.description?.toLowerCase().includes(searchValue.toLowerCase()))\n )\n\n // Group by group property\n const groups = new Map<string \| undefined, MultiSelectOption[]>()\n filtered.forEach((opt) => {\n const group = opt.group\n if (!groups.has(group)) {\n groups.set(group, [])\n }\n groups.get(group)!.push(opt)\n })\n\n return groups\n }, [options, searchValue])\n\n // Flatten for keyboard navigation\n const flatOptions = useMemo(() => {\n const flat: MultiSelectOption[] = []\n filteredOptions.forEach((opts) => flat.push(...opts))\n return flat\n }, [filteredOptions])\n\n const updateValue = useCallback(\n (newValue: string[]) => {\n if (controlledValue === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n },\n [controlledValue, onChange]\n )\n\n const toggleOption = useCallback(\n (optionValue: string) => {\n const isSelected = value.includes(optionValue)\n\n if (isSelected) {\n updateValue(value.filter((v) => v !== optionValue))\n } else {\n if (maxSelections && value.length >= maxSelections) return\n updateValue([...value, optionValue])\n }\n\n if (closeOnSelect) {\n setIsOpen(false)\n }\n\n setSearchValue('')\n inputRef.current?.focus()\n },\n [value, maxSelections, closeOnSelect, updateValue]\n )\n\n const removeOption = useCallback(\n (optionValue: string, e?: React.MouseEvent) => {\n e?.stopPropagation()\n updateValue(value.filter((v) => v !== optionValue))\n },\n [value, updateValue]\n )\n\n const clearAll = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n updateValue([])\n inputRef.current?.focus()\n },\n [updateValue]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault()\n if (!isOpen) {\n setIsOpen(true)\n setActiveIndex(0)\n } else {\n setActiveIndex((prev) => Math.min(prev + 1, flatOptions.length - 1))\n }\n break\n case 'ArrowUp':\n e.preventDefault()\n if (isOpen) {\n setActiveIndex((prev) => Math.max(prev - 1, 0))\n }\n break\n case 'Enter':\n e.preventDefault()\n if (isOpen && activeIndex >= 0 && flatOptions[activeIndex]) {\n toggleOption(flatOptions[activeIndex].value)\n }\n break\n case 'Escape':\n e.preventDefault()\n setIsOpen(false)\n setActiveIndex(-1)\n break\n case 'Backspace':\n if (!searchValue && value.length > 0) {\n removeOption(value[value.length - 1])\n }\n break\n }\n },\n [isOpen, activeIndex, flatOptions, searchValue, value, toggleOption, removeOption]\n )\n\n // Close on outside click\n useEffect(() => {\n if (!isOpen) return\n\n const handleClick = (e: MouseEvent) => {\n if (!containerRef.current?.contains(e.target as Node)) {\n setIsOpen(false)\n setActiveIndex(-1)\n setSearchValue('')\n }\n }\n\n document.addEventListener('mousedown', handleClick)\n return () => document.removeEventListener('mousedown', handleClick)\n }, [isOpen])\n\n // Scroll active option into view\n useEffect(() => {\n if (!isOpen \|\| activeIndex < 0) return\n const list = listRef.current\n const items = list?.querySelectorAll('[role=\"option\"]')\n const activeItem = items?.[activeIndex] as HTMLElement \| undefined\n activeItem?.scrollIntoView({ block: 'nearest' })\n }, [isOpen, activeIndex])\n\n // Calculate dropdown position\n const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })\n\n useEffect(() => {\n if (!isOpen \|\| !containerRef.current) return\n\n const updatePosition = () => {\n const rect = containerRef.current!.getBoundingClientRect()\n setDropdownPosition({\n top: rect.bottom + window.scrollY + spacing[1],\n left: rect.left + window.scrollX,\n width: rect.width,\n })\n }\n\n updatePosition()\n window.addEventListener('resize', updatePosition)\n window.addEventListener('scroll', updatePosition, true)\n\n return () => {\n window.removeEventListener('resize', updatePosition)\n window.removeEventListener('scroll', updatePosition, true)\n }\n }, [isOpen])\n\n const containerStyle: CSSProperties = {\n position: 'relative',\n width: '100%',\n }\n\n const wrapperStyle: CSSProperties = {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n gap: config.gap,\n minHeight: config.minHeight,\n padding: `${spacing[1]}px ${config.padding}px`,\n paddingRight: spacing[10],\n backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n border: `1px solid ${\n isInvalid\n ? 'var(--brycks-error-default)'\n : isFocused\n ? 'var(--brycks-primary-default)'\n : 'var(--brycks-border-default)'\n }`,\n borderRadius: 'var(--brycks-radius-md)',\n transition: `all ${durations.fast}ms ${easings.easeOut}`,\n cursor: disabled ? 'not-allowed' : 'pointer',\n boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n }\n\n const chipStyle: CSSProperties = {\n display: 'inline-flex',\n alignItems: 'center',\n gap: spacing[1],\n height: config.chipHeight,\n padding: `0 ${spacing[2]}px`,\n fontSize: config.fontSize - 1,\n fontWeight: 500,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: 'var(--brycks-background-muted)',\n borderRadius: 'var(--brycks-radius-full)',\n whiteSpace: 'nowrap',\n }\n\n const chipRemoveStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[4],\n height: spacing[4],\n marginLeft: spacing[0.5],\n marginRight: -spacing[1],\n color: 'inherit',\n opacity: 0.7,\n cursor: 'pointer',\n borderRadius: 'var(--brycks-radius-full)',\n }\n\n const inputStyle: CSSProperties = {\n flex: 1,\n minWidth: 60,\n height: config.chipHeight,\n padding: 0,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: 'transparent',\n border: 'none',\n outline: 'none',\n }\n\n const iconsStyle: CSSProperties = {\n position: 'absolute',\n right: config.padding,\n top: '50%',\n transform: 'translateY(-50%)',\n display: 'flex',\n alignItems: 'center',\n gap: spacing[1],\n }\n\n const clearButtonStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[5],\n height: spacing[5],\n color: 'var(--brycks-foreground-muted)',\n cursor: 'pointer',\n borderRadius: 'var(--brycks-radius-sm)',\n transition: `all ${durations.fast}ms ${easings.easeOut}`,\n }\n\n const chevronStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--brycks-foreground-muted)',\n transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',\n transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n pointerEvents: 'none',\n }\n\n const dropdownStyle: CSSProperties = {\n position: 'absolute',\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n width: dropdownPosition.width,\n maxHeight: 300,\n overflowY: 'auto',\n backgroundColor: 'var(--brycks-background-elevated)',\n border: '1px solid var(--brycks-border-default)',\n borderRadius: 'var(--brycks-radius-lg)',\n boxShadow: 'var(--brycks-shadow-lg)',\n zIndex: 'var(--brycks-z-dropdown)' as unknown as number,\n padding: spacing[1],\n }\n\n const groupLabelStyle: CSSProperties = {\n padding: `${spacing[2]}px ${spacing[3]}px ${spacing[1]}px`,\n fontSize: fontSizes.xs,\n fontWeight: 600,\n color: 'var(--brycks-foreground-muted)',\n textTransform: 'uppercase',\n letterSpacing: '0.05em',\n }\n\n const optionStyle = (isActive: boolean, _isSelected: boolean): CSSProperties => ({\n display: 'flex',\n alignItems: 'center',\n gap: componentGap.md,\n padding: `${spacing[2]}px ${spacing[3]}px`,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: isActive ? 'var(--brycks-background-muted)' : 'transparent',\n borderRadius: 'var(--brycks-radius-md)',\n cursor: 'pointer',\n transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n })\n\n const emptyStyle: CSSProperties = {\n padding: `${spacing[4]}px ${spacing[3]}px`,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-muted)',\n textAlign: 'center',\n }\n\n let optionIndex = -1\n\n return (\n <div\n ref={(node) => {\n (containerRef as React.MutableRefObject<HTMLDivElement \| null>).current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n }}\n className={cx('brycks-multiselect', `brycks-multiselect--${size}`, className)}\n style={containerStyle}\n data-testid={testId}\n >\n <div\n style={wrapperStyle}\n onClick={() => {\n if (!disabled) {\n setIsOpen(true)\n inputRef.current?.focus()\n }\n }}\n >\n {selectedOptions.map((opt) => (\n <span key={opt.value} style={chipStyle}>\n {opt.label}\n <button\n type=\"button\"\n aria-label={`Remove ${opt.label}`}\n style={chipRemoveStyle}\n onClick={(e) => removeOption(opt.value, e)}\n onMouseEnter={(e) => {\n e.currentTarget.style.opacity = '1'\n e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.1)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.opacity = '0.7'\n e.currentTarget.style.backgroundColor = 'transparent'\n }}\n >\n <CloseIcon />\n </button>\n </span>\n ))}\n {searchable && (\n <input\n ref={inputRef}\n type=\"text\"\n role=\"combobox\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n aria-invalid={isInvalid}\n value={searchValue}\n placeholder={selectedOptions.length === 0 ? placeholder : ''}\n disabled={disabled}\n style={inputStyle}\n onChange={(e) => {\n setSearchValue(e.target.value)\n if (!isOpen) setIsOpen(true)\n setActiveIndex(0)\n }}\n onKeyDown={handleKeyDown}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n />\n )}\n {!searchable && selectedOptions.length === 0 && (\n <span style={{ color: 'var(--brycks-foreground-muted)', fontSize: config.fontSize }}>\n {placeholder}\n </span>\n )}\n <div style={iconsStyle}>\n {clearable && value.length > 0 && !disabled && (\n <button\n type=\"button\"\n aria-label=\"Clear all\"\n style={clearButtonStyle}\n onClick={clearAll}\n onMouseEnter={(e) => {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent'\n e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n }}\n >\n <CloseIcon />\n </button>\n )}\n <span style={chevronStyle}>\n <ChevronDownIcon />\n </span>\n </div>\n </div>\n\n {isOpen &&\n createPortal(\n <ul\n ref={listRef}\n role=\"listbox\"\n aria-label={ariaLabel \|\| 'Options'}\n aria-multiselectable=\"true\"\n style={dropdownStyle}\n >\n {flatOptions.length > 0 ? (\n Array.from(filteredOptions.entries()).map(([group, opts]) => (\n <li key={group \|\| 'ungrouped'} role=\"group\" aria-label={group}>\n {group && <div style={groupLabelStyle}>{group}</div>}\n <ul role=\"presentation\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n {opts.map((option) => {\n optionIndex++\n const currentIndex = optionIndex\n const isSelected = value.includes(option.value)\n const isActive = currentIndex === activeIndex\n\n return (\n <li\n key={option.value}\n role=\"option\"\n aria-selected={isSelected}\n style={optionStyle(isActive, isSelected)}\n onClick={() => toggleOption(option.value)}\n onMouseEnter={() => setActiveIndex(currentIndex)}\n >\n <span\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[5],\n height: spacing[5],\n borderRadius: 'var(--brycks-radius-sm)',\n border: isSelected\n ? 'none'\n : '1px solid var(--brycks-border-default)',\n backgroundColor: isSelected\n ? 'var(--brycks-primary-default)'\n : 'transparent',\n color: 'white',\n flexShrink: 0,\n }}\n >\n {isSelected && <CheckIcon />}\n </span>\n {option.icon && <span style={{ flexShrink: 0 }}>{option.icon}</span>}\n <div style={{ flex: 1, minWidth: 0 }}>\n <div style={{ fontWeight: isSelected ? 500 : 400 }}>{option.label}</div>\n {option.description && (\n <div style={{ fontSize: fontSizes.sm, color: 'var(--brycks-foreground-muted)' }}>\n {option.description}\n </div>\n )}\n </div>\n </li>\n )\n })}\n </ul>\n </li>\n ))\n ) : (\n <li style={emptyStyle}>{emptyText}</li>\n )}\n </ul>,\n document.body\n )}\n </div>\n )\n})\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":["sizeConfig","componentHeights","fontSizes","spacing","componentPaddingX","ChevronDownIcon","jsx","CloseIcon","CheckIcon","MultiSelect","forwardRef","options","controlledValue","defaultValue","onChange","placeholder","size","maxSelections","searchable","disabled","isInvalid","clearable","emptyText","closeOnSelect","ariaLabel","ariaLabelledby","className","testId","ref","internalValue","setInternalValue","useState","isOpen","setIsOpen","searchValue","setSearchValue","activeIndex","setActiveIndex","isFocused","setIsFocused","containerRef","useRef","inputRef","listRef","value","config","selectedOptions","useMemo","opt","filteredOptions","filtered","groups","group","flatOptions","flat","opts","updateValue","useCallback","newValue","toggleOption","optionValue","v","removeOption","e","clearAll","handleKeyDown","prev","useEffect","handleClick","dropdownPosition","setDropdownPosition","updatePosition","rect","containerStyle","wrapperStyle","durations","easings","chipStyle","chipRemoveStyle","inputStyle","iconsStyle","clearButtonStyle","chevronStyle","dropdownStyle","groupLabelStyle","optionStyle","isActive","_isSelected","componentGap","emptyStyle","optionIndex","jsxs","node","cx","createPortal","option","currentIndex","isSelected"],"mappings":"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"}
1	+ {"version":3,"file":"MultiSelect.cjs","sources":["../../../../src/components/form/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/*\n MultiSelect Component\n \n A dropdown component for selecting multiple options.\n * Displays selected items as chips with removal capability.\n \n @module components/form/MultiSelect\n /\n\nimport {\n forwardRef,\n useState,\n useCallback,\n useRef,\n useEffect,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type KeyboardEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX, componentGap } from '../../../design-system/primitives'\n\nexport type MultiSelectSize = 'sm' \| 'md' \| 'lg'\n\nexport interface MultiSelectOption {\n /* Unique identifier /\n value: string\n /* Display label /\n label: string\n /* Optional description /\n description?: string\n /* Optional icon /\n icon?: ReactNode\n /* Whether the option is disabled /\n disabled?: boolean\n /* Optional group /\n group?: string\n}\n\nexport interface MultiSelectProps {\n /* Available options /\n options: MultiSelectOption[]\n /* Selected values (controlled) /\n value?: string[]\n /* Default selected values (uncontrolled) /\n defaultValue?: string[]\n /* Callback when selection changes /\n onChange?: (values: string[]) => void\n /* Placeholder text /\n placeholder?: string\n /* Component size /\n size?: MultiSelectSize\n /* Maximum selections allowed /\n maxSelections?: number\n /* Whether the select is searchable /\n searchable?: boolean\n /* Whether the select is disabled /\n disabled?: boolean\n /* Whether the select is invalid /\n isInvalid?: boolean\n /* Whether to allow clearing all /\n clearable?: boolean\n /* Text when no options match search /\n emptyText?: string\n /* Whether to close on select /\n closeOnSelect?: boolean\n /* Label for accessibility /\n 'aria-label'?: string\n /* ID of element that labels this select /\n 'aria-labelledby'?: string\n /* Custom class name /\n className?: string\n /* Test ID */\n testId?: string\n}\n\nconst sizeConfig: Record<MultiSelectSize, { minHeight: number; fontSize: number; chipHeight: number; padding: number; gap: number }> = {\n sm: { minHeight: componentHeights.sm, fontSize: fontSizes.base - 1, chipHeight: spacing[5], padding: componentPaddingX.xs, gap: spacing[1] },\n md: { minHeight: componentHeights.md, fontSize: fontSizes.base, chipHeight: spacing[6], padding: componentPaddingX.sm, gap: spacing[1.5] },\n lg: { minHeight: componentHeights.lg, fontSize: fontSizes.md, chipHeight: spacing[7], padding: componentPaddingX.sm, gap: spacing[2] },\n}\n\nfunction ChevronDownIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\nfunction CheckIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 8l3 3 7-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\nexport const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(\n {\n options,\n value: controlledValue,\n defaultValue = [],\n onChange,\n placeholder = 'Select options...',\n size = 'md',\n maxSelections,\n searchable = true,\n disabled = false,\n isInvalid = false,\n clearable = true,\n emptyText = 'No options found',\n closeOnSelect = false,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n className,\n testId,\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState<string[]>(defaultValue)\n const [isOpen, setIsOpen] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n const [activeIndex, setActiveIndex] = useState(-1)\n const [isFocused, setIsFocused] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLUListElement>(null)\n\n const value = controlledValue !== undefined ? controlledValue : internalValue\n const config = sizeConfig[size]\n\n // Get selected options\n const selectedOptions = useMemo(\n () => options.filter((opt) => value.includes(opt.value)),\n [options, value]\n )\n\n // Filter and group options\n const filteredOptions = useMemo(() => {\n const filtered = options.filter(\n (opt) =>\n !opt.disabled &&\n (opt.label.toLowerCase().includes(searchValue.toLowerCase()) \|\|\n opt.description?.toLowerCase().includes(searchValue.toLowerCase()))\n )\n\n // Group by group property\n const groups = new Map<string \| undefined, MultiSelectOption[]>()\n filtered.forEach((opt) => {\n const group = opt.group\n if (!groups.has(group)) {\n groups.set(group, [])\n }\n groups.get(group)!.push(opt)\n })\n\n return groups\n }, [options, searchValue])\n\n // Flatten for keyboard navigation\n const flatOptions = useMemo(() => {\n const flat: MultiSelectOption[] = []\n filteredOptions.forEach((opts) => flat.push(...opts))\n return flat\n }, [filteredOptions])\n\n const updateValue = useCallback(\n (newValue: string[]) => {\n if (controlledValue === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n },\n [controlledValue, onChange]\n )\n\n const toggleOption = useCallback(\n (optionValue: string) => {\n const isSelected = value.includes(optionValue)\n\n if (isSelected) {\n updateValue(value.filter((v) => v !== optionValue))\n } else {\n if (maxSelections && value.length >= maxSelections) return\n updateValue([...value, optionValue])\n }\n\n if (closeOnSelect) {\n setIsOpen(false)\n }\n\n setSearchValue('')\n inputRef.current?.focus()\n },\n [value, maxSelections, closeOnSelect, updateValue]\n )\n\n const removeOption = useCallback(\n (optionValue: string, e?: React.MouseEvent) => {\n e?.stopPropagation()\n updateValue(value.filter((v) => v !== optionValue))\n },\n [value, updateValue]\n )\n\n const clearAll = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n updateValue([])\n inputRef.current?.focus()\n },\n [updateValue]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault()\n if (!isOpen) {\n setIsOpen(true)\n setActiveIndex(0)\n } else {\n setActiveIndex((prev) => Math.min(prev + 1, flatOptions.length - 1))\n }\n break\n case 'ArrowUp':\n e.preventDefault()\n if (isOpen) {\n setActiveIndex((prev) => Math.max(prev - 1, 0))\n }\n break\n case 'Enter':\n e.preventDefault()\n if (isOpen && activeIndex >= 0 && flatOptions[activeIndex]) {\n toggleOption(flatOptions[activeIndex].value)\n }\n break\n case 'Escape':\n e.preventDefault()\n setIsOpen(false)\n setActiveIndex(-1)\n break\n case 'Backspace':\n if (!searchValue && value.length > 0) {\n removeOption(value[value.length - 1])\n }\n break\n }\n },\n [isOpen, activeIndex, flatOptions, searchValue, value, toggleOption, removeOption]\n )\n\n // Close on outside click\n useEffect(() => {\n if (!isOpen) return\n\n const handleClick = (e: MouseEvent) => {\n if (!containerRef.current?.contains(e.target as Node)) {\n setIsOpen(false)\n setActiveIndex(-1)\n setSearchValue('')\n }\n }\n\n document.addEventListener('mousedown', handleClick)\n return () => document.removeEventListener('mousedown', handleClick)\n }, [isOpen])\n\n // Scroll active option into view\n useEffect(() => {\n if (!isOpen \|\| activeIndex < 0) return\n const list = listRef.current\n const items = list?.querySelectorAll('[role=\"option\"]')\n const activeItem = items?.[activeIndex] as HTMLElement \| undefined\n activeItem?.scrollIntoView({ block: 'nearest' })\n }, [isOpen, activeIndex])\n\n // Calculate dropdown position\n const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })\n\n useEffect(() => {\n if (!isOpen \|\| !containerRef.current) return\n\n const updatePosition = () => {\n const rect = containerRef.current!.getBoundingClientRect()\n setDropdownPosition({\n top: rect.bottom + window.scrollY + spacing[1],\n left: rect.left + window.scrollX,\n width: rect.width,\n })\n }\n\n updatePosition()\n window.addEventListener('resize', updatePosition)\n window.addEventListener('scroll', updatePosition, true)\n\n return () => {\n window.removeEventListener('resize', updatePosition)\n window.removeEventListener('scroll', updatePosition, true)\n }\n }, [isOpen])\n\n const containerStyle: CSSProperties = {\n position: 'relative',\n width: '100%',\n }\n\n const wrapperStyle: CSSProperties = {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n gap: config.gap,\n minHeight: config.minHeight,\n padding: `${spacing[1]}px ${config.padding}px`,\n paddingRight: spacing[10],\n backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n border: `1px solid ${\n isInvalid\n ? 'var(--brycks-error-default)'\n : isFocused\n ? 'var(--brycks-primary-default)'\n : 'var(--brycks-border-default)'\n }`,\n borderRadius: 'var(--brycks-radius-md)',\n transition: `all ${durations.fast}ms ${easings.easeOut}`,\n cursor: disabled ? 'not-allowed' : 'pointer',\n boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n }\n\n const chipStyle: CSSProperties = {\n display: 'inline-flex',\n alignItems: 'center',\n gap: spacing[1],\n height: config.chipHeight,\n padding: `0 ${spacing[2]}px`,\n fontSize: config.fontSize - 1,\n fontWeight: 500,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: 'var(--brycks-background-muted)',\n borderRadius: 'var(--brycks-radius-full)',\n whiteSpace: 'nowrap',\n }\n\n const chipRemoveStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[4],\n height: spacing[4],\n marginLeft: spacing[0.5],\n marginRight: -spacing[1],\n color: 'inherit',\n opacity: 0.7,\n cursor: 'pointer',\n borderRadius: 'var(--brycks-radius-full)',\n }\n\n const inputStyle: CSSProperties = {\n flex: 1,\n minWidth: 60,\n height: config.chipHeight,\n padding: 0,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: 'transparent',\n border: 'none',\n outline: 'none',\n }\n\n const iconsStyle: CSSProperties = {\n position: 'absolute',\n right: config.padding,\n top: '50%',\n transform: 'translateY(-50%)',\n display: 'flex',\n alignItems: 'center',\n gap: spacing[1],\n }\n\n const clearButtonStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[5],\n height: spacing[5],\n color: 'var(--brycks-foreground-muted)',\n cursor: 'pointer',\n borderRadius: 'var(--brycks-radius-sm)',\n transition: `all ${durations.fast}ms ${easings.easeOut}`,\n }\n\n const chevronStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--brycks-foreground-muted)',\n transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',\n transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n pointerEvents: 'none',\n }\n\n const dropdownStyle: CSSProperties = {\n position: 'absolute',\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n width: dropdownPosition.width,\n maxHeight: 300,\n overflowY: 'auto',\n backgroundColor: 'var(--brycks-background-elevated)',\n border: '1px solid var(--brycks-border-default)',\n borderRadius: 'var(--brycks-radius-lg)',\n boxShadow: 'var(--brycks-shadow-lg)',\n zIndex: 'var(--brycks-z-dropdown)' as unknown as number,\n padding: spacing[1],\n }\n\n const groupLabelStyle: CSSProperties = {\n padding: `${spacing[2]}px ${spacing[3]}px ${spacing[1]}px`,\n fontSize: fontSizes.xs,\n fontWeight: 600,\n color: 'var(--brycks-foreground-muted)',\n textTransform: 'uppercase',\n letterSpacing: '0.05em',\n }\n\n const optionStyle = (isActive: boolean, _isSelected: boolean): CSSProperties => ({\n display: 'flex',\n alignItems: 'center',\n gap: componentGap.md,\n padding: `${spacing[2]}px ${spacing[3]}px`,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: isActive ? 'var(--brycks-background-muted)' : 'transparent',\n borderRadius: 'var(--brycks-radius-md)',\n cursor: 'pointer',\n transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n })\n\n const emptyStyle: CSSProperties = {\n padding: `${spacing[4]}px ${spacing[3]}px`,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-muted)',\n textAlign: 'center',\n }\n\n let optionIndex = -1\n\n return (\n <div\n ref={(node) => {\n (containerRef as React.MutableRefObject<HTMLDivElement \| null>).current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n }}\n className={cx('brycks-multiselect', `brycks-multiselect--${size}`, className)}\n style={containerStyle}\n data-testid={testId}\n >\n <div\n style={wrapperStyle}\n onClick={() => {\n if (!disabled) {\n setIsOpen(true)\n inputRef.current?.focus()\n }\n }}\n >\n {selectedOptions.map((opt) => (\n <span key={opt.value} style={chipStyle}>\n {opt.label}\n <button\n type=\"button\"\n aria-label={`Remove ${opt.label}`}\n style={chipRemoveStyle}\n onClick={(e) => removeOption(opt.value, e)}\n onMouseEnter={(e) => {\n e.currentTarget.style.opacity = '1'\n e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.1)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.opacity = '0.7'\n e.currentTarget.style.backgroundColor = 'transparent'\n }}\n >\n <CloseIcon />\n </button>\n </span>\n ))}\n {searchable && (\n <input\n ref={inputRef}\n type=\"text\"\n role=\"combobox\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n aria-invalid={isInvalid}\n value={searchValue}\n placeholder={selectedOptions.length === 0 ? placeholder : ''}\n disabled={disabled}\n style={inputStyle}\n onChange={(e) => {\n setSearchValue(e.target.value)\n if (!isOpen) setIsOpen(true)\n setActiveIndex(0)\n }}\n onKeyDown={handleKeyDown}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n />\n )}\n {!searchable && selectedOptions.length === 0 && (\n <span style={{ color: 'var(--brycks-foreground-muted)', fontSize: config.fontSize }}>\n {placeholder}\n </span>\n )}\n <div style={iconsStyle}>\n {clearable && value.length > 0 && !disabled && (\n <button\n type=\"button\"\n aria-label=\"Clear all\"\n style={clearButtonStyle}\n onClick={clearAll}\n onMouseEnter={(e) => {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent'\n e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n }}\n >\n <CloseIcon />\n </button>\n )}\n <span style={chevronStyle}>\n <ChevronDownIcon />\n </span>\n </div>\n </div>\n\n {isOpen &&\n createPortal(\n <ul\n ref={listRef}\n role=\"listbox\"\n aria-label={ariaLabel \|\| 'Options'}\n aria-multiselectable=\"true\"\n style={dropdownStyle}\n >\n {flatOptions.length > 0 ? (\n Array.from(filteredOptions.entries()).map(([group, opts]) => (\n <li key={group \|\| 'ungrouped'} role=\"group\" aria-label={group}>\n {group && <div style={groupLabelStyle}>{group}</div>}\n <ul role=\"presentation\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n {opts.map((option) => {\n optionIndex++\n const currentIndex = optionIndex\n const isSelected = value.includes(option.value)\n const isActive = currentIndex === activeIndex\n\n return (\n <li\n key={option.value}\n role=\"option\"\n aria-selected={isSelected}\n style={optionStyle(isActive, isSelected)}\n onClick={() => toggleOption(option.value)}\n onMouseEnter={() => setActiveIndex(currentIndex)}\n >\n <span\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[5],\n height: spacing[5],\n borderRadius: 'var(--brycks-radius-sm)',\n border: isSelected\n ? 'none'\n : '1px solid var(--brycks-border-default)',\n backgroundColor: isSelected\n ? 'var(--brycks-primary-default)'\n : 'transparent',\n color: 'white',\n flexShrink: 0,\n }}\n >\n {isSelected && <CheckIcon />}\n </span>\n {option.icon && <span style={{ flexShrink: 0 }}>{option.icon}</span>}\n <div style={{ flex: 1, minWidth: 0 }}>\n <div style={{ fontWeight: isSelected ? 500 : 400 }}>{option.label}</div>\n {option.description && (\n <div style={{ fontSize: fontSizes.sm, color: 'var(--brycks-foreground-muted)' }}>\n {option.description}\n </div>\n )}\n </div>\n </li>\n )\n })}\n </ul>\n </li>\n ))\n ) : (\n <li style={emptyStyle}>{emptyText}</li>\n )}\n </ul>,\n document.body\n )}\n </div>\n )\n})\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":["sizeConfig","componentHeights","fontSizes","spacing","componentPaddingX","ChevronDownIcon","jsx","CloseIcon","CheckIcon","MultiSelect","forwardRef","options","controlledValue","defaultValue","onChange","placeholder","size","maxSelections","searchable","disabled","isInvalid","clearable","emptyText","closeOnSelect","ariaLabel","ariaLabelledby","className","testId","ref","internalValue","setInternalValue","useState","isOpen","setIsOpen","searchValue","setSearchValue","activeIndex","setActiveIndex","isFocused","setIsFocused","containerRef","useRef","inputRef","listRef","value","config","selectedOptions","useMemo","opt","filteredOptions","filtered","groups","group","flatOptions","flat","opts","updateValue","useCallback","newValue","toggleOption","optionValue","v","removeOption","e","clearAll","handleKeyDown","prev","useEffect","handleClick","dropdownPosition","setDropdownPosition","updatePosition","rect","containerStyle","wrapperStyle","durations","easings","chipStyle","chipRemoveStyle","inputStyle","iconsStyle","clearButtonStyle","chevronStyle","dropdownStyle","groupLabelStyle","optionStyle","isActive","_isSelected","componentGap","emptyStyle","optionIndex","jsxs","node","cx","createPortal","option","currentIndex","isSelected"],"mappings":"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"}

package/dist/components/form/MultiSelect/MultiSelect.js CHANGED Viewed

@@ -43,10 +43,9 @@ const Le = we(function({
     () => w.filter((e) => i.includes(e.value)),
     [w, i]
   ), E = T(() => {
-    let e = w.filter(
+    const e = w.filter(
       (o) => !o.disabled && (o.label.toLowerCase().includes(p.toLowerCase()) || o.description?.toLowerCase().includes(p.toLowerCase()))
-    );
-    const t = /* @__PURE__ */ new Map();
+    ), t = /* @__PURE__ */ new Map();
     return e.forEach((o) => {
       const g = o.group;
       t.has(g) || t.set(g, []), t.get(g).push(o);

package/dist/components/form/MultiSelect/MultiSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.js","sources":["../../../../src/components/form/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/*\n MultiSelect Component\n \n A dropdown component for selecting multiple options.\n * Displays selected items as chips with removal capability.\n \n @module components/form/MultiSelect\n /\n\nimport {\n forwardRef,\n useState,\n useCallback,\n useRef,\n useEffect,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type KeyboardEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX, componentGap } from '../../../design-system/primitives'\n\nexport type MultiSelectSize = 'sm' \| 'md' \| 'lg'\n\nexport interface MultiSelectOption {\n /* Unique identifier /\n value: string\n /* Display label /\n label: string\n /* Optional description /\n description?: string\n /* Optional icon /\n icon?: ReactNode\n /* Whether the option is disabled /\n disabled?: boolean\n /* Optional group /\n group?: string\n}\n\nexport interface MultiSelectProps {\n /* Available options /\n options: MultiSelectOption[]\n /* Selected values (controlled) /\n value?: string[]\n /* Default selected values (uncontrolled) /\n defaultValue?: string[]\n /* Callback when selection changes /\n onChange?: (values: string[]) => void\n /* Placeholder text /\n placeholder?: string\n /* Component size /\n size?: MultiSelectSize\n /* Maximum selections allowed /\n maxSelections?: number\n /* Whether the select is searchable /\n searchable?: boolean\n /* Whether the select is disabled /\n disabled?: boolean\n /* Whether the select is invalid /\n isInvalid?: boolean\n /* Whether to allow clearing all /\n clearable?: boolean\n /* Text when no options match search /\n emptyText?: string\n /* Whether to close on select /\n closeOnSelect?: boolean\n /* Label for accessibility /\n 'aria-label'?: string\n /* ID of element that labels this select /\n 'aria-labelledby'?: string\n /* Custom class name /\n className?: string\n /* Test ID */\n testId?: string\n}\n\nconst sizeConfig: Record<MultiSelectSize, { minHeight: number; fontSize: number; chipHeight: number; padding: number; gap: number }> = {\n sm: { minHeight: componentHeights.sm, fontSize: fontSizes.base - 1, chipHeight: spacing[5], padding: componentPaddingX.xs, gap: spacing[1] },\n md: { minHeight: componentHeights.md, fontSize: fontSizes.base, chipHeight: spacing[6], padding: componentPaddingX.sm, gap: spacing[1.5] },\n lg: { minHeight: componentHeights.lg, fontSize: fontSizes.md, chipHeight: spacing[7], padding: componentPaddingX.sm, gap: spacing[2] },\n}\n\nfunction ChevronDownIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\nfunction CheckIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 8l3 3 7-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\nexport const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(\n {\n options,\n value: controlledValue,\n defaultValue = [],\n onChange,\n placeholder = 'Select options...',\n size = 'md',\n maxSelections,\n searchable = true,\n disabled = false,\n isInvalid = false,\n clearable = true,\n emptyText = 'No options found',\n closeOnSelect = false,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n className,\n testId,\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState<string[]>(defaultValue)\n const [isOpen, setIsOpen] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n const [activeIndex, setActiveIndex] = useState(-1)\n const [isFocused, setIsFocused] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLUListElement>(null)\n\n const value = controlledValue !== undefined ? controlledValue : internalValue\n const config = sizeConfig[size]\n\n // Get selected options\n const selectedOptions = useMemo(\n () => options.filter((opt) => value.includes(opt.value)),\n [options, value]\n )\n\n // Filter and group options\n const filteredOptions = useMemo(() => {\n let filtered = options.filter(\n (opt) =>\n !opt.disabled &&\n (opt.label.toLowerCase().includes(searchValue.toLowerCase()) \|\|\n opt.description?.toLowerCase().includes(searchValue.toLowerCase()))\n )\n\n // Group by group property\n const groups = new Map<string \| undefined, MultiSelectOption[]>()\n filtered.forEach((opt) => {\n const group = opt.group\n if (!groups.has(group)) {\n groups.set(group, [])\n }\n groups.get(group)!.push(opt)\n })\n\n return groups\n }, [options, searchValue])\n\n // Flatten for keyboard navigation\n const flatOptions = useMemo(() => {\n const flat: MultiSelectOption[] = []\n filteredOptions.forEach((opts) => flat.push(...opts))\n return flat\n }, [filteredOptions])\n\n const updateValue = useCallback(\n (newValue: string[]) => {\n if (controlledValue === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n },\n [controlledValue, onChange]\n )\n\n const toggleOption = useCallback(\n (optionValue: string) => {\n const isSelected = value.includes(optionValue)\n\n if (isSelected) {\n updateValue(value.filter((v) => v !== optionValue))\n } else {\n if (maxSelections && value.length >= maxSelections) return\n updateValue([...value, optionValue])\n }\n\n if (closeOnSelect) {\n setIsOpen(false)\n }\n\n setSearchValue('')\n inputRef.current?.focus()\n },\n [value, maxSelections, closeOnSelect, updateValue]\n )\n\n const removeOption = useCallback(\n (optionValue: string, e?: React.MouseEvent) => {\n e?.stopPropagation()\n updateValue(value.filter((v) => v !== optionValue))\n },\n [value, updateValue]\n )\n\n const clearAll = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n updateValue([])\n inputRef.current?.focus()\n },\n [updateValue]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault()\n if (!isOpen) {\n setIsOpen(true)\n setActiveIndex(0)\n } else {\n setActiveIndex((prev) => Math.min(prev + 1, flatOptions.length - 1))\n }\n break\n case 'ArrowUp':\n e.preventDefault()\n if (isOpen) {\n setActiveIndex((prev) => Math.max(prev - 1, 0))\n }\n break\n case 'Enter':\n e.preventDefault()\n if (isOpen && activeIndex >= 0 && flatOptions[activeIndex]) {\n toggleOption(flatOptions[activeIndex].value)\n }\n break\n case 'Escape':\n e.preventDefault()\n setIsOpen(false)\n setActiveIndex(-1)\n break\n case 'Backspace':\n if (!searchValue && value.length > 0) {\n removeOption(value[value.length - 1])\n }\n break\n }\n },\n [isOpen, activeIndex, flatOptions, searchValue, value, toggleOption, removeOption]\n )\n\n // Close on outside click\n useEffect(() => {\n if (!isOpen) return\n\n const handleClick = (e: MouseEvent) => {\n if (!containerRef.current?.contains(e.target as Node)) {\n setIsOpen(false)\n setActiveIndex(-1)\n setSearchValue('')\n }\n }\n\n document.addEventListener('mousedown', handleClick)\n return () => document.removeEventListener('mousedown', handleClick)\n }, [isOpen])\n\n // Scroll active option into view\n useEffect(() => {\n if (!isOpen \|\| activeIndex < 0) return\n const list = listRef.current\n const items = list?.querySelectorAll('[role=\"option\"]')\n const activeItem = items?.[activeIndex] as HTMLElement \| undefined\n activeItem?.scrollIntoView({ block: 'nearest' })\n }, [isOpen, activeIndex])\n\n // Calculate dropdown position\n const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })\n\n useEffect(() => {\n if (!isOpen \|\| !containerRef.current) return\n\n const updatePosition = () => {\n const rect = containerRef.current!.getBoundingClientRect()\n setDropdownPosition({\n top: rect.bottom + window.scrollY + spacing[1],\n left: rect.left + window.scrollX,\n width: rect.width,\n })\n }\n\n updatePosition()\n window.addEventListener('resize', updatePosition)\n window.addEventListener('scroll', updatePosition, true)\n\n return () => {\n window.removeEventListener('resize', updatePosition)\n window.removeEventListener('scroll', updatePosition, true)\n }\n }, [isOpen])\n\n const containerStyle: CSSProperties = {\n position: 'relative',\n width: '100%',\n }\n\n const wrapperStyle: CSSProperties = {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n gap: config.gap,\n minHeight: config.minHeight,\n padding: `${spacing[1]}px ${config.padding}px`,\n paddingRight: spacing[10],\n backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n border: `1px solid ${\n isInvalid\n ? 'var(--brycks-error-default)'\n : isFocused\n ? 'var(--brycks-primary-default)'\n : 'var(--brycks-border-default)'\n }`,\n borderRadius: 'var(--brycks-radius-md)',\n transition: `all ${durations.fast}ms ${easings.easeOut}`,\n cursor: disabled ? 'not-allowed' : 'pointer',\n boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n }\n\n const chipStyle: CSSProperties = {\n display: 'inline-flex',\n alignItems: 'center',\n gap: spacing[1],\n height: config.chipHeight,\n padding: `0 ${spacing[2]}px`,\n fontSize: config.fontSize - 1,\n fontWeight: 500,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: 'var(--brycks-background-muted)',\n borderRadius: 'var(--brycks-radius-full)',\n whiteSpace: 'nowrap',\n }\n\n const chipRemoveStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[4],\n height: spacing[4],\n marginLeft: spacing[0.5],\n marginRight: -spacing[1],\n color: 'inherit',\n opacity: 0.7,\n cursor: 'pointer',\n borderRadius: 'var(--brycks-radius-full)',\n }\n\n const inputStyle: CSSProperties = {\n flex: 1,\n minWidth: 60,\n height: config.chipHeight,\n padding: 0,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: 'transparent',\n border: 'none',\n outline: 'none',\n }\n\n const iconsStyle: CSSProperties = {\n position: 'absolute',\n right: config.padding,\n top: '50%',\n transform: 'translateY(-50%)',\n display: 'flex',\n alignItems: 'center',\n gap: spacing[1],\n }\n\n const clearButtonStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[5],\n height: spacing[5],\n color: 'var(--brycks-foreground-muted)',\n cursor: 'pointer',\n borderRadius: 'var(--brycks-radius-sm)',\n transition: `all ${durations.fast}ms ${easings.easeOut}`,\n }\n\n const chevronStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--brycks-foreground-muted)',\n transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',\n transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n pointerEvents: 'none',\n }\n\n const dropdownStyle: CSSProperties = {\n position: 'absolute',\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n width: dropdownPosition.width,\n maxHeight: 300,\n overflowY: 'auto',\n backgroundColor: 'var(--brycks-background-elevated)',\n border: '1px solid var(--brycks-border-default)',\n borderRadius: 'var(--brycks-radius-lg)',\n boxShadow: 'var(--brycks-shadow-lg)',\n zIndex: 'var(--brycks-z-dropdown)' as unknown as number,\n padding: spacing[1],\n }\n\n const groupLabelStyle: CSSProperties = {\n padding: `${spacing[2]}px ${spacing[3]}px ${spacing[1]}px`,\n fontSize: fontSizes.xs,\n fontWeight: 600,\n color: 'var(--brycks-foreground-muted)',\n textTransform: 'uppercase',\n letterSpacing: '0.05em',\n }\n\n const optionStyle = (isActive: boolean, _isSelected: boolean): CSSProperties => ({\n display: 'flex',\n alignItems: 'center',\n gap: componentGap.md,\n padding: `${spacing[2]}px ${spacing[3]}px`,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: isActive ? 'var(--brycks-background-muted)' : 'transparent',\n borderRadius: 'var(--brycks-radius-md)',\n cursor: 'pointer',\n transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n })\n\n const emptyStyle: CSSProperties = {\n padding: `${spacing[4]}px ${spacing[3]}px`,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-muted)',\n textAlign: 'center',\n }\n\n let optionIndex = -1\n\n return (\n <div\n ref={(node) => {\n (containerRef as React.MutableRefObject<HTMLDivElement \| null>).current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n }}\n className={cx('brycks-multiselect', `brycks-multiselect--${size}`, className)}\n style={containerStyle}\n data-testid={testId}\n >\n <div\n style={wrapperStyle}\n onClick={() => {\n if (!disabled) {\n setIsOpen(true)\n inputRef.current?.focus()\n }\n }}\n >\n {selectedOptions.map((opt) => (\n <span key={opt.value} style={chipStyle}>\n {opt.label}\n <button\n type=\"button\"\n aria-label={`Remove ${opt.label}`}\n style={chipRemoveStyle}\n onClick={(e) => removeOption(opt.value, e)}\n onMouseEnter={(e) => {\n e.currentTarget.style.opacity = '1'\n e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.1)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.opacity = '0.7'\n e.currentTarget.style.backgroundColor = 'transparent'\n }}\n >\n <CloseIcon />\n </button>\n </span>\n ))}\n {searchable && (\n <input\n ref={inputRef}\n type=\"text\"\n role=\"combobox\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n aria-invalid={isInvalid}\n value={searchValue}\n placeholder={selectedOptions.length === 0 ? placeholder : ''}\n disabled={disabled}\n style={inputStyle}\n onChange={(e) => {\n setSearchValue(e.target.value)\n if (!isOpen) setIsOpen(true)\n setActiveIndex(0)\n }}\n onKeyDown={handleKeyDown}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n />\n )}\n {!searchable && selectedOptions.length === 0 && (\n <span style={{ color: 'var(--brycks-foreground-muted)', fontSize: config.fontSize }}>\n {placeholder}\n </span>\n )}\n <div style={iconsStyle}>\n {clearable && value.length > 0 && !disabled && (\n <button\n type=\"button\"\n aria-label=\"Clear all\"\n style={clearButtonStyle}\n onClick={clearAll}\n onMouseEnter={(e) => {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent'\n e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n }}\n >\n <CloseIcon />\n </button>\n )}\n <span style={chevronStyle}>\n <ChevronDownIcon />\n </span>\n </div>\n </div>\n\n {isOpen &&\n createPortal(\n <ul\n ref={listRef}\n role=\"listbox\"\n aria-label={ariaLabel \|\| 'Options'}\n aria-multiselectable=\"true\"\n style={dropdownStyle}\n >\n {flatOptions.length > 0 ? (\n Array.from(filteredOptions.entries()).map(([group, opts]) => (\n <li key={group \|\| 'ungrouped'} role=\"group\" aria-label={group}>\n {group && <div style={groupLabelStyle}>{group}</div>}\n <ul role=\"presentation\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n {opts.map((option) => {\n optionIndex++\n const currentIndex = optionIndex\n const isSelected = value.includes(option.value)\n const isActive = currentIndex === activeIndex\n\n return (\n <li\n key={option.value}\n role=\"option\"\n aria-selected={isSelected}\n style={optionStyle(isActive, isSelected)}\n onClick={() => toggleOption(option.value)}\n onMouseEnter={() => setActiveIndex(currentIndex)}\n >\n <span\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[5],\n height: spacing[5],\n borderRadius: 'var(--brycks-radius-sm)',\n border: isSelected\n ? 'none'\n : '1px solid var(--brycks-border-default)',\n backgroundColor: isSelected\n ? 'var(--brycks-primary-default)'\n : 'transparent',\n color: 'white',\n flexShrink: 0,\n }}\n >\n {isSelected && <CheckIcon />}\n </span>\n {option.icon && <span style={{ flexShrink: 0 }}>{option.icon}</span>}\n <div style={{ flex: 1, minWidth: 0 }}>\n <div style={{ fontWeight: isSelected ? 500 : 400 }}>{option.label}</div>\n {option.description && (\n <div style={{ fontSize: fontSizes.sm, color: 'var(--brycks-foreground-muted)' }}>\n {option.description}\n </div>\n )}\n </div>\n </li>\n )\n })}\n </ul>\n </li>\n ))\n ) : (\n <li style={emptyStyle}>{emptyText}</li>\n )}\n </ul>,\n document.body\n )}\n </div>\n )\n})\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":["sizeConfig","componentHeights","fontSizes","spacing","componentPaddingX","ChevronDownIcon","jsx","CloseIcon","CheckIcon","MultiSelect","forwardRef","options","controlledValue","defaultValue","onChange","placeholder","size","maxSelections","searchable","disabled","isInvalid","clearable","emptyText","closeOnSelect","ariaLabel","ariaLabelledby","className","testId","ref","internalValue","setInternalValue","useState","isOpen","setIsOpen","searchValue","setSearchValue","activeIndex","setActiveIndex","isFocused","setIsFocused","containerRef","useRef","inputRef","listRef","value","config","selectedOptions","useMemo","opt","filteredOptions","filtered","groups","group","flatOptions","flat","opts","updateValue","useCallback","newValue","toggleOption","optionValue","v","removeOption","e","clearAll","handleKeyDown","prev","useEffect","handleClick","dropdownPosition","setDropdownPosition","updatePosition","rect","containerStyle","wrapperStyle","durations","easings","chipStyle","chipRemoveStyle","inputStyle","iconsStyle","clearButtonStyle","chevronStyle","dropdownStyle","groupLabelStyle","optionStyle","isActive","_isSelected","componentGap","emptyStyle","optionIndex","jsxs","node","cx","createPortal","option","currentIndex","isSelected"],"mappings":";;;;;;;;AA+EA,MAAMA,KAAiI;AAAA,EACrI,IAAI,EAAE,WAAWC,EAAiB,IAAI,UAAUC,EAAU,OAAO,GAAG,YAAYC,EAAQ,CAAC,GAAG,SAASC,EAAkB,IAAI,KAAKD,EAAQ,CAAC,EAAA;AAAA,EACzI,IAAI,EAAE,WAAWF,EAAiB,IAAI,UAAUC,EAAU,MAAM,YAAYC,EAAQ,CAAC,GAAG,SAASC,EAAkB,IAAI,KAAKD,EAAQ,GAAG,EAAA;AAAA,EACvI,IAAI,EAAE,WAAWF,EAAiB,IAAI,UAAUC,EAAU,IAAI,YAAYC,EAAQ,CAAC,GAAG,SAASC,EAAkB,IAAI,KAAKD,EAAQ,CAAC,EAAA;AACrI;AAEA,SAASE,KAAkB;AACzB,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,4BAAC,QAAA,EAAK,GAAE,gBAAe,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,QAAA,CAAQ,EAAA,CAC9G;AAEJ;AAEA,SAASC,IAAY;AACnB,SACE,gBAAAD,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,UAAA,gBAAAA,EAAC,QAAA,EAAK,GAAE,qBAAoB,QAAO,gBAAe,aAAY,OAAM,eAAc,QAAA,CAAQ,EAAA,CAC5F;AAEJ;AAEA,SAASE,KAAY;AACnB,SACE,gBAAAF,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,4BAAC,QAAA,EAAK,GAAE,gBAAe,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,QAAA,CAAQ,EAAA,CAC5G;AAEJ;AAEO,MAAMG,KAAcC,GAA6C,SACtE;AAAA,EACE,SAAAC;AAAA,EACA,OAAOC;AAAA,EACP,cAAAC,IAAe,CAAA;AAAA,EACf,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAO;AAAA,EACP,eAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,WAAAC,KAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC;AAAA,EACA,QAAAC;AACF,GACAC,GACA;AACA,QAAM,CAACC,IAAeC,EAAgB,IAAIC,EAAmBlB,CAAY,GACnE,CAACmB,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3C,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAE,GAC3C,CAACO,GAAWC,CAAY,IAAIR,EAAS,EAAK,GAE1CS,IAAeC,EAAuB,IAAI,GAC1CC,IAAWD,EAAyB,IAAI,GACxCE,IAAUF,EAAyB,IAAI,GAEvCG,IAAQhC,MAAoB,SAAYA,IAAkBiB,IAC1DgB,IAAS7C,GAAWgB,CAAI,GAGxB8B,IAAkBC;AAAA,IACtB,MAAMpC,EAAQ,OAAO,CAACqC,MAAQJ,EAAM,SAASI,EAAI,KAAK,CAAC;AAAA,IACvD,CAACrC,GAASiC,CAAK;AAAA,EAAA,GAIXK,IAAkBF,EAAQ,MAAM;AACpC,QAAIG,IAAWvC,EAAQ;AAAA,MACrB,CAACqC,MACC,CAACA,EAAI,aACJA,EAAI,MAAM,cAAc,SAASd,EAAY,aAAa,KACzDc,EAAI,aAAa,cAAc,SAASd,EAAY,aAAa;AAAA,IAAA;AAIvE,UAAMiB,wBAAa,IAAA;AACnB,WAAAD,EAAS,QAAQ,CAACF,MAAQ;AACxB,YAAMI,IAAQJ,EAAI;AAClB,MAAKG,EAAO,IAAIC,CAAK,KACnBD,EAAO,IAAIC,GAAO,EAAE,GAEtBD,EAAO,IAAIC,CAAK,EAAG,KAAKJ,CAAG;AAAA,IAC7B,CAAC,GAEMG;AAAA,EACT,GAAG,CAACxC,GAASuB,CAAW,CAAC,GAGnBmB,IAAcN,EAAQ,MAAM;AAChC,UAAMO,IAA4B,CAAA;AAClC,WAAAL,EAAgB,QAAQ,CAACM,MAASD,EAAK,KAAK,GAAGC,CAAI,CAAC,GAC7CD;AAAA,EACT,GAAG,CAACL,CAAe,CAAC,GAEdO,IAAcC;AAAA,IAClB,CAACC,MAAuB;AACtB,MAAI9C,MAAoB,UACtBkB,GAAiB4B,CAAQ,GAE3B5C,IAAW4C,CAAQ;AAAA,IACrB;AAAA,IACA,CAAC9C,GAAiBE,CAAQ;AAAA,EAAA,GAGtB6C,IAAeF;AAAA,IACnB,CAACG,MAAwB;AAGvB,UAFmBhB,EAAM,SAASgB,CAAW;AAG3C,QAAAJ,EAAYZ,EAAM,OAAO,CAACiB,MAAMA,MAAMD,CAAW,CAAC;AAAA,WAC7C;AACL,YAAI3C,KAAiB2B,EAAM,UAAU3B,EAAe;AACpD,QAAAuC,EAAY,CAAC,GAAGZ,GAAOgB,CAAW,CAAC;AAAA,MACrC;AAEA,MAAIrC,KACFU,EAAU,EAAK,GAGjBE,EAAe,EAAE,GACjBO,EAAS,SAAS,MAAA;AAAA,IACpB;AAAA,IACA,CAACE,GAAO3B,GAAeM,GAAeiC,CAAW;AAAA,EAAA,GAG7CM,IAAeL;AAAA,IACnB,CAACG,GAAqBG,MAAyB;AAC7C,MAAAA,GAAG,gBAAA,GACHP,EAAYZ,EAAM,OAAO,CAACiB,MAAMA,MAAMD,CAAW,CAAC;AAAA,IACpD;AAAA,IACA,CAAChB,GAAOY,CAAW;AAAA,EAAA,GAGfQ,KAAWP;AAAA,IACf,CAAC,MAAwB;AACvB,QAAE,gBAAA,GACFD,EAAY,CAAA,CAAE,GACdd,EAAS,SAAS,MAAA;AAAA,IACpB;AAAA,IACA,CAACc,CAAW;AAAA,EAAA,GAGRS,KAAgBR;AAAA,IACpB,CAAC,MAAuC;AACtC,cAAQ,EAAE,KAAA;AAAA,QACR,KAAK;AACH,YAAE,eAAA,GACGzB,IAIHK,EAAe,CAAC6B,MAAS,KAAK,IAAIA,IAAO,GAAGb,EAAY,SAAS,CAAC,CAAC,KAHnEpB,EAAU,EAAI,GACdI,EAAe,CAAC;AAIlB;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACEL,KACFK,EAAe,CAAC6B,MAAS,KAAK,IAAIA,IAAO,GAAG,CAAC,CAAC;AAEhD;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACElC,KAAUI,KAAe,KAAKiB,EAAYjB,CAAW,KACvDuB,EAAaN,EAAYjB,CAAW,EAAE,KAAK;AAE7C;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACFH,EAAU,EAAK,GACfI,EAAe,EAAE;AACjB;AAAA,QACF,KAAK;AACH,UAAI,CAACH,KAAeU,EAAM,SAAS,KACjCkB,EAAalB,EAAMA,EAAM,SAAS,CAAC,CAAC;AAEtC;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,CAACZ,GAAQI,GAAaiB,GAAanB,GAAaU,GAAOe,GAAcG,CAAY;AAAA,EAAA;AAInF,EAAAK,EAAU,MAAM;AACd,QAAI,CAACnC,EAAQ;AAEb,UAAMoC,IAAc,CAACL,MAAkB;AACrC,MAAKvB,EAAa,SAAS,SAASuB,EAAE,MAAc,MAClD9B,EAAU,EAAK,GACfI,EAAe,EAAE,GACjBF,EAAe,EAAE;AAAA,IAErB;AAEA,oBAAS,iBAAiB,aAAaiC,CAAW,GAC3C,MAAM,SAAS,oBAAoB,aAAaA,CAAW;AAAA,EACpE,GAAG,CAACpC,CAAM,CAAC,GAGXmC,EAAU,MAAM;AACd,QAAI,CAACnC,KAAUI,IAAc,EAAG;AAIhC,IAHaO,EAAQ,SACD,iBAAiB,iBAAiB,IAC3BP,CAAW,GAC1B,eAAe,EAAE,OAAO,UAAA,CAAW;AAAA,EACjD,GAAG,CAACJ,GAAQI,CAAW,CAAC;AAGxB,QAAM,CAACiC,GAAkBC,EAAmB,IAAIvC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,EAAA,CAAG;AAEtF,EAAAoC,EAAU,MAAM;AACd,QAAI,CAACnC,KAAU,CAACQ,EAAa,QAAS;AAEtC,UAAM+B,IAAiB,MAAM;AAC3B,YAAMC,IAAOhC,EAAa,QAAS,sBAAA;AACnC,MAAA8B,GAAoB;AAAA,QAClB,KAAKE,EAAK,SAAS,OAAO,UAAUrE,EAAQ,CAAC;AAAA,QAC7C,MAAMqE,EAAK,OAAO,OAAO;AAAA,QACzB,OAAOA,EAAK;AAAA,MAAA,CACb;AAAA,IACH;AAEA,WAAAD,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAc,GAChD,OAAO,iBAAiB,UAAUA,GAAgB,EAAI,GAE/C,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAc,GACnD,OAAO,oBAAoB,UAAUA,GAAgB,EAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAACvC,CAAM,CAAC;AAEX,QAAMyC,KAAgC;AAAA,IACpC,UAAU;AAAA,IACV,OAAO;AAAA,EAAA,GAGHC,KAA8B;AAAA,IAClC,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK7B,EAAO;AAAA,IACZ,WAAWA,EAAO;AAAA,IAClB,SAAS,GAAG1C,EAAQ,CAAC,CAAC,MAAM0C,EAAO,OAAO;AAAA,IAC1C,cAAc1C,EAAQ,EAAE;AAAA,IACxB,iBAAiBgB,IAAW,mCAAmC;AAAA,IAC/D,QAAQ,aACNC,IACI,gCACAkB,IACA,kCACA,8BACN;AAAA,IACA,cAAc;AAAA,IACd,YAAY,OAAOqC,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,IACtD,QAAQzD,IAAW,gBAAgB;AAAA,IACnC,WAAWmB,IAAY,6BAA6B;AAAA,EAAA,GAGhDuC,KAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK1E,EAAQ,CAAC;AAAA,IACd,QAAQ0C,EAAO;AAAA,IACf,SAAS,KAAK1C,EAAQ,CAAC,CAAC;AAAA,IACxB,UAAU0C,EAAO,WAAW;AAAA,IAC5B,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,GAGRiC,KAAiC;AAAA,IACrC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO3E,EAAQ,CAAC;AAAA,IAChB,QAAQA,EAAQ,CAAC;AAAA,IACjB,YAAYA,EAAQ,GAAG;AAAA,IACvB,aAAa,CAACA,EAAQ,CAAC;AAAA,IACvB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,cAAc;AAAA,EAAA,GAGV4E,KAA4B;AAAA,IAChC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,QAAQlC,EAAO;AAAA,IACf,SAAS;AAAA,IACT,UAAUA,EAAO;AAAA,IACjB,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA,GAGLmC,KAA4B;AAAA,IAChC,UAAU;AAAA,IACV,OAAOnC,EAAO;AAAA,IACd,KAAK;AAAA,IACL,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK1C,EAAQ,CAAC;AAAA,EAAA,GAGV8E,KAAkC;AAAA,IACtC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO9E,EAAQ,CAAC;AAAA,IAChB,QAAQA,EAAQ,CAAC;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY,OAAOwE,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,EAAA,GAGlDM,KAA8B;AAAA,IAClC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,WAAWlD,IAAS,mBAAmB;AAAA,IACvC,YAAY,aAAa2C,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,IAC5D,eAAe;AAAA,EAAA,GAGXO,KAA+B;AAAA,IACnC,UAAU;AAAA,IACV,KAAKd,EAAiB;AAAA,IACtB,MAAMA,EAAiB;AAAA,IACvB,OAAOA,EAAiB;AAAA,IACxB,WAAW;AAAA,IACX,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAASlE,EAAQ,CAAC;AAAA,EAAA,GAGdiF,KAAiC;AAAA,IACrC,SAAS,GAAGjF,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC;AAAA,IACtD,UAAUD,EAAU;AAAA,IACpB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,eAAe;AAAA,IACf,eAAe;AAAA,EAAA,GAGXmF,KAAc,CAACC,GAAmBC,OAAyC;AAAA,IAC/E,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKC,GAAa;AAAA,IAClB,SAAS,GAAGrF,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC;AAAA,IACtC,UAAU0C,EAAO;AAAA,IACjB,OAAO;AAAA,IACP,iBAAiByC,IAAW,mCAAmC;AAAA,IAC/D,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,YAAY,oBAAoBX,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,EAAA,IAG/Da,KAA4B;AAAA,IAChC,SAAS,GAAGtF,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC;AAAA,IACtC,UAAU0C,EAAO;AAAA,IACjB,OAAO;AAAA,IACP,WAAW;AAAA,EAAA;AAGb,MAAI6C,IAAc;AAElB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,CAACC,MAAS;AACZ,QAAApD,EAA+D,UAAUoD,GACtE,OAAOhE,KAAQ,aAAYA,EAAIgE,CAAI,IAC9BhE,QAAS,UAAUgE;AAAA,MAC9B;AAAA,MACA,WAAWC,GAAG,sBAAsB,uBAAuB7E,CAAI,IAAIU,EAAS;AAAA,MAC5E,OAAO+C;AAAA,MACP,eAAa9C;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAgE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAOjB;AAAA,YACP,SAAS,MAAM;AACb,cAAKvD,MACHc,EAAU,EAAI,GACdS,EAAS,SAAS,MAAA;AAAA,YAEtB;AAAA,YAEC,UAAA;AAAA,cAAAI,EAAgB,IAAI,CAACE,MACpB,gBAAA2C,EAAC,QAAA,EAAqB,OAAOd,IAC1B,UAAA;AAAA,gBAAA7B,EAAI;AAAA,gBACL,gBAAA1C;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAY,UAAU0C,EAAI,KAAK;AAAA,oBAC/B,OAAO8B;AAAA,oBACP,SAAS,CAACf,MAAMD,EAAad,EAAI,OAAOe,CAAC;AAAA,oBACzC,cAAc,CAACA,MAAM;AACnB,sBAAAA,EAAE,cAAc,MAAM,UAAU,KAChCA,EAAE,cAAc,MAAM,kBAAkB;AAAA,oBAC1C;AAAA,oBACA,cAAc,CAACA,MAAM;AACnB,sBAAAA,EAAE,cAAc,MAAM,UAAU,OAChCA,EAAE,cAAc,MAAM,kBAAkB;AAAA,oBAC1C;AAAA,oBAEA,4BAACxD,GAAA,CAAA,CAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACb,KAjBSyC,EAAI,KAkBf,CACD;AAAA,cACA9B,KACC,gBAAAZ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAKoC;AAAA,kBACL,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,cAAYlB;AAAA,kBACZ,mBAAiBC;AAAA,kBACjB,iBAAeO;AAAA,kBACf,iBAAc;AAAA,kBACd,qBAAkB;AAAA,kBAClB,gBAAcZ;AAAA,kBACd,OAAOc;AAAA,kBACP,aAAaY,EAAgB,WAAW,IAAI/B,IAAc;AAAA,kBAC1D,UAAAI;AAAA,kBACA,OAAO4D;AAAA,kBACP,UAAU,CAAC,MAAM;AACf,oBAAA5C,EAAe,EAAE,OAAO,KAAK,GACxBH,KAAQC,EAAU,EAAI,GAC3BI,EAAe,CAAC;AAAA,kBAClB;AAAA,kBACA,WAAW4B;AAAA,kBACX,SAAS,MAAM1B,EAAa,EAAI;AAAA,kBAChC,QAAQ,MAAMA,EAAa,EAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGnC,CAACrB,KAAc4B,EAAgB,WAAW,KACzC,gBAAAxC,EAAC,QAAA,EAAK,OAAO,EAAE,OAAO,kCAAkC,UAAUuC,EAAO,SAAA,GACtE,UAAA9B,GACH;AAAA,cAEF,gBAAA4E,EAAC,OAAA,EAAI,OAAOX,IACT,UAAA;AAAA,gBAAA3D,KAAauB,EAAM,SAAS,KAAK,CAACzB,KACjC,gBAAAb;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAW;AAAA,oBACX,OAAO2E;AAAA,oBACP,SAASjB;AAAA,oBACT,cAAc,CAAC,MAAM;AACnB,wBAAE,cAAc,MAAM,kBAAkB,kCACxC,EAAE,cAAc,MAAM,QAAQ;AAAA,oBAChC;AAAA,oBACA,cAAc,CAAC,MAAM;AACnB,wBAAE,cAAc,MAAM,kBAAkB,eACxC,EAAE,cAAc,MAAM,QAAQ;AAAA,oBAChC;AAAA,oBAEA,4BAACzD,GAAA,CAAA,CAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,kCAGd,QAAA,EAAK,OAAO2E,IACX,UAAA,gBAAA5E,EAACD,MAAgB,EAAA,CACnB;AAAA,cAAA,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD2B,KACC8D;AAAA,UACE,gBAAAxF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKqC;AAAA,cACL,MAAK;AAAA,cACL,cAAYnB,KAAa;AAAA,cACzB,wBAAqB;AAAA,cACrB,OAAO2D;AAAA,cAEN,UAAA9B,EAAY,SAAS,IACpB,MAAM,KAAKJ,EAAgB,QAAA,CAAS,EAAE,IAAI,CAAC,CAACG,GAAOG,CAAI,MACrD,gBAAAoC,EAAC,QAA8B,MAAK,SAAQ,cAAYvC,GACrD,UAAA;AAAA,gBAAAA,KAAS,gBAAA9C,EAAC,OAAA,EAAI,OAAO8E,IAAkB,UAAAhC,GAAM;AAAA,kCAC7C,MAAA,EAAG,MAAK,gBAAe,OAAO,EAAE,WAAW,QAAQ,QAAQ,GAAG,SAAS,EAAA,GACrE,UAAAG,EAAK,IAAI,CAACwC,MAAW;AACpB,kBAAAL;AACA,wBAAMM,IAAeN,GACfO,IAAarD,EAAM,SAASmD,EAAO,KAAK;AAG9C,yBACE,gBAAAJ;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,MAAK;AAAA,sBACL,iBAAeM;AAAA,sBACf,OAAOZ,GAPMW,MAAiB5D,CAOS;AAAA,sBACvC,SAAS,MAAMuB,EAAaoC,EAAO,KAAK;AAAA,sBACxC,cAAc,MAAM1D,EAAe2D,CAAY;AAAA,sBAE/C,UAAA;AAAA,wBAAA,gBAAA1F;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,OAAO;AAAA,8BACL,SAAS;AAAA,8BACT,YAAY;AAAA,8BACZ,gBAAgB;AAAA,8BAChB,OAAOH,EAAQ,CAAC;AAAA,8BAChB,QAAQA,EAAQ,CAAC;AAAA,8BACjB,cAAc;AAAA,8BACd,QAAQ8F,IACJ,SACA;AAAA,8BACJ,iBAAiBA,IACb,kCACA;AAAA,8BACJ,OAAO;AAAA,8BACP,YAAY;AAAA,4BAAA;AAAA,4BAGb,UAAAA,uBAAezF,IAAA,CAAA,CAAU;AAAA,0BAAA;AAAA,wBAAA;AAAA,wBAE3BuF,EAAO,QAAQ,gBAAAzF,EAAC,QAAA,EAAK,OAAO,EAAE,YAAY,EAAA,GAAM,UAAAyF,EAAO,KAAA,CAAK;AAAA,wBAC7D,gBAAAJ,EAAC,SAAI,OAAO,EAAE,MAAM,GAAG,UAAU,KAC/B,UAAA;AAAA,0BAAA,gBAAArF,EAAC,OAAA,EAAI,OAAO,EAAE,YAAY2F,IAAa,MAAM,IAAA,GAAQ,UAAAF,EAAO,MAAA,CAAM;AAAA,0BACjEA,EAAO,eACN,gBAAAzF,EAAC,OAAA,EAAI,OAAO,EAAE,UAAUJ,EAAU,IAAI,OAAO,iCAAA,GAC1C,YAAO,YAAA,CACV;AAAA,wBAAA,EAAA,CAEJ;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAnCK6F,EAAO;AAAA,kBAAA;AAAA,gBAsClB,CAAC,EAAA,CACH;AAAA,cAAA,EAAA,GAlDO3C,KAAS,WAmDlB,CACD,sBAEA,MAAA,EAAG,OAAOqC,IAAa,UAAAnE,GAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAGtC,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA;AAAA,EAAA;AAGR,CAAC;AAEDb,GAAY,cAAc;"}
1	+ {"version":3,"file":"MultiSelect.js","sources":["../../../../src/components/form/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/*\n MultiSelect Component\n \n A dropdown component for selecting multiple options.\n * Displays selected items as chips with removal capability.\n \n @module components/form/MultiSelect\n /\n\nimport {\n forwardRef,\n useState,\n useCallback,\n useRef,\n useEffect,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type KeyboardEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentHeights, componentPaddingX, componentGap } from '../../../design-system/primitives'\n\nexport type MultiSelectSize = 'sm' \| 'md' \| 'lg'\n\nexport interface MultiSelectOption {\n /* Unique identifier /\n value: string\n /* Display label /\n label: string\n /* Optional description /\n description?: string\n /* Optional icon /\n icon?: ReactNode\n /* Whether the option is disabled /\n disabled?: boolean\n /* Optional group /\n group?: string\n}\n\nexport interface MultiSelectProps {\n /* Available options /\n options: MultiSelectOption[]\n /* Selected values (controlled) /\n value?: string[]\n /* Default selected values (uncontrolled) /\n defaultValue?: string[]\n /* Callback when selection changes /\n onChange?: (values: string[]) => void\n /* Placeholder text /\n placeholder?: string\n /* Component size /\n size?: MultiSelectSize\n /* Maximum selections allowed /\n maxSelections?: number\n /* Whether the select is searchable /\n searchable?: boolean\n /* Whether the select is disabled /\n disabled?: boolean\n /* Whether the select is invalid /\n isInvalid?: boolean\n /* Whether to allow clearing all /\n clearable?: boolean\n /* Text when no options match search /\n emptyText?: string\n /* Whether to close on select /\n closeOnSelect?: boolean\n /* Label for accessibility /\n 'aria-label'?: string\n /* ID of element that labels this select /\n 'aria-labelledby'?: string\n /* Custom class name /\n className?: string\n /* Test ID */\n testId?: string\n}\n\nconst sizeConfig: Record<MultiSelectSize, { minHeight: number; fontSize: number; chipHeight: number; padding: number; gap: number }> = {\n sm: { minHeight: componentHeights.sm, fontSize: fontSizes.base - 1, chipHeight: spacing[5], padding: componentPaddingX.xs, gap: spacing[1] },\n md: { minHeight: componentHeights.md, fontSize: fontSizes.base, chipHeight: spacing[6], padding: componentPaddingX.sm, gap: spacing[1.5] },\n lg: { minHeight: componentHeights.lg, fontSize: fontSizes.md, chipHeight: spacing[7], padding: componentPaddingX.sm, gap: spacing[2] },\n}\n\nfunction ChevronDownIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\nfunction CheckIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 8l3 3 7-7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\nexport const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(\n {\n options,\n value: controlledValue,\n defaultValue = [],\n onChange,\n placeholder = 'Select options...',\n size = 'md',\n maxSelections,\n searchable = true,\n disabled = false,\n isInvalid = false,\n clearable = true,\n emptyText = 'No options found',\n closeOnSelect = false,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n className,\n testId,\n },\n ref\n) {\n const [internalValue, setInternalValue] = useState<string[]>(defaultValue)\n const [isOpen, setIsOpen] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n const [activeIndex, setActiveIndex] = useState(-1)\n const [isFocused, setIsFocused] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLUListElement>(null)\n\n const value = controlledValue !== undefined ? controlledValue : internalValue\n const config = sizeConfig[size]\n\n // Get selected options\n const selectedOptions = useMemo(\n () => options.filter((opt) => value.includes(opt.value)),\n [options, value]\n )\n\n // Filter and group options\n const filteredOptions = useMemo(() => {\n const filtered = options.filter(\n (opt) =>\n !opt.disabled &&\n (opt.label.toLowerCase().includes(searchValue.toLowerCase()) \|\|\n opt.description?.toLowerCase().includes(searchValue.toLowerCase()))\n )\n\n // Group by group property\n const groups = new Map<string \| undefined, MultiSelectOption[]>()\n filtered.forEach((opt) => {\n const group = opt.group\n if (!groups.has(group)) {\n groups.set(group, [])\n }\n groups.get(group)!.push(opt)\n })\n\n return groups\n }, [options, searchValue])\n\n // Flatten for keyboard navigation\n const flatOptions = useMemo(() => {\n const flat: MultiSelectOption[] = []\n filteredOptions.forEach((opts) => flat.push(...opts))\n return flat\n }, [filteredOptions])\n\n const updateValue = useCallback(\n (newValue: string[]) => {\n if (controlledValue === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n },\n [controlledValue, onChange]\n )\n\n const toggleOption = useCallback(\n (optionValue: string) => {\n const isSelected = value.includes(optionValue)\n\n if (isSelected) {\n updateValue(value.filter((v) => v !== optionValue))\n } else {\n if (maxSelections && value.length >= maxSelections) return\n updateValue([...value, optionValue])\n }\n\n if (closeOnSelect) {\n setIsOpen(false)\n }\n\n setSearchValue('')\n inputRef.current?.focus()\n },\n [value, maxSelections, closeOnSelect, updateValue]\n )\n\n const removeOption = useCallback(\n (optionValue: string, e?: React.MouseEvent) => {\n e?.stopPropagation()\n updateValue(value.filter((v) => v !== optionValue))\n },\n [value, updateValue]\n )\n\n const clearAll = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n updateValue([])\n inputRef.current?.focus()\n },\n [updateValue]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault()\n if (!isOpen) {\n setIsOpen(true)\n setActiveIndex(0)\n } else {\n setActiveIndex((prev) => Math.min(prev + 1, flatOptions.length - 1))\n }\n break\n case 'ArrowUp':\n e.preventDefault()\n if (isOpen) {\n setActiveIndex((prev) => Math.max(prev - 1, 0))\n }\n break\n case 'Enter':\n e.preventDefault()\n if (isOpen && activeIndex >= 0 && flatOptions[activeIndex]) {\n toggleOption(flatOptions[activeIndex].value)\n }\n break\n case 'Escape':\n e.preventDefault()\n setIsOpen(false)\n setActiveIndex(-1)\n break\n case 'Backspace':\n if (!searchValue && value.length > 0) {\n removeOption(value[value.length - 1])\n }\n break\n }\n },\n [isOpen, activeIndex, flatOptions, searchValue, value, toggleOption, removeOption]\n )\n\n // Close on outside click\n useEffect(() => {\n if (!isOpen) return\n\n const handleClick = (e: MouseEvent) => {\n if (!containerRef.current?.contains(e.target as Node)) {\n setIsOpen(false)\n setActiveIndex(-1)\n setSearchValue('')\n }\n }\n\n document.addEventListener('mousedown', handleClick)\n return () => document.removeEventListener('mousedown', handleClick)\n }, [isOpen])\n\n // Scroll active option into view\n useEffect(() => {\n if (!isOpen \|\| activeIndex < 0) return\n const list = listRef.current\n const items = list?.querySelectorAll('[role=\"option\"]')\n const activeItem = items?.[activeIndex] as HTMLElement \| undefined\n activeItem?.scrollIntoView({ block: 'nearest' })\n }, [isOpen, activeIndex])\n\n // Calculate dropdown position\n const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })\n\n useEffect(() => {\n if (!isOpen \|\| !containerRef.current) return\n\n const updatePosition = () => {\n const rect = containerRef.current!.getBoundingClientRect()\n setDropdownPosition({\n top: rect.bottom + window.scrollY + spacing[1],\n left: rect.left + window.scrollX,\n width: rect.width,\n })\n }\n\n updatePosition()\n window.addEventListener('resize', updatePosition)\n window.addEventListener('scroll', updatePosition, true)\n\n return () => {\n window.removeEventListener('resize', updatePosition)\n window.removeEventListener('scroll', updatePosition, true)\n }\n }, [isOpen])\n\n const containerStyle: CSSProperties = {\n position: 'relative',\n width: '100%',\n }\n\n const wrapperStyle: CSSProperties = {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n gap: config.gap,\n minHeight: config.minHeight,\n padding: `${spacing[1]}px ${config.padding}px`,\n paddingRight: spacing[10],\n backgroundColor: disabled ? 'var(--brycks-background-muted)' : 'var(--brycks-background-default)',\n border: `1px solid ${\n isInvalid\n ? 'var(--brycks-error-default)'\n : isFocused\n ? 'var(--brycks-primary-default)'\n : 'var(--brycks-border-default)'\n }`,\n borderRadius: 'var(--brycks-radius-md)',\n transition: `all ${durations.fast}ms ${easings.easeOut}`,\n cursor: disabled ? 'not-allowed' : 'pointer',\n boxShadow: isFocused ? 'var(--brycks-focus-ring)' : undefined,\n }\n\n const chipStyle: CSSProperties = {\n display: 'inline-flex',\n alignItems: 'center',\n gap: spacing[1],\n height: config.chipHeight,\n padding: `0 ${spacing[2]}px`,\n fontSize: config.fontSize - 1,\n fontWeight: 500,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: 'var(--brycks-background-muted)',\n borderRadius: 'var(--brycks-radius-full)',\n whiteSpace: 'nowrap',\n }\n\n const chipRemoveStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[4],\n height: spacing[4],\n marginLeft: spacing[0.5],\n marginRight: -spacing[1],\n color: 'inherit',\n opacity: 0.7,\n cursor: 'pointer',\n borderRadius: 'var(--brycks-radius-full)',\n }\n\n const inputStyle: CSSProperties = {\n flex: 1,\n minWidth: 60,\n height: config.chipHeight,\n padding: 0,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: 'transparent',\n border: 'none',\n outline: 'none',\n }\n\n const iconsStyle: CSSProperties = {\n position: 'absolute',\n right: config.padding,\n top: '50%',\n transform: 'translateY(-50%)',\n display: 'flex',\n alignItems: 'center',\n gap: spacing[1],\n }\n\n const clearButtonStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[5],\n height: spacing[5],\n color: 'var(--brycks-foreground-muted)',\n cursor: 'pointer',\n borderRadius: 'var(--brycks-radius-sm)',\n transition: `all ${durations.fast}ms ${easings.easeOut}`,\n }\n\n const chevronStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--brycks-foreground-muted)',\n transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',\n transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n pointerEvents: 'none',\n }\n\n const dropdownStyle: CSSProperties = {\n position: 'absolute',\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n width: dropdownPosition.width,\n maxHeight: 300,\n overflowY: 'auto',\n backgroundColor: 'var(--brycks-background-elevated)',\n border: '1px solid var(--brycks-border-default)',\n borderRadius: 'var(--brycks-radius-lg)',\n boxShadow: 'var(--brycks-shadow-lg)',\n zIndex: 'var(--brycks-z-dropdown)' as unknown as number,\n padding: spacing[1],\n }\n\n const groupLabelStyle: CSSProperties = {\n padding: `${spacing[2]}px ${spacing[3]}px ${spacing[1]}px`,\n fontSize: fontSizes.xs,\n fontWeight: 600,\n color: 'var(--brycks-foreground-muted)',\n textTransform: 'uppercase',\n letterSpacing: '0.05em',\n }\n\n const optionStyle = (isActive: boolean, _isSelected: boolean): CSSProperties => ({\n display: 'flex',\n alignItems: 'center',\n gap: componentGap.md,\n padding: `${spacing[2]}px ${spacing[3]}px`,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-default)',\n backgroundColor: isActive ? 'var(--brycks-background-muted)' : 'transparent',\n borderRadius: 'var(--brycks-radius-md)',\n cursor: 'pointer',\n transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n })\n\n const emptyStyle: CSSProperties = {\n padding: `${spacing[4]}px ${spacing[3]}px`,\n fontSize: config.fontSize,\n color: 'var(--brycks-foreground-muted)',\n textAlign: 'center',\n }\n\n let optionIndex = -1\n\n return (\n <div\n ref={(node) => {\n (containerRef as React.MutableRefObject<HTMLDivElement \| null>).current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n }}\n className={cx('brycks-multiselect', `brycks-multiselect--${size}`, className)}\n style={containerStyle}\n data-testid={testId}\n >\n <div\n style={wrapperStyle}\n onClick={() => {\n if (!disabled) {\n setIsOpen(true)\n inputRef.current?.focus()\n }\n }}\n >\n {selectedOptions.map((opt) => (\n <span key={opt.value} style={chipStyle}>\n {opt.label}\n <button\n type=\"button\"\n aria-label={`Remove ${opt.label}`}\n style={chipRemoveStyle}\n onClick={(e) => removeOption(opt.value, e)}\n onMouseEnter={(e) => {\n e.currentTarget.style.opacity = '1'\n e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.1)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.opacity = '0.7'\n e.currentTarget.style.backgroundColor = 'transparent'\n }}\n >\n <CloseIcon />\n </button>\n </span>\n ))}\n {searchable && (\n <input\n ref={inputRef}\n type=\"text\"\n role=\"combobox\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n aria-invalid={isInvalid}\n value={searchValue}\n placeholder={selectedOptions.length === 0 ? placeholder : ''}\n disabled={disabled}\n style={inputStyle}\n onChange={(e) => {\n setSearchValue(e.target.value)\n if (!isOpen) setIsOpen(true)\n setActiveIndex(0)\n }}\n onKeyDown={handleKeyDown}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n />\n )}\n {!searchable && selectedOptions.length === 0 && (\n <span style={{ color: 'var(--brycks-foreground-muted)', fontSize: config.fontSize }}>\n {placeholder}\n </span>\n )}\n <div style={iconsStyle}>\n {clearable && value.length > 0 && !disabled && (\n <button\n type=\"button\"\n aria-label=\"Clear all\"\n style={clearButtonStyle}\n onClick={clearAll}\n onMouseEnter={(e) => {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent'\n e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n }}\n >\n <CloseIcon />\n </button>\n )}\n <span style={chevronStyle}>\n <ChevronDownIcon />\n </span>\n </div>\n </div>\n\n {isOpen &&\n createPortal(\n <ul\n ref={listRef}\n role=\"listbox\"\n aria-label={ariaLabel \|\| 'Options'}\n aria-multiselectable=\"true\"\n style={dropdownStyle}\n >\n {flatOptions.length > 0 ? (\n Array.from(filteredOptions.entries()).map(([group, opts]) => (\n <li key={group \|\| 'ungrouped'} role=\"group\" aria-label={group}>\n {group && <div style={groupLabelStyle}>{group}</div>}\n <ul role=\"presentation\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n {opts.map((option) => {\n optionIndex++\n const currentIndex = optionIndex\n const isSelected = value.includes(option.value)\n const isActive = currentIndex === activeIndex\n\n return (\n <li\n key={option.value}\n role=\"option\"\n aria-selected={isSelected}\n style={optionStyle(isActive, isSelected)}\n onClick={() => toggleOption(option.value)}\n onMouseEnter={() => setActiveIndex(currentIndex)}\n >\n <span\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: spacing[5],\n height: spacing[5],\n borderRadius: 'var(--brycks-radius-sm)',\n border: isSelected\n ? 'none'\n : '1px solid var(--brycks-border-default)',\n backgroundColor: isSelected\n ? 'var(--brycks-primary-default)'\n : 'transparent',\n color: 'white',\n flexShrink: 0,\n }}\n >\n {isSelected && <CheckIcon />}\n </span>\n {option.icon && <span style={{ flexShrink: 0 }}>{option.icon}</span>}\n <div style={{ flex: 1, minWidth: 0 }}>\n <div style={{ fontWeight: isSelected ? 500 : 400 }}>{option.label}</div>\n {option.description && (\n <div style={{ fontSize: fontSizes.sm, color: 'var(--brycks-foreground-muted)' }}>\n {option.description}\n </div>\n )}\n </div>\n </li>\n )\n })}\n </ul>\n </li>\n ))\n ) : (\n <li style={emptyStyle}>{emptyText}</li>\n )}\n </ul>,\n document.body\n )}\n </div>\n )\n})\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":["sizeConfig","componentHeights","fontSizes","spacing","componentPaddingX","ChevronDownIcon","jsx","CloseIcon","CheckIcon","MultiSelect","forwardRef","options","controlledValue","defaultValue","onChange","placeholder","size","maxSelections","searchable","disabled","isInvalid","clearable","emptyText","closeOnSelect","ariaLabel","ariaLabelledby","className","testId","ref","internalValue","setInternalValue","useState","isOpen","setIsOpen","searchValue","setSearchValue","activeIndex","setActiveIndex","isFocused","setIsFocused","containerRef","useRef","inputRef","listRef","value","config","selectedOptions","useMemo","opt","filteredOptions","filtered","groups","group","flatOptions","flat","opts","updateValue","useCallback","newValue","toggleOption","optionValue","v","removeOption","e","clearAll","handleKeyDown","prev","useEffect","handleClick","dropdownPosition","setDropdownPosition","updatePosition","rect","containerStyle","wrapperStyle","durations","easings","chipStyle","chipRemoveStyle","inputStyle","iconsStyle","clearButtonStyle","chevronStyle","dropdownStyle","groupLabelStyle","optionStyle","isActive","_isSelected","componentGap","emptyStyle","optionIndex","jsxs","node","cx","createPortal","option","currentIndex","isSelected"],"mappings":"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"}

package/dist/components/form/Radio/Radio.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),k=require("../../../utils/styles.cjs"),N={sm:{radio:16,dot:6,fontSize:13,gap:8},md:{radio:20,dot:8,fontSize:14,gap:10},lg:{radio:24,dot:10,fontSize:16,gap:12}},j=y.forwardRef(function({size:a="md",label:n,description:i,isInvalid:f=!1,disabled:t=!1,className:d,style:g,testId:l,checked:s,...m},b){const[x,c]=y.useState(!1),[v,u]=y.useState(!1),o=N[a],e={display:"inline-flex",alignItems:"flex-start",gap:o.gap,cursor:t?"not-allowed":"pointer",opacity:t?.5:1,...g},S={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:o.radio,height:o.radio,flexShrink:0},p={width:o.radio,height:o.radio,borderRadius:"50%",border:`2px solid ${f?"var(--brycks-error-default)":s?"var(--brycks-primary-default)":x?"var(--brycks-border-strong)":"var(--brycks-border-default)"}`,backgroundColor:s?"var(--brycks-primary-default)":"var(--brycks-background-input)",transition:"all 150ms ease-out",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:v?"0 0 0 3px var(--brycks-primary-100)":void 0},w={width:o.dot,height:o.dot,borderRadius:"50%",backgroundColor:"white",transform:s?"scale(1)":"scale(0)",transition:"transform 150ms ease-out"},C={position:"absolute",width:o.radio,height:o.radio,opacity:0,margin:0,cursor:t?"not-allowed":"pointer"},z={display:"flex",flexDirection:"column",gap:2},I={fontSize:o.fontSize,fontWeight:500,color:t?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},H={fontSize:o.fontSize-1,color:"var(--brycks-foreground-muted)",lineHeight:1.4};return r.jsxs("label",{className:k.cx("brycks-radio",`brycks-radio--${a}`,d),style:e,onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),children:[r.jsxs("span",{style:S,children:[r.jsx("span",{style:p,children:r.jsx("span",{style:w})}),r.jsx("input",{ref:b,type:"radio",disabled:t,checked:s,style:C,onFocus:()=>u(!0),onBlur:()=>u(!1),"data-testid":l,...m})]}),(n||i)&&r.jsxs("span",{style:z,children:[n&&r.jsx("span",{style:I,children:n}),i&&r.jsx("span",{style:H,children:i})]})]})});j.displayName="Radio";function R({name:h,value:a,defaultValue:n,onChange:i,disabled:f=!1,size:t="md",orientation:d="vertical",gap:g=12,children:l,className:s,style:m}){const[b,x]=y.useState(n??""),c=a??b,v=e=>{a===void 0&&x(e),i?.(e)},u={display:"flex",flexDirection:d==="vertical"?"column":"row",flexWrap:d==="horizontal"?"wrap":void 0,gap:g,...m},o=Array.isArray(l)?l.map((e,S)=>{if(e&&typeof e=="object"&&"props"in e){const p=e.props.value;return{...e,key:e.key??S,props:{...e.props,name:h,size:t,disabled:f||e.props.disabled,checked:p===c,onChange:()=>v(p)}}}return e}):l;return r.jsx("div",{role:"radiogroup",className:k.cx("brycks-radio-group",s),style:u,children:o})}R.displayName="RadioGroup";exports.Radio=j;exports.RadioGroup=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("react"),k=require("../../../utils/styles.cjs"),N={sm:{radio:16,dot:6,fontSize:13,gap:8},md:{radio:20,dot:8,fontSize:14,gap:10},lg:{radio:24,dot:10,fontSize:16,gap:12}},j=p.forwardRef(function({size:a="md",label:n,description:i,isInvalid:f=!1,disabled:t=!1,className:d,style:g,testId:l,checked:s,...b},m){const[v,c]=p.useState(!1),[x,u]=p.useState(!1),o=N[a],e={display:"inline-flex",alignItems:"flex-start",gap:o.gap,cursor:t?"not-allowed":"pointer",opacity:t?.5:1,...g},S={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:o.radio,height:o.radio,flexShrink:0},y={width:o.radio,height:o.radio,borderRadius:"50%",border:`2px solid ${f?"var(--brycks-error-default)":s?"var(--brycks-primary-default)":v?"var(--brycks-border-strong)":"var(--brycks-border-default)"}`,backgroundColor:s?"var(--brycks-primary-default)":"var(--brycks-background-elevated)",transition:"all 150ms ease-out",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:x?"var(--brycks-focus-ring)":void 0},C={width:o.dot,height:o.dot,borderRadius:"50%",backgroundColor:"var(--brycks-primary-foreground)",transform:s?"scale(1)":"scale(0)",transition:"transform 150ms ease-out"},w={position:"absolute",width:o.radio,height:o.radio,opacity:0,margin:0,cursor:t?"not-allowed":"pointer"},z={display:"flex",flexDirection:"column",gap:2},I={fontSize:o.fontSize,fontWeight:500,color:t?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},H={fontSize:o.fontSize-1,color:"var(--brycks-foreground-muted)",lineHeight:1.4};return r.jsxs("label",{className:k.cx("brycks-radio",`brycks-radio--${a}`,d),style:e,onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),children:[r.jsxs("span",{style:S,children:[r.jsx("span",{style:y,children:r.jsx("span",{style:C})}),r.jsx("input",{ref:m,type:"radio",disabled:t,checked:s,style:w,onFocus:()=>u(!0),onBlur:()=>u(!1),"data-testid":l,...b})]}),(n||i)&&r.jsxs("span",{style:z,children:[n&&r.jsx("span",{style:I,children:n}),i&&r.jsx("span",{style:H,children:i})]})]})});j.displayName="Radio";function R({name:h,value:a,defaultValue:n,onChange:i,disabled:f=!1,size:t="md",orientation:d="vertical",gap:g=12,children:l,className:s,style:b}){const[m,v]=p.useState(n??""),c=a??m,x=e=>{a===void 0&&v(e),i?.(e)},u={display:"flex",flexDirection:d==="vertical"?"column":"row",flexWrap:d==="horizontal"?"wrap":void 0,gap:g,...b},o=Array.isArray(l)?l.map((e,S)=>{if(e&&typeof e=="object"&&"props"in e){const y=e.props.value;return{...e,key:e.key??S,props:{...e.props,name:h,size:t,disabled:f||e.props.disabled,checked:y===c,onChange:()=>x(y)}}}return e}):l;return r.jsx("div",{role:"radiogroup",className:k.cx("brycks-radio-group",s),style:u,children:o})}R.displayName="RadioGroup";exports.Radio=j;exports.RadioGroup=R;
 //# sourceMappingURL=Radio.cjs.map

package/dist/components/form/Radio/Radio.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.cjs","sources":["../../../../src/components/form/Radio/Radio.tsx"],"sourcesContent":["/*\n Radio Component\n \n Accessible radio button with custom styling.\n * Supports different sizes and states.\n /\n\nimport {\n forwardRef,\n useState,\n type CSSProperties,\n type InputHTMLAttributes,\n type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type RadioSize = 'sm' \| 'md' \| 'lg'\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' \| 'type'> {\n /* Radio size /\n size?: RadioSize\n /* Radio label /\n label?: ReactNode\n /* Description below the label /\n description?: ReactNode\n /* Whether the radio is invalid /\n isInvalid?: boolean\n /* Custom class name /\n className?: string\n /* Test ID /\n testId?: string\n}\n\nconst sizeConfig: Record<RadioSize, { radio: number; dot: number; fontSize: number; gap: number }> = {\n sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },\n md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },\n lg: { radio: 24, dot: 10, fontSize: 16, gap: 12 },\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n {\n size = 'md',\n label,\n description,\n isInvalid = false,\n disabled = false,\n className,\n style,\n testId,\n checked,\n ...props\n },\n ref\n) {\n const [isHovered, setIsHovered] = useState(false)\n const [isFocused, setIsFocused] = useState(false)\n const config = sizeConfig[size]\n\n const containerStyle: CSSProperties = {\n display: 'inline-flex',\n alignItems: 'flex-start',\n gap: config.gap,\n cursor: disabled ? 'not-allowed' : 'pointer',\n opacity: disabled ? 0.5 : 1,\n ...style,\n }\n\n const radioContainerStyle: CSSProperties = {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.radio,\n height: config.radio,\n flexShrink: 0,\n }\n\n const radioStyle: CSSProperties = {\n width: config.radio,\n height: config.radio,\n borderRadius: '50%',\n border: `2px solid ${\n isInvalid\n ? 'var(--brycks-error-default)'\n : checked\n ? 'var(--brycks-primary-default)'\n : isHovered\n ? 'var(--brycks-border-strong)'\n : 'var(--brycks-border-default)'\n }`,\n backgroundColor: checked\n ? 'var(--brycks-primary-default)'\n : 'var(--brycks-background-input)',\n transition: 'all 150ms ease-out',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n boxShadow: isFocused\n ? '0 0 0 3px var(--brycks-primary-100)'\n : undefined,\n }\n\n const dotStyle: CSSProperties = {\n width: config.dot,\n height: config.dot,\n borderRadius: '50%',\n backgroundColor: 'white',\n transform: checked ? 'scale(1)' : 'scale(0)',\n transition: 'transform 150ms ease-out',\n }\n\n const inputStyle: CSSProperties = {\n position: 'absolute',\n width: config.radio,\n height: config.radio,\n opacity: 0,\n margin: 0,\n cursor: disabled ? 'not-allowed' : 'pointer',\n }\n\n const labelContainerStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n }\n\n const labelStyle: CSSProperties = {\n fontSize: config.fontSize,\n fontWeight: 500,\n color: disabled\n ? 'var(--brycks-foreground-muted)'\n : 'var(--brycks-foreground-default)',\n lineHeight: 1.4,\n }\n\n const descriptionStyle: CSSProperties = {\n fontSize: config.fontSize - 1,\n color: 'var(--brycks-foreground-muted)',\n lineHeight: 1.4,\n }\n\n return (\n <label\n className={cx('brycks-radio', `brycks-radio--${size}`, className)}\n style={containerStyle}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <span style={radioContainerStyle}>\n <span style={radioStyle}>\n <span style={dotStyle} />\n </span>\n <input\n ref={ref}\n type=\"radio\"\n disabled={disabled}\n checked={checked}\n style={inputStyle}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n data-testid={testId}\n {...props}\n />\n </span>\n {(label \|\| description) && (\n <span style={labelContainerStyle}>\n {label && <span style={labelStyle}>{label}</span>}\n {description && <span style={descriptionStyle}>{description}</span>}\n </span>\n )}\n </label>\n )\n})\n\nRadio.displayName = 'Radio'\n\n// RadioGroup component for grouping radios\nexport interface RadioGroupProps {\n /* Radio group name /\n name: string\n /* Current value /\n value?: string\n /* Default value (uncontrolled) /\n defaultValue?: string\n /* Callback when value changes /\n onChange?: (value: string) => void\n /* Whether the group is disabled /\n disabled?: boolean\n /* Radio size /\n size?: RadioSize\n /* Orientation /\n orientation?: 'horizontal' \| 'vertical'\n /* Gap between items /\n gap?: number\n /* Children (Radio components) /\n children: ReactNode\n /* Custom class name /\n className?: string\n /* Custom styles */\n style?: CSSProperties\n}\n\nexport function RadioGroup({\n name,\n value: controlledValue,\n defaultValue,\n onChange,\n disabled = false,\n size = 'md',\n orientation = 'vertical',\n gap = 12,\n children,\n className,\n style,\n}: RadioGroupProps) {\n const [internalValue, setInternalValue] = useState(defaultValue ?? '')\n const value = controlledValue ?? internalValue\n\n const handleChange = (newValue: string) => {\n if (controlledValue === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n }\n\n const groupStyle: CSSProperties = {\n display: 'flex',\n flexDirection: orientation === 'vertical' ? 'column' : 'row',\n flexWrap: orientation === 'horizontal' ? 'wrap' : undefined,\n gap,\n ...style,\n }\n\n // Clone children and inject props\n const clonedChildren = Array.isArray(children)\n ? children.map((child, index) => {\n if (child && typeof child === 'object' && 'props' in child) {\n const childValue = child.props.value\n return {\n ...child,\n key: child.key ?? index,\n props: {\n ...child.props,\n name,\n size,\n disabled: disabled \|\| child.props.disabled,\n checked: childValue === value,\n onChange: () => handleChange(childValue),\n },\n }\n }\n return child\n })\n : children\n\n return (\n <div\n role=\"radiogroup\"\n className={cx('brycks-radio-group', className)}\n style={groupStyle}\n >\n {clonedChildren}\n </div>\n )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"],"names":["sizeConfig","Radio","forwardRef","size","label","description","isInvalid","disabled","className","style","testId","checked","props","ref","isHovered","setIsHovered","useState","isFocused","setIsFocused","config","containerStyle","radioContainerStyle","radioStyle","dotStyle","inputStyle","labelContainerStyle","labelStyle","descriptionStyle","jsxs","cx","jsx","RadioGroup","name","controlledValue","defaultValue","onChange","orientation","gap","children","internalValue","setInternalValue","value","handleChange","newValue","groupStyle","clonedChildren","child","index","childValue"],"mappings":"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"}
1	+ {"version":3,"file":"Radio.cjs","sources":["../../../../src/components/form/Radio/Radio.tsx"],"sourcesContent":["/*\n Radio Component\n \n Accessible radio button with custom styling.\n * Supports different sizes and states.\n /\n\nimport {\n forwardRef,\n useState,\n type CSSProperties,\n type InputHTMLAttributes,\n type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type RadioSize = 'sm' \| 'md' \| 'lg'\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' \| 'type'> {\n /* Radio size /\n size?: RadioSize\n /* Radio label /\n label?: ReactNode\n /* Description below the label /\n description?: ReactNode\n /* Whether the radio is invalid /\n isInvalid?: boolean\n /* Custom class name /\n className?: string\n /* Test ID /\n testId?: string\n}\n\nconst sizeConfig: Record<RadioSize, { radio: number; dot: number; fontSize: number; gap: number }> = {\n sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },\n md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },\n lg: { radio: 24, dot: 10, fontSize: 16, gap: 12 },\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n {\n size = 'md',\n label,\n description,\n isInvalid = false,\n disabled = false,\n className,\n style,\n testId,\n checked,\n ...props\n },\n ref\n) {\n const [isHovered, setIsHovered] = useState(false)\n const [isFocused, setIsFocused] = useState(false)\n const config = sizeConfig[size]\n\n const containerStyle: CSSProperties = {\n display: 'inline-flex',\n alignItems: 'flex-start',\n gap: config.gap,\n cursor: disabled ? 'not-allowed' : 'pointer',\n opacity: disabled ? 0.5 : 1,\n ...style,\n }\n\n const radioContainerStyle: CSSProperties = {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.radio,\n height: config.radio,\n flexShrink: 0,\n }\n\n const radioStyle: CSSProperties = {\n width: config.radio,\n height: config.radio,\n borderRadius: '50%',\n border: `2px solid ${\n isInvalid\n ? 'var(--brycks-error-default)'\n : checked\n ? 'var(--brycks-primary-default)'\n : isHovered\n ? 'var(--brycks-border-strong)'\n : 'var(--brycks-border-default)'\n }`,\n backgroundColor: checked\n ? 'var(--brycks-primary-default)'\n : 'var(--brycks-background-elevated)',\n transition: 'all 150ms ease-out',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n boxShadow: isFocused\n ? 'var(--brycks-focus-ring)'\n : undefined,\n }\n\n const dotStyle: CSSProperties = {\n width: config.dot,\n height: config.dot,\n borderRadius: '50%',\n backgroundColor: 'var(--brycks-primary-foreground)',\n transform: checked ? 'scale(1)' : 'scale(0)',\n transition: 'transform 150ms ease-out',\n }\n\n const inputStyle: CSSProperties = {\n position: 'absolute',\n width: config.radio,\n height: config.radio,\n opacity: 0,\n margin: 0,\n cursor: disabled ? 'not-allowed' : 'pointer',\n }\n\n const labelContainerStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n }\n\n const labelStyle: CSSProperties = {\n fontSize: config.fontSize,\n fontWeight: 500,\n color: disabled\n ? 'var(--brycks-foreground-muted)'\n : 'var(--brycks-foreground-default)',\n lineHeight: 1.4,\n }\n\n const descriptionStyle: CSSProperties = {\n fontSize: config.fontSize - 1,\n color: 'var(--brycks-foreground-muted)',\n lineHeight: 1.4,\n }\n\n return (\n <label\n className={cx('brycks-radio', `brycks-radio--${size}`, className)}\n style={containerStyle}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <span style={radioContainerStyle}>\n <span style={radioStyle}>\n <span style={dotStyle} />\n </span>\n <input\n ref={ref}\n type=\"radio\"\n disabled={disabled}\n checked={checked}\n style={inputStyle}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n data-testid={testId}\n {...props}\n />\n </span>\n {(label \|\| description) && (\n <span style={labelContainerStyle}>\n {label && <span style={labelStyle}>{label}</span>}\n {description && <span style={descriptionStyle}>{description}</span>}\n </span>\n )}\n </label>\n )\n})\n\nRadio.displayName = 'Radio'\n\n// RadioGroup component for grouping radios\nexport interface RadioGroupProps {\n /* Radio group name /\n name: string\n /* Current value /\n value?: string\n /* Default value (uncontrolled) /\n defaultValue?: string\n /* Callback when value changes /\n onChange?: (value: string) => void\n /* Whether the group is disabled /\n disabled?: boolean\n /* Radio size /\n size?: RadioSize\n /* Orientation /\n orientation?: 'horizontal' \| 'vertical'\n /* Gap between items /\n gap?: number\n /* Children (Radio components) /\n children: ReactNode\n /* Custom class name /\n className?: string\n /* Custom styles */\n style?: CSSProperties\n}\n\nexport function RadioGroup({\n name,\n value: controlledValue,\n defaultValue,\n onChange,\n disabled = false,\n size = 'md',\n orientation = 'vertical',\n gap = 12,\n children,\n className,\n style,\n}: RadioGroupProps) {\n const [internalValue, setInternalValue] = useState(defaultValue ?? '')\n const value = controlledValue ?? internalValue\n\n const handleChange = (newValue: string) => {\n if (controlledValue === undefined) {\n setInternalValue(newValue)\n }\n onChange?.(newValue)\n }\n\n const groupStyle: CSSProperties = {\n display: 'flex',\n flexDirection: orientation === 'vertical' ? 'column' : 'row',\n flexWrap: orientation === 'horizontal' ? 'wrap' : undefined,\n gap,\n ...style,\n }\n\n // Clone children and inject props\n const clonedChildren = Array.isArray(children)\n ? children.map((child, index) => {\n if (child && typeof child === 'object' && 'props' in child) {\n const childValue = child.props.value\n return {\n ...child,\n key: child.key ?? index,\n props: {\n ...child.props,\n name,\n size,\n disabled: disabled \|\| child.props.disabled,\n checked: childValue === value,\n onChange: () => handleChange(childValue),\n },\n }\n }\n return child\n })\n : children\n\n return (\n <div\n role=\"radiogroup\"\n className={cx('brycks-radio-group', className)}\n style={groupStyle}\n >\n {clonedChildren}\n </div>\n )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"],"names":["sizeConfig","Radio","forwardRef","size","label","description","isInvalid","disabled","className","style","testId","checked","props","ref","isHovered","setIsHovered","useState","isFocused","setIsFocused","config","containerStyle","radioContainerStyle","radioStyle","dotStyle","inputStyle","labelContainerStyle","labelStyle","descriptionStyle","jsxs","cx","jsx","RadioGroup","name","controlledValue","defaultValue","onChange","orientation","gap","children","internalValue","setInternalValue","value","handleChange","newValue","groupStyle","clonedChildren","child","index","childValue"],"mappings":"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"}