@ultraviolet/form 3.13.6 → 3.13.8

package/dist/components/TimeInputFieldV2/index.cjs

@@ -0,0 +1,59 @@
+"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 TimeInputFieldV2 = ({
+  id,
+  className,
+  onChange,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  helper,
+  label,
+  autoFocus,
+  required = false,
+  "data-testid": dataTestId,
+  name,
+  onFocus,
+  onBlur,
+  clearable = false,
+  labelDescription,
+  size = "medium",
+  "aria-label": ariaLabel,
+  shouldUnregister,
+  control,
+  timeFormat
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    control,
+    rules: {
+      required
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.TimeInputV2, { autoFocus, className, clearable, "data-testid": dataTestId, timeFormat, disabled, error: getError({
+    label: label ?? ariaLabel ?? name,
+    value: field.value
+  }, error), helper, label, labelDescription, onBlur: (event) => {
+    onBlur?.(event);
+    field.onBlur();
+  }, onChange: (value) => {
+    field.onChange(value);
+    onChange?.(value);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, placeholder, readOnly, required, value: field.value, id, size });
+};
+exports.TimeInputFieldV2 = TimeInputFieldV2;

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

@@ -0,0 +1,11 @@
+import { TimeInputV2 } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type TimeInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof TimeInputV2>, 'value' | 'error' | 'name' | 'onChange'>;
+/**
+ * This component offers a form field based on Ultraviolet UI TimeInputV2 component
+ *  @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export declare const TimeInputFieldV2: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ id, className, onChange, placeholder, disabled, readOnly, helper, label, autoFocus, required, "data-testid": dataTestId, name, onFocus, onBlur, clearable, labelDescription, size, "aria-label": ariaLabel, shouldUnregister, control, timeFormat, }: TimeInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimeInputFieldV2/index.js

@@ -0,0 +1,59 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TimeInputV2 } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const TimeInputFieldV2 = ({
+  id,
+  className,
+  onChange,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  helper,
+  label,
+  autoFocus,
+  required = false,
+  "data-testid": dataTestId,
+  name,
+  onFocus,
+  onBlur,
+  clearable = false,
+  labelDescription,
+  size = "medium",
+  "aria-label": ariaLabel,
+  shouldUnregister,
+  control,
+  timeFormat
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    shouldUnregister,
+    control,
+    rules: {
+      required
+    }
+  });
+  return /* @__PURE__ */ jsx(TimeInputV2, { autoFocus, className, clearable, "data-testid": dataTestId, timeFormat, disabled, error: getError({
+    label: label ?? ariaLabel ?? name,
+    value: field.value
+  }, error), helper, label, labelDescription, onBlur: (event) => {
+    onBlur?.(event);
+    field.onBlur();
+  }, onChange: (value) => {
+    field.onChange(value);
+    onChange?.(value);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, placeholder, readOnly, required, value: field.value, id, size });
+};
+export {
+  TimeInputFieldV2
+};

package/dist/components/VerificationCodeField/index.cjs

@@ -16,7 +16,10 @@ const VerificationCodeField = ({
   required,
   type = "number",
   disabled,
-  validate
+  validate,
+  labelDescription,
+  success,
+  helper
 }) => {
   const {
     getError
@@ -41,20 +44,13 @@ const VerificationCodeField = ({
       }
     }
   });
-  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
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.VerificationCode, { className, inputId: id, placeholder, fields, onChange: (event) => {
+    onChange?.(event);
+    field.onChange(event);
+  }, onComplete: (event) => {
+    onComplete?.(event);
+  }, type, disabled, required, error: getError({
+    label: label || "verification-code-field"
+  }, error), label, labelDescription, success, helper });
 };
 exports.VerificationCodeField = VerificationCodeField;

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

@@ -2,11 +2,11 @@ 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'>> & {
+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' | 'labelDescription' | 'success' | 'helper'>> & {
     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 declare const VerificationCodeField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, fields, id, label, name, onChange, onComplete, placeholder, required, type, disabled, validate, labelDescription, success, helper, }: VerificationCodeFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VerificationCodeField/index.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { Stack, Text, VerificationCode } from "@ultraviolet/ui";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { VerificationCode } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const VerificationCodeField = ({
@@ -14,7 +14,10 @@ const VerificationCodeField = ({
   required,
   type = "number",
   disabled,
-  validate
+  validate,
+  labelDescription,
+  success,
+  helper
 }) => {
   const {
     getError
@@ -39,21 +42,14 @@ const VerificationCodeField = ({
       }
     }
   });
-  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
-  ] });
+  return /* @__PURE__ */ jsx(VerificationCode, { className, inputId: id, placeholder, fields, onChange: (event) => {
+    onChange?.(event);
+    field.onChange(event);
+  }, onComplete: (event) => {
+    onComplete?.(event);
+  }, type, disabled, required, error: getError({
+    label: label || "verification-code-field"
+  }, error), label, labelDescription, success, helper });
 };
 export {
   VerificationCodeField

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export { TextAreaField } from './TextAreaField';
 export { TextInputField } from './TextInputField';
 export { TextInputField as TextInputFieldV2 } from './TextInputFieldV2';
 export { TimeField } from './TimeField';
+export { TimeInputFieldV2 } from './TimeInputFieldV2';
 export { ToggleField } from './ToggleField';
 export { Submit } from './Submit';
 export { RadioGroupField } from './RadioGroupField';

package/dist/index.cjs

@@ -18,16 +18,17 @@ const index$c = require("./components/TextAreaField/index.cjs");
 const index$d = require("./components/TextInputField/index.cjs");
 const index$e = require("./components/TextInputFieldV2/index.cjs");
 const index$f = require("./components/TimeField/index.cjs");
-const index$g = require("./components/ToggleField/index.cjs");
-const index$h = require("./components/Submit/index.cjs");
-const index$i = require("./components/RadioGroupField/index.cjs");
-const index$j = require("./components/KeyValueField/index.cjs");
-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/SwitchButtonField/index.cjs");
-const index$p = require("./components/VerificationCodeField/index.cjs");
+const index$g = require("./components/TimeInputFieldV2/index.cjs");
+const index$h = require("./components/ToggleField/index.cjs");
+const index$i = require("./components/Submit/index.cjs");
+const index$j = require("./components/RadioGroupField/index.cjs");
+const index$k = require("./components/KeyValueField/index.cjs");
+const index$l = require("./components/SelectableCardGroupField/index.cjs");
+const index$m = require("./components/SelectInputFieldV2/index.cjs");
+const index$n = require("./components/UnitInputField/index.cjs");
+const index$o = require("./components/SliderField/index.cjs");
+const index$p = require("./components/SwitchButtonField/index.cjs");
+const index$q = require("./components/VerificationCodeField/index.cjs");
 exports.ErrorProvider = index.ErrorProvider;
 exports.useErrors = index.useErrors;
 Object.defineProperty(exports, "useController", {
@@ -70,13 +71,14 @@ exports.TextAreaField = index$c.TextAreaField;
 exports.TextInputField = index$d.TextInputField;
 exports.TextInputFieldV2 = index$e.TextInputField;
 exports.TimeField = index$f.TimeField;
-exports.ToggleField = index$g.ToggleField;
-exports.Submit = index$h.Submit;
-exports.RadioGroupField = index$i.RadioGroupField;
-exports.KeyValueField = index$j.KeyValueField;
-exports.SelectableCardGroupField = index$k.SelectableCardGroupField;
-exports.SelectInputFieldV2 = index$l.SelectInputFieldV2;
-exports.UnitInputField = index$m.UnitInputField;
-exports.SliderField = index$n.SliderField;
-exports.SwitchButtonField = index$o.SwitchButtonField;
-exports.VerificationCodeField = index$p.VerificationCodeField;
+exports.TimeInputFieldV2 = index$g.TimeInputFieldV2;
+exports.ToggleField = index$h.ToggleField;
+exports.Submit = index$i.Submit;
+exports.RadioGroupField = index$j.RadioGroupField;
+exports.KeyValueField = index$k.KeyValueField;
+exports.SelectableCardGroupField = index$l.SelectableCardGroupField;
+exports.SelectInputFieldV2 = index$m.SelectInputFieldV2;
+exports.UnitInputField = index$n.UnitInputField;
+exports.SliderField = index$o.SliderField;
+exports.SwitchButtonField = index$p.SwitchButtonField;
+exports.VerificationCodeField = index$q.VerificationCodeField;

package/dist/index.js

@@ -16,6 +16,7 @@ import { TextAreaField } from "./components/TextAreaField/index.js";
 import { TextInputField } from "./components/TextInputField/index.js";
 import { TextInputField as TextInputField2 } from "./components/TextInputFieldV2/index.js";
 import { TimeField } from "./components/TimeField/index.js";
+import { TimeInputFieldV2 } from "./components/TimeInputFieldV2/index.js";
 import { ToggleField } from "./components/ToggleField/index.js";
 import { Submit } from "./components/Submit/index.js";
 import { RadioGroupField } from "./components/RadioGroupField/index.js";
@@ -50,6 +51,7 @@ export {
   TextInputField,
   TextInputField2 as TextInputFieldV2,
   TimeField,
+  TimeInputFieldV2,
   ToggleField,
   UnitInputField,
   VerificationCodeField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "3.13.6",
+  "version": "3.13.8",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -61,7 +61,7 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
     "@types/final-form-focus": "1.1.7",
-    "@types/react": "19.0.5",
+    "@types/react": "19.0.7",
     "@types/react-dom": "19.0.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",
@@ -71,8 +71,8 @@
     "@babel/runtime": "7.26.0",
     "react-hook-form": "7.54.2",
     "react-select": "5.8.3",
-    "@ultraviolet/themes": "1.15.0",
-    "@ultraviolet/ui": "1.83.2"
+    "@ultraviolet/ui": "1.84.1",
+    "@ultraviolet/themes": "1.15.0"
   },
   "scripts": {
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",