@ultraviolet/form 3.9.8 → 3.10.0

package/dist/components/CheckboxField/index.cjs

@@ -44,8 +44,8 @@ const CheckboxField = ({
     onBlur?.(event);
   }, disabled: field.disabled, checked: !!field.value, error: getError({
     label: label ?? ariaLabel ?? name
-  }, error), ref: field.ref, ...label ? {
-    children: label,
+  }, error), ref: field.ref, ...children ? {
+    children,
     "aria-label": void 0
   } : {
     "aria-label": ariaLabel

package/dist/components/CheckboxField/index.js

@@ -42,8 +42,8 @@ const CheckboxField = ({
     onBlur?.(event);
   }, disabled: field.disabled, checked: !!field.value, error: getError({
     label: label ?? ariaLabel ?? name
-  }, error), ref: field.ref, ...label ? {
-    children: label,
+  }, error), ref: field.ref, ...children ? {
+    children,
     "aria-label": void 0
   } : {
     "aria-label": ariaLabel

package/dist/components/VerificationCodeField/index.cjs

@@ -0,0 +1,60 @@
+"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 VerificationCodeField = ({
+  className,
+  fields,
+  id = "verification-code-input",
+  label,
+  name,
+  onChange,
+  onComplete,
+  placeholder,
+  required,
+  type = "number",
+  disabled,
+  validate
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    rules: {
+      required,
+      validate: {
+        required: (localValue) => {
+          if (required && localValue.length !== (fields ?? 4)) {
+            return false;
+          }
+          return true;
+        },
+        ...validate
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { className, gap: 1, justifyContent: "center", alignItems: "center", direction: "column", "aria-label": "verification-code-field", children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("label", { id: `${id}-label`, htmlFor: `${id}-0`, style: {
+      cursor: "pointer",
+      flexShrink: 0
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", variant: "body", prominence: "strong", children: label }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.VerificationCode, { inputId: id, error: !!error, placeholder, fields, onChange: (event) => {
+      onChange?.(event);
+      field.onChange(event);
+    }, onComplete: (event) => {
+      onComplete?.(event);
+    }, type, disabled, required }),
+    error ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "small", variant: "caption", sentiment: "danger", children: getError({
+      label: label || "verification-code-field"
+    }, error) }) : null
+  ] });
+};
+exports.VerificationCodeField = VerificationCodeField;

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

@@ -0,0 +1,12 @@
+import { VerificationCode } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type VerificationCodeFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof VerificationCode>, 'disabled' | 'error' | 'fields' | 'initialValue' | 'onChange' | 'onComplete' | 'placeholder' | 'required' | 'type'>> & {
+    className?: string;
+    id?: string;
+    name: string;
+    label?: string;
+};
+export declare const VerificationCodeField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, fields, id, label, name, onChange, onComplete, placeholder, required, type, disabled, validate, }: VerificationCodeFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/VerificationCodeField/index.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Stack, Text, VerificationCode } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const VerificationCodeField = ({
+  className,
+  fields,
+  id = "verification-code-input",
+  label,
+  name,
+  onChange,
+  onComplete,
+  placeholder,
+  required,
+  type = "number",
+  disabled,
+  validate
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    rules: {
+      required,
+      validate: {
+        required: (localValue) => {
+          if (required && localValue.length !== (fields ?? 4)) {
+            return false;
+          }
+          return true;
+        },
+        ...validate
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs(Stack, { className, gap: 1, justifyContent: "center", alignItems: "center", direction: "column", "aria-label": "verification-code-field", children: [
+    label ? /* @__PURE__ */ jsx("label", { id: `${id}-label`, htmlFor: `${id}-0`, style: {
+      cursor: "pointer",
+      flexShrink: 0
+    }, children: /* @__PURE__ */ jsx(Text, { as: "p", variant: "body", prominence: "strong", children: label }) }) : null,
+    /* @__PURE__ */ jsx(VerificationCode, { inputId: id, error: !!error, placeholder, fields, onChange: (event) => {
+      onChange?.(event);
+      field.onChange(event);
+    }, onComplete: (event) => {
+      onComplete?.(event);
+    }, type, disabled, required }),
+    error ? /* @__PURE__ */ jsx(Text, { as: "small", variant: "caption", sentiment: "danger", children: getError({
+      label: label || "verification-code-field"
+    }, error) }) : null
+  ] });
+};
+export {
+  VerificationCodeField
+};

package/dist/components/index.d.ts

@@ -21,3 +21,4 @@ export { SelectableCardGroupField } from './SelectableCardGroupField';
 export { SelectInputFieldV2 } from './SelectInputFieldV2';
 export { UnitInputField } from './UnitInputField';
 export { SliderField } from './SliderField';
+export { VerificationCodeField } from './VerificationCodeField';

package/dist/index.cjs

@@ -26,6 +26,7 @@ const index$k = require("./components/SelectableCardGroupField/index.cjs");
 const index$l = require("./components/SelectInputFieldV2/index.cjs");
 const index$m = require("./components/UnitInputField/index.cjs");
 const index$n = require("./components/SliderField/index.cjs");
+const index$o = require("./components/VerificationCodeField/index.cjs");
 exports.ErrorProvider = index.ErrorProvider;
 exports.useErrors = index.useErrors;
 Object.defineProperty(exports, "useController", {
@@ -76,3 +77,4 @@ exports.SelectableCardGroupField = index$k.SelectableCardGroupField;
 exports.SelectInputFieldV2 = index$l.SelectInputFieldV2;
 exports.UnitInputField = index$m.UnitInputField;
 exports.SliderField = index$n.SliderField;
+exports.VerificationCodeField = index$o.VerificationCodeField;

package/dist/index.js

@@ -24,6 +24,7 @@ import { SelectableCardGroupField } from "./components/SelectableCardGroupField/
 import { SelectInputFieldV2 } from "./components/SelectInputFieldV2/index.js";
 import { UnitInputField } from "./components/UnitInputField/index.js";
 import { SliderField } from "./components/SliderField/index.js";
+import { VerificationCodeField } from "./components/VerificationCodeField/index.js";
 export {
   CheckboxField,
   CheckboxGroupField,
@@ -49,6 +50,7 @@ export {
   TimeField,
   ToggleField,
   UnitInputField,
+  VerificationCodeField,
   useController,
   useErrors,
   useFieldArray,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "3.9.8",
+  "version": "3.10.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -69,10 +69,10 @@
   },
   "dependencies": {
     "@babel/runtime": "7.25.7",
-    "react-hook-form": "7.53.0",
+    "react-hook-form": "7.53.1",
     "react-select": "5.8.1",
     "@ultraviolet/themes": "1.14.2",
-    "@ultraviolet/ui": "1.73.2"
+    "@ultraviolet/ui": "1.74.0"
   },
   "scripts": {
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",