@ultraviolet/form 4.0.0-beta.6 → 4.0.0-beta.7

package/dist/components/DateField/index.cjs

@@ -15,25 +15,15 @@ const DateField = ({
   control,
   label = "",
   format,
-  locale,
-  maxDate: maxDate$1,
   minDate: minDate$1,
-  disabled,
+  maxDate: maxDate$1,
   onChange,
   onBlur,
-  onFocus,
   validate,
-  autoFocus = false,
-  excludeDates,
   selectsRange,
-  size,
-  placeholder,
-  tooltip,
-  clearable,
-  "data-testid": dataTestId,
-  shouldUnregister = false,
   showMonthYearPicker,
-  input = "text"
+  shouldUnregister = false,
+  ...props
 }) => {
   const {
     getError
@@ -56,14 +46,14 @@ const DateField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.DateInput, { name: field.name, label, placeholder, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DateInput, { ...props, name: field.name, label, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
     if (!value) return "";
     const date = parseDate(value);
     return showMonthYearPicker ? date.toLocaleDateString(void 0, {
       year: "numeric",
       month: "numeric"
     }) : date.toLocaleDateString();
-  }), locale, required, onChange: (val) => {
+  }), required, onChange: (val) => {
     if (val && val instanceof Date) {
       onChange?.(val);
       const newDate = parseDate(val);
@@ -84,10 +74,10 @@ const DateField = ({
   }, onBlur: (e) => {
     field.onBlur();
     onBlur?.(e);
-  }, onFocus, maxDate: maxDate$1, size, minDate: minDate$1, error: getError({
+  }, maxDate: maxDate$1, minDate: minDate$1, error: getError({
     minDate: minDate$1,
     maxDate: maxDate$1,
     label
-  }, error), disabled, autoFocus, excludeDates, selectsRange, showMonthYearPicker, "data-testid": dataTestId, clearable, tooltip, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0, input });
+  }, error), selectsRange, showMonthYearPicker, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0 });
 };
 exports.DateField = DateField;

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

@@ -1,17 +1,7 @@
 import { DateInput } from '@ultraviolet/ui';
-import type { ComponentProps, FocusEvent } from 'react';
+import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type DateFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
-    maxDate?: Date;
-    minDate?: Date;
-    disabled?: boolean;
-    required?: boolean;
-    locale?: string;
-    onBlur?: (event: FocusEvent<HTMLElement>) => void;
-    onFocus?: (value: FocusEvent<HTMLElement>) => void;
-    autoFocus?: boolean;
-    placeholder?: string;
-};
-export declare const DateField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, control, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, validate, autoFocus, excludeDates, selectsRange, size, placeholder, tooltip, clearable, "data-testid": dataTestId, shouldUnregister, showMonthYearPicker, input, }: DateFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+type DateFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof DateInput>, 'required' | 'name' | 'onChange'>;
+export declare const DateField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, control, label, format, minDate, maxDate, onChange, onBlur, validate, selectsRange, showMonthYearPicker, shouldUnregister, ...props }: DateFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DateField/index.js

@@ -13,25 +13,15 @@ const DateField = ({
   control,
   label = "",
   format,
-  locale,
-  maxDate,
   minDate,
-  disabled,
+  maxDate,
   onChange,
   onBlur,
-  onFocus,
   validate,
-  autoFocus = false,
-  excludeDates,
   selectsRange,
-  size,
-  placeholder,
-  tooltip,
-  clearable,
-  "data-testid": dataTestId,
-  shouldUnregister = false,
   showMonthYearPicker,
-  input = "text"
+  shouldUnregister = false,
+  ...props
 }) => {
   const {
     getError
@@ -54,14 +44,14 @@ const DateField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsx(DateInput, { name: field.name, label, placeholder, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
+  return /* @__PURE__ */ jsx(DateInput, { ...props, name: field.name, label, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
     if (!value) return "";
     const date = parseDate(value);
     return showMonthYearPicker ? date.toLocaleDateString(void 0, {
       year: "numeric",
       month: "numeric"
     }) : date.toLocaleDateString();
-  }), locale, required, onChange: (val) => {
+  }), required, onChange: (val) => {
     if (val && val instanceof Date) {
       onChange?.(val);
       const newDate = parseDate(val);
@@ -82,11 +72,11 @@ const DateField = ({
   }, onBlur: (e) => {
     field.onBlur();
     onBlur?.(e);
-  }, onFocus, maxDate, size, minDate, error: getError({
+  }, maxDate, minDate, error: getError({
     minDate,
     maxDate,
     label
-  }, error), disabled, autoFocus, excludeDates, selectsRange, showMonthYearPicker, "data-testid": dataTestId, clearable, tooltip, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0, input });
+  }, error), selectsRange, showMonthYearPicker, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0 });
 };
 export {
   DateField

package/dist/components/NumberInputFieldV2/index.cjs

@@ -7,32 +7,19 @@ const reactHookForm = require("react-hook-form");
 const isInteger = require("../../validators/isInteger.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
 const NumberInputFieldV2 = ({
-  disabled,
   control,
   max = Number.MAX_SAFE_INTEGER,
   min = 0,
   name,
   onChange,
   onBlur,
-  size,
   step,
-  unit,
-  tooltip,
-  className,
   label,
-  labelDescription,
-  id,
-  placeholder,
-  success,
-  helper,
-  controls = true,
   "aria-label": ariaLabel,
-  "data-testid": dataTestId,
   required,
-  autoFocus,
-  readOnly,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -56,17 +43,17 @@ const NumberInputFieldV2 = ({
       }
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInputV2, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInputV2, { ...props, name: field.name, value: field.value, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
     field.onChange(newValue);
     onChange?.(newValue);
-  }, max, min, size, step, className, "data-testid": dataTestId, id, label, labelDescription, placeholder, error: getError({
+  }, max, min, step, label, error: getError({
     label: label ?? ariaLabel ?? name,
     max,
     min,
     isInteger: step
-  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required, controls });
+  }, error), "aria-label": ariaLabel, required });
 };
 exports.NumberInputFieldV2 = NumberInputFieldV2;

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

@@ -2,8 +2,6 @@ import { NumberInputV2 } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type NumberInputV2Props<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof NumberInputV2>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label' | 'aria-label' | 'tooltip' | 'unit' | 'size' | 'step' | 'className' | 'placeholder' | 'error' | 'success' | 'helper' | 'labelDescription' | 'autoFocus' | 'readOnly' | 'min' | 'max' | 'controls'>> & {
-    className?: string;
-};
-export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, control, max, min, name, onChange, onBlur, size, step, unit, tooltip, className, label, labelDescription, id, placeholder, success, helper, controls, "aria-label": ariaLabel, "data-testid": dataTestId, required, autoFocus, readOnly, shouldUnregister, validate, }: NumberInputV2Props<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+type NumberInputV2Props<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof NumberInputV2>, 'onChange'>;
+export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, max, min, name, onChange, onBlur, step, label, "aria-label": ariaLabel, required, shouldUnregister, validate, ...props }: NumberInputV2Props<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NumberInputFieldV2/index.js

@@ -5,32 +5,19 @@ import { useController } from "react-hook-form";
 import { isInteger } from "../../validators/isInteger.js";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const NumberInputFieldV2 = ({
-  disabled,
   control,
   max = Number.MAX_SAFE_INTEGER,
   min = 0,
   name,
   onChange,
   onBlur,
-  size,
   step,
-  unit,
-  tooltip,
-  className,
   label,
-  labelDescription,
-  id,
-  placeholder,
-  success,
-  helper,
-  controls = true,
   "aria-label": ariaLabel,
-  "data-testid": dataTestId,
   required,
-  autoFocus,
-  readOnly,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -54,18 +41,18 @@ const NumberInputFieldV2 = ({
       }
     }
   });
-  return /* @__PURE__ */ jsx(NumberInputV2, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+  return /* @__PURE__ */ jsx(NumberInputV2, { ...props, name: field.name, value: field.value, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
     field.onChange(newValue);
     onChange?.(newValue);
-  }, max, min, size, step, className, "data-testid": dataTestId, id, label, labelDescription, placeholder, error: getError({
+  }, max, min, step, label, error: getError({
     label: label ?? ariaLabel ?? name,
     max,
     min,
     isInteger: step
-  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required, controls });
+  }, error), "aria-label": ariaLabel, required });
 };
 export {
   NumberInputFieldV2

package/dist/components/SelectableCardField/index.cjs

@@ -9,23 +9,17 @@ const SelectableCardField = ({
   control,
   value,
   onChange,
-  showTick,
   type,
-  disabled,
-  children,
-  className,
   onFocus,
   onBlur,
   required,
-  tooltip,
-  id,
   label,
   shouldUnregister = false,
   validate,
   productIcon,
   illustration,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...props
 }) => {
   const {
     field,
@@ -42,7 +36,7 @@ const SelectableCardField = ({
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { ...productIcon ? {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { ...props, ...productIcon ? {
     productIcon
   } : {
     illustration
@@ -50,7 +44,7 @@ const SelectableCardField = ({
     label
   } : {
     "aria-label": ariaLabel
-  }, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+  }, isError: !!error, checked: isChecked, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -67,6 +61,6 @@ const SelectableCardField = ({
     onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, id, tooltip, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
+  }, type, value: value ?? "", name: field.name });
 };
 exports.SelectableCardField = SelectableCardField;

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

@@ -1,15 +1,7 @@
 import { SelectableCard } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
-import type { BaseFieldProps, LabelProp } from '../../types';
-type SelectableCardFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'data-testid'>> & {
-    className?: string;
-} & ({
-    illustration?: ComponentProps<typeof SelectableCard>['illustration'];
-    productIcon?: never;
-} | {
-    productIcon?: ComponentProps<typeof SelectableCard>['productIcon'];
-    illustration?: never;
-}) & LabelProp;
-export declare const SelectableCardField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, tooltip, id, label, shouldUnregister, validate, productIcon, illustration, "data-testid": dataTestId, "aria-label": ariaLabel, }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+import type { BaseFieldProps } from '../../types';
+type SelectableCardFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof SelectableCard>, 'name' | 'onChange'>;
+export declare const SelectableCardField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, value, onChange, type, onFocus, onBlur, required, label, shouldUnregister, validate, productIcon, illustration, "aria-label": ariaLabel, ...props }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectableCardField/index.js

@@ -7,23 +7,17 @@ const SelectableCardField = ({
   control,
   value,
   onChange,
-  showTick,
   type,
-  disabled,
-  children,
-  className,
   onFocus,
   onBlur,
   required,
-  tooltip,
-  id,
   label,
   shouldUnregister = false,
   validate,
   productIcon,
   illustration,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...props
 }) => {
   const {
     field,
@@ -40,7 +34,7 @@ const SelectableCardField = ({
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsx(SelectableCard, { ...productIcon ? {
+  return /* @__PURE__ */ jsx(SelectableCard, { ...props, ...productIcon ? {
     productIcon
   } : {
     illustration
@@ -48,7 +42,7 @@ const SelectableCardField = ({
     label
   } : {
     "aria-label": ariaLabel
-  }, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+  }, isError: !!error, checked: isChecked, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -65,7 +59,7 @@ const SelectableCardField = ({
     onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, id, tooltip, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
+  }, type, value: value ?? "", name: field.name });
 };
 export {
   SelectableCardField

package/dist/components/SelectableCardGroupField/index.cjs

@@ -6,21 +6,17 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const SelectableCardGroupField = ({
-  className,
   legend = "",
-  legendDescription,
   control,
   name,
   onChange,
   required = false,
-  children,
   error: customError,
-  helper,
   columns = 1,
-  showTick,
   type = "radio",
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -39,7 +35,7 @@ const SelectableCardGroupField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { legend, legendDescription, name, type, showTick, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { ...props, legend, name, type, value: field.value, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -53,7 +49,7 @@ const SelectableCardGroupField = ({
     onChange?.(event.currentTarget.value);
   }, error: getError({
     label: legend
-  }, error) ?? customError, className, columns, helper, required, children });
+  }, error) ?? customError, columns, required });
 };
 SelectableCardGroupField.Card = ui.SelectableCardGroup.Card;
 exports.SelectableCardGroupField = SelectableCardGroupField;

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

@@ -2,9 +2,9 @@ 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, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend' | 'legendDescription'>;
+type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof SelectableCardGroup>, 'name' | 'onChange'>;
 export declare const SelectableCardGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, legendDescription, control, name, onChange, required, children, error: customError, helper, columns, showTick, type, shouldUnregister, validate, }: SelectableCardGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, name, onChange, required, error: customError, columns, type, shouldUnregister, validate, ...props }: SelectableCardGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
     Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: import("node_modules/@ultraviolet/ui/dist/components/SelectableCardGroup").CardSelectableCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/SelectableCardGroupField/index.js

@@ -4,21 +4,17 @@ import { SelectableCardGroup } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectableCardGroupField = ({
-  className,
   legend = "",
-  legendDescription,
   control,
   name,
   onChange,
   required = false,
-  children,
   error: customError,
-  helper,
   columns = 1,
-  showTick,
   type = "radio",
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -37,7 +33,7 @@ const SelectableCardGroupField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsx(SelectableCardGroup, { legend, legendDescription, name, type, showTick, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsx(SelectableCardGroup, { ...props, legend, name, type, value: field.value, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -51,7 +47,7 @@ const SelectableCardGroupField = ({
     onChange?.(event.currentTarget.value);
   }, error: getError({
     label: legend
-  }, error) ?? customError, className, columns, helper, required, children });
+  }, error) ?? customError, columns, required });
 };
 SelectableCardGroupField.Card = SelectableCardGroup.Card;
 export {

package/dist/components/TagInputField/index.cjs

@@ -8,26 +8,15 @@ const validateRegex = require("../../utils/validateRegex.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
 const TagInputField = ({
   regex: regexes,
-  className,
-  disabled,
-  id,
   control,
   name,
   onChange,
-  placeholder,
   required,
-  variant,
   shouldUnregister = false,
-  "data-testid": dataTestId,
-  clearable,
   label,
-  labelDescription,
-  size,
-  success,
-  readOnly,
-  tooltip,
   validate,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...props
 }) => {
   const {
     getError
@@ -51,12 +40,12 @@ const TagInputField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.TagInput, { name: field.name, className, disabled, id, onChange: (newTags) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.TagInput, { ...props, name: field.name, onChange: (newTags) => {
     field.onChange(newTags);
     onChange?.(newTags);
-  }, placeholder, variant, value: field.value, "data-testid": dataTestId, clearable, label, "aria-label": ariaLabel, labelDescription, size, success, error: getError({
+  }, value: field.value, label, "aria-label": ariaLabel, error: getError({
     regex: regexes,
     label: label ?? ariaLabel ?? name
-  }, error), readOnly, tooltip });
+  }, error) });
 };
 exports.TagInputField = TagInputField;

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

@@ -2,7 +2,7 @@ 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, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof TagInput>, 'variant' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid' | 'clearable' | 'label' | 'labelDescription' | 'size' | 'success' | 'readOnly' | 'tooltip' | 'aria-label'>> & {
+export type TagInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof TagInput>, 'name' | 'onChange'> & {
     regex?: (RegExp | RegExp[])[];
 };
-export declare const TagInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ regex: regexes, className, disabled, id, control, name, onChange, placeholder, required, variant, shouldUnregister, "data-testid": dataTestId, clearable, label, labelDescription, size, success, readOnly, tooltip, validate, "aria-label": ariaLabel, }: TagInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TagInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ regex: regexes, control, name, onChange, required, shouldUnregister, label, validate, "aria-label": ariaLabel, ...props }: TagInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TagInputField/index.js

@@ -6,26 +6,15 @@ import { validateRegex } from "../../utils/validateRegex.js";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const TagInputField = ({
   regex: regexes,
-  className,
-  disabled,
-  id,
   control,
   name,
   onChange,
-  placeholder,
   required,
-  variant,
   shouldUnregister = false,
-  "data-testid": dataTestId,
-  clearable,
   label,
-  labelDescription,
-  size,
-  success,
-  readOnly,
-  tooltip,
   validate,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...props
 }) => {
   const {
     getError
@@ -49,13 +38,13 @@ const TagInputField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsx(TagInput, { name: field.name, className, disabled, id, onChange: (newTags) => {
+  return /* @__PURE__ */ jsx(TagInput, { ...props, name: field.name, onChange: (newTags) => {
     field.onChange(newTags);
     onChange?.(newTags);
-  }, placeholder, variant, value: field.value, "data-testid": dataTestId, clearable, label, "aria-label": ariaLabel, labelDescription, size, success, error: getError({
+  }, value: field.value, label, "aria-label": ariaLabel, error: getError({
     regex: regexes,
     label: label ?? ariaLabel ?? name
-  }, error), readOnly, tooltip });
+  }, error) });
 };
 export {
   TagInputField

package/dist/components/TextAreaField/index.cjs

@@ -7,34 +7,20 @@ const reactHookForm = require("react-hook-form");
 const validateRegex = require("../../utils/validateRegex.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
 const TextAreaField = ({
-  autoFocus,
-  clearable,
-  className,
-  tabIndex,
   control,
-  "data-testid": dataTestId,
-  disabled,
-  helper,
   label,
-  labelDescription,
   onChange,
   minLength,
   maxLength,
   name,
-  onFocus,
   onBlur,
   onKeyDown,
-  maxRows,
-  placeholder,
-  readOnly,
   required,
-  rows,
-  success,
-  tooltip,
   regex: regexes,
   submitOnEnter,
   validate,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...props
 }) => {
   const {
     getError
@@ -77,19 +63,19 @@ const TextAreaField = ({
       onKeyDown?.(event);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.TextArea, { autoFocus, className, clearable, "data-testid": dataTestId, disabled, error: getError({
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.TextArea, { ...props, error: getError({
     regex: regexes,
     minLength,
     maxLength,
     label: label ?? ariaLabel ?? name,
     value: field.value
-  }, error), helper, labelDescription, minLength, maxLength, name, onBlur: (event) => {
+  }, error), minLength, maxLength, name, onBlur: (event) => {
     onBlur?.(event);
     field.onBlur();
   }, onChange: (event) => {
     field.onChange(event);
     onChange?.(event);
-  }, onFocus, onKeyDown: onKeyDownHandler, placeholder, readOnly, required, rows, maxRows, success, tabIndex, tooltip, value: field.value, ...label ? {
+  }, onKeyDown: onKeyDownHandler, required, value: field.value, ...label ? {
     label
   } : {
     "aria-label": ariaLabel