mainstack-design-system 1.6.0 → 1.8.0

package/dist/index.d.ts

@@ -635,7 +635,9 @@ isError?: boolean;
 isSuccess?: boolean;
 value?: string | Array<string>;
 isOptionOpen?: boolean;
+isCreatableSelect?: boolean;
 onOptionOpenChange?: (value: boolean) => void;
+onOptionSelect?: (option?: SelectOptionType | Array<SelectOptionType>) => void;
 onValueChange?: (value: string | string[] | undefined) => void;
 } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
 isMultiSelect?: false;
@@ -648,7 +650,9 @@ isError?: boolean;
 isSuccess?: boolean;
 value?: string | Array<string>;
 isOptionOpen?: boolean;
+isCreatableSelect?: boolean;
 onOptionOpenChange?: (value: boolean) => void;
+onOptionSelect?: (option?: SelectOptionType | Array<SelectOptionType>) => void;
 onValueChange?: (value: string | string[] | undefined) => void;
 } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
 isMultiSelect?: true;
@@ -5773,7 +5777,7 @@ export declare const MetabolismIcon: ({ ...props }: VariableIconProps) => JSX.El
 
 export declare const MilitaryTechIcon: ({ variant, ...props }: VariableIconProps) => JSX.Element;
 
-export declare const ModalBody: ForwardRefExoticComponent<Omit<ModalBodyProps, "ref"> & RefAttributes<unknown>>;
+export declare const ModalBody: ForwardRefExoticComponent<Omit<ModalBodyProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
 export declare interface ModalBodyProps extends ComponentPropsWithRef<typeof DialogContent> {
 }
@@ -5812,9 +5816,9 @@ export declare const ModalGroup: {
     Root: ({ ...props }: ModalRootProps) => JSX.Element;
     Trigger: ForwardRefExoticComponent<Omit<ModalTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
     Overlay: ForwardRefExoticComponent<Omit<ModalOverlayProps, "ref"> & RefAttributes<HTMLDivElement>>;
-    Body: ForwardRefExoticComponent<Omit<ModalBodyProps, "ref"> & RefAttributes<unknown>>;
-    Portal: ForwardRefExoticComponent<ModalPortalProps & RefAttributes<unknown>>;
-    VisualSlot: ForwardRefExoticComponent<Omit<ModalVisualSlotProps, "ref"> & RefAttributes<unknown>>;
+    Body: ForwardRefExoticComponent<Omit<ModalBodyProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Portal: ({ ...props }: ModalPortalProps) => JSX.Element;
+    VisualSlot: ForwardRefExoticComponent<Omit<ModalVisualSlotProps, "ref"> & RefAttributes<HTMLDivElement>>;
     ContentSlot: ForwardRefExoticComponent<Omit<ModalContentSlotProps, "ref"> & RefAttributes<HTMLDivElement>>;
     ContentMain: ForwardRefExoticComponent<Omit<ModalContentMainProps, "ref"> & RefAttributes<HTMLDivElement>>;
     ContentHeader: ForwardRefExoticComponent<Omit<ModalContentHeaderProps, "ref"> & RefAttributes<HTMLElement>>;
@@ -5828,7 +5832,7 @@ export declare const ModalOverlay: ForwardRefExoticComponent<Omit<ModalOverlayPr
 export declare interface ModalOverlayProps extends ComponentPropsWithRef<typeof DialogOverlay> {
 }
 
-export declare const ModalPortal: ForwardRefExoticComponent<ModalPortalProps & RefAttributes<unknown>>;
+export declare const ModalPortal: ({ ...props }: ModalPortalProps) => JSX.Element;
 
 export declare interface ModalPortalProps extends ComponentPropsWithRef<typeof DialogPortal> {
 }
@@ -5843,7 +5847,7 @@ export declare const ModalTrigger: ForwardRefExoticComponent<Omit<ModalTriggerPr
 export declare interface ModalTriggerProps extends ComponentPropsWithRef<typeof DialogTrigger> {
 }
 
-export declare const ModalVisualSlot: ForwardRefExoticComponent<Omit<ModalVisualSlotProps, "ref"> & RefAttributes<unknown>>;
+export declare const ModalVisualSlot: ForwardRefExoticComponent<Omit<ModalVisualSlotProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
 export declare interface ModalVisualSlotProps extends ComponentPropsWithRef<"div"> {
 }
@@ -6287,7 +6291,9 @@ export declare const SelectGroup: {
     isSuccess?: boolean;
     value?: string | Array<string>;
     isOptionOpen?: boolean;
+    isCreatableSelect?: boolean;
     onOptionOpenChange?: (value: boolean) => void;
+    onOptionSelect?: (option?: SelectOptionType | Array<SelectOptionType>) => void;
     onValueChange?: (value: string | string[] | undefined) => void;
     } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
     isMultiSelect?: false;
@@ -6300,7 +6306,9 @@ export declare const SelectGroup: {
     isSuccess?: boolean;
     value?: string | Array<string>;
     isOptionOpen?: boolean;
+    isCreatableSelect?: boolean;
     onOptionOpenChange?: (value: boolean) => void;
+    onOptionSelect?: (option?: SelectOptionType | Array<SelectOptionType>) => void;
     onValueChange?: (value: string | string[] | undefined) => void;
     } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
     isMultiSelect?: true;
@@ -6311,7 +6319,10 @@ export declare const SelectGroup: {
     Options: ForwardRefExoticComponent<Omit<SelectOptionsProps, "ref"> & RefAttributes<HTMLDivElement>>;
     OptionItem: ForwardRefExoticComponent<Omit<SelectOptionItemProps, "ref"> & RefAttributes<HTMLDivElement>>;
     OptionItemWithCheckbox: ForwardRefExoticComponent<Omit<SelectOptionItemWithCheckboxProps, "ref"> & RefAttributes<HTMLDivElement>>;
-    OptionInputPreview: ForwardRefExoticComponent<Omit<SelectOptionInputPreviewProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    OptionInputPreview: {
+        ({ children, ...props }: SelectOptionInputPreviewProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | JSX.Element | null | undefined;
+        displayName: string;
+    };
 };
 
 export declare const SelectInputField: ForwardRefExoticComponent<Omit<SelectInputFieldProps, "ref"> & RefAttributes<HTMLInputElement>>;
@@ -6319,9 +6330,12 @@ export declare const SelectInputField: ForwardRefExoticComponent<Omit<SelectInpu
 export declare interface SelectInputFieldProps extends ComponentPropsWithRef<typeof InputField> {
 }
 
-export declare const SelectOptionInputPreview: ForwardRefExoticComponent<Omit<SelectOptionInputPreviewProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export declare const SelectOptionInputPreview: {
+    ({ children, ...props }: SelectOptionInputPreviewProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | JSX.Element | null | undefined;
+    displayName: string;
+};
 
-export declare interface SelectOptionInputPreviewProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+export declare interface SelectOptionInputPreviewProps extends Omit<ComponentPropsWithRef<typeof ChipRoot>, "children"> {
     children?: (options: {
         selectedOptions: Array<SelectOptionType>;
         onCancelSelectedOption: (item: SelectOptionType) => void;
@@ -6332,6 +6346,7 @@ export declare const SelectOptionItem: ForwardRefExoticComponent<Omit<SelectOpti
 
 export declare interface SelectOptionItemProps extends ComponentPropsWithRef<"div"> {
     value: string | undefined;
+    isCreatableOption?: boolean;
     isDisabled?: boolean;
     isGroupLabel?: boolean;
 }
@@ -6380,7 +6395,9 @@ isError?: boolean;
 isSuccess?: boolean;
 value?: string | Array<string>;
 isOptionOpen?: boolean;
+isCreatableSelect?: boolean;
 onOptionOpenChange?: (value: boolean) => void;
+onOptionSelect?: (option?: SelectOptionType | Array<SelectOptionType>) => void;
 onValueChange?: (value: string | string[] | undefined) => void;
 } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
 isMultiSelect?: false;
@@ -6393,7 +6410,9 @@ isError?: boolean;
 isSuccess?: boolean;
 value?: string | Array<string>;
 isOptionOpen?: boolean;
+isCreatableSelect?: boolean;
 onOptionOpenChange?: (value: boolean) => void;
+onOptionSelect?: (option?: SelectOptionType | Array<SelectOptionType>) => void;
 onValueChange?: (value: string | string[] | undefined) => void;
 } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
 isMultiSelect?: true;

package/dist/mainstack-design-system463.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("./utils-scPUmbSO.cjs"),h=require("./mainstack-design-system584.cjs"),s=require("./index-BgzojN8c.cjs"),i=a.forwardRef(({className:c,children:m,...u},n)=>{const{options:r,isMultiSelect:b,inputValue:l,previousAction:o,isOptionOpen:f,selectedOption:p}=h.useSelectContext(),d=a.useMemo(()=>!l||o==="selection"||o==="idle"?r.array:r.array.filter(x=>x.label.toLocaleLowerCase().includes(l.toLocaleLowerCase())),[l,r,o]);return e.jsx("div",{className:t.cn("mds:flex mds:flex-col mds:gap-8 mds:p-8 mds:rounded-18 mds:bg-surface-neutral-l1 mds:border-border-interactive-neutral mds:border mds:shadow-200",c),ref:n,"data-slot":"select-options","data-select-options-opened":f,...u,children:e.jsxs(s.ScrollArea,{style:{"--scrollbar-size":"8px"},className:t.cn("mds:flex mds:flex-col mds:gap-8 mds:max-h-350"),ref:n,children:[e.jsx(s.ScrollAreaViewport,{className:"mds:h-full mds:w-full",children:e.jsxs("div",{"data-slot":"select-options-inner",className:"mds:flex mds:flex-col mds:gap-8",children:[m({options:d,selectedOption:p,isMultiSelect:!!b}),d.length===0&&e.jsx("p",{className:"body-extrasmall-medium mds:text-center",children:"No option found"})]})}),e.jsx(s.ScrollAreaScrollbar,{orientation:"vertical",className:"mds:flex mds:select-none mds:rounded-(--scrollbar-size) mds:touch-none mds:p-2 mds:w-(--scrollbar-size) mds:flex-col mds:transition-all mds:duration-200 mds:ease-out mds:bg-surface-neutral-l1 mds:hover:bg-interactive-secondary mds:hover:w-12",children:e.jsx(s.ScrollAreaThumb,{className:t.cn("mds:rounded-(--scrollbar-size) mds:bg-border-interactive-neutral-inverse-hover mds:relative","mds:before:content-[''] mds:before:absolute mds:before:top-1/2 mds:before:left-1/2  mds:before:-translate-1/2 mds:before:size-full mds:before:min-w-44 mds:before:min-h-44")})}),e.jsx(s.ScrollAreaCorner,{className:"mds:bg-border-interactive-neutral-inverse-hover"})]})})});i.displayName="SelectOptions";exports.SelectOptions=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),t=require("./utils-scPUmbSO.cjs"),S=require("./mainstack-design-system584.cjs"),r=require("./index-BgzojN8c.cjs"),v=require("./mainstack-design-system464.cjs"),i=d.forwardRef(({className:c,children:m,...u},n)=>{const{options:l,isMultiSelect:b,inputValue:s,previousAction:o,isOptionOpen:p,selectedOption:f,isCreatableSelect:x}=S.useSelectContext(),a=d.useMemo(()=>!s||o==="selection"||o==="idle"?l.array:l.array.filter(h=>h.label.toLocaleLowerCase().includes(s.toLocaleLowerCase())),[s,l,o]);return e.jsx("div",{className:t.cn("mds:flex mds:flex-col mds:gap-8 mds:p-8 mds:rounded-18 mds:bg-surface-neutral-l1 mds:border-border-interactive-neutral mds:border mds:shadow-200",c),ref:n,"data-slot":"select-options","data-select-options-opened":p,...u,children:e.jsxs(r.ScrollArea,{style:{"--scrollbar-size":"8px"},className:t.cn("mds:flex mds:flex-col mds:gap-8 mds:max-h-350"),ref:n,children:[e.jsx(r.ScrollAreaViewport,{className:"mds:h-full mds:w-full",children:e.jsxs("div",{"data-slot":"select-options-inner",className:"mds:flex mds:flex-col mds:gap-8",children:[m({options:a,selectedOption:f,isMultiSelect:!!b}),a.length===0&&e.jsx(e.Fragment,{children:x&&s?e.jsxs(v.SelectOptionItem,{value:s,isCreatableOption:!0,children:['Create "',s,'"']}):e.jsx("p",{className:t.cn("body-extrasmall-medium","mds:text-center"),children:"No option found"})})]})}),e.jsx(r.ScrollAreaScrollbar,{orientation:"vertical",className:"mds:flex mds:select-none mds:rounded-(--scrollbar-size) mds:touch-none mds:p-2 mds:w-(--scrollbar-size) mds:flex-col mds:transition-all mds:duration-200 mds:ease-out mds:bg-surface-neutral-l1 mds:hover:bg-interactive-secondary mds:hover:w-12",children:e.jsx(r.ScrollAreaThumb,{className:t.cn("mds:rounded-(--scrollbar-size) mds:bg-border-interactive-neutral-inverse-hover mds:relative","mds:before:content-[''] mds:before:absolute mds:before:top-1/2 mds:before:left-1/2  mds:before:-translate-1/2 mds:before:size-full mds:before:min-w-44 mds:before:min-h-44")})}),e.jsx(r.ScrollAreaCorner,{className:"mds:bg-border-interactive-neutral-inverse-hover"})]})})});i.displayName="SelectOptions";exports.SelectOptions=i;

package/dist/mainstack-design-system463.js

@@ -1,63 +1,78 @@
 'use client';
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as b, useMemo as h } from "react";
-import { c as l } from "./utils-Cs1D8Nxl.js";
-import { useSelectContext as x } from "./mainstack-design-system584.js";
-import { S as v, a as S, b as N, c as g, d as w } from "./index-CLUgda6x.js";
-const y = b(
-  ({ className: m, children: n, ...i }, t) => {
+import { jsx as e, jsxs as t, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as v, useMemo as x } from "react";
+import { c as r } from "./utils-Cs1D8Nxl.js";
+import { useSelectContext as S } from "./mainstack-design-system584.js";
+import { S as g, a as N, b as w, c as C, d as O } from "./index-CLUgda6x.js";
+import { SelectOptionItem as y } from "./mainstack-design-system464.js";
+const A = v(
+  ({ className: m, children: i, ...n }, a) => {
     const {
-      options: s,
+      options: o,
       isMultiSelect: c,
-      inputValue: r,
-      previousAction: o,
-      isOptionOpen: f,
-      selectedOption: u
-    } = x(), a = h(() => !r || o === "selection" || o === "idle" ? s.array : s.array.filter((p) => p.label.toLocaleLowerCase().includes(r.toLocaleLowerCase())), [r, s, o]);
+      inputValue: s,
+      previousAction: l,
+      isOptionOpen: p,
+      selectedOption: u,
+      isCreatableSelect: f
+    } = S(), d = x(() => !s || l === "selection" || l === "idle" ? o.array : o.array.filter((b) => b.label.toLocaleLowerCase().includes(s.toLocaleLowerCase())), [s, o, l]);
     return /* @__PURE__ */ e(
       "div",
       {
-        className: l(
+        className: r(
           "mds:flex mds:flex-col mds:gap-8 mds:p-8 mds:rounded-18 mds:bg-surface-neutral-l1 mds:border-border-interactive-neutral mds:border mds:shadow-200",
           m
         ),
-        ref: t,
+        ref: a,
         "data-slot": "select-options",
-        "data-select-options-opened": f,
-        ...i,
-        children: /* @__PURE__ */ d(
-          v,
+        "data-select-options-opened": p,
+        ...n,
+        children: /* @__PURE__ */ t(
+          g,
           {
             style: {
               "--scrollbar-size": "8px"
             },
-            className: l("mds:flex mds:flex-col mds:gap-8 mds:max-h-350"),
-            ref: t,
+            className: r("mds:flex mds:flex-col mds:gap-8 mds:max-h-350"),
+            ref: a,
             children: [
-              /* @__PURE__ */ e(S, { className: "mds:h-full mds:w-full", children: /* @__PURE__ */ d(
+              /* @__PURE__ */ e(N, { className: "mds:h-full mds:w-full", children: /* @__PURE__ */ t(
                 "div",
                 {
                   "data-slot": "select-options-inner",
                   className: "mds:flex mds:flex-col mds:gap-8",
                   children: [
-                    n({
-                      options: a,
+                    i({
+                      options: d,
                       selectedOption: u,
                       isMultiSelect: !!c
                     }),
-                    a.length === 0 && /* @__PURE__ */ e("p", { className: "body-extrasmall-medium mds:text-center", children: "No option found" })
+                    d.length === 0 && /* @__PURE__ */ e(h, { children: f && s ? /* @__PURE__ */ t(y, { value: s, isCreatableOption: !0, children: [
+                      'Create "',
+                      s,
+                      '"'
+                    ] }) : /* @__PURE__ */ e(
+                      "p",
+                      {
+                        className: r(
+                          "body-extrasmall-medium",
+                          "mds:text-center"
+                        ),
+                        children: "No option found"
+                      }
+                    ) })
                   ]
                 }
               ) }),
               /* @__PURE__ */ e(
-                N,
+                w,
                 {
                   orientation: "vertical",
                   className: "mds:flex mds:select-none mds:rounded-(--scrollbar-size) mds:touch-none mds:p-2 mds:w-(--scrollbar-size) mds:flex-col mds:transition-all mds:duration-200 mds:ease-out mds:bg-surface-neutral-l1 mds:hover:bg-interactive-secondary mds:hover:w-12",
                   children: /* @__PURE__ */ e(
-                    g,
+                    C,
                     {
-                      className: l(
+                      className: r(
                         "mds:rounded-(--scrollbar-size) mds:bg-border-interactive-neutral-inverse-hover mds:relative",
                         "mds:before:content-[''] mds:before:absolute mds:before:top-1/2 mds:before:left-1/2  mds:before:-translate-1/2 mds:before:size-full mds:before:min-w-44 mds:before:min-h-44"
                       )
@@ -65,7 +80,7 @@ const y = b(
                   )
                 }
               ),
-              /* @__PURE__ */ e(w, { className: "mds:bg-border-interactive-neutral-inverse-hover" })
+              /* @__PURE__ */ e(O, { className: "mds:bg-border-interactive-neutral-inverse-hover" })
             ]
           }
         )
@@ -73,7 +88,7 @@ const y = b(
     );
   }
 );
-y.displayName = "SelectOptions";
+A.displayName = "SelectOptions";
 export {
-  y as SelectOptions
+  A as SelectOptions
 };

package/dist/mainstack-design-system464.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),y=require("react"),j=require("./utils-scPUmbSO.cjs"),C=require("./mainstack-design-system584.cjs"),b=y.forwardRef(({value:e="",className:x,isGroupLabel:O,isDisabled:o,onClick:a,...S},A)=>{const{isOptionOpen:_,isMultiSelect:i,selectedOption:t,rootElementRef:d,options:g,setPreviousAction:h,setInputValue:l,onValueChange:r,onOptionOpenChange:I,setSelectedOption:c}=C.useSelectContext(),p=y.useMemo(()=>i&&Array.isArray(t)?t?.some(n=>e===n):!i&&!Array.isArray(t)?t===e:!1,[i,t,e]);return f.jsx("div",{"aria-disabled":o,className:" mds:aria-disabled:cursor-not-allowed",children:f.jsx("div",{role:"button","data-slot":"select-option-item",tabIndex:0,className:j.cn("body-extrasmall-medium","mds:py-8 mds:px-10 mds:cursor-pointer mds:text-left mds:rounded-12 mds:aria-disabled:pointer-events-none mds:aria-disabled:opacity-40 mds:hover:bg-interactive-secondary-hover",x),"aria-selected":p,"data-select-options-opened":_,ref:A,"aria-disabled":o||O,onClick:n=>{if(a&&a(n),!!e)if(h("selection"),i){let s=t;if(Array.isArray(t))if(s=[...t],p){const u=s.findIndex(q=>q===e);u>-1&&s.splice(u,1)}else s.push(e);else s=[e];if(c(s),l(""),Array.isArray(s)&&r&&r(s),!d.current)return null;const m=d.current.querySelector('[data-slot="select-input-field"]');m&&m.focus()}else r&&e&&r(e),l(g.map.get(e)?.label||""),c(e),I(!1)},...S})})});b.displayName="SelectOptionItem";exports.SelectOptionItem=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),S=require("react"),N=require("./utils-scPUmbSO.cjs"),P=require("./mainstack-design-system584.cjs"),x=S.forwardRef(({value:e="",className:A,isGroupLabel:g,isDisabled:l,isCreatableOption:h,onClick:d,..._},I)=>{const{isOptionOpen:q,isMultiSelect:r,selectedOption:s,rootElementRef:p,isCreatableSelect:w,options:m,setOptions:C,setPreviousAction:j,setInputValue:f,onValueChange:n,onOptionSelect:o,onOptionOpenChange:R,setSelectedOption:u}=P.useSelectContext(),y=S.useMemo(()=>r&&Array.isArray(s)?s?.some(c=>e===c):!r&&!Array.isArray(s)?s===e:!1,[r,s,e]);return O.jsx("div",{"aria-disabled":l,className:" mds:aria-disabled:cursor-not-allowed",children:O.jsx("div",{role:"button","data-slot":"select-option-item",tabIndex:0,className:N.cn("body-extrasmall-medium","mds:py-8 mds:px-10 mds:cursor-pointer mds:text-left mds:rounded-12 mds:aria-disabled:pointer-events-none mds:aria-disabled:opacity-40 mds:hover:bg-interactive-secondary-hover",A),"aria-selected":y,"data-select-options-opened":q,ref:I,"aria-disabled":l||g,onClick:c=>{if(d&&d(c),!e)return;j("selection");let i=m;if(h&&w&&!i.map.has(e)){i={...m};const t={value:e,label:e};i.array.push(t),i.map.set(t.value,t),C(i)}if(r){let t=s;if(Array.isArray(s))if(t=[...s],y){const a=t.findIndex(M=>M===e);a>-1&&t.splice(a,1)}else t.push(e);else t=[e];if(u(t),f(""),Array.isArray(t)&&n&&n(t),Array.isArray(t)&&o&&o(t.map(a=>i.map.get(a))),!p.current)return null;const b=p.current.querySelector('[data-slot="select-input-field"]');b&&b.focus()}else n&&e&&n(e),o&&e&&o(i.map.get(e)),f(i.map.get(e)?.label||""),u(e),R(!1)},..._})})});x.displayName="SelectOptionItem";exports.SelectOptionItem=x;

package/dist/mainstack-design-system464.js

@@ -1,77 +1,94 @@
 'use client';
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as _, useMemo as w } from "react";
-import { c as C } from "./utils-Cs1D8Nxl.js";
-import { useSelectContext as N } from "./mainstack-design-system584.js";
-const M = _(
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as R, useMemo as V } from "react";
+import { c as j } from "./utils-Cs1D8Nxl.js";
+import { useSelectContext as q } from "./mainstack-design-system584.js";
+const E = R(
   ({
     value: e = "",
-    className: y,
-    isGroupLabel: b,
-    isDisabled: n,
-    onClick: a,
-    ...x
-  }, A) => {
+    className: A,
+    isGroupLabel: x,
+    isDisabled: p,
+    isCreatableOption: h,
+    onClick: l,
+    ...S
+  }, g) => {
     const {
-      isOptionOpen: O,
-      isMultiSelect: i,
-      selectedOption: t,
-      rootElementRef: d,
-      options: h,
-      setPreviousAction: S,
-      setInputValue: l,
-      onValueChange: s,
-      onOptionOpenChange: I,
-      setSelectedOption: c
-    } = N(), m = w(() => i && Array.isArray(t) ? t?.some((o) => e === o) : !i && !Array.isArray(t) ? t === e : !1, [i, t, e]);
-    return /* @__PURE__ */ u(
+      isOptionOpen: w,
+      isMultiSelect: s,
+      selectedOption: i,
+      rootElementRef: c,
+      isCreatableSelect: I,
+      options: m,
+      setOptions: C,
+      setPreviousAction: _,
+      setInputValue: f,
+      onValueChange: o,
+      onOptionSelect: n,
+      onOptionOpenChange: N,
+      setSelectedOption: y
+    } = q(), u = V(() => s && Array.isArray(i) ? i?.some((d) => e === d) : !s && !Array.isArray(i) ? i === e : !1, [s, i, e]);
+    return /* @__PURE__ */ b(
       "div",
       {
-        "aria-disabled": n,
+        "aria-disabled": p,
         className: " mds:aria-disabled:cursor-not-allowed",
-        children: /* @__PURE__ */ u(
+        children: /* @__PURE__ */ b(
           "div",
           {
             role: "button",
             "data-slot": "select-option-item",
             tabIndex: 0,
-            className: C(
+            className: j(
               "body-extrasmall-medium",
               "mds:py-8 mds:px-10 mds:cursor-pointer mds:text-left mds:rounded-12 mds:aria-disabled:pointer-events-none mds:aria-disabled:opacity-40 mds:hover:bg-interactive-secondary-hover",
-              y
+              A
             ),
-            "aria-selected": m,
-            "data-select-options-opened": O,
-            ref: A,
-            "aria-disabled": n || b,
-            onClick: (o) => {
-              if (a && a(o), !!e)
-                if (S("selection"), i) {
-                  let r = t;
-                  if (Array.isArray(t))
-                    if (r = [...t], m) {
-                      const f = r.findIndex((g) => g === e);
-                      f > -1 && r.splice(f, 1);
-                    } else
-                      r.push(e);
-                  else
-                    r = [e];
-                  if (c(r), l(""), Array.isArray(r) && s && s(r), !d.current) return null;
-                  const p = d.current.querySelector(
-                    '[data-slot="select-input-field"]'
-                  );
-                  p && p.focus();
-                } else
-                  s && e && s(e), l(h.map.get(e)?.label || ""), c(e), I(!1);
+            "aria-selected": u,
+            "data-select-options-opened": w,
+            ref: g,
+            "aria-disabled": p || x,
+            onClick: (d) => {
+              if (l && l(d), !e)
+                return;
+              _("selection");
+              let r = m;
+              if (h && I && !r.map.has(e)) {
+                r = { ...m };
+                const t = {
+                  value: e,
+                  label: e
+                };
+                r.array.push(t), r.map.set(t.value, t), C(r);
+              }
+              if (s) {
+                let t = i;
+                if (Array.isArray(i))
+                  if (t = [...i], u) {
+                    const a = t.findIndex((M) => M === e);
+                    a > -1 && t.splice(a, 1);
+                  } else
+                    t.push(e);
+                else
+                  t = [e];
+                if (y(t), f(""), Array.isArray(t) && o && o(t), Array.isArray(t) && n && n(
+                  t.map((a) => r.map.get(a))
+                ), !c.current) return null;
+                const O = c.current.querySelector(
+                  '[data-slot="select-input-field"]'
+                );
+                O && O.focus();
+              } else
+                o && e && o(e), n && e && n(r.map.get(e)), f(r.map.get(e)?.label || ""), y(e), N(!1);
             },
-            ...x
+            ...S
           }
         )
       }
     );
   }
 );
-M.displayName = "SelectOptionItem";
+E.displayName = "SelectOptionItem";
 export {
-  M as SelectOptionItem
+  E as SelectOptionItem
 };

package/dist/mainstack-design-system466.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),d=require("./utils-scPUmbSO.cjs");require("./mainstack-design-system355.cjs");const x=require("./mainstack-design-system91.cjs");require("./player-BSON6quL.cjs");const b=require("./mainstack-design-system584.cjs"),A=require("./mainstack-design-system391.cjs");require("./mainstack-design-system392.cjs");require("./mainstack-design-system393.cjs");const S=require("./index-BV7A-WgT.cjs"),m=a.forwardRef(({className:p,children:o,...f},v)=>{const{selectedOption:e,isMultiSelect:n,options:s,setSelectedOption:c,onOptionOpenChange:l}=b.useSelectContext(),u=a.useCallback(r=>{if(!n||!Array.isArray(e))return e;let i=e;Array.isArray(e)&&(i=e.filter(g=>g!==r?.value)),c(i),l(!0)},[n,l,e,c]),y=a.useMemo(()=>!n||!Array.isArray(e)?[]:s.array.filter(r=>e.includes(r.value)),[n,s.array,e]);return!n||!Array.isArray(e)?null:o?o({selectedOptions:y,onCancelSelectedOption:u}):t.jsx(t.Fragment,{children:e.map(r=>t.jsxs("div",{"data-slot":"select-option-input-preview",ref:v,className:d.cn("mds:flex mds:gap-4 mds:justify-between mds:items-center mds:w-109 mds:h-32 mds:p-6 mds:rounded-full mds:bg-surface-neutral-l1 mds:border-border-interactive-neutral mds:border-2",p),...f,children:[s.map.get(r)?.imgSrc&&t.jsx(A.AvatarRoot,{size:24,className:"mds:min-w-24 mds:size-24 mds:min-h-24 mds:*:size-24",children:t.jsx(S.AvatarImage,{alt:"avatar",src:s.map.get(r)?.imgSrc||""})}),t.jsx("p",{className:d.cn("body-extrasmall-medium","mds:w-50 mds:truncate"),children:s.map.get(r)?.label}),t.jsx(x,{role:"button",variant:"filled",className:"mds:size-20 mds:cursor-pointer mds:text-primary",onClick:()=>{const i=s.map.get(r);i&&u(i)}})]},r))})});m.displayName="SelectOptionInputPreview";exports.SelectOptionInputPreview=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react");require("./mainstack-design-system355.cjs");const h=require("./mainstack-design-system91.cjs");require("./player-BSON6quL.cjs");const _=require("./utils-scPUmbSO.cjs"),y=require("./mainstack-design-system584.cjs"),S=require("./index-BV7A-WgT.cjs"),q=require("./mainstack-design-system421.cjs"),v=require("./mainstack-design-system422.cjs"),f=require("./mainstack-design-system420.cjs"),g=require("./mainstack-design-system419.cjs");require("./mainstack-design-system423.cjs");const u=({children:a,...m})=>{const{selectedOption:e,isMultiSelect:n,options:i,setSelectedOption:c,onOptionOpenChange:l}=y.useSelectContext(),p=o.useCallback(t=>{if(!n||!Array.isArray(e))return e;let s=e;Array.isArray(e)&&(s=e.filter(C=>C!==t?.value)),c(s),l(!0)},[n,l,e,c]),d=o.useMemo(()=>!n||!Array.isArray(e)?[]:i.array.filter(t=>e.includes(t.value)),[n,i.array,e]);return!n||!Array.isArray(e)?null:a?a({selectedOptions:d,onCancelSelectedOption:p}):r.jsx(r.Fragment,{children:e.map(t=>o.createElement(g.ChipRoot,{...m,key:t,"data-slot":"select-option-input-preview",size:"tiny",className:"mds:w-fit",onClick:()=>{const s=i.map.get(t);s&&p(s)}},i.map.get(t)?.imgSrc&&r.jsx(v.ChipAvatar,{size:24,className:"mds:min-w-24 mds:size-24 mds:min-h-24 mds:*:size-24",children:r.jsx(S.AvatarImage,{alt:"avatar",src:i.map.get(t)?.imgSrc||""})}),r.jsx(f.ChipLabel,{className:_.cn("body-extrasmall-medium","mds:w-50 mds:truncate mds:block"),children:i.map.get(t)?.label}),r.jsx(q.ChipSlot,{children:r.jsx(h,{className:"mds:h-20 mds:w-20",variant:"filled"})})))})};u.displayName="SelectOptionInputPreview";exports.SelectOptionInputPreview=u;

package/dist/mainstack-design-system466.js

@@ -1,90 +1,84 @@
 'use client';
-import { jsx as i, Fragment as v, jsxs as g } from "react/jsx-runtime";
-import { forwardRef as A, useCallback as w, useMemo as b } from "react";
-import { c as d } from "./utils-Cs1D8Nxl.js";
+import { jsx as i, Fragment as f } from "react/jsx-runtime";
+import { useCallback as u, useMemo as y, createElement as A } from "react";
 import "./mainstack-design-system355.js";
-import O from "./mainstack-design-system91.js";
+import h from "./mainstack-design-system91.js";
 import "./player-BXrBN0bS.js";
-import { useSelectContext as S } from "./mainstack-design-system584.js";
-import { AvatarRoot as x } from "./mainstack-design-system391.js";
-import "./mainstack-design-system392.js";
-import "./mainstack-design-system393.js";
-import { A as h } from "./index-CY9H_w64.js";
-const C = A(
-  ({ className: p, children: m, ...c }, u) => {
-    const {
-      selectedOption: e,
-      isMultiSelect: s,
-      options: t,
-      setSelectedOption: o,
-      onOptionOpenChange: n
-    } = S(), l = w(
-      (r) => {
-        if (!s || !Array.isArray(e))
-          return e;
-        let a = e;
-        Array.isArray(e) && (a = e.filter(
-          (y) => y !== r?.value
-        )), o(a), n(!0);
-      },
-      [s, n, e, o]
-    ), f = b(() => !s || !Array.isArray(e) ? [] : t.array.filter(
-      (r) => e.includes(r.value)
-    ), [s, t.array, e]);
-    return !s || !Array.isArray(e) ? null : m ? m({
-      selectedOptions: f,
-      onCancelSelectedOption: l
-    }) : /* @__PURE__ */ i(v, { children: e.map((r) => /* @__PURE__ */ g(
-      "div",
+import { c as v } from "./utils-Cs1D8Nxl.js";
+import { useSelectContext as C } from "./mainstack-design-system584.js";
+import { A as g } from "./index-CY9H_w64.js";
+import { ChipSlot as w } from "./mainstack-design-system421.js";
+import { ChipAvatar as S } from "./mainstack-design-system422.js";
+import { ChipLabel as O } from "./mainstack-design-system420.js";
+import { ChipRoot as b } from "./mainstack-design-system419.js";
+import "./mainstack-design-system423.js";
+const N = ({
+  children: s,
+  ...p
+}) => {
+  const {
+    selectedOption: e,
+    isMultiSelect: a,
+    options: t,
+    setSelectedOption: m,
+    onOptionOpenChange: n
+  } = C(), l = u(
+    (r) => {
+      if (!a || !Array.isArray(e))
+        return e;
+      let o = e;
+      Array.isArray(e) && (o = e.filter(
+        (d) => d !== r?.value
+      )), m(o), n(!0);
+    },
+    [a, n, e, m]
+  ), c = y(() => !a || !Array.isArray(e) ? [] : t.array.filter(
+    (r) => e.includes(r.value)
+  ), [a, t.array, e]);
+  return !a || !Array.isArray(e) ? null : s ? s({
+    selectedOptions: c,
+    onCancelSelectedOption: l
+  }) : /* @__PURE__ */ i(f, { children: e.map((r) => /* @__PURE__ */ A(
+    b,
+    {
+      ...p,
+      key: r,
+      "data-slot": "select-option-input-preview",
+      size: "tiny",
+      className: "mds:w-fit",
+      onClick: () => {
+        const o = t.map.get(r);
+        o && l(o);
+      }
+    },
+    t.map.get(r)?.imgSrc && /* @__PURE__ */ i(
+      S,
       {
-        "data-slot": "select-option-input-preview",
-        ref: u,
-        className: d(
-          "mds:flex mds:gap-4 mds:justify-between mds:items-center mds:w-109 mds:h-32 mds:p-6 mds:rounded-full mds:bg-surface-neutral-l1 mds:border-border-interactive-neutral mds:border-2",
-          p
+        size: 24,
+        className: "mds:min-w-24 mds:size-24 mds:min-h-24 mds:*:size-24",
+        children: /* @__PURE__ */ i(
+          g,
+          {
+            alt: "avatar",
+            src: t.map.get(r)?.imgSrc || ""
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ i(
+      O,
+      {
+        className: v(
+          "body-extrasmall-medium",
+          "mds:w-50 mds:truncate mds:block"
         ),
-        ...c,
-        children: [
-          t.map.get(r)?.imgSrc && /* @__PURE__ */ i(
-            x,
-            {
-              size: 24,
-              className: "mds:min-w-24 mds:size-24 mds:min-h-24 mds:*:size-24",
-              children: /* @__PURE__ */ i(
-                h,
-                {
-                  alt: "avatar",
-                  src: t.map.get(r)?.imgSrc || ""
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ i(
-            "p",
-            {
-              className: d("body-extrasmall-medium", "mds:w-50 mds:truncate"),
-              children: t.map.get(r)?.label
-            }
-          ),
-          /* @__PURE__ */ i(
-            O,
-            {
-              role: "button",
-              variant: "filled",
-              className: "mds:size-20 mds:cursor-pointer mds:text-primary",
-              onClick: () => {
-                const a = t.map.get(r);
-                a && l(a);
-              }
-            }
-          )
-        ]
-      },
-      r
-    )) });
-  }
-);
-C.displayName = "SelectOptionInputPreview";
+        children: t.map.get(r)?.label
+      }
+    ),
+    /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(h, { className: "mds:h-20 mds:w-20", variant: "filled" }) })
+  )) });
+};
+N.displayName = "SelectOptionInputPreview";
 export {
-  C as SelectOptionInputPreview
+  N as SelectOptionInputPreview
 };

package/dist/mainstack-design-system526.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("./index-HSoR75mY.cjs"),n=require("react"),a=require("./utils-scPUmbSO.cjs"),l=require("./index-DvzX668K.cjs"),s=n.forwardRef(({children:m,className:t,...o})=>d.jsx("div",{className:"mds:fixed mds:w-full mds:h-full mds:flex mds:justify-center mds:top-0 mds:left-0 mds:items-end mds:z-100 mds:md:items-center ",children:d.jsxs(e.DialogContent,{"data-slot":"modal-body",className:a.cn("mds:group/Modal-body mds:flex-1 mds:flex mds:will-change-transform mds:max-h-[90dvh] mds:max-w-980 mds:shadow-600 mds:rounded-t-20 mds:overflow-hidden  mds:bg-surface-neutral-l1 mds:animate-content-scale-out mds:data-[state=open]:animate-content-scale-in mds:md:rounded-20 mds:md:mx-20 ",t),...o,children:[m,d.jsx(l.VisuallyHidden,{children:d.jsx(e.DialogDescription,{})})]})}));s.displayName="ModalBody";exports.ModalBody=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("./index-HSoR75mY.cjs"),a=require("react"),l=require("./utils-scPUmbSO.cjs"),i=require("./index-DvzX668K.cjs"),s=a.forwardRef(({children:m,className:t,...o},n)=>d.jsx("div",{className:"mds:fixed mds:w-full mds:h-full mds:flex mds:justify-center mds:top-0 mds:left-0 mds:items-end mds:z-100 mds:md:items-center ",children:d.jsxs(e.DialogContent,{ref:n,"data-slot":"modal-body",className:l.cn("mds:group/Modal-body mds:flex-1 mds:flex mds:will-change-transform mds:max-h-[90dvh] mds:max-w-980 mds:shadow-600 mds:rounded-t-20 mds:overflow-hidden  mds:bg-surface-neutral-l1 mds:animate-content-scale-out mds:data-[state=open]:animate-content-scale-in mds:md:rounded-20 mds:md:mx-20 ",t),...o,children:[m,d.jsx(i.VisuallyHidden,{children:d.jsx(e.DialogDescription,{})})]})}));s.displayName="ModalBody";exports.ModalBody=s;