@ultraviolet/form 3.2.0 → 3.3.1

package/dist/components/KeyValueField/index.cjs

@@ -10,7 +10,7 @@ const KeyValueField = ({
   inputValue,
   addButton,
   maxSize = 100,
-  readonly = false,
+  readOnly = false,
   control
 }) => {
   const {
@@ -25,9 +25,9 @@ const KeyValueField = ({
   const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: 3, children: [
     fields.length ? /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { gap: 3, children: fields.map((field, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly: readonly, required: inputKey.required, name: `${name}.${index$1}.key`, label: inputKey.label, regex: inputKey.regex }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly: readonly, required: inputValue.required, name: `${name}.${index$1}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { disabled: readonly, "data-testid": `remove-button-${index$1}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index$1) })
+      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly, required: inputKey.required, name: `${name}.${index$1}.key`, label: inputKey.label, regex: inputKey.regex }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly, required: inputValue.required, name: `${name}.${index$1}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { disabled: readOnly, "data-testid": `remove-button-${index$1}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index$1) })
     ] }, field.id)) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsx(
       ui.Button,
@@ -37,7 +37,7 @@ const KeyValueField = ({
         variant: "filled",
         sentiment: "neutral",
         fullWidth: addButton.fullWidth,
-        disabled: !canAdd || readonly,
+        disabled: !canAdd || readOnly,
         tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
         onClick: () => append({
           key: "",

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

@@ -23,11 +23,11 @@ type KeyValueFieldProps<TFieldValues extends FieldValues, TFieldArrayName extend
     inputValue: InputValueProps;
     addButton: AddButtonProps;
     maxSize?: number;
-    readonly?: boolean;
+    readOnly?: boolean;
     control?: Control<TFieldValues>;
 };
 /**
  * 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, }: 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, }: KeyValueFieldProps<TFieldValues, TFieldArrayName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/KeyValueField/index.js

@@ -8,7 +8,7 @@ const KeyValueField = ({
   inputValue,
   addButton,
   maxSize = 100,
-  readonly = false,
+  readOnly = false,
   control
 }) => {
   const {
@@ -23,9 +23,9 @@ const KeyValueField = ({
   const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
   return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
     fields.length ? /* @__PURE__ */ jsx(Stack, { gap: 3, children: fields.map((field, index) => /* @__PURE__ */ jsxs(Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
-      /* @__PURE__ */ jsx(TextInputField, { readOnly: readonly, required: inputKey.required, name: `${name}.${index}.key`, label: inputKey.label, regex: inputKey.regex }),
-      /* @__PURE__ */ jsx(TextInputField, { readOnly: readonly, required: inputValue.required, name: `${name}.${index}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
-      /* @__PURE__ */ jsx(Button, { disabled: readonly, "data-testid": `remove-button-${index}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index) })
+      /* @__PURE__ */ jsx(TextInputField, { readOnly, required: inputKey.required, name: `${name}.${index}.key`, label: inputKey.label, regex: inputKey.regex }),
+      /* @__PURE__ */ jsx(TextInputField, { readOnly, required: inputValue.required, name: `${name}.${index}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
+      /* @__PURE__ */ jsx(Button, { disabled: readOnly, "data-testid": `remove-button-${index}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index) })
     ] }, field.id)) }) : null,
     /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsx(
       Button,
@@ -35,7 +35,7 @@ const KeyValueField = ({
         variant: "filled",
         sentiment: "neutral",
         fullWidth: addButton.fullWidth,
-        disabled: !canAdd || readonly,
+        disabled: !canAdd || readOnly,
         tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
         onClick: () => append({
           key: "",

package/dist/components/SliderField/index.cjs

@@ -0,0 +1,53 @@
+"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 SliderField = ({
+  name,
+  control,
+  shouldUnregister,
+  max,
+  min,
+  required,
+  validate,
+  onBlur,
+  onChange,
+  label,
+  value,
+  defaultValue,
+  ...props
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    control,
+    shouldUnregister,
+    rules: {
+      max,
+      min,
+      required,
+      validate
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Slider, { name: field.name, value: field.value, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (newValue) => {
+    field.onChange(newValue);
+    onChange?.(newValue);
+  }, max, min, error: getError({
+    label: label ?? "",
+    max,
+    min
+  }, error), label, required, ...props });
+};
+exports.SliderField = SliderField;

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

@@ -0,0 +1,9 @@
+import { Slider } from '@ultraviolet/ui';
+import type { ComponentProps, ReactNode } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type SliderFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof Slider>, 'value' | 'onChange'> & {
+    suffix?: string | ReactNode[];
+};
+export declare const SliderField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, shouldUnregister, max, min, required, validate, onBlur, onChange, label, value, defaultValue, ...props }: SliderFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SliderField/index.js

@@ -0,0 +1,53 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Slider } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const SliderField = ({
+  name,
+  control,
+  shouldUnregister,
+  max,
+  min,
+  required,
+  validate,
+  onBlur,
+  onChange,
+  label,
+  value,
+  defaultValue,
+  ...props
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    control,
+    shouldUnregister,
+    rules: {
+      max,
+      min,
+      required,
+      validate
+    }
+  });
+  return /* @__PURE__ */ jsx(Slider, { name: field.name, value: field.value, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (newValue) => {
+    field.onChange(newValue);
+    onChange?.(newValue);
+  }, max, min, error: getError({
+    label: label ?? "",
+    max,
+    min
+  }, error), label, required, ...props });
+};
+export {
+  SliderField
+};

package/dist/components/TextInputFieldV2/index.cjs

@@ -82,6 +82,6 @@ const TextInputField = ({
     onChange?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic });
+  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value === void 0 ? "" : field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic });
 };
 exports.TextInputField = TextInputField;

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

@@ -2,7 +2,7 @@ import { TextInputV2 } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type TextInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof TextInputV2>, 'value' | 'error' | 'name' | 'onChange'> & {
+type TextInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof TextInputV2>, 'value' | 'error' | 'name'> & {
     regex?: (RegExp | RegExp[])[];
 };
 /**

package/dist/components/TextInputFieldV2/index.js

@@ -80,7 +80,7 @@ const TextInputField = ({
     onChange?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic });
+  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value === void 0 ? "" : field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic });
 };
 export {
   TextInputField

package/dist/components/index.d.ts

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

package/dist/index.cjs

@@ -25,6 +25,7 @@ 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");
 exports.ErrorProvider = index.ErrorProvider;
 exports.useErrors = index.useErrors;
 Object.defineProperty(exports, "useController", {
@@ -74,3 +75,4 @@ 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;

package/dist/index.js

@@ -23,6 +23,7 @@ import { KeyValueField } from "./components/KeyValueField/index.js";
 import { SelectableCardGroupField } from "./components/SelectableCardGroupField/index.js";
 import { SelectInputFieldV2 } from "./components/SelectInputFieldV2/index.js";
 import { UnitInputField } from "./components/UnitInputField/index.js";
+import { SliderField } from "./components/SliderField/index.js";
 export {
   CheckboxField,
   CheckboxGroupField,
@@ -38,6 +39,7 @@ export {
   SelectInputFieldV2,
   SelectableCardField,
   SelectableCardGroupField,
+  SliderField,
   Submit,
   SubmitErrorAlert,
   TagInputField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -58,7 +58,7 @@
     "react-hook-form": "7.52.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
+    "@babel/core": "7.24.9",
     "@types/final-form-focus": "1.1.7",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
@@ -67,19 +67,19 @@
     "@utils/test": "0.0.1"
   },
   "dependencies": {
-    "@babel/runtime": "7.24.7",
+    "@babel/runtime": "7.24.8",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "react-select": "5.8.0",
     "react-hook-form": "7.52.1",
-    "@ultraviolet/ui": "1.61.0",
-    "@ultraviolet/themes": "1.12.1"
+    "@ultraviolet/ui": "1.62.0",
+    "@ultraviolet/themes": "1.12.2"
   },
   "scripts": {
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",
     "build": "vite build --config vite.config.ts && pnpm run type:generate",
     "prebuild": "shx rm -rf dist",
-    "size": "pnpm run build && size-limit",
+    "size": "size-limit",
     "test:unit:coverage": "pnpm test:unit --coverage",
     "test:unit": "LC_ALL=en_US.UTF-8 pnpm vitest --run --config vite.config.ts",
     "type:generate": "tsc --declaration -p tsconfig.build.json",