@fuf-stack/uniform 1.9.0 → 1.10.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4LLSZ6GN.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["_a","Select_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4LLSZ6GN.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\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 { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\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?: 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  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\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?: 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    ariaLabel,\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({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Get getFieldState to check isTouched in onChange callback\n  const { getFieldState } = useFormContext();\n\n  // Track if the select is focused\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-label={ariaLabel}\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        // set aria-labelledby to the label id so that the select is accessible\n        aria-labelledby={\n          label\n            ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            : undefined\n        }\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          // Mark field as touched immediately when a selection is made if not already touched\n          // This ensures validation errors show right away (isTouched becomes true)\n          // For Select components, selecting an option is a complete user action\n          // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n          const { isTouched: currentIsTouched } = getFieldState(name, testId);\n          if (!currentIsTouched) {\n            onBlur();\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          <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"]}

package/dist/{chunk-UUGSI3FD.js → chunk-5UGCZ7OA.js}

@@ -1,6 +1,6 @@
 import {
   useUniformField
-} from "./chunk-7FOSZV75.js";
+} from "./chunk-4KEI3VRK.js";
 import {
   __objRest,
   __spreadProps,
@@ -212,4 +212,4 @@ export {
   SwitchBox_default,
   SwitchBox_default2
 };
-//# sourceMappingURL=chunk-UUGSI3FD.js.map
+//# sourceMappingURL=chunk-5UGCZ7OA.js.map

package/dist/chunk-5UGCZ7OA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SwitchBox/SwitchBox.tsx","../src/SwitchBox/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { SwitchProps as HeroSwitchProps } from '@heroui/switch';\nimport type { ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { useSwitch } from '@heroui/switch';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const switchBoxVariants = tv({\n  slots: {\n    box: 'group inline-flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-default hover:bg-content2 data-[selected=true]:border-focus',\n    description: 'text-foreground opacity-70',\n    icon: '',\n    label:\n      'font-medium text-foreground group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    wrapper: '',\n    thumb: '',\n    thumbIcon: '',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        box: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        box: '!border-danger',\n        label: '!text-danger',\n      },\n    },\n    size: {\n      sm: {\n        box: 'gap-2 p-3',\n        description: 'text-xs',\n        label: 'text-xs',\n      },\n      md: {\n        box: 'gap-4 p-4',\n        description: 'text-small',\n        label: 'text-sm',\n      },\n      lg: {\n        box: 'gap-4 p-5',\n        description: 'text-small',\n        label: 'text-base',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype ClassName = TVClassName<typeof switchBoxVariants>;\n\nexport interface SwitchBoxProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Description text displayed below the label */\n  description?: ReactNode;\n  /** whether the switch should be disabled */\n  disabled?: boolean;\n  /** Icon to be displayed in the box */\n  icon?: ReactNode;\n  /** component displayed as the label */\n  label?: ReactNode;\n  /** name the field is registered under */\n  name: string;\n  /** whether the field is required */\n  required?: boolean;\n  /* Size of the switch */\n  size?: 'sm' | 'md' | 'lg';\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Icon to be displayed inside the thumb */\n  thumbIcon?: HeroSwitchProps['thumbIcon'];\n}\n\n/**\n * SwitchBox component - A card-like box with a switch control\n */\nconst SwitchBox = ({\n  className = undefined,\n  description = undefined,\n  icon = undefined,\n  name,\n  size = undefined,\n  thumbIcon = undefined,\n  ...uniformFieldProps\n}: SwitchBoxProps) => {\n  const {\n    defaultValue,\n    disabled,\n    errorMessage,\n    field,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Ref for the visual switch to forward focus\n  const visualSwitchRef = useRef<HTMLInputElement>(null);\n\n  // Use the useSwitch hook to get access to all the necessary props\n  const {\n    Component,\n    slots,\n    isSelected,\n    getBaseProps,\n    getInputProps,\n    getWrapperProps,\n  } = useSwitch({\n    defaultSelected: !!defaultValue,\n    isDisabled: disabled,\n    isSelected: !!field.value,\n    name: `${name}_switch`,\n    onValueChange: onChange,\n    size,\n    thumbIcon,\n  });\n\n  // classNames from slots\n  const variants = switchBoxVariants({\n    isDisabled: disabled,\n    isInvalid: invalid,\n    size,\n  });\n  const classNames = variantsToClassNames(variants, className, 'box');\n\n  return (\n    <div>\n      <Component\n        {...getBaseProps()}\n        className={classNames.box}\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n      >\n        <VisuallyHidden>\n          <input\n            ref={ref}\n            aria-label={typeof label === 'string' ? label : name}\n            checked={!!field.value}\n            name={name}\n            tabIndex={-1}\n            type=\"checkbox\"\n            onChange={(e) => {\n              onChange(e.target.checked);\n            }}\n            onFocus={() => {\n              // When RHF focuses this hidden input (e.g., on validation error),\n              // forward focus to the visual switch to show focus ring\n              visualSwitchRef.current?.focus();\n            }}\n          />\n          {/* Visual switch input for focus ring */}\n          <input\n            ref={visualSwitchRef}\n            {...getInputProps()}\n            onBlur={(e) => {\n              // Call HeroUI's internal onBlur to clear focus state and remove focus ring\n              getInputProps().onBlur?.(e);\n              // Then call RHF's onBlur to mark field as touched\n              onBlur();\n            }}\n          />\n        </VisuallyHidden>\n        {!icon ? (\n          <span\n            {...getWrapperProps()}\n            className={cn(getWrapperProps().className, classNames.wrapper)}\n          >\n            <span className={cn(slots.thumb({ class: classNames.thumb }))}>\n              {thumbIcon && typeof thumbIcon === 'function'\n                ? thumbIcon({\n                    isSelected: !!isSelected,\n                    className: slots.thumbIcon({ class: classNames.thumbIcon }),\n                    width: '1em',\n                    height: '1em',\n                    'data-checked': isSelected ? 'true' : 'false',\n                  })\n                : thumbIcon}\n            </span>\n          </span>\n        ) : null}\n        {icon ? <div className={classNames.icon}>{icon}</div> : null}\n        <div className=\"grow\">\n          {label ? <div className={classNames.label}>{label}</div> : null}\n          {description ? (\n            <div className={classNames.description}>{description}</div>\n          ) : null}\n        </div>\n        {icon ? (\n          <span\n            {...getWrapperProps()}\n            className={cn(getWrapperProps().className, classNames.wrapper)}\n          >\n            <span className={cn(slots.thumb({ class: classNames.thumb }))}>\n              {thumbIcon && typeof thumbIcon === 'function'\n                ? thumbIcon({\n                    isSelected: !!isSelected,\n                    className: slots.thumbIcon({ class: classNames.thumbIcon }),\n                    width: '1em',\n                    height: '1em',\n                    'data-checked': isSelected ? 'true' : 'false',\n                  })\n                : thumbIcon}\n            </span>\n          </span>\n        ) : null}\n      </Component>\n      {invalid ? (\n        <div\n          {...getHelperWrapperProps()}\n          className={cn(\n            getHelperWrapperProps()?.className,\n            // force helper to be visible (for some reason it's hidden by default) and remove margin\n            'ml-0 block',\n          )}\n        >\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default SwitchBox;\n","import SwitchBox from './SwitchBox';\n\nexport type { SwitchBoxProps } from './SwitchBox';\n\nexport { switchBoxVariants } from './SwitchBox';\nexport { SwitchBox };\n\nexport default SwitchBox;\n"],"mappings":"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","names":["_a","_b","SwitchBox_default"]}

package/dist/{chunk-LTE7PW7F.cjs → chunk-6UORUDZV.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkYCCBMAN2cjs = require('./chunk-YCCBMAN2.cjs');
+var _chunkOED4DYBDcjs = require('./chunk-OED4DYBD.cjs');
 
 
 
@@ -41,6 +41,7 @@ var Radios = (_a) => {
     "options"
   ]);
   const {
+    ariaLabel,
     disabled,
     errorMessage,
     field: { onBlur, onChange, ref },
@@ -49,7 +50,7 @@ var Radios = (_a) => {
     required,
     defaultValue,
     testId
-  } = _chunkYCCBMAN2cjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
+  } = _chunkOED4DYBDcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
     name
   }, uniformFieldProps));
   const variants = radiosVariants();
@@ -66,6 +67,7 @@ var Radios = (_a) => {
     _radio.RadioGroup,
     {
       ref,
+      "aria-label": ariaLabel,
       classNames,
       "data-invalid": invalid,
       "data-required": required,
@@ -113,4 +115,4 @@ var Radios_default2 = Radios_default;
 
 
 exports.Radios_default = Radios_default; exports.Radios_default2 = Radios_default2;
-//# sourceMappingURL=chunk-LTE7PW7F.cjs.map
+//# sourceMappingURL=chunk-6UORUDZV.cjs.map

package/dist/chunk-6UORUDZV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6UORUDZV.cjs","../src/Radios/Radios.tsx","../src/Radios/index.ts"],"names":["_a","_b","Radios_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6UORUDZV.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n  Radio as HeroRadio,\n  RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radiosVariants = tv({\n  slots: {\n    // Needs group for group-data condition\n    base: 'group gap-0',\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',\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 radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\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 RadiosProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\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: RadioOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref },\n    invalid,\n    label,\n    required,\n    defaultValue,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // classNames from slots\n  const variants = radiosVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassNames = {\n    base: classNames.itemBase,\n    control: classNames.itemControl,\n    description: classNames.itemDescription,\n    label: classNames.itemLabel,\n    labelWrapper: classNames.itemLabelWrapper,\n    wrapper: classNames.itemWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\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 | undefined}\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            <HeroRadio\n              key={option.value}\n              classNames={itemClassNames}\n              data-testid={optionTestId}\n              isDisabled={!!disabled || option.disabled}\n              onChange={onChange}\n              value={option.value}\n            >\n              {option.label ?? option.value}\n            </HeroRadio>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"]}

package/dist/{chunk-XMCL3F4W.js → chunk-7TUWJWLN.js}

@@ -1,6 +1,6 @@
 import {
   useUniformField
-} from "./chunk-7FOSZV75.js";
+} from "./chunk-4KEI3VRK.js";
 import {
   __objRest,
   __spreadProps,
@@ -46,6 +46,7 @@ var Switch = (_a) => {
   ]);
   var _a2;
   const {
+    ariaLabel,
     defaultValue,
     disabled,
     errorMessage,
@@ -88,6 +89,7 @@ var Switch = (_a) => {
       HeroSwitch,
       {
         ref: visualSwitchRef,
+        "aria-label": ariaLabel,
         classNames,
         "data-invalid": invalid,
         "data-required": required,
@@ -126,4 +128,4 @@ export {
   Switch_default,
   Switch_default2
 };
-//# sourceMappingURL=chunk-XMCL3F4W.js.map
+//# sourceMappingURL=chunk-7TUWJWLN.js.map

package/dist/chunk-7TUWJWLN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Switch/Switch.tsx","../src/Switch/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { SwitchProps as HeroSwitchProps } from '@heroui/switch';\nimport type { ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { Switch as HeroSwitch } from '@heroui/switch';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const switchVariants = tv({\n  slots: {\n    base: '',\n    endContent: '',\n    errorMessage: 'ml-1 mt-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-sm text-foreground subpixel-antialiased 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    outerWrapper: 'place-content-center',\n    startContent: '',\n    thumb: '',\n    thumbIcon: '',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof switchVariants>;\ntype ClassName = TVClassName<typeof switchVariants>;\n\nexport interface SwitchProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** whether the select should be disabled */\n  disabled?: boolean;\n  /** Icon to be displayed at the end of the switch (when enabled) */\n  endContent?: ReactNode;\n  /** component displayed next to the switch */\n  label?: ReactNode;\n  /** name the field is registered under */\n  name: string;\n  /* Size of the switch */\n  size?: 'sm' | 'md' | 'lg';\n  /** Icon to be displayed at the start of the switch (when disabled) */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Icon to be displayed inside the thumb */\n  thumbIcon?: HeroSwitchProps['thumbIcon'];\n}\n\n/**\n *  Switch component based on [HeroUI Switch](https://www.heroui.com//docs/components/switch)\n */\nconst Switch = ({\n  className = undefined,\n  endContent = undefined,\n  name,\n  size = undefined,\n  startContent = undefined,\n  thumbIcon = undefined,\n  ...uniformFieldProps\n}: SwitchProps) => {\n  const {\n    ariaLabel,\n    defaultValue,\n    disabled,\n    errorMessage,\n    field,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Ref for the visual switch to forward focus\n  const visualSwitchRef = useRef<HTMLInputElement>(null);\n\n  // classNames from slots\n  const variants = switchVariants();\n  const classNames = variantsToClassNames(variants, className, 'outerWrapper');\n\n  return (\n    <div className={classNames.outerWrapper}>\n      {/* Visually hidden input for form accessibility and focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={typeof label === 'string' ? label : name}\n          checked={!!field.value}\n          name={name}\n          onBlur={onBlur}\n          type=\"checkbox\"\n          onChange={(e) => {\n            onChange(e.target.checked);\n          }}\n          onFocus={() => {\n            // When RHF focuses this hidden input (e.g., on validation error),\n            // forward focus to the visual switch to show focus ring\n            visualSwitchRef.current?.focus();\n          }}\n        />\n      </VisuallyHidden>\n      {/* Visual HeroSwitch component */}\n      <HeroSwitch\n        ref={visualSwitchRef}\n        aria-label={ariaLabel}\n        classNames={classNames}\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n        defaultSelected={!!defaultValue}\n        endContent={endContent}\n        isDisabled={disabled}\n        isSelected={!!field.value}\n        name={`${name}_switch`}\n        onValueChange={onChange}\n        size={size}\n        startContent={startContent}\n        thumbIcon={thumbIcon}\n      >\n        {label}\n      </HeroSwitch>\n      {invalid ? (\n        <div\n          {...getHelperWrapperProps()}\n          className={cn(\n            getHelperWrapperProps()?.className,\n            // force helper to be visible (for some reason it's hidden by default) and remove margin\n            'ml-0 block',\n          )}\n        >\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Switch;\n","import Switch from './Switch';\n\nexport type { SwitchProps } from './Switch';\n\nexport { Switch };\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;AAIA,SAAS,cAAc;AAEvB,SAAS,UAAU,kBAAkB;AACrC,SAAS,sBAAsB;AAE/B,SAAS,IAAI,IAAI,4BAA4B;AAuFzC,SAGI,KAHJ;AAnFG,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,cAAc;AAAA;AAAA;AAAA,IAGd,OACE;AAAA,IACF,cAAc;AAAA,IACd,cAAc;AAAA,IACd,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AACF,CAAC;AA+BD,IAAM,SAAS,CAAC,OAQG;AARH,eACd;AAAA,gBAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,EAjEd,IA2DgB,IAOX,8BAPW,IAOX;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAjEF,MAAAA;AAoEE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AAAA,IAClB;AAAA,KACG,kBACJ;AAGD,QAAM,kBAAkB,OAAyB,IAAI;AAGrD,QAAM,WAAW,eAAe;AAChC,QAAM,aAAa,qBAAqB,UAAU,WAAW,cAAc;AAE3E,SACE,qBAAC,SAAI,WAAW,WAAW,cAEzB;AAAA,wBAAC,kBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAY,OAAO,UAAU,WAAW,QAAQ;AAAA,QAChD,SAAS,CAAC,CAAC,MAAM;AAAA,QACjB;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,OAAO;AAAA,QAC3B;AAAA,QACA,SAAS,MAAM;AA7GzB,cAAAA;AAgHY,WAAAA,MAAA,gBAAgB,YAAhB,gBAAAA,IAAyB;AAAA,QAC3B;AAAA;AAAA,IACF,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,cAAY;AAAA,QACZ;AAAA,QACA,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,eAAa;AAAA,QACb,iBAAiB,CAAC,CAAC;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,QACZ,YAAY,CAAC,CAAC,MAAM;AAAA,QACpB,MAAM,GAAG,IAAI;AAAA,QACb,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACC,UACC;AAAA,MAAC;AAAA,uCACK,sBAAsB,IAD3B;AAAA,QAEC,WAAW;AAAA,WACTA,MAAA,sBAAsB,MAAtB,gBAAAA,IAAyB;AAAA;AAAA,UAEzB;AAAA,QACF;AAAA,QAEA,8BAAC,wCAAQ,qBAAqB,IAA7B,EAAiC,yBAAa;AAAA;AAAA,IACjD,IACE;AAAA,KACN;AAEJ;AAEA,IAAO,iBAAQ;;;AClJf,IAAOC,kBAAQ;","names":["_a","Switch_default"]}

package/dist/chunk-7WBYC3BC.js

@@ -0,0 +1,149 @@
+import {
+  useUniformField
+} from "./chunk-4KEI3VRK.js";
+import {
+  FieldValidationError_default
+} from "./chunk-ELYGQTXB.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-K2V4ULA2.js";
+
+// src/FieldCard/FieldCard.tsx
+import { cn as cn2, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+
+// src/FieldCard/subcomponents/FieldCardValidationError.tsx
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion
+} from "@fuf-stack/pixel-motion";
+import { cn } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+var FieldCardValidationError = ({
+  className = void 0,
+  name
+}) => {
+  var _a;
+  const {
+    error,
+    getErrorMessageProps,
+    getHelperWrapperProps,
+    invalid,
+    testId
+  } = useUniformField({
+    name
+  });
+  const disableAnimation = useReducedMotion();
+  const hasErrors = invalid && (error == null ? void 0 : error._errors);
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: !disableAnimation, children: hasErrors ? /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      exit: disableAnimation ? void 0 : { opacity: 0, height: 0 },
+      initial: disableAnimation ? false : { height: 0, opacity: 0 },
+      style: { overflow: "hidden" },
+      transition: { duration: 0.2, ease: "circOut" },
+      animate: disableAnimation ? void 0 : { opacity: 1, height: "auto" },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        __spreadProps(__spreadValues({}, getHelperWrapperProps()), {
+          className: cn((_a = getHelperWrapperProps()) == null ? void 0 : _a.className, className),
+          children: /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx(
+            FieldValidationError_default,
+            {
+              error: error._errors,
+              testId
+            }
+          ) }))
+        })
+      )
+    },
+    "field-card-errors"
+  ) : null });
+};
+var FieldCardValidationError_default = FieldCardValidationError;
+
+// src/FieldCard/FieldCard.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var fieldCardVariants = tv({
+  slots: {
+    /** base class for the field card wrapper */
+    base: [
+      // base styles
+      "overflow-hidden rounded-small border bg-content1"
+    ],
+    /** class for the label/header */
+    label: [
+      // override HeroUI label positioning and display
+      "pointer-events-auto! static! z-auto! block! w-full!",
+      // reset any transforms or translations
+      "translate-x-0! translate-y-0! transform-none!",
+      // card header styling - use text-medium (16px) for proper header size
+      "rounded-t-small border-b p-3 font-semibold text-medium"
+    ],
+    /** class for the content */
+    content: ["p-3"],
+    /** class for the error footer wrapper */
+    errorFooter: [
+      "border-t",
+      // force helper to be visible and add padding
+      "block px-3 py-2"
+    ]
+  },
+  variants: {
+    invalid: {
+      true: {
+        base: "border-danger",
+        label: "border-danger text-danger",
+        errorFooter: "border-danger"
+      },
+      false: {
+        base: "border-divider",
+        label: "border-divider text-foreground",
+        errorFooter: "border-divider"
+      }
+    }
+  },
+  defaultVariants: {
+    invalid: false
+  }
+});
+var FieldCard = (_a) => {
+  var _b = _a, {
+    children,
+    className: _className = void 0,
+    name
+  } = _b, uniformFieldProps = __objRest(_b, [
+    "children",
+    "className",
+    "name"
+  ]);
+  var _a2;
+  const { error, getLabelProps, invalid, label } = useUniformField(__spreadValues({
+    name
+  }, uniformFieldProps));
+  const hasErrors = invalid && (error == null ? void 0 : error._errors);
+  const variants = fieldCardVariants({ invalid: hasErrors });
+  const className = variantsToClassNames(variants, _className, "base");
+  return /* @__PURE__ */ jsxs("div", { className: className.base, children: [
+    label ? /* @__PURE__ */ jsx2(
+      "div",
+      __spreadProps(__spreadValues({}, getLabelProps()), {
+        "aria-level": 3,
+        className: cn2((_a2 = getLabelProps()) == null ? void 0 : _a2.className, className.label),
+        role: "heading",
+        children: label
+      })
+    ) : null,
+    /* @__PURE__ */ jsx2("div", { className: className.content, children }),
+    /* @__PURE__ */ jsx2(FieldCardValidationError_default, { className: className.errorFooter, name })
+  ] });
+};
+var FieldCard_default = FieldCard;
+
+export {
+  fieldCardVariants,
+  FieldCard_default
+};
+//# sourceMappingURL=chunk-7WBYC3BC.js.map

package/dist/chunk-7WBYC3BC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FieldCard/FieldCard.tsx","../src/FieldCard/subcomponents/FieldCardValidationError.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\n\nexport const fieldCardVariants = tv({\n  slots: {\n    /** base class for the field card wrapper */\n    base: [\n      // base styles\n      'overflow-hidden rounded-small border bg-content1',\n    ],\n    /** class for the label/header */\n    label: [\n      // override HeroUI label positioning and display\n      'pointer-events-auto! static! z-auto! block! w-full!',\n      // reset any transforms or translations\n      'translate-x-0! translate-y-0! transform-none!',\n      // card header styling - use text-medium (16px) for proper header size\n      'rounded-t-small border-b p-3 font-semibold text-medium',\n    ],\n    /** class for the content */\n    content: ['p-3'],\n    /** class for the error footer wrapper */\n    errorFooter: [\n      'border-t',\n      // force helper to be visible and add padding\n      'block px-3 py-2',\n    ],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger',\n        label: 'border-danger text-danger',\n        errorFooter: 'border-danger',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\n      },\n    },\n  },\n  defaultVariants: {\n    invalid: false,\n  },\n});\n\nexport interface FieldCardProps {\n  /** Content to render inside the card */\n  children: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** Label content for the card header */\n  label: ReactNode;\n  /** Field name for validation */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * FieldCard component - A card-styled container with label header and error footer\n *\n * Displays form field content in a card layout with:\n * - Label/title in the header\n * - Content in the body\n * - Validation errors in the footer\n * - Danger outline when validation errors exist\n */\nconst FieldCard = ({\n  children,\n  className: _className = undefined,\n  name,\n  ...uniformFieldProps\n}: FieldCardProps) => {\n  const { error, getLabelProps, invalid, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: hasErrors });\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <div className={className.base}>\n      {/* card header with label */}\n      {label ? (\n        <div\n          {...getLabelProps()}\n          aria-level={3}\n          className={cn(getLabelProps()?.className, className.label)}\n          role=\"heading\"\n        >\n          {label}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors */}\n      <FieldCardValidationError className={className.errorFooter} name={name} />\n    </div>\n  );\n};\n\nexport default FieldCard;\n","import {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: string;\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders validation errors in the footer of a FieldCard component.\n *\n * This component handles displaying field-level validation errors with proper\n * accessibility attributes and animates them in/out using Framer Motion.\n */\nconst FieldCardValidationError = ({\n  className = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\n  const {\n    error,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    testId,\n  } = useUniformField({\n    name,\n  });\n\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  return (\n    <AnimatePresence initial={!disableAnimation}>\n      {hasErrors ? (\n        <motion.div\n          key=\"field-card-errors\"\n          exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n          initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n          style={{ overflow: 'hidden' }}\n          transition={{ duration: 0.2, ease: 'circOut' }}\n          animate={\n            disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n          }\n        >\n          <div\n            {...getHelperWrapperProps()}\n            className={cn(getHelperWrapperProps()?.className, className)}\n          >\n            <div {...getErrorMessageProps()}>\n              <FieldValidationError\n                // @ts-expect-error - error._errors exists but not typed\n                error={error._errors}\n                testId={testId}\n              />\n            </div>\n          </div>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldCardValidationError;\n"],"mappings":";;;;;;;;;;;;;AAEA,SAAS,MAAAA,KAAI,IAAI,4BAA4B;;;ACF7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAwDL;AAtCd,IAAM,2BAA2B,CAAC;AAAA,EAChC,YAAY;AAAA,EACZ;AACF,MAAqC;AA1BrC;AA2BE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AAAA,IAClB;AAAA,EACF,CAAC;AAGD,QAAM,mBAAmB,iBAAiB;AAG1C,QAAM,YAAY,YAAW,+BAAO;AAEpC,SACE,oBAAC,mBAAgB,SAAS,CAAC,kBACxB,sBACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MAEC,MAAM,mBAAmB,SAAY,EAAE,SAAS,GAAG,QAAQ,EAAE;AAAA,MAC7D,SAAS,mBAAmB,QAAQ,EAAE,QAAQ,GAAG,SAAS,EAAE;AAAA,MAC5D,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU;AAAA,MAC7C,SACE,mBAAmB,SAAY,EAAE,SAAS,GAAG,QAAQ,OAAO;AAAA,MAG9D;AAAA,QAAC;AAAA,yCACK,sBAAsB,IAD3B;AAAA,UAEC,WAAW,IAAG,2BAAsB,MAAtB,mBAAyB,WAAW,SAAS;AAAA,UAE3D,8BAAC,wCAAQ,qBAAqB,IAA7B,EACC;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM;AAAA,cACb;AAAA;AAAA,UACF,IACF;AAAA;AAAA,MACF;AAAA;AAAA,IApBI;AAAA,EAqBN,IACE,MACN;AAEJ;AAEA,IAAO,mCAAQ;;;ADkBX,SAGI,OAAAC,MAHJ;AArFG,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,MAEJ;AAAA,IACF;AAAA;AAAA,IAEA,OAAO;AAAA;AAAA,MAEL;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,IACF;AAAA;AAAA,IAEA,SAAS,CAAC,KAAK;AAAA;AAAA,IAEf,aAAa;AAAA,MACX;AAAA;AAAA,MAEA;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AAwBD,IAAM,YAAY,CAAC,OAKG;AALH,eACjB;AAAA;AAAA,IACA,WAAW,aAAa;AAAA,IACxB;AAAA,EA5EF,IAyEmB,IAId,8BAJc,IAId;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AA5EF,MAAAC;AA+EE,QAAM,EAAE,OAAO,eAAe,SAAS,MAAM,IAAI,gBAAgB;AAAA,IAC/D;AAAA,KACG,kBACJ;AAGD,QAAM,YAAY,YAAW,+BAAO;AAGpC,QAAM,WAAW,kBAAkB,EAAE,SAAS,UAAU,CAAC;AACzD,QAAM,YAAY,qBAAqB,UAAU,YAAY,MAAM;AAEnE,SACE,qBAAC,SAAI,WAAW,UAAU,MAEvB;AAAA,YACC,gBAAAD;AAAA,MAAC;AAAA,uCACK,cAAc,IADnB;AAAA,QAEC,cAAY;AAAA,QACZ,WAAWE,KAAGD,MAAA,cAAc,MAAd,gBAAAA,IAAiB,WAAW,UAAU,KAAK;AAAA,QACzD,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH,IACE;AAAA,IAGJ,gBAAAD,KAAC,SAAI,WAAW,UAAU,SAAU,UAAS;AAAA,IAG7C,gBAAAA,KAAC,oCAAyB,WAAW,UAAU,aAAa,MAAY;AAAA,KAC1E;AAEJ;AAEA,IAAO,oBAAQ;","names":["cn","jsx","_a","cn"]}

package/dist/{chunk-DQAZSXD6.js → chunk-BUFKWZNC.js}

@@ -1,6 +1,6 @@
 import {
   useUniformField
-} from "./chunk-7FOSZV75.js";
+} from "./chunk-4KEI3VRK.js";
 import {
   useFormContext
 } from "./chunk-ZZW7JZ2U.js";
@@ -100,4 +100,4 @@ var useUniformFieldArray = ({
 export {
   useUniformFieldArray
 };
-//# sourceMappingURL=chunk-DQAZSXD6.js.map
+//# sourceMappingURL=chunk-BUFKWZNC.js.map

package/dist/chunk-BUFKWZNC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useUniformFieldArray/useUniformFieldArray.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ArrayPath, FieldValues, Path } from 'react-hook-form';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { useFieldArray as useRHFFieldArray } from 'react-hook-form';\n\nimport { useReducedMotion } from '@fuf-stack/pixel-motion';\n\nimport { flatArrayKey } from '../../helpers';\nimport { useFormContext } from '../useFormContext';\nimport { useUniformField } from '../useUniformField';\n\nexport interface UseUniformFieldArrayProps<\n  TFieldValues extends FieldValues = FieldValues,\n> {\n  /** Field name for the array */\n  name: ArrayPath<TFieldValues>;\n  /** Whether this is a flat array (array of primitives) */\n  flat?: boolean;\n  /** Initial value for new array elements */\n  elementInitialValue?: unknown;\n  /** Whether the last element cannot be removed (always maintain at least one element) */\n  lastElementNotRemovable?: boolean;\n  /** Disable the field */\n  disabled?: boolean;\n  /** Optional explicit test id used to build stable test ids */\n  testId?: string;\n  /** Optional label content */\n  label?: ReactNode;\n}\n\n/**\n * Enhanced useFieldArray hook with initialization and animation logic.\n * Based on React Hook Form's useFieldArray with additional features:\n * - Automatic initialization when lastElementNotRemovable is set\n * - Animation control (disabled during initialization)\n * - Support for flat arrays (arrays of primitives)\n *\n * Note: Automatic validation triggering on length change is disabled to prevent\n * triggering form-wide validation. Array validation still runs on form submission.\n *\n * @see https://react-hook-form.com/docs/usefieldarray\n */\nexport const useUniformFieldArray = <\n  TFieldValues extends FieldValues = FieldValues,\n>({\n  name,\n  flat = false,\n  elementInitialValue: _elementInitialValue = null,\n  lastElementNotRemovable = false,\n  disabled,\n  testId: explicitTestId,\n  label,\n}: UseUniformFieldArrayProps<TFieldValues>) => {\n  // Get uniform field state and utilities\n  const uniformField = useUniformField<TFieldValues>({\n    name: name as Path<TFieldValues> & string,\n    disabled,\n    testId: explicitTestId,\n    label,\n  });\n\n  const { control } = uniformField;\n\n  const { fields, append, remove, insert, move } = useRHFFieldArray({\n    control,\n    name,\n  });\n\n  const { trigger, setValue } = useFormContext<TFieldValues>();\n\n  // Determine if initialization is needed (initially or after reset).\n  // This flag automatically handles both scenarios:\n  // - Initial mount: fields.length starts at 0\n  // - Form reset: fields.length becomes 0 again\n  // Additional initialization conditions can be added here later (e.g., minElements > 0)\n  // Using useMemo ensures this value is properly tracked by React and effects can depend on it\n  const needsInitialize = useMemo(() => {\n    return lastElementNotRemovable && fields.length === 0;\n  }, [lastElementNotRemovable, fields.length]);\n\n  // Track whether initialization has completed. Initialized contextually:\n  // - If initialization IS needed (needsInitialize = true): starts as false, set to true after init\n  // - If initialization is NOT needed (needsInitialize = false): starts as true (already initialized)\n  // This ref is used to:\n  // 1. Skip validation during initialization/re-initialization\n  // 2. Gate animation enabling until after initialization\n  // 3. Gate motion preference effect until after initialization\n  const hasInitialized = useRef(!needsInitialize);\n\n  // Reset initialization flag when needsInitialize changes to true.\n  // This handles form reset: when fields become empty (needsInitialize becomes true),\n  // hasInitialized is reset to false, triggering re-initialization in the effect below.\n  useEffect(() => {\n    if (needsInitialize) {\n      hasInitialized.current = false;\n    }\n  }, [needsInitialize]);\n\n  // Validate array-level constraints (min/max items) when length changes.\n  // Skip validation during initialization/re-initialization to avoid showing errors prematurely.\n  useEffect(() => {\n    if (hasInitialized.current) {\n      setTimeout(() => {\n        // Trigger validation so min/max errors appear instantly when user adds/removes items\n        trigger(name as Path<TFieldValues>);\n      }, 200);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [fields.length]);\n\n  // Animation control: Start with animations disabled to prevent animating in initial elements.\n  // Will be enabled after initialization completes (unless user prefers reduced motion).\n  const [disableAnimation, setDisableAnimation] = useState(true);\n\n  // Respond to user's motion preference changes (after initialization).\n  // During initialization, animations stay disabled regardless of preference.\n  const prefersReducedMotion = useReducedMotion();\n  useEffect(() => {\n    if (hasInitialized.current) {\n      setDisableAnimation(!!prefersReducedMotion);\n    }\n  }, [prefersReducedMotion]);\n\n  // Prepare initial element value based on mode\n  // - flat=true: arrays of primitives → object with flatArrayKey and null value by default\n  // - flat=false: arrays of objects → empty object by default\n  const elementInitialValue = useMemo(() => {\n    return flat\n      ? { [flatArrayKey]: _elementInitialValue ?? null }\n      : (_elementInitialValue ?? {});\n  }, [flat, _elementInitialValue]);\n\n  // Initialization/Re-initialization: Add initial element when needed.\n  // This handles both initial mount and form reset scenarios by reacting to needsInitialize.\n  // CRITICAL: This effect MUST be the LAST hook in this component.\n  // It sets hasInitialized.current = true, which acts as a gate for other effects.\n  // If this runs before other effects, hasInitialized will be true during their first run,\n  // causing them to execute logic meant only for post-initialization (e.g., validation,\n  // animation enabling). By placing this last, all other effects run first with\n  // hasInitialized = false, allowing them to skip initialization-phase logic.\n  useEffect(\n    () => {\n      if (needsInitialize) {\n        // use setValue instead of append to avoid focusing the added element\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        setValue(name as Path<TFieldValues>, [elementInitialValue] as any, {\n          shouldDirty: false,\n          shouldTouch: false,\n        });\n\n        // Mark initialization as complete\n        hasInitialized.current = true;\n\n        // Enable animations after a brief delay (unless user prefers reduced motion or animations are already enabled).\n        // This only runs on initial mount when animations start disabled.\n        // On reset, disableAnimation is typically false, so this setTimeout won't run and animations stay enabled.\n        if (!prefersReducedMotion && disableAnimation) {\n          setTimeout(() => {\n            setDisableAnimation(false);\n          }, 1);\n        }\n      }\n    },\n    // Run when needsInitialize changes (initial mount or reset)\n    // needsInitialize is memoized based on fields.length and lastElementNotRemovable\n    // Other dependencies are intentionally omitted:\n    // - append, setValue, trigger, setDisableAnimation are stable refs/functions\n    // - elementInitialValue, name, flat, prefersReducedMotion, disableAnimation are props/stable values\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [needsInitialize],\n  );\n\n  return {\n    // Field array methods and state\n    fields,\n    append,\n    remove,\n    insert,\n    move,\n    disableAnimation,\n    elementInitialValue,\n    // Uniform field state and utilities (spread all)\n    ...uniformField,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;AAGA,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AACrD,SAAS,iBAAiB,wBAAwB;AAElD,SAAS,wBAAwB;AAqC1B,IAAM,uBAAuB,CAElC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,qBAAqB,uBAAuB;AAAA,EAC5C,0BAA0B;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAA+C;AAE7C,QAAM,eAAe,gBAA8B;AAAA,IACjD;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACF,CAAC;AAED,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,EAAE,QAAQ,QAAQ,QAAQ,QAAQ,KAAK,IAAI,iBAAiB;AAAA,IAChE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,SAAS,SAAS,IAAI,eAA6B;AAQ3D,QAAM,kBAAkB,QAAQ,MAAM;AACpC,WAAO,2BAA2B,OAAO,WAAW;AAAA,EACtD,GAAG,CAAC,yBAAyB,OAAO,MAAM,CAAC;AAS3C,QAAM,iBAAiB,OAAO,CAAC,eAAe;AAK9C,YAAU,MAAM;AACd,QAAI,iBAAiB;AACnB,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAIpB,YAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,iBAAW,MAAM;AAEf,gBAAQ,IAA0B;AAAA,MACpC,GAAG,GAAG;AAAA,IACR;AAAA,EAEF,GAAG,CAAC,OAAO,MAAM,CAAC;AAIlB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,IAAI;AAI7D,QAAM,uBAAuB,iBAAiB;AAC9C,YAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,0BAAoB,CAAC,CAAC,oBAAoB;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AAKzB,QAAM,sBAAsB,QAAQ,MAAM;AACxC,WAAO,OACH,EAAE,CAAC,YAAY,GAAG,sDAAwB,KAAK,IAC9C,sDAAwB,CAAC;AAAA,EAChC,GAAG,CAAC,MAAM,oBAAoB,CAAC;AAU/B;AAAA,IACE,MAAM;AACJ,UAAI,iBAAiB;AAGnB,iBAAS,MAA4B,CAAC,mBAAmB,GAAU;AAAA,UACjE,aAAa;AAAA,UACb,aAAa;AAAA,QACf,CAAC;AAGD,uBAAe,UAAU;AAKzB,YAAI,CAAC,wBAAwB,kBAAkB;AAC7C,qBAAW,MAAM;AACf,gCAAoB,KAAK;AAAA,UAC3B,GAAG,CAAC;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,CAAC,eAAe;AAAA,EAClB;AAEA,SAAO;AAAA;AAAA,IAEL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEG;AAEP;","names":[]}

package/dist/{chunk-A3PYIWG2.js → chunk-BZ2PD2JG.js}

@@ -46,4 +46,4 @@ export {
   SubmitButton_default,
   SubmitButton_default2
 };
-//# sourceMappingURL=chunk-A3PYIWG2.js.map
+//# sourceMappingURL=chunk-BZ2PD2JG.js.map

package/dist/chunk-BZ2PD2JG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels';\nimport type { ReactNode } from 'react';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../hooks/useFormContext';\n\nexport interface SubmitButtonProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** color of the submit button */\n  color?: ButtonProps['color'];\n  /** icon of the submit button */\n  icon?: ButtonProps['icon'];\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** size of the submit button */\n  size?: ButtonProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n  ariaLabel = 'Submit form',\n  children = 'Submit',\n  className = undefined,\n  color = 'success',\n  icon = undefined,\n  loading = false,\n  size = 'md',\n  testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n  const {\n    formState: { isSubmitting },\n    triggerSubmit,\n  } = useFormContext();\n\n  return (\n    <Button\n      ariaLabel={ariaLabel}\n      className={cn(className)}\n      color={color}\n      disabled={isSubmitting}\n      icon={icon}\n      loading={loading || isSubmitting}\n      // @ts-expect-error we use form context triggerSubmit\n      // here so that submit button also works in special\n      // scenarios (e.g. when used in modal)\n      onClick={triggerSubmit}\n      size={size}\n      testId={slugify(testId, { replaceDots: true })}\n      type=\"submit\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"],"mappings":";;;;;AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,cAAc;AA0CnB;AAhBJ,IAAM,eAAe,CAAC;AAAA,EACpB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AACX,MAAyB;AACvB,QAAM;AAAA,IACJ,WAAW,EAAE,aAAa;AAAA,IAC1B;AAAA,EACF,IAAI,eAAe;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MACvB;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,SAAS,WAAW;AAAA,MAIpB,SAAS;AAAA,MACT;AAAA,MACA,QAAQ,QAAQ,QAAQ,EAAE,aAAa,KAAK,CAAC;AAAA,MAC7C,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;AC5Df,IAAOA,wBAAQ;","names":["SubmitButton_default"]}

package/dist/{chunk-XC3C2W4M.cjs → chunk-CM2LLV5N.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkYCCBMAN2cjs = require('./chunk-YCCBMAN2.cjs');
+var _chunkOED4DYBDcjs = require('./chunk-OED4DYBD.cjs');
 
 
 var _chunkNHEZXA4Hcjs = require('./chunk-NHEZXA4H.cjs');
@@ -70,6 +70,7 @@ var Checkboxes = (_a) => {
   ]);
   var _a2;
   const {
+    ariaLabel,
     disabled,
     error: _error,
     field: { onChange, value: fieldValue, ref, onBlur },
@@ -77,7 +78,7 @@ var Checkboxes = (_a) => {
     label,
     required,
     testId
-  } = _chunkYCCBMAN2cjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
+  } = _chunkOED4DYBDcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
     name
   }, uniformFieldProps));
   const value = Array.isArray(fieldValue) ? fieldValue : [];
@@ -102,6 +103,7 @@ var Checkboxes = (_a) => {
     _checkbox.CheckboxGroup,
     {
       ref,
+      "aria-label": ariaLabel,
       classNames: heroCheckboxGroupClassNames,
       color: color === "info" ? "primary" : color,
       "data-invalid": invalid,
@@ -160,4 +162,4 @@ var Checkboxes_default2 = Checkboxes_default;
 
 
 exports.Checkboxes_default = Checkboxes_default; exports.Checkboxes_default2 = Checkboxes_default2;
-//# sourceMappingURL=chunk-XC3C2W4M.cjs.map
+//# sourceMappingURL=chunk-CM2LLV5N.cjs.map

package/dist/chunk-CM2LLV5N.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-CM2LLV5N.cjs","../src/Checkboxes/Checkboxes.tsx","../src/Checkboxes/index.ts"],"names":["_a","Checkboxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-CM2LLV5N.cjs","sourcesContent":[null,"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';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\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/useUniformField';\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  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\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  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<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    ariaLabel,\n    disabled,\n    error: _error,\n    field: { onChange, value: fieldValue, ref, onBlur },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Ensure value is always an array (checkboxes need arrays)\n  const value = Array.isArray(fieldValue) ? fieldValue : [];\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  // 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      aria-label={ariaLabel}\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      onChange={onChange}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      value={value}\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"]}

package/dist/{chunk-IZZTVGEW.js → chunk-FHYUMBE3.js}

@@ -1,6 +1,6 @@
 import {
   useUniformField
-} from "./chunk-7FOSZV75.js";
+} from "./chunk-4KEI3VRK.js";
 import {
   __objRest,
   __spreadValues
@@ -69,6 +69,7 @@ var RadioTabs = (_a) => {
     "variant"
   ]);
   const {
+    ariaLabel,
     disabled,
     errorMessage,
     field: { onBlur, onChange, ref, value },
@@ -128,6 +129,7 @@ var RadioTabs = (_a) => {
       HeroRadioGroup,
       {
         ref: visualRadioGroupRef,
+        "aria-label": ariaLabel,
         "data-invalid": invalid,
         "data-required": required,
         "data-testid": testId,
@@ -176,4 +178,4 @@ export {
   RadioTabs_default,
   RadioTabs_default2
 };
-//# sourceMappingURL=chunk-IZZTVGEW.js.map
+//# sourceMappingURL=chunk-FHYUMBE3.js.map

package/dist/chunk-FHYUMBE3.js.map

@@ -0,0 +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 { useRef } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { useUniformField } from '../hooks/useUniformField';\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',\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    isInvalid: {\n      true: {\n        tabWrapper: 'rounded-medium border-2 !border-danger',\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?: 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  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\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    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create a ref for the visual radio group to forward focus\n  const visualRadioGroupRef = useRef<HTMLDivElement>(null);\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({\n    fullWidth,\n    hasContent,\n    isInvalid: invalid,\n  });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <>\n      {/* Visually hidden input for React Hook Form focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          name={name}\n          onBlur={onBlur}\n          value={value ?? ''}\n          onChange={(e) => {\n            onChange(e.target.value);\n          }}\n          onFocus={() => {\n            // Forward focus to the first tab when RHF focuses this input\n            const firstTab = visualRadioGroupRef.current?.querySelector(\n              '[role=\"tab\"]',\n            ) as HTMLElement;\n            firstTab?.focus();\n          }}\n        />\n      </VisuallyHidden>\n\n      <HeroRadioGroup\n        ref={visualRadioGroupRef}\n        aria-label={ariaLabel}\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}_radiotabs`}\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};\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"]}