@mage-ui/components 0.0.70 → 0.0.72

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

@@ -11,6 +11,7 @@ type DatePickerProps = {
   error?: string;
   classNames?: DatePickerClassNames;
   value?: DatePickerValue;
+  locale?: string;
   onChange?: (date: Date | string | null) => void;
 };
 declare const DatePicker: ({
@@ -19,6 +20,7 @@ declare const DatePicker: ({
   placeholder,
   description,
   icon,
+  locale,
   ...props
 }: DatePickerProps) => ReactNode;
 type DatePickerClassNames = InputClassNamesType & CalenderHeaderClassNamesType & CalendarMonthClassNamesType & CalendarMonthsListClassNamesType & CalendarYearsListClassNamesType & PopoverClassNamesType;

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;YACU,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;MAAA,CAAA,EAAA,MAAA;SAAA,CAAA,EAAA,MAAA;OAOxB,CAAA,EAAA,MAAA;OAAkB,CAAA,EAAA,MAAA;EAcpB,KAAA,CAAA,EAAA,MAAA;EAEI,WAAA,CAAA,EAAA,MAAA;EAAoB,WAAA,CAAA,EAAA,MAAA;SAAG,CAAA,EAAA,MAAA;;KA+BvB,4BAAA,GA7BH;oBACA,CAAA,EAAA,MAAA;uBACA,CAAA,EAAA,MAAA;gBACA,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"}
+{"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;YAEU,CAAA,EAHL,oBAGK;EAAI,KAAA,CAAA,EAFd,eAEc;EAGX,MAAA,CAAA,EAAA,MAuBZ;EAAA,QAAA,CAAA,EAAA,CAAA,IAAA,EA1BmB,IA0BnB,GAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;;AAvB0B,cAAd,UAAc,EAAA,CAAA;EAAA,UAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,IAAA;EAAA,MAAA;EAAA,GAAA;AAAA,CAAA,EAQxB,eARwB,EAAA,GAQN,SARM;KAyBtB,oBAAA,GAAuB,mBAzBD,GA0BzB,4BA1ByB,GA2BzB,2BA3ByB,GA4BzB,gCA5ByB,GA6BzB,+BA7ByB,GA8BzB,qBA9ByB;KAgCtB,mBAAA,GAhCsB;MAAA,CAAA,EAAA,MAAA;SAAA,CAAA,EAAA,MAAA;OAQxB,CAAA,EAAA,MAAA;OAAkB,CAAA,EAAA,MAAA;EAepB,KAAA,CAAA,EAAA,MAAA;EAEI,WAAA,CAAA,EAAA,MAAA;EAAoB,WAAA,CAAA,EAAA,MAAA;SAAG,CAAA,EAAA,MAAA;;KA+BvB,4BAAA,GA7BH;oBACA,CAAA,EAAA,MAAA;uBACA,CAAA,EAAA,MAAA;gBACA,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"}

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

@@ -1,2 +1,2 @@
-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};
+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,locale:a,...o})=>D(k,{locale:a??`en`,label:t??`Pick date`,placeholder:n??`Pick date`,description:r??`Select a date`,classNames:L(e),popoverProps:{classNames:I(e)},rightSection:i,...o}),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};
 //# sourceMappingURL=DatePicker.js.map

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  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":"6wBA8CA,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  onChange?: (date: Date | string | null) => void;\n};\n\nexport const DatePicker = ({\n  classNames,\n  label,\n  placeholder,\n  description,\n  icon,\n  locale,\n  ...props\n}: DatePickerProps): ReactNode => {\n  return (\n    <DatePickerInput\n      locale={locale ?? 'en'}\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":"6wBA+CA,MAAa,GAAc,CACzB,aACA,QACA,cACA,cACA,KAAA,EACA,SACA,GAAG,KAGD,EAAC,EAAA,CACC,OAAQ,GAAU,KAClB,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/forms/form/Form.d.ts

@@ -12,6 +12,7 @@ import { FormInputFileProps } from "./controls/FormInputFile.js";
 import { FormInputPasswordProps } from "./controls/FormInputPassword.js";
 import { FormIfFieldProps } from "./controls/FormIfField.js";
 import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react0 from "react";
 import { ReactNode } from "react";
 import { ZodEffects, ZodObject, ZodRawShape, z } from "zod";
 
@@ -196,6 +197,15 @@ declare const Form: {
     }: FormIfFieldProps): ReactNode;
     displayName: string;
   };
+  Control: {
+    ({
+      children,
+      ...props
+    }: {
+      children: ReactNode;
+    } & Record<string, unknown>): (string | number | bigint | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react0.ReactPortal | react0.ReactElement<unknown, string | react0.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react0.ReactElement<unknown, string | react0.JSXElementConstructor<any>>)[] | null | undefined;
+    displayName: string;
+  };
 };
 //#endregion
 export { Form, FormProps };

package/dist/components/forms/form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","names":[],"sources":["../../../../src/components/forms/form/Form.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;KAwBY,SAAA;;UAEF,UAAU,eAAe,WAAW,UAAU;;YAE5C,KAAA,CAAM;;;cAIL;;;;;;;;KAOV,YAAS,mBAAA,CAAA,GAAA,CAAA;;;;OAAA;;;;;;EAfA,QAAA,EAAA;IAAS,CAAA;MAAA,IAAA;MAAA,OAAA;MAAA,GAAA;IAAA,CAAA,mBAAA,CAAA,iCAAA;IAED,WAAA,EAAA,MAAA;IAAV,KAAA,EAAA;MAA8C,QAAA,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,aAAA,aAAA,EAAA,OAAA,EAAA,OAAA,CAAA;IAAV,CAAA;;eAE5B,EAAA;IAAS,CAAA;MAAA,IAAA;MAAA,OAAA;MAAA,QAAA;MAAA,GAAA;IAAA,CAAA,wBAAA,CAAA,iCAAA;IAId,WAmCZ,EAAA,MAAA;IAAA,KAAA,EAAA;;;;;;;;;IA5BE,CAAA;;UAAS,EAAA"}
+{"version":3,"file":"Form.d.ts","names":[],"sources":["../../../../src/components/forms/form/Form.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;KAyBY,SAAA;;UAEF,UAAU,eAAe,WAAW,UAAU;;YAE5C,KAAA,CAAM;;;cAIL;;;;;;;;KAOV,YAAS,mBAAA,CAAA,GAAA,CAAA;;;;OAAA;;;;;;;IAfA,CAAA;MAAA,IAAA;MAAS,OAAA;MAAA,GAAA;IAAA,CAAA,mBAAA,CAAA,iCAAA;IAAA,WAAA,EAAA,MAAA;IAED,KAAA,EAAA;MAAV,QAAA,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,aAAA,aAAA,EAAA,OAAA,EAAA,OAAA,CAAA;IAA8C,CAAA;;eAArB,EAAA;IAEvB,CAAA;MAAA,IAAM;MAAA,OAAA;MAAA,QAAA;MAAA,GAAA;IAAA,CAAA,wBAAA,CAAA,iCAAA;IAAS,WAAA,EAAA,MAAA;IAId,KAmCZ,EAAA;MAAA,QAAA,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,aAAA,YAAA,EAAA,MAAA,CAAA;;;;;;;;;;UA5BW,EAAA;IAAA,CAAA;MAAA,IAAA;MAAA,OAAA;MAAA,GAAA;IAAA,CAAA,mBAAA,CAAA,iCAAA"}

package/dist/components/forms/form/Form.js

@@ -1,2 +1,2 @@
-import{FormCheckbox as e}from"./controls/FormCheckbox.js";import{FormCheckboxGroup as t}from"./controls/FormCheckboxGroup.js";import{FormCombobox as n}from"./controls/FormCombobox.js";import{FormDatePicker as r}from"./controls/FormDatePicker.js";import{FormIfField as i}from"./controls/FormIfField.js";import{FormInputFile as a}from"./controls/FormInputFile.js";import{FormInputPassword as o}from"./controls/FormInputPassword.js";import{FormInputText as s}from"./controls/FormInputText.js";import{FormRadio as c}from"./controls/FormRadio.js";import{FormRadioGroup as l}from"./controls/FormRadioGroup.js";import{FormSelect as u}from"./controls/FormSelect.js";import{FormTextarea as d}from"./controls/FormTextarea.js";import{jsx as f}from"react/jsx-runtime";import{Children as p,cloneElement as m,isValidElement as h}from"react";import{FormProvider as g,useForm as _}from"react-hook-form";import{ZodEffects as v,z as y}from"zod";import{zodResolver as b}from"@hookform/resolvers/zod";const x=({defaultValues:e,rules:t=y.object({}).refine(()=>{}),onSubmit:n,children:r,className:i,...a})=>{let o=t instanceof v?t._def.schema:t,s=_({shouldFocusError:!0,...t&&Object.keys(o?.shape||{}).length>0?{resolver:b(o)}:{},defaultValues:e}),{register:c,handleSubmit:l,formState:{errors:u}}=s;return f(g,{...s,children:f(`form`,{onSubmit:l(n),className:i??void 0,...a,children:w(r,c,u,o)})})},S=[s,t,e,n,l,c,d,u,r,a,o,i],C=(e,t)=>{let n=e?.shape?.[t]||void 0;return n===void 0?!1:!(n.isOptional()||n.isNullable())},w=(e,t,n,r)=>p.map(e,e=>{if(!h(e))return e;let i=e.props;if(S.some(t=>e.type===t)&&i.name){let a={required:C(r,i.name),error:n[i.name]?.message,...i,...t(i.name,{setValueAs:e=>e===``||e===null?void 0:e})};return m(e,a)}return i.children?m(e,i,w(i.children,t,n,r)):e});x.InputText=s,x.Checkbox=e,x.CheckboxGroup=t,x.Combobox=n,x.RadioGroup=l,x.Radio=c,x.Textarea=d,x.Select=u,x.DatePicker=r,x.InputFile=a,x.InputPassword=o,x.IfField=i;export{x as Form};
+import{FormCheckbox as e}from"./controls/FormCheckbox.js";import{FormCheckboxGroup as t}from"./controls/FormCheckboxGroup.js";import{FormCombobox as n}from"./controls/FormCombobox.js";import{FormControl as r}from"./controls/FormControl.js";import{FormDatePicker as i}from"./controls/FormDatePicker.js";import{FormIfField as a}from"./controls/FormIfField.js";import{FormInputFile as o}from"./controls/FormInputFile.js";import{FormInputPassword as s}from"./controls/FormInputPassword.js";import{FormInputText as c}from"./controls/FormInputText.js";import{FormRadio as l}from"./controls/FormRadio.js";import{FormRadioGroup as u}from"./controls/FormRadioGroup.js";import{FormSelect as d}from"./controls/FormSelect.js";import{FormTextarea as f}from"./controls/FormTextarea.js";import{jsx as p}from"react/jsx-runtime";import{Children as m,cloneElement as h,isValidElement as g}from"react";import{FormProvider as _,useForm as v}from"react-hook-form";import{ZodEffects as y,z as b}from"zod";import{zodResolver as x}from"@hookform/resolvers/zod";const S=({defaultValues:e,rules:t=b.object({}).refine(()=>{}),onSubmit:n,children:r,className:i,...a})=>{let o=t instanceof y?t._def.schema:t,s=v({shouldFocusError:!0,...t&&Object.keys(o?.shape||{}).length>0?{resolver:x(o)}:{},defaultValues:e}),{register:c,handleSubmit:l,formState:{errors:u}}=s;return p(_,{...s,children:p(`form`,{onSubmit:l(n),className:i??void 0,...a,children:T(r,c,u,o)})})},C=[c,t,e,n,u,l,f,d,i,o,s,a,r],w=(e,t)=>{let n=e?.shape?.[t]||void 0;return n===void 0?!1:!(n.isOptional()||n.isNullable())},T=(e,t,n,r)=>m.map(e,e=>{if(!g(e))return e;let i=e.props;if(C.some(t=>e.type===t)&&i.name){let a={required:w(r,i.name),error:n[i.name]?.message,...i,...t(i.name,{setValueAs:e=>e===``||e===null?void 0:e})};return h(e,a)}return i.children?h(e,i,T(i.children,t,n,r)):e});S.InputText=c,S.Checkbox=e,S.CheckboxGroup=t,S.Combobox=n,S.RadioGroup=u,S.Radio=l,S.Textarea=f,S.Select=d,S.DatePicker=i,S.InputFile=o,S.InputPassword=s,S.IfField=a,S.Control=r;export{S as Form};
 //# sourceMappingURL=Form.js.map

package/dist/components/forms/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":["schema: ZodObject<ZodRawShape>"],"sources":["../../../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, type ReactNode } from 'react';\nimport {\n  type FieldErrors,\n  FormProvider,\n  type UseFormRegister,\n  useForm,\n} from 'react-hook-form';\nimport { ZodEffects, type ZodObject, type ZodRawShape, z } from 'zod';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\n\nimport { FormCheckbox } from './controls/FormCheckbox';\nimport { FormCheckboxGroup } from './controls/FormCheckboxGroup';\nimport { FormCombobox } from './controls/FormCombobox';\nimport { FormDatePicker } from './controls/FormDatePicker';\nimport { FormIfField } from './controls/FormIfField';\nimport { FormInputFile } from './controls/FormInputFile';\nimport { FormInputPassword } from './controls/FormInputPassword';\nimport { FormInputText } from './controls/FormInputText';\nimport { FormRadio } from './controls/FormRadio';\nimport { FormRadioGroup } from './controls/FormRadioGroup';\nimport { FormSelect } from './controls/FormSelect';\nimport { FormTextarea } from './controls/FormTextarea';\n\nexport type FormProps = {\n  defaultValues?: object;\n  rules?: ZodObject<ZodRawShape> | ZodEffects<ZodObject<ZodRawShape>>;\n  onSubmit: (formData: object) => void;\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport const Form = ({\n  defaultValues,\n  rules = z.object({}).refine(() => {}),\n  onSubmit,\n  children,\n  className,\n  ...props\n}: FormProps) => {\n  const schema: ZodObject<ZodRawShape> =\n    rules instanceof ZodEffects ? rules._def.schema : rules;\n\n  const form = useForm({\n    shouldFocusError: true,\n    ...(rules && Object.keys(schema?.shape || {}).length > 0\n      ? { resolver: zodResolver(schema) }\n      : {}),\n    defaultValues,\n  });\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = form;\n\n  return (\n    <FormProvider {...form}>\n      <form\n        onSubmit={handleSubmit(onSubmit)}\n        className={className ?? undefined}\n        {...props}\n      >\n        {renderChildrenRecursively(children, register, errors, schema)}\n      </form>\n    </FormProvider>\n  );\n};\n\nconst controlList = [\n  FormInputText,\n  FormCheckboxGroup,\n  FormCheckbox,\n  FormCombobox,\n  FormRadioGroup,\n  FormRadio,\n  FormTextarea,\n  FormSelect,\n  FormDatePicker,\n  FormInputFile,\n  FormInputPassword,\n  FormIfField,\n];\n\nconst isRequired = (schema: ZodObject<ZodRawShape>, field: string) => {\n  const shape = schema?.shape?.[field] || undefined;\n  if (shape === undefined) {\n    return false;\n  }\n\n  return !(shape.isOptional() || shape.isNullable());\n};\n\nconst renderChildrenRecursively = (\n  children: React.ReactNode,\n  register: UseFormRegister<Record<string, string>>,\n  errors: FieldErrors,\n  rules: ZodObject<ZodRawShape>,\n): ReactNode => {\n  return Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const props = child.props as {\n      name?: string;\n      type?: string;\n      children?: ReactNode;\n    };\n\n    if (controlList.some((control) => child.type === control)) {\n      if (props.name) {\n        const newProps = {\n          required: isRequired(rules, props.name),\n          error: errors[props.name]?.message,\n          ...props,\n          ...register(props.name, {\n            setValueAs: (value: unknown) => {\n              return value === '' || value === null ? undefined : value;\n            },\n          }),\n        };\n        return cloneElement(child, newProps);\n      }\n    }\n\n    if (props.children) {\n      return cloneElement(\n        child,\n        props,\n        renderChildrenRecursively(props.children, register, errors, rules),\n      );\n    }\n\n    return child;\n  });\n};\n\nForm.InputText = FormInputText;\nForm.Checkbox = FormCheckbox;\nForm.CheckboxGroup = FormCheckboxGroup;\nForm.Combobox = FormCombobox;\nForm.RadioGroup = FormRadioGroup;\nForm.Radio = FormRadio;\nForm.Textarea = FormTextarea;\nForm.Select = FormSelect;\nForm.DatePicker = FormDatePicker;\nForm.InputFile = FormInputFile;\nForm.InputPassword = FormInputPassword;\nForm.IfField = FormIfField;\n"],"mappings":"q9BAgCA,MAAa,GAAQ,CACnB,gBACA,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,WAAa,GAAG,CACrC,WACA,WACA,YACA,GAAG,KACY,CACf,IAAMA,EACJ,aAAiB,EAAa,EAAM,KAAK,OAAS,EAE9C,EAAO,EAAQ,CACnB,iBAAkB,GAClB,GAAI,GAAS,OAAO,KAAK,GAAQ,OAAS,EAAE,CAAC,CAAC,OAAS,EACnD,CAAE,SAAU,EAAY,EAAO,CAAE,CACjC,EAAE,CACN,gBACD,CAAC,CACI,CACJ,WACA,eACA,UAAW,CAAE,WACX,EAEJ,OACE,EAAC,EAAA,CAAa,GAAI,WAChB,EAAC,OAAA,CACC,SAAU,EAAa,EAAS,CAChC,UAAW,GAAa,IAAA,GACxB,GAAI,WAEH,EAA0B,EAAU,EAAU,EAAQ,EAAO,EACzD,EACM,EAIb,EAAc,CAClB,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CAEK,GAAc,EAAgC,IAAkB,CACpE,IAAM,EAAQ,GAAQ,QAAQ,IAAU,IAAA,GAKxC,OAJI,IAAU,IAAA,GACL,GAGF,EAAE,EAAM,YAAY,EAAI,EAAM,YAAY,GAG7C,GACJ,EACA,EACA,EACA,IAEO,EAAS,IAAI,EAAW,GAAU,CACvC,GAAI,CAAC,EAAe,EAAM,CACxB,OAAO,EAGT,IAAM,EAAQ,EAAM,MAMpB,GAAI,EAAY,KAAM,GAAY,EAAM,OAAS,EAAQ,EACnD,EAAM,KAAM,CACd,IAAM,EAAW,CACf,SAAU,EAAW,EAAO,EAAM,KAAK,CACvC,MAAO,EAAO,EAAM,OAAO,QAC3B,GAAG,EACH,GAAG,EAAS,EAAM,KAAM,CACtB,WAAa,GACJ,IAAU,IAAM,IAAU,KAAO,IAAA,GAAY,EAEvD,CAAC,CACH,CACD,OAAO,EAAa,EAAO,EAAS,CAYxC,OARI,EAAM,SACD,EACL,EACA,EACA,EAA0B,EAAM,SAAU,EAAU,EAAQ,EAAM,CACnE,CAGI,GACP,CAGJ,EAAK,UAAY,EACjB,EAAK,SAAW,EAChB,EAAK,cAAgB,EACrB,EAAK,SAAW,EAChB,EAAK,WAAa,EAClB,EAAK,MAAQ,EACb,EAAK,SAAW,EAChB,EAAK,OAAS,EACd,EAAK,WAAa,EAClB,EAAK,UAAY,EACjB,EAAK,cAAgB,EACrB,EAAK,QAAU"}
+{"version":3,"file":"Form.js","names":["schema: ZodObject<ZodRawShape>"],"sources":["../../../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, type ReactNode } from 'react';\nimport {\n  type FieldErrors,\n  FormProvider,\n  type UseFormRegister,\n  useForm,\n} from 'react-hook-form';\nimport { ZodEffects, type ZodObject, type ZodRawShape, z } from 'zod';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\n\nimport { FormCheckbox } from './controls/FormCheckbox';\nimport { FormCheckboxGroup } from './controls/FormCheckboxGroup';\nimport { FormCombobox } from './controls/FormCombobox';\nimport { FormControl } from './controls/FormControl';\nimport { FormDatePicker } from './controls/FormDatePicker';\nimport { FormIfField } from './controls/FormIfField';\nimport { FormInputFile } from './controls/FormInputFile';\nimport { FormInputPassword } from './controls/FormInputPassword';\nimport { FormInputText } from './controls/FormInputText';\nimport { FormRadio } from './controls/FormRadio';\nimport { FormRadioGroup } from './controls/FormRadioGroup';\nimport { FormSelect } from './controls/FormSelect';\nimport { FormTextarea } from './controls/FormTextarea';\n\nexport type FormProps = {\n  defaultValues?: object;\n  rules?: ZodObject<ZodRawShape> | ZodEffects<ZodObject<ZodRawShape>>;\n  onSubmit: (formData: object) => void;\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport const Form = ({\n  defaultValues,\n  rules = z.object({}).refine(() => {}),\n  onSubmit,\n  children,\n  className,\n  ...props\n}: FormProps) => {\n  const schema: ZodObject<ZodRawShape> =\n    rules instanceof ZodEffects ? rules._def.schema : rules;\n\n  const form = useForm({\n    shouldFocusError: true,\n    ...(rules && Object.keys(schema?.shape || {}).length > 0\n      ? { resolver: zodResolver(schema) }\n      : {}),\n    defaultValues,\n  });\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = form;\n\n  return (\n    <FormProvider {...form}>\n      <form\n        onSubmit={handleSubmit(onSubmit)}\n        className={className ?? undefined}\n        {...props}\n      >\n        {renderChildrenRecursively(children, register, errors, schema)}\n      </form>\n    </FormProvider>\n  );\n};\n\nconst controlList = [\n  FormInputText,\n  FormCheckboxGroup,\n  FormCheckbox,\n  FormCombobox,\n  FormRadioGroup,\n  FormRadio,\n  FormTextarea,\n  FormSelect,\n  FormDatePicker,\n  FormInputFile,\n  FormInputPassword,\n  FormIfField,\n  FormControl,\n];\n\nconst isRequired = (schema: ZodObject<ZodRawShape>, field: string) => {\n  const shape = schema?.shape?.[field] || undefined;\n  if (shape === undefined) {\n    return false;\n  }\n\n  return !(shape.isOptional() || shape.isNullable());\n};\n\nconst renderChildrenRecursively = (\n  children: React.ReactNode,\n  register: UseFormRegister<Record<string, string>>,\n  errors: FieldErrors,\n  rules: ZodObject<ZodRawShape>,\n): ReactNode => {\n  return Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const props = child.props as {\n      name?: string;\n      type?: string;\n      children?: ReactNode;\n    };\n\n    if (controlList.some((control) => child.type === control)) {\n      if (props.name) {\n        const newProps = {\n          required: isRequired(rules, props.name),\n          error: errors[props.name]?.message,\n          ...props,\n          ...register(props.name, {\n            setValueAs: (value: unknown) => {\n              return value === '' || value === null ? undefined : value;\n            },\n          }),\n        };\n        return cloneElement(child, newProps);\n      }\n    }\n\n    if (props.children) {\n      return cloneElement(\n        child,\n        props,\n        renderChildrenRecursively(props.children, register, errors, rules),\n      );\n    }\n\n    return child;\n  });\n};\n\nForm.InputText = FormInputText;\nForm.Checkbox = FormCheckbox;\nForm.CheckboxGroup = FormCheckboxGroup;\nForm.Combobox = FormCombobox;\nForm.RadioGroup = FormRadioGroup;\nForm.Radio = FormRadio;\nForm.Textarea = FormTextarea;\nForm.Select = FormSelect;\nForm.DatePicker = FormDatePicker;\nForm.InputFile = FormInputFile;\nForm.InputPassword = FormInputPassword;\nForm.IfField = FormIfField;\nForm.Control = FormControl;\n"],"mappings":"6gCAiCA,MAAa,GAAQ,CACnB,gBACA,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,WAAa,GAAG,CACrC,WACA,WACA,YACA,GAAG,KACY,CACf,IAAMA,EACJ,aAAiB,EAAa,EAAM,KAAK,OAAS,EAE9C,EAAO,EAAQ,CACnB,iBAAkB,GAClB,GAAI,GAAS,OAAO,KAAK,GAAQ,OAAS,EAAE,CAAC,CAAC,OAAS,EACnD,CAAE,SAAU,EAAY,EAAO,CAAE,CACjC,EAAE,CACN,gBACD,CAAC,CACI,CACJ,WACA,eACA,UAAW,CAAE,WACX,EAEJ,OACE,EAAC,EAAA,CAAa,GAAI,WAChB,EAAC,OAAA,CACC,SAAU,EAAa,EAAS,CAChC,UAAW,GAAa,IAAA,GACxB,GAAI,WAEH,EAA0B,EAAU,EAAU,EAAQ,EAAO,EACzD,EACM,EAIb,EAAc,CAClB,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CAEK,GAAc,EAAgC,IAAkB,CACpE,IAAM,EAAQ,GAAQ,QAAQ,IAAU,IAAA,GAKxC,OAJI,IAAU,IAAA,GACL,GAGF,EAAE,EAAM,YAAY,EAAI,EAAM,YAAY,GAG7C,GACJ,EACA,EACA,EACA,IAEO,EAAS,IAAI,EAAW,GAAU,CACvC,GAAI,CAAC,EAAe,EAAM,CACxB,OAAO,EAGT,IAAM,EAAQ,EAAM,MAMpB,GAAI,EAAY,KAAM,GAAY,EAAM,OAAS,EAAQ,EACnD,EAAM,KAAM,CACd,IAAM,EAAW,CACf,SAAU,EAAW,EAAO,EAAM,KAAK,CACvC,MAAO,EAAO,EAAM,OAAO,QAC3B,GAAG,EACH,GAAG,EAAS,EAAM,KAAM,CACtB,WAAa,GACJ,IAAU,IAAM,IAAU,KAAO,IAAA,GAAY,EAEvD,CAAC,CACH,CACD,OAAO,EAAa,EAAO,EAAS,CAYxC,OARI,EAAM,SACD,EACL,EACA,EACA,EAA0B,EAAM,SAAU,EAAU,EAAQ,EAAM,CACnE,CAGI,GACP,CAGJ,EAAK,UAAY,EACjB,EAAK,SAAW,EAChB,EAAK,cAAgB,EACrB,EAAK,SAAW,EAChB,EAAK,WAAa,EAClB,EAAK,MAAQ,EACb,EAAK,SAAW,EAChB,EAAK,OAAS,EACd,EAAK,WAAa,EAClB,EAAK,UAAY,EACjB,EAAK,cAAgB,EACrB,EAAK,QAAU,EACf,EAAK,QAAU"}

package/dist/components/forms/form/controls/FormControl.js

@@ -0,0 +1,2 @@
+import{Children as e,cloneElement as t,isValidElement as n}from"react";const r=({children:r,...i})=>e.map(r,e=>n(e)?t(e,{...e.props,...i}):e);r.displayName=`Form.Control`;export{r as FormControl};
+//# sourceMappingURL=FormControl.js.map

package/dist/components/forms/form/controls/FormControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../../../src/components/forms/form/controls/FormControl.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, type ReactNode } from 'react';\n\ntype FormControlProps = { children: ReactNode } & Record<string, unknown>;\n\nexport const FormControl = ({ children, ...props }: FormControlProps) => {\n  return Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        ...(child.props as Record<string, unknown>),\n        ...(props as Record<string, unknown>),\n      });\n    }\n    return child;\n  });\n};\n\nFormControl.displayName = 'Form.Control';\n"],"mappings":"uEAIA,MAAa,GAAe,CAAE,WAAU,GAAG,KAClC,EAAS,IAAI,EAAW,GACzB,EAAe,EAAM,CAChB,EAAa,EAAO,CACzB,GAAI,EAAM,MACV,GAAI,EACL,CAAC,CAEG,EACP,CAGJ,EAAY,YAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "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.70",
-    "@mage-ui/styled-system": "0.0.70"
+    "@mage-ui/preset": "0.0.72",
+    "@mage-ui/styled-system": "0.0.72"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.2",