@ultraviolet/form 2.13.2 → 2.13.3

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

@@ -0,0 +1,18 @@
+import { TextInput } from '@ultraviolet/ui';
+import type { ComponentProps, Ref } from 'react';
+import type { FieldPath, FieldValues, Path, PathValue } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type TextInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof TextInput>, 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'autoFocus' | 'autoSave' | 'cols' | 'disabled' | 'fillAvailable' | 'generated' | 'id' | 'multiline' | 'notice' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'placeholder' | 'random' | 'readOnly' | 'resizable' | 'rows' | 'type' | 'noTopLabel' | 'unit' | 'valid' | 'size' | 'maxLength' | 'minLength' | 'min' | 'max' | 'data-testid'>> & {
+    className?: string;
+    regex?: (RegExp | RegExp[])[];
+    format?: (value: unknown) => PathValue<TFieldValues, Path<TFieldValues>>;
+    parse?: (value: string) => PathValue<TFieldValues, Path<TFieldValues>>;
+    customError?: string;
+    formatOnBlur?: boolean;
+    innerRef?: Ref<HTMLInputElement>;
+};
+/**
+ * @deprecated This component is deprecated, please use `TextInputFieldV2` instead
+ */
+export declare const TextInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autoCapitalize, autoComplete, autoCorrect, autoFocus, autoSave, className, cols, disabled, fillAvailable, generated, id, label, multiline, name, noTopLabel, notice, onChange, onFocus, onKeyDown, onKeyUp, onBlur, placeholder, random, readOnly, required, resizable, rows, type, unit, size, rules, valid, parse, format, formatOnBlur, regex: regexes, min, max, minLength, maxLength, validate, defaultValue, customError, innerRef, shouldUnregister, "data-testid": dataTestId, }: TextInputFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextInputField/index.js

@@ -1,11 +1,7 @@
-import { TextInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-/**
- * @deprecated This component is deprecated, please use `TextInputFieldV2` instead
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TextInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const TextInputField = ({
   autoCapitalize,
   autoComplete,
@@ -18,7 +14,7 @@ const TextInputField = ({
   fillAvailable,
   generated,
   id,
-  label = '',
+  label = "",
   multiline,
   name,
   noTopLabel,
@@ -52,16 +48,12 @@ const TextInputField = ({
   customError,
   innerRef,
   shouldUnregister = false,
-  'data-testid': dataTestId
+  "data-testid": dataTestId
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     defaultValue,
@@ -69,9 +61,11 @@ const TextInputField = ({
     rules: {
       required,
       validate: {
-        ...(regexes ? {
-          pattern: value => regexes.every(regex => value === undefined || value === '' || (Array.isArray(regex) ? regex.some(regexOr => regexOr.test(value)) : regex.test(value)))
-        } : {}),
+        ...regexes ? {
+          pattern: (value) => regexes.every(
+            (regex) => value === void 0 || value === "" || (Array.isArray(regex) ? regex.some((regexOr) => regexOr.test(value)) : regex.test(value))
+          )
+        } : {},
         ...validate
       },
       minLength,
@@ -87,67 +81,74 @@ const TextInputField = ({
     }
     return field.value;
   };
-  return jsx(TextInput, {
-    name: field.name,
-    autoCapitalize: autoCapitalize,
-    autoComplete: autoComplete,
-    autoCorrect: autoCorrect,
-    autoFocus: autoFocus,
-    autoSave: autoSave,
-    className: className,
-    cols: cols,
-    disabled: disabled,
-    error: customError ?? getError({
-      regex: regexes,
-      minLength,
-      maxLength,
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      name: field.name,
+      autoCapitalize,
+      autoComplete,
+      autoCorrect,
+      autoFocus,
+      autoSave,
+      className,
+      cols,
+      disabled,
+      error: customError ?? getError(
+        {
+          regex: regexes,
+          minLength,
+          maxLength,
+          label,
+          min,
+          max,
+          value: field.value
+        },
+        error
+      ),
+      fillAvailable,
+      generated,
+      id,
       label,
-      min,
-      max,
-      value: field.value
-    }, error),
-    fillAvailable: fillAvailable,
-    generated: generated,
-    id: id,
-    label: label,
-    multiline: multiline,
-    notice: notice,
-    required: required,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-      if (formatOnBlur && format) {
-        field.onChange(format(field.value));
-      }
-    },
-    onChange: event => {
-      if (parse) {
-        field.onChange(parse(event));
-        onChange?.(parse(event));
-      } else {
-        field.onChange(event);
-        onChange?.(event);
-      }
-    },
-    onFocus: event => {
-      onFocus?.(event);
-    },
-    onKeyUp: onKeyUp,
-    onKeyDown: onKeyDown,
-    placeholder: placeholder,
-    random: random,
-    readOnly: readOnly,
-    resizable: resizable,
-    rows: rows,
-    type: type,
-    noTopLabel: noTopLabel,
-    unit: unit,
-    valid: valid,
-    size: size,
-    value: transformedValue(),
-    ref: innerRef,
-    "data-testid": dataTestId
-  });
+      multiline,
+      notice,
+      required,
+      onBlur: (event) => {
+        field.onBlur();
+        onBlur?.(event);
+        if (formatOnBlur && format) {
+          field.onChange(format(field.value));
+        }
+      },
+      onChange: (event) => {
+        if (parse) {
+          field.onChange(parse(event));
+          onChange?.(parse(event));
+        } else {
+          field.onChange(event);
+          onChange?.(event);
+        }
+      },
+      onFocus: (event) => {
+        onFocus?.(event);
+      },
+      onKeyUp,
+      onKeyDown,
+      placeholder,
+      random,
+      readOnly,
+      resizable,
+      rows,
+      type,
+      noTopLabel,
+      unit,
+      valid,
+      size,
+      value: transformedValue(),
+      ref: innerRef,
+      "data-testid": dataTestId
+    }
+  );
+};
+export {
+  TextInputField
 };
-
-export { TextInputField };

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

@@ -0,0 +1,12 @@
+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, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TextInputV2>, 'value' | 'error' | 'name' | 'onChange'> & {
+    regex?: (RegExp | RegExp[])[];
+};
+/**
+ * This component offers a form field based on Ultraviolet UI TextInputV2 component
+ */
+export declare const TextInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ validate, regex: regexes, id, className, tabIndex, onChange, placeholder, disabled, readOnly, success, helper, tooltip, label, autoFocus, required, "data-testid": dataTestId, name, onFocus, onBlur, clearable, labelDescription, type, prefix, suffix, size, loading, onRandomize, minLength, maxLength, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, autoComplete, }: TextInputFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextInputFieldV2/index.js

@@ -1,11 +1,7 @@
-import { TextInputV2 } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-/**
- * This component offers a form field based on Ultraviolet UI TextInputV2 component
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TextInputV2 } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const TextInputField = ({
   validate,
   regex: regexes,
@@ -22,94 +18,99 @@ const TextInputField = ({
   label,
   autoFocus,
   required = false,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   name,
   onFocus,
   onBlur,
   clearable = false,
   labelDescription,
-  type = 'text',
+  type = "text",
   prefix,
   suffix,
-  size = 'large',
+  size = "large",
   loading,
   onRandomize,
   minLength,
   maxLength,
-  'aria-labelledby': ariaLabelledBy,
-  'aria-label': ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel,
   autoComplete
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     rules: {
       required,
       validate: {
-        ...(regexes ? {
-          pattern: value => regexes.every(regex => value === undefined || value === '' || (Array.isArray(regex) ? regex.some(regexOr => regexOr.test(value)) : regex.test(value)))
-        } : {}),
+        ...regexes ? {
+          pattern: (value) => regexes.every(
+            (regex) => value === void 0 || value === "" || (Array.isArray(regex) ? regex.some((regexOr) => regexOr.test(value)) : regex.test(value))
+          )
+        } : {},
         ...validate
       },
       minLength,
       maxLength
     }
   });
-  return jsx(TextInputV2, {
-    autoFocus: autoFocus,
-    className: className,
-    clearable: clearable,
-    "data-testid": dataTestId,
-    disabled: disabled,
-    error: getError({
-      regex: regexes,
-      // minLength,
-      // maxLength,
-      label: label ?? '',
-      value: field.value
-    }, error),
-    helper: helper,
-    label: label,
-    loading: loading,
-    labelDescription: labelDescription,
-    minLength: minLength,
-    maxLength: maxLength,
-    name: name,
-    onBlur: event => {
-      onBlur?.(event);
-      field.onBlur();
-    },
-    onChange: event => {
-      field.onChange(event);
-      onChange?.(event);
-    },
-    onFocus: event => {
-      onFocus?.(event);
-    },
-    placeholder: placeholder,
-    readOnly: readOnly,
-    required: required,
-    success: success,
-    tabIndex: tabIndex,
-    tooltip: tooltip,
-    type: type,
-    value: field.value,
-    id: id,
-    prefix: prefix,
-    suffix: suffix,
-    size: size,
-    onRandomize: onRandomize,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    autoComplete: autoComplete
-  });
+  return /* @__PURE__ */ jsx(
+    TextInputV2,
+    {
+      autoFocus,
+      className,
+      clearable,
+      "data-testid": dataTestId,
+      disabled,
+      error: getError(
+        {
+          regex: regexes,
+          // minLength,
+          // maxLength,
+          label: label ?? "",
+          value: field.value
+        },
+        error
+      ),
+      helper,
+      label,
+      loading,
+      labelDescription,
+      minLength,
+      maxLength,
+      name,
+      onBlur: (event) => {
+        onBlur?.(event);
+        field.onBlur();
+      },
+      onChange: (event) => {
+        field.onChange(event);
+        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
+    }
+  );
+};
+export {
+  TextInputField
 };
-
-export { TextInputField };

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

@@ -0,0 +1,9 @@
+import { TimeInput } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type TimeFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TimeInput>, 'onChange'> & {
+    name: string;
+};
+export declare const TimeField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, schedule, placeholder, disabled, readOnly, onBlur, onFocus, onChange, isLoading, isClearable, inputId, id, animation, animationDuration, animationOnChange, className, isSearchable, rules, options, "data-testid": dataTestId, shouldUnregister, noTopLabel, }: TimeFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimeField/index.js

@@ -1,9 +1,8 @@
-import { TimeInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const parseTime = date => {
-  const timeStr = date && typeof date !== 'string' ? date.toLocaleTimeString().slice(0, -3) : '';
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TimeInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+const parseTime = (date) => {
+  const timeStr = date && typeof date !== "string" ? date.toLocaleTimeString().slice(0, -3) : "";
   return {
     label: timeStr,
     value: timeStr
@@ -30,15 +29,13 @@ const TimeField = ({
   isSearchable,
   rules,
   options,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   shouldUnregister = false,
   noTopLabel
 }) => {
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     name,
     shouldUnregister,
@@ -47,43 +44,48 @@ const TimeField = ({
       ...rules
     }
   });
-  return jsx(TimeInput, {
-    name: field.name,
-    placeholder: placeholder,
-    schedule: schedule,
-    required: required,
-    value: parseTime(field.value),
-    onChange: val => {
-      if (!val) return;
-      onChange?.(val);
-      const [hours, minutes] = val.value.split(':');
-      const date = field.value ? new Date(field.value) : new Date();
-      date.setHours(Number(hours), Number(minutes), 0);
-      field.onChange(date);
-    },
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onFocus: event => {
-      onFocus?.(event);
-    },
-    error: error?.message,
-    disabled: disabled,
-    readOnly: readOnly,
-    animation: animation,
-    animationDuration: animationDuration,
-    animationOnChange: animationOnChange,
-    className: className,
-    isLoading: isLoading,
-    isClearable: isClearable,
-    isSearchable: isSearchable,
-    inputId: inputId,
-    id: id,
-    options: options,
-    "data-testid": dataTestId,
-    noTopLabel: noTopLabel
-  });
+  return /* @__PURE__ */ jsx(
+    TimeInput,
+    {
+      name: field.name,
+      placeholder,
+      schedule,
+      required,
+      value: parseTime(field.value),
+      onChange: (val) => {
+        if (!val)
+          return;
+        onChange?.(val);
+        const [hours, minutes] = val.value.split(":");
+        const date = field.value ? new Date(field.value) : /* @__PURE__ */ new Date();
+        date.setHours(Number(hours), Number(minutes), 0);
+        field.onChange(date);
+      },
+      onBlur: (event) => {
+        field.onBlur();
+        onBlur?.(event);
+      },
+      onFocus: (event) => {
+        onFocus?.(event);
+      },
+      error: error?.message,
+      disabled,
+      readOnly,
+      animation,
+      animationDuration,
+      animationOnChange,
+      className,
+      isLoading,
+      isClearable,
+      isSearchable,
+      inputId,
+      id,
+      options,
+      "data-testid": dataTestId,
+      noTopLabel
+    }
+  );
+};
+export {
+  TimeField
 };
-
-export { TimeField };

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

@@ -0,0 +1,10 @@
+import { Toggle } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type ToggleFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'label'> & Pick<ComponentProps<typeof Toggle>, 'disabled' | 'label' | 'onChange' | 'size' | 'tooltip' | 'labelPosition' | 'className' | 'data-testid'> & {
+    parse?: (value: boolean) => any;
+    format?: (value: any) => boolean;
+};
+export declare const ToggleField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, label, name, onChange, required, size, tooltip, rules, labelPosition, parse, format, "data-testid": dataTestId, shouldUnregister, }: ToggleFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ToggleField/index.js

@@ -1,7 +1,6 @@
-import { Toggle } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Toggle } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
 const ToggleField = ({
   className,
   disabled,
@@ -15,12 +14,10 @@ const ToggleField = ({
   labelPosition,
   parse,
   format,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   shouldUnregister = false
 }) => {
-  const {
-    field
-  } = useController({
+  const { field } = useController({
     name,
     shouldUnregister,
     rules: {
@@ -34,27 +31,31 @@ const ToggleField = ({
     }
     return field.value;
   };
-  return jsx(Toggle, {
-    name: field.name,
-    ref: field.ref,
-    checked: transformedValue(),
-    tooltip: tooltip,
-    onChange: event => {
-      if (parse) {
-        field.onChange(parse(event.target.checked));
-      } else {
-        field.onChange(event);
-      }
-      onChange?.(event);
-    },
-    label: label,
-    size: size,
-    disabled: disabled,
-    labelPosition: labelPosition,
-    className: className,
-    required: required,
-    "data-testid": dataTestId
-  });
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      name: field.name,
+      ref: field.ref,
+      checked: transformedValue(),
+      tooltip,
+      onChange: (event) => {
+        if (parse) {
+          field.onChange(parse(event.target.checked));
+        } else {
+          field.onChange(event);
+        }
+        onChange?.(event);
+      },
+      label,
+      size,
+      disabled,
+      labelPosition,
+      className,
+      required,
+      "data-testid": dataTestId
+    }
+  );
+};
+export {
+  ToggleField
 };
-
-export { ToggleField };

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

@@ -0,0 +1,26 @@
+import { ToggleGroup } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type ToggleGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof ToggleGroup>, 'className' | 'helper' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof ToggleGroup>, 'legend' | 'name'>>;
+export declare const ToggleGroupField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, }: ToggleGroupFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    Toggle: ({ disabled, name, value, label, helper, className, "data-testid": dataTestId, }: Omit<{
+        id?: string | undefined;
+        checked?: boolean | undefined;
+        name: string;
+        tooltip?: string | undefined;
+        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+        size?: "small" | "large" | undefined;
+        labelPosition?: "left" | "right" | undefined;
+        label?: import("react").ReactNode;
+        helper?: import("react").ReactNode;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        required?: boolean | undefined;
+        'data-testid'?: string | undefined;
+    } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value"> & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
+        value: string;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};