@brycks/core-front 0.3.5 → 0.3.6

package/dist/components/form/FormCard/FormCard.js

@@ -1,4 +1,4 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
 import { cx as h } from "../../../utils/styles.js";
 const x = {
@@ -12,7 +12,7 @@ const x = {
   function({
     title: e,
     icon: s,
-    iconIntent: d = "primary",
+    iconIntent: t = "primary",
     headerExtra: a,
     children: c,
     className: o,
@@ -21,9 +21,9 @@ const x = {
     ...l
   }, y) {
     const m = {
-      background: "var(--brycks-background-card)",
+      background: "var(--brycks-background-elevated)",
       borderRadius: "var(--brycks-radius-lg)",
-      border: "1px solid var(--brycks-border-subtle)",
+      border: "1px solid var(--brycks-border-muted)",
       overflow: "hidden",
       ...n
     }, b = {
@@ -31,7 +31,7 @@ const x = {
       alignItems: "center",
       justifyContent: "space-between",
       padding: "16px 20px",
-      borderBottom: "1px solid var(--brycks-border-subtle)"
+      borderBottom: "1px solid var(--brycks-border-muted)"
     }, f = {
       display: "flex",
       alignItems: "center",
@@ -40,7 +40,7 @@ const x = {
       width: 32,
       height: 32,
       borderRadius: "50%",
-      background: x[d],
+      background: x[t],
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -55,7 +55,7 @@ const x = {
     }, v = {
       padding: 20
     }, p = e || s || a;
-    return /* @__PURE__ */ t(
+    return /* @__PURE__ */ d(
       "div",
       {
         ref: y,
@@ -64,8 +64,8 @@ const x = {
         "data-testid": i,
         ...l,
         children: [
-          p && /* @__PURE__ */ t("div", { className: "brycks-form-card__header", style: b, children: [
-            /* @__PURE__ */ t("div", { style: f, children: [
+          p && /* @__PURE__ */ d("div", { className: "brycks-form-card__header", style: b, children: [
+            /* @__PURE__ */ d("div", { style: f, children: [
               s && /* @__PURE__ */ r(
                 "div",
                 {

package/dist/components/form/FormCard/FormCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCard.js","sources":["../../../../src/components/form/FormCard/FormCard.tsx"],"sourcesContent":["/**\n * FormCard Component\n *\n * Card wrapper optimized for form sections with optional icon and title.\n * Provides consistent spacing and visual hierarchy for form layouts.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FormCardIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info'\n\nexport interface FormCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string\n  /** Icon displayed before title */\n  icon?: ReactNode\n  /** Color intent for the icon circle */\n  iconIntent?: FormCardIntent\n  /** Additional content in the header (e.g., counter, badge) */\n  headerExtra?: ReactNode\n  /** Card body content */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentColors: Record<FormCardIntent, string> = {\n  neutral: 'var(--brycks-background-muted)',\n  primary: 'var(--brycks-primary-muted)',\n  success: 'var(--brycks-success-muted)',\n  warning: 'var(--brycks-warning-muted)',\n  error: 'var(--brycks-error-muted)',\n  info: 'var(--brycks-info-muted)',\n}\n\nexport const FormCard = forwardRef<HTMLDivElement, FormCardProps>(\n  function FormCard(\n    {\n      title,\n      icon,\n      iconIntent = 'primary',\n      headerExtra,\n      children,\n      className,\n      style,\n      testId,\n      ...props\n    },\n    ref\n  ) {\n    const cardStyle: CSSProperties = {\n      background: 'var(--brycks-background-card)',\n      borderRadius: 'var(--brycks-radius-lg)',\n      border: '1px solid var(--brycks-border-subtle)',\n      overflow: 'hidden',\n      ...style,\n    }\n\n    const headerStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '16px 20px',\n      borderBottom: '1px solid var(--brycks-border-subtle)',\n    }\n\n    const headerLeftStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 12,\n    }\n\n    const iconCircleStyle: CSSProperties = {\n      width: 32,\n      height: 32,\n      borderRadius: '50%',\n      background: intentColors[iconIntent],\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    }\n\n    const titleStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-md)',\n      fontWeight: 600,\n      color: 'var(--brycks-foreground-default)',\n      lineHeight: 1.4,\n      margin: 0,\n    }\n\n    const bodyStyle: CSSProperties = {\n      padding: 20,\n    }\n\n    const hasHeader = title || icon || headerExtra\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-form-card', className)}\n        style={cardStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {hasHeader && (\n          <div className=\"brycks-form-card__header\" style={headerStyle}>\n            <div style={headerLeftStyle}>\n              {icon && (\n                <div\n                  className=\"brycks-form-card__icon\"\n                  style={iconCircleStyle}\n                >\n                  {icon}\n                </div>\n              )}\n              {title && (\n                <h3 className=\"brycks-form-card__title\" style={titleStyle}>\n                  {title}\n                </h3>\n              )}\n            </div>\n            {headerExtra && (\n              <div className=\"brycks-form-card__header-extra\">\n                {headerExtra}\n              </div>\n            )}\n          </div>\n        )}\n\n        <div className=\"brycks-form-card__body\" style={bodyStyle}>\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nFormCard.displayName = 'FormCard'\n"],"names":["intentColors","FormCard","forwardRef","title","icon","iconIntent","headerExtra","children","className","style","testId","props","ref","cardStyle","headerStyle","headerLeftStyle","iconCircleStyle","titleStyle","bodyStyle","hasHeader","jsxs","cx","jsx"],"mappings":";;;AAkCA,MAAMA,IAA+C;AAAA,EACnD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,GAEaC,IAAWC;AAAA,EACtB,SACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAA2B;AAAA,MAC/B,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAGJ;AAAA,IAAA,GAGCK,IAA6B;AAAA,MACjC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,cAAc;AAAA,IAAA,GAGVC,IAAiC;AAAA,MACrC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,IAAA,GAGDC,IAAiC;AAAA,MACrC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,YAAYhB,EAAaK,CAAU;AAAA,MACnC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY;AAAA,IAAA,GAGRY,IAA4B;AAAA,MAChC,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA,GAGJC,IAA2B;AAAA,MAC/B,SAAS;AAAA,IAAA,GAGLC,IAAYhB,KAASC,KAAQE;AAEnC,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,WAAWS,EAAG,oBAAoBb,CAAS;AAAA,QAC3C,OAAOK;AAAA,QACP,eAAaH;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAA;AAAA,UAAAQ,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BAA2B,OAAON,GAC/C,UAAA;AAAA,YAAA,gBAAAM,EAAC,OAAA,EAAI,OAAOL,GACT,UAAA;AAAA,cAAAX,KACC,gBAAAkB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAON;AAAA,kBAEN,UAAAZ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJD,KACC,gBAAAmB,EAAC,MAAA,EAAG,WAAU,2BAA0B,OAAOL,GAC5C,UAAAd,EAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YACCG,KACC,gBAAAgB,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAAhB,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,4BAGD,OAAA,EAAI,WAAU,0BAAyB,OAAOY,GAC5C,UAAAX,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAN,EAAS,cAAc;"}
+{"version":3,"file":"FormCard.js","sources":["../../../../src/components/form/FormCard/FormCard.tsx"],"sourcesContent":["/**\n * FormCard Component\n *\n * Card wrapper optimized for form sections with optional icon and title.\n * Provides consistent spacing and visual hierarchy for form layouts.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FormCardIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info'\n\nexport interface FormCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string\n  /** Icon displayed before title */\n  icon?: ReactNode\n  /** Color intent for the icon circle */\n  iconIntent?: FormCardIntent\n  /** Additional content in the header (e.g., counter, badge) */\n  headerExtra?: ReactNode\n  /** Card body content */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentColors: Record<FormCardIntent, string> = {\n  neutral: 'var(--brycks-background-muted)',\n  primary: 'var(--brycks-primary-muted)',\n  success: 'var(--brycks-success-muted)',\n  warning: 'var(--brycks-warning-muted)',\n  error: 'var(--brycks-error-muted)',\n  info: 'var(--brycks-info-muted)',\n}\n\nexport const FormCard = forwardRef<HTMLDivElement, FormCardProps>(\n  function FormCard(\n    {\n      title,\n      icon,\n      iconIntent = 'primary',\n      headerExtra,\n      children,\n      className,\n      style,\n      testId,\n      ...props\n    },\n    ref\n  ) {\n    const cardStyle: CSSProperties = {\n      background: 'var(--brycks-background-elevated)',\n      borderRadius: 'var(--brycks-radius-lg)',\n      border: '1px solid var(--brycks-border-muted)',\n      overflow: 'hidden',\n      ...style,\n    }\n\n    const headerStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '16px 20px',\n      borderBottom: '1px solid var(--brycks-border-muted)',\n    }\n\n    const headerLeftStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 12,\n    }\n\n    const iconCircleStyle: CSSProperties = {\n      width: 32,\n      height: 32,\n      borderRadius: '50%',\n      background: intentColors[iconIntent],\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    }\n\n    const titleStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-md)',\n      fontWeight: 600,\n      color: 'var(--brycks-foreground-default)',\n      lineHeight: 1.4,\n      margin: 0,\n    }\n\n    const bodyStyle: CSSProperties = {\n      padding: 20,\n    }\n\n    const hasHeader = title || icon || headerExtra\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-form-card', className)}\n        style={cardStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {hasHeader && (\n          <div className=\"brycks-form-card__header\" style={headerStyle}>\n            <div style={headerLeftStyle}>\n              {icon && (\n                <div\n                  className=\"brycks-form-card__icon\"\n                  style={iconCircleStyle}\n                >\n                  {icon}\n                </div>\n              )}\n              {title && (\n                <h3 className=\"brycks-form-card__title\" style={titleStyle}>\n                  {title}\n                </h3>\n              )}\n            </div>\n            {headerExtra && (\n              <div className=\"brycks-form-card__header-extra\">\n                {headerExtra}\n              </div>\n            )}\n          </div>\n        )}\n\n        <div className=\"brycks-form-card__body\" style={bodyStyle}>\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nFormCard.displayName = 'FormCard'\n"],"names":["intentColors","FormCard","forwardRef","title","icon","iconIntent","headerExtra","children","className","style","testId","props","ref","cardStyle","headerStyle","headerLeftStyle","iconCircleStyle","titleStyle","bodyStyle","hasHeader","jsxs","cx","jsx"],"mappings":";;;AAkCA,MAAMA,IAA+C;AAAA,EACnD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,GAEaC,IAAWC;AAAA,EACtB,SACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAA2B;AAAA,MAC/B,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAGJ;AAAA,IAAA,GAGCK,IAA6B;AAAA,MACjC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,cAAc;AAAA,IAAA,GAGVC,IAAiC;AAAA,MACrC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,IAAA,GAGDC,IAAiC;AAAA,MACrC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,YAAYhB,EAAaK,CAAU;AAAA,MACnC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY;AAAA,IAAA,GAGRY,IAA4B;AAAA,MAChC,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA,GAGJC,IAA2B;AAAA,MAC/B,SAAS;AAAA,IAAA,GAGLC,IAAYhB,KAASC,KAAQE;AAEnC,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,WAAWS,EAAG,oBAAoBb,CAAS;AAAA,QAC3C,OAAOK;AAAA,QACP,eAAaH;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAA;AAAA,UAAAQ,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BAA2B,OAAON,GAC/C,UAAA;AAAA,YAAA,gBAAAM,EAAC,OAAA,EAAI,OAAOL,GACT,UAAA;AAAA,cAAAX,KACC,gBAAAkB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAON;AAAA,kBAEN,UAAAZ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJD,KACC,gBAAAmB,EAAC,MAAA,EAAG,WAAU,2BAA0B,OAAOL,GAC5C,UAAAd,EAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YACCG,KACC,gBAAAgB,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAAhB,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,4BAGD,OAAA,EAAI,WAAU,0BAAyB,OAAOY,GAC5C,UAAAX,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAN,EAAS,cAAc;"}

package/dist/components/form/FormField/FormField.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),C=require("react"),D=require("../../../utils/styles.cjs"),H=require("../../../hooks/useId.cjs"),N={sm:{labelSize:12,helperSize:11,gap:4},md:{labelSize:14,helperSize:12,gap:6},lg:{labelSize:16,helperSize:14,gap:8}},u=C.forwardRef(function({size:t="md",label:n,required:g=!1,helperText:o,error:e,isInvalid:p=!1,disabled:d=!1,fieldId:h,orientation:r="vertical",labelWidth:m=120,className:S,style:b,children:a,testId:v,...x},z){const k=H.useId("field"),i=h||k,c=`${i}-helper`,f=`${i}-error`,s=N[t],y=p||!!e,F={display:"flex",flexDirection:r==="horizontal"?"row":"column",gap:r==="horizontal"?16:s.gap,alignItems:r==="horizontal"?"flex-start":"stretch",opacity:d?.6:1,...b},j={display:"flex",alignItems:"baseline",gap:4,...r==="horizontal"&&{width:m,flexShrink:0,paddingTop:t==="lg"?14:t==="md"?10:8}},I={fontSize:s.labelSize,fontWeight:500,color:d?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},q={color:"var(--brycks-error-default)",marginLeft:2},$={display:"flex",flexDirection:"column",gap:s.gap,flex:1},w={fontSize:s.helperSize,color:y?"var(--brycks-error-default)":"var(--brycks-foreground-muted)",lineHeight:1.4},R={id:i,"aria-describedby":o||e?e?f:c:void 0,"aria-invalid":y?!0:void 0};return l.jsxs("div",{ref:z,className:D.cx("brycks-form-field",`brycks-form-field--${t}`,`brycks-form-field--${r}`,S),style:F,"data-testid":v,...x,children:[n&&l.jsx("div",{style:j,children:l.jsxs("label",{htmlFor:i,style:I,children:[n,g&&l.jsx("span",{style:q,"aria-hidden":"true",children:"*"})]})}),l.jsxs("div",{style:$,children:[typeof a=="function"?a(R):a,(o||e)&&l.jsx("span",{id:e?f:c,style:w,role:e?"alert":void 0,children:e||o})]})]})});u.displayName="FormField";exports.FormField=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("react"),H=require("../../../utils/styles.cjs"),N=require("../../../hooks/useId.cjs"),P={sm:{labelSize:12,helperSize:11,gap:4},md:{labelSize:14,helperSize:12,gap:6},lg:{labelSize:16,helperSize:14,gap:8}},b=c.forwardRef(function({size:t="md",label:y,required:h=!1,helperText:f,error:e,isInvalid:S=!1,disabled:p=!1,fieldId:v,orientation:r="vertical",labelWidth:x=120,className:z,style:k,children:l,testId:F,...j},I){const q=N.useId("field"),s=v||q,u=`${s}-helper`,m=`${s}-error`,a=P[t],g=S||!!e,$={display:"flex",flexDirection:r==="horizontal"?"row":"column",gap:r==="horizontal"?16:a.gap,alignItems:r==="horizontal"?"flex-start":"stretch",opacity:p?.6:1,...k},w={display:"flex",alignItems:"baseline",gap:4,...r==="horizontal"&&{width:x,flexShrink:0,paddingTop:t==="lg"?14:t==="md"?10:8}},C={fontSize:a.labelSize,fontWeight:500,color:p?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},E={color:"var(--brycks-error-default)",marginLeft:2},R={display:"flex",flexDirection:"column",gap:a.gap,flex:1},D={fontSize:a.helperSize,color:g?"var(--brycks-error-default)":"var(--brycks-foreground-muted)",lineHeight:1.4},o={id:s,"aria-describedby":f||e?e?m:u:void 0,"aria-invalid":g?!0:void 0};let n;if(typeof l=="function")n=l(o);else if(c.isValidElement(l)&&c.Children.count(l)===1){const d=l;n=c.cloneElement(d,{id:d.props.id??o.id,"aria-describedby":d.props["aria-describedby"]??o["aria-describedby"],"aria-invalid":d.props["aria-invalid"]??o["aria-invalid"]})}else n=l;return i.jsxs("div",{ref:I,className:H.cx("brycks-form-field",`brycks-form-field--${t}`,`brycks-form-field--${r}`,z),style:$,"data-testid":F,...j,children:[y&&i.jsx("div",{style:w,children:i.jsxs("label",{htmlFor:s,style:C,children:[y,h&&i.jsx("span",{style:E,"aria-hidden":"true",children:"*"})]})}),i.jsxs("div",{style:R,children:[n,(f||e)&&i.jsx("span",{id:e?m:u,style:D,role:e?"alert":void 0,children:e||f})]})]})});b.displayName="FormField";exports.FormField=b;
 //# sourceMappingURL=FormField.cjs.map

package/dist/components/form/FormField/FormField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.cjs","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {typeof children === 'function' ? children(childProps) : children}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","jsxs","cx","jsx"],"mappings":"qNA0CMA,EAA4F,CAChG,GAAI,CAAE,UAAW,GAAI,WAAY,GAAI,IAAK,CAAA,EAC1C,GAAI,CAAE,UAAW,GAAI,WAAY,GAAI,IAAK,CAAA,EAC1C,GAAI,CAAE,UAAW,GAAI,WAAY,GAAI,IAAK,CAAA,CAC5C,EAEaC,EAAYC,EAAAA,WAA2C,SAClE,CACE,KAAAC,EAAO,KACP,MAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,QAAAC,EACA,YAAAC,EAAc,WACd,WAAAC,EAAa,IACb,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAM,OAAO,EAC3BC,EAAKX,GAAWS,EAChBG,EAAW,GAAGD,CAAE,UAChBE,EAAU,GAAGF,CAAE,SACfG,EAASxB,EAAWG,CAAI,EACxBsB,EAAWjB,GAAa,CAAC,CAACD,EAE1BmB,EAAgC,CACpC,QAAS,OACT,cAAef,IAAgB,aAAe,MAAQ,SACtD,IAAKA,IAAgB,aAAe,GAAKa,EAAO,IAChD,WAAYb,IAAgB,aAAe,aAAe,UAC1D,QAASF,EAAW,GAAM,EAC1B,GAAGK,CAAA,EAGCa,EAAqC,CACzC,QAAS,OACT,WAAY,WACZ,IAAK,EACL,GAAIhB,IAAgB,cAAgB,CAClC,MAAOC,EACP,WAAY,EACZ,WAAYT,IAAS,KAAO,GAAKA,IAAS,KAAO,GAAK,CAAA,CACxD,EAGIyB,EAA4B,CAChC,SAAUJ,EAAO,UACjB,WAAY,IACZ,MAAOf,EACH,iCACA,mCACJ,WAAY,GAAA,EAGRoB,EAA+B,CACnC,MAAO,8BACP,WAAY,CAAA,EAGRC,EAA8B,CAClC,QAAS,OACT,cAAe,SACf,IAAKN,EAAO,IACZ,KAAM,CAAA,EAGFO,EAA6B,CACjC,SAAUP,EAAO,WACjB,MAAOC,EAAW,8BAAgC,iCAClD,WAAY,GAAA,EAIRO,EAAa,CACjB,GAAAX,EACA,mBAAoBf,GAAcC,EAASA,EAAQgB,EAAUD,EAAY,OACzE,eAAgBG,EAAW,GAAO,MAAA,EAGpC,OACEQ,EAAAA,KAAC,MAAA,CACC,IAAAf,EACA,UAAWgB,EAAAA,GAAG,oBAAqB,sBAAsB/B,CAAI,GAAI,sBAAsBQ,CAAW,GAAIE,CAAS,EAC/G,MAAOa,EACP,cAAaV,EACZ,GAAGC,EAEH,SAAA,CAAAb,GACC+B,EAAAA,IAAC,OAAI,MAAOR,EACV,gBAAC,QAAA,CAAM,QAASN,EAAI,MAAOO,EACxB,SAAA,CAAAxB,EACAC,GAAY8B,EAAAA,IAAC,OAAA,CAAK,MAAON,EAAe,cAAY,OAAO,SAAA,GAAA,CAAC,CAAA,CAAA,CAC/D,CAAA,CACF,EAEFI,EAAAA,KAAC,MAAA,CAAI,MAAOH,EACT,SAAA,CAAA,OAAOf,GAAa,WAAaA,EAASiB,CAAU,EAAIjB,GACvDT,GAAcC,IACd4B,EAAAA,IAAC,OAAA,CACC,GAAI5B,EAAQgB,EAAUD,EACtB,MAAOS,EACP,KAAMxB,EAAQ,QAAU,OAEvB,SAAAA,GAASD,CAAA,CAAA,CACZ,CAAA,CAEJ,CAAA,CAAA,CAAA,CAGN,CAAC,EAEDL,EAAU,YAAc"}
+{"version":3,"file":"FormField.cjs","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n  type ReactElement,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  // Wire id/aria onto the input automatically when children is a single\n  // element, so `<FormField label=\"...\"><Input /></FormField>` associates the\n  // label without the render-prop form. Explicit props on the child win.\n  let content: ReactNode\n  if (typeof children === 'function') {\n    content = children(childProps)\n  } else if (isValidElement(children) && Children.count(children) === 1) {\n    const element = children as ReactElement<Record<string, unknown>>\n    content = cloneElement(element, {\n      id: element.props.id ?? childProps.id,\n      'aria-describedby': element.props['aria-describedby'] ?? childProps['aria-describedby'],\n      'aria-invalid': element.props['aria-invalid'] ?? childProps['aria-invalid'],\n    })\n  } else {\n    content = children\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {content}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","content","isValidElement","Children","element","cloneElement","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/form/FormField/FormField.js

@@ -1,88 +1,100 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { forwardRef as H } from "react";
-import { cx as N } from "../../../utils/styles.js";
-import { useId as q } from "../../../hooks/useId.js";
-const E = {
+import { jsxs as c, jsx as f } from "react/jsx-runtime";
+import { forwardRef as N, isValidElement as q, Children as L, cloneElement as P } from "react";
+import { cx as R } from "../../../utils/styles.js";
+import { useId as V } from "../../../hooks/useId.js";
+const W = {
   sm: { labelSize: 12, helperSize: 11, gap: 4 },
   md: { labelSize: 14, helperSize: 12, gap: 6 },
   lg: { labelSize: 16, helperSize: 14, gap: 8 }
-}, L = H(function({
+}, A = N(function({
   size: r = "md",
-  label: d,
-  required: y = !1,
-  helperText: i,
+  label: p,
+  required: h = !1,
+  helperText: n,
   error: e,
-  isInvalid: g = !1,
-  disabled: c = !1,
-  fieldId: h,
-  orientation: l = "vertical",
-  labelWidth: u = 120,
-  className: S,
-  style: b,
-  children: a,
-  testId: v,
-  ...z
-}, x) {
-  const k = q("field"), o = h || k, f = `${o}-helper`, p = `${o}-error`, t = E[r], m = g || !!e, F = {
+  isInvalid: u = !1,
+  disabled: m = !1,
+  fieldId: S,
+  orientation: i = "vertical",
+  labelWidth: v = 120,
+  className: z,
+  style: x,
+  children: l,
+  testId: k,
+  ...F
+}, I) {
+  const $ = V("field"), o = S || $, y = `${o}-helper`, g = `${o}-error`, t = W[r], b = u || !!e, w = {
     display: "flex",
-    flexDirection: l === "horizontal" ? "row" : "column",
-    gap: l === "horizontal" ? 16 : t.gap,
-    alignItems: l === "horizontal" ? "flex-start" : "stretch",
-    opacity: c ? 0.6 : 1,
-    ...b
-  }, I = {
+    flexDirection: i === "horizontal" ? "row" : "column",
+    gap: i === "horizontal" ? 16 : t.gap,
+    alignItems: i === "horizontal" ? "flex-start" : "stretch",
+    opacity: m ? 0.6 : 1,
+    ...x
+  }, C = {
     display: "flex",
     alignItems: "baseline",
     gap: 4,
-    ...l === "horizontal" && {
-      width: u,
+    ...i === "horizontal" && {
+      width: v,
       flexShrink: 0,
       paddingTop: r === "lg" ? 14 : r === "md" ? 10 : 8
     }
-  }, $ = {
+  }, E = {
     fontSize: t.labelSize,
     fontWeight: 500,
-    color: c ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
+    color: m ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
     lineHeight: 1.4
-  }, w = {
+  }, j = {
     color: "var(--brycks-error-default)",
     marginLeft: 2
-  }, j = {
+  }, D = {
     display: "flex",
     flexDirection: "column",
     gap: t.gap,
     flex: 1
-  }, C = {
+  }, H = {
     fontSize: t.helperSize,
-    color: m ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)",
+    color: b ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)",
     lineHeight: 1.4
-  }, D = {
+  }, a = {
     id: o,
-    "aria-describedby": i || e ? e ? p : f : void 0,
-    "aria-invalid": m ? !0 : void 0
+    "aria-describedby": n || e ? e ? g : y : void 0,
+    "aria-invalid": b ? !0 : void 0
   };
-  return /* @__PURE__ */ n(
+  let d;
+  if (typeof l == "function")
+    d = l(a);
+  else if (q(l) && L.count(l) === 1) {
+    const s = l;
+    d = P(s, {
+      id: s.props.id ?? a.id,
+      "aria-describedby": s.props["aria-describedby"] ?? a["aria-describedby"],
+      "aria-invalid": s.props["aria-invalid"] ?? a["aria-invalid"]
+    });
+  } else
+    d = l;
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: x,
-      className: N("brycks-form-field", `brycks-form-field--${r}`, `brycks-form-field--${l}`, S),
-      style: F,
-      "data-testid": v,
-      ...z,
+      ref: I,
+      className: R("brycks-form-field", `brycks-form-field--${r}`, `brycks-form-field--${i}`, z),
+      style: w,
+      "data-testid": k,
+      ...F,
       children: [
-        d && /* @__PURE__ */ s("div", { style: I, children: /* @__PURE__ */ n("label", { htmlFor: o, style: $, children: [
-          d,
-          y && /* @__PURE__ */ s("span", { style: w, "aria-hidden": "true", children: "*" })
+        p && /* @__PURE__ */ f("div", { style: C, children: /* @__PURE__ */ c("label", { htmlFor: o, style: E, children: [
+          p,
+          h && /* @__PURE__ */ f("span", { style: j, "aria-hidden": "true", children: "*" })
         ] }) }),
-        /* @__PURE__ */ n("div", { style: j, children: [
-          typeof a == "function" ? a(D) : a,
-          (i || e) && /* @__PURE__ */ s(
+        /* @__PURE__ */ c("div", { style: D, children: [
+          d,
+          (n || e) && /* @__PURE__ */ f(
             "span",
             {
-              id: e ? p : f,
-              style: C,
+              id: e ? g : y,
+              style: H,
               role: e ? "alert" : void 0,
-              children: e || i
+              children: e || n
             }
           )
         ] })
@@ -90,8 +102,8 @@ const E = {
     }
   );
 });
-L.displayName = "FormField";
+A.displayName = "FormField";
 export {
-  L as FormField
+  A as FormField
 };
 //# sourceMappingURL=FormField.js.map

package/dist/components/form/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {typeof children === 'function' ? children(childProps) : children}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","jsxs","cx","jsx"],"mappings":"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"}
+{"version":3,"file":"FormField.js","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n  type ReactElement,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  // Wire id/aria onto the input automatically when children is a single\n  // element, so `<FormField label=\"...\"><Input /></FormField>` associates the\n  // label without the render-prop form. Explicit props on the child win.\n  let content: ReactNode\n  if (typeof children === 'function') {\n    content = children(childProps)\n  } else if (isValidElement(children) && Children.count(children) === 1) {\n    const element = children as ReactElement<Record<string, unknown>>\n    content = cloneElement(element, {\n      id: element.props.id ?? childProps.id,\n      'aria-describedby': element.props['aria-describedby'] ?? childProps['aria-describedby'],\n      'aria-invalid': element.props['aria-invalid'] ?? childProps['aria-invalid'],\n    })\n  } else {\n    content = children\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {content}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","content","isValidElement","Children","element","cloneElement","jsxs","cx","jsx"],"mappings":"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"}

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

@@ -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

@@ -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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"}
+{"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

@@ -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);