@mage-ui/components 1.0.100 → 1.0.102

package/dist/components/controls/dropdown/Dropdown.d.mts

@@ -29,6 +29,7 @@ type DropdownProps = {
   shouldFilter?: boolean;
   dropdownTopSlot?: ReactNode;
   defaultValue?: DropdownValue;
+  value?: DropdownValue;
   onChange?: (value: DropdownValue) => void;
 } & DataAttributes;
 //#endregion

package/dist/components/controls/dropdown/Dropdown.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"mappings":";;;;;KAoBK,cAAA;EAAA,CACF,GAAA;AAAA;AAAA,KAGS,aAAA;EACV,QAAA,EAAU,SAAA;EACV,YAAA;EACA,WAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,OAAA;IACA,MAAA;IACA,KAAA;IACA,MAAA;EAAA;EAEF,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,aAAA;EACT,eAAA,GAAkB,OAAA,CAChB,IAAA,CAAK,uBAAA;IAEL,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,uBAAA;MAGZ,0BAAA;IAAA;EAAA;EAGJ,cAAA;EACA,YAAA;EACA,eAAA,GAAkB,SAAA;EAClB,YAAA,GAAe,aAAA;EACf,QAAA,IAAY,KAAA,EAAO,aAAA;AAAA,IACjB,cAAA"}
+{"version":3,"file":"Dropdown.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"mappings":";;;;;KAoBK,cAAA;EAAA,CACF,GAAA;AAAA;AAAA,KAGS,aAAA;EACV,QAAA,EAAU,SAAA;EACV,YAAA;EACA,WAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,OAAA;IACA,MAAA;IACA,KAAA;IACA,MAAA;EAAA;EAEF,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,aAAA;EACT,eAAA,GAAkB,OAAA,CAChB,IAAA,CAAK,uBAAA;IAEL,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,uBAAA;MAGZ,0BAAA;IAAA;EAAA;EAGJ,cAAA;EACA,YAAA;EACA,eAAA,GAAkB,SAAA;EAClB,YAAA,GAAe,aAAA;EACf,KAAA,GAAQ,aAAA;EACR,QAAA,IAAY,KAAA,EAAO,aAAA;AAAA,IACjB,cAAA"}

package/dist/components/controls/dropdown/Dropdown.mjs

@@ -1,2 +1,2 @@
-import{ScrollAreaAutosize as e}from"../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{DropdownContextProvider as t,useDropdownContext as n}from"./DropdownContextProvider.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropdown as i,dropdownEmpty as a,dropdownOption as o,dropdownOptions as s,dropdownRoot as c,dropdownScrollAreaAutosize as l}from"@mage-ui/styled-system/recipes";import{Combobox as u}from"@mantine/core";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({children:t,classNames:p,target:m,scrollAreaProps:h,dropdownHeight:g=192,dropdownTopSlot:_,...v})=>{let{store:y,setValue:b}=n(),x=Object.fromEntries(Object.entries(v).filter(([e])=>e.startsWith(`data-`))),S=Object.fromEntries(Object.entries(v).filter(([e])=>!e.startsWith(`data-`)));return f(u,{width:`target`,store:y,withinPortal:!0,keepMounted:!1,onOptionSubmit:e=>{b(e)},classNames:{dropdown:r(p?.dropdown??i(),p?.root??c()),options:p?.options??s(),option:p?.option??o(),empty:p?.empty??a(),search:p?.search},...S,children:[d(u.Target,{children:m}),f(u.Dropdown,{...x,children:[_&&_,d(e,{type:`scroll`,mah:g,classNames:{scrollArea:h?.classNames?.dropdownScrollAreaAutosize??l()},...h,children:t})]})]})};function m({options:e,shouldFilter:n=!0,defaultValue:r,onChange:i,...a}){return d(t,{options:e,shouldFilter:n,defaultValue:r,onChange:i,children:d(p,{...a})})}m.Options=u.Options,m.Options.displayName=`Dropdown.Options`,m.Option=u.Option,m.Option.displayName=`Dropdown.Option`,m.Empty=u.Empty,m.Empty.displayName=`Dropdown.Empty`,m.Search=u.Search,m.Search.displayName=`Dropdown.Search`,m.EventsTarget=u.EventsTarget,m.EventsTarget.displayName=`Dropdown.EventsTarget`;export{m as Dropdown};
+import{ScrollAreaAutosize as e}from"../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{DropdownContextProvider as t,useDropdownContext as n}from"./DropdownContextProvider.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropdown as i,dropdownEmpty as a,dropdownOption as o,dropdownOptions as s,dropdownRoot as c,dropdownScrollAreaAutosize as l}from"@mage-ui/styled-system/recipes";import{Combobox as u}from"@mantine/core";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({children:t,classNames:p,target:m,scrollAreaProps:h,dropdownHeight:g=192,dropdownTopSlot:_,...v})=>{let{store:y,setValue:b}=n(),x=Object.fromEntries(Object.entries(v).filter(([e])=>e.startsWith(`data-`))),S=Object.fromEntries(Object.entries(v).filter(([e])=>!e.startsWith(`data-`)));return f(u,{width:`target`,store:y,withinPortal:!0,keepMounted:!1,onOptionSubmit:e=>{b(e)},classNames:{dropdown:r(p?.dropdown??i(),p?.root??c()),options:p?.options??s(),option:p?.option??o(),empty:p?.empty??a(),search:p?.search},...S,children:[d(u.Target,{children:m}),f(u.Dropdown,{...x,children:[_&&_,d(e,{type:`scroll`,mah:g,classNames:{scrollArea:h?.classNames?.dropdownScrollAreaAutosize??l()},...h,children:t})]})]})};function m(e){let n=`value`in e,{value:r,options:i,shouldFilter:a=!0,defaultValue:o,onChange:s,...c}=e;return d(t,{options:i,shouldFilter:a,defaultValue:o,value:r,onChange:s,isControlled:n,children:d(p,{...c})})}m.Options=u.Options,m.Options.displayName=`Dropdown.Options`,m.Option=u.Option,m.Option.displayName=`Dropdown.Option`,m.Empty=u.Empty,m.Empty.displayName=`Dropdown.Empty`,m.Search=u.Search,m.Search.displayName=`Dropdown.Search`,m.EventsTarget=u.EventsTarget,m.EventsTarget.displayName=`Dropdown.EventsTarget`;export{m as Dropdown};
 //# sourceMappingURL=Dropdown.mjs.map

package/dist/components/controls/dropdown/Dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.mjs","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropdown,\n  dropdownEmpty,\n  dropdownOption,\n  dropdownOptions,\n  dropdownRoot,\n  dropdownScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox } from '@mantine/core';\n\nimport { ScrollAreaAutosize, type ScrollAreaAutosizeProps } from '../../misc';\nimport {\n  DropdownContextProvider,\n  type DropdownValue,\n  useDropdownContext,\n} from './DropdownContextProvider';\n\ntype DataAttributes = {\n  [key: `data-${string}`]: string | number | boolean | undefined;\n};\n\nexport type DropdownProps = {\n  children: ReactNode;\n  withinPortal?: boolean;\n  keepMounted?: boolean;\n  classNames?: {\n    dropdown?: string;\n    root?: string;\n    options?: string;\n    option?: string;\n    empty?: string;\n    search?: string;\n  };\n  target: ReactNode;\n  options: DropdownValue[];\n  scrollAreaProps?: Partial<\n    Omit<ScrollAreaAutosizeProps, 'children' | 'classNames'>\n  > & {\n    classNames?: Omit<\n      NonNullable<ScrollAreaAutosizeProps['classNames']>,\n      'scrollArea'\n    > & {\n      dropdownScrollAreaAutosize?: string;\n    };\n  };\n  dropdownHeight?: number | string;\n  shouldFilter?: boolean;\n  dropdownTopSlot?: ReactNode;\n  defaultValue?: DropdownValue;\n  onChange?: (value: DropdownValue) => void;\n} & DataAttributes;\n\nconst DropdownContent = ({\n  children,\n  classNames,\n  target,\n  scrollAreaProps,\n  dropdownHeight = 192,\n  dropdownTopSlot,\n  ...props\n}: Omit<DropdownProps, 'options' | 'defaultValue' | 'onChange'>) => {\n  const { store, setValue } = useDropdownContext();\n  const dataAttributes = Object.fromEntries(\n    Object.entries(props).filter(([key]) => key.startsWith('data-')),\n  ) as DataAttributes;\n  const comboboxProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => !key.startsWith('data-')),\n  );\n\n  return (\n    <MantineCombobox\n      width='target'\n      store={store}\n      withinPortal={true}\n      keepMounted={false}\n      onOptionSubmit={(option) => {\n        setValue(option);\n      }}\n      classNames={{\n        dropdown: cx(\n          classNames?.dropdown ?? dropdown(),\n          classNames?.root ?? dropdownRoot(),\n        ),\n        options: classNames?.options ?? dropdownOptions(),\n        option: classNames?.option ?? dropdownOption(),\n        empty: classNames?.empty ?? dropdownEmpty(),\n        search: classNames?.search,\n      }}\n      {...comboboxProps}\n    >\n      <MantineCombobox.Target>{target}</MantineCombobox.Target>\n      <MantineCombobox.Dropdown {...dataAttributes}>\n        {dropdownTopSlot && dropdownTopSlot}\n        <ScrollAreaAutosize\n          type='scroll'\n          mah={dropdownHeight}\n          classNames={{\n            scrollArea:\n              scrollAreaProps?.classNames?.dropdownScrollAreaAutosize ??\n              dropdownScrollAreaAutosize(),\n          }}\n          {...scrollAreaProps}\n        >\n          {children}\n        </ScrollAreaAutosize>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n};\n\nexport function Dropdown({\n  options,\n  shouldFilter = true,\n  defaultValue,\n  onChange,\n  ...props\n}: DropdownProps) {\n  return (\n    <DropdownContextProvider\n      options={options}\n      shouldFilter={shouldFilter}\n      defaultValue={defaultValue}\n      onChange={onChange}\n    >\n      <DropdownContent {...props} />\n    </DropdownContextProvider>\n  );\n}\n\nDropdown.Options = MantineCombobox.Options;\nDropdown.Options.displayName = 'Dropdown.Options';\nDropdown.Option = MantineCombobox.Option;\nDropdown.Option.displayName = 'Dropdown.Option';\nDropdown.Empty = MantineCombobox.Empty;\nDropdown.Empty.displayName = 'Dropdown.Empty';\nDropdown.Search = MantineCombobox.Search;\nDropdown.Search.displayName = 'Dropdown.Search';\nDropdown.EventsTarget = MantineCombobox.EventsTarget;\nDropdown.EventsTarget.displayName = 'Dropdown.EventsTarget';\n"],"mappings":"+eAuDA,MAAM,GAAmB,CACvB,WACA,aACA,SACA,kBACA,iBAAiB,IACjB,kBACA,GAAG,KAC+D,CAClE,GAAM,CAAE,QAAO,YAAa,GAAoB,CAC1C,EAAiB,OAAO,YAC5B,OAAO,QAAQ,EAAM,CAAC,QAAQ,CAAC,KAAS,EAAI,WAAW,QAAQ,CAAC,CACjE,CACK,EAAgB,OAAO,YAC3B,OAAO,QAAQ,EAAM,CAAC,QAAQ,CAAC,KAAS,CAAC,EAAI,WAAW,QAAQ,CAAC,CAClE,CAED,OACE,EAACA,EAAD,CACE,MAAM,SACC,QACP,aAAc,GACd,YAAa,GACb,eAAiB,GAAW,CAC1B,EAAS,EAAO,EAElB,WAAY,CACV,SAAU,EACR,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,QAAS,GAAY,SAAW,GAAiB,CACjD,OAAQ,GAAY,QAAU,GAAgB,CAC9C,MAAO,GAAY,OAAS,GAAe,CAC3C,OAAQ,GAAY,OACrB,CACD,GAAI,WAlBN,CAoBE,EAACA,EAAgB,OAAjB,CAAA,SAAyB,EAAgC,CAAA,CACzD,EAACA,EAAgB,SAAjB,CAA0B,GAAI,WAA9B,CACG,GAAmB,EACpB,EAAC,EAAD,CACE,KAAK,SACL,IAAK,EACL,WAAY,CACV,WACE,GAAiB,YAAY,4BAC7B,GAA4B,CAC/B,CACD,GAAI,EAEH,WACkB,CAAA,CACI,GACX,IAItB,SAAgB,EAAS,CACvB,UACA,eAAe,GACf,eACA,WACA,GAAG,GACa,CAChB,OACE,EAAC,EAAD,CACW,UACK,eACA,eACJ,oBAEV,EAAC,EAAD,CAAiB,GAAI,EAAS,CAAA,CACN,CAAA,CAI9B,EAAS,QAAUA,EAAgB,QACnC,EAAS,QAAQ,YAAc,mBAC/B,EAAS,OAASA,EAAgB,OAClC,EAAS,OAAO,YAAc,kBAC9B,EAAS,MAAQA,EAAgB,MACjC,EAAS,MAAM,YAAc,iBAC7B,EAAS,OAASA,EAAgB,OAClC,EAAS,OAAO,YAAc,kBAC9B,EAAS,aAAeA,EAAgB,aACxC,EAAS,aAAa,YAAc"}
+{"version":3,"file":"Dropdown.mjs","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropdown,\n  dropdownEmpty,\n  dropdownOption,\n  dropdownOptions,\n  dropdownRoot,\n  dropdownScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox } from '@mantine/core';\n\nimport { ScrollAreaAutosize, type ScrollAreaAutosizeProps } from '../../misc';\nimport {\n  DropdownContextProvider,\n  type DropdownValue,\n  useDropdownContext,\n} from './DropdownContextProvider';\n\ntype DataAttributes = {\n  [key: `data-${string}`]: string | number | boolean | undefined;\n};\n\nexport type DropdownProps = {\n  children: ReactNode;\n  withinPortal?: boolean;\n  keepMounted?: boolean;\n  classNames?: {\n    dropdown?: string;\n    root?: string;\n    options?: string;\n    option?: string;\n    empty?: string;\n    search?: string;\n  };\n  target: ReactNode;\n  options: DropdownValue[];\n  scrollAreaProps?: Partial<\n    Omit<ScrollAreaAutosizeProps, 'children' | 'classNames'>\n  > & {\n    classNames?: Omit<\n      NonNullable<ScrollAreaAutosizeProps['classNames']>,\n      'scrollArea'\n    > & {\n      dropdownScrollAreaAutosize?: string;\n    };\n  };\n  dropdownHeight?: number | string;\n  shouldFilter?: boolean;\n  dropdownTopSlot?: ReactNode;\n  defaultValue?: DropdownValue;\n  value?: DropdownValue;\n  onChange?: (value: DropdownValue) => void;\n} & DataAttributes;\n\nconst DropdownContent = ({\n  children,\n  classNames,\n  target,\n  scrollAreaProps,\n  dropdownHeight = 192,\n  dropdownTopSlot,\n  ...props\n}: Omit<DropdownProps, 'options' | 'defaultValue' | 'value' | 'onChange'>) => {\n  const { store, setValue } = useDropdownContext();\n  const dataAttributes = Object.fromEntries(\n    Object.entries(props).filter(([key]) => key.startsWith('data-')),\n  ) as DataAttributes;\n  const comboboxProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => !key.startsWith('data-')),\n  );\n\n  return (\n    <MantineCombobox\n      width='target'\n      store={store}\n      withinPortal={true}\n      keepMounted={false}\n      onOptionSubmit={(option) => {\n        setValue(option);\n      }}\n      classNames={{\n        dropdown: cx(\n          classNames?.dropdown ?? dropdown(),\n          classNames?.root ?? dropdownRoot(),\n        ),\n        options: classNames?.options ?? dropdownOptions(),\n        option: classNames?.option ?? dropdownOption(),\n        empty: classNames?.empty ?? dropdownEmpty(),\n        search: classNames?.search,\n      }}\n      {...comboboxProps}\n    >\n      <MantineCombobox.Target>{target}</MantineCombobox.Target>\n      <MantineCombobox.Dropdown {...dataAttributes}>\n        {dropdownTopSlot && dropdownTopSlot}\n        <ScrollAreaAutosize\n          type='scroll'\n          mah={dropdownHeight}\n          classNames={{\n            scrollArea:\n              scrollAreaProps?.classNames?.dropdownScrollAreaAutosize ??\n              dropdownScrollAreaAutosize(),\n          }}\n          {...scrollAreaProps}\n        >\n          {children}\n        </ScrollAreaAutosize>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n};\n\nexport function Dropdown(dropdownProps: DropdownProps) {\n  const isControlled = 'value' in dropdownProps;\n  const {\n    value,\n    options,\n    shouldFilter = true,\n    defaultValue,\n    onChange,\n    ...props\n  } = dropdownProps;\n\n  return (\n    <DropdownContextProvider\n      options={options}\n      shouldFilter={shouldFilter}\n      defaultValue={defaultValue}\n      value={value}\n      onChange={onChange}\n      isControlled={isControlled}\n    >\n      <DropdownContent {...props} />\n    </DropdownContextProvider>\n  );\n}\n\nDropdown.Options = MantineCombobox.Options;\nDropdown.Options.displayName = 'Dropdown.Options';\nDropdown.Option = MantineCombobox.Option;\nDropdown.Option.displayName = 'Dropdown.Option';\nDropdown.Empty = MantineCombobox.Empty;\nDropdown.Empty.displayName = 'Dropdown.Empty';\nDropdown.Search = MantineCombobox.Search;\nDropdown.Search.displayName = 'Dropdown.Search';\nDropdown.EventsTarget = MantineCombobox.EventsTarget;\nDropdown.EventsTarget.displayName = 'Dropdown.EventsTarget';\n"],"mappings":"+eAwDA,MAAM,GAAmB,CACvB,WACA,aACA,SACA,kBACA,iBAAiB,IACjB,kBACA,GAAG,KACyE,CAC5E,GAAM,CAAE,QAAO,YAAa,GAAoB,CAC1C,EAAiB,OAAO,YAC5B,OAAO,QAAQ,EAAM,CAAC,QAAQ,CAAC,KAAS,EAAI,WAAW,QAAQ,CAAC,CACjE,CACK,EAAgB,OAAO,YAC3B,OAAO,QAAQ,EAAM,CAAC,QAAQ,CAAC,KAAS,CAAC,EAAI,WAAW,QAAQ,CAAC,CAClE,CAED,OACE,EAACA,EAAD,CACE,MAAM,SACC,QACP,aAAc,GACd,YAAa,GACb,eAAiB,GAAW,CAC1B,EAAS,EAAO,EAElB,WAAY,CACV,SAAU,EACR,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,QAAS,GAAY,SAAW,GAAiB,CACjD,OAAQ,GAAY,QAAU,GAAgB,CAC9C,MAAO,GAAY,OAAS,GAAe,CAC3C,OAAQ,GAAY,OACrB,CACD,GAAI,WAlBN,CAoBE,EAACA,EAAgB,OAAjB,CAAA,SAAyB,EAAgC,CAAA,CACzD,EAACA,EAAgB,SAAjB,CAA0B,GAAI,WAA9B,CACG,GAAmB,EACpB,EAAC,EAAD,CACE,KAAK,SACL,IAAK,EACL,WAAY,CACV,WACE,GAAiB,YAAY,4BAC7B,GAA4B,CAC/B,CACD,GAAI,EAEH,WACkB,CAAA,CACI,GACX,IAItB,SAAgB,EAAS,EAA8B,CACrD,IAAM,EAAe,UAAW,EAC1B,CACJ,QACA,UACA,eAAe,GACf,eACA,WACA,GAAG,GACD,EAEJ,OACE,EAAC,EAAD,CACW,UACK,eACA,eACP,QACG,WACI,wBAEd,EAAC,EAAD,CAAiB,GAAI,EAAS,CAAA,CACN,CAAA,CAI9B,EAAS,QAAUA,EAAgB,QACnC,EAAS,QAAQ,YAAc,mBAC/B,EAAS,OAASA,EAAgB,OAClC,EAAS,OAAO,YAAc,kBAC9B,EAAS,MAAQA,EAAgB,MACjC,EAAS,MAAM,YAAc,iBAC7B,EAAS,OAASA,EAAgB,OAClC,EAAS,OAAO,YAAc,kBAC9B,EAAS,aAAeA,EAAgB,aACxC,EAAS,aAAa,YAAc"}

package/dist/components/controls/dropdown/DropdownContextProvider.mjs

@@ -1,2 +1,2 @@
-import{useCombobox as e}from"@mantine/core";import{jsx as t}from"react/jsx-runtime";import{createContext as n,useContext as r,useState as i}from"react";const a=n({store:{},value:{id:``,value:``},query:void 0,setValue:()=>{},setQuery:()=>{},options:[]});function o(){let e=r(a);if(!e)throw Error(`useDropdownContext must be used within DropdownContextProvider`);return e}function s({children:n,options:r,shouldFilter:o=!0,defaultValue:s,onChange:c}){let[l,u]=i(void 0),[d,f]=i(s??{id:``,value:``}),p=e({scrollBehavior:`smooth`,onDropdownClose:()=>p.resetSelectedOption()}),m=l&&o?r.filter(e=>e.value?.toString().toLowerCase().trim().includes(l?.toLowerCase().trim())):r;return t(a.Provider,{value:{store:p,value:d,setValue:e=>{let t=r.find(t=>t.value===e),n;n=e&&!t?{id:``,value:e}:t??{id:``,value:``},f(n),c?.(n),u(void 0),p.closeDropdown()},query:l,setQuery:u,options:m},children:n})}export{s as DropdownContextProvider,o as useDropdownContext};
+import{useCombobox as e}from"@mantine/core";import{jsx as t}from"react/jsx-runtime";import{createContext as n,useContext as r,useState as i}from"react";const a={id:``,value:``},o=n({store:{},value:a,query:void 0,setValue:()=>{},setQuery:()=>{},options:[]});function s(){let e=r(o);if(!e)throw Error(`useDropdownContext must be used within DropdownContextProvider`);return e}function c({children:n,options:r,shouldFilter:s=!0,defaultValue:c,value:l,onChange:u,isControlled:d=!1}){let[f,p]=i(void 0),[m,h]=i(l??c??a),g=d?l??a:m,_=e({scrollBehavior:`smooth`,onDropdownClose:()=>_.resetSelectedOption()}),v=f&&s?r.filter(e=>e.value?.toString().toLowerCase().trim().includes(f.toLowerCase().trim())):r;return t(o.Provider,{value:{store:_,value:g,setValue:e=>{let t=r.find(t=>t.value?.toString()===e),n;n=e&&!t?{id:``,value:e}:t??a,d||h(n),u?.(n),p(void 0),_.closeDropdown()},query:f,setQuery:p,options:v},children:n})}export{c as DropdownContextProvider,s as useDropdownContext};
 //# sourceMappingURL=DropdownContextProvider.mjs.map

package/dist/components/controls/dropdown/DropdownContextProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownContextProvider.mjs","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownContextProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\n\nimport { type ComboboxStore, useCombobox } from '@mantine/core';\n\nexport type DropdownValue = {\n  id: string | number;\n  value: string | number | undefined | null;\n  render?: ReactNode;\n};\n\ntype DropdownContextType = {\n  store: ComboboxStore;\n  value: DropdownValue;\n  setValue: (value: string | undefined) => void;\n  query: string | undefined;\n  setQuery: (query: string | undefined) => void;\n  options: DropdownValue[];\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  store: {} as ComboboxStore,\n  value: { id: '', value: '' },\n  query: undefined,\n  setValue: () => {},\n  setQuery: () => {},\n  options: [],\n});\n\nexport function useDropdownContext(): DropdownContextType {\n  const ctx = useContext(DropdownContext);\n  if (!ctx)\n    throw new Error(\n      'useDropdownContext must be used within DropdownContextProvider',\n    );\n  return ctx;\n}\n\nexport function DropdownContextProvider({\n  children,\n  options,\n  shouldFilter = true,\n  defaultValue,\n  onChange,\n}: {\n  children: React.ReactNode;\n  options: DropdownValue[];\n  shouldFilter?: boolean;\n  defaultValue?: DropdownValue;\n  onChange?: (value: DropdownValue) => void;\n}) {\n  const [query, setQuery] = useState<string | undefined>(undefined);\n\n  const initialValue = defaultValue ?? { id: '', value: '' };\n\n  const [value, setValue] = useState<DropdownValue>(initialValue);\n\n  const store = useCombobox({\n    scrollBehavior: 'smooth',\n    onDropdownClose: () => store.resetSelectedOption(),\n  });\n\n  const filteredOptions =\n    query && shouldFilter\n      ? options.filter((item) =>\n          item.value\n            ?.toString()\n            .toLowerCase()\n            .trim()\n            .includes(query?.toLowerCase().trim()),\n        )\n      : options;\n\n  const handleValueChange = (value: string | undefined) => {\n    const option = options.find((option) => option.value === value);\n\n    let newValue: DropdownValue;\n    if (value && !option) {\n      newValue = { id: '', value: value };\n    } else {\n      newValue = option ?? { id: '', value: '' };\n    }\n\n    setValue(newValue);\n    onChange?.(newValue);\n\n    setQuery(undefined);\n    store.closeDropdown();\n  };\n\n  return (\n    <DropdownContext.Provider\n      value={{\n        store,\n        value,\n        setValue: handleValueChange,\n        query,\n        setQuery,\n        options: filteredOptions,\n      }}\n    >\n      {children}\n    </DropdownContext.Provider>\n  );\n}\n"],"mappings":"wJAoBA,MAAM,EAAkB,EAAmC,CACzD,MAAO,EAAE,CACT,MAAO,CAAE,GAAI,GAAI,MAAO,GAAI,CAC5B,MAAO,IAAA,GACP,aAAgB,GAChB,aAAgB,GAChB,QAAS,EAAE,CACZ,CAAC,CAEF,SAAgB,GAA0C,CACxD,IAAM,EAAM,EAAW,EAAgB,CACvC,GAAI,CAAC,EACH,MAAU,MACR,iEACD,CACH,OAAO,EAGT,SAAgB,EAAwB,CACtC,WACA,UACA,eAAe,GACf,eACA,YAOC,CACD,GAAM,CAAC,EAAO,GAAY,EAA6B,IAAA,GAAU,CAI3D,CAAC,EAAO,GAAY,EAFL,GAAgB,CAAE,GAAI,GAAI,MAAO,GAAI,CAEK,CAEzD,EAAQ,EAAY,CACxB,eAAgB,SAChB,oBAAuB,EAAM,qBAAqB,CACnD,CAAC,CAEI,EACJ,GAAS,EACL,EAAQ,OAAQ,GACd,EAAK,OACD,UAAU,CACX,aAAa,CACb,MAAM,CACN,SAAS,GAAO,aAAa,CAAC,MAAM,CAAC,CACzC,CACD,EAmBN,OACE,EAAC,EAAgB,SAAjB,CACE,MAAO,CACL,QACA,QACA,SAtBqB,GAA8B,CACvD,IAAM,EAAS,EAAQ,KAAM,GAAW,EAAO,QAAU,EAAM,CAE3D,EACJ,AAGE,EAHE,GAAS,CAAC,EACD,CAAE,GAAI,GAAW,QAAO,CAExB,GAAU,CAAE,GAAI,GAAI,MAAO,GAAI,CAG5C,EAAS,EAAS,CAClB,IAAW,EAAS,CAEpB,EAAS,IAAA,GAAU,CACnB,EAAM,eAAe,EASjB,QACA,WACA,QAAS,EACV,CAEA,WACwB,CAAA"}
+{"version":3,"file":"DropdownContextProvider.mjs","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownContextProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\n\nimport { type ComboboxStore, useCombobox } from '@mantine/core';\n\nexport type DropdownValue = {\n  id: string | number;\n  value: string | number | undefined | null;\n  render?: ReactNode;\n};\n\ntype DropdownContextType = {\n  store: ComboboxStore;\n  value: DropdownValue;\n  setValue: (value: string | undefined) => void;\n  query: string | undefined;\n  setQuery: (query: string | undefined) => void;\n  options: DropdownValue[];\n};\n\nconst EMPTY_DROPDOWN_VALUE: DropdownValue = {\n  id: '',\n  value: '',\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n  store: {} as ComboboxStore,\n  value: EMPTY_DROPDOWN_VALUE,\n  query: undefined,\n  setValue: () => {},\n  setQuery: () => {},\n  options: [],\n});\n\nexport function useDropdownContext(): DropdownContextType {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) {\n    throw new Error(\n      'useDropdownContext must be used within DropdownContextProvider',\n    );\n  }\n\n  return ctx;\n}\n\nexport function DropdownContextProvider({\n  children,\n  options,\n  shouldFilter = true,\n  defaultValue,\n  value,\n  onChange,\n  isControlled = false,\n}: {\n  children: ReactNode;\n  options: DropdownValue[];\n  shouldFilter?: boolean;\n  defaultValue?: DropdownValue;\n  value?: DropdownValue;\n  onChange?: (value: DropdownValue) => void;\n  isControlled?: boolean;\n}) {\n  const [query, setQuery] = useState<string | undefined>(undefined);\n  const [uncontrolledValue, setUncontrolledValue] = useState<DropdownValue>(\n    value ?? defaultValue ?? EMPTY_DROPDOWN_VALUE,\n  );\n  const selectedValue = isControlled\n    ? (value ?? EMPTY_DROPDOWN_VALUE)\n    : uncontrolledValue;\n\n  const store = useCombobox({\n    scrollBehavior: 'smooth',\n    onDropdownClose: () => store.resetSelectedOption(),\n  });\n\n  const filteredOptions =\n    query && shouldFilter\n      ? options.filter((item) =>\n          item.value\n            ?.toString()\n            .toLowerCase()\n            .trim()\n            .includes(query.toLowerCase().trim()),\n        )\n      : options;\n\n  const handleValueChange = (nextValue: string | undefined) => {\n    const option = options.find(\n      (option) => option.value?.toString() === nextValue,\n    );\n\n    let resolvedValue: DropdownValue;\n    if (nextValue && !option) {\n      resolvedValue = { id: '', value: nextValue };\n    } else {\n      resolvedValue = option ?? EMPTY_DROPDOWN_VALUE;\n    }\n\n    if (!isControlled) {\n      setUncontrolledValue(resolvedValue);\n    }\n\n    onChange?.(resolvedValue);\n\n    setQuery(undefined);\n    store.closeDropdown();\n  };\n\n  return (\n    <DropdownContext.Provider\n      value={{\n        store,\n        value: selectedValue,\n        setValue: handleValueChange,\n        query,\n        setQuery,\n        options: filteredOptions,\n      }}\n    >\n      {children}\n    </DropdownContext.Provider>\n  );\n}\n"],"mappings":"wJAoBA,MAAM,EAAsC,CAC1C,GAAI,GACJ,MAAO,GACR,CAEK,EAAkB,EAAmC,CACzD,MAAO,EAAE,CACT,MAAO,EACP,MAAO,IAAA,GACP,aAAgB,GAChB,aAAgB,GAChB,QAAS,EAAE,CACZ,CAAC,CAEF,SAAgB,GAA0C,CACxD,IAAM,EAAM,EAAW,EAAgB,CACvC,GAAI,CAAC,EACH,MAAU,MACR,iEACD,CAGH,OAAO,EAGT,SAAgB,EAAwB,CACtC,WACA,UACA,eAAe,GACf,eACA,QACA,WACA,eAAe,IASd,CACD,GAAM,CAAC,EAAO,GAAY,EAA6B,IAAA,GAAU,CAC3D,CAAC,EAAmB,GAAwB,EAChD,GAAS,GAAgB,EAC1B,CACK,EAAgB,EACjB,GAAS,EACV,EAEE,EAAQ,EAAY,CACxB,eAAgB,SAChB,oBAAuB,EAAM,qBAAqB,CACnD,CAAC,CAEI,EACJ,GAAS,EACL,EAAQ,OAAQ,GACd,EAAK,OACD,UAAU,CACX,aAAa,CACb,MAAM,CACN,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CACxC,CACD,EAwBN,OACE,EAAC,EAAgB,SAAjB,CACE,MAAO,CACL,QACA,MAAO,EACP,SA3BqB,GAAkC,CAC3D,IAAM,EAAS,EAAQ,KACpB,GAAW,EAAO,OAAO,UAAU,GAAK,EAC1C,CAEG,EACJ,AAGE,EAHE,GAAa,CAAC,EACA,CAAE,GAAI,GAAI,MAAO,EAAW,CAE5B,GAAU,EAGvB,GACH,EAAqB,EAAc,CAGrC,IAAW,EAAc,CAEzB,EAAS,IAAA,GAAU,CACnB,EAAM,eAAe,EASjB,QACA,WACA,QAAS,EACV,CAEA,WACwB,CAAA"}

package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts

@@ -6,6 +6,8 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/components/controls/dropdown/autocomplete/Autocomplete.d.ts
 type AutocompleteProps = Omit<ComboboxProps, 'options' | 'classNames'> & {
   name: string;
+  description?: string;
+  error?: string;
   url?: string;
   fetcher: (params: {
     url?: string;
@@ -23,6 +25,8 @@ type AutocompleteProps = Omit<ComboboxProps, 'options' | 'classNames'> & {
 declare const Autocomplete: ({
   name,
   label,
+  description,
+  error,
   placeholder,
   creatable,
   url,

package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"mappings":";;;;;;KAkCY,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EAGA,IAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAe1B,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"mappings":";;;;;;KAkCY,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EAGA,IAAA;EACA,WAAA;EACA,KAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAiB1B,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/dropdown/autocomplete/Autocomplete.mjs

@@ -1,2 +1,2 @@
-import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{AutocompleteTarget as n}from"./AutocompleteTarget.mjs";import{autocomplete as r,autocompleteClearButton as i,autocompleteClearButtonIcon as a,autocompleteClearButtonIconRaw as o,autocompleteClearButtonIconRawRoot as ee,autocompleteClearButtonRoot as s,autocompleteEmpty as c,autocompleteOption as l,autocompleteOptions as u,autocompleteRoot as d,autocompleteScrollAreaAutosize as f,autocompleteTextInput as p,autocompleteTextInputDescription as te,autocompleteTextInputError as m,autocompleteTextInputInput as h,autocompleteTextInputLabel as g,autocompleteTextInputRequired as _,autocompleteTextInputRoot as v,autocompleteTextInputSection as y,autocompleteTextInputWrapper as b}from"@mage-ui/styled-system/recipes";import{jsx as x}from"react/jsx-runtime";import{useState as S}from"react";import{useDebouncedCallback as C}from"@mantine/hooks";import{useQuery as w}from"@tanstack/react-query";const T=({name:T,label:E,placeholder:D,creatable:O,url:k,fetcher:A,query:j=``,debounce:M=500,threshold:N=3,clearButtonText:P,createText:F,emptyText:I=`No hay resultados`,classNames:L,...R})=>{let[z,B]=S(j),[V,H]=S(!1),{data:U,isFetching:W}=w({queryKey:[T,k,z],queryFn:()=>A({url:k,query:z}),initialData:[],enabled:z.length>=N}),G=C(e=>{B(e),H(!1)},M),K=e=>{H(!0),G(e)},{creatable:q,empty:J,target:Y,scrollArea:X,...Z}=L||{},{clearButton:Q,...$}=Y||{},ne={placeholder:D,label:E,classNames:{dropdownTextInput:$?.dropdownTextInput??p(),root:$?.root??v(),label:$?.label??g(),description:$?.description??te(),error:$?.error??m(),wrapper:$?.wrapper??b(),input:$?.input??h(),section:$?.section??y(),required:$?.required??_()},clearButtonProps:{label:P,classNames:{clearButton:Q?.clearButton??i(),root:Q?.root??s(),icon:Q?.icon??a(),iconRaw:{iconRaw:Q?.iconRaw?.iconRaw??o(),root:Q?.iconRaw?.root??ee()}}}},re={emptyText:I,classNames:{empty:J?.empty??c()}},ie={creatable:O??!1,createText:F,classNames:q};return x(e,{shouldFilter:!1,classNames:{dropdown:Z?.dropdown??r(),root:Z?.root??d(),options:Z?.options??u(),option:Z?.option??l(),empty:J?.empty??c(),search:Z?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:X?.dropdownScrollAreaAutosize??f()}},target:x(n,{debounced:K,isLoading:W||V,threshold:N,showEmpty:I!==void 0,...ne}),options:U,...R,children:x(t,{emptyProps:re,creatableProps:ie})})};export{T as Autocomplete};
+import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{AutocompleteTarget as n}from"./AutocompleteTarget.mjs";import{autocomplete as r,autocompleteClearButton as i,autocompleteClearButtonIcon as a,autocompleteClearButtonIconRaw as o,autocompleteClearButtonIconRawRoot as s,autocompleteClearButtonRoot as c,autocompleteEmpty as l,autocompleteOption as u,autocompleteOptions as d,autocompleteRoot as f,autocompleteScrollAreaAutosize as ee,autocompleteTextInput as te,autocompleteTextInputDescription as ne,autocompleteTextInputError as p,autocompleteTextInputInput as m,autocompleteTextInputLabel as h,autocompleteTextInputRequired as g,autocompleteTextInputRoot as _,autocompleteTextInputSection as v,autocompleteTextInputWrapper as y}from"@mage-ui/styled-system/recipes";import{jsx as b}from"react/jsx-runtime";import{useState as x}from"react";import{useDebouncedCallback as S}from"@mantine/hooks";import{useQuery as C}from"@tanstack/react-query";const w=({name:w,label:T,description:E,error:D,placeholder:O,creatable:k,url:A,fetcher:j,query:re=``,debounce:M=500,threshold:N=3,clearButtonText:P,createText:F,emptyText:I=`No hay resultados`,classNames:L,...R})=>{let[z,B]=x(re),[V,H]=x(!1),{data:U,isFetching:W}=C({queryKey:[w,A,z],queryFn:()=>j({url:A,query:z}),initialData:[],enabled:z.length>=N}),G=S(e=>{B(e),H(!1)},M),K=e=>{H(!0),G(e)},{creatable:q,empty:J,target:Y,scrollArea:X,...Z}=L||{},{clearButton:Q,...$}=Y||{},ie={placeholder:O,label:T,description:E,error:D,classNames:{dropdownTextInput:$?.dropdownTextInput??te(),root:$?.root??_(),label:$?.label??h(),description:$?.description??ne(),error:$?.error??p(),wrapper:$?.wrapper??y(),input:$?.input??m(),section:$?.section??v(),required:$?.required??g()},clearButtonProps:{label:P,classNames:{clearButton:Q?.clearButton??i(),root:Q?.root??c(),icon:Q?.icon??a(),iconRaw:{iconRaw:Q?.iconRaw?.iconRaw??o(),root:Q?.iconRaw?.root??s()}}}},ae={emptyText:I,classNames:{empty:J?.empty??l()}},oe={creatable:k??!1,createText:F,classNames:q};return b(e,{shouldFilter:!1,classNames:{dropdown:Z?.dropdown??r(),root:Z?.root??f(),options:Z?.options??d(),option:Z?.option??u(),empty:J?.empty??l(),search:Z?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:X?.dropdownScrollAreaAutosize??ee()}},target:b(n,{debounced:K,isLoading:W||V,threshold:N,showEmpty:I!==void 0,...ie}),options:U,...R,children:b(t,{emptyProps:ae,creatableProps:oe})})};export{w as Autocomplete};
 //# sourceMappingURL=Autocomplete.mjs.map

package/dist/components/controls/dropdown/autocomplete/Autocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n  autocomplete,\n  autocompleteClearButton,\n  autocompleteClearButtonIcon,\n  autocompleteClearButtonIconRaw,\n  autocompleteClearButtonIconRawRoot,\n  autocompleteClearButtonRoot,\n  autocompleteEmpty,\n  autocompleteOption,\n  autocompleteOptions,\n  autocompleteRoot,\n  autocompleteScrollAreaAutosize,\n  autocompleteTextInput,\n  autocompleteTextInputDescription,\n  autocompleteTextInputError,\n  autocompleteTextInputInput,\n  autocompleteTextInputLabel,\n  autocompleteTextInputRequired,\n  autocompleteTextInputRoot,\n  autocompleteTextInputSection,\n  autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n  ComboboxProps,\n  'options' | 'classNames'\n> & {\n  name: string;\n  url?: string;\n  fetcher: (params: {\n    url?: string;\n    query: string;\n  }) => Promise<DropdownValue[]>;\n  threshold?: number;\n  debounce?: number;\n  query?: string;\n  classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n    };\n  };\n};\n\nexport const Autocomplete = ({\n  name,\n  label,\n  placeholder,\n  creatable,\n  url,\n  fetcher,\n  query = '',\n  debounce = 500,\n  threshold = 3,\n  clearButtonText,\n  createText,\n  emptyText = 'No hay resultados',\n  classNames,\n  ...props\n}: AutocompleteProps) => {\n  const [searchValue, setSearchValue] = useState(query);\n  const [isTyping, setIsTyping] = useState(false);\n\n  const { data, isFetching } = useQuery<DropdownValue[]>({\n    queryKey: [name, url, searchValue],\n    queryFn: () => {\n      return fetcher({\n        url,\n        query: searchValue,\n      });\n    },\n    initialData: [],\n    enabled: searchValue.length >= threshold,\n  });\n\n  const debounced = useDebouncedCallback((value: string) => {\n    setSearchValue(value);\n    setIsTyping(false);\n  }, debounce);\n\n  const handleSearch = (value: string) => {\n    setIsTyping(true);\n    debounced(value);\n  };\n\n  const {\n    creatable: creatableClassNames,\n    empty: emptyClassNames,\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const { clearButton: clearButtonClassNames, ...restTargetClassNames } =\n    targetClassNames || {};\n\n  const targetProps = {\n    placeholder,\n    label,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? autocompleteTextInput(),\n      root: restTargetClassNames?.root ?? autocompleteTextInputRoot(),\n      label: restTargetClassNames?.label ?? autocompleteTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? autocompleteTextInputDescription(),\n      error: restTargetClassNames?.error ?? autocompleteTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? autocompleteTextInputWrapper(),\n      input: restTargetClassNames?.input ?? autocompleteTextInputInput(),\n      section: restTargetClassNames?.section ?? autocompleteTextInputSection(),\n      required:\n        restTargetClassNames?.required ?? autocompleteTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton:\n          clearButtonClassNames?.clearButton ?? autocompleteClearButton(),\n        root: clearButtonClassNames?.root ?? autocompleteClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? autocompleteClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            autocompleteClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            autocompleteClearButtonIconRawRoot(),\n        },\n      },\n    },\n  };\n\n  const emptyProps = {\n    emptyText,\n    classNames: {\n      empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n    },\n  };\n\n  const creatableProps = {\n    creatable: creatable ?? false,\n    createText,\n    classNames: creatableClassNames,\n  };\n\n  return (\n    <Dropdown\n      shouldFilter={false}\n      classNames={{\n        dropdown: dropdownClassNames?.dropdown ?? autocomplete(),\n        root: dropdownClassNames?.root ?? autocompleteRoot(),\n        options: dropdownClassNames?.options ?? autocompleteOptions(),\n        option: dropdownClassNames?.option ?? autocompleteOption(),\n        empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n        search: dropdownClassNames?.search,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            autocompleteScrollAreaAutosize(),\n        },\n      }}\n      target={\n        <AutocompleteTarget\n          debounced={handleSearch}\n          isLoading={isFetching || isTyping}\n          threshold={threshold}\n          showEmpty={emptyText !== undefined}\n          {...targetProps}\n        />\n      }\n      options={data}\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={emptyProps}\n        creatableProps={creatableProps}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"++BAwDA,MAAa,GAAgB,CAC3B,OACA,QACA,cACA,YACA,MACA,UACA,QAAQ,GACR,WAAW,IACX,YAAY,EACZ,kBACA,aACA,YAAY,oBACZ,aACA,GAAG,KACoB,CACvB,GAAM,CAAC,EAAa,GAAkB,EAAS,EAAM,CAC/C,CAAC,EAAU,GAAe,EAAS,GAAM,CAEzC,CAAE,OAAM,cAAe,EAA0B,CACrD,SAAU,CAAC,EAAM,EAAK,EAAY,CAClC,YACS,EAAQ,CACb,MACA,MAAO,EACR,CAAC,CAEJ,YAAa,EAAE,CACf,QAAS,EAAY,QAAU,EAChC,CAAC,CAEI,EAAY,EAAsB,GAAkB,CACxD,EAAe,EAAM,CACrB,EAAY,GAAM,EACjB,EAAS,CAEN,EAAgB,GAAkB,CACtC,EAAY,GAAK,CACjB,EAAU,EAAM,EAGZ,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CAAE,YAAa,EAAuB,GAAG,GAC7C,GAAoB,EAAE,CAElB,GAAc,CAClB,cACA,QACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAuB,CACpE,KAAM,GAAsB,MAAQ,GAA2B,CAC/D,MAAO,GAAsB,OAAS,GAA4B,CAClE,YACE,GAAsB,aAAe,IAAkC,CACzE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,SACE,GAAsB,UAAY,GAA+B,CACpE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAyB,CACjE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAAgC,CAClC,KACE,GAAuB,SAAS,MAChC,IAAoC,CACvC,CACF,CACF,CACF,CAEK,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,GAAmB,CACrD,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,aACA,WAAY,EACb,CAED,OACE,EAAC,EAAD,CACE,aAAc,GACd,WAAY,CACV,SAAU,GAAoB,UAAY,GAAc,CACxD,KAAM,GAAoB,MAAQ,GAAkB,CACpD,QAAS,GAAoB,SAAW,GAAqB,CAC7D,OAAQ,GAAoB,QAAU,GAAoB,CAC1D,MAAO,GAAiB,OAAS,GAAmB,CACpD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAAgC,CACnC,CACF,CACD,OACE,EAAC,EAAD,CACE,UAAW,EACX,UAAW,GAAc,EACd,YACX,UAAW,IAAc,IAAA,GACzB,GAAI,GACJ,CAAA,CAEJ,QAAS,EACT,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}
+{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n  autocomplete,\n  autocompleteClearButton,\n  autocompleteClearButtonIcon,\n  autocompleteClearButtonIconRaw,\n  autocompleteClearButtonIconRawRoot,\n  autocompleteClearButtonRoot,\n  autocompleteEmpty,\n  autocompleteOption,\n  autocompleteOptions,\n  autocompleteRoot,\n  autocompleteScrollAreaAutosize,\n  autocompleteTextInput,\n  autocompleteTextInputDescription,\n  autocompleteTextInputError,\n  autocompleteTextInputInput,\n  autocompleteTextInputLabel,\n  autocompleteTextInputRequired,\n  autocompleteTextInputRoot,\n  autocompleteTextInputSection,\n  autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n  ComboboxProps,\n  'options' | 'classNames'\n> & {\n  name: string;\n  description?: string;\n  error?: string;\n  url?: string;\n  fetcher: (params: {\n    url?: string;\n    query: string;\n  }) => Promise<DropdownValue[]>;\n  threshold?: number;\n  debounce?: number;\n  query?: string;\n  classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n    };\n  };\n};\n\nexport const Autocomplete = ({\n  name,\n  label,\n  description,\n  error,\n  placeholder,\n  creatable,\n  url,\n  fetcher,\n  query = '',\n  debounce = 500,\n  threshold = 3,\n  clearButtonText,\n  createText,\n  emptyText = 'No hay resultados',\n  classNames,\n  ...props\n}: AutocompleteProps) => {\n  const [searchValue, setSearchValue] = useState(query);\n  const [isTyping, setIsTyping] = useState(false);\n\n  const { data, isFetching } = useQuery<DropdownValue[]>({\n    queryKey: [name, url, searchValue],\n    queryFn: () => {\n      return fetcher({\n        url,\n        query: searchValue,\n      });\n    },\n    initialData: [],\n    enabled: searchValue.length >= threshold,\n  });\n\n  const debounced = useDebouncedCallback((value: string) => {\n    setSearchValue(value);\n    setIsTyping(false);\n  }, debounce);\n\n  const handleSearch = (value: string) => {\n    setIsTyping(true);\n    debounced(value);\n  };\n\n  const {\n    creatable: creatableClassNames,\n    empty: emptyClassNames,\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const { clearButton: clearButtonClassNames, ...restTargetClassNames } =\n    targetClassNames || {};\n\n  const targetProps = {\n    placeholder,\n    label,\n    description,\n    error,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? autocompleteTextInput(),\n      root: restTargetClassNames?.root ?? autocompleteTextInputRoot(),\n      label: restTargetClassNames?.label ?? autocompleteTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? autocompleteTextInputDescription(),\n      error: restTargetClassNames?.error ?? autocompleteTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? autocompleteTextInputWrapper(),\n      input: restTargetClassNames?.input ?? autocompleteTextInputInput(),\n      section: restTargetClassNames?.section ?? autocompleteTextInputSection(),\n      required:\n        restTargetClassNames?.required ?? autocompleteTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton:\n          clearButtonClassNames?.clearButton ?? autocompleteClearButton(),\n        root: clearButtonClassNames?.root ?? autocompleteClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? autocompleteClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            autocompleteClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            autocompleteClearButtonIconRawRoot(),\n        },\n      },\n    },\n  };\n\n  const emptyProps = {\n    emptyText,\n    classNames: {\n      empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n    },\n  };\n\n  const creatableProps = {\n    creatable: creatable ?? false,\n    createText,\n    classNames: creatableClassNames,\n  };\n\n  return (\n    <Dropdown\n      shouldFilter={false}\n      classNames={{\n        dropdown: dropdownClassNames?.dropdown ?? autocomplete(),\n        root: dropdownClassNames?.root ?? autocompleteRoot(),\n        options: dropdownClassNames?.options ?? autocompleteOptions(),\n        option: dropdownClassNames?.option ?? autocompleteOption(),\n        empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n        search: dropdownClassNames?.search,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            autocompleteScrollAreaAutosize(),\n        },\n      }}\n      target={\n        <AutocompleteTarget\n          debounced={handleSearch}\n          isLoading={isFetching || isTyping}\n          threshold={threshold}\n          showEmpty={emptyText !== undefined}\n          {...targetProps}\n        />\n      }\n      options={data}\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={emptyProps}\n        creatableProps={creatableProps}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"g/BA0DA,MAAa,GAAgB,CAC3B,OACA,QACA,cACA,QACA,cACA,YACA,MACA,UACA,SAAQ,GACR,WAAW,IACX,YAAY,EACZ,kBACA,aACA,YAAY,oBACZ,aACA,GAAG,KACoB,CACvB,GAAM,CAAC,EAAa,GAAkB,EAAS,GAAM,CAC/C,CAAC,EAAU,GAAe,EAAS,GAAM,CAEzC,CAAE,OAAM,cAAe,EAA0B,CACrD,SAAU,CAAC,EAAM,EAAK,EAAY,CAClC,YACS,EAAQ,CACb,MACA,MAAO,EACR,CAAC,CAEJ,YAAa,EAAE,CACf,QAAS,EAAY,QAAU,EAChC,CAAC,CAEI,EAAY,EAAsB,GAAkB,CACxD,EAAe,EAAM,CACrB,EAAY,GAAM,EACjB,EAAS,CAEN,EAAgB,GAAkB,CACtC,EAAY,GAAK,CACjB,EAAU,EAAM,EAGZ,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CAAE,YAAa,EAAuB,GAAG,GAC7C,GAAoB,EAAE,CAElB,GAAc,CAClB,cACA,QACA,cACA,QACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,IAAuB,CACpE,KAAM,GAAsB,MAAQ,GAA2B,CAC/D,MAAO,GAAsB,OAAS,GAA4B,CAClE,YACE,GAAsB,aAAe,IAAkC,CACzE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,SACE,GAAsB,UAAY,GAA+B,CACpE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAyB,CACjE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAAgC,CAClC,KACE,GAAuB,SAAS,MAChC,GAAoC,CACvC,CACF,CACF,CACF,CAEK,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,GAAmB,CACrD,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,aACA,WAAY,EACb,CAED,OACE,EAAC,EAAD,CACE,aAAc,GACd,WAAY,CACV,SAAU,GAAoB,UAAY,GAAc,CACxD,KAAM,GAAoB,MAAQ,GAAkB,CACpD,QAAS,GAAoB,SAAW,GAAqB,CAC7D,OAAQ,GAAoB,QAAU,GAAoB,CAC1D,MAAO,GAAiB,OAAS,GAAmB,CACpD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,IAAgC,CACnC,CACF,CACD,OACE,EAAC,EAAD,CACE,UAAW,EACX,UAAW,GAAc,EACd,YACX,UAAW,IAAc,IAAA,GACzB,GAAI,GACJ,CAAA,CAEJ,QAAS,EACT,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}

package/dist/components/controls/dropdown/select/Select.mjs

@@ -1,2 +1,2 @@
-import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as n}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as r}from"./SelectSearch.mjs";import{select as i,selectChevron as a,selectChevronIcon as o,selectChevronIconRoot as s,selectChevronRoot as c,selectClearButton as l,selectClearButtonIcon as u,selectClearButtonIconRaw as d,selectClearButtonIconRawRoot as f,selectClearButtonRoot as p,selectEmpty as m,selectOption as h,selectOptions as g,selectRoot as _,selectScrollAreaAutosize as v,selectSearchInput as y,selectSearchSection as b,selectSearchWrapper as x,selectTextInput as S,selectTextInputDescription as C,selectTextInputError as w,selectTextInputInput as T,selectTextInputLabel as E,selectTextInputRequired as D,selectTextInputRoot as O,selectTextInputSection as k,selectTextInputWrapper as A}from"@mage-ui/styled-system/recipes";import{jsx as j}from"react/jsx-runtime";const M=({label:M,placeholder:N,clearable:P=!0,clearButtonText:F,emptyText:I,searchable:L,searchPlaceholder:R,searchStartSlot:z,searchClassNames:B,startSlot:V,error:H,classNames:U,...W})=>{let{target:G,scrollArea:K,...q}=U||{},{clearButton:J,chevron:Y,...X}=G||{},Z=I??(L?`No results`:void 0),Q={placeholder:N,label:M,error:H,clearable:P,readOnly:!0,closeOnBlur:!L,startSlot:V,displayQuery:!1,classNames:{dropdownTextInput:X?.dropdownTextInput??S(),root:X?.root??O(),label:X?.label??E(),description:X?.description??C(),error:X?.error??w(),wrapper:X?.wrapper??A(),input:X?.input??T(),section:X?.section??k(),required:X?.required??D()},clearButtonProps:{label:F,classNames:{clearButton:J?.clearButton??l(),root:J?.root??p(),icon:J?.icon??u(),iconRaw:{iconRaw:J?.iconRaw?.iconRaw??d(),root:J?.iconRaw?.root??f()}}},chevronProps:{classNames:{chevron:Y?.chevron??a(),root:Y?.root??c(),open:{iconRaw:Y?.open?.iconRaw??o(),root:Y?.open?.root??s()},close:{iconRaw:Y?.close?.iconRaw??o(),root:Y?.close?.root??s()}}}};return j(e,{"data-searchable":L,classNames:{dropdown:q?.dropdown??i(),root:q?.root??_(),options:q?.options??g(),option:q?.option??h(),empty:q?.empty??m(),search:q?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:K?.dropdownScrollAreaAutosize??v()}},target:j(n,{...Q}),dropdownTopSlot:L&&j(r,{searchPlaceholder:R,startSlot:z,classNames:{input:B?.input??y(),wrapper:B?.wrapper??x(),section:B?.section??b()}}),...W,children:j(t,{emptyProps:{emptyText:Z,classNames:{empty:q?.empty??m()}},creatableProps:{creatable:!1}})})};export{M as Select};
+import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as n}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as r}from"./SelectSearch.mjs";import{select as i,selectChevron as a,selectChevronIcon as o,selectChevronIconRoot as s,selectChevronRoot as c,selectClearButton as l,selectClearButtonIcon as u,selectClearButtonIconRaw as d,selectClearButtonIconRawRoot as f,selectClearButtonRoot as p,selectEmpty as m,selectOption as h,selectOptions as g,selectRoot as _,selectScrollAreaAutosize as v,selectSearchInput as y,selectSearchSection as b,selectSearchWrapper as x,selectTextInput as S,selectTextInputDescription as C,selectTextInputError as w,selectTextInputInput as T,selectTextInputLabel as E,selectTextInputRequired as D,selectTextInputRoot as O,selectTextInputSection as k,selectTextInputWrapper as A}from"@mage-ui/styled-system/recipes";import{jsx as j}from"react/jsx-runtime";const M=({label:M,placeholder:N,clearable:P=!1,clearButtonText:F,emptyText:I,searchable:L,searchPlaceholder:R,searchStartSlot:z,searchClassNames:B,startSlot:V,error:H,classNames:U,...W})=>{let{target:G,scrollArea:K,...q}=U||{},{clearButton:J,chevron:Y,...X}=G||{},Z=I??(L?`No results`:void 0),Q={placeholder:N,label:M,error:H,clearable:P,readOnly:!0,closeOnBlur:!L,startSlot:V,displayQuery:!1,classNames:{dropdownTextInput:X?.dropdownTextInput??S(),root:X?.root??O(),label:X?.label??E(),description:X?.description??C(),error:X?.error??w(),wrapper:X?.wrapper??A(),input:X?.input??T(),section:X?.section??k(),required:X?.required??D()},clearButtonProps:{label:F,classNames:{clearButton:J?.clearButton??l(),root:J?.root??p(),icon:J?.icon??u(),iconRaw:{iconRaw:J?.iconRaw?.iconRaw??d(),root:J?.iconRaw?.root??f()}}},chevronProps:{classNames:{chevron:Y?.chevron??a(),root:Y?.root??c(),open:{iconRaw:Y?.open?.iconRaw??o(),root:Y?.open?.root??s()},close:{iconRaw:Y?.close?.iconRaw??o(),root:Y?.close?.root??s()}}}};return j(e,{"data-searchable":L,classNames:{dropdown:q?.dropdown??i(),root:q?.root??_(),options:q?.options??g(),option:q?.option??h(),empty:q?.empty??m(),search:q?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:K?.dropdownScrollAreaAutosize??v()}},target:j(n,{...Q}),dropdownTopSlot:L&&j(r,{searchPlaceholder:R,startSlot:z,classNames:{input:B?.input??y(),wrapper:B?.wrapper??x(),section:B?.section??b()}}),...W,children:j(t,{emptyProps:{emptyText:Z,classNames:{empty:q?.empty??m()}},creatableProps:{creatable:!1}})})};export{M as Select};
 //# sourceMappingURL=Select.mjs.map

package/dist/components/controls/dropdown/select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  select,\n  selectChevron,\n  selectChevronIcon,\n  selectChevronIconRoot,\n  selectChevronRoot,\n  selectClearButton,\n  selectClearButtonIcon,\n  selectClearButtonIconRaw,\n  selectClearButtonIconRawRoot,\n  selectClearButtonRoot,\n  selectEmpty,\n  selectOption,\n  selectOptions,\n  selectRoot,\n  selectScrollAreaAutosize,\n  selectSearchInput,\n  selectSearchSection,\n  selectSearchWrapper,\n  selectTextInput,\n  selectTextInputDescription,\n  selectTextInputError,\n  selectTextInputInput,\n  selectTextInputLabel,\n  selectTextInputRequired,\n  selectTextInputRoot,\n  selectTextInputSection,\n  selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n  DropdownProps,\n  'children' | 'classNames' | 'target'\n> & {\n  label?: string;\n  placeholder?: string;\n  clearable?: boolean;\n  clearButtonText?: string;\n  emptyText?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchStartSlot?: ReactNode;\n  searchClassNames?: SelectSearchClassNames;\n  startSlot?: ReactNode;\n  error?: string;\n  classNames?: DropdownProps['classNames'] & {\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n      chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n    };\n    scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n  };\n};\n\nexport const Select = ({\n  label,\n  placeholder,\n  clearable = true,\n  clearButtonText,\n  emptyText,\n  searchable,\n  searchPlaceholder,\n  searchStartSlot,\n  searchClassNames,\n  startSlot,\n  error,\n  classNames,\n  ...props\n}: SelectProps) => {\n  const {\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const {\n    clearButton: clearButtonClassNames,\n    chevron: chevronClassNames,\n    ...restTargetClassNames\n  } = targetClassNames || {};\n  const resolvedEmptyText =\n    emptyText ?? (searchable ? 'No results' : undefined);\n\n  const targetProps = {\n    placeholder,\n    label,\n    error,\n    clearable,\n    readOnly: true,\n    closeOnBlur: !searchable,\n    startSlot,\n    displayQuery: false,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n      root: restTargetClassNames?.root ?? selectTextInputRoot(),\n      label: restTargetClassNames?.label ?? selectTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? selectTextInputDescription(),\n      error: restTargetClassNames?.error ?? selectTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n      input: restTargetClassNames?.input ?? selectTextInputInput(),\n      section: restTargetClassNames?.section ?? selectTextInputSection(),\n      required: restTargetClassNames?.required ?? selectTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n        root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            selectClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            selectClearButtonIconRawRoot(),\n        },\n      },\n    },\n    chevronProps: {\n      classNames: {\n        chevron: chevronClassNames?.chevron ?? selectChevron(),\n        root: chevronClassNames?.root ?? selectChevronRoot(),\n        open: {\n          iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n          root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n        },\n        close: {\n          iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n          root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n        },\n      },\n    },\n  };\n\n  return (\n    <Dropdown\n      data-searchable={searchable}\n      classNames={{\n        dropdown: dropdownClassNames?.dropdown ?? select(),\n        root: dropdownClassNames?.root ?? selectRoot(),\n        options: dropdownClassNames?.options ?? selectOptions(),\n        option: dropdownClassNames?.option ?? selectOption(),\n        empty: dropdownClassNames?.empty ?? selectEmpty(),\n        search: dropdownClassNames?.search,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            selectScrollAreaAutosize(),\n        },\n      }}\n      target={<ComboboxTarget {...targetProps} />}\n      dropdownTopSlot={\n        searchable && (\n          <SelectSearch\n            searchPlaceholder={searchPlaceholder}\n            startSlot={searchStartSlot}\n            classNames={{\n              input: searchClassNames?.input ?? selectSearchInput(),\n              wrapper: searchClassNames?.wrapper ?? selectSearchWrapper(),\n              section: searchClassNames?.section ?? selectSearchSection(),\n            }}\n          />\n        )\n      }\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={{\n          emptyText: resolvedEmptyText,\n          classNames: {\n            empty: dropdownClassNames?.empty ?? selectEmpty(),\n          },\n        }}\n        creatableProps={{\n          creatable: false,\n        }}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"s8BAgEA,MAAa,GAAU,CACrB,QACA,cACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,YACA,QACA,aACA,GAAG,KACc,CACjB,GAAM,CACJ,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CACpB,EACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,EAAc,CAClB,cACA,QACA,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,YACA,aAAc,GACd,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAiB,CAC9D,KAAM,GAAsB,MAAQ,GAAqB,CACzD,MAAO,GAAsB,OAAS,GAAsB,CAC5D,YACE,GAAsB,aAAe,GAA4B,CACnE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,SAAU,GAAsB,UAAY,GAAyB,CACtE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YAAa,GAAuB,aAAe,GAAmB,CACtE,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA0B,CAC5B,KACE,GAAuB,SAAS,MAChC,GAA8B,CACjC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAe,CACtD,KAAM,GAAmB,MAAQ,GAAmB,CACpD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAmB,CAChE,KAAM,GAAmB,MAAM,MAAQ,GAAuB,CAC/D,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAmB,CACjE,KAAM,GAAmB,OAAO,MAAQ,GAAuB,CAChE,CACF,CACF,CACF,CAED,OACE,EAAC,EAAD,CACE,kBAAiB,EACjB,WAAY,CACV,SAAU,GAAoB,UAAY,GAAQ,CAClD,KAAM,GAAoB,MAAQ,GAAY,CAC9C,QAAS,GAAoB,SAAW,GAAe,CACvD,OAAQ,GAAoB,QAAU,GAAc,CACpD,MAAO,GAAoB,OAAS,GAAa,CACjD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA0B,CAC7B,CACF,CACD,OAAQ,EAAC,EAAD,CAAgB,GAAI,EAAe,CAAA,CAC3C,gBACE,GACE,EAAC,EAAD,CACqB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,CACD,CAAA,CAGN,GAAI,WAEJ,EAAC,EAAD,CACE,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,CACD,CAAA,CACO,CAAA"}
+{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  select,\n  selectChevron,\n  selectChevronIcon,\n  selectChevronIconRoot,\n  selectChevronRoot,\n  selectClearButton,\n  selectClearButtonIcon,\n  selectClearButtonIconRaw,\n  selectClearButtonIconRawRoot,\n  selectClearButtonRoot,\n  selectEmpty,\n  selectOption,\n  selectOptions,\n  selectRoot,\n  selectScrollAreaAutosize,\n  selectSearchInput,\n  selectSearchSection,\n  selectSearchWrapper,\n  selectTextInput,\n  selectTextInputDescription,\n  selectTextInputError,\n  selectTextInputInput,\n  selectTextInputLabel,\n  selectTextInputRequired,\n  selectTextInputRoot,\n  selectTextInputSection,\n  selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n  DropdownProps,\n  'children' | 'classNames' | 'target'\n> & {\n  label?: string;\n  placeholder?: string;\n  clearable?: boolean;\n  clearButtonText?: string;\n  emptyText?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchStartSlot?: ReactNode;\n  searchClassNames?: SelectSearchClassNames;\n  startSlot?: ReactNode;\n  error?: string;\n  classNames?: DropdownProps['classNames'] & {\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n      chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n    };\n    scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n  };\n};\n\nexport const Select = ({\n  label,\n  placeholder,\n  clearable = false,\n  clearButtonText,\n  emptyText,\n  searchable,\n  searchPlaceholder,\n  searchStartSlot,\n  searchClassNames,\n  startSlot,\n  error,\n  classNames,\n  ...props\n}: SelectProps) => {\n  const {\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const {\n    clearButton: clearButtonClassNames,\n    chevron: chevronClassNames,\n    ...restTargetClassNames\n  } = targetClassNames || {};\n  const resolvedEmptyText =\n    emptyText ?? (searchable ? 'No results' : undefined);\n\n  const targetProps = {\n    placeholder,\n    label,\n    error,\n    clearable,\n    readOnly: true,\n    closeOnBlur: !searchable,\n    startSlot,\n    displayQuery: false,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n      root: restTargetClassNames?.root ?? selectTextInputRoot(),\n      label: restTargetClassNames?.label ?? selectTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? selectTextInputDescription(),\n      error: restTargetClassNames?.error ?? selectTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n      input: restTargetClassNames?.input ?? selectTextInputInput(),\n      section: restTargetClassNames?.section ?? selectTextInputSection(),\n      required: restTargetClassNames?.required ?? selectTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n        root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            selectClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            selectClearButtonIconRawRoot(),\n        },\n      },\n    },\n    chevronProps: {\n      classNames: {\n        chevron: chevronClassNames?.chevron ?? selectChevron(),\n        root: chevronClassNames?.root ?? selectChevronRoot(),\n        open: {\n          iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n          root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n        },\n        close: {\n          iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n          root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n        },\n      },\n    },\n  };\n\n  return (\n    <Dropdown\n      data-searchable={searchable}\n      classNames={{\n        dropdown: dropdownClassNames?.dropdown ?? select(),\n        root: dropdownClassNames?.root ?? selectRoot(),\n        options: dropdownClassNames?.options ?? selectOptions(),\n        option: dropdownClassNames?.option ?? selectOption(),\n        empty: dropdownClassNames?.empty ?? selectEmpty(),\n        search: dropdownClassNames?.search,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            selectScrollAreaAutosize(),\n        },\n      }}\n      target={<ComboboxTarget {...targetProps} />}\n      dropdownTopSlot={\n        searchable && (\n          <SelectSearch\n            searchPlaceholder={searchPlaceholder}\n            startSlot={searchStartSlot}\n            classNames={{\n              input: searchClassNames?.input ?? selectSearchInput(),\n              wrapper: searchClassNames?.wrapper ?? selectSearchWrapper(),\n              section: searchClassNames?.section ?? selectSearchSection(),\n            }}\n          />\n        )\n      }\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={{\n          emptyText: resolvedEmptyText,\n          classNames: {\n            empty: dropdownClassNames?.empty ?? selectEmpty(),\n          },\n        }}\n        creatableProps={{\n          creatable: false,\n        }}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"s8BAgEA,MAAa,GAAU,CACrB,QACA,cACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,YACA,QACA,aACA,GAAG,KACc,CACjB,GAAM,CACJ,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CACpB,EACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,EAAc,CAClB,cACA,QACA,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,YACA,aAAc,GACd,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAiB,CAC9D,KAAM,GAAsB,MAAQ,GAAqB,CACzD,MAAO,GAAsB,OAAS,GAAsB,CAC5D,YACE,GAAsB,aAAe,GAA4B,CACnE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,SAAU,GAAsB,UAAY,GAAyB,CACtE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YAAa,GAAuB,aAAe,GAAmB,CACtE,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA0B,CAC5B,KACE,GAAuB,SAAS,MAChC,GAA8B,CACjC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAe,CACtD,KAAM,GAAmB,MAAQ,GAAmB,CACpD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAmB,CAChE,KAAM,GAAmB,MAAM,MAAQ,GAAuB,CAC/D,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAmB,CACjE,KAAM,GAAmB,OAAO,MAAQ,GAAuB,CAChE,CACF,CACF,CACF,CAED,OACE,EAAC,EAAD,CACE,kBAAiB,EACjB,WAAY,CACV,SAAU,GAAoB,UAAY,GAAQ,CAClD,KAAM,GAAoB,MAAQ,GAAY,CAC9C,QAAS,GAAoB,SAAW,GAAe,CACvD,OAAQ,GAAoB,QAAU,GAAc,CACpD,MAAO,GAAoB,OAAS,GAAa,CACjD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA0B,CAC7B,CACF,CACD,OAAQ,EAAC,EAAD,CAAgB,GAAI,EAAe,CAAA,CAC3C,gBACE,GACE,EAAC,EAAD,CACqB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,CACD,CAAA,CAGN,GAAI,WAEJ,EAAC,EAAD,CACE,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,CACD,CAAA,CACO,CAAA"}

package/dist/components/data-display/datatables/DataTable.d.mts

@@ -23,6 +23,7 @@ type DataTableColumnMeta = {
     header?: string;
     cell?: string;
   };
+  rowSpan?: (row: unknown, rowIndex: number, rows: unknown[]) => number | undefined;
 };
 type DataTableSelectionConfig<Data = unknown> = {
   state: RowSelectionState;

package/dist/components/data-display/datatables/DataTable.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"mappings":";;;;;;;;KA+BY,eAAA,GAAkB,MAAA;AAAA,KAElB,sBAAA;EACV,KAAA,EAAO,YAAA;EACP,QAAA,EAAU,UAAA,CAAW,YAAA;AAAA;AAAA,KAGX,yBAAA;EACV,WAAA;EACA,QAAA;EACA,QAAA,EAAU,UAAA,CAAW,eAAA;EACrB,SAAA;EACA,QAAA;AAAA;AAAA,KAGU,mBAAA;EACV,UAAA;IACE,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,KAIQ,wBAAA;EACV,KAAA,EAAO,iBAAA;EACP,QAAA,EAAU,UAAA,CAAW,iBAAA;EACrB,QAAA,IAAY,GAAA,EAAK,IAAA;EACjB,aAAA,IAAiB,GAAA,EAAK,IAAA;EACtB,WAAA,IAAe,WAAA,eAA0B,SAAA;EACzC,eAAA,GAAkB,OAAA,CAAQ,SAAA,CAAU,IAAA;AAAA;AAAA,KAG1B,wBAAA;EACV,KAAA,EAAO,aAAA;EACP,QAAA,EAAU,UAAA,CAAW,aAAA;EACrB,aAAA,GAAgB,GAAA,EAAK,IAAA,KAAS,SAAA;EAC9B,eAAA,GAAkB,OAAA,CAAQ,SAAA,CAAU,IAAA;AAAA;AAAA,KAG1B,qBAAA;EACV,WAAA;EACA,KAAA;AAAA;AAAA,KAGU,sBAAA;EACV,OAAA,EAAS,MAAA;EACT,MAAA,GACE,OAAA,EAAS,MAAA,mBACT,QAAA,GAAW,IAAA,EAAM,MAAA,+BACd,SAAA;AAAA;AAAA,KAGK,oBAAA,GAAuB,IAAA,CAAK,UAAA;AAAA,KAE5B,mBAAA;EACV,SAAA;EACA,IAAA;EACA,QAAA;EACA,MAAA;EACA,UAAA;EACA,aAAA;EACA,YAAA;EACA,OAAA;EACA,OAAA,GAAU,0BAAA;EACV,OAAA;EACA,KAAA;EACA,eAAA;EACA,QAAA;EACA,KAAA,GAAQ,eAAA;AAAA;AAAA,KAGL,uBAAA,SAAgC,OAAA,CACnC,IAAA,CACE,YAAA,CAAa,IAAA;AAAA,KAUL,0BAAA;EACV,MAAA,EAAQ,SAAA,CAAU,IAAA;EAClB,QAAA;AAAA;AAAA,KAGU,cAAA;EACV,IAAA,EAAM,IAAA;EACN,OAAA,EAAS,SAAA,CAAU,IAAA;EACnB,YAAA,GAAe,0BAAA,CAA2B,IAAA;EAC1C,OAAA,GAAU,sBAAA;EACV,UAAA,GAAa,yBAAA;EACb,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,OAAA;EACA,QAAA;EACA,SAAA,gBAAyB,OAAA;EACzB,KAAA,GAAQ,cAAA;EACR,UAAA,GAAa,mBAAA;EACb,OAAA,GAAU,uBAAA,CAAwB,IAAA;EAClC,MAAA,GAAS,OAAA,CAAQ,eAAA;AAAA,IACf,oBAAA;AAAA,cAES,SAAA;EAAoB,UAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,UAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,YAAA;EAAA,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,MAAA;EAAA,GAAA;AAAA,GAgB9B,cAAA,CAAe,IAAA,MAAQ,SAAA"}
+{"version":3,"file":"DataTable.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"mappings":";;;;;;;;KA+BY,eAAA,GAAkB,MAAA;AAAA,KAElB,sBAAA;EACV,KAAA,EAAO,YAAA;EACP,QAAA,EAAU,UAAA,CAAW,YAAA;AAAA;AAAA,KAGX,yBAAA;EACV,WAAA;EACA,QAAA;EACA,QAAA,EAAU,UAAA,CAAW,eAAA;EACrB,SAAA;EACA,QAAA;AAAA;AAAA,KAGU,mBAAA;EACV,UAAA;IACE,MAAA;IACA,IAAA;EAAA;EAEF,OAAA,IACE,GAAA,WACA,QAAA,UACA,IAAA;AAAA;AAAA,KAIQ,wBAAA;EACV,KAAA,EAAO,iBAAA;EACP,QAAA,EAAU,UAAA,CAAW,iBAAA;EACrB,QAAA,IAAY,GAAA,EAAK,IAAA;EACjB,aAAA,IAAiB,GAAA,EAAK,IAAA;EACtB,WAAA,IAAe,WAAA,eAA0B,SAAA;EACzC,eAAA,GAAkB,OAAA,CAAQ,SAAA,CAAU,IAAA;AAAA;AAAA,KAG1B,wBAAA;EACV,KAAA,EAAO,aAAA;EACP,QAAA,EAAU,UAAA,CAAW,aAAA;EACrB,aAAA,GAAgB,GAAA,EAAK,IAAA,KAAS,SAAA;EAC9B,eAAA,GAAkB,OAAA,CAAQ,SAAA,CAAU,IAAA;AAAA;AAAA,KAG1B,qBAAA;EACV,WAAA;EACA,KAAA;AAAA;AAAA,KAGU,sBAAA;EACV,OAAA,EAAS,MAAA;EACT,MAAA,GACE,OAAA,EAAS,MAAA,mBACT,QAAA,GAAW,IAAA,EAAM,MAAA,+BACd,SAAA;AAAA;AAAA,KAGK,oBAAA,GAAuB,IAAA,CAAK,UAAA;AAAA,KAE5B,mBAAA;EACV,SAAA;EACA,IAAA;EACA,QAAA;EACA,MAAA;EACA,UAAA;EACA,aAAA;EACA,YAAA;EACA,OAAA;EACA,OAAA,GAAU,0BAAA;EACV,OAAA;EACA,KAAA;EACA,eAAA;EACA,QAAA;EACA,KAAA,GAAQ,eAAA;AAAA;AAAA,KAGL,uBAAA,SAAgC,OAAA,CACnC,IAAA,CACE,YAAA,CAAa,IAAA;AAAA,KAUL,0BAAA;EACV,MAAA,EAAQ,SAAA,CAAU,IAAA;EAClB,QAAA;AAAA;AAAA,KAGU,cAAA;EACV,IAAA,EAAM,IAAA;EACN,OAAA,EAAS,SAAA,CAAU,IAAA;EACnB,YAAA,GAAe,0BAAA,CAA2B,IAAA;EAC1C,OAAA,GAAU,sBAAA;EACV,UAAA,GAAa,yBAAA;EACb,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,OAAA;EACA,QAAA;EACA,SAAA,gBAAyB,OAAA;EACzB,KAAA,GAAQ,cAAA;EACR,UAAA,GAAa,mBAAA;EACb,OAAA,GAAU,uBAAA,CAAwB,IAAA;EAClC,MAAA,GAAS,OAAA,CAAQ,eAAA;AAAA,IACf,oBAAA;AAAA,cAES,SAAA;EAAoB,UAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,UAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,YAAA;EAAA,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,MAAA;EAAA,GAAA;AAAA,GAgB9B,cAAA,CAAe,IAAA,MAAQ,SAAA"}

package/dist/components/data-display/datatables/DataTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type {\n  ColumnDef,\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  RowSelectionState,\n  SortingState,\n  TableOptions,\n} from '@tanstack/react-table';\n\nimport { Table, type TableClassNames, type TableProps } from '../table/Table';\nimport { DataTableBody } from './DataTableBody';\nimport {\n  DataTableBulkBar,\n  type DataTableBulkBarClassNames,\n} from './DataTableBulkBar';\nimport { DataTableColGroup } from './DataTableColGroup';\nimport { DataTableHeader } from './DataTableHeader';\nimport { DataTableRootContainer } from './DataTableRootContainer';\nimport { DataTableSkeleton } from './DataTableSkeleton';\nimport { DataTableSlotRow, type DataTableSlots } from './DataTableSlotRow';\nimport { DataTableViewport } from './DataTableViewport';\nimport { useDataTable } from './useDataTable';\nimport {\n  DataTableContextProvider,\n  type DataTableContextValue,\n  type DataTableLabels,\n} from './useDataTableContext';\n\nexport type DataTableRecord = Record<string, unknown>;\n\nexport type DataTableSortingConfig = {\n  state: SortingState;\n  onChange: OnChangeFn<SortingState>;\n};\n\nexport type DataTablePaginationConfig = {\n  currentPage: number;\n  pageSize: number;\n  onChange: OnChangeFn<PaginationState>;\n  pageCount: number;\n  rowCount?: number;\n};\n\nexport type DataTableColumnMeta = {\n  classNames?: {\n    header?: string;\n    cell?: string;\n  };\n};\n\nexport type DataTableSelectionConfig<Data = unknown> = {\n  state: RowSelectionState;\n  onChange: OnChangeFn<RowSelectionState>;\n  getRowId?: (row: Data) => string;\n  isRowDisabled?: (row: Data) => boolean;\n  bulkActions?: (selectedIds: string[]) => ReactNode;\n  columnOverrides?: Partial<ColumnDef<Data, unknown>>;\n};\n\nexport type DataTableExpansionConfig<Data = unknown> = {\n  state: ExpandedState;\n  onChange: OnChangeFn<ExpandedState>;\n  renderContent: (row: Data) => ReactNode;\n  columnOverrides?: Partial<ColumnDef<Data, unknown>>;\n};\n\nexport type DataTableSearchConfig = {\n  placeholder?: string;\n  label?: string;\n};\n\nexport type DataTableFiltersConfig = {\n  initial: Record<string, unknown>;\n  render: (\n    filters: Record<string, unknown>,\n    onChange: (next: Record<string, unknown>) => void,\n  ) => ReactNode;\n};\n\nexport type DataTableTableConfig = Omit<TableProps, 'children' | 'classNames'>;\n\nexport type DataTableClassNames = {\n  dataTable?: string;\n  root?: string;\n  viewport?: string;\n  header?: string;\n  sortButton?: string;\n  sortIndicator?: string;\n  expandButton?: string;\n  slotRow?: string;\n  bulkBar?: DataTableBulkBarClassNames;\n  loading?: string;\n  empty?: string;\n  expandedContent?: string;\n  skeleton?: string;\n  table?: TableClassNames;\n};\n\ntype DataTableManagedOptions<Data> = Partial<\n  Omit<\n    TableOptions<Data>,\n    | 'columns'\n    | 'data'\n    | 'onExpandedChange'\n    | 'onPaginationChange'\n    | 'onRowSelectionChange'\n    | 'onSortingChange'\n  >\n>;\n\nexport type DataTableExtraColumnConfig<Data> = {\n  column: ColumnDef<Data, unknown>;\n  position?: number;\n};\n\nexport type DataTableProps<Data> = {\n  data: Data[];\n  columns: ColumnDef<Data, unknown>[];\n  extraColumns?: DataTableExtraColumnConfig<Data>[];\n  sorting?: DataTableSortingConfig;\n  pagination?: DataTablePaginationConfig;\n  selection?: DataTableSelectionConfig<Data>;\n  expansion?: DataTableExpansionConfig<Data>;\n  loading?: boolean;\n  skeleton?: number;\n  onRefresh?: () => void | Promise<void>;\n  slots?: DataTableSlots;\n  classNames?: DataTableClassNames;\n  options?: DataTableManagedOptions<Data>;\n  labels?: Partial<DataTableLabels>;\n} & DataTableTableConfig;\n\nexport const DataTable = <Data,>({\n  classNames,\n  slots,\n  loading,\n  skeleton,\n  pagination,\n  selection,\n  expansion,\n  data,\n  columns,\n  extraColumns,\n  sorting,\n  onRefresh,\n  options,\n  labels,\n  ...tableProps\n}: DataTableProps<Data>): ReactNode => {\n  const { layout, contextValue, table, explicitSizeIds, columnHeaderClasses } =\n    useDataTable({\n    data,\n    columns,\n    extraColumns,\n    sorting,\n    onRefresh,\n    options,\n    labels,\n    classNames,\n    loading,\n    skeleton,\n    pagination,\n    selection,\n    expansion,\n    ...tableProps,\n  });\n\n  return (\n    <DataTableContextProvider\n      value={contextValue as DataTableContextValue<unknown>}\n    >\n      <DataTableRootContainer busy={loading} classNames={classNames}>\n        <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n          {slots?.top}\n        </DataTableSlotRow>\n\n        <DataTableViewport className={classNames?.viewport}>\n          {skeleton != null && data.length === 0 ? (\n            <DataTableSkeleton\n              rows={skeleton}\n              className={classNames?.skeleton}\n            />\n          ) : (\n            <Table\n              {...tableProps}\n              layout={layout}\n              classNames={classNames?.table}\n            >\n              <DataTableColGroup\n                columns={table.getVisibleLeafColumns()}\n                explicitSizeIds={explicitSizeIds}\n                columnHeaderClasses={columnHeaderClasses}\n              />\n              <DataTableHeader\n                loading={loading}\n                classNames={classNames}\n                headerGroups={table.getHeaderGroups()}\n                explicitSizeIds={explicitSizeIds}\n              />\n              <DataTableBody\n                rows={table.getRowModel().rows}\n                colCount={table.getVisibleLeafColumns().length}\n                loading={loading}\n                empty={slots?.empty}\n                emptyClassName={classNames?.empty}\n                expandedContentClassName={classNames?.expandedContent}\n                expansion={expansion}\n                selection={selection}\n              />\n            </Table>\n          )}\n        </DataTableViewport>\n\n        <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n          {slots?.bottom}\n        </DataTableSlotRow>\n\n        <DataTableBulkBar\n          selectedIds={contextValue.selectedIds}\n          className={classNames?.bulkBar}\n          selection={selection}\n        />\n      </DataTableRootContainer>\n    </DataTableContextProvider>\n  );\n};\n"],"mappings":"8qBAuIA,MAAa,GAAoB,CAC/B,aACA,QACA,UACA,WACA,aACA,YACA,YACA,OACA,UACA,eACA,UACA,YACA,UACA,SACA,GAAG,KACkC,CACrC,GAAM,CAAE,SAAQ,eAAc,QAAO,kBAAiB,uBACpD,EAAa,CACb,OACA,UACA,eACA,UACA,YACA,UACA,SACA,aACA,UACA,WACA,aACA,YACA,YACA,GAAG,EACJ,CAAC,CAEF,OACE,EAAC,EAAD,CACE,MAAO,WAEP,EAAC,EAAD,CAAwB,KAAM,EAAqB,sBAAnD,CACE,EAAC,EAAD,CAAkB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,IACS,CAAA,CAEnB,EAAC,EAAD,CAAmB,UAAW,GAAY,kBACvC,GAAY,MAAQ,EAAK,SAAW,EACnC,EAAC,EAAD,CACE,KAAM,EACN,UAAW,GAAY,SACvB,CAAA,CAEF,EAAC,EAAD,CACE,GAAI,EACI,SACR,WAAY,GAAY,eAH1B,CAKE,EAAC,EAAD,CACE,QAAS,EAAM,uBAAuB,CACrB,kBACI,sBACrB,CAAA,CACF,EAAC,EAAD,CACW,UACG,aACZ,aAAc,EAAM,iBAAiB,CACpB,kBACjB,CAAA,CACF,EAAC,EAAD,CACE,KAAM,EAAM,aAAa,CAAC,KAC1B,SAAU,EAAM,uBAAuB,CAAC,OAC/B,UACT,MAAO,GAAO,MACd,eAAgB,GAAY,MAC5B,yBAA0B,GAAY,gBAC3B,YACA,YACX,CAAA,CACI,GAEQ,CAAA,CAEpB,EAAC,EAAD,CAAkB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,OACS,CAAA,CAEnB,EAAC,EAAD,CACE,YAAa,EAAa,YAC1B,UAAW,GAAY,QACZ,YACX,CAAA,CACqB,GACA,CAAA"}
+{"version":3,"file":"DataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type {\n  ColumnDef,\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  RowSelectionState,\n  SortingState,\n  TableOptions,\n} from '@tanstack/react-table';\n\nimport { Table, type TableClassNames, type TableProps } from '../table/Table';\nimport { DataTableBody } from './DataTableBody';\nimport {\n  DataTableBulkBar,\n  type DataTableBulkBarClassNames,\n} from './DataTableBulkBar';\nimport { DataTableColGroup } from './DataTableColGroup';\nimport { DataTableHeader } from './DataTableHeader';\nimport { DataTableRootContainer } from './DataTableRootContainer';\nimport { DataTableSkeleton } from './DataTableSkeleton';\nimport { DataTableSlotRow, type DataTableSlots } from './DataTableSlotRow';\nimport { DataTableViewport } from './DataTableViewport';\nimport { useDataTable } from './useDataTable';\nimport {\n  DataTableContextProvider,\n  type DataTableContextValue,\n  type DataTableLabels,\n} from './useDataTableContext';\n\nexport type DataTableRecord = Record<string, unknown>;\n\nexport type DataTableSortingConfig = {\n  state: SortingState;\n  onChange: OnChangeFn<SortingState>;\n};\n\nexport type DataTablePaginationConfig = {\n  currentPage: number;\n  pageSize: number;\n  onChange: OnChangeFn<PaginationState>;\n  pageCount: number;\n  rowCount?: number;\n};\n\nexport type DataTableColumnMeta = {\n  classNames?: {\n    header?: string;\n    cell?: string;\n  };\n  rowSpan?: (\n    row: unknown,\n    rowIndex: number,\n    rows: unknown[],\n  ) => number | undefined;\n};\n\nexport type DataTableSelectionConfig<Data = unknown> = {\n  state: RowSelectionState;\n  onChange: OnChangeFn<RowSelectionState>;\n  getRowId?: (row: Data) => string;\n  isRowDisabled?: (row: Data) => boolean;\n  bulkActions?: (selectedIds: string[]) => ReactNode;\n  columnOverrides?: Partial<ColumnDef<Data, unknown>>;\n};\n\nexport type DataTableExpansionConfig<Data = unknown> = {\n  state: ExpandedState;\n  onChange: OnChangeFn<ExpandedState>;\n  renderContent: (row: Data) => ReactNode;\n  columnOverrides?: Partial<ColumnDef<Data, unknown>>;\n};\n\nexport type DataTableSearchConfig = {\n  placeholder?: string;\n  label?: string;\n};\n\nexport type DataTableFiltersConfig = {\n  initial: Record<string, unknown>;\n  render: (\n    filters: Record<string, unknown>,\n    onChange: (next: Record<string, unknown>) => void,\n  ) => ReactNode;\n};\n\nexport type DataTableTableConfig = Omit<TableProps, 'children' | 'classNames'>;\n\nexport type DataTableClassNames = {\n  dataTable?: string;\n  root?: string;\n  viewport?: string;\n  header?: string;\n  sortButton?: string;\n  sortIndicator?: string;\n  expandButton?: string;\n  slotRow?: string;\n  bulkBar?: DataTableBulkBarClassNames;\n  loading?: string;\n  empty?: string;\n  expandedContent?: string;\n  skeleton?: string;\n  table?: TableClassNames;\n};\n\ntype DataTableManagedOptions<Data> = Partial<\n  Omit<\n    TableOptions<Data>,\n    | 'columns'\n    | 'data'\n    | 'onExpandedChange'\n    | 'onPaginationChange'\n    | 'onRowSelectionChange'\n    | 'onSortingChange'\n  >\n>;\n\nexport type DataTableExtraColumnConfig<Data> = {\n  column: ColumnDef<Data, unknown>;\n  position?: number;\n};\n\nexport type DataTableProps<Data> = {\n  data: Data[];\n  columns: ColumnDef<Data, unknown>[];\n  extraColumns?: DataTableExtraColumnConfig<Data>[];\n  sorting?: DataTableSortingConfig;\n  pagination?: DataTablePaginationConfig;\n  selection?: DataTableSelectionConfig<Data>;\n  expansion?: DataTableExpansionConfig<Data>;\n  loading?: boolean;\n  skeleton?: number;\n  onRefresh?: () => void | Promise<void>;\n  slots?: DataTableSlots;\n  classNames?: DataTableClassNames;\n  options?: DataTableManagedOptions<Data>;\n  labels?: Partial<DataTableLabels>;\n} & DataTableTableConfig;\n\nexport const DataTable = <Data,>({\n  classNames,\n  slots,\n  loading,\n  skeleton,\n  pagination,\n  selection,\n  expansion,\n  data,\n  columns,\n  extraColumns,\n  sorting,\n  onRefresh,\n  options,\n  labels,\n  ...tableProps\n}: DataTableProps<Data>): ReactNode => {\n  const { layout, contextValue, table, explicitSizeIds, columnHeaderClasses } =\n    useDataTable({\n      data,\n      columns,\n      extraColumns,\n      sorting,\n      onRefresh,\n      options,\n      labels,\n      classNames,\n      loading,\n      skeleton,\n      pagination,\n      selection,\n      expansion,\n      ...tableProps,\n    });\n\n  return (\n    <DataTableContextProvider\n      value={contextValue as DataTableContextValue<unknown>}\n    >\n      <DataTableRootContainer busy={loading} classNames={classNames}>\n        <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n          {slots?.top}\n        </DataTableSlotRow>\n\n        <DataTableViewport className={classNames?.viewport}>\n          {skeleton != null && data.length === 0 ? (\n            <DataTableSkeleton\n              rows={skeleton}\n              className={classNames?.skeleton}\n            />\n          ) : (\n            <Table\n              {...tableProps}\n              layout={layout}\n              classNames={classNames?.table}\n            >\n              <DataTableColGroup\n                columns={table.getVisibleLeafColumns()}\n                explicitSizeIds={explicitSizeIds}\n                columnHeaderClasses={columnHeaderClasses}\n              />\n              <DataTableHeader\n                loading={loading}\n                classNames={classNames}\n                headerGroups={table.getHeaderGroups()}\n                explicitSizeIds={explicitSizeIds}\n              />\n              <DataTableBody\n                rows={table.getRowModel().rows}\n                colCount={table.getVisibleLeafColumns().length}\n                loading={loading}\n                empty={slots?.empty}\n                emptyClassName={classNames?.empty}\n                expandedContentClassName={classNames?.expandedContent}\n                expansion={expansion}\n                selection={selection}\n              />\n            </Table>\n          )}\n        </DataTableViewport>\n\n        <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n          {slots?.bottom}\n        </DataTableSlotRow>\n\n        <DataTableBulkBar\n          selectedIds={contextValue.selectedIds}\n          className={classNames?.bulkBar}\n          selection={selection}\n        />\n      </DataTableRootContainer>\n    </DataTableContextProvider>\n  );\n};\n"],"mappings":"8qBA4IA,MAAa,GAAoB,CAC/B,aACA,QACA,UACA,WACA,aACA,YACA,YACA,OACA,UACA,eACA,UACA,YACA,UACA,SACA,GAAG,KACkC,CACrC,GAAM,CAAE,SAAQ,eAAc,QAAO,kBAAiB,uBACpD,EAAa,CACX,OACA,UACA,eACA,UACA,YACA,UACA,SACA,aACA,UACA,WACA,aACA,YACA,YACA,GAAG,EACJ,CAAC,CAEJ,OACE,EAAC,EAAD,CACE,MAAO,WAEP,EAAC,EAAD,CAAwB,KAAM,EAAqB,sBAAnD,CACE,EAAC,EAAD,CAAkB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,IACS,CAAA,CAEnB,EAAC,EAAD,CAAmB,UAAW,GAAY,kBACvC,GAAY,MAAQ,EAAK,SAAW,EACnC,EAAC,EAAD,CACE,KAAM,EACN,UAAW,GAAY,SACvB,CAAA,CAEF,EAAC,EAAD,CACE,GAAI,EACI,SACR,WAAY,GAAY,eAH1B,CAKE,EAAC,EAAD,CACE,QAAS,EAAM,uBAAuB,CACrB,kBACI,sBACrB,CAAA,CACF,EAAC,EAAD,CACW,UACG,aACZ,aAAc,EAAM,iBAAiB,CACpB,kBACjB,CAAA,CACF,EAAC,EAAD,CACE,KAAM,EAAM,aAAa,CAAC,KAC1B,SAAU,EAAM,uBAAuB,CAAC,OAC/B,UACT,MAAO,GAAO,MACd,eAAgB,GAAY,MAC5B,yBAA0B,GAAY,gBAC3B,YACA,YACX,CAAA,CACI,GAEQ,CAAA,CAEpB,EAAC,EAAD,CAAkB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,OACS,CAAA,CAEnB,EAAC,EAAD,CACE,YAAa,EAAa,YAC1B,UAAW,GAAY,QACZ,YACX,CAAA,CACqB,GACA,CAAA"}

package/dist/components/data-display/datatables/DataTableBody.mjs

@@ -1,2 +1,2 @@
-import{Table as e}from"../table/Table.mjs";import{dataTableEmpty as t,dataTableExpandedContent as n}from"@mage-ui/styled-system/recipes";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{flexRender as o}from"@tanstack/react-table";const s=({cell:t})=>{let n=t.column.columnDef.meta;return i(e.Cell,{classNames:n?.classNames?.cell?{td:n.classNames.cell}:void 0,children:o(t.column.columnDef.cell,t.getContext())})},c=({row:t,colCount:r,className:a,expansion:o})=>i(e.Row,{id:`data-table-expanded-${t.id}`,children:i(e.Cell,{colSpan:r,classNames:{td:a??n()},children:o.renderContent(t.original)})}),l=({row:t,colCount:n,expandedContentClassName:o,expansion:l,selection:u})=>a(r,{children:[i(e.Row,{"data-selected":t.getIsSelected()||void 0,"data-disabled":u&&!t.getCanSelect()||void 0,"data-expanded":t.getIsExpanded()||void 0,children:t.getVisibleCells().map(e=>i(s,{cell:e},e.id))}),l&&t.getIsExpanded()?i(c,{row:t,colCount:n,className:o,expansion:l}):null]}),u=({colCount:n,className:r,children:a})=>i(e.Row,{children:i(e.Cell,{colSpan:n,classNames:{td:r??t()},children:a})}),d=({rows:t,colCount:n,loading:r,empty:a,emptyClassName:o,expandedContentClassName:s,expansion:c,selection:d})=>{let f=!r&&t.length===0;return i(e.Body,{children:f?i(u,{colCount:n,className:o,children:a}):t.map(e=>i(l,{row:e,colCount:n,expandedContentClassName:s,expansion:c,selection:d},e.id))})};export{d as DataTableBody};
+import{Table as e}from"../table/Table.mjs";import{dataTableEmpty as t,dataTableExpandedContent as n}from"@mage-ui/styled-system/recipes";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{useMemo as o}from"react";import{flexRender as s}from"@tanstack/react-table";const c=({cell:t,rowSpan:n})=>{let r=t.column.columnDef.meta;return i(e.Cell,{rowSpan:n,classNames:r?.classNames?.cell?{td:r.classNames.cell}:void 0,children:s(t.column.columnDef.cell,t.getContext())})},l=({row:t,colCount:r,className:a,expansion:o})=>i(e.Row,{id:`data-table-expanded-${t.id}`,children:i(e.Cell,{colSpan:r,classNames:{td:a??n()},children:o.renderContent(t.original)})}),u=({row:t,rowIndex:n,rowspanData:o,colCount:s,expandedContentClassName:u,expansion:d,selection:f})=>a(r,{children:[i(e.Row,{"data-selected":t.getIsSelected()||void 0,"data-disabled":f&&!t.getCanSelect()||void 0,"data-expanded":t.getIsExpanded()||void 0,children:t.getVisibleCells().map(e=>{let t=`${n}:${e.column.id}`,r=o.get(t);return r?.hidden?null:i(c,{cell:e,rowSpan:r?.rowSpan},e.id)})}),d&&t.getIsExpanded()?i(l,{row:t,colCount:s,className:u,expansion:d}):null]}),d=({colCount:n,className:r,children:a})=>i(e.Row,{children:i(e.Cell,{colSpan:n,classNames:{td:r??t()},children:a})}),f=({rows:t,colCount:n,loading:r,empty:a,emptyClassName:s,expandedContentClassName:c,expansion:l,selection:f})=>{let p=!r&&t.length===0,m=o(()=>{let e=new Map,n=t.map(e=>e.original);return t.forEach((t,r)=>{t.getVisibleCells().forEach(i=>{let a=`${r}:${i.column.id}`;if(e.has(a))return;let o=i.column.columnDef.meta?.rowSpan?.(t.original,r,n);if(o&&o>1){e.set(a,{rowSpan:o,hidden:!1});for(let t=1;t<o;t++)e.set(`${r+t}:${i.column.id}`,{hidden:!0})}})}),e},[t]);return i(e.Body,{children:p?i(d,{colCount:n,className:s,children:a}):t.map((e,t)=>i(u,{row:e,rowIndex:t,rowspanData:m,colCount:n,expandedContentClassName:c,expansion:l,selection:f},e.id))})};export{f as DataTableBody};
 //# sourceMappingURL=DataTableBody.mjs.map

package/dist/components/data-display/datatables/DataTableBody.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBody.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  dataTableEmpty,\n  dataTableExpandedContent,\n} from '@mage-ui/styled-system/recipes';\nimport { flexRender, type Row } from '@tanstack/react-table';\n\nimport { Table } from '../table/Table';\nimport type {\n  DataTableColumnMeta,\n  DataTableExpansionConfig,\n  DataTableProps,\n  DataTableSelectionConfig,\n} from './DataTable';\n\ntype DataTableBodyProps<Data> = Pick<\n  DataTableProps<Data>,\n  'loading' | 'expansion' | 'selection'\n> & {\n  rows: Row<Data>[];\n  colCount: number;\n  empty?: ReactNode;\n  emptyClassName?: string;\n  expandedContentClassName?: string;\n};\n\nconst BodyCell = <Data,>({\n  cell,\n}: {\n  cell: import('@tanstack/react-table').Cell<Data, unknown>;\n}): ReactNode => {\n  const columnMeta = cell.column.columnDef.meta as\n    | DataTableColumnMeta\n    | undefined;\n\n  return (\n    <Table.Cell\n      classNames={\n        columnMeta?.classNames?.cell\n          ? { td: columnMeta.classNames.cell }\n          : undefined\n      }\n    >\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </Table.Cell>\n  );\n};\n\nconst ExpandedRow = <Data,>({\n  row,\n  colCount,\n  className,\n  expansion,\n}: {\n  row: Row<Data>;\n  colCount: number;\n  className?: string;\n  expansion: DataTableExpansionConfig<Data>;\n}): ReactNode => (\n  <Table.Row id={`data-table-expanded-${row.id}`}>\n    <Table.Cell\n      colSpan={colCount}\n      classNames={{ td: className ?? dataTableExpandedContent() }}\n    >\n      {expansion.renderContent(row.original)}\n    </Table.Cell>\n  </Table.Row>\n);\n\nconst BodyRow = <Data,>({\n  row,\n  colCount,\n  expandedContentClassName,\n  expansion,\n  selection,\n}: {\n  row: Row<Data>;\n  colCount: number;\n  expandedContentClassName?: string;\n  expansion?: DataTableExpansionConfig<Data>;\n  selection?: DataTableSelectionConfig<Data>;\n}): ReactNode => (\n  <>\n    <Table.Row\n      data-selected={row.getIsSelected() || undefined}\n      data-disabled={(selection && !row.getCanSelect()) || undefined}\n      data-expanded={row.getIsExpanded() || undefined}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <BodyCell key={cell.id} cell={cell} />\n      ))}\n    </Table.Row>\n    {expansion && row.getIsExpanded() ? (\n      <ExpandedRow\n        row={row}\n        colCount={colCount}\n        className={expandedContentClassName}\n        expansion={expansion}\n      />\n    ) : null}\n  </>\n);\n\nconst EmptyRow = ({\n  colCount,\n  className,\n  children,\n}: {\n  colCount: number;\n  className?: string;\n  children?: ReactNode;\n}): ReactNode => (\n  <Table.Row>\n    <Table.Cell\n      colSpan={colCount}\n      classNames={{ td: className ?? dataTableEmpty() }}\n    >\n      {children}\n    </Table.Cell>\n  </Table.Row>\n);\n\nexport const DataTableBody = <Data,>({\n  rows,\n  colCount,\n  loading,\n  empty,\n  emptyClassName,\n  expandedContentClassName,\n  expansion,\n  selection,\n}: DataTableBodyProps<Data>): ReactNode => {\n  const showEmptyState = !loading && rows.length === 0;\n\n  return (\n    <Table.Body>\n      {showEmptyState ? (\n        <EmptyRow colCount={colCount} className={emptyClassName}>\n          {empty}\n        </EmptyRow>\n      ) : (\n        rows.map((row) => (\n          <BodyRow\n            key={row.id}\n            row={row}\n            colCount={colCount}\n            expandedContentClassName={expandedContentClassName}\n            expansion={expansion}\n            selection={selection}\n          />\n        ))\n      )}\n    </Table.Body>\n  );\n};\n"],"mappings":"4PA2BA,MAAM,GAAmB,CACvB,UAGe,CACf,IAAM,EAAa,EAAK,OAAO,UAAU,KAIzC,OACE,EAAC,EAAM,KAAP,CACE,WACE,GAAY,YAAY,KACpB,CAAE,GAAI,EAAW,WAAW,KAAM,CAClC,IAAA,YAGL,EAAW,EAAK,OAAO,UAAU,KAAM,EAAK,YAAY,CAAC,CAC/C,CAAA,EAIX,GAAsB,CAC1B,MACA,WACA,YACA,eAOA,EAAC,EAAM,IAAP,CAAW,GAAI,uBAAuB,EAAI,cACxC,EAAC,EAAM,KAAP,CACE,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAA0B,CAAE,UAE1D,EAAU,cAAc,EAAI,SAAS,CAC3B,CAAA,CACH,CAAA,CAGR,GAAkB,CACtB,MACA,WACA,2BACA,YACA,eAQA,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAM,IAAP,CACE,gBAAe,EAAI,eAAe,EAAI,IAAA,GACtC,gBAAgB,GAAa,CAAC,EAAI,cAAc,EAAK,IAAA,GACrD,gBAAe,EAAI,eAAe,EAAI,IAAA,YAErC,EAAI,iBAAiB,CAAC,IAAK,GAC1B,EAAC,EAAD,CAA8B,OAAQ,CAAvB,EAAK,GAAkB,CACtC,CACQ,CAAA,CACX,GAAa,EAAI,eAAe,CAC/B,EAAC,EAAD,CACO,MACK,WACV,UAAW,EACA,YACX,CAAA,CACA,KACH,CAAA,CAAA,CAGC,GAAY,CAChB,WACA,YACA,cAMA,EAAC,EAAM,IAAP,CAAA,SACE,EAAC,EAAM,KAAP,CACE,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAAgB,CAAE,CAEhD,WACU,CAAA,CACH,CAAA,CAGD,GAAwB,CACnC,OACA,WACA,UACA,QACA,iBACA,2BACA,YACA,eACyC,CACzC,IAAM,EAAiB,CAAC,GAAW,EAAK,SAAW,EAEnD,OACE,EAAC,EAAM,KAAP,CAAA,SACG,EACC,EAAC,EAAD,CAAoB,WAAU,UAAW,WACtC,EACQ,CAAA,CAEX,EAAK,IAAK,GACR,EAAC,EAAD,CAEO,MACK,WACgB,2BACf,YACA,YACX,CANK,EAAI,GAMT,CACF,CAEO,CAAA"}
+{"version":3,"file":"DataTableBody.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBody.tsx"],"sourcesContent":["import { type ReactNode, useMemo } from 'react';\n\nimport {\n  dataTableEmpty,\n  dataTableExpandedContent,\n} from '@mage-ui/styled-system/recipes';\nimport { flexRender, type Row } from '@tanstack/react-table';\n\nimport { Table } from '../table/Table';\nimport type {\n  DataTableColumnMeta,\n  DataTableExpansionConfig,\n  DataTableProps,\n  DataTableSelectionConfig,\n} from './DataTable';\n\ntype DataTableBodyProps<Data> = Pick<\n  DataTableProps<Data>,\n  'loading' | 'expansion' | 'selection'\n> & {\n  rows: Row<Data>[];\n  colCount: number;\n  empty?: ReactNode;\n  emptyClassName?: string;\n  expandedContentClassName?: string;\n};\n\ntype CellSpan = { rowSpan?: number; hidden: boolean };\n\nconst BodyCell = <Data,>({\n  cell,\n  rowSpan,\n}: {\n  cell: import('@tanstack/react-table').Cell<Data, unknown>;\n  rowSpan?: number;\n}): ReactNode => {\n  const columnMeta = cell.column.columnDef.meta as\n    | DataTableColumnMeta\n    | undefined;\n\n  return (\n    <Table.Cell\n      rowSpan={rowSpan}\n      classNames={\n        columnMeta?.classNames?.cell\n          ? { td: columnMeta.classNames.cell }\n          : undefined\n      }\n    >\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </Table.Cell>\n  );\n};\n\nconst ExpandedRow = <Data,>({\n  row,\n  colCount,\n  className,\n  expansion,\n}: {\n  row: Row<Data>;\n  colCount: number;\n  className?: string;\n  expansion: DataTableExpansionConfig<Data>;\n}): ReactNode => (\n  <Table.Row id={`data-table-expanded-${row.id}`}>\n    <Table.Cell\n      colSpan={colCount}\n      classNames={{ td: className ?? dataTableExpandedContent() }}\n    >\n      {expansion.renderContent(row.original)}\n    </Table.Cell>\n  </Table.Row>\n);\n\nconst BodyRow = <Data,>({\n  row,\n  rowIndex,\n  rowspanData,\n  colCount,\n  expandedContentClassName,\n  expansion,\n  selection,\n}: {\n  row: Row<Data>;\n  rowIndex: number;\n  rowspanData: Map<string, CellSpan>;\n  colCount: number;\n  expandedContentClassName?: string;\n  expansion?: DataTableExpansionConfig<Data>;\n  selection?: DataTableSelectionConfig<Data>;\n}): ReactNode => (\n  <>\n    <Table.Row\n      data-selected={row.getIsSelected() || undefined}\n      data-disabled={(selection && !row.getCanSelect()) || undefined}\n      data-expanded={row.getIsExpanded() || undefined}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const cellKey = `${rowIndex}:${cell.column.id}`;\n        const cellSpan = rowspanData.get(cellKey);\n        if (cellSpan?.hidden) return null;\n        return (\n          <BodyCell key={cell.id} cell={cell} rowSpan={cellSpan?.rowSpan} />\n        );\n      })}\n    </Table.Row>\n    {expansion && row.getIsExpanded() ? (\n      <ExpandedRow\n        row={row}\n        colCount={colCount}\n        className={expandedContentClassName}\n        expansion={expansion}\n      />\n    ) : null}\n  </>\n);\n\nconst EmptyRow = ({\n  colCount,\n  className,\n  children,\n}: {\n  colCount: number;\n  className?: string;\n  children?: ReactNode;\n}): ReactNode => (\n  <Table.Row>\n    <Table.Cell\n      colSpan={colCount}\n      classNames={{ td: className ?? dataTableEmpty() }}\n    >\n      {children}\n    </Table.Cell>\n  </Table.Row>\n);\n\nexport const DataTableBody = <Data,>({\n  rows,\n  colCount,\n  loading,\n  empty,\n  emptyClassName,\n  expandedContentClassName,\n  expansion,\n  selection,\n}: DataTableBodyProps<Data>): ReactNode => {\n  const showEmptyState = !loading && rows.length === 0;\n\n  const rowspanData = useMemo(() => {\n    const map = new Map<string, CellSpan>();\n    const originals = rows.map((r) => r.original);\n\n    rows.forEach((row, rowIndex) => {\n      row.getVisibleCells().forEach((cell) => {\n        const key = `${rowIndex}:${cell.column.id}`;\n        if (map.has(key)) return;\n\n        const meta = cell.column.columnDef.meta as\n          | DataTableColumnMeta\n          | undefined;\n        const span = meta?.rowSpan?.(row.original, rowIndex, originals);\n\n        if (span && span > 1) {\n          map.set(key, { rowSpan: span, hidden: false });\n          for (let i = 1; i < span; i++) {\n            map.set(`${rowIndex + i}:${cell.column.id}`, { hidden: true });\n          }\n        }\n      });\n    });\n\n    return map;\n  }, [rows]);\n\n  return (\n    <Table.Body>\n      {showEmptyState ? (\n        <EmptyRow colCount={colCount} className={emptyClassName}>\n          {empty}\n        </EmptyRow>\n      ) : (\n        rows.map((row, rowIndex) => (\n          <BodyRow\n            key={row.id}\n            row={row}\n            rowIndex={rowIndex}\n            rowspanData={rowspanData}\n            colCount={colCount}\n            expandedContentClassName={expandedContentClassName}\n            expansion={expansion}\n            selection={selection}\n          />\n        ))\n      )}\n    </Table.Body>\n  );\n};\n"],"mappings":"4RA6BA,MAAM,GAAmB,CACvB,OACA,aAIe,CACf,IAAM,EAAa,EAAK,OAAO,UAAU,KAIzC,OACE,EAAC,EAAM,KAAP,CACW,UACT,WACE,GAAY,YAAY,KACpB,CAAE,GAAI,EAAW,WAAW,KAAM,CAClC,IAAA,YAGL,EAAW,EAAK,OAAO,UAAU,KAAM,EAAK,YAAY,CAAC,CAC/C,CAAA,EAIX,GAAsB,CAC1B,MACA,WACA,YACA,eAOA,EAAC,EAAM,IAAP,CAAW,GAAI,uBAAuB,EAAI,cACxC,EAAC,EAAM,KAAP,CACE,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAA0B,CAAE,UAE1D,EAAU,cAAc,EAAI,SAAS,CAC3B,CAAA,CACH,CAAA,CAGR,GAAkB,CACtB,MACA,WACA,cACA,WACA,2BACA,YACA,eAUA,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAM,IAAP,CACE,gBAAe,EAAI,eAAe,EAAI,IAAA,GACtC,gBAAgB,GAAa,CAAC,EAAI,cAAc,EAAK,IAAA,GACrD,gBAAe,EAAI,eAAe,EAAI,IAAA,YAErC,EAAI,iBAAiB,CAAC,IAAK,GAAS,CACnC,IAAM,EAAU,GAAG,EAAS,GAAG,EAAK,OAAO,KACrC,EAAW,EAAY,IAAI,EAAQ,CAEzC,OADI,GAAU,OAAe,KAE3B,EAAC,EAAD,CAA8B,OAAM,QAAS,GAAU,QAAW,CAAnD,EAAK,GAA8C,EAEpE,CACQ,CAAA,CACX,GAAa,EAAI,eAAe,CAC/B,EAAC,EAAD,CACO,MACK,WACV,UAAW,EACA,YACX,CAAA,CACA,KACH,CAAA,CAAA,CAGC,GAAY,CAChB,WACA,YACA,cAMA,EAAC,EAAM,IAAP,CAAA,SACE,EAAC,EAAM,KAAP,CACE,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAAgB,CAAE,CAEhD,WACU,CAAA,CACH,CAAA,CAGD,GAAwB,CACnC,OACA,WACA,UACA,QACA,iBACA,2BACA,YACA,eACyC,CACzC,IAAM,EAAiB,CAAC,GAAW,EAAK,SAAW,EAE7C,EAAc,MAAc,CAChC,IAAM,EAAM,IAAI,IACV,EAAY,EAAK,IAAK,GAAM,EAAE,SAAS,CAqB7C,OAnBA,EAAK,SAAS,EAAK,IAAa,CAC9B,EAAI,iBAAiB,CAAC,QAAS,GAAS,CACtC,IAAM,EAAM,GAAG,EAAS,GAAG,EAAK,OAAO,KACvC,GAAI,EAAI,IAAI,EAAI,CAAE,OAKlB,IAAM,EAHO,EAAK,OAAO,UAAU,MAGhB,UAAU,EAAI,SAAU,EAAU,EAAU,CAE/D,GAAI,GAAQ,EAAO,EAAG,CACpB,EAAI,IAAI,EAAK,CAAE,QAAS,EAAM,OAAQ,GAAO,CAAC,CAC9C,IAAK,IAAI,EAAI,EAAG,EAAI,EAAM,IACxB,EAAI,IAAI,GAAG,EAAW,EAAE,GAAG,EAAK,OAAO,KAAM,CAAE,OAAQ,GAAM,CAAC,GAGlE,EACF,CAEK,GACN,CAAC,EAAK,CAAC,CAEV,OACE,EAAC,EAAM,KAAP,CAAA,SACG,EACC,EAAC,EAAD,CAAoB,WAAU,UAAW,WACtC,EACQ,CAAA,CAEX,EAAK,KAAK,EAAK,IACb,EAAC,EAAD,CAEO,MACK,WACG,cACH,WACgB,2BACf,YACA,YACX,CARK,EAAI,GAQT,CACF,CAEO,CAAA"}

package/dist/components/forms/controls/FormAutocomplete.d.mts

@@ -1,7 +1,7 @@
 import { DropdownValue } from "../../controls/dropdown/DropdownContextProvider.mjs";
 import { AutocompleteProps } from "../../controls/dropdown/autocomplete/Autocomplete.mjs";
 //#region src/components/forms/controls/FormAutocomplete.d.ts
-type FormAutocompleteProps = Omit<AutocompleteProps, 'onChange' | 'defaultValue'> & {
+type FormAutocompleteProps = Omit<AutocompleteProps, 'onChange' | 'defaultValue' | 'value'> & {
   $rule?: string;
   error?: string;
   isSubmitting?: boolean;

package/dist/components/forms/controls/FormAutocomplete.mjs

@@ -1,2 +1,2 @@
-import{Autocomplete as e}from"../../controls/dropdown/autocomplete/Autocomplete.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>t(n,{name:a,render:({field:{onChange:n,value:r}})=>t(e,{name:a,error:o,defaultValue:r??s,...c,onChange:n})});r.displayName=`Form.Autocomplete`;export{r as FormAutocomplete};
+import{Autocomplete as e}from"../../controls/dropdown/autocomplete/Autocomplete.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>t(n,{name:a,...s===void 0?{}:{defaultValue:s},render:({field:{onChange:n,value:r}})=>t(e,{name:a,error:o,value:r,...c,onChange:n})});r.displayName=`Form.Autocomplete`;export{r as FormAutocomplete};
 //# sourceMappingURL=FormAutocomplete.mjs.map

package/dist/components/forms/controls/FormAutocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormAutocomplete.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormAutocomplete.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport {\n  Autocomplete,\n  type AutocompleteProps,\n} from '@/components/controls/dropdown/autocomplete/Autocomplete';\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\n\nexport type FormAutocompleteProps = Omit<\n  AutocompleteProps,\n  'onChange' | 'defaultValue'\n> & {\n  $rule?: string;\n  error?: string;\n  isSubmitting?: boolean;\n  defaultValue?: DropdownValue;\n};\n\nexport const FormAutocomplete = ({\n  $rule,\n  isSubmitting: _isSubmitting,\n  name,\n  error,\n  defaultValue,\n  ...props\n}: FormAutocompleteProps) => {\n  return (\n    <Controller\n      name={name}\n      render={({ field: { onChange, value } }) => (\n        <Autocomplete\n          name={name}\n          error={error}\n          defaultValue={value ?? defaultValue}\n          {...props}\n          onChange={onChange}\n        />\n      )}\n    />\n  );\n};\n\nFormAutocomplete.displayName = 'Form.Autocomplete';\n"],"mappings":"0KAkBA,MAAa,GAAoB,CAC/B,QACA,aAAc,EACd,OACA,QACA,eACA,GAAG,KAGD,EAAC,EAAD,CACQ,OACN,QAAS,CAAE,MAAO,CAAE,WAAU,YAC5B,EAAC,EAAD,CACQ,OACC,QACP,aAAc,GAAS,EACvB,GAAI,EACM,WACV,CAAA,CAEJ,CAAA,CAIN,EAAiB,YAAc"}
+{"version":3,"file":"FormAutocomplete.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormAutocomplete.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport {\n  Autocomplete,\n  type AutocompleteProps,\n} from '@/components/controls/dropdown/autocomplete/Autocomplete';\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\n\nexport type FormAutocompleteProps = Omit<\n  AutocompleteProps,\n  'onChange' | 'defaultValue' | 'value'\n> & {\n  $rule?: string;\n  error?: string;\n  isSubmitting?: boolean;\n  defaultValue?: DropdownValue;\n};\n\nexport const FormAutocomplete = ({\n  $rule,\n  isSubmitting: _isSubmitting,\n  name,\n  error,\n  defaultValue,\n  ...props\n}: FormAutocompleteProps) => {\n  const controllerProps = defaultValue === undefined ? {} : { defaultValue };\n\n  return (\n    <Controller\n      name={name}\n      {...controllerProps}\n      render={({ field: { onChange, value } }) => (\n        <Autocomplete\n          name={name}\n          error={error}\n          value={value}\n          {...props}\n          onChange={onChange}\n        />\n      )}\n    />\n  );\n};\n\nFormAutocomplete.displayName = 'Form.Autocomplete';\n"],"mappings":"0KAkBA,MAAa,GAAoB,CAC/B,QACA,aAAc,EACd,OACA,QACA,eACA,GAAG,KAKD,EAAC,EAAD,CACQ,OACN,GALoB,IAAiB,IAAA,GAAY,EAAE,CAAG,CAAE,eAAc,CAMtE,QAAS,CAAE,MAAO,CAAE,WAAU,YAC5B,EAAC,EAAD,CACQ,OACC,QACA,QACP,GAAI,EACM,WACV,CAAA,CAEJ,CAAA,CAIN,EAAiB,YAAc"}

package/dist/components/forms/controls/FormCombobox.d.mts

@@ -1,7 +1,7 @@
 import { DropdownValue } from "../../controls/dropdown/DropdownContextProvider.mjs";
 import { ComboboxProps } from "../../controls/dropdown/combobox/Combobox.mjs";
 //#region src/components/forms/controls/FormCombobox.d.ts
-type FormComboboxProps = Omit<ComboboxProps, 'onChange' | 'defaultValue'> & {
+type FormComboboxProps = Omit<ComboboxProps, 'onChange' | 'defaultValue' | 'value'> & {
   $rule?: string;
   error?: string;
   isSubmitting?: boolean;

package/dist/components/forms/controls/FormCombobox.mjs

@@ -1,2 +1,2 @@
-import{Combobox as e}from"../../controls/dropdown/combobox/Combobox.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>t(n,{name:a,render:({field:{onChange:n,value:r}})=>t(e,{error:o,defaultValue:r??s,...c,onChange:n})});r.displayName=`Form.Combobox`;export{r as FormCombobox};
+import{Combobox as e}from"../../controls/dropdown/combobox/Combobox.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>t(n,{name:a,...s===void 0?{}:{defaultValue:s},render:({field:{onChange:n,value:r}})=>t(e,{error:o,value:r,...c,onChange:n})});r.displayName=`Form.Combobox`;export{r as FormCombobox};
 //# sourceMappingURL=FormCombobox.mjs.map

package/dist/components/forms/controls/FormCombobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormCombobox.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormCombobox.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport {\n  Combobox,\n  type ComboboxProps,\n} from '@/components/controls/dropdown/combobox/Combobox';\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\n\nexport type FormComboboxProps = Omit<\n  ComboboxProps,\n  'onChange' | 'defaultValue'\n> & {\n  $rule?: string;\n  error?: string;\n  isSubmitting?: boolean;\n  name: string;\n  defaultValue?: DropdownValue;\n};\n\nexport const FormCombobox = ({\n  $rule,\n  isSubmitting: _isSubmitting,\n  name,\n  error,\n  defaultValue,\n  ...props\n}: FormComboboxProps) => {\n  return (\n    <Controller\n      name={name}\n      render={({ field: { onChange, value } }) => (\n        <Combobox\n          error={error}\n          defaultValue={value ?? defaultValue}\n          {...props}\n          onChange={onChange}\n        />\n      )}\n    />\n  );\n};\n\nFormCombobox.displayName = 'Form.Combobox';\n"],"mappings":"8JAmBA,MAAa,GAAgB,CAC3B,QACA,aAAc,EACd,OACA,QACA,eACA,GAAG,KAGD,EAAC,EAAD,CACQ,OACN,QAAS,CAAE,MAAO,CAAE,WAAU,YAC5B,EAAC,EAAD,CACS,QACP,aAAc,GAAS,EACvB,GAAI,EACM,WACV,CAAA,CAEJ,CAAA,CAIN,EAAa,YAAc"}
+{"version":3,"file":"FormCombobox.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormCombobox.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport {\n  Combobox,\n  type ComboboxProps,\n} from '@/components/controls/dropdown/combobox/Combobox';\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\n\nexport type FormComboboxProps = Omit<\n  ComboboxProps,\n  'onChange' | 'defaultValue' | 'value'\n> & {\n  $rule?: string;\n  error?: string;\n  isSubmitting?: boolean;\n  name: string;\n  defaultValue?: DropdownValue;\n};\n\nexport const FormCombobox = ({\n  $rule,\n  isSubmitting: _isSubmitting,\n  name,\n  error,\n  defaultValue,\n  ...props\n}: FormComboboxProps) => {\n  const controllerProps = defaultValue === undefined ? {} : { defaultValue };\n\n  return (\n    <Controller\n      name={name}\n      {...controllerProps}\n      render={({ field: { onChange, value } }) => (\n        <Combobox error={error} value={value} {...props} onChange={onChange} />\n      )}\n    />\n  );\n};\n\nFormCombobox.displayName = 'Form.Combobox';\n"],"mappings":"8JAmBA,MAAa,GAAgB,CAC3B,QACA,aAAc,EACd,OACA,QACA,eACA,GAAG,KAKD,EAAC,EAAD,CACQ,OACN,GALoB,IAAiB,IAAA,GAAY,EAAE,CAAG,CAAE,eAAc,CAMtE,QAAS,CAAE,MAAO,CAAE,WAAU,YAC5B,EAAC,EAAD,CAAiB,QAAc,QAAO,GAAI,EAAiB,WAAY,CAAA,CAEzE,CAAA,CAIN,EAAa,YAAc"}

package/dist/components/forms/controls/FormSelect.d.mts

@@ -1,7 +1,7 @@
 import { DropdownValue } from "../../controls/dropdown/DropdownContextProvider.mjs";
 import { SelectProps } from "../../controls/dropdown/select/Select.mjs";
 //#region src/components/forms/controls/FormSelect.d.ts
-type FormSelectProps = Omit<SelectProps, 'onChange' | 'defaultValue'> & {
+type FormSelectProps = Omit<SelectProps, 'onChange' | 'defaultValue' | 'value'> & {
   $rule?: string;
   error?: string;
   isSubmitting?: boolean;

package/dist/components/forms/controls/FormSelect.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSelect.d.mts","names":[],"sources":["../../../../src/components/forms/controls/FormSelect.tsx"],"mappings":";;;KAQY,eAAA,GAAkB,IAAA,CAAK,WAAA;EACjC,KAAA;EACA,KAAA;EACA,YAAA;EACA,IAAA;EACA,YAAA,GAAe,aAAA;AAAA"}
+{"version":3,"file":"FormSelect.d.mts","names":[],"sources":["../../../../src/components/forms/controls/FormSelect.tsx"],"mappings":";;;KAQY,eAAA,GAAkB,IAAA,CAC5B,WAAA;EAGA,KAAA;EACA,KAAA;EACA,YAAA;EACA,IAAA;EACA,YAAA,GAAe,aAAA;AAAA"}

package/dist/components/forms/controls/FormSelect.mjs

@@ -1,2 +1,2 @@
-import{Select as e}from"../../controls/dropdown/select/Select.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>{let l=c.clearable??!1,u=s??(l?void 0:c.options[0]);return t(n,{name:a,...u===void 0?{}:{defaultValue:u},render:({field:{onChange:n,value:r}})=>t(e,{error:o,defaultValue:r??u,...c,onChange:n})})};r.displayName=`Form.Select`;export{r as FormSelect};
+import{Select as e}from"../../controls/dropdown/select/Select.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>{let l=c.clearable??!1,u=s??(l?void 0:c.options[0]);return t(n,{name:a,...u===void 0?{}:{defaultValue:u},render:({field:{onChange:n,value:r}})=>t(e,{error:o,value:r,...c,onChange:n})})};r.displayName=`Form.Select`;export{r as FormSelect};
 //# sourceMappingURL=FormSelect.mjs.map

package/dist/components/forms/controls/FormSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormSelect.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormSelect.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\nimport {\n  Select,\n  type SelectProps,\n} from '@/components/controls/dropdown/select/Select';\n\nexport type FormSelectProps = Omit<SelectProps, 'onChange' | 'defaultValue'> & {\n  $rule?: string;\n  error?: string;\n  isSubmitting?: boolean;\n  name: string;\n  defaultValue?: DropdownValue;\n};\n\nexport const FormSelect = ({\n  $rule,\n  isSubmitting: _isSubmitting,\n  name,\n  error,\n  defaultValue,\n  ...props\n}: FormSelectProps) => {\n  const isClearable = props.clearable ?? false;\n  const resolvedDefaultValue =\n    defaultValue ?? (!isClearable ? props.options[0] : undefined);\n  const controllerProps =\n    resolvedDefaultValue === undefined\n      ? {}\n      : { defaultValue: resolvedDefaultValue };\n\n  return (\n    <Controller\n      name={name}\n      {...controllerProps}\n      render={({ field: { onChange, value } }) => (\n        <Select\n          error={error}\n          defaultValue={value ?? resolvedDefaultValue}\n          {...props}\n          onChange={onChange}\n        />\n      )}\n    />\n  );\n};\n\nFormSelect.displayName = 'Form.Select';\n"],"mappings":"wJAgBA,MAAa,GAAc,CACzB,QACA,aAAc,EACd,OACA,QACA,eACA,GAAG,KACkB,CACrB,IAAM,EAAc,EAAM,WAAa,GACjC,EACJ,IAAkB,EAAiC,IAAA,GAAnB,EAAM,QAAQ,IAMhD,OACE,EAAC,EAAD,CACQ,OACN,GAPF,IAAyB,IAAA,GACrB,EAAE,CACF,CAAE,aAAc,EAAsB,CAMxC,QAAS,CAAE,MAAO,CAAE,WAAU,YAC5B,EAAC,EAAD,CACS,QACP,aAAc,GAAS,EACvB,GAAI,EACM,WACV,CAAA,CAEJ,CAAA,EAIN,EAAW,YAAc"}
+{"version":3,"file":"FormSelect.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormSelect.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\nimport {\n  Select,\n  type SelectProps,\n} from '@/components/controls/dropdown/select/Select';\n\nexport type FormSelectProps = Omit<\n  SelectProps,\n  'onChange' | 'defaultValue' | 'value'\n> & {\n  $rule?: string;\n  error?: string;\n  isSubmitting?: boolean;\n  name: string;\n  defaultValue?: DropdownValue;\n};\n\nexport const FormSelect = ({\n  $rule,\n  isSubmitting: _isSubmitting,\n  name,\n  error,\n  defaultValue,\n  ...props\n}: FormSelectProps) => {\n  const isClearable = props.clearable ?? false;\n  const resolvedDefaultValue =\n    defaultValue ?? (!isClearable ? props.options[0] : undefined);\n  const controllerProps =\n    resolvedDefaultValue === undefined\n      ? {}\n      : { defaultValue: resolvedDefaultValue };\n\n  return (\n    <Controller\n      name={name}\n      {...controllerProps}\n      render={({ field: { onChange, value } }) => (\n        <Select error={error} value={value} {...props} onChange={onChange} />\n      )}\n    />\n  );\n};\n\nFormSelect.displayName = 'Form.Select';\n"],"mappings":"wJAmBA,MAAa,GAAc,CACzB,QACA,aAAc,EACd,OACA,QACA,eACA,GAAG,KACkB,CACrB,IAAM,EAAc,EAAM,WAAa,GACjC,EACJ,IAAkB,EAAiC,IAAA,GAAnB,EAAM,QAAQ,IAMhD,OACE,EAAC,EAAD,CACQ,OACN,GAPF,IAAyB,IAAA,GACrB,EAAE,CACF,CAAE,aAAc,EAAsB,CAMxC,QAAS,CAAE,MAAO,CAAE,WAAU,YAC5B,EAAC,EAAD,CAAe,QAAc,QAAO,GAAI,EAAiB,WAAY,CAAA,CAEvE,CAAA,EAIN,EAAW,YAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "1.0.100",
+  "version": "1.0.102",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
     "rimraf": "^6.1.3",
     "tsdown": "^0.21.4",
     "typescript": "^5.9.3",
-    "@mage-ui/preset": "1.0.100",
+    "@mage-ui/preset": "1.0.102",
     "@mage-ui/styled-system": "1.0.8"
   },
   "peerDependencies": {