@mage-ui/components 0.0.23 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/dist/components/buttons/button/Button.d.ts +2 -2
  2. package/dist/components/buttons/button-icon/ButtonIcon.d.ts +2 -2
  3. package/dist/components/buttons/button-icon/ButtonIcon.d.ts.map +1 -1
  4. package/dist/components/controls/checkbox/CheckboxGroup.js.map +1 -1
  5. package/dist/components/controls/date-picker/DatePicker.d.ts +2 -0
  6. package/dist/components/controls/date-picker/DatePicker.d.ts.map +1 -1
  7. package/dist/components/controls/date-picker/DatePicker.js +1 -1
  8. package/dist/components/controls/date-picker/DatePicker.js.map +1 -1
  9. package/dist/components/controls/dropdown/Combobox.d.ts +5 -2
  10. package/dist/components/controls/dropdown/Combobox.d.ts.map +1 -1
  11. package/dist/components/controls/dropdown/Combobox.js +1 -1
  12. package/dist/components/controls/dropdown/Combobox.js.map +1 -1
  13. package/dist/components/controls/dropdown/DropdownBase.d.ts +1 -0
  14. package/dist/components/controls/dropdown/DropdownBase.d.ts.map +1 -1
  15. package/dist/components/controls/dropdown/DropdownBase.js +1 -1
  16. package/dist/components/controls/dropdown/DropdownBase.js.map +1 -1
  17. package/dist/components/controls/dropdown/DropdownButton.d.ts +8 -5
  18. package/dist/components/controls/dropdown/DropdownButton.d.ts.map +1 -1
  19. package/dist/components/controls/dropdown/DropdownButton.js +1 -1
  20. package/dist/components/controls/dropdown/DropdownButton.js.map +1 -1
  21. package/dist/components/controls/dropdown/Select.d.ts +2 -2
  22. package/dist/components/controls/dropdown/Select.d.ts.map +1 -1
  23. package/dist/components/controls/dropdown/Select.js +1 -1
  24. package/dist/components/controls/dropdown/Select.js.map +1 -1
  25. package/dist/components/controls/input-file/InputFile.d.ts +2 -2
  26. package/dist/components/controls/input-password/InputPassword.d.ts +2 -2
  27. package/dist/components/controls/input-text/InputText.d.ts +2 -2
  28. package/dist/components/controls/multi-switch/MultiSwitch.d.ts +34 -0
  29. package/dist/components/controls/multi-switch/MultiSwitch.d.ts.map +1 -0
  30. package/dist/components/controls/multi-switch/MultiSwitch.js +2 -0
  31. package/dist/components/controls/multi-switch/MultiSwitch.js.map +1 -0
  32. package/dist/components/controls/radio/Radio.d.ts +5 -3
  33. package/dist/components/controls/radio/Radio.d.ts.map +1 -1
  34. package/dist/components/controls/radio/Radio.js.map +1 -1
  35. package/dist/components/controls/radio/RadioGroup.d.ts +4 -3
  36. package/dist/components/controls/radio/RadioGroup.d.ts.map +1 -1
  37. package/dist/components/controls/radio/RadioGroup.js.map +1 -1
  38. package/dist/components/controls/radio/RadioIcon.d.ts +36 -0
  39. package/dist/components/controls/radio/RadioIcon.d.ts.map +1 -0
  40. package/dist/components/controls/radio/RadioIcon.js +2 -0
  41. package/dist/components/controls/radio/RadioIcon.js.map +1 -0
  42. package/dist/components/controls/textarea/Textarea.d.ts +2 -2
  43. package/dist/components/controls/textarea/Textarea.d.ts.map +1 -1
  44. package/dist/components/data-display/avatar/Avatar.d.ts +2 -2
  45. package/dist/components/data-display/badge/Badge.d.ts +2 -2
  46. package/dist/components/data-display/carousel/Carousel.d.ts +2 -2
  47. package/dist/components/data-display/tables/table/Table.d.ts +8 -8
  48. package/dist/components/forms/form/Form.d.ts +27 -15
  49. package/dist/components/forms/form/Form.d.ts.map +1 -1
  50. package/dist/components/forms/form/Form.js +1 -1
  51. package/dist/components/forms/form/Form.js.map +1 -1
  52. package/dist/components/forms/form/controls/FormIfField.d.ts +15 -0
  53. package/dist/components/forms/form/controls/FormIfField.d.ts.map +1 -0
  54. package/dist/components/forms/form/controls/FormIfField.js +2 -0
  55. package/dist/components/forms/form/controls/FormIfField.js.map +1 -0
  56. package/dist/components/misc/visually-hidden/VisuallyHidden.d.ts +2 -2
  57. package/dist/components/misc/visually-hidden/VisuallyHidden.d.ts.map +1 -1
  58. package/dist/components/navigation/breadcrumbs/Breadcrumbs.d.ts +2 -2
  59. package/dist/components/navigation/tabs/Tabs.d.ts +5 -5
  60. package/dist/components/navigation/tabs/Tabs.d.ts.map +1 -1
  61. package/dist/index.d.ts +3 -1
  62. package/dist/index.js +1 -1
  63. package/dist/panda.json +19 -4
  64. package/package.json +3 -3
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime13 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime48 from "react/jsx-runtime";
2
2
  import { ComponentProps, ReactNode } from "react";
3
3
 
4
4
  //#region src/components/buttons/button/Button.d.ts
@@ -18,7 +18,7 @@ declare const Button: ({
18
18
  endSlot,
19
19
  children,
20
20
  ...props
21
- }: ButtonProps) => react_jsx_runtime13.JSX.Element;
21
+ }: ButtonProps) => react_jsx_runtime48.JSX.Element;
22
22
  //# sourceMappingURL=Button.d.ts.map
23
23
 
24
24
  //#endregion
@@ -1,5 +1,5 @@
1
1
  import { ButtonProps } from "../button/Button.js";
2
- import * as react_jsx_runtime2 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime40 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/components/buttons/button-icon/ButtonIcon.d.ts
5
5
  type ButtonIconProps = ButtonProps & {
@@ -15,7 +15,7 @@ declare const ButtonIcon: ({
15
15
  icon,
16
16
  classNames,
17
17
  ...props
18
- }: ButtonIconProps) => react_jsx_runtime2.JSX.Element;
18
+ }: ButtonIconProps) => react_jsx_runtime40.JSX.Element;
19
19
  //# sourceMappingURL=ButtonIcon.d.ts.map
20
20
 
21
21
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonIcon.d.ts","names":[],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"sourcesContent":[],"mappings":";;;;KAMY,eAAA,GAAkB;;;EAAlB,UAAA,CAAA,EAAA;IASC,IAAA,CAAA,EAAA,MAkBZ;IAAA,IAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CAlB0B;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,KAAA;EAAA,IAAA;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAKxB,eALwB,EAAA,GAKT,kBAAA,CAAA,GAAA,CAAA,OALS"}
1
+ {"version":3,"file":"ButtonIcon.d.ts","names":[],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"sourcesContent":[],"mappings":";;;;KAMY,eAAA,GAAkB;;;EAAlB,UAAA,CAAA,EAAA;IASC,IAAA,CAAA,EAAA,MAkBZ;IAAA,IAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CAlB0B;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,KAAA;EAAA,IAAA;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAKxB,eALwB,EAAA,GAKT,mBAAA,CAAA,GAAA,CAAA,OALS"}
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroup.js","names":["MantineCheckbox","MantineGroup"],"sources":["../../../../src/components/controls/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n radioDescription,\n radioError,\n radioGroupRoot,\n radioLabel,\n radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n Checkbox as MantineCheckbox,\n Group as MantineGroup,\n} from '@mantine/core';\n\nexport type CheckboxGroupProps = {\n label?: string;\n error?: string;\n description?: string;\n children?: ReactNode;\n value?: string[];\n onChange?: (value: string[]) => void;\n classNames?: {\n root?: string;\n radio?: string;\n icon?: string;\n inner?: string;\n body?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n groupRoot?: string;\n };\n};\n\nexport const CheckboxGroup = ({\n classNames,\n children,\n ...props\n}: CheckboxGroupProps): ReactNode => {\n return (\n <MantineCheckbox.Group\n classNames={{\n root: classNames?.root ?? radioRoot(),\n label: classNames?.label ?? radioLabel(),\n description: classNames?.description ?? radioDescription(),\n error: classNames?.error ?? radioError(),\n }}\n {...props}\n >\n <MantineGroup\n classNames={{\n root: classNames?.groupRoot ?? radioGroupRoot(),\n }}\n >\n {children}\n </MantineGroup>\n </MantineCheckbox.Group>\n );\n};\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n"],"mappings":"iOAmCA,MAAa,EAAgB,CAAC,CAC5B,aACA,WACA,GAAG,EACgB,GAEjB,EAACA,EAAgB,MAAA,CACf,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,WAEJ,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,WAAa,GAAgB,AAChD,EAEA,YACY,EACO,CAI5B,EAAc,YAAc"}
1
+ {"version":3,"file":"CheckboxGroup.js","names":["MantineCheckbox","MantineGroup"],"sources":["../../../../src/components/controls/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n radioDescription,\n radioError,\n radioGroupRoot,\n radioLabel,\n radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n Checkbox as MantineCheckbox,\n Group as MantineGroup,\n} from '@mantine/core';\n\nexport type CheckboxGroupProps = {\n label?: ReactNode;\n error?: ReactNode;\n description?: ReactNode;\n children?: ReactNode;\n value?: string[];\n onChange?: (value: string[]) => void;\n classNames?: {\n root?: string;\n radio?: string;\n icon?: string;\n inner?: string;\n body?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n groupRoot?: string;\n };\n};\n\nexport const CheckboxGroup = ({\n classNames,\n children,\n ...props\n}: CheckboxGroupProps): ReactNode => {\n return (\n <MantineCheckbox.Group\n classNames={{\n root: classNames?.root ?? radioRoot(),\n label: classNames?.label ?? radioLabel(),\n description: classNames?.description ?? radioDescription(),\n error: classNames?.error ?? radioError(),\n }}\n {...props}\n >\n <MantineGroup\n classNames={{\n root: classNames?.groupRoot ?? radioGroupRoot(),\n }}\n >\n {children}\n </MantineGroup>\n </MantineCheckbox.Group>\n );\n};\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n"],"mappings":"iOAmCA,MAAa,EAAgB,CAAC,CAC5B,aACA,WACA,GAAG,EACgB,GAEjB,EAACA,EAAgB,MAAA,CACf,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,WAEJ,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,WAAa,GAAgB,AAChD,EAEA,YACY,EACO,CAI5B,EAAc,YAAc"}
@@ -7,6 +7,7 @@ type DatePickerProps = {
7
7
  label?: string;
8
8
  placeholder?: string;
9
9
  description?: string;
10
+ icon?: React.ReactNode;
10
11
  error?: string;
11
12
  classNames?: DatePickerClassNames;
12
13
  value?: DatePickerValue;
@@ -17,6 +18,7 @@ declare const DatePicker: ({
17
18
  label,
18
19
  placeholder,
19
20
  description,
21
+ icon,
20
22
  ...props
21
23
  }: DatePickerProps) => ReactNode;
22
24
  type DatePickerClassNames = InputClassNamesType & CalenderHeaderClassNamesType & CalendarMonthClassNamesType & CalendarMonthsListClassNamesType & CalendarYearsListClassNamesType & PopoverClassNamesType;
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.d.ts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":[],"mappings":";;;;KAoCY,eAAA;;EAAA,KAAA,CAAA,EAAA,MAAA;EAAe,WAAA,CAAA,EAAA,MAAA;EAAA,WAMZ,CAAA,EAAA,MAAA;EAAoB,KACzB,CAAA,EAAA,MAAA;EAAe,UACL,CAAA,EAFL,oBAEK;EAAI,KAAA,CAAA,EADd,eACc;EAGX,QAAA,CAAA,EAAA,CAAA,IAoBZ,EAvBmB,IAuBnB,GAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;CAAA;AApB0B,cAAd,UAAc,EAAA,CAAA;EAAA,UAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EAMxB,eANwB,EAAA,GAMN,SANM;KAsBtB,oBAAA,GAAuB,mBAtBD,GAuBzB,4BAvByB,GAwBzB,2BAxByB,GAyBzB,gCAzByB,GA0BzB,+BA1ByB,GA2BzB,qBA3ByB;KA6BtB,mBAAA,GA7BsB;EAAA,IAAA,CAAA,EAAA,MAAA;EAAA,OAMxB,CAAA,EAAA,MAAA;EAAe,KAAG,CAAA,EAAA,MAAA;EAcpB,KAAA,CAAA,EAAA,MAAA;EAEI,KAAA,CAAA,EAAA,MAAA;EAAoB,WAAA,CAAA,EAAA,MAAA;EAAA,WAAG,CAAA,EAAA,MAAA;EAAmB,OAC7C,CAAA,EAAA,MAAA;CAA4B;KA8BzB,4BAAA,GA5BH;EAAgC,kBAChC,CAAA,EAAA,MAAA;EAA+B,qBAC/B,CAAA,EAAA,MAAA;EAAqB,cAAA,CAAA,EAAA,MAAA;EAElB,mBAAA,CAAA,EAAmB,MAAA;EAwBnB,yBAAA,CAAA,EAAA,MAA4B;AAAA,CAAA;AAsBD,KAA3B,2BAAA,GAmBA;EAoBA,aAAA,CAAA,EAAA,MAAA;EAmBA,mBAAA,CAAA,EAAA,MAAqB;;;;;;KAvCrB,gCAAA;;;;;;KAoBA,+BAAA;;;;;;KAmBA,qBAAA"}
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;EAAA,WAKZ,CAAA,EAAA,MAAA;EAAS,IAET,CAAA,EAFN,KAAA,CAAM,SAEA;EAAoB,KACzB,CAAA,EAAA,MAAA;EAAe,UACL,CAAA,EAFL,oBAEK;EAAI,KAAA,CAAA,EADd,eACc;EAGX,QAAA,CAAA,EAAA,CAAA,IAqBZ,EAxBmB,IAwBnB,GAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;CAAA;AArB0B,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,GA9BsB;EAAA,IAAA,CAAA,EAAA,MAAA;EAAA,OAAA,CAAA,EAAA,MAAA;EAAA,KAOxB,CAAA,EAAA,MAAA;EAAe,KAAG,CAAA,EAAA,MAAA;EAcpB,KAAA,CAAA,EAAA,MAAA;EAEI,WAAA,CAAA,EAAA,MAAA;EAAoB,WAAA,CAAA,EAAA,MAAA;EAAA,OAAG,CAAA,EAAA,MAAA;CAAmB;KA+B1C,4BAAA,GA7BH;EAA2B,kBAC3B,CAAA,EAAA,MAAA;EAAgC,qBAChC,CAAA,EAAA,MAAA;EAA+B,cAC/B,CAAA,EAAA,MAAA;EAAqB,mBAAA,CAAA,EAAA,MAAA;EAElB,yBAAmB,CAAA,EAAA,MAAA;AAAA,CAAA;AAwBS,KAsB5B,2BAAA,GAA2B;EAmB3B,aAAA,CAAA,EAAA,MAAA;EAoBA,mBAAA,CAAA,EAAA,MAAA;EAmBA,eAAA,CAAA,EAAA,MAAqB;;;;;KAvCrB,gCAAA;;;;;;KAoBA,+BAAA;;;;;;KAmBA,qBAAA"}
@@ -1,2 +1,2 @@
1
- import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{calendarControl as t,calendarDay as n,calendarHeader as r,calendarHeaderControlIcon as i,calendarHeaderLevel as a,calendarMonth as o,calendarMonthRow as s,calendarMonthsList as c,calendarMonthsListCell as l,calendarMonthsListControl as u,calendarMonthsListRow as d,calendarWeekDay as f,calendarWeekDaysRow as p,calendarYearsList as m,calendarYearsListCell as h,calendarYearsListControl as g,calendarYearsListRow as _,datepickerDropdown as v,datepickerInput as y,icon as b,input as x,inputDescription as S,inputError as C,inputLabel as w,inputPlaceholder as T,inputRoot as E,inputSection as D,inputWrapper as O}from"@mage-ui/styled-system/recipes";import{jsx as k}from"react/jsx-runtime";import{cx as A}from"@mage-ui/styled-system/css";import{DatePickerInput as j}from"@mantine/dates";const M=({classNames:t,label:n,placeholder:r,description:i,...a})=>k(j,{label:n??`Pick date`,placeholder:r??`Pick date`,description:i??`Select a date`,classNames:z(t),popoverProps:{classNames:R(t)},rightSection:k(e,{name:`calendar`,classNames:b({size:`m`})}),...a}),N=e=>({root:e?.root??E(),wrapper:e?.wrapper??O(),input:e?.input??A(x(),y()),label:e?.label??w(),error:e?.error??C(),description:e?.description??S(),placeholder:e?.placeholder??T(),section:e?.section??D({pointerEvents:`none`})}),P=e=>({calendarHeaderControl:e?.calendarHeaderControl??t(),calendarHeader:e?.calendarHeader??r(),calendarHeaderLevel:e?.calendarHeaderLevel??a(),calendarHeaderControlIcon:e?.calendarHeaderControlIcon??i()}),F=e=>({month:e?.calendarMonth??o(),weekdaysRow:e?.calendarWeekDaysRow??p(),weekday:e?.calendarWeekDay??f(),monthRow:e?.calendarMonthRow??s(),day:e?.calendarDay??n()}),I=e=>({monthsList:e?.calendarMonthsList??c(),monthsListRow:e?.calendarMonthsListRow??d(),monthsListCell:e?.calendarMonthsListCell??l(),monthsListControl:e?.calendarMonthsListControl??u()}),L=e=>({yearsList:e?.calendarYearsList??m(),yearsListRow:e?.calendarYearsListRow??_(),yearsListCell:e?.calendarYearsListCell??h(),yearsListControl:e?.calendarYearsListControl??g()}),R=e=>({dropdown:e?.datepickerDropdown??v()}),z=e=>({...N(e),...P(e),...F(e),...I(e),...L(e)});export{M as DatePicker};
1
+ import{calendarControl as e,calendarDay as t,calendarHeader as n,calendarHeaderControlIcon as r,calendarHeaderLevel as i,calendarMonth as a,calendarMonthRow as o,calendarMonthsList as s,calendarMonthsListCell as c,calendarMonthsListControl as l,calendarMonthsListRow as u,calendarWeekDay as d,calendarWeekDaysRow as f,calendarYearsList as p,calendarYearsListCell as m,calendarYearsListControl as h,calendarYearsListRow as g,datepickerDropdown as _,datepickerInput as v,input as y,inputDescription as b,inputError as x,inputLabel as S,inputPlaceholder as C,inputRoot as w,inputSection as T,inputWrapper as E}from"@mage-ui/styled-system/recipes";import{jsx as D}from"react/jsx-runtime";import{cx as O}from"@mage-ui/styled-system/css";import{DatePickerInput as k}from"@mantine/dates";const A=({classNames:e,label:t,placeholder:n,description:r,icon:i,...a})=>D(k,{label:t??`Pick date`,placeholder:n??`Pick date`,description:r??`Select a date`,classNames:L(e),popoverProps:{classNames:I(e)},rightSection:i,...a}),j=e=>({root:e?.root??w(),wrapper:e?.wrapper??E(),input:e?.input??O(y(),v()),label:e?.label??S(),error:e?.error??x(),description:e?.description??b(),placeholder:e?.placeholder??C(),section:e?.section??T({pointerEvents:`none`})}),M=t=>({calendarHeaderControl:t?.calendarHeaderControl??e(),calendarHeader:t?.calendarHeader??n(),calendarHeaderLevel:t?.calendarHeaderLevel??i(),calendarHeaderControlIcon:t?.calendarHeaderControlIcon??r()}),N=e=>({month:e?.calendarMonth??a(),weekdaysRow:e?.calendarWeekDaysRow??f(),weekday:e?.calendarWeekDay??d(),monthRow:e?.calendarMonthRow??o(),day:e?.calendarDay??t()}),P=e=>({monthsList:e?.calendarMonthsList??s(),monthsListRow:e?.calendarMonthsListRow??u(),monthsListCell:e?.calendarMonthsListCell??c(),monthsListControl:e?.calendarMonthsListControl??l()}),F=e=>({yearsList:e?.calendarYearsList??p(),yearsListRow:e?.calendarYearsListRow??g(),yearsListCell:e?.calendarYearsListCell??m(),yearsListControl:e?.calendarYearsListControl??h()}),I=e=>({dropdown:e?.datepickerDropdown??_()}),L=e=>({...j(e),...M(e),...N(e),...P(e),...F(e)});export{A as DatePicker};
2
2
  //# sourceMappingURL=DatePicker.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.js","names":["classNames?: InputClassNamesType","classNames?: CalenderHeaderClassNamesType","classNames?: CalendarMonthClassNamesType","classNames?: CalendarMonthsListClassNamesType","classNames?: CalendarYearsListClassNamesType","classNames?: PopoverClassNamesType","classNames?: DatePickerClassNames"],"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 icon,\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';\nimport { Icon } from '@/components/data-display';\n\nexport type DatePickerProps = {\n name?: string;\n label?: string;\n placeholder?: string;\n description?: string;\n error?: string;\n classNames?: DatePickerClassNames;\n value?: DatePickerValue;\n onChange?: (date: Date | string | null) => void;\n};\n\nexport const DatePicker = ({\n classNames,\n label,\n placeholder,\n description,\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 name='calendar' classNames={icon({ size: 'm' })} />}\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":"o1BA8LA,MA/Ia,EAAa,CAAC,CACzB,aACA,QACA,cACA,cACA,GAAG,EACa,GAEd,EAAC,EAAA,CACC,MAAO,GAAS,YAChB,YAAa,GAAe,YAC5B,YAAa,GAAe,gBAC5B,WAAY,EAAqB,EAAW,CAC5C,aAAc,CACZ,WAAY,EAAkB,EAAW,AAC1C,EACD,aAAc,EAAC,EAAA,CAAK,KAAK,WAAW,WAAY,EAAK,CAAE,KAAM,GAAK,EAAC,EAAI,CACvE,GAAI,GACJ,CAsBA,EAAkB,AAACA,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,MAAQ,EAAC,AACxE,GAWG,EAA2B,AAC/BC,IAEO,CACL,sBACE,GAAY,uBAAyB,GAAiB,CACxD,eAAgB,GAAY,gBAAkB,GAAgB,CAC9D,oBACE,GAAY,qBAAuB,GAAqB,CAC1D,0BACE,GAAY,2BAA6B,GAA2B,AACvE,GAYG,EAA0B,AAACC,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,AAC9C,GAUG,EAA+B,AACnCC,IAEO,CACL,WAAY,GAAY,oBAAsB,GAAoB,CAClE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,eACE,GAAY,wBAA0B,GAAwB,CAChE,kBACE,GAAY,2BAA6B,GAA2B,AACvE,GAUG,EAA8B,AAClCC,IAEO,CACL,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,aAAc,GAAY,sBAAwB,GAAsB,CACxE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,iBACE,GAAY,0BAA4B,GAA0B,AACrE,GAOG,EAAoB,AAACC,IAClB,CACL,SAAU,GAAY,oBAAsB,GAAoB,AACjE,GAGG,EAAuB,AAACC,IACrB,CACL,GAAG,EAAgB,EAAW,CAC9B,GAAG,EAAyB,EAAW,CACvC,GAAG,EAAwB,EAAW,CACtC,GAAG,EAA6B,EAAW,CAC3C,GAAG,EAA4B,EAAW,AAC3C"}
1
+ {"version":3,"file":"DatePicker.js","names":["icon","classNames?: InputClassNamesType","classNames?: CalenderHeaderClassNamesType","classNames?: CalendarMonthClassNamesType","classNames?: CalendarMonthsListClassNamesType","classNames?: CalendarYearsListClassNamesType","classNames?: PopoverClassNamesType","classNames?: DatePickerClassNames"],"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 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":"6wBA8LA,MAhJa,EAAa,CAAC,CACzB,aACA,QACA,cACA,cACA,KAAA,EACA,GAAG,EACa,GAEd,EAAC,EAAA,CACC,MAAO,GAAS,YAChB,YAAa,GAAe,YAC5B,YAAa,GAAe,gBAC5B,WAAY,EAAqB,EAAW,CAC5C,aAAc,CACZ,WAAY,EAAkB,EAAW,AAC1C,EACD,aAAcA,EACd,GAAI,GACJ,CAsBA,EAAkB,AAACC,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,MAAQ,EAAC,AACxE,GAWG,EAA2B,AAC/BC,IAEO,CACL,sBACE,GAAY,uBAAyB,GAAiB,CACxD,eAAgB,GAAY,gBAAkB,GAAgB,CAC9D,oBACE,GAAY,qBAAuB,GAAqB,CAC1D,0BACE,GAAY,2BAA6B,GAA2B,AACvE,GAYG,EAA0B,AAACC,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,AAC9C,GAUG,EAA+B,AACnCC,IAEO,CACL,WAAY,GAAY,oBAAsB,GAAoB,CAClE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,eACE,GAAY,wBAA0B,GAAwB,CAChE,kBACE,GAAY,2BAA6B,GAA2B,AACvE,GAUG,EAA8B,AAClCC,IAEO,CACL,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,aAAc,GAAY,sBAAwB,GAAsB,CACxE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,iBACE,GAAY,0BAA4B,GAA0B,AACrE,GAOG,EAAoB,AAACC,IAClB,CACL,SAAU,GAAY,oBAAsB,GAAoB,AACjE,GAGG,EAAuB,AAACC,IACrB,CACL,GAAG,EAAgB,EAAW,CAC9B,GAAG,EAAyB,EAAW,CACvC,GAAG,EAAwB,EAAW,CACtC,GAAG,EAA6B,EAAW,CAC3C,GAAG,EAA4B,EAAW,AAC3C"}
@@ -1,6 +1,7 @@
1
1
  import { DropdownBaseProps } from "./DropdownBase.js";
2
2
  import { InputTextProps } from "../input-text/InputText.js";
3
- import * as react_jsx_runtime42 from "react/jsx-runtime";
3
+ import * as react_jsx_runtime29 from "react/jsx-runtime";
4
+ import React from "react";
4
5
 
5
6
  //#region src/components/controls/dropdown/Combobox.d.ts
6
7
  type ComboboxProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' | 'target'> & InputTextProps & {
@@ -20,18 +21,20 @@ type ComboboxProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery'
20
21
  };
21
22
  create?: string;
22
23
  empty?: string;
24
+ dropdownIcon?: React.ReactNode;
23
25
  };
24
26
  declare const Combobox: ({
25
27
  defaultOpened,
26
28
  creatable,
27
29
  setSelectedOption,
28
30
  selectedOption,
31
+ dropdownIcon,
29
32
  options,
30
33
  classNames,
31
34
  create,
32
35
  empty,
33
36
  ...props
34
- }: ComboboxProps) => react_jsx_runtime42.JSX.Element;
37
+ }: ComboboxProps) => react_jsx_runtime29.JSX.Element;
35
38
  //# sourceMappingURL=Combobox.d.ts.map
36
39
 
37
40
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":[],"mappings":";;;;;KAeY,aAAA,GAAgB,KAC1B,qEAGA;;;IAJU,KAAA,EAAA,MAAa;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAA,OACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAI1B,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAeH,SAAA,CAAA,EAkFZ,OAAA;EAAA,UAAA,CAAA,EAAA;IAlFwB,MAAA,CAAA,EAAA,MAAA;IAAA,KAAA,CAAA,EAAA,MAAA;IAAA,MAAA,CAAA,EAAA,MAAA;EAAA,CAAA;EAAA,MAAA,CAAA,EAAA,MAAA;EAAA,KAAA,CAAA,EAAA,MAAA;CAAA;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAUtB,aAVsB,EAAA,GAUT,mBAAA,CAAA,GAAA,CAAA,OAVS"}
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;EAAA,OACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAI1B,KAAA,EAAA,MAAA;EAAc,CAAA,EAaG;EAAe,SAAA,CAAA,EAAA,OAAA;EAGrB,UAAA,CAoFZ,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;IApFwB,KAAA,CAAA,EAAA,MAAA;IAAA,MAAA,CAAA,EAAA,MAAA;EAAA,CAAA;EAAA,MAAA,CAAA,EAAA,MAAA;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,YAAA,CAAA,EAHN,KAAA,CAAM,SAGA;CAAA;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,YAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAWtB,aAXsB,EAAA,GAWT,mBAAA,CAAA,GAAA,CAAA,OAXS"}
@@ -1,2 +1,2 @@
1
- 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,options:g,classNames:_,create:v,empty:y,...b})=>{let[x,S]=u(h?.value??``),C=g.every(e=>e.value!==x),w=C?g.filter(e=>e.value.toLowerCase().includes(x.toLowerCase().trim())):g,T=w.map(e=>c(t.Option,{value:e.value,active:h?.id===e.id,classNames:{option:_?.option??i()},children:e.value},e.id)),E=()=>p&&x?l(t.Option,{value:x,classNames:{option:_?.create??i({type:`create`})},children:[c(e,{name:`plus`,classNames:a({size:`m`})}),`${v??`Create`} '${x}'`]},x):c(t.Empty,{classNames:{empty:_?.empty??r()},children:y??`Nothing found`}),D=e=>{let t=g.find(t=>t.value===e);!t&&p&&e&&(t={id:`new`,value:e}),m(t)};return c(t,{readOnly:!1,target:c(n,{value:x,classNames:{section:_?.section??d(o(),s())},...b}),selectedOption:h,setQuery:S,setSelectedOption:e=>D(e),children:T.length>0?T:c(E,{})})};export{f as Combobox};
1
+ 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,dropdownIcon:g,options:_,classNames:v,create:y,empty:b,...x})=>{let[S,C]=u(h?.value??``),w=_.every(e=>e.value!==S),T=w?_.filter(e=>e.value.toLowerCase().includes(S.toLowerCase().trim())):_,E=T.map(e=>c(t.Option,{value:e.value,active:h?.id===e.id,classNames:{option:v?.option??i()},children:e.value},e.id)),D=()=>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`}),O=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=>O(e),dropdownIcon:g,children:E.length>0?E:c(D,{})})};export{f as Combobox};
2
2
  //# sourceMappingURL=Combobox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.js","names":["value: string | undefined"],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":["import { 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 };\n\nexport const Combobox = ({\n defaultOpened = false,\n creatable,\n setSelectedOption,\n selectedOption,\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 >\n {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n </DropdownBase>\n );\n};\n"],"mappings":"0aAkCA,MAAa,EAAW,CAAC,CACvB,iBAAgB,EAChB,YACA,oBACA,iBACA,UACA,aACA,SACA,QACA,GAAG,EACW,GAAK,CA6CnB,GA5CM,CAAC,EAAO,EAAS,CAAG,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAsB,EAAQ,MAAM,AAAC,GAAS,EAAK,QAAU,EAAM,CACnE,EAAkB,EACpB,EAAQ,OAAO,AAAC,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,EAEE,EAAkB,EAAgB,IAAI,AAAC,GAC3C,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAgB,IAChB,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,QAAU,EAAC,AACjE,YAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,GAAK,EAAC,EAAI,EACnD,EAAE,GAAU,SAAS,IAAI,EAAM,EAAA,GAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,AAAE,WAE1D,GAAS,iBACS,CAInB,EAAW,AAACA,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAK,AAAC,GAAS,EAAK,QAAU,EAAM,CAI3D,CAHK,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,OAAO,GAEjC,EAAkB,EAAS,AAC5B,EAED,MACE,GAAC,EAAA,CACC,UAAU,EACV,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,AACpE,EACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAmB,AAAC,GAAW,EAAS,EAAO,UAE9C,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,CAAA,EAAgB,EACpD,AAElB"}
1
+ {"version":3,"file":"Combobox.js","names":["value: string | undefined"],"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 dropdownIcon?: React.ReactNode;\n };\n\nexport const Combobox = ({\n defaultOpened = false,\n creatable,\n setSelectedOption,\n selectedOption,\n dropdownIcon,\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 dropdownIcon={dropdownIcon}\n >\n {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n </DropdownBase>\n );\n};\n"],"mappings":"0aAoCA,MAAa,EAAW,CAAC,CACvB,iBAAgB,EAChB,YACA,oBACA,iBACA,eACA,UACA,aACA,SACA,QACA,GAAG,EACW,GAAK,CA6CnB,GA5CM,CAAC,EAAO,EAAS,CAAG,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAsB,EAAQ,MAAM,AAAC,GAAS,EAAK,QAAU,EAAM,CACnE,EAAkB,EACpB,EAAQ,OAAO,AAAC,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,EAEE,EAAkB,EAAgB,IAAI,AAAC,GAC3C,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAgB,IAChB,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,QAAU,EAAC,AACjE,YAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,GAAK,EAAC,EAAI,EACnD,EAAE,GAAU,SAAS,IAAI,EAAM,EAAA,GAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,AAAE,WAE1D,GAAS,iBACS,CAInB,EAAW,AAACA,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAK,AAAC,GAAS,EAAK,QAAU,EAAM,CAI3D,CAHK,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,OAAO,GAEjC,EAAkB,EAAS,AAC5B,EAED,MACE,GAAC,EAAA,CACC,UAAU,EACV,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,AACpE,EACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAmB,AAAC,GAAW,EAAS,EAAO,CACjC,wBAEb,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,CAAA,EAAgB,EACpD,AAElB"}
@@ -16,6 +16,7 @@ type DropdownBaseProps = {
16
16
  dropdown?: string;
17
17
  options?: string;
18
18
  };
19
+ dropdownIcon?: React.ReactNode;
19
20
  children: React.ReactNode;
20
21
  };
21
22
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;KAUY,iBAAA;;;;EAAA,cAAA,CAAA,EAAA;IAAiB,EAAA,EAAA,MAAA,GAAA,MAAA;IAMnB,KAAM,EAAA,MAAA;EAAY,CAAA,GAKhB,SAAM;EAAS,iBAAA,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;UALjB,KAAA,CAAM;;;;;YAKJ,KAAA,CAAM"}
1
+ {"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;KAKY,iBAAA;;;;EAAA,cAAA,CAAA,EAAA;IAAiB,EAAA,EAAA,MAAA,GAAA,MAAA;IAMnB,KAAM,EAAA,MAAA;EAAY,CAAA,GAKX,SAAM;EAAS,iBACd,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAS,MAAA,EANjB,KAAA,CAAM,YAMW;;;;;iBADV,KAAA,CAAM;YACX,KAAA,CAAM"}
@@ -1,2 +1,2 @@
1
- import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{comboboxOptions as t,dropdown as n,icon as r}from"@mage-ui/styled-system/recipes";import{Combobox as i,useCombobox as a}from"@mantine/core";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{cloneElement as c}from"react";const l=({defaultOpened:l,readOnly:u,setQuery:d,setSelectedOption:f,selectedOption:p,target:m,classNames:h,children:g,..._})=>{let v=a({defaultOpened:l??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{v.resetSelectedOption()}}),y=c(m,{...m?.props??{},onChange:({currentTarget:e})=>{d?.(e.value),v.openDropdown(),v.updateSelectedOptionIndex()},onBlur:()=>{d?.(p?.value??``)},onClick:()=>{u?v.toggleDropdown():v.openDropdown()},endSlot:o(e,{name:`chevron-down`,classNames:r({size:`s`})})});return s(i,{readOnly:u??!1,onOptionSubmit:e=>{f(e),d?.(e),v.closeDropdown()},store:v,withinPortal:!0,position:`bottom-start`,..._,children:[o(i.Target,{children:y}),o(i.Dropdown,{classNames:{dropdown:h?.dropdown??n()},children:o(i.Options,{classNames:{options:h?.options??t()},children:g})})]})};l.Option=i.Option,l.Option.displayName=`DropdownBase.Option`,l.Empty=i.Empty,l.Empty.displayName=`DropdownBase.Empty`;export{l as DropdownBase};
1
+ import{comboboxOptions as e,dropdown as t}from"@mage-ui/styled-system/recipes";import{Combobox as n,useCombobox as r}from"@mantine/core";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cloneElement as o}from"react";const s=({defaultOpened:s,readOnly:c,setQuery:l,setSelectedOption:u,selectedOption:d,target:f,classNames:p,children:m,dropdownIcon:h,...g})=>{let _=r({defaultOpened:s??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{_.resetSelectedOption()}}),v=o(f,{...f?.props??{},onChange:({currentTarget:e})=>{l?.(e.value),_.openDropdown(),_.updateSelectedOptionIndex()},onBlur:()=>{l?.(d?.value??``)},onClick:()=>{c?_.toggleDropdown():_.openDropdown()},endSlot:h});return a(n,{readOnly:c??!1,onOptionSubmit:e=>{u(e),l?.(e),_.closeDropdown()},store:_,withinPortal:!0,position:`bottom-start`,...g,children:[i(n.Target,{children:v}),i(n.Dropdown,{classNames:{dropdown:p?.dropdown??t()},children:i(n.Options,{classNames:{options:p?.options??e()},children:m})})]})};s.Option=n.Option,s.Option.displayName=`DropdownBase.Option`,s.Empty=n.Empty,s.Empty.displayName=`DropdownBase.Empty`;export{s as DropdownBase};
2
2
  //# sourceMappingURL=DropdownBase.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownBase.js","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport {\n comboboxOptions,\n dropdown,\n icon,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\nimport { Icon } from '@/components/data-display';\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 };\n children: React.ReactNode;\n};\n\nexport const DropdownBase = ({\n defaultOpened,\n readOnly,\n setQuery,\n setSelectedOption,\n selectedOption,\n target,\n classNames,\n children,\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 endSlot: <Icon name='chevron-down' classNames={icon({ size: 's' })} />,\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={true}\n position='bottom-start'\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\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"uSAwBA,MAAa,EAAe,CAAC,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,GAAG,EACe,GAAK,CASvB,IARM,EAAW,EAAY,CAC3B,cAAe,IAAiB,EAChC,eAAgB,SAChB,gBAAiB,IAAM,CACrB,EAAS,qBAAqB,AAC/B,CACF,EAAC,CAEI,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,CAAE,EACvB,SAAU,CAAC,CACT,gBACkD,GAAK,CAGvD,AAFA,IAAW,EAAc,MAAM,CAC/B,EAAS,cAAc,CACvB,EAAS,2BAA2B,AACrC,EACD,OAAQ,IAAM,CACZ,IAAW,GAAgB,OAAS,GAAG,AACxC,EACD,QAAS,IAAM,CACb,AAAI,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,AAE1B,EACD,QAAS,EAAC,EAAA,CAAK,KAAK,eAAe,WAAY,EAAK,CAAE,KAAM,GAAK,EAAC,EAAI,AACvE,EAA0D,CAE3D,MACE,GAACA,EAAAA,CACC,SAAU,IAAY,EACtB,eAAgB,AAAC,GAAW,CAG1B,AAFA,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,AACzB,EACD,MAAO,EACP,cAAc,EACd,SAAS,eACT,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,CAAA,EAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,AAC7C,WAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,AAClD,EAEA,YACuB,EACD,GACX,AAErB,EAKD,AAHA,EAAa,OAASA,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}
1
+ {"version":3,"file":"DropdownBase.js","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport { comboboxOptions, dropdown } 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 };\n dropdownIcon?: React.ReactNode;\n children: React.ReactNode;\n};\n\nexport const DropdownBase = ({\n defaultOpened,\n readOnly,\n setQuery,\n setSelectedOption,\n selectedOption,\n target,\n classNames,\n children,\n dropdownIcon,\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 endSlot: dropdownIcon,\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={true}\n position='bottom-start'\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\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"gOAoBA,MAAa,EAAe,CAAC,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,eACA,GAAG,EACe,GAAK,CASvB,IARM,EAAW,EAAY,CAC3B,cAAe,IAAiB,EAChC,eAAgB,SAChB,gBAAiB,IAAM,CACrB,EAAS,qBAAqB,AAC/B,CACF,EAAC,CAEI,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,CAAE,EACvB,SAAU,CAAC,CACT,gBACkD,GAAK,CAGvD,AAFA,IAAW,EAAc,MAAM,CAC/B,EAAS,cAAc,CACvB,EAAS,2BAA2B,AACrC,EACD,OAAQ,IAAM,CACZ,IAAW,GAAgB,OAAS,GAAG,AACxC,EACD,QAAS,IAAM,CACb,AAAI,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,AAE1B,EACD,QAAS,CACV,EAA0D,CAE3D,MACE,GAACA,EAAAA,CACC,SAAU,IAAY,EACtB,eAAgB,AAAC,GAAW,CAG1B,AAFA,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,AACzB,EACD,MAAO,EACP,cAAc,EACd,SAAS,eACT,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,CAAA,EAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,AAC7C,WAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,AAClD,EAEA,YACuB,EACD,GACX,AAErB,EAKD,AAHA,EAAa,OAASA,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}
@@ -1,5 +1,5 @@
1
- import * as react_jsx_runtime43 from "react/jsx-runtime";
2
- import * as react44 from "react";
1
+ import * as react_jsx_runtime30 from "react/jsx-runtime";
2
+ import * as react31 from "react";
3
3
 
4
4
  //#region src/components/controls/dropdown/DropdownButton.d.ts
5
5
  type DropdownButtonProps = {
@@ -9,17 +9,20 @@ type DropdownButtonProps = {
9
9
  dropdown?: string;
10
10
  };
11
11
  children?: React.ReactNode;
12
+ dropdownIcon?: React.ReactNode;
12
13
  };
13
14
  declare const DropdownButton: {
14
15
  ({
15
16
  label,
16
17
  classNames,
17
- children
18
- }: DropdownButtonProps): react_jsx_runtime43.JSX.Element;
18
+ children,
19
+ dropdownIcon,
20
+ ...props
21
+ }: DropdownButtonProps): react_jsx_runtime30.JSX.Element;
19
22
  Option: {
20
23
  ({
21
24
  children
22
- }: DropdownButtonOptionProps): react44.ReactNode;
25
+ }: DropdownButtonOptionProps): react31.ReactNode;
23
26
  displayName: string;
24
27
  };
25
28
  };
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownButton.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,mBAAA;;;;IAAA,QAAA,CAAA,EAAA,MAAA;EASC,CAAA;EA0CZ,QAAA,CAAA,EA7CY,KAAA,CAAM,SA6ClB;CAAA;cA1CY;;;;;KAIV,sBAAmB,mBAAA,CAAA,GAAA,CAAA;QAAnB,EAAA;IAAmB,CAAA;MAAA;IAAA,CAAA,EA+CQ,yBA/CR,CAAA,EA+CiC,OAAA,CAAA,SA/CjC;IAAA,WAAA,EAAA,MAAA;;CA+CiC;AAAA,KAPlD,yBAAA,GAOkD;EAPlD,EAAA,EAAA,MAAA,GAAA,MAAA;;;aAIQ,KAAA,CAAM"}
1
+ {"version":3,"file":"DropdownButton.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,mBAAA;;;;IAAA,QAAA,CAAA,EAAA,MAAA;EAAmB,CAAA;EAAA,QAMlB,CAAM,EAAN,KAAA,CAAM,SAAA;EAAS,YACL,CAAA,EAAN,KAAA,CAAM,SAAA;AAAS,CAAA;AAGnB,cAAA,cA8CZ,EAAA;EAAA,CAAA;IAAA,KAAA;IAAA,UAAA;IAAA,QAAA;IAAA,YAAA;IAAA,GAAA;EAAA,CAAA,EAxCE,mBAwCF,CAAA,EAxCqB,mBAAA,CAAA,GAAA,CAAA,OAwCrB;EAAA,MAAA,EAAA;;;OAS6B,4BAAyB,OAAA,CAAA;;;;KAPlD,yBAAA,GA1CiB;EAAA,EAAA,EAAA,MAAA,GAAA,MAAA;OAiDQ,EAAA,MAAA;EAAyB,OAAA,EAAA,GAAA,GAAA,IAAA;EAAA,QAAA,CAAA,EAH1C,KAAA,CAAM,SAGoC;AATrD,CAAA"}
@@ -1,2 +1,2 @@
1
- import{Button as e}from"../../buttons/button/Button.js";import{DropdownBase as t}from"./DropdownBase.js";import{button as n,comboboxOption as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{jsx as a}from"react/jsx-runtime";import{Children as o,isValidElement as s}from"react";const c=({label:l=`Guardar`,classNames:u,children:d})=>{let f=o.toArray(d).filter(e=>s(e)&&e.type===c.Option),p=e=>{let t=f.find(t=>t.props.value===e);t&&t.props.onClick()};return a(t,{setSelectedOption:p,target:a(e,{classNames:{root:n({color:`primary`})},children:l}),classNames:{dropdown:u?.dropdown??i({size:`m`})},children:f.map(e=>{let{id:n,value:i,children:o}=e.props;return a(t.Option,{value:i,classNames:{option:u?.option??r()},children:o},n)})})},l=({children:e})=>e;l.displayName=`DropdownButton.Option`,c.Option=l;export{c as DropdownButton};
1
+ import{Button as e}from"../../buttons/button/Button.js";import{DropdownBase as t}from"./DropdownBase.js";import{button as n,comboboxOption as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{jsx as a}from"react/jsx-runtime";import{Children as o,isValidElement as s}from"react";const c=({label:l=`Guardar`,classNames:u,children:d,dropdownIcon:f,...p})=>{let m=o.toArray(d).filter(e=>s(e)&&e.type===c.Option),h=e=>{let t=m.find(t=>t.props.value===e);t&&t.props.onClick()};return a(t,{setSelectedOption:h,target:a(e,{classNames:{root:n({color:`primary`})},children:l}),classNames:{dropdown:u?.dropdown??i({size:`m`})},dropdownIcon:f,...p,children:m.map(e=>{let{id:n,value:i,children:o}=e.props;return a(t.Option,{value:i,classNames:{option:u?.option??r()},children:o},n)})})},l=({children:e})=>e;l.displayName=`DropdownButton.Option`,c.Option=l;export{c as DropdownButton};
2
2
  //# sourceMappingURL=DropdownButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownButton.js","names":["value?: string","children"],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport {\n button,\n comboboxOption,\n dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Button } from '@/components/buttons';\n\nimport { DropdownBase } from './DropdownBase';\n\nexport type DropdownButtonProps = {\n label?: string;\n classNames?: {\n option?: string;\n dropdown?: string;\n };\n children?: React.ReactNode;\n};\n\nexport const DropdownButton = ({\n label = 'Guardar',\n classNames,\n children,\n}: DropdownButtonProps) => {\n const options = Children.toArray(children).filter(\n (child): child is React.ReactElement<DropdownButtonOptionProps> =>\n isValidElement(child) && child.type === DropdownButton.Option,\n );\n\n const handleOptionSelect = (value?: string) => {\n const selected = options.find((child) => child.props.value === value);\n if (selected) selected.props.onClick();\n };\n\n return (\n <DropdownBase\n setSelectedOption={handleOptionSelect}\n target={\n <Button classNames={{ root: button({ color: 'primary' }) }}>\n {label}\n </Button>\n }\n classNames={{\n dropdown: classNames?.dropdown ?? dropdown({ size: 'm' }),\n }}\n >\n {options.map((child) => {\n const { id, value, children } = child.props;\n\n return (\n <DropdownBase.Option\n key={id}\n value={value}\n classNames={{ option: classNames?.option ?? comboboxOption() }}\n >\n {children}\n </DropdownBase.Option>\n );\n })}\n </DropdownBase>\n );\n};\n\ntype DropdownButtonOptionProps = {\n id: string | number;\n value: string;\n onClick: () => void;\n children?: React.ReactNode;\n};\n\nconst Option = ({ children }: DropdownButtonOptionProps) => {\n return children;\n};\n\nOption.displayName = 'DropdownButton.Option';\nDropdownButton.Option = Option;\n"],"mappings":"gSAuEA,MAnDa,EAAiB,CAAC,CAC7B,QAAQ,UACR,aACA,WACoB,GAAK,CAMzB,IALM,EAAU,EAAS,QAAQ,EAAS,CAAC,OACzC,AAAC,GACC,EAAe,EAAM,EAAI,EAAM,OAAS,EAAe,OAC1D,CAEK,EAAqB,AAACA,GAAmB,CAC7C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAU,EAAM,MAAM,QAAU,EAAM,CACrE,AAAI,GAAU,EAAS,MAAM,SAAS,AACvC,EAED,MACE,GAAC,EAAA,CACC,kBAAmB,EACnB,OACE,EAAC,EAAA,CAAO,WAAY,CAAE,KAAM,EAAO,CAAE,MAAO,SAAW,EAAC,AAAE,WACvD,GACM,CAEX,WAAY,CACV,SAAU,GAAY,UAAY,EAAS,CAAE,KAAM,GAAK,EAAC,AAC1D,WAEA,EAAQ,IAAI,AAAC,GAAU,CACtB,GAAM,CAAE,KAAI,QAAO,SAAA,EAAU,CAAG,EAAM,MAEtC,MACE,GAAC,EAAa,OAAA,CAEL,QACP,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7DC,GAJI,EAKe,AAEzB,EAAC,EACW,AAElB,EASK,EAAS,CAAC,CAAE,WAAqC,GAC9C,EAIT,AADA,EAAO,YAAc,wBACrB,EAAe,OAAS"}
1
+ {"version":3,"file":"DropdownButton.js","names":["value?: string","children"],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport {\n button,\n comboboxOption,\n dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Button } from '@/components/buttons';\n\nimport { DropdownBase } from './DropdownBase';\n\nexport type DropdownButtonProps = {\n label?: string;\n classNames?: {\n option?: string;\n dropdown?: string;\n };\n children?: React.ReactNode;\n dropdownIcon?: React.ReactNode;\n};\n\nexport const DropdownButton = ({\n label = 'Guardar',\n classNames,\n children,\n dropdownIcon,\n ...props\n}: DropdownButtonProps) => {\n const options = Children.toArray(children).filter(\n (child): child is React.ReactElement<DropdownButtonOptionProps> =>\n isValidElement(child) && child.type === DropdownButton.Option,\n );\n\n const handleOptionSelect = (value?: string) => {\n const selected = options.find((child) => child.props.value === value);\n if (selected) selected.props.onClick();\n };\n\n return (\n <DropdownBase\n setSelectedOption={handleOptionSelect}\n target={\n <Button classNames={{ root: button({ color: 'primary' }) }}>\n {label}\n </Button>\n }\n classNames={{\n dropdown: classNames?.dropdown ?? dropdown({ size: 'm' }),\n }}\n dropdownIcon={dropdownIcon}\n {...props}\n >\n {options.map((child) => {\n const { id, value, children } = child.props;\n\n return (\n <DropdownBase.Option\n key={id}\n value={value}\n classNames={{ option: classNames?.option ?? comboboxOption() }}\n >\n {children}\n </DropdownBase.Option>\n );\n })}\n </DropdownBase>\n );\n};\n\ntype DropdownButtonOptionProps = {\n id: string | number;\n value: string;\n onClick: () => void;\n children?: React.ReactNode;\n};\n\nconst Option = ({ children }: DropdownButtonOptionProps) => {\n return children;\n};\n\nOption.displayName = 'DropdownButton.Option';\nDropdownButton.Option = Option;\n"],"mappings":"gSA4EA,MAvDa,EAAiB,CAAC,CAC7B,QAAQ,UACR,aACA,WACA,eACA,GAAG,EACiB,GAAK,CAMzB,IALM,EAAU,EAAS,QAAQ,EAAS,CAAC,OACzC,AAAC,GACC,EAAe,EAAM,EAAI,EAAM,OAAS,EAAe,OAC1D,CAEK,EAAqB,AAACA,GAAmB,CAC7C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAU,EAAM,MAAM,QAAU,EAAM,CACrE,AAAI,GAAU,EAAS,MAAM,SAAS,AACvC,EAED,MACE,GAAC,EAAA,CACC,kBAAmB,EACnB,OACE,EAAC,EAAA,CAAO,WAAY,CAAE,KAAM,EAAO,CAAE,MAAO,SAAW,EAAC,AAAE,WACvD,GACM,CAEX,WAAY,CACV,SAAU,GAAY,UAAY,EAAS,CAAE,KAAM,GAAK,EAAC,AAC1D,EACa,eACd,GAAI,WAEH,EAAQ,IAAI,AAAC,GAAU,CACtB,GAAM,CAAE,KAAI,QAAO,SAAA,EAAU,CAAG,EAAM,MAEtC,MACE,GAAC,EAAa,OAAA,CAEL,QACP,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7DC,GAJI,EAKe,AAEzB,EAAC,EACW,AAElB,EASK,EAAS,CAAC,CAAE,WAAqC,GAC9C,EAIT,AADA,EAAO,YAAc,wBACrB,EAAe,OAAS"}
@@ -1,6 +1,6 @@
1
1
  import { DropdownBaseProps } from "./DropdownBase.js";
2
2
  import { InputTextProps } from "../input-text/InputText.js";
3
- import * as react_jsx_runtime45 from "react/jsx-runtime";
3
+ import * as react_jsx_runtime32 from "react/jsx-runtime";
4
4
 
5
5
  //#region src/components/controls/dropdown/Select.d.ts
6
6
  type SelectProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' | 'target'> & InputTextProps & {
@@ -23,7 +23,7 @@ declare const Select: ({
23
23
  options,
24
24
  classNames,
25
25
  ...props
26
- }: SelectProps) => react_jsx_runtime45.JSX.Element;
26
+ }: SelectProps) => react_jsx_runtime32.JSX.Element;
27
27
  //# sourceMappingURL=Select.d.ts.map
28
28
 
29
29
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAcY,WAAA,GAAc,KACxB,qEAGA;;;IAJU,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAA,OACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAUH,UA+CZ,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CA/CsB;AAAA,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"}
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;EAAA,OACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAUH,UAkDZ,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CAlDsB;AAAA,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"}
@@ -1,2 +1,2 @@
1
- import{DropdownBase as e}from"./DropdownBase.js";import{InputText as t}from"../input-text/InputText.js";import{comboboxOption as n,input as r,inputSection as i,selectButton as a,selectSection as o}from"@mage-ui/styled-system/recipes";import{jsx as s}from"react/jsx-runtime";import{useState as c}from"react";import{cx as l}from"@mage-ui/styled-system/css";const u=({defaultOpened:u=!1,setSelectedOption:d,selectedOption:f,options:p,classNames:m,...h})=>{let[g,_]=c(f?.value??``),v=p.map(t=>s(e.Option,{value:t.value,active:f?.id===t.id,classNames:{option:m?.option??n()},children:t.value},t.id)),y=e=>{let t=p.find(t=>t.value===e);d(t)};return s(e,{readOnly:!0,target:s(t,{readOnly:!0,classNames:{input:m?.input??l(r(),a()),section:m?.section??l(i(),o())},value:g,...h}),selectedOption:f,setQuery:_,setSelectedOption:e=>y(e),children:v})};export{u as Select};
1
+ 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),..._,children:b})};export{f as Select};
2
2
  //# sourceMappingURL=Select.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","names":["value: string | undefined"],"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 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 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 >\n {dropdownOptions}\n </DropdownBase>\n );\n};\n"],"mappings":"mWA4BA,MAAa,EAAS,CAAC,CACrB,iBAAgB,EAChB,oBACA,iBACA,UACA,aACA,GAAG,EACS,GAAK,CAcjB,GAbM,CAAC,EAAO,EAAS,CAAG,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAkB,EAAQ,IAAI,AAAC,GACnC,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAW,AAACA,GAA8B,CAC9C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAS,EAAK,QAAU,EAAM,CAC7D,EAAkB,EAAS,AAC5B,EAED,MACE,GAAC,EAAA,CACC,UAAU,EACV,OACE,EAAC,EAAA,CACC,UAAA,EACA,WAAY,CACV,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAc,CAAC,CACvD,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,AACpE,EACD,MAAO,EACP,GAAI,GACJ,CAEY,iBACN,WACV,kBAAmB,AAAC,GAAW,EAAS,EAAO,UAE9C,GACY,AAElB"}
1
+ {"version":3,"file":"Select.js","names":["value: string | undefined"],"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 {...props}\n >\n {dropdownOptions}\n </DropdownBase>\n );\n};\n"],"mappings":"kYA8BA,MAAa,EAAS,CAAC,CACrB,iBAAgB,EAChB,oBACA,iBACA,UACA,aACA,GAAG,EACS,GAAK,CAcjB,GAbM,CAAC,EAAO,EAAS,CAAG,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAkB,EAAQ,IAAI,AAAC,GACnC,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAW,AAACA,GAA8B,CAC9C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAS,EAAK,QAAU,EAAM,CAC7D,EAAkB,EAAS,AAC5B,EAED,MACE,GAAC,EAAA,CACC,UAAU,EACV,OACE,EAAC,EAAA,CACC,UAAA,EACA,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,AACpE,EACD,MAAO,EACP,GAAI,GACJ,CAEY,iBACN,WACV,kBAAmB,AAAC,GAAW,EAAS,EAAO,CAC/C,GAAI,WAEH,GACY,AAElB"}
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime46 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime33 from "react/jsx-runtime";
2
2
 
3
3
  //#region src/components/controls/input-file/InputFile.d.ts
4
4
  type InputFileProps = {
@@ -26,7 +26,7 @@ declare const InputFile: ({
26
26
  multiple,
27
27
  badgeClassName,
28
28
  ...props
29
- }: InputFileProps) => react_jsx_runtime46.JSX.Element;
29
+ }: InputFileProps) => react_jsx_runtime33.JSX.Element;
30
30
  //# sourceMappingURL=InputFile.d.ts.map
31
31
  //#endregion
32
32
  export { InputFile, InputFileProps };
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime47 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime34 from "react/jsx-runtime";
2
2
  import { ComponentProps, ReactNode } from "react";
3
3
 
4
4
  //#region src/components/controls/input-password/InputPassword.d.ts
@@ -26,7 +26,7 @@ declare const InputPassword: ({
26
26
  startSlot,
27
27
  endSlot,
28
28
  ...props
29
- }: InputPasswordProps) => react_jsx_runtime47.JSX.Element;
29
+ }: InputPasswordProps) => react_jsx_runtime34.JSX.Element;
30
30
  //# sourceMappingURL=InputPassword.d.ts.map
31
31
  //#endregion
32
32
  export { InputPassword, InputPasswordProps };
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime48 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime35 from "react/jsx-runtime";
2
2
  import { ComponentProps, ReactNode } from "react";
3
3
 
4
4
  //#region src/components/controls/input-text/InputText.d.ts
@@ -25,7 +25,7 @@ declare const InputText: ({
25
25
  startSlot,
26
26
  endSlot,
27
27
  ...props
28
- }: InputTextProps) => react_jsx_runtime48.JSX.Element;
28
+ }: InputTextProps) => react_jsx_runtime35.JSX.Element;
29
29
  //# sourceMappingURL=InputText.d.ts.map
30
30
  //#endregion
31
31
  export { InputText, InputTextProps };
@@ -0,0 +1,34 @@
1
+ import { ReactNode } from "react";
2
+
3
+ //#region src/components/controls/multi-switch/MultiSwitch.d.ts
4
+ type MultiSwitchProps = {
5
+ label?: ReactNode;
6
+ children?: ReactNode;
7
+ value?: string;
8
+ name?: string;
9
+ onChange?: (value: string) => void;
10
+ classNames?: {
11
+ root?: string;
12
+ radio?: string;
13
+ icon?: string;
14
+ inner?: string;
15
+ body?: string;
16
+ labelWrapper?: string;
17
+ label?: string;
18
+ description?: string;
19
+ error?: string;
20
+ groupRoot?: string;
21
+ };
22
+ };
23
+ declare const MultiSwitch: {
24
+ ({
25
+ classNames,
26
+ children,
27
+ ...props
28
+ }: MultiSwitchProps): ReactNode;
29
+ displayName: string;
30
+ };
31
+ //# sourceMappingURL=MultiSwitch.d.ts.map
32
+ //#endregion
33
+ export { MultiSwitch, MultiSwitchProps };
34
+ //# sourceMappingURL=MultiSwitch.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MultiSwitch.d.ts","names":[],"sources":["../../../../src/components/controls/multi-switch/MultiSwitch.tsx"],"sourcesContent":[],"mappings":";;;KAYY,gBAAA;UACF;EADE,QAAA,CAAA,EAEC,SAFe;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,IAClB,CAAA,EAAA,MAAA;EAAS,QACN,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAS,UAAA,CAAA,EAAA;IAkBT,IAAA,CAAA,EAAA,MAiBZ;IAAA,KAAA,CAAA,EAAA,MAAA;IAAA,IAAA,CAAA,EAAA,MAAA;;IAbE,IAAA,CAAA,EAAA,MAAA;IAAmB,YAAA,CAAA,EAAA,MAAA;IAAS,KAAA,CAAA,EAAA,MAAA;;;;;;cAJlB;;;;;KAIV,mBAAmB"}
@@ -0,0 +1,2 @@
1
+ import{RadioGroup as e}from"../radio/RadioGroup.js";import{multiSwitchGroupRoot as t,multiSwitchLabel as n,multiSwitchRoot as r,multiSwitchSettings as i}from"@mage-ui/styled-system/recipes";import{jsx as a}from"react/jsx-runtime";import{cx as o}from"@mage-ui/styled-system/css";const s=({classNames:s,children:c,...l})=>a(e,{classNames:{root:o(s?.root??i(),r()),label:s?.label??n(),groupRoot:s?.groupRoot??t()},...l,children:c});s.displayName=`MultiSwitch`;export{s as MultiSwitch};
2
+ //# sourceMappingURL=MultiSwitch.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MultiSwitch.js","names":[],"sources":["../../../../src/components/controls/multi-switch/MultiSwitch.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n multiSwitchGroupRoot,\n multiSwitchLabel,\n multiSwitchRoot,\n multiSwitchSettings,\n} from '@mage-ui/styled-system/recipes';\n\nimport { RadioGroup } from '../radio/RadioGroup';\n\nexport type MultiSwitchProps = {\n label?: ReactNode;\n children?: ReactNode;\n value?: string;\n name?: string;\n onChange?: (value: string) => void;\n classNames?: {\n root?: string;\n radio?: string;\n icon?: string;\n inner?: string;\n body?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n groupRoot?: string;\n };\n};\n\nexport const MultiSwitch = ({\n classNames,\n children,\n ...props\n}: MultiSwitchProps): ReactNode => {\n return (\n <RadioGroup\n classNames={{\n root: cx(classNames?.root ?? multiSwitchSettings(), multiSwitchRoot()),\n label: classNames?.label ?? multiSwitchLabel(),\n groupRoot: classNames?.groupRoot ?? multiSwitchGroupRoot(),\n }}\n {...props}\n >\n {children}\n </RadioGroup>\n );\n};\n\nMultiSwitch.displayName = 'MultiSwitch';\n"],"mappings":"sRAgCA,MAAa,EAAc,CAAC,CAC1B,aACA,WACA,GAAG,EACc,GAEf,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EAAG,GAAY,MAAQ,GAAqB,CAAE,GAAiB,CAAC,CACtE,MAAO,GAAY,OAAS,GAAkB,CAC9C,UAAW,GAAY,WAAa,GAAsB,AAC3D,EACD,GAAI,EAEH,YACU,CAIjB,EAAY,YAAc"}
@@ -3,10 +3,12 @@ import { ReactNode } from "react";
3
3
 
4
4
  //#region src/components/controls/radio/Radio.d.ts
5
5
  type RadioProps = {
6
- label?: string;
7
- error?: string;
8
- description?: string;
6
+ label?: ReactNode;
7
+ error?: ReactNode;
8
+ description?: ReactNode;
9
9
  value?: string;
10
+ name?: string;
11
+ checked?: boolean;
10
12
  disabled?: boolean;
11
13
  classNames?: {
12
14
  root?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.d.ts","names":[],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"sourcesContent":[],"mappings":";;;;KAkBY,UAAA;;;EAAA,WAAA,CAAA,EAAU,MAAA;EAmBT,KAAA,CAAA,EAiBZ,MAAA;EAAA,QAAA,CAAA,EAAA,OAAA;EAAA,UAAA,CAAA,EAAA;IAjB+C,IAAA,CAAA,EAAA,MAAA;IAAa,KAAA,CAAA,EAAA,MAAA;IAAS,IAAA,CAAA,EAAA,MAAA;;;;;;;;;cAAzD;;;;KAAmC,aAAa"}
1
+ {"version":3,"file":"Radio.d.ts","names":[],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"sourcesContent":[],"mappings":";;;;KAkBY,UAAA;UACF;UACA;EAFE,WAAA,CAAA,EAGI,SAHM;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,IACZ,CAAA,EAAA,MAAA;EAAS,OACT,CAAA,EAAA,OAAA;EAAS,QACH,CAAA,EAAA,OAAA;EAAS,UAAA,CAAA,EAAA;IAkBZ,IAiBZ,CAAA,EAAA,MAAA;IAAA,KAAA,CAAA,EAAA,MAAA;IAAA,IAAA,CAAA,EAAA,MAAA;IAjB+C,KAAA,CAAA,EAAA,MAAA;IAAa,IAAA,CAAA,EAAA,MAAA;IAAS,YAAA,CAAA,EAAA,MAAA;;;;;;cAAzD;;;;KAAmC,aAAa"}
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.js","names":["Radio","RadioMantine"],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n radio,\n radioBody,\n radioDescription,\n radioError,\n radioIcon,\n radioInner,\n radioLabel,\n radioLabelWrapper,\n radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Radio as RadioMantine } from '@mantine/core';\n\nimport { RadioGroup } from './RadioGroup';\n\nexport type RadioProps = {\n label?: string;\n error?: string;\n description?: string;\n value?: string;\n disabled?: boolean;\n classNames?: {\n root?: string;\n radio?: string;\n icon?: string;\n inner?: string;\n body?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n };\n};\n\nexport const Radio = ({ classNames, ...props }: RadioProps): ReactNode => {\n return (\n <RadioMantine\n classNames={{\n root: classNames?.root ?? radioRoot(),\n radio: cx(classNames?.radio ?? radio(), 'peer'),\n icon: classNames?.icon ?? radioIcon(),\n inner: classNames?.inner ?? radioInner(),\n body: classNames?.body ?? radioBody(),\n labelWrapper: classNames?.labelWrapper ?? radioLabelWrapper(),\n label: classNames?.label ?? radioLabel(),\n description: classNames?.description ?? radioDescription(),\n error: classNames?.error ?? radioError(),\n }}\n {...props}\n />\n );\n};\n\nRadio.displayName = 'Radio';\nRadio.Group = RadioGroup;\n"],"mappings":"4WAqCA,MAAaA,EAAQ,CAAC,CAAE,aAAY,GAAG,EAAmB,GAEtD,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,EAAG,GAAY,OAAS,GAAO,CAAE,OAAO,CAC/C,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,KAAM,GAAY,MAAQ,GAAW,CACrC,aAAc,GAAY,cAAgB,GAAmB,CAC7D,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,GACJ,CAKN,AADA,EAAM,YAAc,QACpB,EAAM,MAAQ"}
1
+ {"version":3,"file":"Radio.js","names":["Radio","RadioMantine"],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n radio,\n radioBody,\n radioDescription,\n radioError,\n radioIcon,\n radioInner,\n radioLabel,\n radioLabelWrapper,\n radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Radio as RadioMantine } from '@mantine/core';\n\nimport { RadioGroup } from './RadioGroup';\n\nexport type RadioProps = {\n label?: ReactNode;\n error?: ReactNode;\n description?: ReactNode;\n value?: string;\n name?: string;\n checked?: boolean;\n disabled?: boolean;\n classNames?: {\n root?: string;\n radio?: string;\n icon?: string;\n inner?: string;\n body?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n };\n};\n\nexport const Radio = ({ classNames, ...props }: RadioProps): ReactNode => {\n return (\n <RadioMantine\n classNames={{\n root: classNames?.root ?? radioRoot(),\n radio: cx(classNames?.radio ?? radio(), 'peer'),\n icon: classNames?.icon ?? radioIcon(),\n inner: classNames?.inner ?? radioInner(),\n body: classNames?.body ?? radioBody(),\n labelWrapper: classNames?.labelWrapper ?? radioLabelWrapper(),\n label: classNames?.label ?? radioLabel(),\n description: classNames?.description ?? radioDescription(),\n error: classNames?.error ?? radioError(),\n }}\n {...props}\n />\n );\n};\n\nRadio.displayName = 'Radio';\nRadio.Group = RadioGroup;\n"],"mappings":"4WAuCA,MAAaA,EAAQ,CAAC,CAAE,aAAY,GAAG,EAAmB,GAEtD,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,EAAG,GAAY,OAAS,GAAO,CAAE,OAAO,CAC/C,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,KAAM,GAAY,MAAQ,GAAW,CACrC,aAAc,GAAY,cAAgB,GAAmB,CAC7D,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,GACJ,CAKN,AADA,EAAM,YAAc,QACpB,EAAM,MAAQ"}
@@ -2,11 +2,12 @@ import { ReactNode } from "react";
2
2
 
3
3
  //#region src/components/controls/radio/RadioGroup.d.ts
4
4
  type RadioGroupProps = {
5
- label?: string;
6
- error?: string;
7
- description?: string;
5
+ label?: ReactNode;
6
+ error?: ReactNode;
7
+ description?: ReactNode;
8
8
  children?: ReactNode;
9
9
  value?: string;
10
+ name?: string;
10
11
  onChange?: (value: string) => void;
11
12
  classNames?: {
12
13
  root?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.d.ts","names":[],"sources":["../../../../src/components/controls/radio/RadioGroup.tsx"],"sourcesContent":[],"mappings":";;;KAWY,eAAA;;EAAA,KAAA,CAAA,EAAA,MAAA;;aAIC"}
1
+ {"version":3,"file":"RadioGroup.d.ts","names":[],"sources":["../../../../src/components/controls/radio/RadioGroup.tsx"],"sourcesContent":[],"mappings":";;;KAWY,eAAA;UACF;EADE,KAAA,CAAA,EAEF,SAFE;EAAe,WAAA,CAAA,EAGX,SAHW;EAAA,QACjB,CAAA,EAGG,SAHH;EAAS,KACT,CAAA,EAAA,MAAA;EAAS,IACH,CAAA,EAAA,MAAA;EAAS,QACZ,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAS,UAAA,CAAA,EAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.js","names":["MantineRadio","MantineGroup"],"sources":["../../../../src/components/controls/radio/RadioGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n radioDescription,\n radioError,\n radioGroupRoot,\n radioLabel,\n radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Group as MantineGroup, Radio as MantineRadio } from '@mantine/core';\n\nexport type RadioGroupProps = {\n label?: string;\n error?: string;\n description?: string;\n children?: ReactNode;\n value?: string;\n onChange?: (value: string) => void;\n classNames?: {\n root?: string;\n radio?: string;\n icon?: string;\n inner?: string;\n body?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n groupRoot?: string;\n };\n};\n\nexport const RadioGroup = ({\n classNames,\n children,\n ...props\n}: RadioGroupProps): ReactNode => {\n return (\n <MantineRadio.Group\n classNames={{\n root: classNames?.root ?? radioRoot(),\n label: classNames?.label ?? radioLabel(),\n description: classNames?.description ?? radioDescription(),\n error: classNames?.error ?? radioError(),\n }}\n {...props}\n >\n <MantineGroup\n classNames={{\n root: classNames?.groupRoot ?? radioGroupRoot(),\n }}\n >\n {children}\n </MantineGroup>\n </MantineRadio.Group>\n );\n};\n\nRadioGroup.displayName = 'Radio.Group';\n"],"mappings":"8NAgCA,MAAa,EAAa,CAAC,CACzB,aACA,WACA,GAAG,EACa,GAEd,EAACA,EAAa,MAAA,CACZ,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,WAEJ,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,WAAa,GAAgB,AAChD,EAEA,YACY,EACI,CAIzB,EAAW,YAAc"}
1
+ {"version":3,"file":"RadioGroup.js","names":["MantineRadio","MantineGroup"],"sources":["../../../../src/components/controls/radio/RadioGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n radioDescription,\n radioError,\n radioGroupRoot,\n radioLabel,\n radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Group as MantineGroup, Radio as MantineRadio } from '@mantine/core';\n\nexport type RadioGroupProps = {\n label?: ReactNode;\n error?: ReactNode;\n description?: ReactNode;\n children?: ReactNode;\n value?: string;\n name?: string;\n onChange?: (value: string) => void;\n classNames?: {\n root?: string;\n radio?: string;\n icon?: string;\n inner?: string;\n body?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n groupRoot?: string;\n };\n};\n\nexport const RadioGroup = ({\n classNames,\n children,\n ...props\n}: RadioGroupProps): ReactNode => {\n return (\n <MantineRadio.Group\n classNames={{\n root: classNames?.root ?? radioRoot(),\n label: classNames?.label ?? radioLabel(),\n description: classNames?.description ?? radioDescription(),\n error: classNames?.error ?? radioError(),\n }}\n {...props}\n >\n <MantineGroup\n classNames={{\n root: classNames?.groupRoot ?? radioGroupRoot(),\n }}\n >\n {children}\n </MantineGroup>\n </MantineRadio.Group>\n );\n};\n\nRadioGroup.displayName = 'Radio.Group';\n"],"mappings":"8NAiCA,MAAa,EAAa,CAAC,CACzB,aACA,WACA,GAAG,EACa,GAEd,EAACA,EAAa,MAAA,CACZ,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,WAEJ,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,WAAa,GAAgB,AAChD,EAEA,YACY,EACI,CAIzB,EAAW,YAAc"}
@@ -0,0 +1,36 @@
1
+ import { ReactNode } from "react";
2
+
3
+ //#region src/components/controls/radio/RadioIcon.d.ts
4
+ type RadioIconProps = {
5
+ label?: ReactNode;
6
+ icon: string;
7
+ a11yText?: string;
8
+ value?: string;
9
+ name?: string;
10
+ disabled?: boolean;
11
+ checked?: boolean;
12
+ classNames?: {
13
+ root?: string;
14
+ radio?: string;
15
+ icon?: string;
16
+ inner?: string;
17
+ body?: string;
18
+ labelWrapper?: string;
19
+ label?: string;
20
+ description?: string;
21
+ error?: string;
22
+ };
23
+ };
24
+ declare const RadioIcon: {
25
+ ({
26
+ icon,
27
+ a11yText,
28
+ classNames,
29
+ ...props
30
+ }: RadioIconProps): ReactNode;
31
+ displayName: string;
32
+ };
33
+ //# sourceMappingURL=RadioIcon.d.ts.map
34
+ //#endregion
35
+ export { RadioIcon, RadioIconProps };
36
+ //# sourceMappingURL=RadioIcon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RadioIcon.d.ts","names":[],"sources":["../../../../src/components/controls/radio/RadioIcon.tsx"],"sourcesContent":[],"mappings":";;;KAiBY,cAAA;UACF;EADE,IAAA,EAAA,MAAA;EA8BC,QAAA,CAAA,EAAA,MAwBZ;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,IAAA,CAAA,EAAA,MAAA;;;YAnBE,CAAA,EAAA;IAAiB,IAAA,CAAA,EAAA,MAAA;IAAS,KAAA,CAAA,EAAA,MAAA;;;;;;;;;;cALhB;;;;;;KAKV,iBAAiB"}