@ultraviolet/form 6.0.0-beta.9 → 6.0.0

package/README.md

@@ -8,17 +8,17 @@ It is using [React Hook Form](https://react-hook-form.com/) under the hood.
 ## Get Started
 
 ```sh
-$ pnpm add @ultraviolet/ui @ultraviolet/form
+$ pnpm add @ultraviolet/ui @ultraviolet/form @ultraviolet/themes
 ```
 
 ### Usage
 
-To use the library you need to put a `ThemeProvider` from `@emotion/react` with the theme that comes from `@ultraviolet/ui` then wrap all your fields inside a `Form`:
+To use the library you need to put a `ThemeProvider` from `@ultraviolet/themes` with the theme that comes from the same package or from `@ultraviolet/ui` then wrap all your fields inside a `Form`:
 
 ```tsx
-import { ThemeProvider } from '@ultraviolet/ui'
+import { ThemeProvider } from '@ultraviolet/themes'
 import { Form, TextInputField } from '@ultraviolet/form'
-import { theme } from '@ultraviolet/ui'
+import { theme } from '@ultraviolet/ui' // or import { theme } from "@ultraviolet/themes
 import { useForm } from '@ultraviolet/form'
 import '@ultraviolet/ui/styles'
 
@@ -167,9 +167,8 @@ pnpm add zod @hookform/resolvers
 Here's how you can do it:
 
 ```tsx
-import { ThemeProvider } from '@emotion/react'
+import { ThemeProvider, theme  } from '@ultraviolet/themes'
 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"

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

@@ -6,5 +6,5 @@ type CheckboxFieldProps<TFieldValues extends FieldValues, TFieldName extends Fie
     className?: string;
     children?: ReactNode;
 };
-export declare const CheckboxField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, label, disabled, required, children, onChange, onBlur, shouldUnregister, validate, "aria-label": ariaLabel, ...props }: CheckboxFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CheckboxField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, label, disabled, required, children, onChange, onBlur, shouldUnregister, validate, "aria-label": ariaLabel, ...props }: CheckboxFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CheckboxField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
@@ -17,14 +17,10 @@ const CheckboxField = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     control,
     disabled,
@@ -35,20 +31,28 @@ const CheckboxField = ({
     },
     shouldUnregister
   });
-  return /* @__PURE__ */ jsx(Checkbox, { ...props, checked: !!field.value, disabled: field.disabled, error: getError({
-    label: label ?? ariaLabel ?? name
-  }, error), name: field.name, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
-  }, onChange: (event) => {
-    field.onChange(event.target.checked);
-    onChange?.(event.target.checked);
-  }, ref: field.ref, ...children ? {
-    "aria-label": void 0,
-    children
-  } : {
-    "aria-label": ariaLabel
-  } });
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      ...props,
+      checked: !!field.value,
+      disabled: field.disabled,
+      error: getError({ label: label ?? ariaLabel ?? name }, error),
+      name: field.name,
+      onBlur: (event) => {
+        field.onBlur();
+        onBlur?.(event);
+      },
+      onChange: (event) => {
+        field.onChange(event.target.checked);
+        onChange?.(
+          event.target.checked
+        );
+      },
+      ref: field.ref,
+      ...children ? { "aria-label": void 0, children } : { "aria-label": ariaLabel }
+    }
+  );
 };
 export {
   CheckboxField

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

@@ -4,8 +4,8 @@ import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 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, 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<({
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, children, onChange, error: customError, name, required, shouldUnregister, validate, legend, ...props }: CheckboxGroupFieldProps<TFieldValues, TFieldName>): import("react/jsx-runtime").JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, tooltip, style, }: Omit<({
         error?: string | import("react").ReactNode;
         helper?: import("react").ReactNode;
         disabled?: boolean;
@@ -15,7 +15,7 @@ export declare const CheckboxGroupField: {
         required?: boolean;
         'data-testid'?: string;
         tooltip?: string;
-    } & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "name" | "autoFocus" | "id" | "onClick" | "onFocus" | "tabIndex"> & ({
+    } & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "name" | "autoFocus" | "id" | "onClick" | "onFocus" | "tabIndex" | "style"> & ({
         children: import("react").ReactNode;
         'aria-label'?: never;
     } | {
@@ -23,6 +23,6 @@ export declare const CheckboxGroupField: {
         'aria-label': string;
     }))) & import("react").RefAttributes<HTMLInputElement>, "onChange" | "checked"> & {
         value: string;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/CheckboxGroupField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { CheckboxGroup } from "@ultraviolet/ui";
 import { useCallback, Children, isValidElement } from "react";
 import { useController } from "react-hook-form";
@@ -22,35 +22,34 @@ const CheckboxGroupField = ({
   legend = "",
   ...props
 }) => {
-  const {
-    getError
-  } = useErrors();
-  const checkboxValid = useCallback((value) => {
-    const requiredChildren = Children.map(children, (child) => {
-      if (isValidElement(child)) {
-        if (child.props.required) {
-          return child.props.name;
+  const { getError } = useErrors();
+  const checkboxValid = useCallback(
+    (value) => {
+      const requiredChildren = Children.map(children, (child) => {
+        if (isValidElement(child)) {
+          if (child.props.required) {
+            return child.props.name;
+          }
+          return null;
         }
         return null;
+      })?.filter(Boolean) ?? [];
+      if (requiredChildren.length === 0 && !required) {
+        return true;
       }
-      return null;
-    })?.filter(Boolean) ?? [];
-    if (requiredChildren.length === 0 && !required) {
-      return true;
-    }
-    if (!required && arraysContainSameValues(value, requiredChildren)) {
-      return true;
-    }
-    if (value.length >= Children.count(children)) {
-      return true;
-    }
-    return false;
-  }, [children, required]);
+      if (!required && arraysContainSameValues(value, requiredChildren)) {
+        return true;
+      }
+      if (value.length >= Children.count(children)) {
+        return true;
+      }
+      return false;
+    },
+    [children, required]
+  );
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     control,
     name,
@@ -62,17 +61,33 @@ const CheckboxGroupField = ({
     },
     shouldUnregister
   });
-  return /* @__PURE__ */ jsx(CheckboxGroup, { ...props, error: getError({
-    label: legend
-  }, error) ?? customError, legend, name, onChange: (event) => {
-    const fieldValue = field.value;
-    if (fieldValue?.includes(event.currentTarget.value)) {
-      field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
-    } else {
-      field.onChange([...field.value, event.currentTarget.value]);
+  return /* @__PURE__ */ jsx(
+    CheckboxGroup,
+    {
+      ...props,
+      error: getError({ label: legend }, error) ?? customError,
+      legend,
+      name,
+      onChange: (event) => {
+        const fieldValue = field.value;
+        if (fieldValue?.includes(event.currentTarget.value)) {
+          field.onChange(
+            fieldValue?.filter(
+              (currentValue) => currentValue !== event.currentTarget.value
+            )
+          );
+        } else {
+          field.onChange([...field.value, event.currentTarget.value]);
+        }
+        onChange?.(
+          event.currentTarget.value
+        );
+      },
+      required,
+      value: field.value,
+      children
     }
-    onChange?.(event.currentTarget.value);
-  }, required, value: field.value, children });
+  );
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;
 export {

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

@@ -3,5 +3,5 @@ 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 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("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DateInputField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { DateInput } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { maxDateValidator } from "../../validators/maxDate.js";
@@ -23,14 +23,10 @@ const DateInputField = ({
   shouldUnregister = false,
   ...props
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     control,
     name,
@@ -44,41 +40,56 @@ const DateInputField = ({
     },
     shouldUnregister
   });
-  return /* @__PURE__ */ jsx(DateInput, { ...props, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0, error: getError({
-    label,
-    maxDate,
-    minDate
-  }, error), format: format || ((value) => {
-    if (!value) {
-      return "";
-    }
-    const date = parseDate(value);
-    return showMonthYearPicker ? date.toLocaleDateString(void 0, {
-      month: "numeric",
-      year: "numeric"
-    }) : date.toLocaleDateString();
-  }), label, maxDate, minDate, name: field.name, onBlur: (e) => {
-    field.onBlur();
-    onBlur?.(e);
-  }, onChange: (val) => {
-    if (val && val instanceof Date) {
-      onChange?.(val);
-      const newDate = parseDate(val);
-      if (isEmpty(field.value)) {
-        field.onChange(newDate);
-        return;
-      }
-      const currentDate = parseDate(field.value);
-      newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
-      field.onChange(newDate);
-    } else if (Array.isArray(val)) {
-      onChange?.(val);
-      field.onChange(val);
-    } else if (val === null) {
-      onChange?.(val);
-      field.onChange(val);
+  return /* @__PURE__ */ jsx(
+    DateInput,
+    {
+      ...props,
+      endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0,
+      error: getError({ label, maxDate, minDate }, error),
+      format: format || ((value) => {
+        if (!value) {
+          return "";
+        }
+        const date = parseDate(value);
+        return showMonthYearPicker ? date.toLocaleDateString(void 0, {
+          month: "numeric",
+          year: "numeric"
+        }) : date.toLocaleDateString();
+      }),
+      label,
+      maxDate,
+      minDate,
+      name: field.name,
+      onBlur: (e) => {
+        field.onBlur();
+        onBlur?.(e);
+      },
+      onChange: (val) => {
+        if (val && val instanceof Date) {
+          onChange?.(val);
+          const newDate = parseDate(val);
+          if (isEmpty(field.value)) {
+            field.onChange(newDate);
+            return;
+          }
+          const currentDate = parseDate(field.value);
+          newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+          field.onChange(newDate);
+        } else if (Array.isArray(val)) {
+          onChange?.(val);
+          field.onChange(val);
+        } else if (val === null) {
+          onChange?.(val);
+          field.onChange(val);
+        }
+      },
+      required,
+      selectsRange,
+      showMonthYearPicker,
+      startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0,
+      value: Array.isArray(field.value) ? void 0 : field.value
     }
-  }, required, selectsRange, showMonthYearPicker, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, value: Array.isArray(field.value) ? void 0 : field.value });
+  );
 };
 export {
   DateInputField

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

@@ -9,5 +9,5 @@ type FormProps<TFieldValues extends FieldValues> = {
     onSubmit: (data: TFieldValues) => Promise<OnSubmitReturn> | OnSubmitReturn;
     methods: UseFormReturn<TFieldValues>;
 };
-export declare const Form: <TFieldValues extends FieldValues>({ children, methods, errors, onSubmit, name, }: FormProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Form: <TFieldValues extends FieldValues>({ children, methods, errors, onSubmit, name, }: FormProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Form/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { FormProvider } from "react-hook-form";
 import { defaultErrors } from "./defaultErrors.js";
 import { ErrorProvider } from "../../providers/ErrorContext/index.js";
@@ -19,16 +19,20 @@ const Form = ({
       });
     }
   });
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: {
-    ...defaultErrors,
-    ...errors
-  }, children: /* @__PURE__ */ jsx("form", { name, noValidate: true, onSubmit: async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    await handleSubmit(e);
-  }, style: {
-    display: "contents"
-  }, children }) }) });
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: { ...defaultErrors, ...errors }, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      name,
+      noValidate: true,
+      onSubmit: async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        await handleSubmit(e);
+      },
+      style: { display: "contents" },
+      children
+    }
+  ) }) });
 };
 export {
   Form

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

@@ -35,5 +35,5 @@ type KeyValueFieldProps<TFieldValues extends FieldValues, TFieldArrayName extend
 /**
  * A React component that allows users to manage key-value pairs
  */
-export declare const KeyValueField: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>({ name, inputKey, inputValue, addButton, maxSize, readOnly, control, onChange, onBlur, }: KeyValueFieldProps<TFieldValues, TFieldArrayName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const KeyValueField: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>({ name, inputKey, inputValue, addButton, maxSize, readOnly, control, onChange, onBlur, }: KeyValueFieldProps<TFieldValues, TFieldArrayName>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/KeyValueField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { DeleteIcon, PlusIcon } from "@ultraviolet/icons";
 import { Stack, Row, Button } from "@ultraviolet/ui";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -15,17 +15,11 @@ const KeyValueField = ({
   onChange,
   onBlur
 }) => {
-  const {
-    fields,
-    append,
-    remove
-  } = useFieldArray({
+  const { fields, append, remove } = useFieldArray({
     control,
     name
   });
-  const {
-    getValues
-  } = useFormContext();
+  const { getValues } = useFormContext();
   const handleFieldChange = () => {
     onChange?.(getValues(name));
   };
@@ -35,24 +29,78 @@ const KeyValueField = ({
   const canAdd = fields.length !== void 0 && fields.length < maxSize;
   const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
   return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-    fields.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 3, children: fields.map((field, index) => /* @__PURE__ */ jsxs(Row, { alignItems: "end", gap: 2, templateColumns: "1fr 1fr auto", children: [
-      /* @__PURE__ */ jsx(TextInputField, { label: inputKey.label, name: `${name}.${index}.key`, onBlur: handleFieldBlur, onChange: handleFieldChange, readOnly, regex: inputKey.regex, required: inputKey.required }),
-      /* @__PURE__ */ jsx(TextInputField, { autoComplete: "off", label: inputValue.label, name: `${name}.${index}.value`, onBlur: handleFieldBlur, onChange: handleFieldChange, placeholder: inputValue.placeholder, readOnly, regex: inputValue.regex, required: inputValue.required, type: inputValue.type }),
-      /* @__PURE__ */ jsx(Button, { "data-testid": `remove-button-${index}`, disabled: readOnly, onClick: () => {
-        remove(index);
-        handleFieldChange();
-      }, sentiment: "danger", size: "large", variant: "outlined", children: /* @__PURE__ */ jsx(DeleteIcon, {}) })
-    ] }, field.id)) }) : null,
-    /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxs(Button, { "data-testid": "add-button", disabled: !canAdd || readOnly, fullWidth: addButton.fullWidth, onClick: () => {
-      append({
-        key: "",
-        value: ""
-      });
-      handleFieldChange();
-    }, sentiment: "primary", tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip, variant: "outlined", children: [
-      /* @__PURE__ */ jsx(PlusIcon, {}),
-      addButton.name
-    ] }) })
+    fields.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 3, children: fields.map((field, index) => /* @__PURE__ */ jsxs(
+      Row,
+      {
+        alignItems: "end",
+        gap: 2,
+        templateColumns: "1fr 1fr auto",
+        children: [
+          /* @__PURE__ */ jsx(
+            TextInputField,
+            {
+              label: inputKey.label,
+              name: `${name}.${index}.key`,
+              onBlur: handleFieldBlur,
+              onChange: handleFieldChange,
+              readOnly,
+              regex: inputKey.regex,
+              required: inputKey.required
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextInputField,
+            {
+              autoComplete: "off",
+              label: inputValue.label,
+              name: `${name}.${index}.value`,
+              onBlur: handleFieldBlur,
+              onChange: handleFieldChange,
+              placeholder: inputValue.placeholder,
+              readOnly,
+              regex: inputValue.regex,
+              required: inputValue.required,
+              type: inputValue.type
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "data-testid": `remove-button-${index}`,
+              disabled: readOnly,
+              onClick: () => {
+                remove(index);
+                handleFieldChange();
+              },
+              sentiment: "danger",
+              size: "large",
+              variant: "outlined",
+              children: /* @__PURE__ */ jsx(DeleteIcon, {})
+            }
+          )
+        ]
+      },
+      field.id
+    )) }) : null,
+    /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "data-testid": "add-button",
+        disabled: !canAdd || readOnly,
+        fullWidth: addButton.fullWidth,
+        onClick: () => {
+          append({ key: "", value: "" });
+          handleFieldChange();
+        },
+        sentiment: "primary",
+        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
+        variant: "outlined",
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, {}),
+          addButton.name
+        ]
+      }
+    ) })
   ] });
 };
 export {

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

@@ -3,5 +3,5 @@ import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 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 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("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NumberInputField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { NumberInput } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { isInteger } from "../../validators/isInteger.js";
@@ -19,14 +19,10 @@ const NumberInputField = ({
   validate,
   ...props
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     control,
     name,
@@ -41,18 +37,32 @@ const NumberInputField = ({
     },
     shouldUnregister
   });
-  return /* @__PURE__ */ jsx(NumberInput, { ...props, "aria-label": ariaLabel, error: getError({
-    isInteger: step,
-    label: label ?? ariaLabel ?? name,
-    max,
-    min
-  }, error), label, max, min, name: field.name, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
-  }, onChange: (newValue) => {
-    field.onChange(newValue);
-    onChange?.(newValue);
-  }, required, step, value: field.value });
+  return /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      ...props,
+      "aria-label": ariaLabel,
+      error: getError(
+        { isInteger: step, label: label ?? ariaLabel ?? name, max, min },
+        error
+      ),
+      label,
+      max,
+      min,
+      name: field.name,
+      onBlur: (event) => {
+        field.onBlur();
+        onBlur?.(event);
+      },
+      onChange: (newValue) => {
+        field.onChange(newValue);
+        onChange?.(newValue);
+      },
+      required,
+      step,
+      value: field.value
+    }
+  );
 };
 export {
   NumberInputField

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

@@ -3,5 +3,5 @@ import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 type RadioFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof Radio>, 'value' | 'onChange'>;
-export declare const RadioField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, disabled, name, onBlur, label, onChange, onFocus, required, value, shouldUnregister, validate, "aria-label": ariaLabel, ...props }: RadioFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RadioField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, disabled, name, onBlur, label, onChange, onFocus, required, value, shouldUnregister, validate, "aria-label": ariaLabel, ...props }: RadioFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;
 export {};