@ultraviolet/form 4.0.0-beta.2 → 4.0.0-beta.20

package/README.md

@@ -21,18 +21,206 @@ import { Form, TextInputField } from '@ultraviolet/form'
 import { theme } from '@ultraviolet/ui'
 import { useForm } from '@ultraviolet/form'
 
+// Here are the input types of your form
+type FormValues = {
+  firstName: string
+  lastName: string
+}
+
+// We define the initial values of the form
+const INITIAL_VALUES: FormValues = {
+  firstName: 'Marc',
+  lastName: 'Scout',
+} as const
+
+export default function App() {
+  const methods = useForm<FormValues>({
+    defaultValues: INITIAL_VALUES,
+    mode: 'onChange',
+  })
+  
+  const formErrors = {
+    required: () => 'This field is required',
+    // Add more error messages as needed for min, max, etc.
+  }
+  
+  const onSubmit = async ({
+    firstName,
+    lastName,
+  }: FormValues) => {
+    // Add your form submission logic here
+    console.log('Form submitted with values:', { firstName, lastName })
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Form methods={methods} errors={formErrors} onSubmit={onSubmit}>
+        <TextInputField name="firstName" />
+        <TextInputField name="lastName" />
+      </Form>
+    </ThemeProvider>
+  )
+}
+```
+
+###  `useWatch` Hook
+
+You can use the `useWatch` hook from `@ultraviolet/form` to watch specific fields in your form thus subscribing to their changes.
+It can be useful for displaying real-time updates or triggering actions based on field values.
+
+```tsx
+// FirstNameWatched is a component that needs to watch the firstName field
+function FirstNameWatched({ control }: { control: Control<FormInputs> }) {
+  const firstName = useWatch({
+    control,
+    name: "firstName",
+  })
+
+  return <p>Watch: {firstName}</p>
+}
+
 export default function App() {
-  const methods = useForm()
+  ... // same setup as before
+  
   return (
     <ThemeProvider theme={theme}>
-      <Form methods={methods}>
-        <TextInputField name="example" />
+      <Form methods={methods} errors={formErrors} onSubmit={onSubmit}>
+        <TextInputField name="firstName" />
+        <TextInputField name="lastName" />
+        
+        <FirstNameWatched control={control} />
       </Form>
     </ThemeProvider>
   )
 }
 ```
 
+### Form Validation
+
+You can validate each fields passing either `regex` or `validate` to any field that support it. Not all field supports `regex` for instance but all fields support `validate`.
+In addition many field support `required`, `minLength`, `maxLength`, `min`, and `max` validation.
+
+#### Native Validation
+
+```tsx
+<TextInputField 
+  name="firstName" 
+  required
+  minLength={2}
+  maxLength={30}
+/>
+```
+
+#### With Validate
+
+```tsx
+const EXISTING_IPS = ['192.168.1.1']
+
+<TextInputField 
+  name="ip" 
+  validate={{
+  ipAlreadyExists: (ip: string) =>
+    EXISTING_IPS.includes(ip) ? 'This ip is already in use' : undefined,
+  }}
+/>
+```
+
+#### With Regex
+
+```tsx
+<TextInputField 
+  name="email"
+  regex={[/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/]}
+/>
+```
+
+We all know regex can be tricky, so to help you with that we made [Scaleway Regex](https://github.com/scaleway/scaleway-lib/tree/main/packages/regex) library that contains a lot of useful regexes that you can use in your forms.
+You can easily install it with:
+
+```sh
+pnpm add @scaleway/regex
+```
+
+You can then use it like this:
+
+```tsx
+import { email } from '@scaleway/regex'
+
+<TextInputField 
+  name="email"
+  regex={[email]}
+/>
+```
+
+Check all the available regexes in the [Scaleway Regex file](https://github.com/scaleway/scaleway-lib/blob/main/packages/regex/src/index.ts)
+
+### Resolvers | Zod
+
+You can use [Zod](https://zod.dev/) for validation by integrating it with `@ultraviolet/form`. First you will need to install Zod and the Zod resolver for React Hook Form:
+
+```sh
+pnpm add zod @hookform/resolvers
+```
+
+
+Here's how you can do it:
+
+```tsx
+import { ThemeProvider } from '@emotion/react'
+import { Form, TextInputField } from '@ultraviolet/form'
+import { theme } from '@ultraviolet/ui'
+import { useForm } from '@ultraviolet/form'
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+
+// Define your Zod schema for validation
+const schema = z.object({
+  firstName: z.string(),
+  lastName: z.string(),
+})
+
+// Types are inferred from the Zod schema
+type FormValues = z.infer<typeof schema>
+
+// We define the initial values of the form
+const INITIAL_VALUES: FormValues = {
+  firstName: 'Marc',
+  lastName: 'Scout',
+} as const
+
+export default function App() {
+  const methods = useForm<FormValues>({
+    defaultValues: INITIAL_VALUES,
+    resolver: zodResolver(schema),
+    mode: 'onChange',
+  })
+  
+  const formErrors = {
+    required: () => 'This field is required',
+    // Add more error messages as needed for min, max, etc.
+  }
+  
+  const onSubmit = async ({
+    firstName,
+    lastName,
+  }: FormValues) => {
+    // Add your form submission logic here
+    console.log('Form submitted with values:', { firstName, lastName })
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Form methods={methods} errors={formErrors} onSubmit={onSubmit}>
+        <TextInputField name="firstName" />
+        <TextInputField name="lastName" />
+      </Form>
+    </ThemeProvider>
+  )
+}
+```
+
+If you need more examples with other resolvers we invite you to check [React Hook Form Resolvers Documentation](https://github.com/react-hook-form/resolvers#quickstart)
+
 ## Documentation
 
 Checkout our [documentation website](https://storybook.ultraviolet.scaleway.com/).

package/dist/components/CheckboxGroupField/index.cjs

@@ -16,12 +16,12 @@ const CheckboxGroupField = ({
   control,
   children,
   onChange,
-  label = "",
   error: customError,
   name,
   required = false,
   shouldUnregister = false,
   validate,
+  legend = "",
   ...props
 }) => {
   const {
@@ -73,8 +73,8 @@ const CheckboxGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
-  }, error) ?? customError, name, required, children });
+    label: legend
+  }, error) ?? customError, name, required, legend, children });
 };
 CheckboxGroupField.Checkbox = ui.CheckboxGroup.Checkbox;
 exports.CheckboxGroupField = CheckboxGroupField;

package/dist/components/CheckboxGroupField/index.d.ts

@@ -2,13 +2,11 @@ import { CheckboxGroup } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof CheckboxGroup>, 'value' | 'onChange'>;
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof CheckboxGroup>, 'value' | 'onChange'>;
 export declare const CheckboxGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, children, onChange, label, error: customError, name, required, shouldUnregister, validate, ...props }: CheckboxGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
-    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: Omit<({
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, children, onChange, error: customError, name, required, shouldUnregister, validate, legend, ...props }: CheckboxGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, tooltip, }: Omit<({
         error?: string | import("react").ReactNode;
-        size?: number;
-        progress?: boolean;
         helper?: import("react").ReactNode;
         disabled?: boolean;
         checked?: boolean | "indeterminate";

package/dist/components/CheckboxGroupField/index.js

@@ -14,12 +14,12 @@ const CheckboxGroupField = ({
   control,
   children,
   onChange,
-  label = "",
   error: customError,
   name,
   required = false,
   shouldUnregister = false,
   validate,
+  legend = "",
   ...props
 }) => {
   const {
@@ -71,8 +71,8 @@ const CheckboxGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
-  }, error) ?? customError, name, required, children });
+    label: legend
+  }, error) ?? customError, name, required, legend, children });
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;
 export {

package/dist/components/{DateField → DateInputField}/index.cjs

@@ -9,31 +9,21 @@ const minDate = require("../../validators/minDate.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
 const parseDate = (value) => typeof value === "string" ? new Date(value) : value;
 const isEmpty = (value) => !value;
-const DateField = ({
+const DateInputField = ({
   required,
   name,
   control,
   label = "",
   format,
-  locale,
-  maxDate: maxDate$1,
   minDate: minDate$1,
-  disabled,
+  maxDate: maxDate$1,
   onChange,
   onBlur,
-  onFocus,
   validate,
-  autoFocus = false,
-  excludeDates,
   selectsRange,
-  size,
-  placeholder,
-  tooltip,
-  clearable,
-  "data-testid": dataTestId,
-  shouldUnregister = false,
   showMonthYearPicker,
-  input = "text"
+  shouldUnregister = false,
+  ...props
 }) => {
   const {
     getError
@@ -56,14 +46,14 @@ const DateField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.DateInput, { name: field.name, label, placeholder, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DateInput, { ...props, name: field.name, label, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
     if (!value) return "";
     const date = parseDate(value);
     return showMonthYearPicker ? date.toLocaleDateString(void 0, {
       year: "numeric",
       month: "numeric"
     }) : date.toLocaleDateString();
-  }), locale, required, onChange: (val) => {
+  }), required, onChange: (val) => {
     if (val && val instanceof Date) {
       onChange?.(val);
       const newDate = parseDate(val);
@@ -84,10 +74,10 @@ const DateField = ({
   }, onBlur: (e) => {
     field.onBlur();
     onBlur?.(e);
-  }, onFocus, maxDate: maxDate$1, size, minDate: minDate$1, error: getError({
+  }, maxDate: maxDate$1, minDate: minDate$1, error: getError({
     minDate: minDate$1,
     maxDate: maxDate$1,
     label
-  }, error), disabled, autoFocus, excludeDates, selectsRange, showMonthYearPicker, "data-testid": dataTestId, clearable, tooltip, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0, input });
+  }, error), selectsRange, showMonthYearPicker, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0 });
 };
-exports.DateField = DateField;
+exports.DateInputField = DateInputField;

package/dist/components/DateInputField/index.d.ts

@@ -0,0 +1,7 @@
+import { DateInput } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type DateInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof DateInput>, 'required' | 'name' | 'onChange' | 'value'>;
+export declare const DateInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, control, label, format, minDate, maxDate, onChange, onBlur, validate, selectsRange, showMonthYearPicker, shouldUnregister, ...props }: DateInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{DateField → DateInputField}/index.js

@@ -7,31 +7,21 @@ import { minDateValidator } from "../../validators/minDate.js";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const parseDate = (value) => typeof value === "string" ? new Date(value) : value;
 const isEmpty = (value) => !value;
-const DateField = ({
+const DateInputField = ({
   required,
   name,
   control,
   label = "",
   format,
-  locale,
-  maxDate,
   minDate,
-  disabled,
+  maxDate,
   onChange,
   onBlur,
-  onFocus,
   validate,
-  autoFocus = false,
-  excludeDates,
   selectsRange,
-  size,
-  placeholder,
-  tooltip,
-  clearable,
-  "data-testid": dataTestId,
-  shouldUnregister = false,
   showMonthYearPicker,
-  input = "text"
+  shouldUnregister = false,
+  ...props
 }) => {
   const {
     getError
@@ -54,14 +44,14 @@ const DateField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsx(DateInput, { name: field.name, label, placeholder, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
+  return /* @__PURE__ */ jsx(DateInput, { ...props, name: field.name, label, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
     if (!value) return "";
     const date = parseDate(value);
     return showMonthYearPicker ? date.toLocaleDateString(void 0, {
       year: "numeric",
       month: "numeric"
     }) : date.toLocaleDateString();
-  }), locale, required, onChange: (val) => {
+  }), required, onChange: (val) => {
     if (val && val instanceof Date) {
       onChange?.(val);
       const newDate = parseDate(val);
@@ -82,12 +72,12 @@ const DateField = ({
   }, onBlur: (e) => {
     field.onBlur();
     onBlur?.(e);
-  }, onFocus, maxDate, size, minDate, error: getError({
+  }, maxDate, minDate, error: getError({
     minDate,
     maxDate,
     label
-  }, error), disabled, autoFocus, excludeDates, selectsRange, showMonthYearPicker, "data-testid": dataTestId, clearable, tooltip, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0, input });
+  }, error), selectsRange, showMonthYearPicker, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0 });
 };
 export {
-  DateField
+  DateInputField
 };

package/dist/components/Form/index.cjs

@@ -2,9 +2,28 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const _styled = require("@emotion/styled/base");
 const reactHookForm = require("react-hook-form");
 const defaultErrors = require("./defaultErrors.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const StyledForm = /* @__PURE__ */ _styled__default.default("form", process.env.NODE_ENV === "production" ? {
+  target: "ep3wzi00"
+} : {
+  target: "ep3wzi00",
+  label: "StyledForm"
+})(process.env.NODE_ENV === "production" ? {
+  name: "49aokf",
+  styles: "display:contents"
+} : {
+  name: "49aokf",
+  styles: "display:contents/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2Zvcm0vc3JjL2NvbXBvbmVudHMvRm9ybS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9mb3JtL3NyYy9jb21wb25lbnRzL0Zvcm0vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgRmllbGRWYWx1ZXMsIFVzZUZvcm1SZXR1cm4gfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nXG5pbXBvcnQgeyBGb3JtUHJvdmlkZXIgfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nXG5pbXBvcnQgeyBFcnJvclByb3ZpZGVyIH0gZnJvbSAnLi4vLi4vcHJvdmlkZXJzJ1xuaW1wb3J0IHR5cGUgeyBGb3JtRXJyb3JzIH0gZnJvbSAnLi4vLi4vdHlwZXMnXG5pbXBvcnQgeyBkZWZhdWx0RXJyb3JzIH0gZnJvbSAnLi9kZWZhdWx0RXJyb3JzJ1xuXG50eXBlIE9uU3VibWl0UmV0dXJuID0gc3RyaW5nIHwgbnVsbCB8IHVuZGVmaW5lZCB8IHZvaWRcblxudHlwZSBGb3JtUHJvcHM8VEZpZWxkVmFsdWVzIGV4dGVuZHMgRmllbGRWYWx1ZXM+ID0ge1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVxuICBlcnJvcnM6IEZvcm1FcnJvcnNcbiAgbmFtZT86IHN0cmluZ1xuICBvblN1Ym1pdDogKGRhdGE6IFRGaWVsZFZhbHVlcykgPT4gUHJvbWlzZTxPblN1Ym1pdFJldHVybj4gfCBPblN1Ym1pdFJldHVyblxuICBtZXRob2RzOiBVc2VGb3JtUmV0dXJuPFRGaWVsZFZhbHVlcz5cbn1cblxuY29uc3QgU3R5bGVkRm9ybSA9IHN0eWxlZC5mb3JtYFxuICBkaXNwbGF5OiBjb250ZW50cztcbmBcblxuZXhwb3J0IGNvbnN0IEZvcm0gPSA8VEZpZWxkVmFsdWVzIGV4dGVuZHMgRmllbGRWYWx1ZXM+KHtcbiAgY2hpbGRyZW4sXG4gIG1ldGhvZHMsXG4gIGVycm9ycyxcbiAgb25TdWJtaXQsXG4gIG5hbWUsXG59OiBGb3JtUHJvcHM8VEZpZWxkVmFsdWVzPikgPT4ge1xuICBjb25zdCBoYW5kbGVTdWJtaXQgPSBtZXRob2RzLmhhbmRsZVN1Ym1pdChhc3luYyB2YWx1ZXMgPT4ge1xuICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IG9uU3VibWl0KHZhbHVlcylcblxuICAgIGlmIChyZXN1bHQpIHtcbiAgICAgIG1ldGhvZHMuc2V0RXJyb3IoJ3Jvb3Quc3VibWl0Jywge1xuICAgICAgICB0eXBlOiAnY3VzdG9tJyxcbiAgICAgICAgbWVzc2FnZTogcmVzdWx0LFxuICAgICAgfSlcbiAgICB9XG4gIH0pXG5cbiAgcmV0dXJuIChcbiAgICA8Rm9ybVByb3ZpZGVyIHsuLi5tZXRob2RzfT5cbiAgICAgIDxFcnJvclByb3ZpZGVyIGVycm9ycz17eyAuLi5kZWZhdWx0RXJyb3JzLCAuLi5lcnJvcnMgfX0+XG4gICAgICAgIDxTdHlsZWRGb3JtXG4gICAgICAgICAgb25TdWJtaXQ9e2FzeW5jIGUgPT4ge1xuICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpXG4gICAgICAgICAgICBhd2FpdCBoYW5kbGVTdWJtaXQoZSlcbiAgICAgICAgICB9fVxuICAgICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgICAgbm9WYWxpZGF0ZVxuICAgICAgICA+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L1N0eWxlZEZvcm0+XG4gICAgICA8L0Vycm9yUHJvdmlkZXI+XG4gICAgPC9Gb3JtUHJvdmlkZXI+XG4gIClcbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const Form = ({
   children,
   methods,
@@ -24,7 +43,7 @@ const Form = ({
   return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx(index.ErrorProvider, { errors: {
     ...defaultErrors.defaultErrors,
     ...errors
-  }, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: async (e) => {
+  }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledForm, { onSubmit: async (e) => {
     e.preventDefault();
     e.stopPropagation();
     await handleSubmit(e);

package/dist/components/Form/index.js

@@ -1,8 +1,25 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
+import _styled from "@emotion/styled/base";
 import { FormProvider } from "react-hook-form";
 import { defaultErrors } from "./defaultErrors.js";
 import { ErrorProvider } from "../../providers/ErrorContext/index.js";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const StyledForm = /* @__PURE__ */ _styled("form", process.env.NODE_ENV === "production" ? {
+  target: "ep3wzi00"
+} : {
+  target: "ep3wzi00",
+  label: "StyledForm"
+})(process.env.NODE_ENV === "production" ? {
+  name: "49aokf",
+  styles: "display:contents"
+} : {
+  name: "49aokf",
+  styles: "display:contents/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2Zvcm0vc3JjL2NvbXBvbmVudHMvRm9ybS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9mb3JtL3NyYy9jb21wb25lbnRzL0Zvcm0vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgRmllbGRWYWx1ZXMsIFVzZUZvcm1SZXR1cm4gfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nXG5pbXBvcnQgeyBGb3JtUHJvdmlkZXIgfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nXG5pbXBvcnQgeyBFcnJvclByb3ZpZGVyIH0gZnJvbSAnLi4vLi4vcHJvdmlkZXJzJ1xuaW1wb3J0IHR5cGUgeyBGb3JtRXJyb3JzIH0gZnJvbSAnLi4vLi4vdHlwZXMnXG5pbXBvcnQgeyBkZWZhdWx0RXJyb3JzIH0gZnJvbSAnLi9kZWZhdWx0RXJyb3JzJ1xuXG50eXBlIE9uU3VibWl0UmV0dXJuID0gc3RyaW5nIHwgbnVsbCB8IHVuZGVmaW5lZCB8IHZvaWRcblxudHlwZSBGb3JtUHJvcHM8VEZpZWxkVmFsdWVzIGV4dGVuZHMgRmllbGRWYWx1ZXM+ID0ge1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVxuICBlcnJvcnM6IEZvcm1FcnJvcnNcbiAgbmFtZT86IHN0cmluZ1xuICBvblN1Ym1pdDogKGRhdGE6IFRGaWVsZFZhbHVlcykgPT4gUHJvbWlzZTxPblN1Ym1pdFJldHVybj4gfCBPblN1Ym1pdFJldHVyblxuICBtZXRob2RzOiBVc2VGb3JtUmV0dXJuPFRGaWVsZFZhbHVlcz5cbn1cblxuY29uc3QgU3R5bGVkRm9ybSA9IHN0eWxlZC5mb3JtYFxuICBkaXNwbGF5OiBjb250ZW50cztcbmBcblxuZXhwb3J0IGNvbnN0IEZvcm0gPSA8VEZpZWxkVmFsdWVzIGV4dGVuZHMgRmllbGRWYWx1ZXM+KHtcbiAgY2hpbGRyZW4sXG4gIG1ldGhvZHMsXG4gIGVycm9ycyxcbiAgb25TdWJtaXQsXG4gIG5hbWUsXG59OiBGb3JtUHJvcHM8VEZpZWxkVmFsdWVzPikgPT4ge1xuICBjb25zdCBoYW5kbGVTdWJtaXQgPSBtZXRob2RzLmhhbmRsZVN1Ym1pdChhc3luYyB2YWx1ZXMgPT4ge1xuICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IG9uU3VibWl0KHZhbHVlcylcblxuICAgIGlmIChyZXN1bHQpIHtcbiAgICAgIG1ldGhvZHMuc2V0RXJyb3IoJ3Jvb3Quc3VibWl0Jywge1xuICAgICAgICB0eXBlOiAnY3VzdG9tJyxcbiAgICAgICAgbWVzc2FnZTogcmVzdWx0LFxuICAgICAgfSlcbiAgICB9XG4gIH0pXG5cbiAgcmV0dXJuIChcbiAgICA8Rm9ybVByb3ZpZGVyIHsuLi5tZXRob2RzfT5cbiAgICAgIDxFcnJvclByb3ZpZGVyIGVycm9ycz17eyAuLi5kZWZhdWx0RXJyb3JzLCAuLi5lcnJvcnMgfX0+XG4gICAgICAgIDxTdHlsZWRGb3JtXG4gICAgICAgICAgb25TdWJtaXQ9e2FzeW5jIGUgPT4ge1xuICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpXG4gICAgICAgICAgICBhd2FpdCBoYW5kbGVTdWJtaXQoZSlcbiAgICAgICAgICB9fVxuICAgICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgICAgbm9WYWxpZGF0ZVxuICAgICAgICA+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L1N0eWxlZEZvcm0+XG4gICAgICA8L0Vycm9yUHJvdmlkZXI+XG4gICAgPC9Gb3JtUHJvdmlkZXI+XG4gIClcbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const Form = ({
   children,
   methods,
@@ -22,7 +39,7 @@ const Form = ({
   return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: {
     ...defaultErrors,
     ...errors
-  }, children: /* @__PURE__ */ jsx("form", { onSubmit: async (e) => {
+  }, children: /* @__PURE__ */ jsx(StyledForm, { onSubmit: async (e) => {
     e.preventDefault();
     e.stopPropagation();
     await handleSubmit(e);

package/dist/components/KeyValueField/index.cjs

@@ -5,7 +5,7 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const icons = require("@ultraviolet/icons");
 const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
-const index = require("../TextInputFieldV2/index.cjs");
+const index = require("../TextInputField/index.cjs");
 const KeyValueField = ({
   name,
   inputKey,

package/dist/components/KeyValueField/index.d.ts

@@ -1,15 +1,15 @@
 import { Button } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { Control, FieldArrayPath, FieldValues } from 'react-hook-form';
-import { TextInputField as TextInputFieldV2 } from '../TextInputFieldV2';
+import { TextInputField } from '../TextInputField';
 type InputKeyProps = {
-    label: ComponentProps<typeof TextInputFieldV2>['label'];
-    required?: ComponentProps<typeof TextInputFieldV2>['required'];
-    regex?: ComponentProps<typeof TextInputFieldV2>['regex'];
+    label: ComponentProps<typeof TextInputField>['label'];
+    required?: ComponentProps<typeof TextInputField>['required'];
+    regex?: ComponentProps<typeof TextInputField>['regex'];
 };
 type InputValueProps = {
-    type?: ComponentProps<typeof TextInputFieldV2>['type'];
-    placeholder?: ComponentProps<typeof TextInputFieldV2>['placeholder'];
+    type?: ComponentProps<typeof TextInputField>['type'];
+    placeholder?: ComponentProps<typeof TextInputField>['placeholder'];
 } & InputKeyProps;
 type AddButtonProps = {
     name: ComponentProps<typeof Button>['children'];

package/dist/components/KeyValueField/index.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { DeleteIcon, PlusIcon } from "@ultraviolet/icons";
 import { Stack, Row, Button } from "@ultraviolet/ui";
 import { useFieldArray } from "react-hook-form";
-import { TextInputField } from "../TextInputFieldV2/index.js";
+import { TextInputField } from "../TextInputField/index.js";
 const KeyValueField = ({
   name,
   inputKey,

package/dist/components/NumberInputField/index.cjs

@@ -4,26 +4,22 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
+const isInteger = require("../../validators/isInteger.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
 const NumberInputField = ({
-  disabled,
-  maxValue,
-  minValue,
+  control,
+  max = Number.MAX_SAFE_INTEGER,
+  min = 0,
   name,
   onChange,
   onBlur,
-  onFocus,
-  onMaxCrossed,
-  onMinCrossed,
-  required,
-  size,
   step,
-  text,
-  className,
   label,
+  "aria-label": ariaLabel,
+  required,
   shouldUnregister = false,
   validate,
-  control
+  ...props
 }) => {
   const {
     getError
@@ -35,25 +31,29 @@ const NumberInputField = ({
     }
   } = reactHookForm.useController({
     name,
-    shouldUnregister,
     control,
+    shouldUnregister,
     rules: {
-      max: maxValue,
-      min: minValue,
+      max,
+      min,
       required,
-      validate
+      validate: {
+        ...validate,
+        isInteger: isInteger.isInteger(step)
+      }
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInput, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInput, { ...props, name: field.name, value: field.value, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onChange: (event) => {
-    field.onChange(event ?? null);
-    onChange?.(event);
-  }, onFocus, maxValue, minValue, onMinCrossed, onMaxCrossed, size, step, text, className, label, error: getError({
-    label: label ?? "",
-    max: maxValue,
-    min: minValue
-  }, error) });
+  }, onChange: (newValue) => {
+    field.onChange(newValue);
+    onChange?.(newValue);
+  }, max, min, step, label, error: getError({
+    label: label ?? ariaLabel ?? name,
+    max,
+    min,
+    isInteger: step
+  }, error), "aria-label": ariaLabel, required });
 };
 exports.NumberInputField = NumberInputField;

package/dist/components/NumberInputField/index.d.ts

@@ -1,13 +1,7 @@
 import { NumberInput } from '@ultraviolet/ui';
-import type { ComponentProps, FocusEventHandler } from 'react';
+import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type NumberInputValueFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'className'>> & {
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-};
-/**
- * @deprecated This component is deprecated, use `NumberInputFieldV2` instead.
- */
-export declare const NumberInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, className, label, shouldUnregister, validate, control, }: NumberInputValueFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+type NumberInputProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof NumberInput>, 'onChange'>;
+export declare const NumberInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, max, min, name, onChange, onBlur, step, label, "aria-label": ariaLabel, required, shouldUnregister, validate, ...props }: NumberInputProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};