@ultraviolet/form 2.13.2 → 2.13.4

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

@@ -0,0 +1,7 @@
+import { SelectInputV2 } from '@ultraviolet/ui';
+import { type ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type SelectInputFieldV2Props<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Pick<ComponentProps<typeof SelectInputV2>, 'placeholder' | 'placeholderSearch' | 'label' | 'helper' | 'options' | 'emptyState' | 'searchable' | 'readOnly' | 'clearable' | 'size' | 'multiselect' | 'required' | 'descriptionDirection' | 'footer' | 'labelDescription' | 'success' | 'loadMore' | 'isLoading' | 'selectAll' | 'selectAllGroup' | 'autofocus' | 'data-testid' | 'onChange' | 'id' | 'onBlur' | 'aria-label' | 'className' | 'onFocus' | 'optionalInfoPlacement' | 'disabled'>;
+export declare const SelectInputFieldV2: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autofocus, className, id, label, onFocus, onBlur, placeholder, readOnly, required, size, "data-testid": dataTestId, disabled, placeholderSearch, helper, options, emptyState, onChange, searchable, clearable, multiselect, descriptionDirection, footer, labelDescription, success, loadMore, isLoading, selectAll, selectAllGroup, name, "aria-label": ariaLabel, optionalInfoPlacement, rules, shouldUnregister, }: SelectInputFieldV2Props<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SelectInputFieldV2/index.js

@@ -1,21 +1,20 @@
-import { SelectInputV2 } from '@ultraviolet/ui';
-import { useCallback } from 'react';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { SelectInputV2 } from "@ultraviolet/ui";
+import { useCallback } from "react";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectInputFieldV2 = ({
   autofocus,
   className,
   id,
-  label = '',
+  label = "",
   onFocus,
   onBlur,
   placeholder,
   readOnly,
   required,
   size,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   disabled,
   placeholderSearch,
   helper,
@@ -34,7 +33,7 @@ const SelectInputFieldV2 = ({
   selectAll,
   selectAllGroup,
   name,
-  'aria-label': ariaLabel,
+  "aria-label": ariaLabel,
   optionalInfoPlacement,
   rules,
   shouldUnregister = false
@@ -55,50 +54,17 @@ const SelectInputFieldV2 = ({
   const {
     getError
   } = useErrors();
-  const handleChange = useCallback(value => {
+  const handleChange = useCallback((value) => {
     onChange?.(value);
     field.onChange(value);
   }, [onChange, field]);
-  return jsx(SelectInputV2, {
-    name: field.name,
-    options: options,
-    required: required,
-    size: size,
-    "data-testid": dataTestId,
-    className: className,
-    disabled: disabled,
-    id: id,
-    label: label,
-    onFocus: onFocus,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    placeholder: placeholder,
-    readOnly: readOnly,
-    multiselect: multiselect,
-    value: field.value,
-    placeholderSearch: placeholderSearch,
-    helper: helper,
-    emptyState: emptyState,
-    searchable: searchable,
-    clearable: clearable,
-    descriptionDirection: descriptionDirection,
-    footer: footer,
-    labelDescription: labelDescription,
-    error: getError({
-      label
-    }, error),
-    success: success,
-    loadMore: loadMore,
-    isLoading: isLoading,
-    selectAll: selectAll,
-    selectAllGroup: selectAllGroup,
-    autofocus: autofocus,
-    optionalInfoPlacement: optionalInfoPlacement,
-    "aria-label": ariaLabel,
-    onChange: handleChange
-  });
+  return /* @__PURE__ */ jsx(SelectInputV2, { name: field.name, options, required, size, "data-testid": dataTestId, className, disabled, id, label, onFocus, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, placeholder, readOnly, multiselect, value: field.value, placeholderSearch, helper, emptyState, searchable, clearable, descriptionDirection, footer, labelDescription, error: getError({
+    label
+  }, error), success, loadMore, isLoading, selectAll, selectAllGroup, autofocus, optionalInfoPlacement, "aria-label": ariaLabel, onChange: handleChange });
+};
+export {
+  SelectInputFieldV2
 };
-
-export { SelectInputFieldV2 };

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

@@ -0,0 +1,9 @@
+import { SelectableCard } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type SelectableCardFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'label' | 'onChange'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'label' | 'data-testid'>> & {
+    className?: string;
+};
+export declare const SelectableCardField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, tooltip, id, label, rules, shouldUnregister, "data-testid": dataTestId, }: SelectableCardFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SelectableCardField/index.js

@@ -1,7 +1,6 @@
-import { SelectableCard } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { SelectableCard } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
 const SelectableCardField = ({
   name,
   value,
@@ -19,7 +18,7 @@ const SelectableCardField = ({
   label,
   rules,
   shouldUnregister = false,
-  'data-testid': dataTestId
+  "data-testid": dataTestId
 }) => {
   const {
     field,
@@ -34,42 +33,26 @@ const SelectableCardField = ({
       ...rules
     }
   });
-  const isChecked = type === 'checkbox' && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return jsx(SelectableCard, {
-    isError: !!error,
-    showTick: showTick,
-    checked: isChecked,
-    className: className,
-    disabled: disabled,
-    onChange: event => {
-      if (type === 'checkbox') {
-        const fieldValue = field.value ?? [];
-        if (fieldValue?.includes(event.currentTarget.value)) {
-          field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
-        } else {
-          field.onChange([...fieldValue, event.currentTarget.value]);
-        }
+  const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
+  return /* @__PURE__ */ jsx(SelectableCard, { isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+    if (type === "checkbox") {
+      const fieldValue = field.value ?? [];
+      if (fieldValue?.includes(event.currentTarget.value)) {
+        field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
       } else {
-        field.onChange(event);
+        field.onChange([...fieldValue, event.currentTarget.value]);
       }
-      onChange?.(event);
-    },
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onFocus: event => {
-      onFocus?.(event);
-    },
-    type: type,
-    id: id,
-    tooltip: tooltip,
-    label: label,
-    value: value ?? '',
-    name: field.name,
-    "data-testid": dataTestId,
-    children: children
-  });
+    } else {
+      field.onChange(event);
+    }
+    onChange?.(event);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, type, id, tooltip, label, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
+};
+export {
+  SelectableCardField
 };
-
-export { SelectableCardField };

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

@@ -0,0 +1,42 @@
+import { SelectableCardGroup } from '@ultraviolet/ui';
+import type { ComponentProps, JSX } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<BaseFieldProps<TFieldValues, TName>, 'label' | 'onChange'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className' | 'onChange'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend'>;
+export declare const SelectableCardGroupField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, columns, showTick, type, shouldUnregister, }: SelectableCardGroupFieldProps<TFieldValues, TName>): JSX.Element;
+    Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: {
+        value: string | number;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        disabled?: boolean | undefined;
+        children?: import("react").ReactNode | (({ disabled, checked, }: Pick<{
+            name?: string | undefined;
+            children?: import("react").ReactNode | any;
+            value: string | number;
+            onChange: import("react").ChangeEventHandler<HTMLInputElement>;
+            showTick?: boolean | undefined;
+            type?: "checkbox" | "radio" | undefined;
+            disabled?: boolean | undefined;
+            checked?: boolean | undefined;
+            className?: string | undefined;
+            isError?: boolean | undefined;
+            onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+            onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+            id?: string | undefined;
+            tooltip?: string | undefined;
+            label?: import("react").ReactNode;
+            'data-testid'?: string | undefined;
+        }, "disabled" | "checked">) => import("react").ReactNode);
+        className?: string | undefined;
+        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        name?: string | undefined;
+        label?: import("react").ReactNode;
+        onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        id?: string | undefined;
+        'data-testid'?: string | undefined;
+        tooltip?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        isError?: boolean | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/SelectableCardGroupField/index.js

@@ -1,8 +1,7 @@
-import { SelectableCardGroup } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { SelectableCardGroup } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectableCardGroupField = ({
   className,
   legend,
@@ -11,12 +10,12 @@ const SelectableCardGroupField = ({
   required = false,
   rules,
   children,
-  label = '',
+  label = "",
   error: customError,
   helper,
   columns = 1,
   showTick,
-  type = 'radio',
+  type = "radio",
   shouldUnregister = false
 }) => {
   const {
@@ -35,35 +34,23 @@ const SelectableCardGroupField = ({
       ...rules
     }
   });
-  return jsx(SelectableCardGroup, {
-    legend: legend,
-    name: name,
-    type: type,
-    showTick: showTick,
-    value: field.value,
-    onChange: event => {
-      if (type === 'checkbox') {
-        const fieldValue = field.value ?? [];
-        if (fieldValue?.includes(event.currentTarget.value)) {
-          field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
-        } else {
-          field.onChange([...fieldValue, event.currentTarget.value]);
-        }
+  return /* @__PURE__ */ jsx(SelectableCardGroup, { legend, name, type, showTick, value: field.value, onChange: (event) => {
+    if (type === "checkbox") {
+      const fieldValue = field.value ?? [];
+      if (fieldValue?.includes(event.currentTarget.value)) {
+        field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
       } else {
-        field.onChange(event);
+        field.onChange([...fieldValue, event.currentTarget.value]);
       }
-      onChange?.(event);
-    },
-    error: getError({
-      label
-    }, error) ?? customError,
-    className: className,
-    columns: columns,
-    helper: helper,
-    required: required,
-    children: children
-  });
+    } else {
+      field.onChange(event);
+    }
+    onChange?.(event);
+  }, error: getError({
+    label
+  }, error) ?? customError, className, columns, helper, required, children });
 };
 SelectableCardGroupField.Card = SelectableCardGroup.Card;
-
-export { SelectableCardGroupField };
+export {
+  SelectableCardGroupField
+};

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

@@ -0,0 +1,17 @@
+import { Button } from '@ultraviolet/ui';
+import type { ComponentProps, ReactNode } from 'react';
+type SubmitProps = {
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    icon?: ComponentProps<typeof Button>['icon'];
+    iconPosition?: ComponentProps<typeof Button>['iconPosition'];
+    size?: ComponentProps<typeof Button>['size'];
+    variant?: ComponentProps<typeof Button>['variant'];
+    sentiment?: ComponentProps<typeof Button>['sentiment'];
+    tooltip?: ComponentProps<typeof Button>['tooltip'];
+    fullWidth?: ComponentProps<typeof Button>['fullWidth'];
+    onClick?: ComponentProps<typeof Button>['onClick'];
+};
+export declare const Submit: ({ children, className, disabled, icon, iconPosition, size, variant, sentiment, tooltip, fullWidth, onClick, }: SubmitProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Submit/index.js

@@ -1,7 +1,6 @@
-import { Button } from '@ultraviolet/ui';
-import { useFormState } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Button } from "@ultraviolet/ui";
+import { useFormState } from "react-hook-form";
 const Submit = ({
   children,
   className,
@@ -9,8 +8,8 @@ const Submit = ({
   icon,
   iconPosition,
   size,
-  variant = 'filled',
-  sentiment = 'primary',
+  variant = "filled",
+  sentiment = "primary",
   tooltip,
   fullWidth,
   onClick
@@ -20,21 +19,8 @@ const Submit = ({
     isValid
   } = useFormState();
   const isDisabled = disabled || isSubmitting || !isValid;
-  return jsx(Button, {
-    className: className,
-    disabled: isDisabled,
-    icon: icon,
-    iconPosition: iconPosition,
-    isLoading: isSubmitting,
-    size: size,
-    type: "submit",
-    variant: variant,
-    sentiment: sentiment,
-    tooltip: tooltip,
-    fullWidth: fullWidth,
-    onClick: onClick,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(Button, { className, disabled: isDisabled, icon, iconPosition, isLoading: isSubmitting, size, type: "submit", variant, sentiment, tooltip, fullWidth, onClick, children });
+};
+export {
+  Submit
 };
-
-export { Submit };

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

@@ -0,0 +1,3 @@
+export declare const SubmitErrorAlert: ({ className }: {
+    className?: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/SubmitErrorAlert/index.js

@@ -1,18 +1,14 @@
-import { Alert } from '@ultraviolet/ui';
-import { useFormState } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Alert } from "@ultraviolet/ui";
+import { useFormState } from "react-hook-form";
 const SubmitErrorAlert = ({
   className
 }) => {
   const {
     errors
   } = useFormState();
-  return errors?.root?.['submit']?.message ? jsx(Alert, {
-    className: className,
-    sentiment: "danger",
-    children: errors.root['submit'].message
-  }) : null;
+  return errors?.root?.["submit"]?.message ? /* @__PURE__ */ jsx(Alert, { className, sentiment: "danger", children: errors.root["submit"].message }) : null;
+};
+export {
+  SubmitErrorAlert
 };
-
-export { SubmitErrorAlert };

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

@@ -0,0 +1,6 @@
+import { TagInput } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+export type TagInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof TagInput>, 'variant' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid' | 'clearable' | 'label' | 'labelDescription' | 'size' | 'success' | 'readOnly' | 'tooltip'>>;
+export declare const TagInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, id, name, onChange, placeholder, required, rules, variant, shouldUnregister, "data-testid": dataTestId, clearable, label, labelDescription, size, success, readOnly, tooltip, }: TagInputFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TagInputField/index.js

@@ -1,8 +1,7 @@
-import { TagInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TagInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const TagInputField = ({
   className,
   disabled,
@@ -14,7 +13,7 @@ const TagInputField = ({
   rules,
   variant,
   shouldUnregister = false,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   clearable,
   label,
   labelDescription,
@@ -39,30 +38,13 @@ const TagInputField = ({
       ...rules
     }
   });
-  return jsx(TagInput, {
-    name: field.name,
-    className: className,
-    disabled: disabled,
-    id: id,
-    onChange: newTags => {
-      field.onChange(newTags);
-      onChange?.(newTags);
-    },
-    placeholder: placeholder,
-    variant: variant,
-    value: field.value,
-    "data-testid": dataTestId,
-    clearable: clearable,
-    label: label,
-    labelDescription: labelDescription,
-    size: size,
-    success: success,
-    error: getError({
-      label: label ?? ''
-    }, error),
-    readOnly: readOnly,
-    tooltip: tooltip
-  });
+  return /* @__PURE__ */ jsx(TagInput, { name: field.name, className, disabled, id, onChange: (newTags) => {
+    field.onChange(newTags);
+    onChange?.(newTags);
+  }, placeholder, variant, value: field.value, "data-testid": dataTestId, clearable, label, labelDescription, size, success, error: getError({
+    label: label ?? ""
+  }, error), readOnly, tooltip });
+};
+export {
+  TagInputField
 };
-
-export { TagInputField };

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

@@ -0,0 +1,11 @@
+import { TextArea } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+export type TextAreaFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TextArea>, 'value' | 'error' | 'name' | 'onChange'> & {
+    regex?: (RegExp | RegExp[])[];
+};
+/**
+ * This component offers a form field based on Ultraviolet UI TextArea component
+ */
+export declare const TextAreaField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autoFocus, clearable, className, tabIndex, "data-testid": dataTestId, disabled, helper, label, labelDescription, onChange, minLength, maxLength, name, onFocus, onBlur, placeholder, readOnly, required, rows, success, tooltip, validate, regex: regexes, }: TextAreaFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TextAreaField/index.js

@@ -1,17 +1,13 @@
-import { TextArea } 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 TextArea component
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TextArea } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const TextAreaField = ({
   autoFocus,
   clearable,
   className,
   tabIndex,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   disabled,
   helper,
   label,
@@ -44,54 +40,31 @@ const TextAreaField = ({
     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(TextArea, {
-    autoFocus: autoFocus,
-    className: className,
-    clearable: clearable,
-    "data-testid": dataTestId,
-    disabled: disabled,
-    error: getError({
-      regex: regexes,
-      minLength,
-      maxLength,
-      label,
-      value: field.value
-    }, error),
-    helper: helper,
-    label: label,
-    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,
-    rows: rows,
-    success: success,
-    tabIndex: tabIndex,
-    tooltip: tooltip,
+  return /* @__PURE__ */ jsx(TextArea, { autoFocus, className, clearable, "data-testid": dataTestId, disabled, error: getError({
+    regex: regexes,
+    minLength,
+    maxLength,
+    label,
     value: field.value
-  });
+  }, error), helper, label, labelDescription, minLength, maxLength, name, onBlur: (event) => {
+    onBlur?.(event);
+    field.onBlur();
+  }, onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event);
+  }, onFocus: (event) => {
+    onFocus?.(event);
+  }, placeholder, readOnly, required, rows, success, tabIndex, tooltip, value: field.value });
+};
+export {
+  TextAreaField
 };
-
-export { TextAreaField };

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 {};