@mage-ui/components 0.0.62 → 0.0.63

package/dist/components/controls/dropdown/DropdownBase.d.ts

@@ -20,6 +20,8 @@ type DropdownBaseProps = {
   };
   endSlot?: React.ReactNode;
   startSlot?: React.ReactNode;
+  isClearable?: boolean;
+  clearableIcon?: string;
   children: React.ReactNode;
   portal?: boolean;
   position?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

package/dist/components/controls/dropdown/DropdownBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;;KASY,iBAAA;;;;;IAAA,EAAA,EAAA,MAAA,GAAA,MAAiB;IAAA,KAAA,EAAA,MAAA;MAMnB,SAAM;mBAME,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;QACJ,EAPJ,KAAA,CAAM,YAOI;YACF,CAAA,EAAA;IAAS,QAAA,CAAA,EAAA,MAAA;;;;YAFf,KAAA,CAAM;cACJ,KAAA,CAAM;YACR,KAAA,CAAM"}
+{"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;;KAWY,iBAAA;;;;;IAAA,EAAA,EAAA,MAAA,GAAA,MAAiB;IAAA,KAAA,EAAA,MAAA;MAMnB,SAAM;mBAME,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;QACJ,EAPJ,KAAA,CAAM,YAOI;YAGF,CAAA,EAAA;IAAS,QAAA,CAAA,EAAA,MAAA;;;;YAJf,KAAA,CAAM;cACJ,KAAA,CAAM;;;YAGR,KAAA,CAAM"}

package/dist/components/controls/dropdown/DropdownBase.js

@@ -1,2 +1,2 @@
-import{comboboxDivider as e,comboboxOptions as t,dropdown as n}from"@mage-ui/styled-system/recipes";import{Combobox as r,useCombobox as i}from"@mantine/core";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{cloneElement as s}from"react";const c=({defaultOpened:e,readOnly:c,setQuery:l,setSelectedOption:u,selectedOption:d,target:f,classNames:p,children:m,endSlot:h,startSlot:g,position:_,portal:v,width:y,...b})=>{let x=i({defaultOpened:e??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{x.resetSelectedOption()}}),S=s(f,{...f?.props??{},onChange:({currentTarget:e})=>{l?.(e.value),x.openDropdown(),x.updateSelectedOptionIndex()},onBlur:()=>{l?.(d?.value??``)},onClick:()=>{c?x.toggleDropdown():x.openDropdown()},startSlot:g,endSlot:h});return o(r,{readOnly:c??!1,onOptionSubmit:e=>{u(e),l?.(e),x.closeDropdown()},store:x,withinPortal:v||!0,position:_||`bottom-start`,width:y||`auto`,...b,children:[a(r.Target,{children:S}),a(r.Dropdown,{classNames:{dropdown:p?.dropdown??n()},children:a(r.Options,{classNames:{options:p?.options??t()},children:m})})]})},l=({classNames:t})=>a(`hr`,{className:t?.divider??e(),"aria-orientation":`horizontal`});c.Option=r.Option,c.Option.displayName=`DropdownBase.Option`,c.Divider=l,c.Divider.displayName=`DropdownBase.Divider`,c.Empty=r.Empty,c.Empty.displayName=`DropdownBase.Empty`;export{c as DropdownBase};
+import{ButtonIcon as e}from"../../buttons/button-icon/ButtonIcon.js";import{comboboxClear as t,comboboxDivider as n,comboboxOptions as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{Combobox as a,useCombobox as o}from"@mantine/core";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{cloneElement as l}from"react";const u=({defaultOpened:n,readOnly:u,setQuery:d,setSelectedOption:f,selectedOption:p,target:m,classNames:h,children:g,endSlot:_,startSlot:v,position:y,portal:b,width:x,isClearable:S,clearableIcon:C,...w})=>{let T=o({defaultOpened:n??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{T.resetSelectedOption()}}),E=()=>{d?.(``),f(void 0),T.resetSelectedOption()},D=S&&(p?.value||``),O=s(e,{classNames:{root:t()},icon:C||`x-close`,label:`clear input`,onClick:e=>{e.stopPropagation(),E()}}),k=l(m,{...m?.props??{},onChange:({currentTarget:e})=>{d?.(e.value),T.openDropdown(),T.updateSelectedOptionIndex()},onBlur:()=>{d?.(p?.value??``)},onClick:()=>{u?T.toggleDropdown():T.openDropdown()},startSlot:v,endSlot:D?O:_});return c(a,{readOnly:u??!1,onOptionSubmit:e=>{f(e),d?.(e),T.closeDropdown()},store:T,withinPortal:b||!0,position:y||`bottom-start`,width:x||`auto`,...w,children:[s(a.Target,{children:k}),s(a.Dropdown,{classNames:{dropdown:h?.dropdown??i()},children:s(a.Options,{classNames:{options:h?.options??r()},children:g})})]})},d=({classNames:e})=>s(`hr`,{className:e?.divider??n(),"aria-orientation":`horizontal`});u.Option=a.Option,u.Option.displayName=`DropdownBase.Option`,u.Divider=d,u.Divider.displayName=`DropdownBase.Divider`,u.Empty=a.Empty,u.Empty.displayName=`DropdownBase.Empty`;export{u as DropdownBase};
 //# sourceMappingURL=DropdownBase.js.map

package/dist/components/controls/dropdown/DropdownBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.js","names":["MantineCombobox","Divider: React.FC<{ classNames?: { divider?: string } }>"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport {\n  comboboxDivider,\n  comboboxOptions,\n  dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\n\nexport type DropdownBaseProps = {\n  defaultOpened?: boolean;\n  readOnly?: boolean;\n  setQuery?: (value: string) => void;\n  selectedOption?: { id: string | number; value: string } | undefined;\n  setSelectedOption: (value: string | undefined) => void;\n  target: React.ReactElement;\n  classNames?: {\n    dropdown?: string;\n    options?: string;\n    divider?: string;\n  };\n  endSlot?: React.ReactNode;\n  startSlot?: React.ReactNode;\n  children: React.ReactNode;\n  portal?: boolean;\n  position?:\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  width?: number | string;\n};\n\nexport const DropdownBase = ({\n  defaultOpened,\n  readOnly,\n  setQuery,\n  setSelectedOption,\n  selectedOption,\n  target,\n  classNames,\n  children,\n  endSlot,\n  startSlot,\n  position,\n  portal,\n  width,\n  ...props\n}: DropdownBaseProps) => {\n  const combobox = useCombobox({\n    defaultOpened: defaultOpened ?? false,\n    scrollBehavior: 'smooth',\n    onDropdownClose: () => {\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const targetComponent = cloneElement(target, {\n    ...(target?.props ?? {}),\n    onChange: ({\n      currentTarget,\n    }: ChangeEvent<HTMLInputElement | HTMLButtonElement>) => {\n      setQuery?.(currentTarget.value);\n      combobox.openDropdown();\n      combobox.updateSelectedOptionIndex();\n    },\n    onBlur: () => {\n      setQuery?.(selectedOption?.value ?? '');\n    },\n    onClick: () => {\n      if (readOnly) {\n        combobox.toggleDropdown();\n      } else {\n        combobox.openDropdown();\n      }\n    },\n    // opened: combobox.isDropdownOpened,\n    startSlot: startSlot,\n    endSlot: endSlot,\n  } as React.HTMLProps<HTMLInputElement | HTMLButtonElement>);\n\n  return (\n    <MantineCombobox\n      readOnly={readOnly ?? false}\n      onOptionSubmit={(option) => {\n        setSelectedOption(option);\n        setQuery?.(option);\n        combobox.closeDropdown();\n      }}\n      store={combobox}\n      withinPortal={portal || true}\n      position={position || 'bottom-start'}\n      width={width || 'auto'}\n      {...props}\n    >\n      <MantineCombobox.Target>{targetComponent}</MantineCombobox.Target>\n      <MantineCombobox.Dropdown\n        classNames={{\n          dropdown: classNames?.dropdown ?? dropdown(),\n        }}\n      >\n        <MantineCombobox.Options\n          classNames={{\n            options: classNames?.options ?? comboboxOptions(),\n          }}\n        >\n          {children}\n        </MantineCombobox.Options>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n};\n\nconst Divider: React.FC<{ classNames?: { divider?: string } }> = ({\n  classNames,\n}) => {\n  return (\n    <hr\n      className={classNames?.divider ?? comboboxDivider()}\n      aria-orientation='horizontal'\n    />\n  );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Divider = Divider;\nDropdownBase.Divider.displayName = 'DropdownBase.Divider';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"qPAyCA,MAAa,GAAgB,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,UACA,YACA,WACA,SACA,QACA,GAAG,KACoB,CACvB,IAAM,EAAW,EAAY,CAC3B,cAAe,GAAiB,GAChC,eAAgB,SAChB,oBAAuB,CACrB,EAAS,qBAAqB,EAEjC,CAAC,CAEI,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,EAAE,CACvB,UAAW,CACT,mBACuD,CACvD,IAAW,EAAc,MAAM,CAC/B,EAAS,cAAc,CACvB,EAAS,2BAA2B,EAEtC,WAAc,CACZ,IAAW,GAAgB,OAAS,GAAG,EAEzC,YAAe,CACT,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,EAIhB,YACF,UACV,CAA0D,CAE3D,OACE,EAACA,EAAAA,CACC,SAAU,GAAY,GACtB,eAAiB,GAAW,CAC1B,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,EAE1B,MAAO,EACP,aAAc,GAAU,GACxB,SAAU,GAAY,eACtB,MAAO,GAAS,OAChB,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,EAAA,CAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,CAC7C,UAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,CAClD,CAEA,YACuB,EACD,CAAA,EACX,EAIhBC,GAA4D,CAChE,gBAGE,EAAC,KAAA,CACC,UAAW,GAAY,SAAW,GAAiB,CACnD,mBAAiB,cACjB,CAIN,EAAa,OAASD,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,QAAU,EACvB,EAAa,QAAQ,YAAc,uBACnC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}
+{"version":3,"file":"DropdownBase.js","names":["MantineCombobox","Divider: React.FC<{ classNames?: { divider?: string } }>"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport {\n  comboboxClear,\n  comboboxDivider,\n  comboboxOptions,\n  dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\nimport { ButtonIcon } from '@/components/buttons';\n\nexport type DropdownBaseProps = {\n  defaultOpened?: boolean;\n  readOnly?: boolean;\n  setQuery?: (value: string) => void;\n  selectedOption?: { id: string | number; value: string } | undefined;\n  setSelectedOption: (value: string | undefined) => void;\n  target: React.ReactElement;\n  classNames?: {\n    dropdown?: string;\n    options?: string;\n    divider?: string;\n  };\n  endSlot?: React.ReactNode;\n  startSlot?: React.ReactNode;\n  isClearable?: boolean;\n  clearableIcon?: string;\n  children: React.ReactNode;\n  portal?: boolean;\n  position?:\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  width?: number | string;\n};\n\nexport const DropdownBase = ({\n  defaultOpened,\n  readOnly,\n  setQuery,\n  setSelectedOption,\n  selectedOption,\n  target,\n  classNames,\n  children,\n  endSlot,\n  startSlot,\n  position,\n  portal,\n  width,\n  isClearable,\n  clearableIcon,\n  ...props\n}: DropdownBaseProps) => {\n  const combobox = useCombobox({\n    defaultOpened: defaultOpened ?? false,\n    scrollBehavior: 'smooth',\n    onDropdownClose: () => {\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const handleClear = () => {\n    setQuery?.('');\n    setSelectedOption(undefined);\n    combobox.resetSelectedOption();\n  };\n  const showClearButton = isClearable && (selectedOption?.value || '');\n\n  const clearButton = (\n    <ButtonIcon\n      classNames={{\n        root: comboboxClear(),\n      }}\n      icon={clearableIcon || 'x-close'}\n      label='clear input'\n      onClick={(e) => {\n        e.stopPropagation();\n        handleClear();\n      }}\n    />\n  );\n\n  const targetComponent = cloneElement(target, {\n    ...(target?.props ?? {}),\n    onChange: ({\n      currentTarget,\n    }: ChangeEvent<HTMLInputElement | HTMLButtonElement>) => {\n      setQuery?.(currentTarget.value);\n      combobox.openDropdown();\n      combobox.updateSelectedOptionIndex();\n    },\n    onBlur: () => {\n      setQuery?.(selectedOption?.value ?? '');\n    },\n    onClick: () => {\n      if (readOnly) {\n        combobox.toggleDropdown();\n      } else {\n        combobox.openDropdown();\n      }\n    },\n    // opened: combobox.isDropdownOpened,\n    startSlot: startSlot,\n    endSlot: showClearButton ? clearButton : endSlot,\n  } as React.HTMLProps<HTMLInputElement | HTMLButtonElement>);\n\n  return (\n    <MantineCombobox\n      readOnly={readOnly ?? false}\n      onOptionSubmit={(option) => {\n        setSelectedOption(option);\n        setQuery?.(option);\n        combobox.closeDropdown();\n      }}\n      store={combobox}\n      withinPortal={portal || true}\n      position={position || 'bottom-start'}\n      width={width || 'auto'}\n      {...props}\n    >\n      <MantineCombobox.Target>{targetComponent}</MantineCombobox.Target>\n      <MantineCombobox.Dropdown\n        classNames={{\n          dropdown: classNames?.dropdown ?? dropdown(),\n        }}\n      >\n        <MantineCombobox.Options\n          classNames={{\n            options: classNames?.options ?? comboboxOptions(),\n          }}\n        >\n          {children}\n        </MantineCombobox.Options>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n};\n\nconst Divider: React.FC<{ classNames?: { divider?: string } }> = ({\n  classNames,\n}) => {\n  return (\n    <hr\n      className={classNames?.divider ?? comboboxDivider()}\n      aria-orientation='horizontal'\n    />\n  );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Divider = Divider;\nDropdownBase.Divider.displayName = 'DropdownBase.Divider';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"6UA6CA,MAAa,GAAgB,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,UACA,YACA,WACA,SACA,QACA,cACA,gBACA,GAAG,KACoB,CACvB,IAAM,EAAW,EAAY,CAC3B,cAAe,GAAiB,GAChC,eAAgB,SAChB,oBAAuB,CACrB,EAAS,qBAAqB,EAEjC,CAAC,CAEI,MAAoB,CACxB,IAAW,GAAG,CACd,EAAkB,IAAA,GAAU,CAC5B,EAAS,qBAAqB,EAE1B,EAAkB,IAAgB,GAAgB,OAAS,IAE3D,EACJ,EAAC,EAAA,CACC,WAAY,CACV,KAAM,GAAe,CACtB,CACD,KAAM,GAAiB,UACvB,MAAM,cACN,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,GAAa,GAEf,CAGE,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,EAAE,CACvB,UAAW,CACT,mBACuD,CACvD,IAAW,EAAc,MAAM,CAC/B,EAAS,cAAc,CACvB,EAAS,2BAA2B,EAEtC,WAAc,CACZ,IAAW,GAAgB,OAAS,GAAG,EAEzC,YAAe,CACT,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,EAIhB,YACX,QAAS,EAAkB,EAAc,EAC1C,CAA0D,CAE3D,OACE,EAACA,EAAAA,CACC,SAAU,GAAY,GACtB,eAAiB,GAAW,CAC1B,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,EAE1B,MAAO,EACP,aAAc,GAAU,GACxB,SAAU,GAAY,eACtB,MAAO,GAAS,OAChB,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,EAAA,CAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,CAC7C,UAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,CAClD,CAEA,YACuB,EACD,CAAA,EACX,EAIhBC,GAA4D,CAChE,gBAGE,EAAC,KAAA,CACC,UAAW,GAAY,SAAW,GAAiB,CACnD,mBAAiB,cACjB,CAIN,EAAa,OAASD,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,QAAU,EACvB,EAAa,QAAQ,YAAc,uBACnC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}

package/dist/components/controls/dropdown/Select.d.ts

@@ -12,6 +12,7 @@ type SelectProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' |
     id: string | number;
     value: string;
   }[];
+  isClearable?: boolean;
   classNames?: {
     option?: string;
   };
@@ -22,6 +23,7 @@ declare const Select: ({
   selectedOption,
   options,
   classNames,
+  isClearable,
   ...props
 }: SelectProps) => react_jsx_runtime10.JSX.Element;
 //#endregion

package/dist/components/controls/dropdown/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAgBY,WAAA,GAAc,KACxB,qEAGA;;;IAJU,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAUH,UAmDZ,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;;AAnDsB,cAAV,MAAU,EAAA,CAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAOpB,WAPoB,EAAA,GAOT,mBAAA,CAAA,GAAA,CAAA,OAPS"}
+{"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAiBY,WAAA,GAAc,KACxB,qEAGA;;;IAJU,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAWH,WA0DZ,CAAA,EAAA,OAAA;EAAA,UAAA,CAAA,EAAA;IA1DsB,MAAA,CAAA,EAAA,MAAA;;;AAAA,cAAV,MAAU,EAAA,CAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EAQpB,WARoB,EAAA,GAQT,mBAAA,CAAA,GAAA,CAAA,OARS"}

package/dist/components/controls/dropdown/Select.js

@@ -1,2 +1,2 @@
-import{DropdownBase as e}from"./DropdownBase.js";import{InputText as t}from"../input-text/InputText.js";import{comboboxOption as n,input as r,inputLabel as i,inputRoot as a,inputSection as o,selectButton as s,selectSection as c}from"@mage-ui/styled-system/recipes";import{jsx as l}from"react/jsx-runtime";import{useState as u}from"react";import{cx as d}from"@mage-ui/styled-system/css";const f=({defaultOpened:f=!1,setSelectedOption:p,selectedOption:m,options:h,classNames:g,..._})=>{let[v,y]=u(m?.value??``),b=h.map(t=>l(e.Option,{value:t.value,active:m?.id===t.id,classNames:{option:g?.option??n()},children:t.value},t.id)),x=e=>{let t=h.find(t=>t.value===e);p(t)};return l(e,{readOnly:!0,target:l(t,{readOnly:!0,classNames:{root:g?.root??a(),label:g?.label??i(),input:g?.input??d(r(),s()),section:g?.section??d(o(),c())},value:v,..._}),selectedOption:m,setQuery:y,setSelectedOption:e=>x(e),width:`target`,..._,children:b})};export{f as Select};
+import{DropdownBase as e}from"./DropdownBase.js";import{InputText as t}from"../input-text/InputText.js";import{clearSection as n,comboboxOption as r,input as i,inputLabel as a,inputRoot as o,inputSection as s,selectButton as c,selectSection as l}from"@mage-ui/styled-system/recipes";import{jsx as u}from"react/jsx-runtime";import{useState as d}from"react";import{cx as f}from"@mage-ui/styled-system/css";const p=({defaultOpened:p=!1,setSelectedOption:m,selectedOption:h,options:g,classNames:_,isClearable:v,...y})=>{let[b,x]=d(h?.value??``),S=g.map(t=>u(e.Option,{value:t.value,active:h?.id===t.id,classNames:{option:_?.option??r()},children:t.value},t.id)),C=e=>{let t=g.find(t=>t.value===e);m(t)};return u(e,{readOnly:!0,target:u(t,{readOnly:!0,classNames:{root:_?.root??o(),label:_?.label??a(),input:_?.input??f(i(),c()),section:_?.section??f(s(),v&&b?n():l())},value:b,...y}),selectedOption:h,setQuery:x,setSelectedOption:e=>C(e),width:`target`,isClearable:v,...y,children:S})};export{p as Select};
 //# sourceMappingURL=Select.js.map

package/dist/components/controls/dropdown/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  comboboxOption,\n  input,\n  inputLabel,\n  inputRoot,\n  inputSection,\n  selectButton,\n  selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type SelectProps = Omit<\n  DropdownBaseProps,\n  'children' | 'onClick' | 'setQuery' | 'target'\n> &\n  InputTextProps & {\n    setSelectedOption: (\n      option: { id: string | number; value: string } | undefined,\n    ) => void;\n    options: { id: string | number; value: string }[];\n    classNames?: {\n      option?: string;\n    };\n  };\n\nexport const Select = ({\n  defaultOpened = false,\n  setSelectedOption,\n  selectedOption,\n  options,\n  classNames,\n  ...props\n}: SelectProps) => {\n  const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n  const dropdownOptions = options.map((option) => (\n    <DropdownBase.Option\n      value={option.value}\n      key={option.id}\n      active={selectedOption?.id === option.id}\n      classNames={{ option: classNames?.option ?? comboboxOption() }}\n    >\n      {option.value}\n    </DropdownBase.Option>\n  ));\n\n  const onChange = (value: string | undefined) => {\n    const selected = options.find((item) => item.value === value);\n    setSelectedOption(selected);\n  };\n\n  return (\n    <DropdownBase\n      readOnly={true}\n      target={\n        <InputText\n          readOnly\n          classNames={{\n            root: classNames?.root ?? inputRoot(),\n            label: classNames?.label ?? inputLabel(),\n            input: classNames?.input ?? cx(input(), selectButton()),\n            section: classNames?.section ?? cx(inputSection(), selectSection()),\n          }}\n          value={query}\n          {...props}\n        />\n      }\n      selectedOption={selectedOption}\n      setQuery={setQuery}\n      setSelectedOption={(option) => onChange(option)}\n      width='target'\n      {...props}\n    >\n      {dropdownOptions}\n    </DropdownBase>\n  );\n};\n"],"mappings":"kYA8BA,MAAa,GAAU,CACrB,gBAAgB,GAChB,oBACA,iBACA,UACA,aACA,GAAG,KACc,CACjB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAkB,EAAQ,IAAK,GACnC,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,CAAE,UAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAY,GAA8B,CAC9C,IAAM,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CAC7D,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,SAAA,GACA,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAc,CAAC,CACvD,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,CACpE,CACD,MAAO,EACP,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CAC/C,MAAM,SACN,GAAI,WAEH,GACY"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  clearSection,\n  comboboxOption,\n  input,\n  inputLabel,\n  inputRoot,\n  inputSection,\n  selectButton,\n  selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type SelectProps = Omit<\n  DropdownBaseProps,\n  'children' | 'onClick' | 'setQuery' | 'target'\n> &\n  InputTextProps & {\n    setSelectedOption: (\n      option: { id: string | number; value: string } | undefined,\n    ) => void;\n    options: { id: string | number; value: string }[];\n    isClearable?: boolean;\n    classNames?: {\n      option?: string;\n    };\n  };\n\nexport const Select = ({\n  defaultOpened = false,\n  setSelectedOption,\n  selectedOption,\n  options,\n  classNames,\n  isClearable,\n  ...props\n}: SelectProps) => {\n  const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n  const dropdownOptions = options.map((option) => (\n    <DropdownBase.Option\n      value={option.value}\n      key={option.id}\n      active={selectedOption?.id === option.id}\n      classNames={{ option: classNames?.option ?? comboboxOption() }}\n    >\n      {option.value}\n    </DropdownBase.Option>\n  ));\n\n  const onChange = (value: string | undefined) => {\n    const selected = options.find((item) => item.value === value);\n    setSelectedOption(selected);\n  };\n\n  return (\n    <DropdownBase\n      readOnly={true}\n      target={\n        <InputText\n          readOnly\n          classNames={{\n            root: classNames?.root ?? inputRoot(),\n            label: classNames?.label ?? inputLabel(),\n            input: classNames?.input ?? cx(input(), selectButton()),\n            section:\n              classNames?.section ??\n              cx(\n                inputSection(),\n                isClearable && query ? clearSection() : selectSection(),\n              ),\n          }}\n          value={query}\n          {...props}\n        />\n      }\n      selectedOption={selectedOption}\n      setQuery={setQuery}\n      setSelectedOption={(option) => onChange(option)}\n      width='target'\n      isClearable={isClearable}\n      {...props}\n    >\n      {dropdownOptions}\n    </DropdownBase>\n  );\n};\n"],"mappings":"oZAgCA,MAAa,GAAU,CACrB,gBAAgB,GAChB,oBACA,iBACA,UACA,aACA,cACA,GAAG,KACc,CACjB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAkB,EAAQ,IAAK,GACnC,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,CAAE,UAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAY,GAA8B,CAC9C,IAAM,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CAC7D,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,SAAA,GACA,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAc,CAAC,CACvD,QACE,GAAY,SACZ,EACE,GAAc,CACd,GAAe,EAAQ,GAAc,CAAG,GAAe,CACxD,CACJ,CACD,MAAO,EACP,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CAC/C,MAAM,SACO,cACb,GAAI,WAEH,GACY"}

package/dist/panda.json

@@ -150,10 +150,12 @@
       ],
       "comboboxEmpty": [],
       "selectSection": [],
+      "comboboxClear": [],
       "dropdown": [],
       "comboboxOptions": [],
       "comboboxDivider": [],
       "selectButton": [],
+      "clearSection": [],
       "inputFileGroup": [],
       "badge": [
         "status]___[value:neutral]___[recipe:badge"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "private": false,
   "description": "",
   "keywords": [],
@@ -26,8 +26,8 @@
     "rimraf": "^6.0.1",
     "tsdown": "^0.15.6",
     "typescript": "^5.9.3",
-    "@mage-ui/preset": "0.0.62",
-    "@mage-ui/styled-system": "0.0.62"
+    "@mage-ui/preset": "0.0.63",
+    "@mage-ui/styled-system": "0.0.63"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.2",