@fuf-stack/uniform 0.18.4 → 0.19.0

package/dist/{chunk-5RFFXDXC.js → chunk-YK2XHKK2.js}

@@ -1,20 +1,18 @@
 import {
-  Controller_default
-} from "./chunk-AT2VVPRD.js";
+  FieldValidationError_default
+} from "./chunk-UTFZRBBS.js";
 import {
   FieldCopyTestIdButton_default
-} from "./chunk-2CRY7VDQ.js";
-import {
-  FieldValidationError_default
-} from "./chunk-ASPOGQPS.js";
+} from "./chunk-BQGN3JTU.js";
 import {
+  useController,
   useFormContext
-} from "./chunk-NBAVP4ER.js";
+} from "./chunk-CN5XEGV4.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-CRTRMMJ7.js";
+} from "./chunk-K2V4ULA2.js";
 
 // src/RadioBoxes/RadioBoxes.tsx
 import { RadioGroup as HeroRadioGroup } from "@heroui/radio";
@@ -98,70 +96,62 @@ var RadioBoxes = ({
 }) => {
   const { control, debugMode, getFieldState, getValues } = useFormContext();
   const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const { field } = useController({ control, disabled, name });
+  const { onChange, disabled: isDisabled, onBlur, ref } = field;
   const showTestIdCopyButton = debugMode === "debug-testids";
   const showLabel = label || showTestIdCopyButton;
   const variants = radioBoxesVariants();
   const classNames = variantsToClassNames(variants, className, "base");
+  const itemClassNames = {
+    base: classNames.itemBase,
+    control: classNames.itemControl,
+    description: classNames.itemDescription,
+    label: classNames.itemLabel,
+    labelWrapper: classNames.itemLabelWrapper,
+    wrapper: classNames.itemWrapper
+  };
   return /* @__PURE__ */ jsx2(
-    Controller_default,
+    HeroRadioGroup,
     {
-      control,
-      disabled,
+      classNames,
+      "data-invalid": invalid,
+      "data-required": required,
+      "data-testid": testId,
+      defaultValue: getValues()[name],
+      errorMessage: error && /* @__PURE__ */ jsx2(FieldValidationError_default, { error, testId }),
+      isDisabled,
+      isInvalid: invalid,
+      isRequired: required,
+      label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+      /* @__PURE__ */ jsxs2("label", { children: [
+        label,
+        showTestIdCopyButton && /* @__PURE__ */ jsx2(FieldCopyTestIdButton_default, { testId })
+      ] }),
       name,
-      render: ({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {
-        const itemClassNames = {
-          base: classNames.itemBase,
-          control: classNames.itemControl,
-          description: classNames.itemDescription,
-          label: classNames.itemLabel,
-          labelWrapper: classNames.itemLabelWrapper,
-          wrapper: classNames.itemWrapper
-        };
-        return /* @__PURE__ */ jsx2(
-          HeroRadioGroup,
-          {
-            classNames,
-            "data-invalid": invalid,
-            "data-required": required,
-            "data-testid": testId,
-            defaultValue: getValues()[name],
-            errorMessage: error && /* @__PURE__ */ jsx2(FieldValidationError_default, { error }),
-            isDisabled,
-            isInvalid: invalid,
-            isRequired: required,
-            label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
-            /* @__PURE__ */ jsxs2("label", { children: [
-              label,
-              showTestIdCopyButton && /* @__PURE__ */ jsx2(FieldCopyTestIdButton_default, { testId })
-            ] }),
-            name,
-            orientation: inline ? "horizontal" : "vertical",
-            onBlur,
-            ref,
-            children: options.map((option) => {
-              if ("value" in option) {
-                return /* @__PURE__ */ jsx2(
-                  RadioBox,
-                  {
-                    classNames: itemClassNames,
-                    "data-testid": slugify(
-                      `${testId}_option_${option.testId || option.value}`
-                    ),
-                    description: option.description,
-                    icon: option.icon,
-                    isDisabled: isDisabled || option.disabled,
-                    onChange,
-                    value: option.value,
-                    children: option.label ? option.label : option.value
-                  },
-                  option.value
-                );
-              }
-              return null;
-            })
-          }
-        );
-      }
+      orientation: inline ? "horizontal" : "vertical",
+      onBlur,
+      ref,
+      children: options.map((option) => {
+        if ("value" in option) {
+          return /* @__PURE__ */ jsx2(
+            RadioBox,
+            {
+              classNames: itemClassNames,
+              "data-testid": slugify(
+                `${testId}_option_${option.testId || option.value}`
+              ),
+              description: option.description,
+              icon: option.icon,
+              isDisabled: isDisabled || option.disabled,
+              onChange,
+              value: option.value,
+              children: option.label ? option.label : option.value
+            },
+            option.value
+          );
+        }
+        return null;
+      })
     }
   );
 };
@@ -174,4 +164,4 @@ export {
   RadioBoxes_default,
   RadioBoxes_default2
 };
-//# sourceMappingURL=chunk-5RFFXDXC.js.map
+//# sourceMappingURL=chunk-YK2XHKK2.js.map

package/dist/chunk-YK2XHKK2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioBoxesOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n  className = undefined,\n  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n  const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, disabled, name });\n  const { onChange, disabled: isDisabled, onBlur, ref } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassNames = {\n    base: classNames.itemBase,\n    control: classNames.itemControl,\n    description: classNames.itemDescription,\n    label: classNames.itemLabel,\n    labelWrapper: classNames.itemLabelWrapper,\n    wrapper: classNames.itemWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      defaultValue={getValues()[name]}\n      errorMessage={\n        error && <FieldValidationError error={error} testId={testId} />\n      }\n      isDisabled={isDisabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={\n        showLabel && (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label>\n            {label}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </label>\n        )\n      }\n      name={name}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      onBlur={onBlur}\n      ref={ref}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          return (\n            <RadioBox\n              classNames={itemClassNames}\n              data-testid={slugify(\n                `${testId}_option_${option.testId || option.value}`,\n              )}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={isDisabled || option.disabled}\n              key={option.value}\n              onChange={onChange}\n              value={option.value}\n            >\n              {option.label ? option.label : option.value}\n            </RadioBox>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n  /** icon for the option */\n  icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props);\n\n  return (\n    <Component\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...getBaseProps()}\n      className={cn(\n        'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n        {\n          // disabled styles\n          'pointer-events-none opacity-disabled': isDisabled,\n        },\n      )}\n    >\n      <VisuallyHidden>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n      <span {...getWrapperProps()}>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <span {...getControlProps()} />\n      </span>\n      {icon}\n      <div\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...getLabelWrapperProps()}\n        className={cn(getLabelWrapperProps().className, 'grow')}\n      >\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        {children && <span {...getLabelProps()}>{children}</span>}\n        {description && (\n          <span className=\"text-small text-foreground opacity-70\">\n            {description}\n          </span>\n        )}\n      </div>\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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","names":["jsx","jsxs","RadioBoxes_default"]}

package/dist/helpers/index.cjs

@@ -4,7 +4,7 @@
 
 
 var _chunkCESGUF6Fcjs = require('../chunk-CESGUF6F.cjs');
-require('../chunk-4DAZAO6Y.cjs');
+require('../chunk-555JRYCS.cjs');
 
 
 

package/dist/helpers/index.js

@@ -4,7 +4,7 @@ import {
   toNullishString,
   toValidationFormat
 } from "../chunk-UAV6PVB4.js";
-import "../chunk-CRTRMMJ7.js";
+import "../chunk-K2V4ULA2.js";
 export {
   fromNullishString,
   toFormFormat,

package/dist/hooks/index.cjs

@@ -3,13 +3,17 @@
 
 
 
-var _chunkQQW2FHSCcjs = require('../chunk-QQW2FHSC.cjs');
+
+
+var _chunk7BLVIVDUcjs = require('../chunk-7BLVIVDU.cjs');
 require('../chunk-CESGUF6F.cjs');
-require('../chunk-4DAZAO6Y.cjs');
+require('../chunk-555JRYCS.cjs');
+
+
 
 
 
 
 
-exports.checkFieldIsRequired = _chunkQQW2FHSCcjs.checkFieldIsRequired; exports.useFieldArray = _chunkQQW2FHSCcjs.useFieldArray; exports.useFormContext = _chunkQQW2FHSCcjs.useFormContext; exports.useInput = _chunkQQW2FHSCcjs.useInput;
+exports.checkFieldIsRequired = _chunk7BLVIVDUcjs.checkFieldIsRequired; exports.useClientValidation = _chunk7BLVIVDUcjs.useClientValidation; exports.useController = _chunk7BLVIVDUcjs.useController; exports.useFieldArray = _chunk7BLVIVDUcjs.useFieldArray; exports.useFormContext = _chunk7BLVIVDUcjs.useFormContext; exports.useInput = _chunk7BLVIVDUcjs.useInput;
 //# sourceMappingURL=index.cjs.map

package/dist/hooks/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/hooks/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACF,yOAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/hooks/index.cjs"}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/hooks/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,uWAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/hooks/index.cjs"}

package/dist/hooks/index.d.cts

@@ -1,11 +1,48 @@
+import * as _fuf_stack_veto from '@fuf-stack/veto';
+import { VetoTypeAny, VetoInstance } from '@fuf-stack/veto';
 import * as react_hook_form from 'react-hook-form';
-import { FieldError } from 'react-hook-form';
+import { UseControllerProps as UseControllerProps$1, ControllerRenderProps, UseFormStateReturn, ControllerFieldState, FieldError } from 'react-hook-form';
 export { useFieldArray } from 'react-hook-form';
 import * as React from 'react';
 import { D as DebugModeSettings } from '../FormContext-ldCpxKnY.cjs';
-import { VetoInstance } from '@fuf-stack/veto';
 export { useInput } from '@heroui/input';
 
+/**
+ * Hook for adding dynamic client-side validation to forms.
+ *
+ * Automatically manages validation schema lifecycle: sets schema when data is provided,
+ * clears schema when data is null/undefined, and cleans up on unmount.
+ *
+ * @param data - Data to create validation schema from (or null/undefined to clear validation)
+ * @param schemaFactory - Function that creates a validation schema from the data.
+ */
+declare const useClientValidation: <TData = unknown>(data: TData | null | undefined, schemaFactory: (data: TData) => VetoTypeAny) => void;
+
+type UseControllerProps<TFieldValues extends object = object> = UseControllerProps$1<TFieldValues>;
+type UseControllerReturn<TFieldValues extends object = object> = {
+    field: Omit<ControllerRenderProps<TFieldValues>, 'onChange' | 'value'> & {
+        onChange: (...event: any[]) => void;
+        value: string;
+    };
+    formState: UseFormStateReturn<TFieldValues>;
+    fieldState: ControllerFieldState;
+};
+/**
+ * A wrapper around react-hook-form's useController that transparently handles nullish string conversions.
+ *
+ * Key features:
+ * 1. Empty strings ('') in the UI are stored as null in form state
+ * 2. Null/undefined values in form state are displayed as empty strings in the UI
+ * 3. Handles both direct value changes and React synthetic events
+ * 4. Maintains the same API as react-hook-form's useController
+ *
+ * This enables consistent handling of empty/null values while keeping a clean API
+ * for form inputs that expect string values.
+ *
+ * @see https://react-hook-form.com/docs/usecontroller
+ */
+declare const useController: <TFieldValues extends object = object>(props: UseControllerProps<TFieldValues>) => UseControllerReturn<TFieldValues>;
+
 /** Schema check whether a field is required or optional */
 declare const checkFieldIsRequired: (validation: VetoInstance, path: string[]) => boolean;
 /**
@@ -22,12 +59,16 @@ declare const useFormContext: () => {
         isValidating: boolean;
     };
     formState: react_hook_form.FormState<react_hook_form.FieldValues>;
-    debugMode: "disabled" | "debug" | "debug-testids" | "off";
+    debugMode: "debug" | "debug-testids" | "off" | "disabled";
     debugModeSettings?: DebugModeSettings;
     preventSubmit: (prevent: boolean) => void;
-    setDebugMode: (debugMode: "disabled" | "debug" | "debug-testids" | "off") => void;
+    setDebugMode: (debugMode: "debug" | "debug-testids" | "off" | "disabled") => void;
     triggerSubmit: (e?: React.BaseSyntheticEvent) => Promise<void> | void;
-    validation?: VetoInstance;
+    validation: {
+        instance?: VetoInstance;
+        errors?: _fuf_stack_veto.VetoFormattedError;
+        setClientValidationSchema: (key: string, schema: _fuf_stack_veto.VetoTypeAny | null) => void;
+    };
     watch: react_hook_form.UseFormWatch<react_hook_form.FieldValues>;
     getValues: react_hook_form.UseFormGetValues<react_hook_form.FieldValues>;
     setError: react_hook_form.UseFormSetError<react_hook_form.FieldValues>;
@@ -44,4 +85,4 @@ declare const useFormContext: () => {
     subscribe: react_hook_form.UseFromSubscribe<react_hook_form.FieldValues>;
 };
 
-export { checkFieldIsRequired, useFormContext };
+export { type UseControllerProps, type UseControllerReturn, checkFieldIsRequired, useClientValidation, useController, useFormContext };

package/dist/hooks/index.d.ts

@@ -1,11 +1,48 @@
+import * as _fuf_stack_veto from '@fuf-stack/veto';
+import { VetoTypeAny, VetoInstance } from '@fuf-stack/veto';
 import * as react_hook_form from 'react-hook-form';
-import { FieldError } from 'react-hook-form';
+import { UseControllerProps as UseControllerProps$1, ControllerRenderProps, UseFormStateReturn, ControllerFieldState, FieldError } from 'react-hook-form';
 export { useFieldArray } from 'react-hook-form';
 import * as React from 'react';
 import { D as DebugModeSettings } from '../FormContext-ldCpxKnY.js';
-import { VetoInstance } from '@fuf-stack/veto';
 export { useInput } from '@heroui/input';
 
+/**
+ * Hook for adding dynamic client-side validation to forms.
+ *
+ * Automatically manages validation schema lifecycle: sets schema when data is provided,
+ * clears schema when data is null/undefined, and cleans up on unmount.
+ *
+ * @param data - Data to create validation schema from (or null/undefined to clear validation)
+ * @param schemaFactory - Function that creates a validation schema from the data.
+ */
+declare const useClientValidation: <TData = unknown>(data: TData | null | undefined, schemaFactory: (data: TData) => VetoTypeAny) => void;
+
+type UseControllerProps<TFieldValues extends object = object> = UseControllerProps$1<TFieldValues>;
+type UseControllerReturn<TFieldValues extends object = object> = {
+    field: Omit<ControllerRenderProps<TFieldValues>, 'onChange' | 'value'> & {
+        onChange: (...event: any[]) => void;
+        value: string;
+    };
+    formState: UseFormStateReturn<TFieldValues>;
+    fieldState: ControllerFieldState;
+};
+/**
+ * A wrapper around react-hook-form's useController that transparently handles nullish string conversions.
+ *
+ * Key features:
+ * 1. Empty strings ('') in the UI are stored as null in form state
+ * 2. Null/undefined values in form state are displayed as empty strings in the UI
+ * 3. Handles both direct value changes and React synthetic events
+ * 4. Maintains the same API as react-hook-form's useController
+ *
+ * This enables consistent handling of empty/null values while keeping a clean API
+ * for form inputs that expect string values.
+ *
+ * @see https://react-hook-form.com/docs/usecontroller
+ */
+declare const useController: <TFieldValues extends object = object>(props: UseControllerProps<TFieldValues>) => UseControllerReturn<TFieldValues>;
+
 /** Schema check whether a field is required or optional */
 declare const checkFieldIsRequired: (validation: VetoInstance, path: string[]) => boolean;
 /**
@@ -22,12 +59,16 @@ declare const useFormContext: () => {
         isValidating: boolean;
     };
     formState: react_hook_form.FormState<react_hook_form.FieldValues>;
-    debugMode: "disabled" | "debug" | "debug-testids" | "off";
+    debugMode: "debug" | "debug-testids" | "off" | "disabled";
     debugModeSettings?: DebugModeSettings;
     preventSubmit: (prevent: boolean) => void;
-    setDebugMode: (debugMode: "disabled" | "debug" | "debug-testids" | "off") => void;
+    setDebugMode: (debugMode: "debug" | "debug-testids" | "off" | "disabled") => void;
     triggerSubmit: (e?: React.BaseSyntheticEvent) => Promise<void> | void;
-    validation?: VetoInstance;
+    validation: {
+        instance?: VetoInstance;
+        errors?: _fuf_stack_veto.VetoFormattedError;
+        setClientValidationSchema: (key: string, schema: _fuf_stack_veto.VetoTypeAny | null) => void;
+    };
     watch: react_hook_form.UseFormWatch<react_hook_form.FieldValues>;
     getValues: react_hook_form.UseFormGetValues<react_hook_form.FieldValues>;
     setError: react_hook_form.UseFormSetError<react_hook_form.FieldValues>;
@@ -44,4 +85,4 @@ declare const useFormContext: () => {
     subscribe: react_hook_form.UseFromSubscribe<react_hook_form.FieldValues>;
 };
 
-export { checkFieldIsRequired, useFormContext };
+export { type UseControllerProps, type UseControllerReturn, checkFieldIsRequired, useClientValidation, useController, useFormContext };

package/dist/hooks/index.js

@@ -1,13 +1,17 @@
 import {
   checkFieldIsRequired,
+  useClientValidation,
+  useController,
   useFieldArray,
   useFormContext,
   useInput
-} from "../chunk-NBAVP4ER.js";
+} from "../chunk-CN5XEGV4.js";
 import "../chunk-UAV6PVB4.js";
-import "../chunk-CRTRMMJ7.js";
+import "../chunk-K2V4ULA2.js";
 export {
   checkFieldIsRequired,
+  useClientValidation,
+  useController,
   useFieldArray,
   useFormContext,
   useInput

package/dist/index.cjs

@@ -1,61 +1,61 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVZC5LLW4cjs = require('./chunk-VZC5LLW4.cjs');
+var _chunk6GCMM22Rcjs = require('./chunk-6GCMM22R.cjs');
 
 
-var _chunkTONXQKTYcjs = require('./chunk-TONXQKTY.cjs');
+var _chunk4DVYBP2Ocjs = require('./chunk-4DVYBP2O.cjs');
 
 
-var _chunkC5ZRTXUDcjs = require('./chunk-C5ZRTXUD.cjs');
+var _chunkLYI2IDCWcjs = require('./chunk-LYI2IDCW.cjs');
 
 
-var _chunkAEUUTAJBcjs = require('./chunk-AEUUTAJB.cjs');
+var _chunkF2LWLSBTcjs = require('./chunk-F2LWLSBT.cjs');
 
 
-var _chunkZFJ5NEHUcjs = require('./chunk-ZFJ5NEHU.cjs');
+var _chunkUU7SXXNIcjs = require('./chunk-UU7SXXNI.cjs');
 
 
-var _chunkUOK3TF4Gcjs = require('./chunk-UOK3TF4G.cjs');
+var _chunk4IQKCUZCcjs = require('./chunk-4IQKCUZC.cjs');
 
 
-var _chunkFAXFHN7Zcjs = require('./chunk-FAXFHN7Z.cjs');
+var _chunk5NKR4C73cjs = require('./chunk-5NKR4C73.cjs');
 
 
-var _chunkWI6FEFKDcjs = require('./chunk-WI6FEFKD.cjs');
+var _chunk6GN255GPcjs = require('./chunk-6GN255GP.cjs');
 
 
-var _chunk4RDTC7R6cjs = require('./chunk-4RDTC7R6.cjs');
+var _chunkHECO3HXRcjs = require('./chunk-HECO3HXR.cjs');
 
 
-var _chunk6GN255GPcjs = require('./chunk-6GN255GP.cjs');
+var _chunkDBKDDOS2cjs = require('./chunk-DBKDDOS2.cjs');
 
 
-var _chunk2DJMYFRZcjs = require('./chunk-2DJMYFRZ.cjs');
+var _chunkNEHRI4EMcjs = require('./chunk-NEHRI4EM.cjs');
 
 
-var _chunkMKFKX5QXcjs = require('./chunk-MKFKX5QX.cjs');
+var _chunk25Y2Q5CXcjs = require('./chunk-25Y2Q5CX.cjs');
 
 
-var _chunkEPYFZXEIcjs = require('./chunk-EPYFZXEI.cjs');
+var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
 
 
-var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
+var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
 
 
-var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
 
 
 
 
 
-var _chunkQQW2FHSCcjs = require('./chunk-QQW2FHSC.cjs');
+var _chunk7BLVIVDUcjs = require('./chunk-7BLVIVDU.cjs');
 
 
 
 
 
 var _chunkCESGUF6Fcjs = require('./chunk-CESGUF6F.cjs');
-require('./chunk-4DAZAO6Y.cjs');
+require('./chunk-555JRYCS.cjs');
+
 
 
 
@@ -80,5 +80,5 @@ require('./chunk-4DAZAO6Y.cjs');
 
 
 
-exports.CheckboxGroup = _chunkFAXFHN7Zcjs.CheckboxGroup_default; exports.Controller = _chunkEPYFZXEIcjs.Controller_default; exports.FieldArray = _chunkWI6FEFKDcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkOE5IW4ZGcjs.FieldValidationError_default; exports.Form = _chunk4RDTC7R6cjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunkMKFKX5QXcjs.Input_default; exports.RadioBoxes = _chunk2DJMYFRZcjs.RadioBoxes_default; exports.RadioGroup = _chunkVZC5LLW4cjs.RadioGroup_default; exports.RadioTabs = _chunkTONXQKTYcjs.RadioTabs_default; exports.Select = _chunkC5ZRTXUDcjs.Select_default; exports.SubmitButton = _chunkAEUUTAJBcjs.SubmitButton_default; exports.Switch = _chunkZFJ5NEHUcjs.Switch_default; exports.TextArea = _chunkUOK3TF4Gcjs.TextArea_default; exports.checkFieldIsRequired = _chunkQQW2FHSCcjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useFieldArray = _chunkQQW2FHSCcjs.useFieldArray; exports.useFormContext = _chunkQQW2FHSCcjs.useFormContext; exports.useInput = _chunkQQW2FHSCcjs.useInput;
+exports.CheckboxGroup = _chunk4IQKCUZCcjs.CheckboxGroup_default; exports.FieldArray = _chunk5NKR4C73cjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkGNYQC5IJcjs.FieldValidationError_default; exports.Form = _chunkHECO3HXRcjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunkDBKDDOS2cjs.Input_default; exports.RadioBoxes = _chunkNEHRI4EMcjs.RadioBoxes_default; exports.RadioGroup = _chunk25Y2Q5CXcjs.RadioGroup_default; exports.RadioTabs = _chunk6GCMM22Rcjs.RadioTabs_default; exports.Select = _chunk4DVYBP2Ocjs.Select_default; exports.SubmitButton = _chunkLYI2IDCWcjs.SubmitButton_default; exports.Switch = _chunkF2LWLSBTcjs.Switch_default; exports.TextArea = _chunkUU7SXXNIcjs.TextArea_default; exports.checkFieldIsRequired = _chunk7BLVIVDUcjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useClientValidation = _chunk7BLVIVDUcjs.useClientValidation; exports.useController = _chunk7BLVIVDUcjs.useController; exports.useFieldArray = _chunk7BLVIVDUcjs.useFieldArray; exports.useFormContext = _chunk7BLVIVDUcjs.useFormContext; exports.useInput = _chunk7BLVIVDUcjs.useInput;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,k1CAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,q5CAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"}

package/dist/index.d.cts

@@ -1,15 +1,14 @@
-export { C as Controller, a as ControllerProps } from './Controller-8Nqugui5.cjs';
 export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-Dh0YW4KV.cjs';
 export { F as FieldArray, a as FieldArrayChildrenRenderFn, b as FieldArrayFeatures, c as FieldArrayProps } from './FieldArray-hqxjr18x.cjs';
 export { F as Form, a as FormProps } from './Form-D0grgL6G.cjs';
 export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.cjs';
 export { fromNullishString, toFormFormat, toNullishString, toValidationFormat } from './helpers/index.cjs';
+export { UseControllerProps, UseControllerReturn, checkFieldIsRequired, useClientValidation, useController, useFormContext } from './hooks/index.cjs';
 export { useFieldArray } from 'react-hook-form';
-export { checkFieldIsRequired, useFormContext } from './hooks/index.cjs';
 export { useInput } from '@heroui/input';
 export { I as Input, a as InputProps } from './Input-B_wjhY9e.cjs';
-export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-DnbovhMk.cjs';
-export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-DAT12Ess.cjs';
+export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.cjs';
+export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.cjs';
 export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-C61IRDCU.cjs';
 export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-C7I27oav.cjs';
 export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-CT8PT7ky.cjs';

package/dist/index.d.ts

@@ -1,15 +1,14 @@
-export { C as Controller, a as ControllerProps } from './Controller-8Nqugui5.js';
 export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-Dh0YW4KV.js';
 export { F as FieldArray, a as FieldArrayChildrenRenderFn, b as FieldArrayFeatures, c as FieldArrayProps } from './FieldArray-hqxjr18x.js';
 export { F as Form, a as FormProps } from './Form-DX5NTR-H.js';
 export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.js';
 export { fromNullishString, toFormFormat, toNullishString, toValidationFormat } from './helpers/index.js';
+export { UseControllerProps, UseControllerReturn, checkFieldIsRequired, useClientValidation, useController, useFormContext } from './hooks/index.js';
 export { useFieldArray } from 'react-hook-form';
-export { checkFieldIsRequired, useFormContext } from './hooks/index.js';
 export { useInput } from '@heroui/input';
 export { I as Input, a as InputProps } from './Input-B_wjhY9e.js';
-export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-DnbovhMk.js';
-export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-DAT12Ess.js';
+export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.js';
+export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.js';
 export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-C61IRDCU.js';
 export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-C7I27oav.js';
 export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-CT8PT7ky.js';

package/dist/index.js

@@ -1,64 +1,62 @@
-import {
-  RadioGroup_default
-} from "./chunk-QXD6XP3Y.js";
 import {
   RadioTabs_default
-} from "./chunk-BLAMCAGB.js";
+} from "./chunk-7NZKBUL6.js";
 import {
   Select_default
-} from "./chunk-3ULE3TIW.js";
+} from "./chunk-N2MRIHRX.js";
 import {
   SubmitButton_default
-} from "./chunk-P332MPVH.js";
+} from "./chunk-BXQ3MVNH.js";
 import {
   Switch_default
-} from "./chunk-5NRHHIFP.js";
+} from "./chunk-7R2P54VS.js";
 import {
   TextArea_default
-} from "./chunk-XL3FJ3VX.js";
+} from "./chunk-Y4YQH2QB.js";
 import {
   CheckboxGroup_default
-} from "./chunk-Q6DCHTBA.js";
+} from "./chunk-W2K5WX3O.js";
 import {
   FieldArray_default
-} from "./chunk-FNY55CAR.js";
-import {
-  Form_default
-} from "./chunk-IOIYK6UC.js";
+} from "./chunk-3JRZ5YNE.js";
 import {
   Grid_default
 } from "./chunk-PDCEKC3G.js";
 import {
-  RadioBoxes_default
-} from "./chunk-5RFFXDXC.js";
+  Form_default
+} from "./chunk-35I663WR.js";
 import {
   Input_default
-} from "./chunk-O3TBUVDW.js";
+} from "./chunk-5W2IWHSE.js";
 import {
-  Controller_default
-} from "./chunk-AT2VVPRD.js";
+  RadioBoxes_default
+} from "./chunk-YK2XHKK2.js";
 import {
-  FieldCopyTestIdButton_default
-} from "./chunk-2CRY7VDQ.js";
+  RadioGroup_default
+} from "./chunk-E62JDTFS.js";
 import {
   FieldValidationError_default
-} from "./chunk-ASPOGQPS.js";
+} from "./chunk-UTFZRBBS.js";
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-BQGN3JTU.js";
 import {
   checkFieldIsRequired,
+  useClientValidation,
+  useController,
   useFieldArray,
   useFormContext,
   useInput
-} from "./chunk-NBAVP4ER.js";
+} from "./chunk-CN5XEGV4.js";
 import {
   fromNullishString,
   toFormFormat,
   toNullishString,
   toValidationFormat
 } from "./chunk-UAV6PVB4.js";
-import "./chunk-CRTRMMJ7.js";
+import "./chunk-K2V4ULA2.js";
 export {
   CheckboxGroup_default as CheckboxGroup,
-  Controller_default as Controller,
   FieldArray_default as FieldArray,
   FieldCopyTestIdButton_default as FieldCopyTestIdButton,
   FieldValidationError_default as FieldValidationError,
@@ -77,6 +75,8 @@ export {
   toFormFormat,
   toNullishString,
   toValidationFormat,
+  useClientValidation,
+  useController,
   useFieldArray,
   useFormContext,
   useInput