@fuf-stack/uniform 1.5.1 → 1.5.4

package/dist/{chunk-62BVHALF.js.map → chunk-33JULJXP.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'text-foreground-500 hover:bg-default-200 hover:text-foreground-800 rounded-md p-1 hover:cursor-pointer',\n    control:\n      'border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger rounded-lg border-2 duration-150! motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'text-foreground-500 hover:bg-default-200 rounded-md p-1 hover:cursor-pointer hover:text-black',\n    group: '',\n    groupHeading: 'text-foreground-500 mt-2 mb-1 ml-3 text-sm',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\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-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:text-danger pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'text-foreground-500 rounded-sm p-2',\n    menu: 'border-default-200 bg-content1 mt-2 rounded-xl border p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'bg-default-100 items-center gap-1.5 rounded py-0.5 pr-1 pl-2',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'text-default-500 hover:border-default-300 hover:text-default-800 rounded hover:cursor-pointer',\n    noOptionsMessage: 'text-foreground-500 rounded-sm p-2',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'text-foreground-500 ml-1 py-0.5 pl-1 text-sm',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ninterface SelectOption {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: React.ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value, { replaceDots: true })}`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({ name, ...uniformFieldProps });\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\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-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        menuShouldBlockScroll\n        unstyled\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        name={name}\n        onInputChange={onInputChange}\n        options={options}\n        placeholder={placeholder}\n        classNames={{\n          control: () => {\n            return cn(classNames.control, {\n              [classNames.control_focused]: isFocused && !invalid,\n            });\n          },\n          clearIndicator: () => {\n            return classNames.clearIndicator;\n          },\n          dropdownIndicator: () => {\n            return classNames.dropdownIndicator;\n          },\n          groupHeading: () => {\n            return classNames.groupHeading;\n          },\n          indicatorsContainer: () => {\n            return classNames.indicatorsContainer;\n          },\n          indicatorSeparator: () => {\n            return classNames.indicatorSeparator;\n          },\n          loadingIndicator: () => {\n            return classNames.loadingIndicator;\n          },\n          loadingMessage: () => {\n            return classNames.loadingMessage;\n          },\n          input: () => {\n            return classNames.input;\n          },\n          menu: () => {\n            return classNames.menu;\n          },\n          menuList: () => {\n            return classNames.menuList;\n          },\n          menuPortal: () => {\n            return classNames.menuPortal;\n          },\n          multiValue: () => {\n            return classNames.multiValue;\n          },\n          multiValueLabel: () => {\n            return cn(\n              classNames.multiValueLabel,\n              `${getValueProps().className}`,\n            );\n          },\n          multiValueRemove: () => {\n            return classNames.multiValueRemove;\n          },\n          noOptionsMessage: () => {\n            return classNames.noOptionsMessage;\n          },\n          option: ({\n            isFocused: optionIsFocused,\n            isSelected: optionIsSelected,\n          }) => {\n            return cn(classNames.option, {\n              [classNames.option_focused]: optionIsFocused,\n              [classNames.option_selected]: optionIsSelected,\n            });\n          },\n          placeholder: () => {\n            return classNames.placeholder;\n          },\n          singleValue: () => {\n            return cn(classNames.singleValue, `${getValueProps().className}`);\n          },\n          valueContainer: () => {\n            return classNames.valueContainer;\n          },\n        }}\n        components={{\n          Input: InputComponent,\n          Option: OptionComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Control: ControlComponent,\n        }}\n        onBlur={(_e) => {\n          setIsFocused(false);\n          onBlur();\n        }}\n        onChange={(option) => {\n          if (multiSelect) {\n            onChange(\n              (option as SelectOption[])?.map((_option) => {\n                return _option.value;\n              }),\n            );\n          } else {\n            onChange((option as SelectOption)?.value);\n          }\n        }}\n        onFocus={(_e) => {\n          setIsFocused(true);\n        }}\n        // set complete option as value by current field value\n        value={options.find((option) => {\n          return option.value === value;\n        })}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          {}\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"],"mappings":"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","names":["_a","Select_default"]}
+{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\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      'pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ninterface SelectOption {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: React.ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value, { replaceDots: true })}`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({ name, ...uniformFieldProps });\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\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-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        menuShouldBlockScroll\n        unstyled\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        name={name}\n        onInputChange={onInputChange}\n        options={options}\n        placeholder={placeholder}\n        classNames={{\n          control: () => {\n            return cn(classNames.control, {\n              [classNames.control_focused]: isFocused && !invalid,\n            });\n          },\n          clearIndicator: () => {\n            return classNames.clearIndicator;\n          },\n          dropdownIndicator: () => {\n            return classNames.dropdownIndicator;\n          },\n          groupHeading: () => {\n            return classNames.groupHeading;\n          },\n          indicatorsContainer: () => {\n            return classNames.indicatorsContainer;\n          },\n          indicatorSeparator: () => {\n            return classNames.indicatorSeparator;\n          },\n          loadingIndicator: () => {\n            return classNames.loadingIndicator;\n          },\n          loadingMessage: () => {\n            return classNames.loadingMessage;\n          },\n          input: () => {\n            return classNames.input;\n          },\n          menu: () => {\n            return classNames.menu;\n          },\n          menuList: () => {\n            return classNames.menuList;\n          },\n          menuPortal: () => {\n            return classNames.menuPortal;\n          },\n          multiValue: () => {\n            return classNames.multiValue;\n          },\n          multiValueLabel: () => {\n            return cn(\n              classNames.multiValueLabel,\n              `${getValueProps().className}`,\n            );\n          },\n          multiValueRemove: () => {\n            return classNames.multiValueRemove;\n          },\n          noOptionsMessage: () => {\n            return classNames.noOptionsMessage;\n          },\n          option: ({\n            isFocused: optionIsFocused,\n            isSelected: optionIsSelected,\n          }) => {\n            return cn(classNames.option, {\n              [classNames.option_focused]: optionIsFocused,\n              [classNames.option_selected]: optionIsSelected,\n            });\n          },\n          placeholder: () => {\n            return classNames.placeholder;\n          },\n          singleValue: () => {\n            return cn(classNames.singleValue, `${getValueProps().className}`);\n          },\n          valueContainer: () => {\n            return classNames.valueContainer;\n          },\n        }}\n        components={{\n          Input: InputComponent,\n          Option: OptionComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Control: ControlComponent,\n        }}\n        onBlur={(_e) => {\n          setIsFocused(false);\n          onBlur();\n        }}\n        onChange={(option) => {\n          if (multiSelect) {\n            onChange(\n              (option as SelectOption[])?.map((_option) => {\n                return _option.value;\n              }),\n            );\n          } else {\n            onChange((option as SelectOption)?.value);\n          }\n        }}\n        onFocus={(_e) => {\n          setIsFocused(true);\n        }}\n        // set complete option as value by current field value\n        value={options.find((option) => {\n          return option.value === value;\n        })}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          {}\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"],"mappings":"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","names":["_a","Select_default"]}

package/dist/{chunk-4MMOSRT3.cjs → chunk-3Z3F4LTX.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkJ5FFM7WGcjs = require('./chunk-J5FFM7WG.cjs');
+var _chunkBGVM2RICcjs = require('./chunk-BGVM2RIC.cjs');
 
 
 
@@ -34,10 +34,10 @@ var RadioBox = (_a) => {
     Component,
     _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getBaseProps()), {
       className: _pixelutils.cn.call(void 0, 
-        "group border-default hover:bg-content2 data-[selected=true]:border-focus inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 p-4",
+        "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",
         {
           // disabled styles
-          "opacity-disabled pointer-events-none": isDisabled
+          "pointer-events-none opacity-disabled": isDisabled
         }
       ),
       children: [
@@ -50,7 +50,7 @@ var RadioBox = (_a) => {
             className: _pixelutils.cn.call(void 0, getLabelWrapperProps().className, "grow"),
             children: [
               children ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getLabelProps()), { children })) : null,
-              description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-small text-foreground opacity-70", children: description }) : null
+              description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-foreground opacity-70 text-small", children: description }) : null
             ]
           })
         )
@@ -74,7 +74,7 @@ var radioBoxesVariants = _pixelutils.tv.call(void 0, {
     // TODO: get rid of !.
     // see HeroUI styles for group-data condition,
     // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
-    label: "text-foreground group-data-[invalid=true]:text-danger mb-2 inline-flex text-sm subpixel-antialiased",
+    label: "mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
     wrapper: ""
   }
 });
@@ -101,7 +101,7 @@ var RadioBoxes = (_a) => {
     ref,
     required,
     testId
-  } = _chunkJ5FFM7WGcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
+  } = _chunkBGVM2RICcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
     name,
     showInvalidWhen: "immediate"
   }, uniformFieldProps));
@@ -168,4 +168,4 @@ var RadioBoxes_default2 = RadioBoxes_default;
 
 
 exports.RadioBoxes_default = RadioBoxes_default; exports.RadioBoxes_default2 = RadioBoxes_default2;
-//# sourceMappingURL=chunk-4MMOSRT3.cjs.map
+//# sourceMappingURL=chunk-3Z3F4LTX.cjs.map

package/dist/{chunk-4MMOSRT3.cjs.map → chunk-3Z3F4LTX.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4MMOSRT3.cjs","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"names":["jsx","_a","_b","RadioBoxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4MMOSRT3.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n//\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group gap-0', // 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-foreground group-data-[invalid=true]:text-danger mb-2 inline-flex text-sm subpixel-antialiased',\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  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadioBoxesProps) => {\n  const {\n    defaultValue,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    showInvalidWhen: 'immediate',\n    ...uniformFieldProps,\n  });\n\n  // classNames from slots\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\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      ref={ref}\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={defaultValue as string}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <RadioBox\n              key={option.value}\n              classNames={itemClassNames}\n              data-testid={optionTestId}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={!!disabled || option.disabled}\n              onChange={onChange}\n              value={option.value}\n            >\n              {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      {...getBaseProps()}\n      className={cn(\n        'group border-default hover:bg-content2 data-[selected=true]:border-focus inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 p-4',\n        {\n          // disabled styles\n          'opacity-disabled pointer-events-none': isDisabled,\n        },\n      )}\n    >\n      <VisuallyHidden>\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      <span {...getWrapperProps()}>\n        <span {...getControlProps()} />\n      </span>\n      {icon}\n      <div\n        {...getLabelWrapperProps()}\n        className={cn(getLabelWrapperProps().className, 'grow')}\n      >\n        {children ? <span {...getLabelProps()}>{children}</span> : null}\n        {description ? (\n          <span className=\"text-small text-foreground opacity-70\">\n            {description}\n          </span>\n        ) : null}\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"]}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-3Z3F4LTX.cjs","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"names":["jsx","_a","_b","RadioBoxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-3Z3F4LTX.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n//\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group gap-0', // 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      'mb-2 inline-flex 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  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadioBoxesProps) => {\n  const {\n    defaultValue,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    showInvalidWhen: 'immediate',\n    ...uniformFieldProps,\n  });\n\n  // classNames from slots\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\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      ref={ref}\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={defaultValue as string}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <RadioBox\n              key={option.value}\n              classNames={itemClassNames}\n              data-testid={optionTestId}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={!!disabled || option.disabled}\n              onChange={onChange}\n              value={option.value}\n            >\n              {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      {...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        <input {...getInputProps()} />\n      </VisuallyHidden>\n      <span {...getWrapperProps()}>\n        <span {...getControlProps()} />\n      </span>\n      {icon}\n      <div\n        {...getLabelWrapperProps()}\n        className={cn(getLabelWrapperProps().className, 'grow')}\n      >\n        {children ? <span {...getLabelProps()}>{children}</span> : null}\n        {description ? (\n          <span className=\"text-foreground opacity-70 text-small\">\n            {description}\n          </span>\n        ) : null}\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"]}

package/dist/{chunk-ZQ64MG7T.js → chunk-4TOWIBVX.js}

@@ -1,6 +1,6 @@
 import {
   useUniformField
-} from "./chunk-CFH4VPJ4.js";
+} from "./chunk-XRV3STYH.js";
 import {
   __objRest,
   __spreadValues
@@ -16,7 +16,7 @@ var radioTabsVariants = tv({
     base: "group gap-0",
     // Needs group for group-data condition
     cursor: "",
-    label: "text-foreground group-data-[invalid=true]:text-danger mb-2 inline-flex text-sm subpixel-antialiased",
+    label: "mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
     tab: "",
     tabBase: "",
     tabContent: "",
@@ -32,7 +32,7 @@ var radioTabsVariants = tv({
         tabBase: "p-1 pb-0",
         tabWrapper: [
           // border style
-          "border-divider rounded-medium border",
+          "rounded-medium border border-divider",
           // full width
           "w-full"
         ]
@@ -145,4 +145,4 @@ export {
   RadioTabs_default,
   RadioTabs_default2
 };
-//# sourceMappingURL=chunk-ZQ64MG7T.js.map
+//# sourceMappingURL=chunk-4TOWIBVX.js.map

package/dist/{chunk-ZQ64MG7T.js.map → chunk-4TOWIBVX.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { useUniformField } from '../hooks';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    cursor: '',\n    label:\n      'text-foreground group-data-[invalid=true]:text-danger mb-2 inline-flex text-sm subpixel-antialiased',\n    tab: '',\n    tabBase: '',\n    tabContent: '',\n    tabList: '',\n    tabPanel: 'p-3',\n    tabWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    hasContent: {\n      true: {\n        base: '',\n        tabBase: 'p-1 pb-0',\n        tabWrapper: [\n          // border style\n          'border-divider rounded-medium border',\n          // full width\n          'w-full',\n        ],\n      },\n    },\n    fullWidth: {\n      true: {\n        tabWrapper: 'w-full',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n  /** Optional content inside of the tab */\n  content?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: React.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 RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** Whether tabs should take up full container width */\n  fullWidth?: 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: RadioTabsOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioTabs should look like. */\n  variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n  className = undefined,\n  fullWidth = false,\n  inline = false,\n  name,\n  options,\n  variant = undefined,\n  ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n  const {\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    showInvalidWhen: 'immediate',\n    ...uniformFieldProps,\n  });\n\n  const tabOptions = options.map<TabProps>((option) => {\n    return {\n      content: option?.content,\n      disabled: option?.disabled,\n      key: option.value,\n      label: option?.label ?? option?.value,\n      testId: slugify(`option_${option?.testId ?? option?.value}`, {\n        replaceDots: true,\n      }),\n    };\n  });\n\n  const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n    return option.key as string;\n  });\n\n  // check if any option has content\n  // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n  const hasContent = options.some((option) => {\n    return option.content;\n  });\n\n  // classNames from slots\n  const variants = radioTabsVariants({ hasContent, fullWidth });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\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      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      classNames={{\n        base: classNames.base,\n        label: classNames.label,\n        wrapper: classNames.wrapper,\n      }}\n    >\n      <Tabs\n        disabledKeys={disabled ? disabledAllKeys : undefined}\n        onSelectionChange={onChange}\n        // make sure component is controlled\n        selectedKey={value ?? ''}\n        tabs={tabOptions}\n        testId={testId}\n        variant={variant}\n        className={{\n          base: classNames.tabBase,\n          cursor: classNames.cursor,\n          panel: classNames.tabPanel,\n          tab: classNames.tab,\n          tabContent: classNames.tabContent,\n          tabList: classNames.tabList,\n          tabWrapper: classNames.tabWrapper,\n        }}\n      />\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":"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","names":["_a","_b","RadioTabs_default"]}
+{"version":3,"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { useUniformField } from '../hooks';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    cursor: '',\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    tab: '',\n    tabBase: '',\n    tabContent: '',\n    tabList: '',\n    tabPanel: 'p-3',\n    tabWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    hasContent: {\n      true: {\n        base: '',\n        tabBase: 'p-1 pb-0',\n        tabWrapper: [\n          // border style\n          'rounded-medium border border-divider',\n          // full width\n          'w-full',\n        ],\n      },\n    },\n    fullWidth: {\n      true: {\n        tabWrapper: 'w-full',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n  /** Optional content inside of the tab */\n  content?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: React.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 RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** Whether tabs should take up full container width */\n  fullWidth?: 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: RadioTabsOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioTabs should look like. */\n  variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n  className = undefined,\n  fullWidth = false,\n  inline = false,\n  name,\n  options,\n  variant = undefined,\n  ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n  const {\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    showInvalidWhen: 'immediate',\n    ...uniformFieldProps,\n  });\n\n  const tabOptions = options.map<TabProps>((option) => {\n    return {\n      content: option?.content,\n      disabled: option?.disabled,\n      key: option.value,\n      label: option?.label ?? option?.value,\n      testId: slugify(`option_${option?.testId ?? option?.value}`, {\n        replaceDots: true,\n      }),\n    };\n  });\n\n  const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n    return option.key as string;\n  });\n\n  // check if any option has content\n  // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n  const hasContent = options.some((option) => {\n    return option.content;\n  });\n\n  // classNames from slots\n  const variants = radioTabsVariants({ hasContent, fullWidth });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\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      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      classNames={{\n        base: classNames.base,\n        label: classNames.label,\n        wrapper: classNames.wrapper,\n      }}\n    >\n      <Tabs\n        disabledKeys={disabled ? disabledAllKeys : undefined}\n        onSelectionChange={onChange}\n        // make sure component is controlled\n        selectedKey={value ?? ''}\n        tabs={tabOptions}\n        testId={testId}\n        variant={variant}\n        className={{\n          base: classNames.tabBase,\n          cursor: classNames.cursor,\n          panel: classNames.tabPanel,\n          tab: classNames.tab,\n          tabContent: classNames.tabContent,\n          tabList: classNames.tabList,\n          tabWrapper: classNames.tabWrapper,\n        }}\n      />\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":"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","names":["_a","_b","RadioTabs_default"]}

package/dist/{chunk-P6HJOG7D.cjs → chunk-4WYC2RBE.cjs}

@@ -10,7 +10,9 @@ var useInputValueTransform = ({
         return transform.toDisplayValue(formValue != null ? formValue : "");
       }
       if (type === "number") {
-        if (formValue === "") return "";
+        if (formValue === "") {
+          return "";
+        }
         const numValue = Number(formValue);
         return Number.isNaN(numValue) ? formValue : numValue;
       }
@@ -21,7 +23,9 @@ var useInputValueTransform = ({
   const toFormValue = _react.useCallback.call(void 0, 
     (displayValue) => {
       if (type === "number") {
-        if (displayValue === "") return "";
+        if (displayValue === "") {
+          return "";
+        }
         const numValue = Number(displayValue);
         return Number.isNaN(numValue) ? displayValue : numValue;
       }
@@ -38,4 +42,4 @@ var useInputValueTransform = ({
 
 
 exports.useInputValueTransform = useInputValueTransform;
-//# sourceMappingURL=chunk-P6HJOG7D.cjs.map
+//# sourceMappingURL=chunk-4WYC2RBE.cjs.map

package/dist/chunk-4WYC2RBE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4WYC2RBE.cjs","../src/hooks/useInputValueTransform/useInputValueTransform.ts"],"names":[],"mappings":"AAAA;ACAA,8BAA4B;AAsFrB,IAAM,uBAAA,EAAyB,CAAC;AAAA,EACrC,IAAA;AAAA,EACA;AACF,CAAA,EAAA,GAAmE;AAIjE,EAAA,MAAM,eAAA,EAAiB,gCAAA;AAAA,IACrB,CAAC,SAAA,EAAA,GAAgD;AAC/C,MAAA,GAAA,CAAI,UAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,SAAA,CAAW,cAAA,EAAgB;AAC7B,QAAA,OAAO,SAAA,CAAU,cAAA,CAAe,UAAA,GAAA,KAAA,EAAA,UAAA,EAAa,EAAE,CAAA;AAAA,MACjD;AAGA,MAAA,GAAA,CAAI,KAAA,IAAS,QAAA,EAAU;AACrB,QAAA,GAAA,CAAI,UAAA,IAAc,EAAA,EAAI;AACpB,UAAA,OAAO,EAAA;AAAA,QACT;AACA,QAAA,MAAM,SAAA,EAAW,MAAA,CAAO,SAAS,CAAA;AACjC,QAAA,OAAO,MAAA,CAAO,KAAA,CAAM,QAAQ,EAAA,EAAI,UAAA,EAAY,QAAA;AAAA,MAC9C;AAEA,MAAA,OAAO,UAAA,GAAA,KAAA,EAAA,UAAA,EAAa,EAAA;AAAA,IACtB,CAAA;AAAA,IACA,CAAC,IAAA,EAAM,SAAS;AAAA,EAClB,CAAA;AAKA,EAAA,MAAM,YAAA,EAAc,gCAAA;AAAA,IAClB,CAAC,YAAA,EAAA,GAAmD;AAClD,MAAA,GAAA,CAAI,KAAA,IAAS,QAAA,EAAU;AACrB,QAAA,GAAA,CAAI,aAAA,IAAiB,EAAA,EAAI;AACvB,UAAA,OAAO,EAAA;AAAA,QACT;AACA,QAAA,MAAM,SAAA,EAAW,MAAA,CAAO,YAAY,CAAA;AACpC,QAAA,OAAO,MAAA,CAAO,KAAA,CAAM,QAAQ,EAAA,EAAI,aAAA,EAAe,QAAA;AAAA,MACjD;AAEA,MAAA,OAAA,CAAO,UAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,SAAA,CAAW,WAAA,EAAA,EACd,SAAA,CAAU,WAAA,CAAY,YAAsB,EAAA,EAC5C,YAAA;AAAA,IACN,CAAA;AAAA,IACA,CAAC,IAAA,EAAM,SAAS;AAAA,EAClB,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,cAAA;AAAA,IACA;AAAA,EACF,CAAA;AACF,CAAA;ADjGA;AACA;AACE;AACF,wDAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4WYC2RBE.cjs","sourcesContent":[null,"import { useCallback } from 'react';\n\nexport interface InputValueTransform {\n  /** Transforms the form value to display value (e.g., 1000 → \"$1,000\") */\n  toDisplayValue: (value: string | number) => string | number;\n  /** Transforms the display value to form value (e.g., \"$1,000\" → 1000) */\n  toFormValue: (value: string) => string | number;\n}\n\nexport interface UseInputValueTransformOptions {\n  /** Input type for special number handling */\n  type?: 'text' | 'number' | 'password';\n  /** Value transformation functions */\n  transform?: InputValueTransform;\n}\n\nexport interface UseInputValueTransformReturn {\n  /** Converts any form value to display value */\n  toDisplayValue: (formValue: string | number) => string | number;\n  /** Converts any display value to form value */\n  toFormValue: (displayValue: string | number) => string | number;\n}\n\n/**\n * Custom hook providing utility functions for value transformations between display and form values.\n *\n * This hook provides pure conversion functions without any state management. It's useful for:\n * - Currency formatting ($1,000 display vs 1000 stored)\n * - Number inputs with special handling\n * - Date formatting (MM/DD/YYYY display vs ISO date stored)\n * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)\n *\n * **Key Features:**\n * - Pure conversion functions (no state)\n * - Special number input handling (empty string preservation)\n * - Bidirectional value transformations\n * - Memoized functions for performance\n *\n * @param options Configuration for value transformation\n * @returns Pure conversion utility functions\n *\n * @example\n * ```tsx\n * // Currency formatting\n * const currencyTransform = {\n *   displayValue: (val) => val ? `$${Number(val).toLocaleString()}` : '',\n *   formValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n *   transform: currencyTransform\n * });\n *\n * const displayVal = toDisplayValue(1000); // \"$1,000\"\n * const formVal = toFormValue(\"$1,500\"); // 1500\n * ```\n *\n * @example\n * ```tsx\n * // Number input (no transforms needed)\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n *   type: 'number'\n * });\n *\n * // Handles empty string → empty string (not NaN)\n * // Handles \"123\" → 123 (string to number conversion)\n * ```\n *\n * @example\n * ```tsx\n * // Integration with debouncing\n * const MyInput = ({ field, transform }) => {\n *   const transform = useInputValueTransform({ transform });\n *\n *   const { onChange, onBlur, value } = useInputValueDebounce({\n *     ...transform,\n *     initialValue: field.value,\n *     debounceDelay: 300,\n *     onBlur: field.onBlur,\n *     onChange: field.onChange,\n *   });\n *\n *   return <input value={value} onChange={onChange} onBlur={onBlur} />;\n * };\n * ```\n */\nexport const useInputValueTransform = ({\n  type,\n  transform,\n}: UseInputValueTransformOptions): UseInputValueTransformReturn => {\n  /**\n   * Converts any form value to display value\n   */\n  const toDisplayValue = useCallback(\n    (formValue: string | number): string | number => {\n      if (transform?.toDisplayValue) {\n        return transform.toDisplayValue(formValue ?? '');\n      }\n\n      // For number type, convert valid strings to numbers for display\n      if (type === 'number') {\n        if (formValue === '') {\n          return '';\n        }\n        const numValue = Number(formValue);\n        return Number.isNaN(numValue) ? formValue : numValue;\n      }\n\n      return formValue ?? '';\n    },\n    [type, transform],\n  );\n\n  /**\n   * Converts any display value to form value\n   */\n  const toFormValue = useCallback(\n    (displayValue: string | number): string | number => {\n      if (type === 'number') {\n        if (displayValue === '') {\n          return '';\n        }\n        const numValue = Number(displayValue);\n        return Number.isNaN(numValue) ? displayValue : numValue;\n      }\n\n      return transform?.toFormValue\n        ? transform.toFormValue(displayValue as string)\n        : displayValue;\n    },\n    [type, transform],\n  );\n\n  return {\n    toDisplayValue,\n    toFormValue,\n  };\n};\n"]}

package/dist/{chunk-2QLCCB3L.js → chunk-57GTLKQC.js}

@@ -1,6 +1,6 @@
 import {
   useUniformField
-} from "./chunk-CFH4VPJ4.js";
+} from "./chunk-XRV3STYH.js";
 import {
   FieldValidationError_default
 } from "./chunk-ELYGQTXB.js";
@@ -25,11 +25,11 @@ var checkboxesVariants = tv({
     errorMessage: "text-tiny",
     // see HeroUI styles for group-data condition,
     // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
-    label: "text-foreground group-data-[invalid=true]:!text-danger inline-flex text-sm subpixel-antialiased",
+    label: "inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger",
     optionBase: "",
     optionIcon: "",
     optionLabel: "",
-    optionLabelSubline: "!text-small text-foreground-400",
+    optionLabelSubline: "text-foreground-400 !text-small",
     optionWrapper: "",
     wrapper: ""
   },
@@ -179,4 +179,4 @@ export {
   Checkboxes_default,
   Checkboxes_default2
 };
-//# sourceMappingURL=chunk-2QLCCB3L.js.map
+//# sourceMappingURL=chunk-57GTLKQC.js.map

package/dist/{chunk-2QLCCB3L.js.map → chunk-57GTLKQC.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Checkboxes/Checkboxes.tsx","../src/Checkboxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type {\n  CheckboxGroupProps as HeroCheckboxGroupProps,\n  CheckboxProps as HeroCheckboxProps,\n} from '@heroui/checkbox';\nimport type { ReactNode } from 'react';\nimport type { FieldError } from 'react-hook-form';\n\nimport {\n  Checkbox as HeroCheckbox,\n  CheckboxGroup as HeroCheckboxGroup,\n} from '@heroui/checkbox';\nimport { checkbox as heroCheckboxVariants } from '@heroui/theme';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxesVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    errorMessage: 'text-tiny',\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-foreground group-data-[invalid=true]:!text-danger inline-flex text-sm subpixel-antialiased',\n    optionBase: '',\n    optionIcon: '',\n    optionLabel: '',\n    optionLabelSubline: '!text-small text-foreground-400',\n    optionWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/checkbox.ts\n    color: {\n      info: {\n        wrapper:\n          'text-info-foreground after:bg-info after:text-info-foreground',\n      },\n      ...heroCheckboxVariants.variants.color,\n    } as const,\n    lineThrough: {\n      true: {\n        optionLabel: [\n          ...heroCheckboxVariants.variants.lineThrough.true.label,\n          // fix stroke position when used with subline and enable animation\n          'relative before:transition-all before:duration-200',\n        ],\n        optionLabelSubline: 'group-data-[selected=true]:opacity-60',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof checkboxesVariants>;\ntype ClassName = TVClassName<typeof checkboxesVariants>;\n\nexport interface CheckboxOption {\n  /** option label */\n  label?: ReactNode;\n  /** subline displayed below the label */\n  labelSubline?: ReactNode;\n  /** option value */\n  value: string;\n  /** disables the option */\n  disabled?: boolean;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n}\n\nexport interface CheckboxesProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Color scheme of the checkboxes */\n  color?: VariantProps['color'];\n  /** Sets all checkboxes disabled */\n  disabled?: boolean;\n  /** Orientation of the checkboxes */\n  inline?: boolean;\n  /** Label displayed above the checkboxes */\n  label?: ReactNode;\n  /** Whether the checkboxes label should be crossed out */\n  lineThrough?: boolean;\n  /** Name the Field is registered on the form */\n  name: string;\n  /** Checkboxes that should be displayed. */\n  options: CheckboxOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Checkboxes component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)\n */\nconst Checkboxes = ({\n  className = undefined,\n  color = 'primary',\n  inline = false,\n  lineThrough = false,\n  options,\n  name,\n  ...uniformFieldProps\n}: CheckboxesProps) => {\n  const {\n    disabled,\n    error: _error,\n    field: { onChange, value = [], ref, onBlur },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    showInvalidWhen: 'immediate',\n    ...uniformFieldProps,\n  });\n\n  // Convert React Hook Form's nested error object structure to a flat array\n  // RHF errors can be nested like: checkboxField.0 (individual checkbox errors)\n  // and checkboxField._error (global field errors) - this flattens all\n  // error values into a single array for rendering with FieldValidationError\n  const errorFlat: FieldError[] =\n    (_error &&\n      Object.values(\n        _error as unknown as Record<string, FieldError[]>,\n      ).flat()) ??\n    [];\n  const errorMessage = (\n    <FieldValidationError error={errorFlat} testId={testId} />\n  );\n\n  /**\n   * Handles the checkboxes value changes based on the number of options:\n   * 1. For single checkbox (options.length === 1):\n   *    - Converts undefined/empty array to [] for consistent controlled behavior\n   *    - Extracts single value from array for onChange\n   *\n   *    Example: undefined → []\n   *            [value] → value\n   *\n   * 2. For multiple checkboxes:\n   *    - Uses raw value array with fallback to empty array\n   *    - Passes through onChange directly\n   *\n   *    Example: undefined → []\n   *            ['value1', 'value2'] → ['value1', 'value2']\n   */\n  const getCheckboxValue = (inputValue: unknown): string[] => {\n    if (Array.isArray(inputValue)) {\n      return inputValue as string[];\n    }\n    if (inputValue) {\n      return [inputValue as string];\n    }\n    return [];\n  };\n\n  const singleCheckboxProps = {\n    value: getCheckboxValue(value),\n    onChange: (newValue: string[]) => {\n      onChange(newValue?.[0]);\n    },\n  };\n\n  const multipleCheckboxProps = {\n    onChange,\n    value: getCheckboxValue(value),\n  };\n\n  const checkboxesProps =\n    options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n  // classNames from slots\n  const variants = checkboxesVariants({ lineThrough });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // map slots to HeroUI class names\n  const heroCheckboxGroupClassNames: HeroCheckboxGroupProps['classNames'] = {\n    base: classNames.base,\n    label: classNames.label,\n    wrapper: classNames.wrapper,\n  };\n  const heroCheckboxClassNames: HeroCheckboxProps['classNames'] = {\n    base: classNames.optionBase,\n    icon: classNames.optionIcon,\n    label: classNames.optionLabel,\n    wrapper: classNames.optionWrapper,\n  };\n\n  return (\n    <HeroCheckboxGroup\n      ref={ref}\n      classNames={heroCheckboxGroupClassNames}\n      color={color === 'info' ? 'primary' : color}\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-testid={testId}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      {...checkboxesProps}\n    >\n      {options?.map((option) => {\n        const optionTestId = slugify(\n          `${testId}_option_${option?.testId ?? option?.value}`,\n          { replaceDots: true },\n        );\n\n        // set content and classes depending option has subline\n        const hasSubline = !!option.labelSubline;\n        let labelContent: ReactNode;\n        let optionClassNames = heroCheckboxClassNames;\n        if (hasSubline) {\n          labelContent = (\n            <div className=\"flex grow flex-col items-start\">\n              <span className={classNames.optionLabel}>{option.label}</span>\n              <span className={classNames.optionLabelSubline}>\n                {option.labelSubline}\n              </span>\n            </div>\n          );\n          // remove label classes from outer label when subline is used\n          optionClassNames = { ...optionClassNames, label: '' };\n        } else {\n          labelContent = option.label;\n        }\n\n        return (\n          <HeroCheckbox\n            key={`index_${option.value}`}\n            classNames={optionClassNames}\n            data-invalid={invalid}\n            data-testid={optionTestId}\n            isDisabled={!!disabled || option.disabled}\n            value={option?.value}\n            aria-label={\n              typeof option.label === 'string' ? option.label : option.value\n            }\n          >\n            {labelContent}\n          </HeroCheckbox>\n        );\n      })}\n    </HeroCheckboxGroup>\n  );\n};\n\nexport default Checkboxes;\n","import Checkboxes from './Checkboxes';\n\nexport type { CheckboxesProps, CheckboxOption } from './Checkboxes';\n\nexport { Checkboxes };\n\nexport default Checkboxes;\n"],"mappings":"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","names":["_a","Checkboxes_default"]}
+{"version":3,"sources":["../src/Checkboxes/Checkboxes.tsx","../src/Checkboxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type {\n  CheckboxGroupProps as HeroCheckboxGroupProps,\n  CheckboxProps as HeroCheckboxProps,\n} from '@heroui/checkbox';\nimport type { ReactNode } from 'react';\nimport type { FieldError } from 'react-hook-form';\n\nimport {\n  Checkbox as HeroCheckbox,\n  CheckboxGroup as HeroCheckboxGroup,\n} from '@heroui/checkbox';\nimport { checkbox as heroCheckboxVariants } from '@heroui/theme';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxesVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    errorMessage: 'text-tiny',\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      'inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n    optionBase: '',\n    optionIcon: '',\n    optionLabel: '',\n    optionLabelSubline: 'text-foreground-400 !text-small',\n    optionWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/checkbox.ts\n    color: {\n      info: {\n        wrapper:\n          'text-info-foreground after:bg-info after:text-info-foreground',\n      },\n      ...heroCheckboxVariants.variants.color,\n    } as const,\n    lineThrough: {\n      true: {\n        optionLabel: [\n          ...heroCheckboxVariants.variants.lineThrough.true.label,\n          // fix stroke position when used with subline and enable animation\n          'relative before:transition-all before:duration-200',\n        ],\n        optionLabelSubline: 'group-data-[selected=true]:opacity-60',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof checkboxesVariants>;\ntype ClassName = TVClassName<typeof checkboxesVariants>;\n\nexport interface CheckboxOption {\n  /** option label */\n  label?: ReactNode;\n  /** subline displayed below the label */\n  labelSubline?: ReactNode;\n  /** option value */\n  value: string;\n  /** disables the option */\n  disabled?: boolean;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n}\n\nexport interface CheckboxesProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Color scheme of the checkboxes */\n  color?: VariantProps['color'];\n  /** Sets all checkboxes disabled */\n  disabled?: boolean;\n  /** Orientation of the checkboxes */\n  inline?: boolean;\n  /** Label displayed above the checkboxes */\n  label?: ReactNode;\n  /** Whether the checkboxes label should be crossed out */\n  lineThrough?: boolean;\n  /** Name the Field is registered on the form */\n  name: string;\n  /** Checkboxes that should be displayed. */\n  options: CheckboxOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Checkboxes component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)\n */\nconst Checkboxes = ({\n  className = undefined,\n  color = 'primary',\n  inline = false,\n  lineThrough = false,\n  options,\n  name,\n  ...uniformFieldProps\n}: CheckboxesProps) => {\n  const {\n    disabled,\n    error: _error,\n    field: { onChange, value = [], ref, onBlur },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    showInvalidWhen: 'immediate',\n    ...uniformFieldProps,\n  });\n\n  // Convert React Hook Form's nested error object structure to a flat array\n  // RHF errors can be nested like: checkboxField.0 (individual checkbox errors)\n  // and checkboxField._error (global field errors) - this flattens all\n  // error values into a single array for rendering with FieldValidationError\n  const errorFlat: FieldError[] =\n    (_error &&\n      Object.values(\n        _error as unknown as Record<string, FieldError[]>,\n      ).flat()) ??\n    [];\n  const errorMessage = (\n    <FieldValidationError error={errorFlat} testId={testId} />\n  );\n\n  /**\n   * Handles the checkboxes value changes based on the number of options:\n   * 1. For single checkbox (options.length === 1):\n   *    - Converts undefined/empty array to [] for consistent controlled behavior\n   *    - Extracts single value from array for onChange\n   *\n   *    Example: undefined → []\n   *            [value] → value\n   *\n   * 2. For multiple checkboxes:\n   *    - Uses raw value array with fallback to empty array\n   *    - Passes through onChange directly\n   *\n   *    Example: undefined → []\n   *            ['value1', 'value2'] → ['value1', 'value2']\n   */\n  const getCheckboxValue = (inputValue: unknown): string[] => {\n    if (Array.isArray(inputValue)) {\n      return inputValue as string[];\n    }\n    if (inputValue) {\n      return [inputValue as string];\n    }\n    return [];\n  };\n\n  const singleCheckboxProps = {\n    value: getCheckboxValue(value),\n    onChange: (newValue: string[]) => {\n      onChange(newValue?.[0]);\n    },\n  };\n\n  const multipleCheckboxProps = {\n    onChange,\n    value: getCheckboxValue(value),\n  };\n\n  const checkboxesProps =\n    options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n  // classNames from slots\n  const variants = checkboxesVariants({ lineThrough });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // map slots to HeroUI class names\n  const heroCheckboxGroupClassNames: HeroCheckboxGroupProps['classNames'] = {\n    base: classNames.base,\n    label: classNames.label,\n    wrapper: classNames.wrapper,\n  };\n  const heroCheckboxClassNames: HeroCheckboxProps['classNames'] = {\n    base: classNames.optionBase,\n    icon: classNames.optionIcon,\n    label: classNames.optionLabel,\n    wrapper: classNames.optionWrapper,\n  };\n\n  return (\n    <HeroCheckboxGroup\n      ref={ref}\n      classNames={heroCheckboxGroupClassNames}\n      color={color === 'info' ? 'primary' : color}\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-testid={testId}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      {...checkboxesProps}\n    >\n      {options?.map((option) => {\n        const optionTestId = slugify(\n          `${testId}_option_${option?.testId ?? option?.value}`,\n          { replaceDots: true },\n        );\n\n        // set content and classes depending option has subline\n        const hasSubline = !!option.labelSubline;\n        let labelContent: ReactNode;\n        let optionClassNames = heroCheckboxClassNames;\n        if (hasSubline) {\n          labelContent = (\n            <div className=\"flex grow flex-col items-start\">\n              <span className={classNames.optionLabel}>{option.label}</span>\n              <span className={classNames.optionLabelSubline}>\n                {option.labelSubline}\n              </span>\n            </div>\n          );\n          // remove label classes from outer label when subline is used\n          optionClassNames = { ...optionClassNames, label: '' };\n        } else {\n          labelContent = option.label;\n        }\n\n        return (\n          <HeroCheckbox\n            key={`index_${option.value}`}\n            classNames={optionClassNames}\n            data-invalid={invalid}\n            data-testid={optionTestId}\n            isDisabled={!!disabled || option.disabled}\n            value={option?.value}\n            aria-label={\n              typeof option.label === 'string' ? option.label : option.value\n            }\n          >\n            {labelContent}\n          </HeroCheckbox>\n        );\n      })}\n    </HeroCheckboxGroup>\n  );\n};\n\nexport default Checkboxes;\n","import Checkboxes from './Checkboxes';\n\nexport type { CheckboxesProps, CheckboxOption } from './Checkboxes';\n\nexport { Checkboxes };\n\nexport default Checkboxes;\n"],"mappings":"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","names":["_a","Checkboxes_default"]}

package/dist/{chunk-Q2BOMFJ5.js → chunk-7KLFK2IT.js}

@@ -10,7 +10,9 @@ var useInputValueTransform = ({
         return transform.toDisplayValue(formValue != null ? formValue : "");
       }
       if (type === "number") {
-        if (formValue === "") return "";
+        if (formValue === "") {
+          return "";
+        }
         const numValue = Number(formValue);
         return Number.isNaN(numValue) ? formValue : numValue;
       }
@@ -21,7 +23,9 @@ var useInputValueTransform = ({
   const toFormValue = useCallback(
     (displayValue) => {
       if (type === "number") {
-        if (displayValue === "") return "";
+        if (displayValue === "") {
+          return "";
+        }
         const numValue = Number(displayValue);
         return Number.isNaN(numValue) ? displayValue : numValue;
       }
@@ -38,4 +42,4 @@ var useInputValueTransform = ({
 export {
   useInputValueTransform
 };
-//# sourceMappingURL=chunk-Q2BOMFJ5.js.map
+//# sourceMappingURL=chunk-7KLFK2IT.js.map

package/dist/{chunk-Q2BOMFJ5.js.map → chunk-7KLFK2IT.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useInputValueTransform/useInputValueTransform.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nexport interface InputValueTransform {\n  /** Transforms the form value to display value (e.g., 1000 → \"$1,000\") */\n  toDisplayValue: (value: string | number) => string | number;\n  /** Transforms the display value to form value (e.g., \"$1,000\" → 1000) */\n  toFormValue: (value: string) => string | number;\n}\n\nexport interface UseInputValueTransformOptions {\n  /** Input type for special number handling */\n  type?: 'text' | 'number' | 'password';\n  /** Value transformation functions */\n  transform?: InputValueTransform;\n}\n\nexport interface UseInputValueTransformReturn {\n  /** Converts any form value to display value */\n  toDisplayValue: (formValue: string | number) => string | number;\n  /** Converts any display value to form value */\n  toFormValue: (displayValue: string | number) => string | number;\n}\n\n/**\n * Custom hook providing utility functions for value transformations between display and form values.\n *\n * This hook provides pure conversion functions without any state management. It's useful for:\n * - Currency formatting ($1,000 display vs 1000 stored)\n * - Number inputs with special handling\n * - Date formatting (MM/DD/YYYY display vs ISO date stored)\n * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)\n *\n * **Key Features:**\n * - Pure conversion functions (no state)\n * - Special number input handling (empty string preservation)\n * - Bidirectional value transformations\n * - Memoized functions for performance\n *\n * @param options Configuration for value transformation\n * @returns Pure conversion utility functions\n *\n * @example\n * ```tsx\n * // Currency formatting\n * const currencyTransform = {\n *   displayValue: (val) => val ? `$${Number(val).toLocaleString()}` : '',\n *   formValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n *   transform: currencyTransform\n * });\n *\n * const displayVal = toDisplayValue(1000); // \"$1,000\"\n * const formVal = toFormValue(\"$1,500\"); // 1500\n * ```\n *\n * @example\n * ```tsx\n * // Number input (no transforms needed)\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n *   type: 'number'\n * });\n *\n * // Handles empty string → empty string (not NaN)\n * // Handles \"123\" → 123 (string to number conversion)\n * ```\n *\n * @example\n * ```tsx\n * // Integration with debouncing\n * const MyInput = ({ field, transform }) => {\n *   const transform = useInputValueTransform({ transform });\n *\n *   const { onChange, onBlur, value } = useInputValueDebounce({\n *     ...transform,\n *     initialValue: field.value,\n *     debounceDelay: 300,\n *     onBlur: field.onBlur,\n *     onChange: field.onChange,\n *   });\n *\n *   return <input value={value} onChange={onChange} onBlur={onBlur} />;\n * };\n * ```\n */\nexport const useInputValueTransform = ({\n  type,\n  transform,\n}: UseInputValueTransformOptions): UseInputValueTransformReturn => {\n  /**\n   * Converts any form value to display value\n   */\n  const toDisplayValue = useCallback(\n    (formValue: string | number): string | number => {\n      if (transform?.toDisplayValue) {\n        return transform.toDisplayValue(formValue ?? '');\n      }\n\n      // For number type, convert valid strings to numbers for display\n      if (type === 'number') {\n        if (formValue === '') return '';\n        const numValue = Number(formValue);\n        return Number.isNaN(numValue) ? formValue : numValue;\n      }\n\n      return formValue ?? '';\n    },\n    [type, transform],\n  );\n\n  /**\n   * Converts any display value to form value\n   */\n  const toFormValue = useCallback(\n    (displayValue: string | number): string | number => {\n      if (type === 'number') {\n        if (displayValue === '') return '';\n        const numValue = Number(displayValue);\n        return Number.isNaN(numValue) ? displayValue : numValue;\n      }\n\n      return transform?.toFormValue\n        ? transform.toFormValue(displayValue as string)\n        : displayValue;\n    },\n    [type, transform],\n  );\n\n  return {\n    toDisplayValue,\n    toFormValue,\n  };\n};\n"],"mappings":";AAAA,SAAS,mBAAmB;AAsFrB,IAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAAmE;AAIjE,QAAM,iBAAiB;AAAA,IACrB,CAAC,cAAgD;AAC/C,UAAI,uCAAW,gBAAgB;AAC7B,eAAO,UAAU,eAAe,gCAAa,EAAE;AAAA,MACjD;AAGA,UAAI,SAAS,UAAU;AACrB,YAAI,cAAc,GAAI,QAAO;AAC7B,cAAM,WAAW,OAAO,SAAS;AACjC,eAAO,OAAO,MAAM,QAAQ,IAAI,YAAY;AAAA,MAC9C;AAEA,aAAO,gCAAa;AAAA,IACtB;AAAA,IACA,CAAC,MAAM,SAAS;AAAA,EAClB;AAKA,QAAM,cAAc;AAAA,IAClB,CAAC,iBAAmD;AAClD,UAAI,SAAS,UAAU;AACrB,YAAI,iBAAiB,GAAI,QAAO;AAChC,cAAM,WAAW,OAAO,YAAY;AACpC,eAAO,OAAO,MAAM,QAAQ,IAAI,eAAe;AAAA,MACjD;AAEA,cAAO,uCAAW,eACd,UAAU,YAAY,YAAsB,IAC5C;AAAA,IACN;AAAA,IACA,CAAC,MAAM,SAAS;AAAA,EAClB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../src/hooks/useInputValueTransform/useInputValueTransform.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nexport interface InputValueTransform {\n  /** Transforms the form value to display value (e.g., 1000 → \"$1,000\") */\n  toDisplayValue: (value: string | number) => string | number;\n  /** Transforms the display value to form value (e.g., \"$1,000\" → 1000) */\n  toFormValue: (value: string) => string | number;\n}\n\nexport interface UseInputValueTransformOptions {\n  /** Input type for special number handling */\n  type?: 'text' | 'number' | 'password';\n  /** Value transformation functions */\n  transform?: InputValueTransform;\n}\n\nexport interface UseInputValueTransformReturn {\n  /** Converts any form value to display value */\n  toDisplayValue: (formValue: string | number) => string | number;\n  /** Converts any display value to form value */\n  toFormValue: (displayValue: string | number) => string | number;\n}\n\n/**\n * Custom hook providing utility functions for value transformations between display and form values.\n *\n * This hook provides pure conversion functions without any state management. It's useful for:\n * - Currency formatting ($1,000 display vs 1000 stored)\n * - Number inputs with special handling\n * - Date formatting (MM/DD/YYYY display vs ISO date stored)\n * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)\n *\n * **Key Features:**\n * - Pure conversion functions (no state)\n * - Special number input handling (empty string preservation)\n * - Bidirectional value transformations\n * - Memoized functions for performance\n *\n * @param options Configuration for value transformation\n * @returns Pure conversion utility functions\n *\n * @example\n * ```tsx\n * // Currency formatting\n * const currencyTransform = {\n *   displayValue: (val) => val ? `$${Number(val).toLocaleString()}` : '',\n *   formValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n *   transform: currencyTransform\n * });\n *\n * const displayVal = toDisplayValue(1000); // \"$1,000\"\n * const formVal = toFormValue(\"$1,500\"); // 1500\n * ```\n *\n * @example\n * ```tsx\n * // Number input (no transforms needed)\n * const { toDisplayValue, toFormValue } = useInputValueTransform({\n *   type: 'number'\n * });\n *\n * // Handles empty string → empty string (not NaN)\n * // Handles \"123\" → 123 (string to number conversion)\n * ```\n *\n * @example\n * ```tsx\n * // Integration with debouncing\n * const MyInput = ({ field, transform }) => {\n *   const transform = useInputValueTransform({ transform });\n *\n *   const { onChange, onBlur, value } = useInputValueDebounce({\n *     ...transform,\n *     initialValue: field.value,\n *     debounceDelay: 300,\n *     onBlur: field.onBlur,\n *     onChange: field.onChange,\n *   });\n *\n *   return <input value={value} onChange={onChange} onBlur={onBlur} />;\n * };\n * ```\n */\nexport const useInputValueTransform = ({\n  type,\n  transform,\n}: UseInputValueTransformOptions): UseInputValueTransformReturn => {\n  /**\n   * Converts any form value to display value\n   */\n  const toDisplayValue = useCallback(\n    (formValue: string | number): string | number => {\n      if (transform?.toDisplayValue) {\n        return transform.toDisplayValue(formValue ?? '');\n      }\n\n      // For number type, convert valid strings to numbers for display\n      if (type === 'number') {\n        if (formValue === '') {\n          return '';\n        }\n        const numValue = Number(formValue);\n        return Number.isNaN(numValue) ? formValue : numValue;\n      }\n\n      return formValue ?? '';\n    },\n    [type, transform],\n  );\n\n  /**\n   * Converts any display value to form value\n   */\n  const toFormValue = useCallback(\n    (displayValue: string | number): string | number => {\n      if (type === 'number') {\n        if (displayValue === '') {\n          return '';\n        }\n        const numValue = Number(displayValue);\n        return Number.isNaN(numValue) ? displayValue : numValue;\n      }\n\n      return transform?.toFormValue\n        ? transform.toFormValue(displayValue as string)\n        : displayValue;\n    },\n    [type, transform],\n  );\n\n  return {\n    toDisplayValue,\n    toFormValue,\n  };\n};\n"],"mappings":";AAAA,SAAS,mBAAmB;AAsFrB,IAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAAmE;AAIjE,QAAM,iBAAiB;AAAA,IACrB,CAAC,cAAgD;AAC/C,UAAI,uCAAW,gBAAgB;AAC7B,eAAO,UAAU,eAAe,gCAAa,EAAE;AAAA,MACjD;AAGA,UAAI,SAAS,UAAU;AACrB,YAAI,cAAc,IAAI;AACpB,iBAAO;AAAA,QACT;AACA,cAAM,WAAW,OAAO,SAAS;AACjC,eAAO,OAAO,MAAM,QAAQ,IAAI,YAAY;AAAA,MAC9C;AAEA,aAAO,gCAAa;AAAA,IACtB;AAAA,IACA,CAAC,MAAM,SAAS;AAAA,EAClB;AAKA,QAAM,cAAc;AAAA,IAClB,CAAC,iBAAmD;AAClD,UAAI,SAAS,UAAU;AACrB,YAAI,iBAAiB,IAAI;AACvB,iBAAO;AAAA,QACT;AACA,cAAM,WAAW,OAAO,YAAY;AACpC,eAAO,OAAO,MAAM,QAAQ,IAAI,eAAe;AAAA,MACjD;AAEA,cAAO,uCAAW,eACd,UAAU,YAAY,YAAsB,IAC5C;AAAA,IACN;AAAA,IACA,CAAC,MAAM,SAAS;AAAA,EAClB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-J5FFM7WG.cjs → chunk-BGVM2RIC.cjs}

@@ -218,6 +218,7 @@ var FormContext_default = FormProvider;
 
 // src/hooks/useFormContext/useFormContext.ts
 var checkFieldIsRequired = (validation, path) => {
+  const checkPath = path[path.length - 1] === _chunkZ353BLWIcjs.flatArrayKey ? path.slice(0, -1) : path;
   const checkRequired = (schema) => {
     if (schema.type === "array") {
       if (schema.isOptional || schema.isNullable) {
@@ -227,7 +228,7 @@ var checkFieldIsRequired = (validation, path) => {
     }
     return !schema.isOptional && !schema.isNullable;
   };
-  return validation.checkSchemaPath(checkRequired, path);
+  return validation.checkSchemaPath(checkRequired, checkPath);
 };
 var getValidationErrorsByName = (errors, name) => {
   const keys = name.split(".").filter((k) => {
@@ -358,7 +359,13 @@ var useController = (props) => {
   };
 };
 
-// src/hooks/useFieldArray/useFieldArray.ts
+// src/hooks/useUniformFieldArray/useUniformFieldArray.ts
+
+
+var _pixelmotion = require('@fuf-stack/pixel-motion');
+
+// src/hooks/useUniformField/useUniformField.tsx
+
 
 
 // src/hooks/useInput/useInput.ts
@@ -366,8 +373,6 @@ var _input = require('@heroui/input');
 
 // src/hooks/useUniformField/useUniformField.tsx
 
-var _pixelmotion = require('@fuf-stack/pixel-motion');
-
 var useDebouncedInvalid = (value, delayMs) => {
   const [state, setState] = _react.useState.call(void 0, value);
   const timeoutRef = _react.useRef.call(void 0, null);
@@ -467,6 +472,76 @@ function useUniformField(params) {
   };
 }
 
+// src/hooks/useUniformFieldArray/useUniformFieldArray.ts
+var useUniformFieldArray = ({
+  name,
+  flat = false,
+  elementInitialValue: _elementInitialValue = null,
+  lastElementNotRemovable = false,
+  disabled,
+  testId: explicitTestId,
+  label,
+  showInvalidWhen = "immediate"
+}) => {
+  const uniformField = useUniformField({
+    name,
+    disabled,
+    testId: explicitTestId,
+    label,
+    showInvalidWhen
+  });
+  const { control } = uniformField;
+  const { fields, append, remove, insert, move } = _reacthookform.useFieldArray.call(void 0, {
+    control,
+    name
+  });
+  const { trigger, setValue } = useFormContext();
+  const [disableAnimation, setDisableAnimation] = _react.useState.call(void 0, true);
+  const hasInitialized = _react.useRef.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (hasInitialized.current) {
+      setTimeout(() => {
+        trigger(name);
+      }, 200);
+    }
+  }, [fields.length]);
+  const prefersReducedMotion = _pixelmotion.useReducedMotion.call(void 0, );
+  _react.useEffect.call(void 0, () => {
+    if (hasInitialized.current) {
+      setDisableAnimation(!!prefersReducedMotion);
+    }
+  }, [prefersReducedMotion]);
+  const elementInitialValue = _react.useMemo.call(void 0, () => {
+    return flat ? { [_chunkZ353BLWIcjs.flatArrayKey]: _elementInitialValue != null ? _elementInitialValue : null } : _elementInitialValue != null ? _elementInitialValue : {};
+  }, [flat, _elementInitialValue]);
+  _react.useEffect.call(void 0, 
+    () => {
+      if (lastElementNotRemovable && fields.length === 0) {
+        setValue(name, [elementInitialValue]);
+      }
+      hasInitialized.current = true;
+      if (!prefersReducedMotion) {
+        setTimeout(() => {
+          setDisableAnimation(false);
+        }, 1);
+      }
+    },
+    // only run once when the component mounts
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  return _chunk555JRYCScjs.__spreadValues.call(void 0, {
+    // Field array methods and state
+    fields,
+    append,
+    remove,
+    insert,
+    move,
+    disableAnimation,
+    elementInitialValue
+  }, uniformField);
+};
+
 
 
 
@@ -476,5 +551,5 @@ function useUniformField(params) {
 
 
 
-exports.FormContext_default = FormContext_default; exports.checkFieldIsRequired = checkFieldIsRequired; exports.useFormContext = useFormContext; exports.useClientValidation = useClientValidation; exports.useController = useController; exports.useFieldArray = _reacthookform.useFieldArray; exports.useInput = _input.useInput; exports.useUniformField = useUniformField;
-//# sourceMappingURL=chunk-J5FFM7WG.cjs.map
+exports.FormContext_default = FormContext_default; exports.checkFieldIsRequired = checkFieldIsRequired; exports.useFormContext = useFormContext; exports.useClientValidation = useClientValidation; exports.useController = useController; exports.useInput = _input.useInput; exports.useUniformField = useUniformField; exports.useUniformFieldArray = useUniformFieldArray;
+//# sourceMappingURL=chunk-BGVM2RIC.cjs.map