@oneplatformdev/ui 0.1.99-beta.242 → 0.1.99-beta.245

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 (172) hide show
  1. package/.storybook/Wrappers.js.map +1 -1
  2. package/Accordion/Accordion.js.map +1 -1
  3. package/Alert/Alert.js.map +1 -1
  4. package/Alert/alertVariants.js.map +1 -1
  5. package/AlertDialog/AlertDialog.js.map +1 -1
  6. package/AlertDialog/AlertDialog.stories.js +2 -4
  7. package/AlertDialog/AlertDialog.stories.js.map +1 -1
  8. package/AlertDialog/AlertDialogRoot.js +18 -20
  9. package/AlertDialog/AlertDialogRoot.js.map +1 -1
  10. package/AreaChart/AreaChart.js.map +1 -1
  11. package/Aside/Aside.js.map +1 -1
  12. package/Aside/AsideSidebar.js.map +1 -1
  13. package/AspectRatio/AspectRatio.js.map +1 -1
  14. package/Avatar/Avatar.js.map +1 -1
  15. package/Badge/Badge.js.map +1 -1
  16. package/Badge/badgeVariants.js.map +1 -1
  17. package/Breadcrumb/Breadcrumb.js.map +1 -1
  18. package/Button/Button.js +10 -11
  19. package/Button/Button.js.map +1 -1
  20. package/Button/Button.stories.js.map +1 -1
  21. package/Button/Button.utils.js.map +1 -1
  22. package/Button/ButtonCounterBadge.js.map +1 -1
  23. package/Button/buttonVariants.js.map +1 -1
  24. package/ButtonIcon/ButtonIcon.js +19 -22
  25. package/ButtonIcon/ButtonIcon.js.map +1 -1
  26. package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
  27. package/ButtonIcon/buttonIconVariants.js.map +1 -1
  28. package/CHANGELOG.md +3241 -3225
  29. package/Calendar/Calendar.js +4 -6
  30. package/Calendar/Calendar.js.map +1 -1
  31. package/Card/Card.js.map +1 -1
  32. package/Carousel/Carousel.js +6 -7
  33. package/Carousel/Carousel.js.map +1 -1
  34. package/Chart/Chart.js.map +1 -1
  35. package/Checkbox/Checkbox.js +0 -1
  36. package/Checkbox/Checkbox.js.map +1 -1
  37. package/Checkbox/Checkbox.stories.js.map +1 -1
  38. package/Collapsible/Collapsible.js.map +1 -1
  39. package/Combobox/Combobox.js +10 -10
  40. package/Combobox/Combobox.js.map +1 -1
  41. package/Combobox/Combobox.stories.js.map +1 -1
  42. package/Combobox/Combobox.types.js.map +1 -1
  43. package/Combobox/ComboboxOptionItem.js +19 -20
  44. package/Combobox/ComboboxOptionItem.js.map +1 -1
  45. package/Combobox/ComboboxRenderContent.js +14 -15
  46. package/Combobox/ComboboxRenderContent.js.map +1 -1
  47. package/Combobox/ComboboxRenderOptions.js +5 -5
  48. package/Combobox/ComboboxRenderOptions.js.map +1 -1
  49. package/Combobox/ComboboxRenderTrigger.js +28 -30
  50. package/Combobox/ComboboxRenderTrigger.js.map +1 -1
  51. package/Command/Command.js +21 -22
  52. package/Command/Command.js.map +1 -1
  53. package/ContextPopover/ContextDropdownMenu.js.map +1 -1
  54. package/ContextPopover/ContextPopover.js.map +1 -1
  55. package/ContextPopover/useContextPopoverHandler.js.map +1 -1
  56. package/DataTable/DataTable.js +24 -26
  57. package/DataTable/DataTable.js.map +1 -1
  58. package/DataTable/DataTableColumnFilter.js +6 -7
  59. package/DataTable/DataTableColumnFilter.js.map +1 -1
  60. package/DataTable/useDataTable.js.map +1 -1
  61. package/DatePicker/DatePicker.js +12 -13
  62. package/DatePicker/DatePicker.js.map +1 -1
  63. package/Dialog/Dialog.js +16 -17
  64. package/Dialog/Dialog.js.map +1 -1
  65. package/Dialog/Dialog.stories.js +14 -15
  66. package/Dialog/Dialog.stories.js.map +1 -1
  67. package/Dialog/DialogOverlayScope.js.map +1 -1
  68. package/Drawer/Drawer.js.map +1 -1
  69. package/DropdownMenu/DropdownMenu.js.map +1 -1
  70. package/Dropzone/Dropzone.js.map +1 -1
  71. package/Dropzone/Dropzone.stories.js.map +1 -1
  72. package/Dropzone/Dropzone.types.js.map +1 -1
  73. package/Dropzone/DropzoneFilePreview.js.map +1 -1
  74. package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
  75. package/Dropzone/DropzoneUtils.js.map +1 -1
  76. package/Form/Form.js +14 -15
  77. package/Form/Form.js.map +1 -1
  78. package/Form/FormRenderControl.js +6 -7
  79. package/Form/FormRenderControl.js.map +1 -1
  80. package/Form/Form_old.js +4 -5
  81. package/Form/Form_old.js.map +1 -1
  82. package/FormCheckbox/FormCheckbox.js +4 -4
  83. package/FormCheckbox/FormCheckbox.js.map +1 -1
  84. package/FormCombobox/FormCombobox.js +4 -4
  85. package/FormCombobox/FormCombobox.js.map +1 -1
  86. package/FormDatePicker/FormDatePicker.js +4 -4
  87. package/FormDatePicker/FormDatePicker.js.map +1 -1
  88. package/FormDropzone/FormDropzone.js +3 -3
  89. package/FormDropzone/FormDropzone.js.map +1 -1
  90. package/FormInput/FormInput.js +6 -6
  91. package/FormInput/FormInput.js.map +1 -1
  92. package/FormInput/FormInput.stories.js +5 -5
  93. package/FormInput/FormInput.stories.js.map +1 -1
  94. package/FormRadio/FormRadio.js.map +1 -1
  95. package/FormSelect/FormSelect.js +6 -9
  96. package/FormSelect/FormSelect.js.map +1 -1
  97. package/FormTextarea/FormTextarea.js +4 -4
  98. package/FormTextarea/FormTextarea.js.map +1 -1
  99. package/Header/Header.js.map +1 -1
  100. package/HoverCard/HoverCard.js.map +1 -1
  101. package/InfoBlock/InfoBlock.js.map +1 -1
  102. package/InfoBlock/InfoBlock.stories.js.map +1 -1
  103. package/InfoBlock/infoBlockVariants.js.map +1 -1
  104. package/Input/Input.js.map +1 -1
  105. package/Input/Input.stories.js +154 -0
  106. package/Input/Input.stories.js.map +1 -0
  107. package/Input/inputVariants.js.map +1 -1
  108. package/InputOTP/InputOTP.d.ts.map +1 -1
  109. package/InputOTP/InputOTP.js.map +1 -1
  110. package/LICENSE +21 -21
  111. package/Label/Label.js.map +1 -1
  112. package/Label/labelVariants.js.map +1 -1
  113. package/LazyLoader/LazyLoader.js +4 -5
  114. package/LazyLoader/LazyLoader.js.map +1 -1
  115. package/LoadedIcon/LoadedIcon.js.map +1 -1
  116. package/LoadingMask/LoadingMask.js.map +1 -1
  117. package/LoadingMask/RenderLoadingMask.js.map +1 -1
  118. package/LoadingProgress/LoadingProgress.js.map +1 -1
  119. package/LoadingProgress/loadingProgressVariants.js.map +1 -1
  120. package/Menubar/Menubar.js.map +1 -1
  121. package/NavigationMenu/NavigationMenu.js.map +1 -1
  122. package/NavigationMenu/navigationMenuVariants.js.map +1 -1
  123. package/Pagination/Pagination.js +0 -1
  124. package/Pagination/Pagination.js.map +1 -1
  125. package/Popover/Popover.js.map +1 -1
  126. package/Progress/Progress.js.map +1 -1
  127. package/README.md +7 -7
  128. package/Radio/Radio.js.map +1 -1
  129. package/RadioGroup/RadioGroup.js.map +1 -1
  130. package/Resizable/Resizable.js.map +1 -1
  131. package/Resizable/Resizable.stories.js.map +1 -1
  132. package/ScrollArea/ScrollArea.js.map +1 -1
  133. package/Search/Search.js +9 -9
  134. package/Search/Search.js.map +1 -1
  135. package/Search/Search.stories.js.map +1 -1
  136. package/Select/Select.js +6 -7
  137. package/Select/Select.js.map +1 -1
  138. package/Select/Select.stories.js.map +1 -1
  139. package/Select/SelectRoot.js +5 -5
  140. package/Select/SelectRoot.js.map +1 -1
  141. package/Separator/Separator.js.map +1 -1
  142. package/Sheet/Sheet.js.map +1 -1
  143. package/Sidebar/Sidebar.js +20 -21
  144. package/Sidebar/Sidebar.js.map +1 -1
  145. package/Skeleton/Skeleton.js.map +1 -1
  146. package/Slider/Slider.js.map +1 -1
  147. package/Sonner/Sonner.js.map +1 -1
  148. package/Switch/Switch.js.map +1 -1
  149. package/Table/Table.js.map +1 -1
  150. package/TablePagination/TablePagination.js +21 -26
  151. package/TablePagination/TablePagination.js.map +1 -1
  152. package/Tabs/Tabs.js.map +1 -1
  153. package/Tabs/TabsRoot.js.map +1 -1
  154. package/Textarea/Textarea.js.map +1 -1
  155. package/Textarea/Textarea.stories.js.map +1 -1
  156. package/Textarea/useAutosizeTextArea.js.map +1 -1
  157. package/Theme/ThemeModeToggle.js +3 -4
  158. package/Theme/ThemeModeToggle.js.map +1 -1
  159. package/Theme/ThemeProvider.js.map +1 -1
  160. package/Toast/Toast.js.map +1 -1
  161. package/Toast/toast.constants.js.map +1 -1
  162. package/Toast/toastVariants.js.map +1 -1
  163. package/Toast/useToast.js.map +1 -1
  164. package/Toaster/Toaster.js.map +1 -1
  165. package/Toggle/Toggle.js.map +1 -1
  166. package/ToggleGroup/ToggleGroup.js.map +1 -1
  167. package/Tooltip/Tooltip.js +4 -4
  168. package/Tooltip/Tooltip.js.map +1 -1
  169. package/Tooltip/TooltipRoot.js.map +1 -1
  170. package/Tooltip/tooltipVariants.js.map +1 -1
  171. package/index.js +286 -286
  172. package/package.json +4 -4
package/Form/Form.js CHANGED
@@ -4,10 +4,9 @@ import { Slot as f } from "@radix-ui/react-slot";
4
4
  import { Controller as u, useFormContext as F, useFormState as x, FormProvider as I } from "react-hook-form";
5
5
  import { cn as a } from "@oneplatformdev/utils";
6
6
  import { Label as p } from "../Label/Label.js";
7
- import "../Label/labelVariants.js";
8
- const $ = I, c = s.createContext(
7
+ const S = I, c = s.createContext(
9
8
  {}
10
- ), D = ({
9
+ ), $ = ({
11
10
  ...e
12
11
  }) => /* @__PURE__ */ m(c.Provider, { value: { name: e.name }, children: /* @__PURE__ */ m(u, { ...e }) }), d = () => {
13
12
  const e = s.useContext(c), t = s.useContext(l), { getFieldState: r } = F(), o = x({ name: e.name }), n = r(e.name, o);
@@ -25,7 +24,7 @@ const $ = I, c = s.createContext(
25
24
  }, l = s.createContext(
26
25
  {}
27
26
  );
28
- function M({ className: e, ...t }) {
27
+ function D({ className: e, ...t }) {
29
28
  const r = s.useId();
30
29
  return /* @__PURE__ */ m(l.Provider, { value: { id: r }, children: /* @__PURE__ */ m(
31
30
  "div",
@@ -36,7 +35,7 @@ function M({ className: e, ...t }) {
36
35
  }
37
36
  ) });
38
37
  }
39
- function N({
38
+ function M({
40
39
  className: e,
41
40
  ...t
42
41
  }) {
@@ -52,7 +51,7 @@ function N({
52
51
  }
53
52
  );
54
53
  }
55
- function w({ ...e }) {
54
+ function N({ ...e }) {
56
55
  const { error: t, formItemId: r, formDescriptionId: o, formMessageId: n } = d();
57
56
  return /* @__PURE__ */ m(
58
57
  f,
@@ -65,7 +64,7 @@ function w({ ...e }) {
65
64
  }
66
65
  );
67
66
  }
68
- function P({ className: e, ...t }) {
67
+ function w({ className: e, ...t }) {
69
68
  const { formDescriptionId: r } = d();
70
69
  return /* @__PURE__ */ m(
71
70
  "p",
@@ -77,7 +76,7 @@ function P({ className: e, ...t }) {
77
76
  }
78
77
  );
79
78
  }
80
- function y({ className: e, ...t }) {
79
+ function P({ className: e, ...t }) {
81
80
  const { error: r, formMessageId: o } = d(), n = r ? String(r?.message ?? "") : t.children;
82
81
  return n ? /* @__PURE__ */ m(
83
82
  "p",
@@ -91,13 +90,13 @@ function y({ className: e, ...t }) {
91
90
  ) : null;
92
91
  }
93
92
  export {
94
- $ as Form,
95
- w as FormControl,
96
- P as FormDescription,
97
- D as FormField,
98
- M as FormItem,
99
- N as FormLabel,
100
- y as FormMessage,
93
+ S as Form,
94
+ N as FormControl,
95
+ w as FormDescription,
96
+ $ as FormField,
97
+ D as FormItem,
98
+ M as FormLabel,
99
+ P as FormMessage,
101
100
  d as useFormField
102
101
  };
103
102
  //# sourceMappingURL=Form.js.map
package/Form/Form.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Form.js","sources":["../../src/Form/Form.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n FormProvider,\n useFormContext,\n useFormState,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { Label } from \"../Label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n }: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState } = useFormContext()\n const formState = useFormState({ name: fieldContext.name })\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div\n data-slot=\"form-item\"\n className={cn(\"flex flex-col gap-2\", className)}\n {...props}\n />\n </FormItemContext.Provider>\n )\n}\n\nfunction FormLabel({\n className,\n ...props\n }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n data-slot=\"form-label\"\n data-error={!!error}\n className={cn(\"data-[error=true]:text-destructive\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n data-slot=\"form-control\"\n id={formItemId}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n {...props}\n />\n )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n data-slot=\"form-description\"\n id={formDescriptionId}\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message ?? \"\") : props.children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n data-slot=\"form-message\"\n id={formMessageId}\n className={cn(\"text-destructive text-sm\", className)}\n {...props}\n >\n {body}\n </p>\n )\n}\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n}\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body"],"mappings":"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"}
1
+ {"version":3,"file":"Form.js","sources":["../../src/Form/Form.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport {\r\n Controller,\r\n FormProvider,\r\n useFormContext,\r\n useFormState,\r\n type ControllerProps,\r\n type FieldPath,\r\n type FieldValues,\r\n} from \"react-hook-form\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { Label } from \"../Label\"\r\n\r\nconst Form = FormProvider\r\n\r\ntype FormFieldContextValue<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n name: TName\r\n}\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n {} as FormFieldContextValue\r\n)\r\n\r\nconst FormField = <\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n>({\r\n ...props\r\n }: ControllerProps<TFieldValues, TName>) => {\r\n return (\r\n <FormFieldContext.Provider value={{ name: props.name }}>\r\n <Controller {...props} />\r\n </FormFieldContext.Provider>\r\n )\r\n}\r\n\r\nconst useFormField = () => {\r\n const fieldContext = React.useContext(FormFieldContext)\r\n const itemContext = React.useContext(FormItemContext)\r\n const { getFieldState } = useFormContext()\r\n const formState = useFormState({ name: fieldContext.name })\r\n const fieldState = getFieldState(fieldContext.name, formState)\r\n\r\n if (!fieldContext) {\r\n throw new Error(\"useFormField should be used within <FormField>\")\r\n }\r\n\r\n const { id } = itemContext\r\n\r\n return {\r\n id,\r\n name: fieldContext.name,\r\n formItemId: `${id}-form-item`,\r\n formDescriptionId: `${id}-form-item-description`,\r\n formMessageId: `${id}-form-item-message`,\r\n ...fieldState,\r\n }\r\n}\r\n\r\ntype FormItemContextValue = {\r\n id: string\r\n}\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n {} as FormItemContextValue\r\n)\r\n\r\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\r\n const id = React.useId()\r\n\r\n return (\r\n <FormItemContext.Provider value={{ id }}>\r\n <div\r\n data-slot=\"form-item\"\r\n className={cn(\"flex flex-col gap-2\", className)}\r\n {...props}\r\n />\r\n </FormItemContext.Provider>\r\n )\r\n}\r\n\r\nfunction FormLabel({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n const { error, formItemId } = useFormField()\r\n\r\n return (\r\n <Label\r\n data-slot=\"form-label\"\r\n data-error={!!error}\r\n className={cn(\"data-[error=true]:text-destructive\", className)}\r\n htmlFor={formItemId}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\r\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\r\n\r\n return (\r\n <Slot\r\n data-slot=\"form-control\"\r\n id={formItemId}\r\n aria-describedby={\r\n !error\r\n ? `${formDescriptionId}`\r\n : `${formDescriptionId} ${formMessageId}`\r\n }\r\n aria-invalid={!!error}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n const { formDescriptionId } = useFormField()\r\n\r\n return (\r\n <p\r\n data-slot=\"form-description\"\r\n id={formDescriptionId}\r\n className={cn(\"text-muted-foreground text-sm\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\r\n const { error, formMessageId } = useFormField()\r\n const body = error ? String(error?.message ?? \"\") : props.children\r\n\r\n if (!body) {\r\n return null\r\n }\r\n\r\n return (\r\n <p\r\n data-slot=\"form-message\"\r\n id={formMessageId}\r\n className={cn(\"text-destructive text-sm\", className)}\r\n {...props}\r\n >\r\n {body}\r\n </p>\r\n )\r\n}\r\n\r\nexport {\r\n useFormField,\r\n Form,\r\n FormItem,\r\n FormLabel,\r\n FormControl,\r\n FormDescription,\r\n FormMessage,\r\n FormField,\r\n}\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body"],"mappings":"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"}
@@ -1,13 +1,12 @@
1
1
  import { jsx as e, jsxs as g } from "react/jsx-runtime";
2
2
  import { FormField as u, FormItem as d, FormMessage as f, FormLabel as h } from "./Form.js";
3
- import "@radix-ui/react-tooltip";
3
+ import { cloneElement as F } from "react";
4
4
  import { cn as l } from "@oneplatformdev/utils";
5
- import { Tooltip as F } from "../Tooltip/Tooltip.js";
6
- import { cloneElement as P } from "react";
5
+ import { Tooltip as P } from "../Tooltip/Tooltip.js";
7
6
  const b = (n) => {
8
7
  const { label: t, tooltip: s, tooltipProps: r } = n, o = /* @__PURE__ */ e(h, { children: t });
9
8
  return t ? s ? /* @__PURE__ */ e(
10
- F,
9
+ P,
11
10
  {
12
11
  message: s,
13
12
  showQuestionMark: !0,
@@ -21,10 +20,10 @@ const b = (n) => {
21
20
  ...r?.triggerProps,
22
21
  className: l("cursor-help", r?.triggerProps?.className)
23
22
  },
24
- children: P(o, { className: l("cursor-help", o.props.classNames) })
23
+ children: F(o, { className: l("cursor-help", o.props.classNames) })
25
24
  }
26
25
  ) : o : null;
27
- }, T = (n) => {
26
+ }, M = (n) => {
28
27
  const {
29
28
  form: t,
30
29
  name: s,
@@ -57,6 +56,6 @@ const b = (n) => {
57
56
  );
58
57
  };
59
58
  export {
60
- T as FormRenderControl
59
+ M as FormRenderControl
61
60
  };
62
61
  //# sourceMappingURL=FormRenderControl.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FormRenderControl.js","sources":["../../src/Form/FormRenderControl.tsx"],"sourcesContent":["import { FieldValues } from \"react-hook-form\";\n\nimport { FormField, FormItem, FormLabel, FormMessage } from \"./Form\";\nimport { FormRenderControlProps } from \"./FormRenderControl.types\";\nimport { Tooltip } from \"../Tooltip\";\nimport { cloneElement } from \"react\";\nimport { cn } from \"@oneplatformdev/utils\";\n\ninterface IFormLabelWithTooltipProps<\n Data extends FieldValues = FieldValues,\n> extends Pick<FormRenderControlProps<Data>, 'label' | 'tooltip' | 'tooltipProps'> {\n}\n\nconst FormLabelWithTooltip = <\n Data extends FieldValues = FieldValues,\n>(props: IFormLabelWithTooltipProps<Data>) => {\n const { label, tooltip, tooltipProps } = props;\n const cmp = <FormLabel>{label}</FormLabel>;\n if (!label) return null;\n if (!tooltip) return cmp;\n return (\n <Tooltip\n message={tooltip}\n showQuestionMark\n questionIconSize=\"sm\"\n contentProps={{\n side: \"right\",\n align: \"center\"\n }}\n {...tooltipProps}\n triggerProps={{\n ...tooltipProps?.triggerProps,\n className: cn('cursor-help', tooltipProps?.triggerProps?.className),\n }}\n >\n {cloneElement(cmp, { className: cn('cursor-help', cmp.props.classNames) })}\n </Tooltip>\n )\n}\n\nexport const FormRenderControl = <\n Data extends FieldValues = FieldValues,\n>(\n props: FormRenderControlProps<Data>\n) => {\n const {\n form,\n name,\n label,\n tooltip,\n tooltipProps,\n render,\n containerProps = {},\n ...rest\n } = props;\n return (\n <FormField\n control={form.control}\n name={name}\n render={(params) => (\n <FormItem {...containerProps}>\n <FormLabelWithTooltip\n label={label}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n />\n {/*{(label || tooltip) && (*/}\n {/* <FormLabel className={cn(\"flex items-center gap-1\")}>*/}\n {/* {label && <span>{label}</span>}*/}\n {/* {tooltip && (*/}\n {/* <Tooltip*/}\n {/* message={tooltip}*/}\n {/* showQuestionMark*/}\n {/* questionIconSize=\"xs\"*/}\n {/* contentProps={{*/}\n {/* side: \"right\",*/}\n {/* align: \"center\"*/}\n {/* }}*/}\n {/* {...props.tooltipProps}*/}\n {/* />*/}\n {/* )}*/}\n {/* </FormLabel>*/}\n {/*)}*/}\n {render(params)}\n <FormMessage/>\n </FormItem>\n )}\n {...rest}\n />\n );\n};\n"],"names":["FormLabelWithTooltip","props","label","tooltip","tooltipProps","cmp","jsx","FormLabel","Tooltip","cn","cloneElement","FormRenderControl","form","name","render","containerProps","rest","FormField","params","jsxs","FormItem","FormMessage"],"mappings":";;;;;;AAaA,MAAMA,IAAuB,CAE3BC,MAA4C;AAC5C,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,cAAAC,EAAA,IAAiBH,GACnCI,IAAM,gBAAAC,EAACC,GAAA,EAAW,UAAAL,EAAA,CAAM;AAC9B,SAAKA,IACAC,IAEH,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,kBAAgB;AAAA,MAChB,kBAAiB;AAAA,MACjB,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAER,GAAGC;AAAA,MACJ,cAAc;AAAA,QACZ,GAAGA,GAAc;AAAA,QACjB,WAAWK,EAAG,eAAeL,GAAc,cAAc,SAAS;AAAA,MAAA;AAAA,MAGnE,UAAAM,EAAaL,GAAK,EAAE,WAAWI,EAAG,eAAeJ,EAAI,MAAM,UAAU,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA,IAhBxDA,IADF;AAoBrB,GAEaM,IAAoB,CAG/BV,MACG;AACH,QAAM;AAAA,IACJ,MAAAW;AAAA,IACA,MAAAC;AAAA,IACA,OAAAX;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAU;AAAA,IACA,gBAAAC,IAAiB,CAAA;AAAA,IACjB,GAAGC;AAAA,EAAA,IACDf;AACJ,SACE,gBAAAK;AAAA,IAACW;AAAA,IAAA;AAAA,MACC,SAASL,EAAK;AAAA,MACd,MAAAC;AAAA,MACA,QAAQ,CAACK,MACP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAT;AAAA,UAACN;AAAA,UAAA;AAAA,YACC,OAAAE;AAAA,YACA,SAAAC;AAAA,YACA,cAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAmBDU,EAAOI,CAAM;AAAA,0BACbG,GAAA,CAAA,CAAW;AAAA,MAAA,GACd;AAAA,MAED,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;"}
1
+ {"version":3,"file":"FormRenderControl.js","sources":["../../src/Form/FormRenderControl.tsx"],"sourcesContent":["import { FieldValues } from \"react-hook-form\";\r\n\r\nimport { FormField, FormItem, FormLabel, FormMessage } from \"./Form\";\r\nimport { FormRenderControlProps } from \"./FormRenderControl.types\";\r\nimport { Tooltip } from \"../Tooltip\";\r\nimport { cloneElement } from \"react\";\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\ninterface IFormLabelWithTooltipProps<\r\n Data extends FieldValues = FieldValues,\r\n> extends Pick<FormRenderControlProps<Data>, 'label' | 'tooltip' | 'tooltipProps'> {\r\n}\r\n\r\nconst FormLabelWithTooltip = <\r\n Data extends FieldValues = FieldValues,\r\n>(props: IFormLabelWithTooltipProps<Data>) => {\r\n const { label, tooltip, tooltipProps } = props;\r\n const cmp = <FormLabel>{label}</FormLabel>;\r\n if (!label) return null;\r\n if (!tooltip) return cmp;\r\n return (\r\n <Tooltip\r\n message={tooltip}\r\n showQuestionMark\r\n questionIconSize=\"sm\"\r\n contentProps={{\r\n side: \"right\",\r\n align: \"center\"\r\n }}\r\n {...tooltipProps}\r\n triggerProps={{\r\n ...tooltipProps?.triggerProps,\r\n className: cn('cursor-help', tooltipProps?.triggerProps?.className),\r\n }}\r\n >\r\n {cloneElement(cmp, { className: cn('cursor-help', cmp.props.classNames) })}\r\n </Tooltip>\r\n )\r\n}\r\n\r\nexport const FormRenderControl = <\r\n Data extends FieldValues = FieldValues,\r\n>(\r\n props: FormRenderControlProps<Data>\r\n) => {\r\n const {\r\n form,\r\n name,\r\n label,\r\n tooltip,\r\n tooltipProps,\r\n render,\r\n containerProps = {},\r\n ...rest\r\n } = props;\r\n return (\r\n <FormField\r\n control={form.control}\r\n name={name}\r\n render={(params) => (\r\n <FormItem {...containerProps}>\r\n <FormLabelWithTooltip\r\n label={label}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n />\r\n {/*{(label || tooltip) && (*/}\r\n {/* <FormLabel className={cn(\"flex items-center gap-1\")}>*/}\r\n {/* {label && <span>{label}</span>}*/}\r\n {/* {tooltip && (*/}\r\n {/* <Tooltip*/}\r\n {/* message={tooltip}*/}\r\n {/* showQuestionMark*/}\r\n {/* questionIconSize=\"xs\"*/}\r\n {/* contentProps={{*/}\r\n {/* side: \"right\",*/}\r\n {/* align: \"center\"*/}\r\n {/* }}*/}\r\n {/* {...props.tooltipProps}*/}\r\n {/* />*/}\r\n {/* )}*/}\r\n {/* </FormLabel>*/}\r\n {/*)}*/}\r\n {render(params)}\r\n <FormMessage/>\r\n </FormItem>\r\n )}\r\n {...rest}\r\n />\r\n );\r\n};\r\n"],"names":["FormLabelWithTooltip","props","label","tooltip","tooltipProps","cmp","jsx","FormLabel","Tooltip","cn","cloneElement","FormRenderControl","form","name","render","containerProps","rest","FormField","params","jsxs","FormItem","FormMessage"],"mappings":";;;;;AAaA,MAAMA,IAAuB,CAE3BC,MAA4C;AAC5C,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,cAAAC,EAAA,IAAiBH,GACnCI,IAAM,gBAAAC,EAACC,GAAA,EAAW,UAAAL,EAAA,CAAM;AAC9B,SAAKA,IACAC,IAEH,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,kBAAgB;AAAA,MAChB,kBAAiB;AAAA,MACjB,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAER,GAAGC;AAAA,MACJ,cAAc;AAAA,QACZ,GAAGA,GAAc;AAAA,QACjB,WAAWK,EAAG,eAAeL,GAAc,cAAc,SAAS;AAAA,MAAA;AAAA,MAGnE,UAAAM,EAAaL,GAAK,EAAE,WAAWI,EAAG,eAAeJ,EAAI,MAAM,UAAU,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA,IAhBxDA,IADF;AAoBrB,GAEaM,IAAoB,CAG/BV,MACG;AACH,QAAM;AAAA,IACJ,MAAAW;AAAA,IACA,MAAAC;AAAA,IACA,OAAAX;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAU;AAAA,IACA,gBAAAC,IAAiB,CAAA;AAAA,IACjB,GAAGC;AAAA,EAAA,IACDf;AACJ,SACE,gBAAAK;AAAA,IAACW;AAAA,IAAA;AAAA,MACC,SAASL,EAAK;AAAA,MACd,MAAAC;AAAA,MACA,QAAQ,CAACK,MACP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAT;AAAA,UAACN;AAAA,UAAA;AAAA,YACC,OAAAE;AAAA,YACA,SAAAC;AAAA,YACA,cAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAmBDU,EAAOI,CAAM;AAAA,0BACbG,GAAA,CAAA,CAAW;AAAA,MAAA,GACd;AAAA,MAED,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;"}
package/Form/Form_old.js CHANGED
@@ -4,10 +4,9 @@ import { Slot as F } from "@radix-ui/react-slot";
4
4
  import { useFormContext as u, FormProvider as p, Controller as x } from "react-hook-form";
5
5
  import { cn as a } from "@oneplatformdev/utils";
6
6
  import { Label as I } from "../Label/Label.js";
7
- import "../Label/labelVariants.js";
8
- const M = p, l = m.createContext(
7
+ const D = p, l = m.createContext(
9
8
  {}
10
- ), S = ({
9
+ ), M = ({
11
10
  ...e
12
11
  }) => /* @__PURE__ */ n(l.Provider, { value: { name: e.name }, children: /* @__PURE__ */ n(x, { ...e }) }), c = () => {
13
12
  const e = m.useContext(l), t = m.useContext(f), { getFieldState: o, formState: r } = u(), i = o(e.name, r);
@@ -87,10 +86,10 @@ const w = m.forwardRef(({ className: e, children: t, ...o }, r) => {
87
86
  });
88
87
  w.displayName = "FormMessage";
89
88
  export {
90
- M as Form,
89
+ D as Form,
91
90
  g as FormControl,
92
91
  N as FormDescription,
93
- S as FormField,
92
+ M as FormField,
94
93
  v as FormItem,
95
94
  C as FormLabel,
96
95
  w as FormMessage,
@@ -1 +1 @@
1
- {"version":3,"file":"Form_old.js","sources":["../../src/Form/Form_old.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n Controller,\n ControllerProps,\n FieldPath,\n FieldValues,\n FormProvider,\n useFormContext,\n} from 'react-hook-form';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { Label } from '../Label';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn(\"space-y-1\", className)} {...props} />\n </FormItemContext.Provider>\n )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n ref={ref}\n data-state={error ? \"invalid\" : \"valid\"}\n className={cn(error && \"text-destructive\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ className, ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n data-state={error ? \"invalid\" : \"valid\"}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n className={cn('group/form-control', className)}\n {...props}\n />\n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\n {...props}\n />\n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message) : children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\n {...props}\n >\n {body}\n </p>\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n}\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body"],"mappings":"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"}
1
+ {"version":3,"file":"Form_old.js","sources":["../../src/Form/Form_old.tsx"],"sourcesContent":["'use client';\r\n\r\nimport * as React from 'react';\r\nimport * as LabelPrimitive from '@radix-ui/react-label';\r\nimport { Slot } from '@radix-ui/react-slot';\r\nimport {\r\n Controller,\r\n ControllerProps,\r\n FieldPath,\r\n FieldValues,\r\n FormProvider,\r\n useFormContext,\r\n} from 'react-hook-form';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { Label } from '../Label';\r\n\r\nconst Form = FormProvider;\r\n\r\ntype FormFieldContextValue<\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> = {\r\n name: TName\r\n}\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n {} as FormFieldContextValue\r\n)\r\n\r\nconst FormField = <\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n ...props\r\n}: ControllerProps<TFieldValues, TName>) => {\r\n return (\r\n <FormFieldContext.Provider value={{ name: props.name }}>\r\n <Controller {...props} />\r\n </FormFieldContext.Provider>\r\n )\r\n}\r\n\r\nconst useFormField = () => {\r\n const fieldContext = React.useContext(FormFieldContext)\r\n const itemContext = React.useContext(FormItemContext)\r\n const { getFieldState, formState } = useFormContext()\r\n\r\n const fieldState = getFieldState(fieldContext.name, formState)\r\n\r\n if (!fieldContext) {\r\n throw new Error(\"useFormField should be used within <FormField>\")\r\n }\r\n\r\n const { id } = itemContext\r\n\r\n return {\r\n id,\r\n name: fieldContext.name,\r\n formItemId: `${id}-form-item`,\r\n formDescriptionId: `${id}-form-item-description`,\r\n formMessageId: `${id}-form-item-message`,\r\n ...fieldState,\r\n }\r\n}\r\n\r\ntype FormItemContextValue = {\r\n id: string\r\n}\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n {} as FormItemContextValue\r\n)\r\n\r\nconst FormItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const id = React.useId()\r\n\r\n return (\r\n <FormItemContext.Provider value={{ id }}>\r\n <div ref={ref} className={cn(\"space-y-1\", className)} {...props} />\r\n </FormItemContext.Provider>\r\n )\r\n})\r\nFormItem.displayName = \"FormItem\"\r\n\r\nconst FormLabel = React.forwardRef<\r\n React.ElementRef<typeof LabelPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\r\n>(({ className, ...props }, ref) => {\r\n const { error, formItemId } = useFormField()\r\n\r\n return (\r\n <Label\r\n ref={ref}\r\n data-state={error ? \"invalid\" : \"valid\"}\r\n className={cn(error && \"text-destructive\", className)}\r\n htmlFor={formItemId}\r\n {...props}\r\n />\r\n )\r\n})\r\nFormLabel.displayName = \"FormLabel\"\r\n\r\nconst FormControl = React.forwardRef<\r\n React.ElementRef<typeof Slot>,\r\n React.ComponentPropsWithoutRef<typeof Slot>\r\n>(({ className, ...props }, ref) => {\r\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\r\n\r\n return (\r\n <Slot\r\n ref={ref}\r\n id={formItemId}\r\n data-state={error ? \"invalid\" : \"valid\"}\r\n aria-describedby={\r\n !error\r\n ? `${formDescriptionId}`\r\n : `${formDescriptionId} ${formMessageId}`\r\n }\r\n aria-invalid={!!error}\r\n className={cn('group/form-control', className)}\r\n {...props}\r\n />\r\n )\r\n})\r\nFormControl.displayName = \"FormControl\"\r\n\r\nconst FormDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => {\r\n const { formDescriptionId } = useFormField()\r\n\r\n return (\r\n <p\r\n ref={ref}\r\n id={formDescriptionId}\r\n className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\r\n {...props}\r\n />\r\n )\r\n})\r\nFormDescription.displayName = \"FormDescription\"\r\n\r\nconst FormMessage = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, children, ...props }, ref) => {\r\n const { error, formMessageId } = useFormField()\r\n const body = error ? String(error?.message) : children\r\n\r\n if (!body) {\r\n return null\r\n }\r\n\r\n return (\r\n <p\r\n ref={ref}\r\n id={formMessageId}\r\n className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\r\n {...props}\r\n >\r\n {body}\r\n </p>\r\n )\r\n})\r\nFormMessage.displayName = \"FormMessage\"\r\n\r\nexport {\r\n useFormField,\r\n Form,\r\n FormItem,\r\n FormLabel,\r\n FormControl,\r\n FormDescription,\r\n FormMessage,\r\n FormField,\r\n}\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body"],"mappings":";;;;;;AAiBA,MAAMA,IAAOC,GASPC,IAAmBC,EAAM;AAAA,EAC7B,CAAA;AACF,GAEMC,IAAY,CAGhB;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAACJ,EAAiB,UAAjB,EAA0B,OAAO,EAAE,MAAMG,EAAM,KAAA,GAC9C,UAAA,gBAAAC,EAACC,GAAA,EAAY,GAAGF,GAAO,GACzB,GAIEG,IAAe,MAAM;AACzB,QAAMC,IAAeN,EAAM,WAAWD,CAAgB,GAChDQ,IAAcP,EAAM,WAAWQ,CAAe,GAC9C,EAAE,eAAAC,GAAe,WAAAC,EAAA,IAAcC,EAAA,GAE/BC,IAAaH,EAAcH,EAAa,MAAMI,CAAS;AAE7D,MAAI,CAACJ;AACH,UAAM,IAAI,MAAM,gDAAgD;AAGlE,QAAM,EAAE,IAAAO,MAAON;AAEf,SAAO;AAAA,IACL,IAAAM;AAAA,IACA,MAAMP,EAAa;AAAA,IACnB,YAAY,GAAGO,CAAE;AAAA,IACjB,mBAAmB,GAAGA,CAAE;AAAA,IACxB,eAAe,GAAGA,CAAE;AAAA,IACpB,GAAGD;AAAA,EAAA;AAEP,GAMMJ,IAAkBR,EAAM;AAAA,EAC5B,CAAA;AACF,GAEMc,IAAWd,EAAM,WAGrB,CAAC,EAAE,WAAAe,GAAW,GAAGb,EAAA,GAASc,MAAQ;AAClC,QAAMH,IAAKb,EAAM,MAAA;AAEjB,2BACGQ,EAAgB,UAAhB,EAAyB,OAAO,EAAE,IAAAK,KACjC,UAAA,gBAAAV,EAAC,OAAA,EAAI,KAAAa,GAAU,WAAWC,EAAG,aAAaF,CAAS,GAAI,GAAGb,GAAO,GACnE;AAEJ,CAAC;AACDY,EAAS,cAAc;AAEvB,MAAMI,IAAYlB,EAAM,WAGtB,CAAC,EAAE,WAAAe,GAAW,GAAGb,EAAA,GAASc,MAAQ;AAClC,QAAM,EAAE,OAAAG,GAAO,YAAAC,EAAA,IAAef,EAAA;AAE9B,SACE,gBAAAF;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,cAAYG,IAAQ,YAAY;AAAA,MAChC,WAAWF,EAAGE,KAAS,oBAAoBJ,CAAS;AAAA,MACpD,SAASK;AAAA,MACR,GAAGlB;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDgB,EAAU,cAAc;AAExB,MAAMI,IAActB,EAAM,WAGxB,CAAC,EAAE,WAAAe,GAAW,GAAGb,EAAA,GAASc,MAAQ;AAClC,QAAM,EAAE,OAAAG,GAAO,YAAAC,GAAY,mBAAAG,GAAmB,eAAAC,EAAA,IAAkBnB,EAAA;AAEhE,SACE,gBAAAF;AAAA,IAACsB;AAAA,IAAA;AAAA,MACC,KAAAT;AAAA,MACA,IAAII;AAAA,MACJ,cAAYD,IAAQ,YAAY;AAAA,MAChC,oBACGA,IAEG,GAAGI,CAAiB,IAAIC,CAAa,KADrC,GAAGD,CAAiB;AAAA,MAG1B,gBAAc,CAAC,CAACJ;AAAA,MAChB,WAAWF,EAAG,sBAAsBF,CAAS;AAAA,MAC5C,GAAGb;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDoB,EAAY,cAAc;AAE1B,MAAMI,IAAkB1B,EAAM,WAG5B,CAAC,EAAE,WAAAe,GAAW,GAAGb,EAAA,GAASc,MAAQ;AAClC,QAAM,EAAE,mBAAAO,EAAA,IAAsBlB,EAAA;AAE9B,SACE,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAa;AAAA,MACA,IAAIO;AAAA,MACJ,WAAWN,EAAG,uCAAuCF,CAAS;AAAA,MAC7D,GAAGb;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDwB,EAAgB,cAAc;AAE9B,MAAMC,IAAc3B,EAAM,WAGxB,CAAC,EAAE,WAAAe,GAAW,UAAAa,GAAU,GAAG1B,EAAA,GAASc,MAAQ;AAC5C,QAAM,EAAE,OAAAG,GAAO,eAAAK,EAAA,IAAkBnB,EAAA,GAC3BwB,IAAOV,IAAQ,OAAOA,GAAO,OAAO,IAAIS;AAE9C,SAAKC,IAKH,gBAAA1B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAa;AAAA,MACA,IAAIQ;AAAA,MACJ,WAAWP,EAAG,8CAA8CF,CAAS;AAAA,MACpE,GAAGb;AAAA,MAEH,UAAA2B;AAAA,IAAA;AAAA,EAAA,IAVI;AAaX,CAAC;AACDF,EAAY,cAAc;"}
@@ -1,15 +1,15 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
- import { FormControl as a } from "../Form/Form.js";
3
- import { FormRenderControl as l } from "../Form/FormRenderControl.js";
2
+ import { FormRenderControl as a } from "../Form/FormRenderControl.js";
3
+ import { FormControl as l } from "../Form/Form.js";
4
4
  import { CheckboxLabel as k } from "../Checkbox/Checkbox.js";
5
5
  const f = (m) => {
6
6
  const { form: t, label: c, name: h, onCheckedChange: C, ...r } = m;
7
7
  return /* @__PURE__ */ e(
8
- l,
8
+ a,
9
9
  {
10
10
  form: t,
11
11
  name: h,
12
- render: ({ field: o }) => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
12
+ render: ({ field: o }) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
13
13
  k,
14
14
  {
15
15
  ...o,
@@ -1 +1 @@
1
- {"version":3,"file":"FormCheckbox.js","sources":["../../src/FormCheckbox/FormCheckbox.tsx"],"sourcesContent":["import { FieldValues } from 'react-hook-form';\n\nimport { FormControl, FormRenderControl } from '../Form';\n\nimport { FormCheckboxProps } from './FormCheckbox.types';\nimport { CheckboxLabel } from '../Checkbox';\n\n// TODO: move to @oneplatformdev/ui/FormCheckbox\nexport const FormCheckbox = <Data extends FieldValues>(\n\tprops: FormCheckboxProps<Data>\n) => {\n\tconst { form, label, name, onCheckedChange, ...rest } = props;\n\treturn (\n\t\t<FormRenderControl\n\t\t\tform={form}\n\t\t\tname={name}\n\t\t\trender={({ field }) => (\n\t\t\t\t<FormControl>\n\t\t\t\t\t<CheckboxLabel\n\t\t\t\t\t\t{...field}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\tchecked={field.value || false}\n\t\t\t\t\t\tonCheckedChange={(v) => {\n\t\t\t\t\t\t\tfield.onChange(v);\n\t\t\t\t\t\t\tonCheckedChange?.(v);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</FormControl>\n\t\t\t)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n};\n"],"names":["FormCheckbox","props","form","label","name","onCheckedChange","rest","jsx","FormRenderControl","field","FormControl","CheckboxLabel","v"],"mappings":";;;;AAQO,MAAMA,IAAe,CAC3BC,MACI;AACJ,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,MAAAC,GAAM,iBAAAC,GAAiB,GAAGC,MAASL;AACxD,SACC,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAAN;AAAA,MACA,MAAAE;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,EAAA,wBACTC,GAAA,EACA,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,GAAGF;AAAA,UACH,GAAGH;AAAA,UACJ,OAAAH;AAAA,UACA,SAASM,EAAM,SAAS;AAAA,UACxB,iBAAiB,CAACG,MAAM;AACvB,YAAAH,EAAM,SAASG,CAAC,GAChBP,IAAkBO,CAAC;AAAA,UACpB;AAAA,QAAA;AAAA,MAAA,GAEF;AAAA,MAEA,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"FormCheckbox.js","sources":["../../src/FormCheckbox/FormCheckbox.tsx"],"sourcesContent":["import { FieldValues } from 'react-hook-form';\r\n\r\nimport { FormControl, FormRenderControl } from '../Form';\r\n\r\nimport { FormCheckboxProps } from './FormCheckbox.types';\r\nimport { CheckboxLabel } from '../Checkbox';\r\n\r\n// TODO: move to @oneplatformdev/ui/FormCheckbox\r\nexport const FormCheckbox = <Data extends FieldValues>(\r\n\tprops: FormCheckboxProps<Data>\r\n) => {\r\n\tconst { form, label, name, onCheckedChange, ...rest } = props;\r\n\treturn (\r\n\t\t<FormRenderControl\r\n\t\t\tform={form}\r\n\t\t\tname={name}\r\n\t\t\trender={({ field }) => (\r\n\t\t\t\t<FormControl>\r\n\t\t\t\t\t<CheckboxLabel\r\n\t\t\t\t\t\t{...field}\r\n\t\t\t\t\t\t{...rest}\r\n\t\t\t\t\t\tlabel={label}\r\n\t\t\t\t\t\tchecked={field.value || false}\r\n\t\t\t\t\t\tonCheckedChange={(v) => {\r\n\t\t\t\t\t\t\tfield.onChange(v);\r\n\t\t\t\t\t\t\tonCheckedChange?.(v);\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</FormControl>\r\n\t\t\t)}\r\n\t\t\t{...rest}\r\n\t\t/>\r\n\t);\r\n};\r\n"],"names":["FormCheckbox","props","form","label","name","onCheckedChange","rest","jsx","FormRenderControl","field","FormControl","CheckboxLabel","v"],"mappings":";;;;AAQO,MAAMA,IAAe,CAC3BC,MACI;AACJ,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,MAAAC,GAAM,iBAAAC,GAAiB,GAAGC,MAASL;AACxD,SACC,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAAN;AAAA,MACA,MAAAE;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,EAAA,wBACTC,GAAA,EACA,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,GAAGF;AAAA,UACH,GAAGH;AAAA,UACJ,OAAAH;AAAA,UACA,SAASM,EAAM,SAAS;AAAA,UACxB,iBAAiB,CAACG,MAAM;AACvB,YAAAH,EAAM,SAASG,CAAC,GAChBP,IAAkBO,CAAC;AAAA,UACpB;AAAA,QAAA;AAAA,MAAA,GAEF;AAAA,MAEA,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGP;"}
@@ -1,18 +1,18 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
- import { FormControl as s } from "../Form/Form.js";
3
- import { FormRenderControl as b } from "../Form/FormRenderControl.js";
4
2
  import { Combobox as m } from "../Combobox/Combobox.js";
3
+ import { FormRenderControl as s } from "../Form/FormRenderControl.js";
4
+ import { FormControl as b } from "../Form/Form.js";
5
5
  function x(t) {
6
6
  const { form: i, label: p, tooltip: l, tooltipProps: C, name: a, imperativeRef: n, ...e } = t, g = t.type ?? "single";
7
7
  return /* @__PURE__ */ r(
8
- b,
8
+ s,
9
9
  {
10
10
  form: i,
11
11
  label: p,
12
12
  tooltip: l,
13
13
  tooltipProps: C,
14
14
  name: a,
15
- render: ({ field: o }) => /* @__PURE__ */ r(s, { children: g === "multi" ? /* @__PURE__ */ r(
15
+ render: ({ field: o }) => /* @__PURE__ */ r(b, { children: g === "multi" ? /* @__PURE__ */ r(
16
16
  m,
17
17
  {
18
18
  ...e,
@@ -1 +1 @@
1
- {"version":3,"file":"FormCombobox.js","sources":["../../src/FormCombobox/FormCombobox.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Combobox, ComboboxSelectedType } from '../Combobox';\nimport {\n FormComboboxMultiProps, FormComboboxProps,\n FormComboboxSingleProps\n} from './FormCombobox.types';\nimport { FieldValues } from 'react-hook-form';\nimport { JSX } from \"react\";\n\ntype RestOmitedType<T> = Omit<T, 'form' | 'label' | 'tooltip' | 'tooltipProps' | 'name'>;\n\ntype RestPropsType<\n T extends ComboboxSelectedType,\n Data extends FieldValues,\n Node extends object = object,\n> = T extends 'single'\n ? RestOmitedType<FormComboboxSingleProps<Data, Node>>\n : RestOmitedType<FormComboboxMultiProps<Data, Node>>\n\nexport function FormCombobox<\n Data extends FieldValues,\n Node extends object = object\n>(props: FormComboboxSingleProps<Data, Node>): JSX.Element;\nexport function FormCombobox<\n Data extends FieldValues,\n Node extends object = object\n>(props: FormComboboxMultiProps<Data, Node>): JSX.Element;\n\nexport function FormCombobox<\n Data extends object = object,\n Node extends object = object\n>(\n props: FormComboboxProps<Data, Node>\n): JSX.Element {\n const { form, label, tooltip, tooltipProps, name, imperativeRef, ...rest } = props;\n const type = (props.type ?? 'single') as 'single' | 'multi';\n return (\n <FormRenderControl\n form={form}\n label={label}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n name={name}\n render={({ field }) => (\n <FormControl>\n {type === 'multi' ? (\n <Combobox<Node>\n {...(rest as RestPropsType<'multi', Data, Node>)}\n {...field}\n type=\"multi\"\n imperativeRef={imperativeRef}\n onChange={field.onChange}\n />\n ) : (\n <Combobox<Node>\n {...(rest as RestPropsType<'single', Data, Node>)}\n {...field}\n type=\"single\"\n imperativeRef={imperativeRef}\n onChange={field.onChange}\n />\n )}\n </FormControl>\n )}\n />\n );\n};\n"],"names":["FormCombobox","props","form","label","tooltip","tooltipProps","name","imperativeRef","rest","type","jsx","FormRenderControl","field","FormControl","Combobox"],"mappings":";;;;AA4BO,SAASA,EAIdC,GACa;AACb,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,eAAAC,GAAe,GAAGC,EAAA,IAASP,GACvEQ,IAAQR,EAAM,QAAQ;AAC5B,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,EAAA,MACT,gBAAAF,EAACG,GAAA,EACE,gBAAS,UACR,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,IAGlB,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,EAClB,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1
+ {"version":3,"file":"FormCombobox.js","sources":["../../src/FormCombobox/FormCombobox.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\r\nimport { Combobox, ComboboxSelectedType } from '../Combobox';\r\nimport {\r\n FormComboboxMultiProps, FormComboboxProps,\r\n FormComboboxSingleProps\r\n} from './FormCombobox.types';\r\nimport { FieldValues } from 'react-hook-form';\r\nimport { JSX } from \"react\";\r\n\r\ntype RestOmitedType<T> = Omit<T, 'form' | 'label' | 'tooltip' | 'tooltipProps' | 'name'>;\r\n\r\ntype RestPropsType<\r\n T extends ComboboxSelectedType,\r\n Data extends FieldValues,\r\n Node extends object = object,\r\n> = T extends 'single'\r\n ? RestOmitedType<FormComboboxSingleProps<Data, Node>>\r\n : RestOmitedType<FormComboboxMultiProps<Data, Node>>\r\n\r\nexport function FormCombobox<\r\n Data extends FieldValues,\r\n Node extends object = object\r\n>(props: FormComboboxSingleProps<Data, Node>): JSX.Element;\r\nexport function FormCombobox<\r\n Data extends FieldValues,\r\n Node extends object = object\r\n>(props: FormComboboxMultiProps<Data, Node>): JSX.Element;\r\n\r\nexport function FormCombobox<\r\n Data extends object = object,\r\n Node extends object = object\r\n>(\r\n props: FormComboboxProps<Data, Node>\r\n): JSX.Element {\r\n const { form, label, tooltip, tooltipProps, name, imperativeRef, ...rest } = props;\r\n const type = (props.type ?? 'single') as 'single' | 'multi';\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n label={label}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n name={name}\r\n render={({ field }) => (\r\n <FormControl>\r\n {type === 'multi' ? (\r\n <Combobox<Node>\r\n {...(rest as RestPropsType<'multi', Data, Node>)}\r\n {...field}\r\n type=\"multi\"\r\n imperativeRef={imperativeRef}\r\n onChange={field.onChange}\r\n />\r\n ) : (\r\n <Combobox<Node>\r\n {...(rest as RestPropsType<'single', Data, Node>)}\r\n {...field}\r\n type=\"single\"\r\n imperativeRef={imperativeRef}\r\n onChange={field.onChange}\r\n />\r\n )}\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormCombobox","props","form","label","tooltip","tooltipProps","name","imperativeRef","rest","type","jsx","FormRenderControl","field","FormControl","Combobox"],"mappings":";;;;AA4BO,SAASA,EAIdC,GACa;AACb,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,eAAAC,GAAe,GAAGC,EAAA,IAASP,GACvEQ,IAAQR,EAAM,QAAQ;AAC5B,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,EAAA,MACT,gBAAAF,EAACG,GAAA,EACE,gBAAS,UACR,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,IAGlB,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,EAClB,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}
@@ -1,18 +1,18 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
2
  import { DatePicker as s } from "../DatePicker/DatePicker.js";
3
- import { FormControl as C } from "../Form/Form.js";
4
- import { FormRenderControl as D } from "../Form/FormRenderControl.js";
3
+ import { FormRenderControl as C } from "../Form/FormRenderControl.js";
4
+ import { FormControl as D } from "../Form/Form.js";
5
5
  const P = (t) => {
6
6
  const { form: n, name: m, tooltip: a, tooltipProps: p, label: i, onDateChange: l, ...c } = t;
7
7
  return /* @__PURE__ */ r(
8
- D,
8
+ C,
9
9
  {
10
10
  form: n,
11
11
  name: m,
12
12
  tooltip: a,
13
13
  tooltipProps: p,
14
14
  label: i,
15
- render: ({ field: o }) => /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(
15
+ render: ({ field: o }) => /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(
16
16
  s,
17
17
  {
18
18
  ...o,
@@ -1 +1 @@
1
- {"version":3,"file":"FormDatePicker.js","sources":["../../src/FormDatePicker/FormDatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { DatePicker } from '../DatePicker';\nimport { FormControl, FormRenderControl } from '../Form';\nimport { FieldValues } from 'react-hook-form';\nimport { FormDatePickerProps } from './FormDatePicker.types';\n\n// TODO: add description\nexport const FormDatePicker = <Data extends FieldValues>(\n props: FormDatePickerProps<Data>\n) => {\n const { form, name, tooltip, tooltipProps, label, onDateChange, ...rest } = props;\n return (\n <FormRenderControl\n form={form}\n name={name}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n label={label}\n render={({ field }) => (\n <FormControl>\n <DatePicker\n { ...field }\n { ...rest }\n selectedDate={field.value}\n onDateChange={(date: Date | undefined) => {\n field.onChange(date);\n onDateChange?.(date);\n }}\n />\n </FormControl>\n )}\n />\n );\n};\n"],"names":["FormDatePicker","props","form","name","tooltip","tooltipProps","label","onDateChange","rest","jsx","FormRenderControl","field","FormControl","DatePicker","date"],"mappings":";;;;AAQO,MAAMA,IAAiB,CAC5BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,cAAAC,GAAc,GAAGC,EAAA,IAASP;AAC5E,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAR;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,GAAGF;AAAA,UACH,GAAGH;AAAA,UACL,cAAcG,EAAM;AAAA,UACpB,cAAc,CAACG,MAA2B;AACxC,YAAAH,EAAM,SAASG,CAAI,GACnBP,IAAeO,CAAI;AAAA,UACrB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1
+ {"version":3,"file":"FormDatePicker.js","sources":["../../src/FormDatePicker/FormDatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { DatePicker } from '../DatePicker';\r\nimport { FormControl, FormRenderControl } from '../Form';\r\nimport { FieldValues } from 'react-hook-form';\r\nimport { FormDatePickerProps } from './FormDatePicker.types';\r\n\r\n// TODO: add description\r\nexport const FormDatePicker = <Data extends FieldValues>(\r\n props: FormDatePickerProps<Data>\r\n) => {\r\n const { form, name, tooltip, tooltipProps, label, onDateChange, ...rest } = props;\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n name={name}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n label={label}\r\n render={({ field }) => (\r\n <FormControl>\r\n <DatePicker\r\n { ...field }\r\n { ...rest }\r\n selectedDate={field.value}\r\n onDateChange={(date: Date | undefined) => {\r\n field.onChange(date);\r\n onDateChange?.(date);\r\n }}\r\n />\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormDatePicker","props","form","name","tooltip","tooltipProps","label","onDateChange","rest","jsx","FormRenderControl","field","FormControl","DatePicker","date"],"mappings":";;;;AAQO,MAAMA,IAAiB,CAC5BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,cAAAC,GAAc,GAAGC,EAAA,IAASP;AAC5E,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAR;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,GAAGF;AAAA,UACH,GAAGH;AAAA,UACL,cAAcG,EAAM;AAAA,UACpB,cAAc,CAACG,MAA2B;AACxC,YAAAH,EAAM,SAASG,CAAI,GACnBP,IAAeO,CAAI;AAAA,UACrB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
- import { FormControl as a } from "../Form/Form.js";
2
+ import { Dropzone as a } from "../Dropzone/Dropzone.js";
3
3
  import { FormRenderControl as s } from "../Form/FormRenderControl.js";
4
- import { Dropzone as f } from "../Dropzone/Dropzone.js";
4
+ import { FormControl as f } from "../Form/Form.js";
5
5
  const d = (n) => {
6
6
  const { form: t, label: e, tooltip: m, tooltipProps: p, name: l, ...i } = n;
7
7
  return /* @__PURE__ */ o(
@@ -12,7 +12,7 @@ const d = (n) => {
12
12
  tooltip: m,
13
13
  tooltipProps: p,
14
14
  name: l,
15
- render: ({ field: r }) => /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(f, { ...i, ...r, onChangeValue: r.onChange }) })
15
+ render: ({ field: r }) => /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(a, { ...i, ...r, onChangeValue: r.onChange }) })
16
16
  }
17
17
  );
18
18
  };
@@ -1 +1 @@
1
- {"version":3,"file":"FormDropzone.js","sources":["../../src/FormDropzone/FormDropzone.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Dropzone } from '../Dropzone';\nimport { FieldValues } from 'react-hook-form';\nimport { FormDropzoneProps } from './FormDropzone.types';\n\nexport const FormDropzone = <Data extends FieldValues>(\n props: FormDropzoneProps<Data>\n) => {\n const { form, label, tooltip, tooltipProps, name, ...rest } = props;\n\n return (\n <FormRenderControl\n form={form}\n label={label}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n name={name}\n render={({ field }) => (\n <FormControl>\n <Dropzone {...rest} {...field} onChangeValue={field.onChange} />\n </FormControl>\n )}\n />\n );\n};\n"],"names":["FormDropzone","props","form","label","tooltip","tooltipProps","name","rest","jsx","FormRenderControl","field","FormControl","Dropzone"],"mappings":";;;;AAKO,MAAMA,IAAe,CAC1BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,GAAGC,MAASN;AAE9D,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAI,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH,EAACI,GAAA,EAAU,GAAGL,GAAO,GAAGG,GAAO,eAAeA,EAAM,UAAU,EAAA,CAChE;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1
+ {"version":3,"file":"FormDropzone.js","sources":["../../src/FormDropzone/FormDropzone.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\r\nimport { Dropzone } from '../Dropzone';\r\nimport { FieldValues } from 'react-hook-form';\r\nimport { FormDropzoneProps } from './FormDropzone.types';\r\n\r\nexport const FormDropzone = <Data extends FieldValues>(\r\n props: FormDropzoneProps<Data>\r\n) => {\r\n const { form, label, tooltip, tooltipProps, name, ...rest } = props;\r\n\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n label={label}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n name={name}\r\n render={({ field }) => (\r\n <FormControl>\r\n <Dropzone {...rest} {...field} onChangeValue={field.onChange} />\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormDropzone","props","form","label","tooltip","tooltipProps","name","rest","jsx","FormRenderControl","field","FormControl","Dropzone"],"mappings":";;;;AAKO,MAAMA,IAAe,CAC1BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,GAAGC,MAASN;AAE9D,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAI,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH,EAACI,GAAA,EAAU,GAAGL,GAAO,GAAGG,GAAO,eAAeA,EAAM,UAAU,EAAA,CAChE;AAAA,IAAA;AAAA,EAAA;AAIR;"}
@@ -1,8 +1,8 @@
1
1
  import { jsx as m } from "react/jsx-runtime";
2
- import { FormControl as S } from "../Form/Form.js";
2
+ import { forwardRef as S } from "react";
3
3
  import { FormRenderControl as V } from "../Form/FormRenderControl.js";
4
- import { Input as j } from "../Input/Input.js";
5
- import { forwardRef as q } from "react";
4
+ import { FormControl as j } from "../Form/Form.js";
5
+ import { Input as q } from "../Input/Input.js";
6
6
  function w(D, o) {
7
7
  const { form: a, tooltip: x, tooltipProps: P, label: b, name: u, maxLength: s, counter: y, onChange: C, onBlur: F, onPaste: A, style: I, onPastePrepare: p, ...B } = D;
8
8
  return /* @__PURE__ */ m(
@@ -13,8 +13,8 @@ function w(D, o) {
13
13
  tooltip: x,
14
14
  tooltipProps: P,
15
15
  label: b,
16
- render: ({ field: n, fieldState: R }) => /* @__PURE__ */ m(S, { children: /* @__PURE__ */ m(
17
- j,
16
+ render: ({ field: n, fieldState: R }) => /* @__PURE__ */ m(j, { children: /* @__PURE__ */ m(
17
+ q,
18
18
  {
19
19
  ...n,
20
20
  ...B,
@@ -62,7 +62,7 @@ function w(D, o) {
62
62
  }
63
63
  );
64
64
  }
65
- const G = q(w);
65
+ const G = S(w);
66
66
  export {
67
67
  G as FormInput
68
68
  };
@@ -1 +1 @@
1
- {"version":3,"file":"FormInput.js","sources":["../../src/FormInput/FormInput.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Input } from '../Input';\nimport { FormInputProps } from './FormInput.types';\nimport { FieldValues, Path, PathValue } from 'react-hook-form';\nimport { forwardRef, ReactElement, Ref, RefObject } from 'react';\n\n// TODO: add description\n// export const FormInput = <Data extends FieldValues>(\n// props: FormInputProps<Data> & { inputRef?: Ref<HTMLInputElement> }\n// ) => {\n// const { inputRef, form, label, name, onChange, onBlur, style, ...rest } =\n// props;\n// return (\n// <FormRenderControl\n// form={form}\n// name={name}\n// label={label}\n// render={({ field }) => (\n// <FormControl>\n// <Input\n// {...field}\n// {...rest}\n// ref={(el) => {\n// field.ref(el);\n// if (typeof inputRef === 'function') {\n// inputRef(el);\n// } else if (inputRef) {\n// (inputRef as RefObject<HTMLInputElement | null>).current = el;\n// }\n// }}\n// style={style}\n// value={field.value || ''}\n// onChange={(...rest) => {\n// field.onChange?.(...rest);\n// onChange?.(...rest);\n// }}\n// onBlur={(...rest) => {\n// field.onBlur?.();\n// onBlur?.(...rest);\n// }}\n// />\n// </FormControl>\n// )}\n// />\n// );\n// };\n\nfunction FormInputInner<Data extends FieldValues>(\n props: FormInputProps<Data>,\n ref: Ref<HTMLInputElement>\n) {\n const { form, tooltip, tooltipProps, label, name, maxLength, counter, onChange, onBlur, onPaste, style, onPastePrepare, ...rest } = props;\n return (\n <FormRenderControl\n form={form}\n name={name}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n label={label}\n render={({ field, fieldState }) => (\n <FormControl>\n <Input\n {...field}\n {...rest}\n counter={!!fieldState.error ? false : counter}\n maxLength={maxLength}\n ref={(el) => {\n field.ref(el);\n if (typeof ref === 'function') {\n ref(el);\n } else if (ref) {\n (ref as RefObject<HTMLInputElement | null>).current = el;\n }\n }}\n style={style}\n value={field.value || ''}\n onChange={(...rest) => {\n field.onChange?.(...rest);\n onChange?.(...rest);\n }}\n onPaste={(e) => {\n const pasted = e.clipboardData.getData('text');\n const input = e.currentTarget;\n\n const start = input.selectionStart ?? input.value.length;\n const end = input.selectionEnd ?? input.value.length;\n\n const current = input.value;\n\n let next = current.slice(0, start) + pasted + current.slice(end);\n\n if (onPastePrepare) {\n next = onPastePrepare(next, e);\n }\n\n if (typeof maxLength !== 'number') {\n e.preventDefault();\n\n form.setValue(name, next as PathValue<Data, Path<Data>>, {\n shouldDirty: true,\n shouldTouch: true,\n });\n\n return;\n }\n\n const before = current.slice(0, start);\n const after = current.slice(end);\n\n const available = maxLength - (before.length + after.length);\n\n if (available <= 0) {\n e.preventDefault();\n return;\n }\n\n const limitedPaste = pasted.slice(0, available);\n const limitedNext = before + limitedPaste + after;\n\n e.preventDefault();\n\n form.setValue(name, limitedNext as PathValue<Data, Path<Data>>, {\n shouldDirty: true,\n shouldTouch: true,\n });\n\n requestAnimationFrame(() => {\n input.setSelectionRange(\n before.length + limitedPaste.length,\n before.length + limitedPaste.length\n );\n });\n }}\n onBlur={(...rest) => {\n field.onBlur?.();\n onBlur?.(...rest);\n }}\n />\n </FormControl>\n )}\n />\n );\n}\n\nexport const FormInput = forwardRef(FormInputInner) as <Data extends FieldValues>(\n props: FormInputProps<Data> & { ref?: Ref<HTMLInputElement> }\n) => ReactElement;\n"],"names":["FormInputInner","props","ref","form","tooltip","tooltipProps","label","name","maxLength","counter","onChange","onBlur","onPaste","style","onPastePrepare","rest","jsx","FormRenderControl","field","fieldState","FormControl","Input","el","e","pasted","input","start","end","current","next","before","after","available","limitedPaste","limitedNext","FormInput","forwardRef"],"mappings":";;;;;AA+CA,SAASA,EACPC,GACAC,GACA;AACA,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,GAAS,OAAAC,GAAO,gBAAAC,GAAgB,GAAGC,MAASd;AACpI,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAd;AAAA,MACA,MAAAI;AAAA,MACA,SAAAH;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAY,GAAO,YAAAC,EAAA,wBACfC,GAAA,EACC,UAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACE,GAAGH;AAAA,UACH,GAAGH;AAAA,UACJ,SAAWI,EAAW,QAAQ,KAAQV;AAAA,UACtC,WAAAD;AAAA,UACA,KAAK,CAACc,MAAO;AACX,YAAAJ,EAAM,IAAII,CAAE,GACR,OAAOpB,KAAQ,aACjBA,EAAIoB,CAAE,IACGpB,MACRA,EAA2C,UAAUoB;AAAA,UAE1D;AAAA,UACA,OAAAT;AAAA,UACA,OAAOK,EAAM,SAAS;AAAA,UACtB,UAAU,IAAIH,MAAS;AACrB,YAAAG,EAAM,WAAW,GAAGH,CAAI,GACxBL,IAAW,GAAGK,CAAI;AAAA,UACpB;AAAA,UACA,SAAS,CAACQ,MAAM;AACd,kBAAMC,IAASD,EAAE,cAAc,QAAQ,MAAM,GACvCE,IAAQF,EAAE,eAEVG,IAAQD,EAAM,kBAAkBA,EAAM,MAAM,QAC5CE,IAAMF,EAAM,gBAAgBA,EAAM,MAAM,QAExCG,IAAUH,EAAM;AAEtB,gBAAII,IAAOD,EAAQ,MAAM,GAAGF,CAAK,IAAIF,IAASI,EAAQ,MAAMD,CAAG;AAM/D,gBAJIb,MACFe,IAAOf,EAAee,GAAMN,CAAC,IAG3B,OAAOf,KAAc,UAAU;AACjC,cAAAe,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAMsB,GAAqC;AAAA,gBACvD,aAAa;AAAA,gBACb,aAAa;AAAA,cAAA,CACd;AAED;AAAA,YACF;AAEA,kBAAMC,IAASF,EAAQ,MAAM,GAAGF,CAAK,GAC/BK,IAAQH,EAAQ,MAAMD,CAAG,GAEzBK,IAAYxB,KAAasB,EAAO,SAASC,EAAM;AAErD,gBAAIC,KAAa,GAAG;AAClB,cAAAT,EAAE,eAAA;AACF;AAAA,YACF;AAEA,kBAAMU,IAAeT,EAAO,MAAM,GAAGQ,CAAS,GACxCE,IAAcJ,IAASG,IAAeF;AAE5C,YAAAR,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAM2B,GAA4C;AAAA,cAC9D,aAAa;AAAA,cACb,aAAa;AAAA,YAAA,CACd,GAED,sBAAsB,MAAM;AAC1B,cAAAT,EAAM;AAAA,gBACJK,EAAO,SAASG,EAAa;AAAA,gBAC7BH,EAAO,SAASG,EAAa;AAAA,cAAA;AAAA,YAEjC,CAAC;AAAA,UACH;AAAA,UACA,QAAQ,IAAIlB,MAAS;AACnB,YAAAG,EAAM,SAAA,GACNP,IAAS,GAAGI,CAAI;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAMoB,IAAYC,EAAWpC,CAAc;"}
1
+ {"version":3,"file":"FormInput.js","sources":["../../src/FormInput/FormInput.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\r\nimport { Input } from '../Input';\r\nimport { FormInputProps } from './FormInput.types';\r\nimport { FieldValues, Path, PathValue } from 'react-hook-form';\r\nimport { forwardRef, ReactElement, Ref, RefObject } from 'react';\r\n\r\n// TODO: add description\r\n// export const FormInput = <Data extends FieldValues>(\r\n// props: FormInputProps<Data> & { inputRef?: Ref<HTMLInputElement> }\r\n// ) => {\r\n// const { inputRef, form, label, name, onChange, onBlur, style, ...rest } =\r\n// props;\r\n// return (\r\n// <FormRenderControl\r\n// form={form}\r\n// name={name}\r\n// label={label}\r\n// render={({ field }) => (\r\n// <FormControl>\r\n// <Input\r\n// {...field}\r\n// {...rest}\r\n// ref={(el) => {\r\n// field.ref(el);\r\n// if (typeof inputRef === 'function') {\r\n// inputRef(el);\r\n// } else if (inputRef) {\r\n// (inputRef as RefObject<HTMLInputElement | null>).current = el;\r\n// }\r\n// }}\r\n// style={style}\r\n// value={field.value || ''}\r\n// onChange={(...rest) => {\r\n// field.onChange?.(...rest);\r\n// onChange?.(...rest);\r\n// }}\r\n// onBlur={(...rest) => {\r\n// field.onBlur?.();\r\n// onBlur?.(...rest);\r\n// }}\r\n// />\r\n// </FormControl>\r\n// )}\r\n// />\r\n// );\r\n// };\r\n\r\nfunction FormInputInner<Data extends FieldValues>(\r\n props: FormInputProps<Data>,\r\n ref: Ref<HTMLInputElement>\r\n) {\r\n const { form, tooltip, tooltipProps, label, name, maxLength, counter, onChange, onBlur, onPaste, style, onPastePrepare, ...rest } = props;\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n name={name}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n label={label}\r\n render={({ field, fieldState }) => (\r\n <FormControl>\r\n <Input\r\n {...field}\r\n {...rest}\r\n counter={!!fieldState.error ? false : counter}\r\n maxLength={maxLength}\r\n ref={(el) => {\r\n field.ref(el);\r\n if (typeof ref === 'function') {\r\n ref(el);\r\n } else if (ref) {\r\n (ref as RefObject<HTMLInputElement | null>).current = el;\r\n }\r\n }}\r\n style={style}\r\n value={field.value || ''}\r\n onChange={(...rest) => {\r\n field.onChange?.(...rest);\r\n onChange?.(...rest);\r\n }}\r\n onPaste={(e) => {\r\n const pasted = e.clipboardData.getData('text');\r\n const input = e.currentTarget;\r\n\r\n const start = input.selectionStart ?? input.value.length;\r\n const end = input.selectionEnd ?? input.value.length;\r\n\r\n const current = input.value;\r\n\r\n let next = current.slice(0, start) + pasted + current.slice(end);\r\n\r\n if (onPastePrepare) {\r\n next = onPastePrepare(next, e);\r\n }\r\n\r\n if (typeof maxLength !== 'number') {\r\n e.preventDefault();\r\n\r\n form.setValue(name, next as PathValue<Data, Path<Data>>, {\r\n shouldDirty: true,\r\n shouldTouch: true,\r\n });\r\n\r\n return;\r\n }\r\n\r\n const before = current.slice(0, start);\r\n const after = current.slice(end);\r\n\r\n const available = maxLength - (before.length + after.length);\r\n\r\n if (available <= 0) {\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n const limitedPaste = pasted.slice(0, available);\r\n const limitedNext = before + limitedPaste + after;\r\n\r\n e.preventDefault();\r\n\r\n form.setValue(name, limitedNext as PathValue<Data, Path<Data>>, {\r\n shouldDirty: true,\r\n shouldTouch: true,\r\n });\r\n\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(\r\n before.length + limitedPaste.length,\r\n before.length + limitedPaste.length\r\n );\r\n });\r\n }}\r\n onBlur={(...rest) => {\r\n field.onBlur?.();\r\n onBlur?.(...rest);\r\n }}\r\n />\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n}\r\n\r\nexport const FormInput = forwardRef(FormInputInner) as <Data extends FieldValues>(\r\n props: FormInputProps<Data> & { ref?: Ref<HTMLInputElement> }\r\n) => ReactElement;\r\n"],"names":["FormInputInner","props","ref","form","tooltip","tooltipProps","label","name","maxLength","counter","onChange","onBlur","onPaste","style","onPastePrepare","rest","jsx","FormRenderControl","field","fieldState","FormControl","Input","el","e","pasted","input","start","end","current","next","before","after","available","limitedPaste","limitedNext","FormInput","forwardRef"],"mappings":";;;;;AA+CA,SAASA,EACPC,GACAC,GACA;AACA,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,GAAS,OAAAC,GAAO,gBAAAC,GAAgB,GAAGC,MAASd;AACpI,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAd;AAAA,MACA,MAAAI;AAAA,MACA,SAAAH;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAY,GAAO,YAAAC,EAAA,wBACfC,GAAA,EACC,UAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACE,GAAGH;AAAA,UACH,GAAGH;AAAA,UACJ,SAAWI,EAAW,QAAQ,KAAQV;AAAA,UACtC,WAAAD;AAAA,UACA,KAAK,CAACc,MAAO;AACX,YAAAJ,EAAM,IAAII,CAAE,GACR,OAAOpB,KAAQ,aACjBA,EAAIoB,CAAE,IACGpB,MACRA,EAA2C,UAAUoB;AAAA,UAE1D;AAAA,UACA,OAAAT;AAAA,UACA,OAAOK,EAAM,SAAS;AAAA,UACtB,UAAU,IAAIH,MAAS;AACrB,YAAAG,EAAM,WAAW,GAAGH,CAAI,GACxBL,IAAW,GAAGK,CAAI;AAAA,UACpB;AAAA,UACA,SAAS,CAACQ,MAAM;AACd,kBAAMC,IAASD,EAAE,cAAc,QAAQ,MAAM,GACvCE,IAAQF,EAAE,eAEVG,IAAQD,EAAM,kBAAkBA,EAAM,MAAM,QAC5CE,IAAMF,EAAM,gBAAgBA,EAAM,MAAM,QAExCG,IAAUH,EAAM;AAEtB,gBAAII,IAAOD,EAAQ,MAAM,GAAGF,CAAK,IAAIF,IAASI,EAAQ,MAAMD,CAAG;AAM/D,gBAJIb,MACFe,IAAOf,EAAee,GAAMN,CAAC,IAG3B,OAAOf,KAAc,UAAU;AACjC,cAAAe,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAMsB,GAAqC;AAAA,gBACvD,aAAa;AAAA,gBACb,aAAa;AAAA,cAAA,CACd;AAED;AAAA,YACF;AAEA,kBAAMC,IAASF,EAAQ,MAAM,GAAGF,CAAK,GAC/BK,IAAQH,EAAQ,MAAMD,CAAG,GAEzBK,IAAYxB,KAAasB,EAAO,SAASC,EAAM;AAErD,gBAAIC,KAAa,GAAG;AAClB,cAAAT,EAAE,eAAA;AACF;AAAA,YACF;AAEA,kBAAMU,IAAeT,EAAO,MAAM,GAAGQ,CAAS,GACxCE,IAAcJ,IAASG,IAAeF;AAE5C,YAAAR,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAM2B,GAA4C;AAAA,cAC9D,aAAa;AAAA,cACb,aAAa;AAAA,YAAA,CACd,GAED,sBAAsB,MAAM;AAC1B,cAAAT,EAAM;AAAA,gBACJK,EAAO,SAASG,EAAa;AAAA,gBAC7BH,EAAO,SAASG,EAAa;AAAA,cAAA;AAAA,YAEjC,CAAC;AAAA,UACH;AAAA,UACA,QAAQ,IAAIlB,MAAS;AACnB,YAAAG,EAAM,SAAA,GACNP,IAAS,GAAGI,CAAI;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAMoB,IAAYC,EAAWpC,CAAc;"}
@@ -15,7 +15,7 @@ function m({ initialValue: o = "", ...c }) {
15
15
  name: "name",
16
16
  counter: !0,
17
17
  maxLength: 255,
18
- tooltip: "Test",
18
+ tooltip: "UX/UI принципи, композиція, типографіка, колір, дизайн-системи та робота з інтерфейсами",
19
19
  label: "Label"
20
20
  }
21
21
  ),
@@ -29,7 +29,7 @@ function m({ initialValue: o = "", ...c }) {
29
29
  ] })
30
30
  ] }) });
31
31
  }
32
- const i = {
32
+ const f = {
33
33
  title: "FormInput",
34
34
  component: r,
35
35
  parameters: {
@@ -51,11 +51,11 @@ const i = {
51
51
  decorators: [
52
52
  (o) => /* @__PURE__ */ e("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ e(o, {}) })
53
53
  ]
54
- }, p = {
54
+ }, h = {
55
55
  render: (o) => /* @__PURE__ */ e(m, { ...o })
56
56
  };
57
57
  export {
58
- p as Default,
59
- i as default
58
+ h as Default,
59
+ f as default
60
60
  };
61
61
  //# sourceMappingURL=FormInput.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FormInput.stories.js","sources":["../../src/FormInput/FormInput.stories.tsx"],"sourcesContent":["import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { FormProvider, useForm } from 'react-hook-form';\n\nimport { FormInput } from './FormInput';\n\ntype FormValues = {\n name: string;\n};\n\ntype ControlledProps = Omit<\n React.ComponentProps<typeof FormInput<FormValues>>,\n 'form' | 'name'\n> & {\n initialValue?: string;\n};\n\nfunction ControlledFormInput({ initialValue = '', ...args }: ControlledProps) {\n const form = useForm<FormValues>({\n defaultValues: {\n name: initialValue,\n },\n });\n\n const value = form.watch('name');\n\n return (\n <FormProvider {...form}>\n <div className=\"max-w-sm space-y-3\">\n <FormInput<FormValues>\n form={form}\n name=\"name\"\n counter\n maxLength={255}\n tooltip={\"Test\"}\n label={\"Label\"}\n />\n\n <div className=\"text-xs text-muted-foreground\">\n value: <span className=\"font-mono\">{value}</span>\n </div>\n\n <div className=\"text-xs text-muted-foreground\">\n length: <span className=\"font-mono\">\n {value?.length ?? 0}\n </span>\n </div>\n </div>\n </FormProvider>\n );\n}\n\nconst meta = {\n title: 'FormInput',\n component: FormInput,\n parameters: {\n layout: 'centered',\n },\n args: {\n label: 'Input label',\n placeholder: 'Type something...',\n disabled: false,\n },\n argTypes: {\n form: { control: false },\n name: { control: false },\n onChange: { control: false },\n onBlur: { control: false },\n onPaste: { control: false },\n onPastePrepare: { control: false },\n },\n decorators: [\n (Story) => (\n <div className=\"p-6 w-[420px]\">\n <Story />\n </div>\n ),\n ],\n} satisfies Meta<typeof FormInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n render: (args) => <ControlledFormInput {...args} />,\n};\n"],"names":["ControlledFormInput","initialValue","args","form","useForm","value","FormProvider","jsxs","jsx","FormInput","meta","Story","Default"],"mappings":";;;AAiBA,SAASA,EAAoB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC5E,QAAMC,IAAOC,EAAoB;AAAA,IAC/B,eAAe;AAAA,MACb,MAAMH;AAAA,IAAA;AAAA,EACR,CACD,GAEKI,IAAQF,EAAK,MAAM,MAAM;AAE/B,2BACGG,GAAA,EAAc,GAAGH,GAChB,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,MAAK;AAAA,QACL,SAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGT,gBAAAI,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACtC,gBAAAC,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAM;AAAA,IAAA,GAC5C;AAAA,IAEA,gBAAAE,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,wBACpC,QAAA,EAAK,WAAU,aACrB,UAAAF,GAAO,UAAU,EAAA,CACpB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMK,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,QAAQ,EAAE,SAAS,GAAA;AAAA,IACnB,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,gBAAgB,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAEnC,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAMaC,IAAiB;AAAA,EAC5B,QAAQ,CAACV,MAAS,gBAAAM,EAACR,GAAA,EAAqB,GAAGE,EAAA,CAAM;AACnD;"}
1
+ {"version":3,"file":"FormInput.stories.js","sources":["../../src/FormInput/FormInput.stories.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\nimport { FormProvider, useForm } from 'react-hook-form';\r\n\r\nimport { FormInput } from './FormInput';\r\n\r\ntype FormValues = {\r\n name: string;\r\n};\r\n\r\ntype ControlledProps = Omit<\r\n React.ComponentProps<typeof FormInput<FormValues>>,\r\n 'form' | 'name'\r\n> & {\r\n initialValue?: string;\r\n};\r\n\r\nfunction ControlledFormInput({ initialValue = '', ...args }: ControlledProps) {\r\n const form = useForm<FormValues>({\r\n defaultValues: {\r\n name: initialValue,\r\n },\r\n });\r\n\r\n const value = form.watch('name');\r\n const tooltip = \"UX/UI принципи, композиція, типографіка, колір, дизайн-системи та робота з інтерфейсами\"\r\n return (\r\n <FormProvider {...form}>\r\n <div className=\"max-w-sm space-y-3\">\r\n <FormInput<FormValues>\r\n form={form}\r\n name=\"name\"\r\n counter\r\n maxLength={255}\r\n tooltip={tooltip}\r\n label={\"Label\"}\r\n />\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{value}</span>\r\n </div>\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n length: <span className=\"font-mono\">\r\n {value?.length ?? 0}\r\n </span>\r\n </div>\r\n </div>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'FormInput',\r\n component: FormInput,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n label: 'Input label',\r\n placeholder: 'Type something...',\r\n disabled: false,\r\n },\r\n argTypes: {\r\n form: { control: false },\r\n name: { control: false },\r\n onChange: { control: false },\r\n onBlur: { control: false },\r\n onPaste: { control: false },\r\n onPastePrepare: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story />\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof FormInput>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Default: Story = {\r\n render: (args) => <ControlledFormInput {...args} />,\r\n};\r\n"],"names":["ControlledFormInput","initialValue","args","form","useForm","value","FormProvider","jsxs","jsx","FormInput","meta","Story","Default"],"mappings":";;;AAiBA,SAASA,EAAoB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC5E,QAAMC,IAAOC,EAAoB;AAAA,IAC/B,eAAe;AAAA,MACb,MAAMH;AAAA,IAAA;AAAA,EACR,CACD,GAEKI,IAAQF,EAAK,MAAM,MAAM;AAE/B,2BACGG,GAAA,EAAc,GAAGH,GAChB,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,MAAK;AAAA,QACL,SAAO;AAAA,QACP,WAAW;AAAA,QACX,SATQ;AAAA,QAUR,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGT,gBAAAI,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACtC,gBAAAC,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAM;AAAA,IAAA,GAC5C;AAAA,IAEA,gBAAAE,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,wBACpC,QAAA,EAAK,WAAU,aACrB,UAAAF,GAAO,UAAU,EAAA,CACpB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMK,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,QAAQ,EAAE,SAAS,GAAA;AAAA,IACnB,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,gBAAgB,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAEnC,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAMaC,IAAiB;AAAA,EAC5B,QAAQ,CAACV,MAAS,gBAAAM,EAACR,GAAA,EAAqB,GAAGE,EAAA,CAAM;AACnD;"}
@@ -1 +1 @@
1
- {"version":3,"file":"FormRadio.js","sources":["../../src/FormRadio/FormRadio.tsx"],"sourcesContent":["import { FieldValues } from 'react-hook-form';\n\nimport { FormControl, FormItem } from '../Form/Form';\nimport { FormRenderControl } from '../Form/FormRenderControl';\nimport { Radio } from '../Radio';\n\nimport type { FormRadioGroupProps } from './FormRadio.types.ts';\n\nexport const FormRadio = <Data extends FieldValues>(\n props: FormRadioGroupProps<Data>\n) => {\n const {\n form,\n name,\n label,\n onValueChange,\n value,\n defaultValue,\n renderOption,\n ...rest\n } = props;\n return (\n <FormRenderControl\n form={form}\n name={name}\n label={label}\n render={({ field }) => (\n <FormControl>\n <Radio\n {...field}\n {...rest}\n defaultValue={defaultValue || field.value}\n value={value || field.value}\n onValueChange={(value) => {\n field.onChange(value);\n onValueChange?.(value);\n }}\n renderOption={(option, DefaultOptionComponent) => {\n return (\n <FormItem key={option.value}>\n <FormControl>\n {renderOption?.(option, DefaultOptionComponent) || (\n <DefaultOptionComponent {...option} />\n )}\n </FormControl>\n </FormItem>\n );\n }}\n />\n </FormControl>\n )}\n />\n );\n};\n"],"names":["FormRadio","props","form","name","label","onValueChange","value","defaultValue","renderOption","rest","jsx","FormRenderControl","field","FormControl","Radio","option","DefaultOptionComponent","FormItem"],"mappings":";;;;AAQO,MAAMA,IAAY,CACvBC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,MAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAQ,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAGF;AAAA,UACH,GAAGH;AAAA,UACJ,cAAcF,KAAgBK,EAAM;AAAA,UACpC,OAAON,KAASM,EAAM;AAAA,UACtB,eAAe,CAACN,MAAU;AACxB,YAAAM,EAAM,SAASN,CAAK,GACpBD,IAAgBC,CAAK;AAAA,UACvB;AAAA,UACA,cAAc,CAACS,GAAQC,MAEnB,gBAAAN,EAACO,GAAA,EACC,UAAA,gBAAAP,EAACG,GAAA,EACE,cAAeE,GAAQC,CAAsB,KAC5C,gBAAAN,EAACM,KAAwB,GAAGD,EAAA,CAAQ,GAExC,EAAA,GALaA,EAAO,KAMtB;AAAA,QAEJ;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1
+ {"version":3,"file":"FormRadio.js","sources":["../../src/FormRadio/FormRadio.tsx"],"sourcesContent":["import { FieldValues } from 'react-hook-form';\r\n\r\nimport { FormControl, FormItem } from '../Form/Form';\r\nimport { FormRenderControl } from '../Form/FormRenderControl';\r\nimport { Radio } from '../Radio';\r\n\r\nimport type { FormRadioGroupProps } from './FormRadio.types.ts';\r\n\r\nexport const FormRadio = <Data extends FieldValues>(\r\n props: FormRadioGroupProps<Data>\r\n) => {\r\n const {\r\n form,\r\n name,\r\n label,\r\n onValueChange,\r\n value,\r\n defaultValue,\r\n renderOption,\r\n ...rest\r\n } = props;\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n name={name}\r\n label={label}\r\n render={({ field }) => (\r\n <FormControl>\r\n <Radio\r\n {...field}\r\n {...rest}\r\n defaultValue={defaultValue || field.value}\r\n value={value || field.value}\r\n onValueChange={(value) => {\r\n field.onChange(value);\r\n onValueChange?.(value);\r\n }}\r\n renderOption={(option, DefaultOptionComponent) => {\r\n return (\r\n <FormItem key={option.value}>\r\n <FormControl>\r\n {renderOption?.(option, DefaultOptionComponent) || (\r\n <DefaultOptionComponent {...option} />\r\n )}\r\n </FormControl>\r\n </FormItem>\r\n );\r\n }}\r\n />\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormRadio","props","form","name","label","onValueChange","value","defaultValue","renderOption","rest","jsx","FormRenderControl","field","FormControl","Radio","option","DefaultOptionComponent","FormItem"],"mappings":";;;;AAQO,MAAMA,IAAY,CACvBC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,MAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAQ,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAGF;AAAA,UACH,GAAGH;AAAA,UACJ,cAAcF,KAAgBK,EAAM;AAAA,UACpC,OAAON,KAASM,EAAM;AAAA,UACtB,eAAe,CAACN,MAAU;AACxB,YAAAM,EAAM,SAASN,CAAK,GACpBD,IAAgBC,CAAK;AAAA,UACvB;AAAA,UACA,cAAc,CAACS,GAAQC,MAEnB,gBAAAN,EAACO,GAAA,EACC,UAAA,gBAAAP,EAACG,GAAA,EACE,cAAeE,GAAQC,CAAsB,KAC5C,gBAAAN,EAACM,KAAwB,GAAGD,EAAA,CAAQ,GAExC,EAAA,GALaA,EAAO,KAMtB;AAAA,QAEJ;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
@@ -1,11 +1,8 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
- import { FormControl as u } from "../Form/Form.js";
2
+ import { Select as u } from "../Select/Select.js";
3
3
  import { FormRenderControl as x } from "../Form/FormRenderControl.js";
4
- import "@radix-ui/react-select";
5
- import "lucide-react";
6
- import "@oneplatformdev/utils";
7
- import { Select as F } from "../Select/Select.js";
8
- const V = (m) => {
4
+ import { FormControl as F } from "../Form/Form.js";
5
+ const b = (m) => {
9
6
  const {
10
7
  value: i = void 0,
11
8
  form: p,
@@ -30,7 +27,7 @@ const V = (m) => {
30
27
  label: a,
31
28
  containerProps: C,
32
29
  render: ({ field: t }) => /* @__PURE__ */ e(
33
- F,
30
+ u,
34
31
  {
35
32
  value: t.value ?? (i || ""),
36
33
  options: c,
@@ -38,7 +35,7 @@ const V = (m) => {
38
35
  const o = n ? n(r) : r;
39
36
  t.onChange(o), h?.(r, o);
40
37
  },
41
- renderTrigger: (r, o) => /* @__PURE__ */ e(u, { children: d?.(r, o) || o }),
38
+ renderTrigger: (r, o) => /* @__PURE__ */ e(F, { children: d?.(r, o) || o }),
42
39
  ...f
43
40
  }
44
41
  )
@@ -46,6 +43,6 @@ const V = (m) => {
46
43
  );
47
44
  };
48
45
  export {
49
- V as FormSelect
46
+ b as FormSelect
50
47
  };
51
48
  //# sourceMappingURL=FormSelect.js.map