@fuf-stack/uniform 0.18.4 → 0.18.5

package/dist/{chunk-FNY55CAR.js → chunk-HHENF3BD.js}

@@ -1,9 +1,9 @@
 import {
   FieldCopyTestIdButton_default
-} from "./chunk-2CRY7VDQ.js";
+} from "./chunk-BQGN3JTU.js";
 import {
   FieldValidationError_default
-} from "./chunk-ASPOGQPS.js";
+} from "./chunk-UTFZRBBS.js";
 import {
   useFieldArray,
   useFormContext,
@@ -175,7 +175,8 @@ var FieldArrayElement = ({
     error && typeof error[index] !== "undefined" && /* @__PURE__ */ jsx4("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx4("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx4(
       FieldValidationError_default,
       {
-        error: (_a = error[Number(index)]) == null ? void 0 : _a._errors
+        error: (_a = error[Number(index)]) == null ? void 0 : _a._errors,
+        testId
       }
     ) })) }))
   ] });
@@ -365,7 +366,7 @@ var FieldArray = ({
             children: appendButtonText
           }
         ),
-        (error == null ? void 0 : error._errors) && /* @__PURE__ */ jsx6("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx6("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx6(FieldValidationError_default, { error: error == null ? void 0 : error._errors }) })) }))
+        (error == null ? void 0 : error._errors) && /* @__PURE__ */ jsx6("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx6("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx6(FieldValidationError_default, { error: error == null ? void 0 : error._errors, testId }) })) }))
       ]
     }
   ) });
@@ -379,4 +380,4 @@ export {
   FieldArray_default,
   FieldArray_default2
 };
-//# sourceMappingURL=chunk-FNY55CAR.js.map
+//# sourceMappingURL=chunk-HHENF3BD.js.map

package/dist/chunk-HHENF3BD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/ElementInsertAfterButton.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/index.ts"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { toNullishString } from '../helpers';\nimport { useFieldArray, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n  slots: {\n    appendButton: 'w-full',\n    elementWrapper: 'flex-grow',\n    insertAfterButton: 'text-xs font-medium',\n    label: '!pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block',\n    list: 'm-0 w-full list-none',\n    listItem: 'mb-4 flex w-full flex-row items-center',\n    removeButton: 'ml-1',\n    sortDragHandle: 'mr-2 text-base text-xl',\n  },\n});\n\n/**\n * FieldArray component based in [RHF useFieldArray](https://react-hook-form.com/docs/usefieldarray)\n */\nconst FieldArray = ({\n  appendButtonText = 'Add Element',\n  children,\n  className: _className = undefined,\n  duplicate = false,\n  elementInitialValue: _elementInitialValue = null,\n  insertAfter = false,\n  label: _label = undefined,\n  lastElementNotRemovable = false,\n  name,\n  sortable = false,\n  testId: _testId = undefined,\n}: FieldArrayProps) => {\n  // className from slots\n  const variants = fieldArrayVariants();\n  const className = variantsToClassNames(variants, _className, 'list');\n\n  const {\n    control,\n    debugMode,\n    getValues,\n    getFieldState,\n    trigger,\n    // watch\n  } = useFormContext();\n\n  const { fields, append, remove, insert, move } = useFieldArray({\n    control,\n    name,\n  });\n\n  const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n  // TODO: what about input props?\n  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n    useInput({\n      isInvalid: invalid,\n      isRequired: required,\n      errorMessage: JSON.stringify(error),\n      label: _label,\n      labelPlacement: 'inside',\n      placeholder: ' ',\n      classNames: { helperWrapper: 'block' },\n    });\n\n  // TODO: add info\n  const elementInitialValue = toNullishString(_elementInitialValue);\n\n  // When lastElementNotRemovable is set and the field array is empty,\n  // add an initial element to ensure there's always at least one visible element\n  if (lastElementNotRemovable && fields.length === 0) {\n    append(elementInitialValue);\n  }\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <SortContext sortable={sortable} move={move} fields={fields}>\n      <ul\n        className={className.list}\n        data-testid={testId}\n        /**\n         * TODO: this trigger causes the field array (not element)\n         * are shown immediately, but this will cause additional\n         * render cycles, not sure if we should do this...\n         */\n        onBlur={() => trigger(`${name}`)}\n      >\n        {/* field array label */}\n        {showLabel && (\n          <>\n            {label && (\n              // eslint-disable-next-line jsx-a11y/label-has-associated-control\n              <label\n                {...getLabelProps()}\n                className={cn(getLabelProps()?.className, className.label)}\n              >\n                {label}\n              </label>\n            )}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </>\n        )}\n\n        {fields.map((field, index) => {\n          const elementName = `${name}.${index}`;\n          const elementTestId = `${testId}${index}`;\n\n          // create methods for element\n          const elementMethods: FieldArrayElementMethods = {\n            append: () => append(elementInitialValue),\n            duplicate: () => {\n              const values = getValues(name);\n              insert(index + 1, values[index]);\n            },\n            insert: () => insert(index + 1, elementInitialValue),\n            remove: () => remove(index),\n          };\n\n          return (\n            <FieldArrayElement\n              arrayFieldName={name}\n              className={className}\n              fields={fields}\n              id={field.id}\n              index={index}\n              duplicate={duplicate}\n              insertAfter={insertAfter}\n              key={field.id}\n              lastNotDeletable={lastElementNotRemovable}\n              methods={elementMethods}\n              sortable={sortable}\n              testId={elementTestId}\n            >\n              {children({\n                index,\n                length: fields.length,\n                methods: elementMethods,\n                name: elementName,\n                testId: elementTestId,\n              })}\n            </FieldArrayElement>\n          );\n        })}\n\n        {/* append elements */}\n        <Button\n          className={className.appendButton}\n          disableAnimation\n          onClick={() => append(elementInitialValue)}\n          size=\"sm\"\n          testId={`${testId}_append_button`}\n        >\n          {appendButtonText}\n        </Button>\n\n        {/* top level field array errors */}\n        {/* @ts-expect-error rhf incompatibility */}\n        {error?._errors && (\n          <div {...getHelperWrapperProps()}>\n            <div {...getErrorMessageProps()}>\n              {/* @ts-expect-error rhf incompatibility */}\n              <FieldValidationError error={error?._errors} testId={testId} />\n            </div>\n          </div>\n        )}\n      </ul>\n    </SortContext>\n  );\n};\n\nexport default FieldArray;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext, useInput } from '../../hooks';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport ElementInsertAfterButton from './ElementInsertAfterButton';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport type FieldArrayElementMethods = {\n  /** Add new element at end */\n  append: () => void;\n  /** Clone current element */\n  duplicate: () => void;\n  /** Add new element after current */\n  insert: () => void;\n  /** Remove current element */\n  remove: () => void;\n};\n\ninterface FieldArrayElementProps extends FieldArrayFeatures {\n  /** Base field name for form context */\n  arrayFieldName: string;\n  /** Form elements to render inside array element */\n  children: React.ReactNode;\n  /** CSS class names for component parts */\n  className: {\n    /** Class of wrapper div inside the li that wraps the rendered element fields directly */\n    elementWrapper?: ClassValue;\n    /** Class for the li */\n    listItem?: ClassValue;\n    /** Class for the insert button between elements */\n    insertAfterButton?: ClassValue;\n    /** Class for the remove element button */\n    removeButton?: ClassValue;\n    /** Class for the drag handle when sorting enabled */\n    sortDragHandle?: ClassValue;\n  };\n  /** All fields in the form array */\n  fields: Record<'id', string>[];\n  /** Unique identifier for drag/drop */\n  id: string | number;\n  /** Field index in array */\n  index: number;\n  /** Prevent deletion of last remaining element */\n  lastNotDeletable?: boolean;\n  /** Field array operation methods */\n  methods: FieldArrayElementMethods;\n  /** HTML data-testid of the element */\n  testId?: string;\n}\n\n/**\n * Form array element component using react-hook-form with drag-drop sorting\n * and validation capabilities\n */\nconst FieldArrayElement = ({\n  arrayFieldName,\n  children,\n  className,\n  fields,\n  id,\n  index,\n  insertAfter = false,\n  lastNotDeletable = true,\n  methods,\n  sortable = false,\n  testId = undefined,\n}: FieldArrayElementProps) => {\n  const { getFieldState } = useFormContext();\n  const { error, invalid } = getFieldState(arrayFieldName, undefined);\n\n  // TODO: what about input props? and label props? Do we need a label?\n  const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n    classNames: { helperWrapper: 'block' },\n    errorMessage: JSON.stringify(error),\n    isInvalid: invalid,\n    labelPlacement: 'inside',\n    placeholder: ' ',\n  });\n\n  // Apply transform styles when sortable is enabled for smooth drag animations\n  // transform: handles the item's position during drag\n  // transition: controls the animation timing when dropping\n  const { setNodeRef, transform, transition } = useSortable({ id });\n  const sortingStyle = sortable\n    ? {\n        transform: CSS.Translate.toString(transform),\n        transition,\n      }\n    : undefined;\n\n  return (\n    <>\n      <li\n        className={cn(className.listItem)}\n        ref={setNodeRef}\n        style={sortingStyle}\n      >\n        {/** sorting drag handle */}\n        {sortable && (\n          <SortDragHandle\n            className={className.sortDragHandle}\n            id={id}\n            testId={`${testId}_sort_drag_handle`}\n          />\n        )}\n\n        {/** render element fields */}\n        <div\n          className={cn(className.elementWrapper)}\n          data-testid={`${testId}_element_wrapper`}\n        >\n          {children}\n        </div>\n\n        {/** remove element */}\n        {lastNotDeletable && fields.length === 1 ? null : (\n          <ElementRemoveButton\n            className={className.removeButton}\n            onClick={() => methods.remove()}\n            testId={`${testId}_remove_button`}\n          />\n        )}\n\n        {/** insertAfter feature when not last element */}\n        {insertAfter && index !== fields.length - 1 && (\n          <ElementInsertAfterButton\n            className={className.insertAfterButton}\n            onClick={() => methods.insert()}\n            testId={`${testId}_insert_after_button`}\n          />\n        )}\n      </li>\n\n      {/** element error */}\n      {error && typeof error[index] !== 'undefined' && (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>\n            <FieldValidationError\n              /* @ts-expect-error rhf incompatibility */\n              error={error[Number(index)]?._errors}\n              testId={testId as string}\n            />\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default FieldArrayElement;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementInsertAfterButtonProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** click handler */\n  onClick: () => void;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst ElementInsertAfterButton = ({\n  className = undefined,\n  onClick,\n  testId = undefined,\n}: ElementInsertAfterButtonProps) => {\n  return (\n    <Button\n      className={cn(className)}\n      color=\"success\"\n      icon={<FaPlus />}\n      onClick={onClick}\n      size=\"sm\"\n      testId={testId}\n      variant=\"light\"\n    />\n  );\n};\n\nexport default ElementInsertAfterButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** click handler */\n  onClick: () => void;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst ElementRemoveButton = ({\n  className = undefined,\n  onClick,\n  testId = undefined,\n}: ElementRemoveButtonProps) => {\n  return (\n    <Button\n      ariaLabel=\"remove element\"\n      className={cn(className)}\n      color=\"danger\"\n      icon={<FaTimes />}\n      onClick={onClick}\n      testId={testId}\n      variant=\"light\"\n    />\n  );\n};\n\nexport default ElementRemoveButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaGripVertical } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface SortDragHandleProps {\n  /** Optional CSS class name */\n  className?: ClassValue;\n  /** Unique identifier for sortable item */\n  id: string | number;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Drag handle component that integrates with dnd-kit sortable functionality.\n * Renders a vertical grip icon that can be used to reorder items.\n */\nconst SortDragHandle = ({\n  className = undefined,\n  id,\n  testId = undefined,\n}: SortDragHandleProps) => {\n  // Get dnd-kit sortable attributes and listeners\n  const { attributes, listeners } = useSortable({ id });\n\n  return (\n    <div\n      className={cn(className)}\n      data-testid={testId}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...attributes}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...listeners}\n    >\n      <FaGripVertical />\n    </div>\n  );\n};\n\nexport default SortDragHandle;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\ninterface SortContextProps {\n  /** child components */\n  children: ReactNode;\n  /** enable/disable sorting functionality */\n  sortable: boolean;\n  /** Array of objects containing unique IDs for sortable items */\n  fields: Record<'id', string>[];\n  /** react-hook-form's move function to update field array indices */\n  move: UseFieldArrayMove;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n  children,\n  sortable,\n  fields,\n  move,\n}: SortContextProps) => {\n  // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  // Early return if sorting is disabled\n  if (!sortable) {\n    return children;\n  }\n\n  /**\n   * Handles the end of a drag operation by updating field positions\n   * @param event - The drag end event containing active and over elements\n   */\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    // Only move if dropping over a different item\n    if (active.id !== over?.id) {\n      // Find the indices of the dragged item and drop target\n      const oldIndex = fields.findIndex((field) => field.id === active.id);\n      const newIndex = fields.findIndex((field) => field.id === over?.id);\n      // Update the field array order using react-hook-form's move function\n      move(oldIndex, newIndex);\n    }\n  };\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext\n        items={fields.map((field) => field.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        {children}\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default SortContext;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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","names":["cn","Button","useSortable","cn","cn","Button","jsx","cn","jsx","cn","jsx","useSortable","cn","jsx","Fragment","jsx","jsxs","cn","Button","FieldArray_default"]}

package/dist/{chunk-VZC5LLW4.cjs → chunk-JH4CPQHA.cjs}

@@ -3,10 +3,10 @@
 var _chunkEPYFZXEIcjs = require('./chunk-EPYFZXEI.cjs');
 
 
-var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
+var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
 
 
-var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
+var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
 
 
 var _chunkQQW2FHSCcjs = require('./chunk-QQW2FHSC.cjs');
@@ -70,14 +70,14 @@ var RadioGroup = ({
             "data-required": required,
             "data-testid": testId,
             defaultValue: getValues()[name],
-            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error }),
+            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGNYQC5IJcjs.FieldValidationError_default, { error, testId }),
             isDisabled,
             isInvalid: invalid,
             isRequired: required,
             label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { children: [
               label,
-              showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
+              showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
             ] }),
             name,
             orientation: inline ? "horizontal" : "vertical",
@@ -117,4 +117,4 @@ var RadioGroup_default2 = RadioGroup_default;
 
 
 exports.RadioGroup_default = RadioGroup_default; exports.RadioGroup_default2 = RadioGroup_default2;
-//# sourceMappingURL=chunk-VZC5LLW4.cjs.map
+//# sourceMappingURL=chunk-JH4CPQHA.cjs.map

package/dist/chunk-JH4CPQHA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JH4CPQHA.cjs","../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/index.ts"],"names":["RadioGroup_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JH4CPQHA.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup, Radio } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioGroupVariants>;\ntype ClassName = TVClassName<typeof radioGroupVariants>;\n\nexport interface RadioGroupOption {\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 RadioGroupProps 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: RadioGroupOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioGroup component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioGroup = ({\n  className = undefined,\n  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n}: RadioGroupProps): ReactElement => {\n  const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = radioGroupVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <Controller\n      control={control}\n      disabled={disabled}\n      name={name}\n      render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\n        const itemClassNames = {\n          base: classNames.itemBase,\n          control: classNames.itemControl,\n          description: classNames.itemDescription,\n          label: classNames.itemLabel,\n          labelWrapper: classNames.itemLabelWrapper,\n          wrapper: classNames.itemWrapper,\n        };\n\n        return (\n          <HeroRadioGroup\n            classNames={classNames}\n            // see HeroUI styles for group-data condition (data-invalid),\n            // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n            data-invalid={invalid}\n            data-required={required}\n            data-testid={testId}\n            defaultValue={getValues()[name]}\n            errorMessage={\n              error && <FieldValidationError error={error} testId={testId} />\n            }\n            isDisabled={isDisabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              showLabel && (\n                // eslint-disable-next-line jsx-a11y/label-has-associated-control\n                <label>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </label>\n              )\n            }\n            name={name}\n            orientation={inline ? 'horizontal' : 'vertical'}\n            onBlur={onBlur}\n            ref={ref}\n          >\n            {options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <Radio\n                    classNames={itemClassNames}\n                    data-testid={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    onChange={onChange}\n                    value={option.value}\n                  >\n                    {option.label ? option.label : option.value}\n                  </Radio>\n                );\n              }\n              return null;\n            })}\n          </HeroRadioGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default RadioGroup;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"]}

package/dist/{chunk-MKFKX5QX.cjs → chunk-JHVW42BW.cjs}

@@ -3,10 +3,10 @@
 var _chunkEPYFZXEIcjs = require('./chunk-EPYFZXEI.cjs');
 
 
-var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
+var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
 
 
-var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
+var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
 
 
 var _chunkQQW2FHSCcjs = require('./chunk-QQW2FHSC.cjs');
@@ -60,13 +60,13 @@ var Input = ({
             },
             "data-testid": testId,
             endContent,
-            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error }),
+            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGNYQC5IJcjs.FieldValidationError_default, { error, testId }),
             isDisabled,
             isInvalid: invalid,
             isRequired: required,
             label: showLabel && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
               label,
-              showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
+              showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
             ] }),
             labelPlacement: "outside",
             name,
@@ -94,4 +94,4 @@ var Input_default2 = Input_default;
 
 
 exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
-//# sourceMappingURL=chunk-MKFKX5QX.cjs.map
+//# sourceMappingURL=chunk-JHVW42BW.cjs.map

package/dist/chunk-JHVW42BW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JHVW42BW.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JHVW42BW.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n  /** CSS class name */\n  className?: string;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label (set to false to disable label) */\n  label?: string | false;\n  /** form field name */\n  name: string;\n  /** form field placeholder */\n  placeholder?: string;\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transformValue?: {\n    /** transforms the formValue of the field to the display value of the field */\n    displayValue: (value: string | number) => string | number;\n    /** transforms the displayValue of the field to the form value of the field */\n    formValue: (value: string) => string | number;\n  };\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className = undefined,\n  disabled = false,\n  endContent = undefined,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  startContent = undefined,\n  testId: _testId = undefined,\n  transformValue = undefined,\n  type = undefined,\n}: InputProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <Controller\n      control={control}\n      disabled={disabled}\n      name={name}\n      render={({\n        field: { disabled: isDisabled, onChange, onBlur, value = '', ref },\n      }) => {\n        /**\n         * Determines the display value for the input field:\n         * 1. If transformValue.displayValue is provided, applies the transform to the current value\n         *    (useful for formatting like adding currency symbols, date formatting, etc.)\n         * 2. Falls back to the raw value if no transform is provided\n         * 3. Ensures a defined value by using empty string as fallback (prevents uncontrolled input warnings)\n         *\n         * Examples:\n         * - With transform: value \"1000\" → displayValue \"$1,000\"\n         * - Without transform: value \"1000\" → displayValue \"1000\"\n         * - Undefined value: value undefined → displayValue \"\"\n         */\n        const displayValue = transformValue?.displayValue\n          ? transformValue.displayValue(value ?? '')\n          : (value ?? '');\n\n        /**\n         * Handles input value changes with special processing:\n         * 1. For number inputs:\n         *    - Preserves empty string (prevents NaN in the form state)\n         *    - Converts non-empty values to numbers\n         *    Example: \"\" → \"\" (empty stays empty)\n         *            \"42\" → 42 (converts to number)\n         *\n         * 2. For text inputs with transformValue.formValue:\n         *    - Applies custom transform before updating form state\n         *    - Useful for converting display format to storage format\n         *    Example: \"$1,000\" → \"1000\" (strips formatting)\n         *\n         * 3. For regular text inputs:\n         *    - Passes through the raw input value\n         *    Example: \"hello\" → \"hello\" (no transformation)\n         *\n         * @param e The input change event\n         */\n        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n          const inputValue = e.target.value;\n          if (type === 'number') {\n            onChange(inputValue === '' ? '' : Number(inputValue));\n          } else {\n            onChange(\n              transformValue?.formValue\n                ? transformValue.formValue(inputValue)\n                : inputValue,\n            );\n          }\n        };\n\n        return (\n          <HeroInput\n            className={cn(className)}\n            classNames={{\n              inputWrapper: 'group-data-[focus=true]:border-focus',\n            }}\n            data-testid={testId}\n            endContent={endContent}\n            errorMessage={\n              error && <FieldValidationError error={error} testId={testId} />\n            }\n            isDisabled={isDisabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              showLabel && (\n                <>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </>\n              )\n            }\n            labelPlacement=\"outside\"\n            name={name}\n            onBlur={onBlur}\n            onChange={handleChange}\n            placeholder={placeholder}\n            radius=\"sm\"\n            ref={ref}\n            startContent={startContent}\n            type={type}\n            // @ts-expect-error number is ok here\n            value={displayValue}\n            variant=\"bordered\"\n          />\n        );\n      }}\n    />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"]}

package/dist/{chunk-QXD6XP3Y.js → chunk-JS2D6XPO.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-AT2VVPRD.js";
 import {
   FieldCopyTestIdButton_default
-} from "./chunk-2CRY7VDQ.js";
+} from "./chunk-BQGN3JTU.js";
 import {
   FieldValidationError_default
-} from "./chunk-ASPOGQPS.js";
+} from "./chunk-UTFZRBBS.js";
 import {
   useFormContext
 } from "./chunk-NBAVP4ER.js";
@@ -70,7 +70,7 @@ var RadioGroup = ({
             "data-required": required,
             "data-testid": testId,
             defaultValue: getValues()[name],
-            errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error }),
+            errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }),
             isDisabled,
             isInvalid: invalid,
             isRequired: required,
@@ -117,4 +117,4 @@ export {
   RadioGroup_default,
   RadioGroup_default2
 };
-//# sourceMappingURL=chunk-QXD6XP3Y.js.map
+//# sourceMappingURL=chunk-JS2D6XPO.js.map

package/dist/{chunk-QXD6XP3Y.js.map → chunk-JS2D6XPO.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup, Radio } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioGroupVariants>;\ntype ClassName = TVClassName<typeof radioGroupVariants>;\n\nexport interface RadioGroupOption {\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 RadioGroupProps 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: RadioGroupOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioGroup component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioGroup = ({\n  className = undefined,\n  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n}: RadioGroupProps): ReactElement => {\n  const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = radioGroupVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <Controller\n      control={control}\n      disabled={disabled}\n      name={name}\n      render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\n        const itemClassNames = {\n          base: classNames.itemBase,\n          control: classNames.itemControl,\n          description: classNames.itemDescription,\n          label: classNames.itemLabel,\n          labelWrapper: classNames.itemLabelWrapper,\n          wrapper: classNames.itemWrapper,\n        };\n\n        return (\n          <HeroRadioGroup\n            classNames={classNames}\n            // see HeroUI styles for group-data condition (data-invalid),\n            // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n            data-invalid={invalid}\n            data-required={required}\n            data-testid={testId}\n            defaultValue={getValues()[name]}\n            errorMessage={error && <FieldValidationError error={error} />}\n            isDisabled={isDisabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              showLabel && (\n                // eslint-disable-next-line jsx-a11y/label-has-associated-control\n                <label>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </label>\n              )\n            }\n            name={name}\n            orientation={inline ? 'horizontal' : 'vertical'}\n            onBlur={onBlur}\n            ref={ref}\n          >\n            {options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <Radio\n                    classNames={itemClassNames}\n                    data-testid={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    onChange={onChange}\n                    value={option.value}\n                  >\n                    {option.label ? option.label : option.value}\n                  </Radio>\n                );\n              }\n              return null;\n            })}\n          </HeroRadioGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default RadioGroup;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;AAGA,SAAS,cAAc,gBAAgB,aAAa;AAEpD,SAAS,SAAS,IAAI,4BAA4B;AAwGf,cAOnB,YAPmB;AAjG5B,IAAM,qBAAqB,GAAG;AAAA,EACnC,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,aACE;AAAA;AAAA;AAAA;AAAA,IAGF,OACE;AAAA,IACF,SAAS;AAAA,EACX;AACF,CAAC;AAsCD,IAAM,aAAa,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ,UAAU;AACpB,MAAqC;AACnC,QAAM,EAAE,SAAS,WAAW,eAAe,UAAU,IAAI,eAAe;AAExE,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,QAAM,WAAW,mBAAmB;AACpC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,UAAU,YAAY,QAAQ,IAAI,EAAE,MAAM;AACtE,cAAM,iBAAiB;AAAA,UACrB,MAAM,WAAW;AAAA,UACjB,SAAS,WAAW;AAAA,UACpB,aAAa,WAAW;AAAA,UACxB,OAAO,WAAW;AAAA,UAClB,cAAc,WAAW;AAAA,UACzB,SAAS,WAAW;AAAA,QACtB;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAGA,gBAAc;AAAA,YACd,iBAAe;AAAA,YACf,eAAa;AAAA,YACb,cAAc,UAAU,EAAE,IAAI;AAAA,YAC9B,cAAc,SAAS,oBAAC,gCAAqB,OAAc;AAAA,YAC3D;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,OACE;AAAA,YAEE,qBAAC,WACE;AAAA;AAAA,cACA,wBACC,oBAAC,iCAAsB,QAAgB;AAAA,eAE3C;AAAA,YAGJ;AAAA,YACA,aAAa,SAAS,eAAe;AAAA,YACrC;AAAA,YACA;AAAA,YAEC,kBAAQ,IAAI,CAAC,WAAW;AACvB,kBAAI,WAAW,QAAQ;AACrB,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,YAAY;AAAA,oBACZ,eAAa;AAAA,sBACX,GAAG,MAAM,WAAW,OAAO,UAAU,OAAO,KAAK;AAAA,oBACnD;AAAA,oBACA,YAAY,cAAc,OAAO;AAAA,oBAEjC;AAAA,oBACA,OAAO,OAAO;AAAA,oBAEb,iBAAO,QAAQ,OAAO,QAAQ,OAAO;AAAA;AAAA,kBAJjC,OAAO;AAAA,gBAKd;AAAA,cAEJ;AACA,qBAAO;AAAA,YACT,CAAC;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;;;ACrJf,IAAOA,sBAAQ;","names":["RadioGroup_default"]}
+{"version":3,"sources":["../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup, Radio } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioGroupVariants>;\ntype ClassName = TVClassName<typeof radioGroupVariants>;\n\nexport interface RadioGroupOption {\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 RadioGroupProps 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: RadioGroupOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioGroup component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioGroup = ({\n  className = undefined,\n  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n}: RadioGroupProps): ReactElement => {\n  const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = radioGroupVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <Controller\n      control={control}\n      disabled={disabled}\n      name={name}\n      render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\n        const itemClassNames = {\n          base: classNames.itemBase,\n          control: classNames.itemControl,\n          description: classNames.itemDescription,\n          label: classNames.itemLabel,\n          labelWrapper: classNames.itemLabelWrapper,\n          wrapper: classNames.itemWrapper,\n        };\n\n        return (\n          <HeroRadioGroup\n            classNames={classNames}\n            // see HeroUI styles for group-data condition (data-invalid),\n            // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n            data-invalid={invalid}\n            data-required={required}\n            data-testid={testId}\n            defaultValue={getValues()[name]}\n            errorMessage={\n              error && <FieldValidationError error={error} testId={testId} />\n            }\n            isDisabled={isDisabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              showLabel && (\n                // eslint-disable-next-line jsx-a11y/label-has-associated-control\n                <label>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </label>\n              )\n            }\n            name={name}\n            orientation={inline ? 'horizontal' : 'vertical'}\n            onBlur={onBlur}\n            ref={ref}\n          >\n            {options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <Radio\n                    classNames={itemClassNames}\n                    data-testid={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    onChange={onChange}\n                    value={option.value}\n                  >\n                    {option.label ? option.label : option.value}\n                  </Radio>\n                );\n              }\n              return null;\n            })}\n          </HeroRadioGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default RadioGroup;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;AAGA,SAAS,cAAc,gBAAgB,aAAa;AAEpD,SAAS,SAAS,IAAI,4BAA4B;AAyG3B,cAQP,YARO;AAlGhB,IAAM,qBAAqB,GAAG;AAAA,EACnC,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,aACE;AAAA;AAAA;AAAA;AAAA,IAGF,OACE;AAAA,IACF,SAAS;AAAA,EACX;AACF,CAAC;AAsCD,IAAM,aAAa,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ,UAAU;AACpB,MAAqC;AACnC,QAAM,EAAE,SAAS,WAAW,eAAe,UAAU,IAAI,eAAe;AAExE,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,QAAM,WAAW,mBAAmB;AACpC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,UAAU,YAAY,QAAQ,IAAI,EAAE,MAAM;AACtE,cAAM,iBAAiB;AAAA,UACrB,MAAM,WAAW;AAAA,UACjB,SAAS,WAAW;AAAA,UACpB,aAAa,WAAW;AAAA,UACxB,OAAO,WAAW;AAAA,UAClB,cAAc,WAAW;AAAA,UACzB,SAAS,WAAW;AAAA,QACtB;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAGA,gBAAc;AAAA,YACd,iBAAe;AAAA,YACf,eAAa;AAAA,YACb,cAAc,UAAU,EAAE,IAAI;AAAA,YAC9B,cACE,SAAS,oBAAC,gCAAqB,OAAc,QAAgB;AAAA,YAE/D;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,OACE;AAAA,YAEE,qBAAC,WACE;AAAA;AAAA,cACA,wBACC,oBAAC,iCAAsB,QAAgB;AAAA,eAE3C;AAAA,YAGJ;AAAA,YACA,aAAa,SAAS,eAAe;AAAA,YACrC;AAAA,YACA;AAAA,YAEC,kBAAQ,IAAI,CAAC,WAAW;AACvB,kBAAI,WAAW,QAAQ;AACrB,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,YAAY;AAAA,oBACZ,eAAa;AAAA,sBACX,GAAG,MAAM,WAAW,OAAO,UAAU,OAAO,KAAK;AAAA,oBACnD;AAAA,oBACA,YAAY,cAAc,OAAO;AAAA,oBAEjC;AAAA,oBACA,OAAO,OAAO;AAAA,oBAEb,iBAAO,QAAQ,OAAO,QAAQ,OAAO;AAAA;AAAA,kBAJjC,OAAO;AAAA,gBAKd;AAAA,cAEJ;AACA,qBAAO;AAAA,YACT,CAAC;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;;;ACvJf,IAAOA,sBAAQ;","names":["RadioGroup_default"]}

package/dist/{chunk-JU5RT22Y.cjs → chunk-PA2DQCBY.cjs}

@@ -32,4 +32,4 @@ var FieldCopyTestIdButton_default2 = FieldCopyTestIdButton_default;
 
 
 exports.FieldCopyTestIdButton_default = FieldCopyTestIdButton_default; exports.FieldCopyTestIdButton_default2 = FieldCopyTestIdButton_default2;
-//# sourceMappingURL=chunk-JU5RT22Y.cjs.map
+//# sourceMappingURL=chunk-PA2DQCBY.cjs.map

package/dist/chunk-PA2DQCBY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PA2DQCBY.cjs","../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"names":["FieldCopyTestIdButton_default"],"mappings":"AAAA;ACAA,sCAA2B;AAE3B,oDAAmB;AACnB,2CAAuB;AAwBX,+CAAA;AAfZ,IAAM,sBAAA,EAAwB,CAAC;AAAA,EAC7B,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ;AACF,CAAA,EAAA,GAAkC;AAChC,EAAA,MAAM,gBAAA,EAAkB,CAAA,EAAA,GAAM;AAC5B,IAAA,SAAA,CAAU,SAAA,CAAU,SAAA,CAAU,MAAM,CAAA,CAAE,KAAA,CAAM,CAAC,GAAA,EAAA,GAAQ;AACnD,MAAA,OAAA,CAAQ,KAAA,CAAM,mCAAA,EAAqC,GAAG,CAAA;AAAA,IACxD,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACE,6BAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAAA,SAAG,EAAW,qBAAqB,CAAA;AAAA,MAC9C,OAAA,EAAQ,OAAA;AAAA,MACR,OAAA,EAAS,eAAA;AAAA,MACT,IAAA,kBAAM,6BAAA,eAAC,EAAA,CAAA,CAAW,CAAA;AAAA,MAClB,IAAA,EAAK;AAAA,IAAA;AAAA,EACP,CAAA;AAEJ,CAAA;AACA,IAAO,8BAAA,EAAQ,qBAAA;ADNf;AACA;AErBA,IAAOA,+BAAAA,EAAQ,6BAAA;AFuBf;AACA;AACE;AACA;AACF,+IAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PA2DQCBY.cjs","sourcesContent":[null,"import { FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\nconst FieldCopyTestIdButton = ({\n  className = undefined,\n  testId,\n}: FieldCopyTestIdButtonProps) => {\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(testId).catch((err) => {\n      console.error('Error copying TestId to clipboard', err);\n    });\n  };\n\n  return (\n    <Button\n      className={cn(className, 'pointer-events-auto')}\n      variant=\"light\"\n      onClick={copyToClipboard}\n      icon={<FaBullseye />}\n      size=\"sm\"\n    />\n  );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"]}

package/dist/{chunk-ZFJ5NEHU.cjs → chunk-QX652SHY.cjs}

@@ -3,10 +3,10 @@
 var _chunkEPYFZXEIcjs = require('./chunk-EPYFZXEI.cjs');
 
 
-var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
+var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
 
 
-var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
+var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
 
 
 
@@ -83,14 +83,14 @@ var Switch = ({
               value,
               children: [
                 label,
-                showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
+                showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
               ]
             }
           ),
           error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classNames.errorMessage, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "div",
             _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), {
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGNYQC5IJcjs.FieldValidationError_default, { error, testId })
             })
           ) })
         ] });
@@ -107,4 +107,4 @@ var Switch_default2 = Switch_default;
 
 
 exports.Switch_default = Switch_default; exports.Switch_default2 = Switch_default2;
-//# sourceMappingURL=chunk-ZFJ5NEHU.cjs.map
+//# sourceMappingURL=chunk-QX652SHY.cjs.map

package/dist/chunk-QX652SHY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-QX652SHY.cjs","../src/Switch/Switch.tsx","../src/Switch/index.ts"],"names":["Switch_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;AChBA,wCAAqC;AAErC,oDAAyC;AA6E7B,+CAAA;AAtEL,IAAM,eAAA,EAAiB,4BAAA;AAAG,EAC/B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAA;AAAA,IACN,UAAA,EAAY,EAAA;AAAA,IACZ,YAAA,EAAc,WAAA;AAAA;AAAA;AAAA,IAGd,KAAA,EACE,yNAAA;AAAA,IACF,YAAA,EAAc,sBAAA;AAAA,IACd,YAAA,EAAc,EAAA;AAAA,IACd,KAAA,EAAO,EAAA;AAAA,IACP,SAAA,EAAW,EAAA;AAAA,IACX,OAAA,EAAS;AAAA,EACX;AACF,CAAC,CAAA;AAqBD,IAAM,OAAA,EAAS,CAAC;AAAA,EACd,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,SAAA,EAAW,KAAA;AAAA,EACX,KAAA,EAAO,OAAA,EAAS,KAAA,CAAA;AAAA,EAChB,IAAA;AAAA,EACA,MAAA,EAAQ,QAAA,EAAU,KAAA;AACpB,CAAA,EAAA,GAAmB;AACjB,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,cAAc,EAAA,EAAI,8CAAA,CAAe;AAC7D,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,MAAA,EAAQ,QAAQ,EAAA,EAAI,aAAA,CAAc,IAAA,EAAM,OAAO,CAAA;AAExE,EAAA,MAAM,EAAE,KAAA,EAAO,aAAA,EAAe,qBAAqB,EAAA,EAAI,wCAAA;AAAS,IAC9D,YAAA,EAAc,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA;AAAA,IAClC,SAAA,EAAW,OAAA;AAAA,IACX,UAAA,EAAY,QAAA;AAAA,IACZ,KAAA,EAAO,MAAA;AAAA,IACP,cAAA,EAAgB,SAAA;AAAA,IAChB,WAAA,EAAa;AAAA,EACf,CAAC,CAAA;AAED,EAAA,MAAM,SAAA,EAAW,cAAA,CAAe,CAAA;AAChC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,SAAA,EAAW,cAAc,CAAA;AAE3E,EAAA,MAAM,qBAAA,EAAuB,UAAA,IAAc,eAAA;AAE3C,EAAA,uBACE,6BAAA;AAAA,IAAC,oCAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA,EAAQ,CAAC;AAAA,QACP,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,KAAA,EAAO,GAAA,EAAK,MAAA,EAAQ,SAAS;AAAA,MAC9D,CAAA,EAAA,GAAM;AACJ,QAAA,uBACE,8BAAA,KAAC,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,YAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,8BAAA;AAAA,YAAC,cAAA;AAAA,YAAA;AAAA,cACC,kBAAA,EAAkB,aAAA,CAAc,CAAA,CAAE,kBAAkB,CAAA;AAAA,cACpD,UAAA;AAAA,cAGA,cAAA,EAAc,OAAA;AAAA,cACd,eAAA,EAAe,QAAA;AAAA,cACf,aAAA,EAAa,MAAA;AAAA,cACb,UAAA;AAAA,cACA,UAAA,EAAY,CAAC,CAAC,KAAA;AAAA,cACd,IAAA;AAAA,cACA,MAAA;AAAA,cACA,aAAA,EAAe,QAAA;AAAA,cACf,GAAA;AAAA,cACA,QAAA;AAAA,cACA,KAAA;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,KAAA;AAAA,gBACA,qBAAA,mBACC,6BAAA,+CAAC,EAAA,EAAsB,OAAA,CAAgB;AAAA,cAAA;AAAA,YAAA;AAAA,UAE3C,CAAA;AAAA,UACC,MAAA,mBACC,6BAAA,KAAC,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,YAAA,EACzB,QAAA,kBAAA,6BAAA;AAAA,YAAC,KAAA;AAAA,YAAA,6CAAA,8CAAA,CAAA,CAAA,EAEK,oBAAA,CAAqB,CAAA,CAAA,EAF1B;AAAA,cAIC,QAAA,kBAAA,6BAAA,8CAAC,EAAA,EAAqB,KAAA,EAAc,OAAA,CAAgB;AAAA,YAAA,CAAA;AAAA,UACtD,EAAA,CACF;AAAA,QAAA,EAAA,CAEJ,CAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,eAAA,EAAQ,MAAA;ADnBf;AACA;AEhGA,IAAOA,gBAAAA,EAAQ,cAAA;AFkGf;AACA;AACE;AACA;AACF,mFAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-QX652SHY.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport { Switch as HeroSwitch } from '@heroui/switch';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\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  /** CSS class name */\n  className?: ClassName;\n  /** whether the select should be disabled */\n  disabled?: boolean;\n  /** component displayed next to the switch. */\n  label?: React.ReactNode;\n  /** name the field is registered under */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n *  Switch component based on [HeroUI Switch](https://www.heroui.com//docs/components/switch)\n */\nconst Switch = ({\n  className = undefined,\n  disabled = false,\n  label: _label = undefined,\n  name,\n  testId: _testId = undefined,\n}: SwitchProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, required, testId, invalid } = getFieldState(name, _testId);\n\n  const { label, getInputProps, getErrorMessageProps } = useInput({\n    errorMessage: JSON.stringify(error),\n    isInvalid: invalid,\n    isRequired: required,\n    label: _label,\n    labelPlacement: 'outside',\n    placeholder: ' ',\n  });\n\n  const variants = switchVariants();\n  const classNames = variantsToClassNames(variants, className, 'outerWrapper');\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      disabled={disabled}\n      render={({\n        field: { disabled: isDisabled, value, ref, onBlur, onChange },\n      }) => {\n        return (\n          <div className={classNames.outerWrapper}>\n            <HeroSwitch\n              aria-describedby={getInputProps()['aria-describedby']}\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              isDisabled={isDisabled}\n              isSelected={!!value}\n              name={name}\n              onBlur={onBlur}\n              onValueChange={onChange}\n              ref={ref}\n              required={required}\n              value={value}\n            >\n              {label}\n              {showTestIdCopyButton && (\n                <FieldCopyTestIdButton testId={testId} />\n              )}\n            </HeroSwitch>\n            {error && (\n              <div className={classNames.errorMessage}>\n                <div\n                  /* eslint-disable-next-line react/jsx-props-no-spreading */\n                  {...getErrorMessageProps()}\n                >\n                  <FieldValidationError error={error} testId={testId} />\n                </div>\n              </div>\n            )}\n          </div>\n        );\n      }}\n    />\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"]}

package/dist/{chunk-WI6FEFKD.cjs → chunk-R4GZXQFD.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
+var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
 
 
-var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
+var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
 
 
 
@@ -173,9 +173,10 @@ var FieldArrayElement = ({
       }
     ),
     error && typeof error[index] !== "undefined" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkOE5IW4ZGcjs.FieldValidationError_default,
+      _chunkGNYQC5IJcjs.FieldValidationError_default,
       {
-        error: (_a = error[Number(index)]) == null ? void 0 : _a._errors
+        error: (_a = error[Number(index)]) == null ? void 0 : _a._errors,
+        testId
       }
     ) })) }))
   ] });
@@ -315,7 +316,7 @@ var FieldArray = ({
               children: label
             })
           ),
-          showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
+          showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
         ] }),
         fields.map((field, index) => {
           const elementName = `${name}.${index}`;
@@ -365,7 +366,7 @@ var FieldArray = ({
             children: appendButtonText
           }
         ),
-        (error == null ? void 0 : error._errors) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error: error == null ? void 0 : error._errors }) })) }))
+        (error == null ? void 0 : error._errors) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGNYQC5IJcjs.FieldValidationError_default, { error: error == null ? void 0 : error._errors, testId }) })) }))
       ]
     }
   ) });
@@ -379,4 +380,4 @@ var FieldArray_default2 = FieldArray_default;
 
 
 exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
-//# sourceMappingURL=chunk-WI6FEFKD.cjs.map
+//# sourceMappingURL=chunk-R4GZXQFD.cjs.map

package/dist/chunk-R4GZXQFD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-R4GZXQFD.cjs","../src/FieldArray/FieldArray.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/ElementInsertAfterButton.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/index.ts"],"names":["jsx","Button","cn","useSortable","Fragment","FieldArray_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-R4GZXQFD.cjs","sourcesContent":[null,"/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { toNullishString } from '../helpers';\nimport { useFieldArray, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n  slots: {\n    appendButton: 'w-full',\n    elementWrapper: 'flex-grow',\n    insertAfterButton: 'text-xs font-medium',\n    label: '!pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block',\n    list: 'm-0 w-full list-none',\n    listItem: 'mb-4 flex w-full flex-row items-center',\n    removeButton: 'ml-1',\n    sortDragHandle: 'mr-2 text-base text-xl',\n  },\n});\n\n/**\n * FieldArray component based in [RHF useFieldArray](https://react-hook-form.com/docs/usefieldarray)\n */\nconst FieldArray = ({\n  appendButtonText = 'Add Element',\n  children,\n  className: _className = undefined,\n  duplicate = false,\n  elementInitialValue: _elementInitialValue = null,\n  insertAfter = false,\n  label: _label = undefined,\n  lastElementNotRemovable = false,\n  name,\n  sortable = false,\n  testId: _testId = undefined,\n}: FieldArrayProps) => {\n  // className from slots\n  const variants = fieldArrayVariants();\n  const className = variantsToClassNames(variants, _className, 'list');\n\n  const {\n    control,\n    debugMode,\n    getValues,\n    getFieldState,\n    trigger,\n    // watch\n  } = useFormContext();\n\n  const { fields, append, remove, insert, move } = useFieldArray({\n    control,\n    name,\n  });\n\n  const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n  // TODO: what about input props?\n  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n    useInput({\n      isInvalid: invalid,\n      isRequired: required,\n      errorMessage: JSON.stringify(error),\n      label: _label,\n      labelPlacement: 'inside',\n      placeholder: ' ',\n      classNames: { helperWrapper: 'block' },\n    });\n\n  // TODO: add info\n  const elementInitialValue = toNullishString(_elementInitialValue);\n\n  // When lastElementNotRemovable is set and the field array is empty,\n  // add an initial element to ensure there's always at least one visible element\n  if (lastElementNotRemovable && fields.length === 0) {\n    append(elementInitialValue);\n  }\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <SortContext sortable={sortable} move={move} fields={fields}>\n      <ul\n        className={className.list}\n        data-testid={testId}\n        /**\n         * TODO: this trigger causes the field array (not element)\n         * are shown immediately, but this will cause additional\n         * render cycles, not sure if we should do this...\n         */\n        onBlur={() => trigger(`${name}`)}\n      >\n        {/* field array label */}\n        {showLabel && (\n          <>\n            {label && (\n              // eslint-disable-next-line jsx-a11y/label-has-associated-control\n              <label\n                {...getLabelProps()}\n                className={cn(getLabelProps()?.className, className.label)}\n              >\n                {label}\n              </label>\n            )}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </>\n        )}\n\n        {fields.map((field, index) => {\n          const elementName = `${name}.${index}`;\n          const elementTestId = `${testId}${index}`;\n\n          // create methods for element\n          const elementMethods: FieldArrayElementMethods = {\n            append: () => append(elementInitialValue),\n            duplicate: () => {\n              const values = getValues(name);\n              insert(index + 1, values[index]);\n            },\n            insert: () => insert(index + 1, elementInitialValue),\n            remove: () => remove(index),\n          };\n\n          return (\n            <FieldArrayElement\n              arrayFieldName={name}\n              className={className}\n              fields={fields}\n              id={field.id}\n              index={index}\n              duplicate={duplicate}\n              insertAfter={insertAfter}\n              key={field.id}\n              lastNotDeletable={lastElementNotRemovable}\n              methods={elementMethods}\n              sortable={sortable}\n              testId={elementTestId}\n            >\n              {children({\n                index,\n                length: fields.length,\n                methods: elementMethods,\n                name: elementName,\n                testId: elementTestId,\n              })}\n            </FieldArrayElement>\n          );\n        })}\n\n        {/* append elements */}\n        <Button\n          className={className.appendButton}\n          disableAnimation\n          onClick={() => append(elementInitialValue)}\n          size=\"sm\"\n          testId={`${testId}_append_button`}\n        >\n          {appendButtonText}\n        </Button>\n\n        {/* top level field array errors */}\n        {/* @ts-expect-error rhf incompatibility */}\n        {error?._errors && (\n          <div {...getHelperWrapperProps()}>\n            <div {...getErrorMessageProps()}>\n              {/* @ts-expect-error rhf incompatibility */}\n              <FieldValidationError error={error?._errors} testId={testId} />\n            </div>\n          </div>\n        )}\n      </ul>\n    </SortContext>\n  );\n};\n\nexport default FieldArray;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext, useInput } from '../../hooks';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport ElementInsertAfterButton from './ElementInsertAfterButton';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport type FieldArrayElementMethods = {\n  /** Add new element at end */\n  append: () => void;\n  /** Clone current element */\n  duplicate: () => void;\n  /** Add new element after current */\n  insert: () => void;\n  /** Remove current element */\n  remove: () => void;\n};\n\ninterface FieldArrayElementProps extends FieldArrayFeatures {\n  /** Base field name for form context */\n  arrayFieldName: string;\n  /** Form elements to render inside array element */\n  children: React.ReactNode;\n  /** CSS class names for component parts */\n  className: {\n    /** Class of wrapper div inside the li that wraps the rendered element fields directly */\n    elementWrapper?: ClassValue;\n    /** Class for the li */\n    listItem?: ClassValue;\n    /** Class for the insert button between elements */\n    insertAfterButton?: ClassValue;\n    /** Class for the remove element button */\n    removeButton?: ClassValue;\n    /** Class for the drag handle when sorting enabled */\n    sortDragHandle?: ClassValue;\n  };\n  /** All fields in the form array */\n  fields: Record<'id', string>[];\n  /** Unique identifier for drag/drop */\n  id: string | number;\n  /** Field index in array */\n  index: number;\n  /** Prevent deletion of last remaining element */\n  lastNotDeletable?: boolean;\n  /** Field array operation methods */\n  methods: FieldArrayElementMethods;\n  /** HTML data-testid of the element */\n  testId?: string;\n}\n\n/**\n * Form array element component using react-hook-form with drag-drop sorting\n * and validation capabilities\n */\nconst FieldArrayElement = ({\n  arrayFieldName,\n  children,\n  className,\n  fields,\n  id,\n  index,\n  insertAfter = false,\n  lastNotDeletable = true,\n  methods,\n  sortable = false,\n  testId = undefined,\n}: FieldArrayElementProps) => {\n  const { getFieldState } = useFormContext();\n  const { error, invalid } = getFieldState(arrayFieldName, undefined);\n\n  // TODO: what about input props? and label props? Do we need a label?\n  const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n    classNames: { helperWrapper: 'block' },\n    errorMessage: JSON.stringify(error),\n    isInvalid: invalid,\n    labelPlacement: 'inside',\n    placeholder: ' ',\n  });\n\n  // Apply transform styles when sortable is enabled for smooth drag animations\n  // transform: handles the item's position during drag\n  // transition: controls the animation timing when dropping\n  const { setNodeRef, transform, transition } = useSortable({ id });\n  const sortingStyle = sortable\n    ? {\n        transform: CSS.Translate.toString(transform),\n        transition,\n      }\n    : undefined;\n\n  return (\n    <>\n      <li\n        className={cn(className.listItem)}\n        ref={setNodeRef}\n        style={sortingStyle}\n      >\n        {/** sorting drag handle */}\n        {sortable && (\n          <SortDragHandle\n            className={className.sortDragHandle}\n            id={id}\n            testId={`${testId}_sort_drag_handle`}\n          />\n        )}\n\n        {/** render element fields */}\n        <div\n          className={cn(className.elementWrapper)}\n          data-testid={`${testId}_element_wrapper`}\n        >\n          {children}\n        </div>\n\n        {/** remove element */}\n        {lastNotDeletable && fields.length === 1 ? null : (\n          <ElementRemoveButton\n            className={className.removeButton}\n            onClick={() => methods.remove()}\n            testId={`${testId}_remove_button`}\n          />\n        )}\n\n        {/** insertAfter feature when not last element */}\n        {insertAfter && index !== fields.length - 1 && (\n          <ElementInsertAfterButton\n            className={className.insertAfterButton}\n            onClick={() => methods.insert()}\n            testId={`${testId}_insert_after_button`}\n          />\n        )}\n      </li>\n\n      {/** element error */}\n      {error && typeof error[index] !== 'undefined' && (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>\n            <FieldValidationError\n              /* @ts-expect-error rhf incompatibility */\n              error={error[Number(index)]?._errors}\n              testId={testId as string}\n            />\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default FieldArrayElement;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementInsertAfterButtonProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** click handler */\n  onClick: () => void;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst ElementInsertAfterButton = ({\n  className = undefined,\n  onClick,\n  testId = undefined,\n}: ElementInsertAfterButtonProps) => {\n  return (\n    <Button\n      className={cn(className)}\n      color=\"success\"\n      icon={<FaPlus />}\n      onClick={onClick}\n      size=\"sm\"\n      testId={testId}\n      variant=\"light\"\n    />\n  );\n};\n\nexport default ElementInsertAfterButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** click handler */\n  onClick: () => void;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst ElementRemoveButton = ({\n  className = undefined,\n  onClick,\n  testId = undefined,\n}: ElementRemoveButtonProps) => {\n  return (\n    <Button\n      ariaLabel=\"remove element\"\n      className={cn(className)}\n      color=\"danger\"\n      icon={<FaTimes />}\n      onClick={onClick}\n      testId={testId}\n      variant=\"light\"\n    />\n  );\n};\n\nexport default ElementRemoveButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaGripVertical } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface SortDragHandleProps {\n  /** Optional CSS class name */\n  className?: ClassValue;\n  /** Unique identifier for sortable item */\n  id: string | number;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Drag handle component that integrates with dnd-kit sortable functionality.\n * Renders a vertical grip icon that can be used to reorder items.\n */\nconst SortDragHandle = ({\n  className = undefined,\n  id,\n  testId = undefined,\n}: SortDragHandleProps) => {\n  // Get dnd-kit sortable attributes and listeners\n  const { attributes, listeners } = useSortable({ id });\n\n  return (\n    <div\n      className={cn(className)}\n      data-testid={testId}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...attributes}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...listeners}\n    >\n      <FaGripVertical />\n    </div>\n  );\n};\n\nexport default SortDragHandle;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\ninterface SortContextProps {\n  /** child components */\n  children: ReactNode;\n  /** enable/disable sorting functionality */\n  sortable: boolean;\n  /** Array of objects containing unique IDs for sortable items */\n  fields: Record<'id', string>[];\n  /** react-hook-form's move function to update field array indices */\n  move: UseFieldArrayMove;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n  children,\n  sortable,\n  fields,\n  move,\n}: SortContextProps) => {\n  // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  // Early return if sorting is disabled\n  if (!sortable) {\n    return children;\n  }\n\n  /**\n   * Handles the end of a drag operation by updating field positions\n   * @param event - The drag end event containing active and over elements\n   */\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    // Only move if dropping over a different item\n    if (active.id !== over?.id) {\n      // Find the indices of the dragged item and drop target\n      const oldIndex = fields.findIndex((field) => field.id === active.id);\n      const newIndex = fields.findIndex((field) => field.id === over?.id);\n      // Update the field array order using react-hook-form's move function\n      move(oldIndex, newIndex);\n    }\n  };\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext\n        items={fields.map((field) => field.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        {children}\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default SortContext;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"]}

package/dist/{chunk-FAXFHN7Z.cjs → chunk-SCTQXWRU.cjs}

@@ -3,10 +3,10 @@
 var _chunkEPYFZXEIcjs = require('./chunk-EPYFZXEI.cjs');
 
 
-var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
+var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
 
 
-var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
+var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
 
 
 var _chunkQQW2FHSCcjs = require('./chunk-QQW2FHSC.cjs');
@@ -44,7 +44,12 @@ var CheckboxGroup = ({
   testId: _testId = void 0
 }) => {
   const { control, debugMode, getFieldState } = _chunkQQW2FHSCcjs.useFormContext.call(void 0, );
-  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const {
+    error: _error,
+    invalid,
+    required,
+    testId
+  } = getFieldState(name, _testId);
   const showTestIdCopyButton = debugMode === "debug-testids";
   const showLabel = label || showTestIdCopyButton;
   const variants = checkboxGroupVariants();
@@ -60,6 +65,9 @@ var CheckboxGroup = ({
     wrapper: classNames.wrapper,
     label: classNames.label
   };
+  const errorFlat = _error && Object.values(
+    _error
+  ).flat() || [];
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkEPYFZXEIcjs.Controller_default,
     {
@@ -92,11 +100,12 @@ var CheckboxGroup = ({
             classNames: itemGroupClassName,
             "data-testid": testId,
             "data-invalid": invalid,
-            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkOE5IW4ZGcjs.FieldValidationError_default,
+            errorMessage: errorFlat.length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkGNYQC5IJcjs.FieldValidationError_default,
               {
-                error,
-                className: classNames.errorMessage
+                className: classNames.errorMessage,
+                error: errorFlat,
+                testId
               }
             ),
             isDisabled: disabled,
@@ -105,13 +114,16 @@ var CheckboxGroup = ({
             label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { children: [
               label,
-              showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
+              showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
             ] }),
             onBlur,
             orientation: inline ? "horizontal" : "vertical",
             ref
           }, checkboxGroupProps), {
             children: options == null ? void 0 : options.map((option) => {
+              const optionTestId = _pixelutils.slugify.call(void 0, 
+                `${testId}_option_${(option == null ? void 0 : option.testId) || (option == null ? void 0 : option.value)}`
+              );
               return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _checkbox.Checkbox,
                 {
@@ -119,9 +131,7 @@ var CheckboxGroup = ({
                   classNames: itemClassName,
                   isDisabled: disabled || option.disabled,
                   value: option == null ? void 0 : option.value,
-                  "data-testid": _pixelutils.slugify.call(void 0, 
-                    `${testId}_option_${(option == null ? void 0 : option.testId) || (option == null ? void 0 : option.value)}`
-                  ),
+                  "data-testid": optionTestId,
                   children: option == null ? void 0 : option.label
                 },
                 `index_${option.value}`
@@ -142,4 +152,4 @@ var CheckboxGroup_default2 = CheckboxGroup_default;
 
 
 exports.CheckboxGroup_default = CheckboxGroup_default; exports.CheckboxGroup_default2 = CheckboxGroup_default2;
-//# sourceMappingURL=chunk-FAXFHN7Z.cjs.map
+//# sourceMappingURL=chunk-SCTQXWRU.cjs.map

package/dist/chunk-SCTQXWRU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SCTQXWRU.cjs","../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"names":["CheckboxGroup_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACdA,4CAA6D;AAE7D,oDAAkD;AA8JlC,+CAAA;AAvJT,IAAM,sBAAA,EAAwB,4BAAA;AAAG,EACtC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA;AAAA,IACN,YAAA,EAAc,WAAA;AAAA,IACd,QAAA,EAAU,EAAA;AAAA,IACV,QAAA,EAAU,EAAA;AAAA,IACV,SAAA,EAAW,SAAA;AAAA,IACX,WAAA,EAAa,EAAA;AAAA;AAAA;AAAA,IAGb,KAAA,EACE,qFAAA;AAAA,IACF,OAAA,EAAS;AAAA,EACX;AACF,CAAC,CAAA;AAoCD,IAAM,cAAA,EAAgB,CAAC;AAAA,EACrB,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,OAAA,EAAS,KAAA;AAAA,EACT,MAAA,EAAQ,KAAA,CAAA;AAAA,EACR,OAAA;AAAA,EACA,SAAA,EAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,MAAA,EAAQ,QAAA,EAAU,KAAA;AACpB,CAAA,EAAA,GAA0B;AACxB,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,cAAc,EAAA,EAAI,8CAAA,CAAe;AAC7D,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,MAAA;AAAA,IACP,OAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,EACF,EAAA,EAAI,aAAA,CAAc,IAAA,EAAM,OAAO,CAAA;AAE/B,EAAA,MAAM,qBAAA,EAAuB,UAAA,IAAc,eAAA;AAC3C,EAAA,MAAM,UAAA,EAAY,MAAA,GAAS,oBAAA;AAE3B,EAAA,MAAM,SAAA,EAAW,qBAAA,CAAsB,CAAA;AACvC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,SAAA,EAAW,MAAM,CAAA;AAEnE,EAAA,MAAM,cAAA,EAAgB;AAAA,IACpB,IAAA,EAAM,UAAA,CAAW,QAAA;AAAA,IACjB,OAAA,EAAS,UAAA,CAAW,WAAA;AAAA,IACpB,IAAA,EAAM,UAAA,CAAW,QAAA;AAAA,IACjB,KAAA,EAAO,UAAA,CAAW;AAAA,EACpB,CAAA;AACA,EAAA,MAAM,mBAAA,EAAqB;AAAA,IACzB,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,IACjB,OAAA,EAAS,UAAA,CAAW,OAAA;AAAA,IACpB,KAAA,EAAO,UAAA,CAAW;AAAA,EACpB,CAAA;AAMA,EAAA,MAAM,UAAA,EACH,OAAA,GACC,MAAA,CAAO,MAAA;AAAA,IACL;AAAA,EACF,CAAA,CAAE,IAAA,CAAK,EAAA,GACT,CAAC,CAAA;AAEH,EAAA,uBACE,6BAAA;AAAA,IAAC,oCAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,CAAC,CAAA,EAAG,GAAA,EAAK,OAAO,EAAE,CAAA,EAAA,GAAM;AAiB5D,QAAA,MAAM,iBAAA,EAAmB,CAAC,UAAA,EAAA,GAAkC;AAC1D,UAAA,GAAA,CAAI,KAAA,CAAM,OAAA,CAAQ,UAAU,CAAA,EAAG;AAC7B,YAAA,OAAO,UAAA;AAAA,UACT;AACA,UAAA,GAAA,CAAI,UAAA,EAAY;AACd,YAAA,OAAO,CAAC,UAAoB,CAAA;AAAA,UAC9B;AACA,UAAA,OAAO,CAAC,CAAA;AAAA,QACV,CAAA;AAEA,QAAA,MAAM,oBAAA,EAAsB;AAAA,UAC1B,KAAA,EAAO,gBAAA,CAAiB,KAAK,CAAA;AAAA,UAC7B,QAAA,EAAU,CAAC,QAAA,EAAA,GAAuB,QAAA,CAAS,SAAA,GAAY,QAAA,CAAS,CAAC,CAAC;AAAA,QACpE,CAAA;AAEA,QAAA,MAAM,sBAAA,EAAwB;AAAA,UAC5B,QAAA;AAAA,UACA,KAAA,EAAO,gBAAA,CAAiB,KAAK;AAAA,QAC/B,CAAA;AAEA,QAAA,MAAM,mBAAA,EACJ,OAAA,CAAQ,OAAA,IAAW,EAAA,EAAI,oBAAA,EAAsB,qBAAA;AAE/C,QAAA,uBACE,6BAAA;AAAA,UAAC,uBAAA;AAAA,UAAA,6CAAA,8CAAA;AAAA,YACC,IAAA;AAAA,YACA,UAAA,EAAY,kBAAA;AAAA,YACZ,aAAA,EAAa,MAAA;AAAA,YAGb,cAAA,EAAc,OAAA;AAAA,YACd,YAAA,EACE,SAAA,CAAU,OAAA,mBACR,6BAAA;AAAA,cAAC,8CAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,UAAA,CAAW,YAAA;AAAA,gBACtB,KAAA,EAAO,SAAA;AAAA,gBACP;AAAA,cAAA;AAAA,YACF,CAAA;AAAA,YAGJ,UAAA,EAAY,QAAA;AAAA,YACZ,SAAA,EAAW,OAAA;AAAA,YACX,UAAA,EAAY,QAAA;AAAA,YACZ,KAAA,EACE,UAAA;AAAA,4BAEE,8BAAA,OAAC,EAAA,EACE,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,qBAAA,mBACC,6BAAA,+CAAC,EAAA,EAAsB,OAAA,CAAgB;AAAA,YAAA,EAAA,CAE3C,CAAA;AAAA,YAGJ,MAAA;AAAA,YACA,WAAA,EAAa,OAAA,EAAS,aAAA,EAAe,UAAA;AAAA,YACrC;AAAA,UAAA,CAAA,EAEI,kBAAA,CAAA,EAlCL;AAAA,YAoCE,QAAA,EAAA,QAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,OAAA,CAAS,GAAA,CAAI,CAAC,MAAA,EAAA,GAAW;AACxB,cAAA,MAAM,aAAA,EAAe,iCAAA;AAAA,gBACnB,CAAA,EAAA;AACF,cAAA;AACA,cAAA;AACG,gBAAA;AAAA,gBAAA;AAAA,kBAAA;AACe,kBAAA;AACF,kBAAA;AAEmB,kBAAA;AAChB,kBAAA;AACF,kBAAA;AAEJ,gBAAA;AALJ,gBAAA;AAMP,cAAA;AAEJ,YAAA;AAAA,UAAA;AACF,QAAA;AAEJ,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;AAEO;ADpEU;AACA;AE7IVA;AF+IU;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SCTQXWRU.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { FieldError } from 'react-hook-form';\n\nimport { Checkbox, CheckboxGroup as HeroCheckboxGroup } from '@heroui/checkbox';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    errorMessage: 'text-tiny',\n    itemBase: '',\n    itemIcon: '',\n    itemLabel: 'text-sm',\n    itemWrapper: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof checkboxGroupVariants>;\ntype ClassName = TVClassName<typeof checkboxGroupVariants>;\n\nexport type CheckboxGroupOption = {\n  /** option label */\n  label?: React.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 CheckboxGroupProps extends VariantProps {\n  /** CSS class name. ClassName: string | { buttons?: string | { base?: string; active?: string }; base?: string;} */\n  className?: ClassName;\n  /** determines orientation of the boxes. */\n  inline?: boolean;\n  /** label displayed above the Checkboxes */\n  label?: React.ReactNode;\n  /** Name the Field is registered on the form. */\n  name: string;\n  /** Checkboxes that should be displayed. */\n  options: CheckboxGroupOption[];\n  /** sets all buttons disabled */\n  disabled?: boolean;\n  /** id for internal testing. */\n  testId?: string;\n}\n\n/**\n * CheckboxGroup component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n  className = undefined,\n  inline = false,\n  label = undefined,\n  options,\n  disabled = false,\n  name,\n  testId: _testId = undefined,\n}: CheckboxGroupProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const {\n    error: _error,\n    invalid,\n    required,\n    testId,\n  } = getFieldState(name, _testId);\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = checkboxGroupVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassName = {\n    base: classNames.itemBase,\n    wrapper: classNames.itemWrapper,\n    icon: classNames.itemIcon,\n    label: classNames.itemLabel,\n  };\n  const itemGroupClassName = {\n    base: classNames.base,\n    wrapper: classNames.wrapper,\n    label: classNames.label,\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\n  return (\n    <Controller\n      control={control}\n      name={name}\n      disabled={disabled}\n      render={({ field: { onChange, value = [], ref, onBlur } }) => {\n        /**\n         * Handles the checkbox group 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;\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[]) => onChange(newValue && newValue[0]),\n        };\n\n        const multipleCheckboxProps = {\n          onChange,\n          value: getCheckboxValue(value),\n        };\n\n        const checkboxGroupProps =\n          options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n        return (\n          <HeroCheckboxGroup\n            name={name}\n            classNames={itemGroupClassName}\n            data-testid={testId}\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            errorMessage={\n              errorFlat.length && (\n                <FieldValidationError\n                  className={classNames.errorMessage}\n                  error={errorFlat}\n                  testId={testId}\n                />\n              )\n            }\n            isDisabled={disabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              showLabel && (\n                // eslint-disable-next-line jsx-a11y/label-has-associated-control\n                <label>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </label>\n              )\n            }\n            onBlur={onBlur}\n            orientation={inline ? 'horizontal' : 'vertical'}\n            ref={ref}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...checkboxGroupProps}\n          >\n            {options?.map((option) => {\n              const optionTestId = slugify(\n                `${testId}_option_${option?.testId || option?.value}`,\n              );\n              return (\n                <Checkbox\n                  data-invalid={invalid}\n                  classNames={itemClassName}\n                  key={`index_${option.value}`}\n                  isDisabled={disabled || option.disabled}\n                  value={option?.value}\n                  data-testid={optionTestId}\n                >\n                  {option?.label}\n                </Checkbox>\n              );\n            })}\n          </HeroCheckboxGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default CheckboxGroup;\n","import CheckboxGroup from './CheckboxGroup';\n\nexport type { CheckboxGroupProps, CheckboxGroupOption } from './CheckboxGroup';\n\nexport { CheckboxGroup };\n\nexport default CheckboxGroup;\n"]}