@ultraviolet/form 6.0.0-beta.14 → 6.0.0-beta.16

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "6.0.0-beta.14",
+  "version": "6.0.0-beta.16",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -51,29 +51,25 @@
     }
   ],
   "peerDependencies": {
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x",
-    "@ultraviolet/ui": "3.0.0-beta.25"
+    "@ultraviolet/ui": "3.0.0-beta.27"
   },
   "devDependencies": {
-    "@babel/core": "7.28.4",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
+    "@babel/core": "7.28.5",
     "@types/final-form-focus": "1.1.7",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "@ultraviolet/ui": "3.0.0-beta.25",
+    "@ultraviolet/ui": "3.0.0-beta.27",
     "@utils/test": "0.0.1"
   },
   "dependencies": {
     "@babel/runtime": "7.28.4",
     "react-hook-form": "7.55.0",
-    "@ultraviolet/icons": "5.0.0-beta.10",
-    "@ultraviolet/themes": "3.0.0-beta.3"
+    "@ultraviolet/icons": "5.0.0-beta.11",
+    "@ultraviolet/themes": "3.0.0-beta.4"
   },
   "scripts": {
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",

package/dist/components/CheckboxField/index.cjs

@@ -1,55 +0,0 @@
-"use client";
-"use strict";
-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 index = require("../../providers/ErrorContext/index.cjs");
-const CheckboxField = ({
-  control,
-  name,
-  label,
-  disabled,
-  required,
-  children,
-  onChange,
-  onBlur,
-  shouldUnregister = false,
-  validate,
-  "aria-label": ariaLabel,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    disabled,
-    name,
-    rules: {
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.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
-  } });
-};
-exports.CheckboxField = CheckboxField;

package/dist/components/CheckboxGroupField/index.cjs

@@ -1,80 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const react = require("react");
-const reactHookForm = require("react-hook-form");
-const index = require("../../providers/ErrorContext/index.cjs");
-const arraysContainSameValues = (array1, array2) => {
-  if (array1.length === 0) {
-    return false;
-  }
-  return array2.every((value) => array1.includes(value));
-};
-const CheckboxGroupField = ({
-  control,
-  children,
-  onChange,
-  error: customError,
-  name,
-  required = false,
-  shouldUnregister = false,
-  validate,
-  legend = "",
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const checkboxValid = react.useCallback((value) => {
-    const requiredChildren = react.Children.map(children, (child) => {
-      if (react.isValidElement(child)) {
-        if (child.props.required) {
-          return child.props.name;
-        }
-        return null;
-      }
-      return null;
-    })?.filter(Boolean) ?? [];
-    if (requiredChildren.length === 0 && !required) {
-      return true;
-    }
-    if (!required && arraysContainSameValues(value, requiredChildren)) {
-      return true;
-    }
-    if (value.length >= react.Children.count(children)) {
-      return true;
-    }
-    return false;
-  }, [children, required]);
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      validate: {
-        checkboxValid,
-        ...validate
-      }
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.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 });
-};
-CheckboxGroupField.Checkbox = ui.CheckboxGroup.Checkbox;
-exports.CheckboxGroupField = CheckboxGroupField;

package/dist/components/DateInputField/index.cjs

@@ -1,85 +0,0 @@
-"use client";
-"use strict";
-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 maxDate = require("../../validators/maxDate.cjs");
-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 DateInputField = ({
-  required,
-  name,
-  control,
-  label = "",
-  format,
-  minDate: minDate$1,
-  maxDate: maxDate$1,
-  onChange,
-  onBlur,
-  validate,
-  selectsRange,
-  showMonthYearPicker,
-  shouldUnregister = false,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      validate: {
-        maxDate: maxDate.maxDateValidator(maxDate$1),
-        minDate: minDate.minDateValidator(minDate$1),
-        ...validate
-      }
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.DateInput, { ...props, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0, error: getError({
-    label,
-    maxDate: maxDate$1,
-    minDate: minDate$1
-  }, 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: maxDate$1, minDate: minDate$1, 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 });
-};
-exports.DateInputField = DateInputField;

package/dist/components/Form/defaultErrors.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const defaultErrors = {
-  deps: () => "",
-  disabled: () => "",
-  max: () => "",
-  maxDate: () => "",
-  maxLength: () => "",
-  min: () => "",
-  minLength: () => "",
-  onBlur: () => "",
-  onChange: () => "",
-  pattern: () => "",
-  required: () => "",
-  setValueAs: () => "",
-  shouldUnregister: () => "",
-  validate: () => "",
-  value: () => "",
-  valueAsDate: () => "",
-  valueAsNumber: () => ""
-};
-exports.defaultErrors = defaultErrors;

package/dist/components/Form/index.cjs

@@ -1,35 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const reactHookForm = require("react-hook-form");
-const defaultErrors = require("./defaultErrors.cjs");
-const index = require("../../providers/ErrorContext/index.cjs");
-const Form = ({
-  children,
-  methods,
-  errors,
-  onSubmit,
-  name
-}) => {
-  const handleSubmit = methods.handleSubmit(async (values) => {
-    const result = await onSubmit(values);
-    if (result) {
-      methods.setError("root.submit", {
-        message: result,
-        type: "custom"
-      });
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx(index.ErrorProvider, { errors: {
-    ...defaultErrors.defaultErrors,
-    ...errors
-  }, children: /* @__PURE__ */ jsxRuntime.jsx("form", { name, noValidate: true, onSubmit: async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    await handleSubmit(e);
-  }, style: {
-    display: "contents"
-  }, children }) }) });
-};
-exports.Form = Form;

package/dist/components/KeyValueField/index.cjs

@@ -1,60 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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("../TextInputField/index.cjs");
-const KeyValueField = ({
-  name,
-  inputKey,
-  inputValue,
-  addButton,
-  maxSize = 100,
-  readOnly = false,
-  control,
-  onChange,
-  onBlur
-}) => {
-  const {
-    fields,
-    append,
-    remove
-  } = reactHookForm.useFieldArray({
-    control,
-    name
-  });
-  const {
-    getValues
-  } = reactHookForm.useFormContext();
-  const handleFieldChange = () => {
-    onChange?.(getValues(name));
-  };
-  const handleFieldBlur = () => {
-    onBlur?.(getValues(name));
-  };
-  const canAdd = fields.length !== void 0 && fields.length < maxSize;
-  const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: 3, children: [
-    fields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { gap: 3, children: fields.map((field, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Row, { alignItems: "end", gap: 2, templateColumns: "1fr 1fr auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { label: inputKey.label, name: `${name}.${index$1}.key`, onBlur: handleFieldBlur, onChange: handleFieldChange, readOnly, regex: inputKey.regex, required: inputKey.required }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { autoComplete: "off", label: inputValue.label, name: `${name}.${index$1}.value`, onBlur: handleFieldBlur, onChange: handleFieldChange, placeholder: inputValue.placeholder, readOnly, regex: inputValue.regex, required: inputValue.required, type: inputValue.type }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { "data-testid": `remove-button-${index$1}`, disabled: readOnly, onClick: () => {
-        remove(index$1);
-        handleFieldChange();
-      }, sentiment: "danger", size: "large", variant: "outlined", children: /* @__PURE__ */ jsxRuntime.jsx(icons.DeleteIcon, {}) })
-    ] }, field.id)) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsx(icons.PlusIcon, {}),
-      addButton.name
-    ] }) })
-  ] });
-};
-exports.KeyValueField = KeyValueField;

package/dist/components/NumberInputField/index.cjs

@@ -1,59 +0,0 @@
-"use client";
-"use strict";
-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 = ({
-  control,
-  max = Number.MAX_SAFE_INTEGER,
-  min = 0,
-  name,
-  onChange,
-  onBlur,
-  step,
-  label,
-  "aria-label": ariaLabel,
-  required,
-  shouldUnregister = false,
-  validate,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      max,
-      min,
-      required,
-      validate: {
-        ...validate,
-        isInteger: isInteger.isInteger(step)
-      }
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.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 });
-};
-exports.NumberInputField = NumberInputField;

package/dist/components/RadioField/index.cjs

@@ -1,64 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const react = require("react");
-const reactHookForm = require("react-hook-form");
-const index = require("../../providers/ErrorContext/index.cjs");
-const RadioField = ({
-  control,
-  disabled,
-  name,
-  onBlur,
-  label = "",
-  onChange,
-  onFocus,
-  required,
-  value,
-  shouldUnregister = false,
-  validate,
-  "aria-label": ariaLabel,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  const errorLabel = react.useMemo(() => {
-    if (label && typeof label === "string") {
-      return label;
-    }
-    if (ariaLabel) {
-      return ariaLabel;
-    }
-    return name;
-  }, [label, name, ariaLabel]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Radio, { ...props, checked: field.value === value, disabled, error: getError({
-    label: errorLabel
-  }, error), name: field.name, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
-  }, onChange: () => {
-    field.onChange(value);
-    onChange?.(value);
-  }, onFocus, required, value: value ?? "", ...label ? {
-    label
-  } : {
-    "aria-label": ariaLabel
-  } });
-};
-exports.RadioField = RadioField;

package/dist/components/RadioGroupField/index.cjs

@@ -1,45 +0,0 @@
-"use client";
-"use strict";
-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 index = require("../../providers/ErrorContext/index.cjs");
-const RadioGroupField = ({
-  control,
-  name,
-  onChange,
-  required,
-  children,
-  error: customError,
-  shouldUnregister = false,
-  validate,
-  legend = "",
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { ...props, error: getError({
-    label: legend
-  }, error) ?? customError, legend, name: field.name, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event.target.value);
-  }, required, value: field.value, children });
-};
-RadioGroupField.Radio = ui.RadioGroup.Radio;
-exports.RadioGroupField = RadioGroupField;

package/dist/components/SelectInputField/index.cjs

@@ -1,50 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const react = require("react");
-const reactHookForm = require("react-hook-form");
-const index = require("../../providers/ErrorContext/index.cjs");
-const SelectInputField = ({
-  label = "",
-  onBlur,
-  required,
-  name,
-  "aria-label": ariaLabel,
-  shouldUnregister = false,
-  control,
-  validate,
-  onChange,
-  multiselect,
-  ...props
-}) => {
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  const {
-    getError
-  } = index.useErrors();
-  const handleChange = react.useCallback((value) => {
-    onChange?.(value);
-    field.onChange(value);
-  }, [onChange, field]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { "aria-label": ariaLabel, error: getError({
-    label: label ?? ariaLabel ?? name
-  }, error), label, multiselect, name: field.name, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
-  }, onChange: handleChange, required, value: field.value, ...props });
-};
-exports.SelectInputField = SelectInputField;