@mage-ui/components 0.0.87 → 0.0.89

package/dist/components/buttons/button-icon/ButtonIcon.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from "../button/Button.js";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/buttons/button-icon/ButtonIcon.d.ts
 type ButtonIconProps = ButtonProps & {
@@ -15,7 +15,7 @@ declare const ButtonIcon: ({
   icon,
   classNames,
   ...props
-}: ButtonIconProps) => react_jsx_runtime4.JSX.Element;
+}: ButtonIconProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { ButtonIcon, ButtonIconProps };
 //# sourceMappingURL=ButtonIcon.d.ts.map

package/dist/components/controls/date-picker/DatePicker.d.ts

@@ -16,6 +16,7 @@ type DatePickerProps = {
   minDate?: Date;
   format?: string;
   required?: boolean;
+  valueFormat?: string;
   onChange?: (date: Date | string | null) => void;
 };
 declare const DatePicker: ({

package/dist/components/controls/date-picker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":[],"mappings":";;;;KAkCY,eAAA;;EAAA,KAAA,CAAA,EAAA,MAAA;EAAe,WAAA,CAAA,EAAA,MAAA;aAKZ,CAAA,EAAA,MAAA;MAEA,CAAA,EAFN,KAAA,CAAM,SAEA;OACL,CAAA,EAAA,MAAA;YAEE,CAAA,EAHG,oBAGH;OACA,CAAA,EAHF,eAGE;QAGQ,CAAA,EAAA,MAAA;EAAI,OAAA,CAAA,EAJZ,IAIY;EAGX,OAAA,CAAA,EAND,IA2BX;EAAA,MAAA,CAAA,EAAA,MAAA;UArB0B,CAAA,EAAA,OAAA;UAAA,CAAA,EAAA,CAAA,IAAA,EAHP,IAGO,GAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,UAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAOxB,eAPwB,EAAA,GAON,SAPM;KAuBtB,oBAAA,GAAuB,mBAvBD,GAwBzB,4BAxByB,GAyBzB,2BAzByB,GA0BzB,gCA1ByB,GA2BzB,+BA3ByB,GA4BzB,qBA5ByB;KA8BtB,mBAAA,GAvBF;MAAkB,CAAA,EAAA,MAAA;EAcpB,OAAA,CAAA,EAAA,MAAA;EAEI,KAAA,CAAA,EAAA,MAAA;EAAoB,KAAA,CAAA,EAAA,MAAA;OAAG,CAAA,EAAA,MAAA;aAC1B,CAAA,EAAA,MAAA;aACA,CAAA,EAAA,MAAA;SACA,CAAA,EAAA,MAAA;;KA4BG,4BAAA,GA1BH;EAAqB,kBAAA,CAAA,EAAA,MAAA;EAElB,qBAAA,CAAmB,EAAA,MAAA;EAwBnB,cAAA,CAAA,EAAA,MAAA;EAsBA,mBAAA,CAAA,EAAA,MAAA;EAmBA,yBAAA,CAAA,EAAA,MAAA;AAAgC,CAAA;AAoBD,KAvC/B,2BAAA,GA0DqB;;;;;;;;KAvCrB,gCAAA;;;;;;KAoBA,+BAAA;;;;;;KAmBA,qBAAA"}
+{"version":3,"file":"DatePicker.d.ts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":[],"mappings":";;;;KAkCY,eAAA;;EAAA,KAAA,CAAA,EAAA,MAAA;EAAe,WAAA,CAAA,EAAA,MAAA;aAKZ,CAAA,EAAA,MAAA;MAEA,CAAA,EAFN,KAAA,CAAM,SAEA;OACL,CAAA,EAAA,MAAA;YAEE,CAAA,EAHG,oBAGH;OACA,CAAA,EAHF,eAGE;QAIQ,CAAA,EAAA,MAAA;EAAI,OAAA,CAAA,EALZ,IAKY;EAGX,OAAA,CAAA,EAPD,IA4BX;EAAA,MAAA,CAAA,EAAA,MAAA;UArB0B,CAAA,EAAA,OAAA;aAAA,CAAA,EAAA,MAAA;UAAA,CAAA,EAAA,CAAA,IAAA,EAHP,IAGO,GAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,UAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAOxB,eAPwB,EAAA,GAON,SAPM;KAuBtB,oBAAA,GAAuB,mBAhBzB,GAiBD,4BAjBC,GAkBD,2BAlBC,GAmBD,gCAnBC,GAoBD,+BApBC,GAqBD,qBArBC;KAuBE,mBAAA,GAvBgB;EAcpB,IAAA,CAAA,EAAA,MAAA;EAEI,OAAA,CAAA,EAAA,MAAA;EAAoB,KAAA,CAAA,EAAA,MAAA;OAAG,CAAA,EAAA,MAAA;OAC1B,CAAA,EAAA,MAAA;aACA,CAAA,EAAA,MAAA;aACA,CAAA,EAAA,MAAA;SACA,CAAA,EAAA,MAAA;;KA2BG,4BAAA,GA1BkB;EAElB,kBAAA,CAAA,EAAA,MAAmB;EAwBnB,qBAAA,CAAA,EAAA,MAAA;EAsBA,cAAA,CAAA,EAAA,MAAA;EAmBA,mBAAA,CAAA,EAAA,MAAA;EAoBA,yBAAA,CAAA,EAAA,MAA+B;AAAA,CAAA;KAvC/B,2BAAA;;;;;;;;KAmBA,gCAAA;;;;;;KAoBA,+BAAA;;;;;;KAmBA,qBAAA"}

package/dist/components/controls/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["icon"],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  calendarControl,\n  calendarDay,\n  calendarHeader,\n  calendarHeaderControlIcon,\n  calendarHeaderLevel,\n  calendarMonth,\n  calendarMonthRow,\n  calendarMonthsList,\n  calendarMonthsListCell,\n  calendarMonthsListControl,\n  calendarMonthsListRow,\n  calendarWeekDay,\n  calendarWeekDaysRow,\n  calendarYearsList,\n  calendarYearsListCell,\n  calendarYearsListControl,\n  calendarYearsListRow,\n  datepickerDropdown,\n  datepickerInput,\n  input,\n  inputDescription,\n  inputError,\n  inputLabel,\n  inputPlaceholder,\n  inputRoot,\n  inputSection,\n  inputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { DatePickerInput, type DatePickerValue } from '@mantine/dates';\n\nexport type DatePickerProps = {\n  name?: string;\n  label?: string;\n  placeholder?: string;\n  description?: string;\n  icon?: React.ReactNode;\n  error?: string;\n  classNames?: DatePickerClassNames;\n  value?: DatePickerValue;\n  locale?: string;\n  maxDate?: Date;\n  minDate?: Date;\n  format?: string;\n  required?: boolean;\n  onChange?: (date: Date | string | null) => void;\n};\n\nexport const DatePicker = ({\n  classNames,\n  label,\n  placeholder,\n  description,\n  icon,\n  ...props\n}: DatePickerProps): ReactNode => {\n  return (\n    <DatePickerInput\n      label={label ?? 'Pick date'}\n      placeholder={placeholder ?? 'Pick date'}\n      description={description ?? 'Select a date'}\n      classNames={datePickerClassNames(classNames)}\n      popoverProps={{\n        classNames: popoverClassNames(classNames),\n      }}\n      rightSection={icon}\n      {...props}\n    />\n  );\n};\n\ntype DatePickerClassNames = InputClassNamesType &\n  CalenderHeaderClassNamesType &\n  CalendarMonthClassNamesType &\n  CalendarMonthsListClassNamesType &\n  CalendarYearsListClassNamesType &\n  PopoverClassNamesType;\n\ntype InputClassNamesType = {\n  root?: string;\n  wrapper?: string;\n  input?: string;\n  label?: string;\n  error?: string;\n  description?: string;\n  placeholder?: string;\n  section?: string;\n};\n\nconst inputClassNames = (classNames?: InputClassNamesType) => {\n  return {\n    root: classNames?.root ?? inputRoot(),\n    wrapper: classNames?.wrapper ?? inputWrapper(),\n    input: classNames?.input ?? cx(input(), datepickerInput()),\n    label: classNames?.label ?? inputLabel(),\n    error: classNames?.error ?? inputError(),\n    description: classNames?.description ?? inputDescription(),\n    placeholder: classNames?.placeholder ?? inputPlaceholder(),\n    section: classNames?.section ?? inputSection({ pointerEvents: 'none' }),\n  };\n};\n\ntype CalenderHeaderClassNamesType = {\n  datepickerDropdown?: string;\n  calendarHeaderControl?: string;\n  calendarHeader?: string;\n  calendarHeaderLevel?: string;\n  calendarHeaderControlIcon?: string;\n};\n\nconst calendarHeaderClassNames = (\n  classNames?: CalenderHeaderClassNamesType,\n) => {\n  return {\n    calendarHeaderControl:\n      classNames?.calendarHeaderControl ?? calendarControl(),\n    calendarHeader: classNames?.calendarHeader ?? calendarHeader(),\n    calendarHeaderLevel:\n      classNames?.calendarHeaderLevel ?? calendarHeaderLevel(),\n    calendarHeaderControlIcon:\n      classNames?.calendarHeaderControlIcon ?? calendarHeaderControlIcon(),\n  };\n};\n\ntype CalendarMonthClassNamesType = {\n  calendarMonth?: string;\n  calendarWeekDaysRow?: string;\n  calendarWeekDay?: string;\n  calendarMonthRow?: string;\n  calendarMonthCell?: string;\n  calendarDay?: string;\n};\n\nconst calendarMonthClassNames = (classNames?: CalendarMonthClassNamesType) => {\n  return {\n    month: classNames?.calendarMonth ?? calendarMonth(),\n    weekdaysRow: classNames?.calendarWeekDaysRow ?? calendarWeekDaysRow(),\n    weekday: classNames?.calendarWeekDay ?? calendarWeekDay(),\n    monthRow: classNames?.calendarMonthRow ?? calendarMonthRow(),\n    day: classNames?.calendarDay ?? calendarDay(),\n  };\n};\n\ntype CalendarMonthsListClassNamesType = {\n  calendarMonthsList?: string;\n  calendarMonthsListRow?: string;\n  calendarMonthsListCell?: string;\n  calendarMonthsListControl?: string;\n};\n\nconst calendarMonthsListClassNames = (\n  classNames?: CalendarMonthsListClassNamesType,\n) => {\n  return {\n    monthsList: classNames?.calendarMonthsList ?? calendarMonthsList(),\n    monthsListRow: classNames?.calendarMonthsListRow ?? calendarMonthsListRow(),\n    monthsListCell:\n      classNames?.calendarMonthsListCell ?? calendarMonthsListCell(),\n    monthsListControl:\n      classNames?.calendarMonthsListControl ?? calendarMonthsListControl(),\n  };\n};\n\ntype CalendarYearsListClassNamesType = {\n  calendarYearsList?: string;\n  calendarYearsListRow?: string;\n  calendarYearsListCell?: string;\n  calendarYearsListControl?: string;\n};\n\nconst calendarYearsListClassNames = (\n  classNames?: CalendarYearsListClassNamesType,\n) => {\n  return {\n    yearsList: classNames?.calendarYearsList ?? calendarYearsList(),\n    yearsListRow: classNames?.calendarYearsListRow ?? calendarYearsListRow(),\n    yearsListCell: classNames?.calendarYearsListCell ?? calendarYearsListCell(),\n    yearsListControl:\n      classNames?.calendarYearsListControl ?? calendarYearsListControl(),\n  };\n};\n\ntype PopoverClassNamesType = {\n  datepickerDropdown?: string;\n};\n\nconst popoverClassNames = (classNames?: PopoverClassNamesType) => {\n  return {\n    dropdown: classNames?.datepickerDropdown ?? datepickerDropdown(),\n  };\n};\n\nconst datePickerClassNames = (classNames?: DatePickerClassNames) => {\n  return {\n    ...inputClassNames(classNames),\n    ...calendarHeaderClassNames(classNames),\n    ...calendarMonthClassNames(classNames),\n    ...calendarMonthsListClassNames(classNames),\n    ...calendarYearsListClassNames(classNames),\n  };\n};\n"],"mappings":"6wBAmDA,MAAa,GAAc,CACzB,aACA,QACA,cACA,cACA,KAAA,EACA,GAAG,KAGD,EAAC,EAAA,CACC,MAAO,GAAS,YAChB,YAAa,GAAe,YAC5B,YAAa,GAAe,gBAC5B,WAAY,EAAqB,EAAW,CAC5C,aAAc,CACZ,WAAY,EAAkB,EAAW,CAC1C,CACD,aAAcA,EACd,GAAI,GACJ,CAsBA,EAAmB,IAChB,CACL,KAAM,GAAY,MAAQ,GAAW,CACrC,QAAS,GAAY,SAAW,GAAc,CAC9C,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAiB,CAAC,CAC1D,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,YAAa,GAAY,aAAe,GAAkB,CAC1D,QAAS,GAAY,SAAW,EAAa,CAAE,cAAe,OAAQ,CAAC,CACxE,EAWG,EACJ,IAEO,CACL,sBACE,GAAY,uBAAyB,GAAiB,CACxD,eAAgB,GAAY,gBAAkB,GAAgB,CAC9D,oBACE,GAAY,qBAAuB,GAAqB,CAC1D,0BACE,GAAY,2BAA6B,GAA2B,CACvE,EAYG,EAA2B,IACxB,CACL,MAAO,GAAY,eAAiB,GAAe,CACnD,YAAa,GAAY,qBAAuB,GAAqB,CACrE,QAAS,GAAY,iBAAmB,GAAiB,CACzD,SAAU,GAAY,kBAAoB,GAAkB,CAC5D,IAAK,GAAY,aAAe,GAAa,CAC9C,EAUG,EACJ,IAEO,CACL,WAAY,GAAY,oBAAsB,GAAoB,CAClE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,eACE,GAAY,wBAA0B,GAAwB,CAChE,kBACE,GAAY,2BAA6B,GAA2B,CACvE,EAUG,EACJ,IAEO,CACL,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,aAAc,GAAY,sBAAwB,GAAsB,CACxE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,iBACE,GAAY,0BAA4B,GAA0B,CACrE,EAOG,EAAqB,IAClB,CACL,SAAU,GAAY,oBAAsB,GAAoB,CACjE,EAGG,EAAwB,IACrB,CACL,GAAG,EAAgB,EAAW,CAC9B,GAAG,EAAyB,EAAW,CACvC,GAAG,EAAwB,EAAW,CACtC,GAAG,EAA6B,EAAW,CAC3C,GAAG,EAA4B,EAAW,CAC3C"}
+{"version":3,"file":"DatePicker.js","names":["icon"],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  calendarControl,\n  calendarDay,\n  calendarHeader,\n  calendarHeaderControlIcon,\n  calendarHeaderLevel,\n  calendarMonth,\n  calendarMonthRow,\n  calendarMonthsList,\n  calendarMonthsListCell,\n  calendarMonthsListControl,\n  calendarMonthsListRow,\n  calendarWeekDay,\n  calendarWeekDaysRow,\n  calendarYearsList,\n  calendarYearsListCell,\n  calendarYearsListControl,\n  calendarYearsListRow,\n  datepickerDropdown,\n  datepickerInput,\n  input,\n  inputDescription,\n  inputError,\n  inputLabel,\n  inputPlaceholder,\n  inputRoot,\n  inputSection,\n  inputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { DatePickerInput, type DatePickerValue } from '@mantine/dates';\n\nexport type DatePickerProps = {\n  name?: string;\n  label?: string;\n  placeholder?: string;\n  description?: string;\n  icon?: React.ReactNode;\n  error?: string;\n  classNames?: DatePickerClassNames;\n  value?: DatePickerValue;\n  locale?: string;\n  maxDate?: Date;\n  minDate?: Date;\n  format?: string;\n  required?: boolean;\n  valueFormat?: string;\n  onChange?: (date: Date | string | null) => void;\n};\n\nexport const DatePicker = ({\n  classNames,\n  label,\n  placeholder,\n  description,\n  icon,\n  ...props\n}: DatePickerProps): ReactNode => {\n  return (\n    <DatePickerInput\n      label={label ?? 'Pick date'}\n      placeholder={placeholder ?? 'Pick date'}\n      description={description ?? 'Select a date'}\n      classNames={datePickerClassNames(classNames)}\n      popoverProps={{\n        classNames: popoverClassNames(classNames),\n      }}\n      rightSection={icon}\n      {...props}\n    />\n  );\n};\n\ntype DatePickerClassNames = InputClassNamesType &\n  CalenderHeaderClassNamesType &\n  CalendarMonthClassNamesType &\n  CalendarMonthsListClassNamesType &\n  CalendarYearsListClassNamesType &\n  PopoverClassNamesType;\n\ntype InputClassNamesType = {\n  root?: string;\n  wrapper?: string;\n  input?: string;\n  label?: string;\n  error?: string;\n  description?: string;\n  placeholder?: string;\n  section?: string;\n};\n\nconst inputClassNames = (classNames?: InputClassNamesType) => {\n  return {\n    root: classNames?.root ?? inputRoot(),\n    wrapper: classNames?.wrapper ?? inputWrapper(),\n    input: classNames?.input ?? cx(input(), datepickerInput()),\n    label: classNames?.label ?? inputLabel(),\n    error: classNames?.error ?? inputError(),\n    description: classNames?.description ?? inputDescription(),\n    placeholder: classNames?.placeholder ?? inputPlaceholder(),\n    section: classNames?.section ?? inputSection({ pointerEvents: 'none' }),\n  };\n};\n\ntype CalenderHeaderClassNamesType = {\n  datepickerDropdown?: string;\n  calendarHeaderControl?: string;\n  calendarHeader?: string;\n  calendarHeaderLevel?: string;\n  calendarHeaderControlIcon?: string;\n};\n\nconst calendarHeaderClassNames = (\n  classNames?: CalenderHeaderClassNamesType,\n) => {\n  return {\n    calendarHeaderControl:\n      classNames?.calendarHeaderControl ?? calendarControl(),\n    calendarHeader: classNames?.calendarHeader ?? calendarHeader(),\n    calendarHeaderLevel:\n      classNames?.calendarHeaderLevel ?? calendarHeaderLevel(),\n    calendarHeaderControlIcon:\n      classNames?.calendarHeaderControlIcon ?? calendarHeaderControlIcon(),\n  };\n};\n\ntype CalendarMonthClassNamesType = {\n  calendarMonth?: string;\n  calendarWeekDaysRow?: string;\n  calendarWeekDay?: string;\n  calendarMonthRow?: string;\n  calendarMonthCell?: string;\n  calendarDay?: string;\n};\n\nconst calendarMonthClassNames = (classNames?: CalendarMonthClassNamesType) => {\n  return {\n    month: classNames?.calendarMonth ?? calendarMonth(),\n    weekdaysRow: classNames?.calendarWeekDaysRow ?? calendarWeekDaysRow(),\n    weekday: classNames?.calendarWeekDay ?? calendarWeekDay(),\n    monthRow: classNames?.calendarMonthRow ?? calendarMonthRow(),\n    day: classNames?.calendarDay ?? calendarDay(),\n  };\n};\n\ntype CalendarMonthsListClassNamesType = {\n  calendarMonthsList?: string;\n  calendarMonthsListRow?: string;\n  calendarMonthsListCell?: string;\n  calendarMonthsListControl?: string;\n};\n\nconst calendarMonthsListClassNames = (\n  classNames?: CalendarMonthsListClassNamesType,\n) => {\n  return {\n    monthsList: classNames?.calendarMonthsList ?? calendarMonthsList(),\n    monthsListRow: classNames?.calendarMonthsListRow ?? calendarMonthsListRow(),\n    monthsListCell:\n      classNames?.calendarMonthsListCell ?? calendarMonthsListCell(),\n    monthsListControl:\n      classNames?.calendarMonthsListControl ?? calendarMonthsListControl(),\n  };\n};\n\ntype CalendarYearsListClassNamesType = {\n  calendarYearsList?: string;\n  calendarYearsListRow?: string;\n  calendarYearsListCell?: string;\n  calendarYearsListControl?: string;\n};\n\nconst calendarYearsListClassNames = (\n  classNames?: CalendarYearsListClassNamesType,\n) => {\n  return {\n    yearsList: classNames?.calendarYearsList ?? calendarYearsList(),\n    yearsListRow: classNames?.calendarYearsListRow ?? calendarYearsListRow(),\n    yearsListCell: classNames?.calendarYearsListCell ?? calendarYearsListCell(),\n    yearsListControl:\n      classNames?.calendarYearsListControl ?? calendarYearsListControl(),\n  };\n};\n\ntype PopoverClassNamesType = {\n  datepickerDropdown?: string;\n};\n\nconst popoverClassNames = (classNames?: PopoverClassNamesType) => {\n  return {\n    dropdown: classNames?.datepickerDropdown ?? datepickerDropdown(),\n  };\n};\n\nconst datePickerClassNames = (classNames?: DatePickerClassNames) => {\n  return {\n    ...inputClassNames(classNames),\n    ...calendarHeaderClassNames(classNames),\n    ...calendarMonthClassNames(classNames),\n    ...calendarMonthsListClassNames(classNames),\n    ...calendarYearsListClassNames(classNames),\n  };\n};\n"],"mappings":"6wBAoDA,MAAa,GAAc,CACzB,aACA,QACA,cACA,cACA,KAAA,EACA,GAAG,KAGD,EAAC,EAAA,CACC,MAAO,GAAS,YAChB,YAAa,GAAe,YAC5B,YAAa,GAAe,gBAC5B,WAAY,EAAqB,EAAW,CAC5C,aAAc,CACZ,WAAY,EAAkB,EAAW,CAC1C,CACD,aAAcA,EACd,GAAI,GACJ,CAsBA,EAAmB,IAChB,CACL,KAAM,GAAY,MAAQ,GAAW,CACrC,QAAS,GAAY,SAAW,GAAc,CAC9C,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAiB,CAAC,CAC1D,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,YAAa,GAAY,aAAe,GAAkB,CAC1D,QAAS,GAAY,SAAW,EAAa,CAAE,cAAe,OAAQ,CAAC,CACxE,EAWG,EACJ,IAEO,CACL,sBACE,GAAY,uBAAyB,GAAiB,CACxD,eAAgB,GAAY,gBAAkB,GAAgB,CAC9D,oBACE,GAAY,qBAAuB,GAAqB,CAC1D,0BACE,GAAY,2BAA6B,GAA2B,CACvE,EAYG,EAA2B,IACxB,CACL,MAAO,GAAY,eAAiB,GAAe,CACnD,YAAa,GAAY,qBAAuB,GAAqB,CACrE,QAAS,GAAY,iBAAmB,GAAiB,CACzD,SAAU,GAAY,kBAAoB,GAAkB,CAC5D,IAAK,GAAY,aAAe,GAAa,CAC9C,EAUG,EACJ,IAEO,CACL,WAAY,GAAY,oBAAsB,GAAoB,CAClE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,eACE,GAAY,wBAA0B,GAAwB,CAChE,kBACE,GAAY,2BAA6B,GAA2B,CACvE,EAUG,EACJ,IAEO,CACL,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,aAAc,GAAY,sBAAwB,GAAsB,CACxE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,iBACE,GAAY,0BAA4B,GAA0B,CACrE,EAOG,EAAqB,IAClB,CACL,SAAU,GAAY,oBAAsB,GAAoB,CACjE,EAGG,EAAwB,IACrB,CACL,GAAG,EAAgB,EAAW,CAC9B,GAAG,EAAyB,EAAW,CACvC,GAAG,EAAwB,EAAW,CACtC,GAAG,EAA6B,EAAW,CAC3C,GAAG,EAA4B,EAAW,CAC3C"}

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

@@ -4,7 +4,7 @@ import * as react_jsx_runtime8 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/controls/dropdown/Combobox.d.ts
-type ComboboxProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' | 'target'> & InputTextProps & {
+type ComboboxProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' | 'target'> & Omit<InputTextProps, 'isClearable' | 'clearableIcon'> & {
   setSelectedOption: (option: {
     id: string | number;
     value: string;
@@ -22,6 +22,8 @@ type ComboboxProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery'
   create?: string;
   empty?: string;
   endSlot?: React.ReactNode;
+  isClearable?: boolean;
+  clearableIcon?: string;
 };
 declare const Combobox: ({
   defaultOpened,
@@ -33,6 +35,8 @@ declare const Combobox: ({
   classNames,
   create,
   empty,
+  isClearable,
+  clearableIcon,
   ...props
 }: ComboboxProps) => react_jsx_runtime8.JSX.Element;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":[],"mappings":";;;;;;KAgBY,aAAA,GAAgB,KAC1B,qEAGA;;;IAJU,KAAA,EAAA,MAAa;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAI1B,KAAA,EAAA,MAAA;KAaY;EAAe,SAAA,CAAA,EAAA,OAAA;EAGhB,UAAA,CAqFZ,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;IArFwB,KAAA,CAAA,EAAA,MAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;QAAA,CAAA,EAAA,MAAA;OAAA,CAAA,EAAA,MAAA;SAAA,CAAA,EAHX,KAAA,CAAM,SAGK;;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAWtB,aAXsB,EAAA,GAWT,kBAAA,CAAA,GAAA,CAAA,OAXS"}
+{"version":3,"file":"Combobox.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":[],"mappings":";;;;;;KAiBY,aAAA,GAAgB,KAC1B,qEAGA,KAAK;;;IAJK,KAAA,EAAA,MAAa;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAIrB,KAAA,EAAA,MAAA;KAAL;WAakB,CAAA,EAAA,OAAA;EAAS,UAAA,CAAA,EAAA;IAKhB,MAAA,CA8FZ,EAAA,MAAA;IAAA,KAAA,CAAA,EAAA,MAAA;IA9FwB,MAAA,CAAA,EAAA,MAAA;;QAAA,CAAA,EAAA,MAAA;OAAA,CAAA,EAAA,MAAA;SAAA,CAAA,EALX,KAAA,CAAM,SAKK;aAAA,CAAA,EAAA,OAAA;eAAA,CAAA,EAAA,MAAA;;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,WAAA;EAAA,aAAA;EAAA,GAAA;AAAA,CAAA,EAatB,aAbsB,EAAA,GAaT,kBAAA,CAAA,GAAA,CAAA,OAbS"}

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

@@ -1,2 +1,2 @@
-import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{DropdownBase as t}from"./DropdownBase.js";import{InputText as n}from"../input-text/InputText.js";import{comboboxEmpty as r,comboboxOption as i,icon as a,inputSection as o,selectSection as s}from"@mage-ui/styled-system/recipes";import{jsx as c,jsxs 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,creatable:p,setSelectedOption:m,selectedOption:h,endSlot:g,options:_,classNames:v,create:y,empty:b,...x})=>{let[S,C]=u(h?.value??``),w=(_.every(e=>e.value!==S)?_.filter(e=>e.value.toLowerCase().includes(S.toLowerCase().trim())):_).map(e=>c(t.Option,{value:e.value,active:h?.id===e.id,classNames:{option:v?.option??i()},children:e.value},e.id)),T=()=>p&&S?l(t.Option,{value:S,classNames:{option:v?.create??i({type:`create`})},children:[c(e,{name:`plus`,classNames:a({size:`m`})}),`${y??`Create`} '${S}'`]},S):c(t.Empty,{classNames:{empty:v?.empty??r()},children:b??`Nothing found`}),E=e=>{let t=_.find(t=>t.value===e);!t&&p&&e&&(t={id:`new`,value:e}),m(t)};return c(t,{readOnly:!1,target:c(n,{value:S,classNames:{section:v?.section??d(o(),s())},...x}),selectedOption:h,setQuery:C,setSelectedOption:e=>E(e),endSlot:g,width:`target`,children:w.length>0?w:c(T,{})})};export{f as Combobox};
+import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{DropdownBase as t}from"./DropdownBase.js";import{InputText as n}from"../input-text/InputText.js";import{clearSection as r,comboboxEmpty as i,comboboxOption as a,icon as o,inputSection as s,selectSection as c}from"@mage-ui/styled-system/recipes";import{jsx as l,jsxs 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,creatable:m,setSelectedOption:h,selectedOption:g,endSlot:_,options:v,classNames:y,create:b,empty:x,isClearable:S,clearableIcon:C,...w})=>{let[T,E]=d(g?.value??``),D=(v.every(e=>e.value!==T)?v.filter(e=>e.value.toLowerCase().includes(T.toLowerCase().trim())):v).map(e=>l(t.Option,{value:e.value,active:g?.id===e.id,classNames:{option:y?.option??a()},children:e.value},e.id)),O=()=>m&&T?u(t.Option,{value:T,classNames:{option:y?.create??a({type:`create`})},children:[l(e,{name:`plus`,classNames:o({size:`m`})}),`${b??`Create`} '${T}'`]},T):l(t.Empty,{classNames:{empty:y?.empty??i()},children:x??`Nothing found`}),k=e=>{let t=v.find(t=>t.value===e);!t&&m&&e&&(t={id:`new`,value:e}),h(t)};return l(t,{readOnly:!1,target:l(n,{value:T,classNames:{section:y?.section??f(s(),S&&T?r():c())},...w}),selectedOption:g,setQuery:E,setSelectedOption:e=>k(e),endSlot:_,width:`target`,isClearable:S,clearableIcon:C,children:D.length>0?D:l(O,{})})};export{p as Combobox};
 //# sourceMappingURL=Combobox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  comboboxEmpty,\n  comboboxOption,\n  icon,\n  inputSection,\n  selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\nimport { Icon } from '@/components/data-display';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type ComboboxProps = 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    creatable?: boolean;\n    classNames?: {\n      option?: string;\n      empty?: string;\n      create?: string;\n    };\n    create?: string;\n    empty?: string;\n    endSlot?: React.ReactNode;\n  };\n\nexport const Combobox = ({\n  defaultOpened = false,\n  creatable,\n  setSelectedOption,\n  selectedOption,\n  endSlot,\n  options,\n  classNames,\n  create,\n  empty,\n  ...props\n}: ComboboxProps) => {\n  const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n  const shouldFilterOptions = options.every((item) => item.value !== query);\n  const filteredOptions = shouldFilterOptions\n    ? options.filter((item) =>\n        item.value.toLowerCase().includes(query.toLowerCase().trim()),\n      )\n    : options;\n\n  const dropdownOptions = filteredOptions.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 MissingOption = () => {\n    if (creatable && query) {\n      return (\n        <DropdownBase.Option\n          value={query}\n          key={query}\n          classNames={{\n            option: classNames?.create ?? comboboxOption({ type: 'create' }),\n          }}\n        >\n          <Icon name='plus' classNames={icon({ size: 'm' })} />\n          {`${create ?? 'Create'} '${query}'`}\n        </DropdownBase.Option>\n      );\n    }\n    return (\n      <DropdownBase.Empty\n        classNames={{ empty: classNames?.empty ?? comboboxEmpty() }}\n      >\n        {empty ?? 'Nothing found'}\n      </DropdownBase.Empty>\n    );\n  };\n\n  const onChange = (value: string | undefined) => {\n    let selected = options.find((item) => item.value === value);\n    if (!selected && creatable && value) {\n      selected = { id: 'new', value };\n    }\n    setSelectedOption(selected);\n  };\n\n  return (\n    <DropdownBase\n      readOnly={false}\n      target={\n        <InputText\n          value={query}\n          classNames={{\n            section: classNames?.section ?? cx(inputSection(), selectSection()),\n          }}\n          {...props}\n        />\n      }\n      selectedOption={selectedOption}\n      setQuery={setQuery}\n      setSelectedOption={(option) => onChange(option)}\n      endSlot={endSlot}\n      width='target'\n    >\n      {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n    </DropdownBase>\n  );\n};\n"],"mappings":"0aAoCA,MAAa,GAAY,CACvB,gBAAgB,GAChB,YACA,oBACA,iBACA,UACA,UACA,aACA,SACA,QACA,GAAG,KACgB,CACnB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CASzD,GAPsB,EAAQ,MAAO,GAAS,EAAK,QAAU,EAAM,CAErE,EAAQ,OAAQ,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,GAEoC,IAAK,GAC3C,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,MACA,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,SAAU,CAAC,CACjE,WAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,IAAK,CAAC,EAAI,CACpD,GAAG,GAAU,SAAS,IAAI,EAAM,GAAA,EAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,CAAE,UAE1D,GAAS,iBACS,CAInB,EAAY,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CACvD,CAAC,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,QAAO,EAEjC,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,CACpE,CACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CACtC,UACT,MAAM,kBAEL,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,EAAA,CAAgB,EACpD"}
+{"version":3,"file":"Combobox.js","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  clearSection,\n  comboboxEmpty,\n  comboboxOption,\n  icon,\n  inputSection,\n  selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\nimport { Icon } from '@/components/data-display';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type ComboboxProps = Omit<\n  DropdownBaseProps,\n  'children' | 'onClick' | 'setQuery' | 'target'\n> &\n  Omit<InputTextProps, 'isClearable' | 'clearableIcon'> & {\n    setSelectedOption: (\n      option: { id: string | number; value: string } | undefined,\n    ) => void;\n    options: { id: string | number; value: string }[];\n    creatable?: boolean;\n    classNames?: {\n      option?: string;\n      empty?: string;\n      create?: string;\n    };\n    create?: string;\n    empty?: string;\n    endSlot?: React.ReactNode;\n    isClearable?: boolean;\n    clearableIcon?: string;\n  };\n\nexport const Combobox = ({\n  defaultOpened = false,\n  creatable,\n  setSelectedOption,\n  selectedOption,\n  endSlot,\n  options,\n  classNames,\n  create,\n  empty,\n  isClearable,\n  clearableIcon,\n  ...props\n}: ComboboxProps) => {\n  const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n  const shouldFilterOptions = options.every((item) => item.value !== query);\n  const filteredOptions = shouldFilterOptions\n    ? options.filter((item) =>\n        item.value.toLowerCase().includes(query.toLowerCase().trim()),\n      )\n    : options;\n\n  const dropdownOptions = filteredOptions.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 MissingOption = () => {\n    if (creatable && query) {\n      return (\n        <DropdownBase.Option\n          value={query}\n          key={query}\n          classNames={{\n            option: classNames?.create ?? comboboxOption({ type: 'create' }),\n          }}\n        >\n          <Icon name='plus' classNames={icon({ size: 'm' })} />\n          {`${create ?? 'Create'} '${query}'`}\n        </DropdownBase.Option>\n      );\n    }\n    return (\n      <DropdownBase.Empty\n        classNames={{ empty: classNames?.empty ?? comboboxEmpty() }}\n      >\n        {empty ?? 'Nothing found'}\n      </DropdownBase.Empty>\n    );\n  };\n\n  const onChange = (value: string | undefined) => {\n    let selected = options.find((item) => item.value === value);\n    if (!selected && creatable && value) {\n      selected = { id: 'new', value };\n    }\n    setSelectedOption(selected);\n  };\n\n  return (\n    <DropdownBase\n      readOnly={false}\n      target={\n        <InputText\n          value={query}\n          classNames={{\n            section:\n              classNames?.section ??\n              cx(\n                inputSection(),\n                isClearable && query ? clearSection() : selectSection(),\n              ),\n          }}\n          {...props}\n        />\n      }\n      selectedOption={selectedOption}\n      setQuery={setQuery}\n      setSelectedOption={(option) => onChange(option)}\n      endSlot={endSlot}\n      width='target'\n      isClearable={isClearable}\n      clearableIcon={clearableIcon}\n    >\n      {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n    </DropdownBase>\n  );\n};\n"],"mappings":"4bAuCA,MAAa,GAAY,CACvB,gBAAgB,GAChB,YACA,oBACA,iBACA,UACA,UACA,aACA,SACA,QACA,cACA,gBACA,GAAG,KACgB,CACnB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CASzD,GAPsB,EAAQ,MAAO,GAAS,EAAK,QAAU,EAAM,CAErE,EAAQ,OAAQ,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,GAEoC,IAAK,GAC3C,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,MACA,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,SAAU,CAAC,CACjE,WAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,IAAK,CAAC,EAAI,CACpD,GAAG,GAAU,SAAS,IAAI,EAAM,GAAA,EAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,CAAE,UAE1D,GAAS,iBACS,CAInB,EAAY,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CACvD,CAAC,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,QAAO,EAEjC,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QACE,GAAY,SACZ,EACE,GAAc,CACd,GAAe,EAAQ,GAAc,CAAG,GAAe,CACxD,CACJ,CACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CACtC,UACT,MAAM,SACO,cACE,yBAEd,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,EAAA,CAAgB,EACpD"}

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

@@ -3,7 +3,7 @@ import { InputTextProps } from "../input-text/InputText.js";
 import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/components/controls/dropdown/Select.d.ts
-type SelectProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' | 'target'> & InputTextProps & {
+type SelectProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' | 'target'> & Omit<InputTextProps, 'isClearable' | 'clearableIcon'> & {
   setSelectedOption: (option: {
     id: string | number;
     value: string;

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":";;;;;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;EAYH,WA4DZ,CAAA,EAAA,OAAA;EAAA,aAAA,CAAA,EAAA,MAAA;YA5DsB,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;;AAAA,cAAV,MAAU,EAAA,CAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,WAAA;EAAA,aAAA;EAAA,GAAA;AAAA,CAAA,EASpB,WAToB,EAAA,GAST,mBAAA,CAAA,GAAA,CAAA,OATS"}
+{"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAiBY,WAAA,GAAc,KACxB,qEAGA,KAAK;;;IAJK,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAInB,KAAA,EAAA,MAAA;KAAL;EAAI,WAAA,CAAA,EAAA,OAAA;EAYO,aA4DZ,CAAA,EAAA,MAAA;EAAA,UAAA,CAAA,EAAA;IA5DsB,MAAA,CAAA,EAAA,MAAA;;;AAAA,cAAV,MAAU,EAAA,CAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,WAAA;EAAA,aAAA;EAAA,GAAA;AAAA,CAAA,EASpB,WAToB,EAAA,GAST,mBAAA,CAAA,GAAA,CAAA,OATS"}

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  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    clearableIcon?: string;\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  clearableIcon,\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      clearableIcon={clearableIcon}\n      {...props}\n    >\n      {dropdownOptions}\n    </DropdownBase>\n  );\n};\n"],"mappings":"oZAiCA,MAAa,GAAU,CACrB,gBAAgB,GAChB,oBACA,iBACA,UACA,aACA,cACA,gBACA,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,cACE,gBACf,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  Omit<InputTextProps, 'isClearable' | 'clearableIcon'> & {\n    setSelectedOption: (\n      option: { id: string | number; value: string } | undefined,\n    ) => void;\n    options: { id: string | number; value: string }[];\n    isClearable?: boolean;\n    clearableIcon?: string;\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  clearableIcon,\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      clearableIcon={clearableIcon}\n      {...props}\n    >\n      {dropdownOptions}\n    </DropdownBase>\n  );\n};\n"],"mappings":"oZAiCA,MAAa,GAAU,CACrB,gBAAgB,GAChB,oBACA,iBACA,UACA,aACA,cACA,gBACA,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,cACE,gBACf,GAAI,WAEH,GACY"}

package/dist/components/navigation/breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/navigation/breadcrumbs/Breadcrumbs.d.ts
@@ -17,7 +17,7 @@ declare const Breadcrumbs: {
     separator,
     children,
     classNames
-  }: BreadcrumbsProps): react_jsx_runtime5.JSX.Element;
+  }: BreadcrumbsProps): react_jsx_runtime4.JSX.Element;
   Item: {
     ({
       children

package/dist/panda.json

@@ -150,12 +150,12 @@
       ],
       "comboboxEmpty": [],
       "dropdown": [],
+      "clearSection": [],
       "selectSection": [],
       "comboboxClear": [],
       "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.87",
+  "version": "0.0.89",
   "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.87",
-    "@mage-ui/styled-system": "0.0.87"
+    "@mage-ui/preset": "0.0.89",
+    "@mage-ui/styled-system": "0.0.89"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.2",