@fuf-stack/uniform 0.14.4 → 0.15.0

package/dist/chunk-4EP3IGSK.cjs

@@ -0,0 +1,372 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
+
+
+var _chunkC4RM2JSDcjs = require('./chunk-C4RM2JSD.cjs');
+
+
+
+
+var _chunk2NSCPLAAcjs = require('./chunk-2NSCPLAA.cjs');
+
+
+var _chunk4AXNPSXGcjs = require('./chunk-4AXNPSXG.cjs');
+
+
+
+var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
+
+// src/FieldArray/FieldArray.tsx
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _pixels = require('@fuf-stack/pixels');
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+var _sortable = require('@dnd-kit/sortable');
+var _utilities = require('@dnd-kit/utilities');
+
+
+// src/FieldArray/subcomponents/ElementInsertAfterButton.tsx
+var _fa6 = require('react-icons/fa6');
+
+
+var _jsxruntime = require('react/jsx-runtime');
+var ElementInsertAfterButton = ({
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _pixels.Button,
+    {
+      className: _pixelutils.cn.call(void 0, className),
+      color: "success",
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaPlus, {}),
+      onClick,
+      size: "sm",
+      testId,
+      variant: "light"
+    }
+  );
+};
+var ElementInsertAfterButton_default = ElementInsertAfterButton;
+
+// src/FieldArray/subcomponents/ElementRemoveButton.tsx
+var _fa = require('react-icons/fa');
+
+
+
+var ElementRemoveButton = ({
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _pixels.Button,
+    {
+      ariaLabel: "remove element",
+      className: _pixelutils.cn.call(void 0, className),
+      color: "danger",
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, {}),
+      onClick,
+      testId,
+      variant: "light"
+    }
+  );
+};
+var ElementRemoveButton_default = ElementRemoveButton;
+
+// src/FieldArray/subcomponents/SortDragHandle.tsx
+
+
+
+
+var SortDragHandle = ({
+  className = void 0,
+  id,
+  testId = void 0
+}) => {
+  const { attributes, listeners } = _sortable.useSortable.call(void 0, { id });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {
+      className: _pixelutils.cn.call(void 0, className),
+      "data-testid": testId
+    }, attributes), listeners), {
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaGripVertical, {})
+    })
+  );
+};
+var SortDragHandle_default = SortDragHandle;
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+
+var FieldArrayElement = ({
+  children,
+  className,
+  fields,
+  id,
+  index,
+  insertAfter = false,
+  lastNotDeletable = true,
+  methods,
+  name,
+  sortable = false,
+  testId = void 0
+}) => {
+  var _a;
+  const { getFieldState } = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
+  const { error, invalid } = getFieldState(`${name}`, void 0);
+  const { getHelperWrapperProps, getErrorMessageProps } = _chunk2NSCPLAAcjs.useInput.call(void 0, {
+    classNames: { helperWrapper: "block" },
+    errorMessage: JSON.stringify(error),
+    isInvalid: invalid,
+    labelPlacement: "inside",
+    placeholder: " "
+  });
+  const { setNodeRef, transform, transition } = _sortable.useSortable.call(void 0, { id });
+  const sortingStyle = sortable ? {
+    transform: _utilities.CSS.Translate.toString(transform),
+    transition
+  } : void 0;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "li",
+      {
+        className: _pixelutils.cn.call(void 0, className.listItem),
+        ref: setNodeRef,
+        style: sortingStyle,
+        children: [
+          sortable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            SortDragHandle_default,
+            {
+              className: className.sortDragHandle,
+              id,
+              testId: `${testId}_sort_drag_handle`
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _pixelutils.cn.call(void 0, className.elementContent), "data-testid": testId, children }),
+          lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            ElementRemoveButton_default,
+            {
+              className: className.removeButton,
+              onClick: () => methods.remove(),
+              testId: `${testId}_remove_button`
+            }
+          ),
+          insertAfter && index !== fields.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            ElementInsertAfterButton_default,
+            {
+              className: className.insertAfterButton,
+              onClick: () => methods.insert(),
+              testId: `${testId}_insert_after_button`
+            }
+          )
+        ]
+      }
+    ),
+    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, 
+      _chunkC4RM2JSDcjs.FieldValidationError_default,
+      {
+        error: (_a = error[Number(index)]) == null ? void 0 : _a._errors
+      }
+    ) })) }))
+  ] });
+};
+var FieldArrayElement_default = FieldArrayElement;
+
+// src/FieldArray/subcomponents/SortContext.tsx
+
+
+
+
+
+
+
+var _core = require('@dnd-kit/core');
+
+
+
+var _modifiers = require('@dnd-kit/modifiers');
+
+
+
+
+
+var SortContext = ({
+  children,
+  sortable,
+  fields,
+  move
+}) => {
+  const sensors = _core.useSensors.call(void 0, 
+    _core.useSensor.call(void 0, _core.PointerSensor),
+    _core.useSensor.call(void 0, _core.KeyboardSensor)
+  );
+  if (!sortable) {
+    return children;
+  }
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active.id !== (over == null ? void 0 : over.id)) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id);
+      const newIndex = fields.findIndex((field) => field.id === (over == null ? void 0 : over.id));
+      move(oldIndex, newIndex);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _core.DndContext,
+    {
+      collisionDetection: _core.closestCenter,
+      modifiers: [_modifiers.restrictToVerticalAxis, _modifiers.restrictToWindowEdges],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _sortable.SortableContext,
+        {
+          items: fields.map((field) => field.id),
+          strategy: _sortable.verticalListSortingStrategy,
+          children
+        }
+      )
+    }
+  );
+};
+var SortContext_default = SortContext;
+
+// src/FieldArray/FieldArray.tsx
+
+var fieldArrayVariants = _pixelutils.tv.call(void 0, {
+  slots: {
+    appendButton: "w-full",
+    elementContent: "flex-grow",
+    insertAfterButton: "text-xs font-medium",
+    label: "!pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block",
+    list: "m-0 w-full list-none",
+    listItem: "mb-4 flex w-full flex-row items-center",
+    removeButton: "ml-1",
+    sortDragHandle: "mr-2 text-base text-xl"
+  }
+});
+var FieldArray = ({
+  appendButtonText = "Add Element",
+  children,
+  className: _className = void 0,
+  duplicate = false,
+  elementInitialValue: _elementInitialValue = null,
+  insertAfter = false,
+  label: _label = void 0,
+  lastElementNotDeletable = true,
+  name,
+  sortable = false,
+  testId: _testId = void 0
+}) => {
+  var _a;
+  const variants = fieldArrayVariants();
+  const className = _pixelutils.variantsToClassNames.call(void 0, variants, _className, "list");
+  const {
+    control,
+    debugMode,
+    getValues,
+    getFieldState,
+    trigger
+    // watch
+  } = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
+  const { fields, append, remove, insert, move } = _chunk2NSCPLAAcjs.useFieldArray.call(void 0, {
+    control,
+    name
+  });
+  const { error, testId, invalid, required } = getFieldState(name, _testId);
+  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _chunk2NSCPLAAcjs.useInput.call(void 0, {
+    isInvalid: invalid,
+    isRequired: required,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  const elementInitialValue = _chunk4AXNPSXGcjs.toNullishString.call(void 0, _elementInitialValue);
+  if (lastElementNotDeletable && fields.length === 0) {
+    append(elementInitialValue);
+  }
+  const showTestIdCopyButton = debugMode === "debug-testids";
+  const showLabel = label || showTestIdCopyButton;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortContext_default, { sortable, move, fields, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "ul",
+    {
+      className: className.list,
+      "data-testid": testId,
+      onBlur: () => trigger(`${name}`),
+      children: [
+        showLabel && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "label",
+            _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getLabelProps()), {
+              className: _pixelutils.cn.call(void 0, (_a = getLabelProps()) == null ? void 0 : _a.className, className.label),
+              children: label
+            })
+          ),
+          showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
+        ] }),
+        fields.map((field, index) => {
+          const methods = {
+            append: () => append(elementInitialValue),
+            duplicate: () => {
+              const values = getValues(name);
+              insert(index + 1, values[index]);
+            },
+            insert: () => insert(index + 1, elementInitialValue),
+            remove: () => remove(index)
+          };
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            FieldArrayElement_default,
+            {
+              className,
+              fields,
+              id: field.id,
+              index,
+              duplicate,
+              insertAfter,
+              lastNotDeletable: lastElementNotDeletable,
+              methods,
+              name,
+              sortable,
+              testId: `${testId}_${index}`,
+              children: children({
+                index,
+                length: fields.length,
+                methods,
+                name: `${name}.${index}`,
+                testId: `${testId}_${index}`
+              })
+            },
+            field.id
+          );
+        }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _pixels.Button,
+          {
+            className: className.appendButton,
+            onClick: () => append(elementInitialValue),
+            size: "sm",
+            testId: `${testId}_append_button`,
+            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, _chunkC4RM2JSDcjs.FieldValidationError_default, { error: error == null ? void 0 : error._errors }) })) }))
+      ]
+    }
+  ) });
+};
+var FieldArray_default = FieldArray;
+
+// src/FieldArray/index.ts
+var FieldArray_default2 = FieldArray_default;
+
+
+
+
+exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
+//# sourceMappingURL=chunk-4EP3IGSK.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4EP3IGSK.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","Fragment"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4EP3IGSK.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    elementContent: '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 using TODO\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  lastElementNotDeletable = true,\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  if (lastElementNotDeletable && 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          // create methods for element\n          const methods: 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              className={className}\n              fields={fields}\n              id={field.id}\n              index={index}\n              duplicate={duplicate}\n              insertAfter={insertAfter}\n              key={field.id}\n              lastNotDeletable={lastElementNotDeletable}\n              methods={methods}\n              name={name}\n              sortable={sortable}\n              testId={`${testId}_${index}`}\n            >\n              {children({\n                index,\n                length: fields.length,\n                methods,\n                name: `${name}.${index}`,\n                testId: `${testId}_${index}`,\n              })}\n            </FieldArrayElement>\n          );\n        })}\n\n        {/* append elements */}\n        <Button\n          className={className.appendButton}\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} />\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  /** Form elements to render inside array element */\n  children: React.ReactNode;\n  /** CSS class names for component parts */\n  className: {\n    /** Class of the content of the li */\n    elementContent?: 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  /** Base field name for form context */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\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  children,\n  className,\n  fields,\n  id,\n  index,\n  insertAfter = false,\n  lastNotDeletable = true,\n  methods,\n  name,\n  sortable = false,\n  testId = undefined,\n}: FieldArrayElementProps) => {\n  const { getFieldState } = useFormContext();\n  const { error, invalid } = getFieldState(`${name}`, 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 className={cn(className.elementContent)} data-testid={testId}>\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            />\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-25LLM544.cjs → chunk-4M6F2O2K.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVQWKXSHWcjs = require('./chunk-VQWKXSHW.cjs');
+var _chunkV5HTEMWZcjs = require('./chunk-V5HTEMWZ.cjs');
 
 
 var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
 
 
-var _chunkOHJYXA6Rcjs = require('./chunk-OHJYXA6R.cjs');
+var _chunkC4RM2JSDcjs = require('./chunk-C4RM2JSD.cjs');
 
 
-var _chunkXJWEUCV3cjs = require('./chunk-XJWEUCV3.cjs');
+var _chunk2NSCPLAAcjs = require('./chunk-2NSCPLAA.cjs');
 
 // src/TextArea/TextArea.tsx
 var _input = require('@nextui-org/input');
@@ -24,19 +24,21 @@ var TextArea = ({
   placeholder = " ",
   testId: _testId = void 0
 }) => {
-  const { control, debugMode, getFieldState } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
+  const { control, debugMode, getFieldState } = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
   const { error, invalid, required, testId } = getFieldState(name, _testId);
   const showTestIdCopyButton = debugMode === "debug-testids";
   const showLabel = label || showTestIdCopyButton;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkVQWKXSHWcjs.Controller,
+    _chunkV5HTEMWZcjs.Controller_default,
     {
       control,
       name,
       disabled,
       render: ({
-        field: { disabled: isDisabled, onChange, onBlur, value, ref }
+        field: { disabled: isDisabled, onChange, onBlur, value = "", ref }
       }) => {
+        var _a;
+        const displayValue = (_a = value == null ? void 0 : value.toString()) != null ? _a : "";
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _input.Textarea,
           {
@@ -45,7 +47,7 @@ var TextArea = ({
               inputWrapper: "group-data-[focus=true]:border-focus"
             },
             "data-testid": testId,
-            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOHJYXA6Rcjs.FieldValidationError_default, { error }),
+            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC4RM2JSDcjs.FieldValidationError_default, { error }),
             isDisabled,
             isRequired: required,
             isInvalid: invalid,
@@ -56,7 +58,7 @@ var TextArea = ({
             labelPlacement: "outside",
             placeholder,
             name,
-            value,
+            value: displayValue,
             onChange,
             onBlur,
             ref,
@@ -77,4 +79,4 @@ var TextArea_default2 = TextArea_default;
 
 
 exports.TextArea_default = TextArea_default; exports.TextArea_default2 = TextArea_default2;
-//# sourceMappingURL=chunk-25LLM544.cjs.map
+//# sourceMappingURL=chunk-4M6F2O2K.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4M6F2O2K.cjs","../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"names":["TextArea_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACXA,0CAAyC;AAEzC,oDAAmB;AAmFgB,+CAAA;AAxDnC,IAAM,SAAA,EAAW,CAAC;AAAA,EAChB,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,SAAA,EAAW,KAAA;AAAA,EACX,MAAA,EAAQ,KAAA,CAAA;AAAA,EACR,IAAA;AAAA,EACA,YAAA,EAAc,GAAA;AAAA,EACd,MAAA,EAAQ,QAAA,EAAU,KAAA;AACpB,CAAA,EAAA,GAAqB;AACnB,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,cAAc,EAAA,EAAI,8CAAA,CAAe;AAC7D,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,OAAO,EAAA,EAAI,aAAA,CAAc,IAAA,EAAM,OAAO,CAAA;AAExE,EAAA,MAAM,qBAAA,EAAuB,UAAA,IAAc,eAAA;AAC3C,EAAA,MAAM,UAAA,EAAY,MAAA,GAAS,oBAAA;AAE3B,EAAA,uBACE,6BAAA;AAAA,IAAC,oCAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA,EAAQ,CAAC;AAAA,QACP,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,MAAA,EAAQ,EAAA,EAAI,IAAI;AAAA,MACnE,CAAA,EAAA,GAAM;AArDZ,QAAA,IAAA,EAAA;AA8EQ,QAAA,MAAM,aAAA,EAAA,CAAe,GAAA,EAAA,MAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,KAAA,CAAO,QAAA,CAAA,CAAA,EAAA,GAAP,KAAA,EAAA,GAAA,EAAqB,EAAA;AAE1C,QAAA,uBACE,6BAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,YACvB,UAAA,EAAY;AAAA,cACV,YAAA,EAAc;AAAA,YAChB,CAAA;AAAA,YACA,aAAA,EAAa,MAAA;AAAA,YACb,YAAA,EAAc,MAAA,mBAAS,6BAAA,8CAAC,EAAA,EAAqB,MAAA,CAAc,CAAA;AAAA,YAC3D,UAAA;AAAA,YACA,UAAA,EAAY,QAAA;AAAA,YACZ,SAAA,EAAW,OAAA;AAAA,YACX,KAAA,EACE,UAAA,mBACE,8BAAA,oBAAA,EAAA,EACG,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,qBAAA,mBACC,6BAAA,+CAAC,EAAA,EAAsB,OAAA,CAAgB;AAAA,YAAA,EAAA,CAE3C,CAAA;AAAA,YAGJ,cAAA,EAAe,SAAA;AAAA,YACf,WAAA;AAAA,YACA,IAAA;AAAA,YACA,KAAA,EAAO,YAAA;AAAA,YACP,QAAA;AAAA,YACA,MAAA;AAAA,YACA,GAAA;AAAA,YACA,OAAA,EAAQ,UAAA;AAAA,YAEP;AAAA,UAAA;AAAA,QACH,CAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,iBAAA,EAAQ,QAAA;AD7Cf;AACA;AEpEA,IAAOA,kBAAAA,EAAQ,gBAAA;AFsEf;AACA;AACE;AACA;AACF,2FAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4M6F2O2K.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Textarea as NextTextArea } from '@nextui-org/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 TextAreaProps {\n  /** Child components. The content of the textarea. */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** Determines if the TextArea is disabled or not. */\n  disabled?: boolean;\n  /** Label displayed above the TextArea. */\n  label?: ReactNode;\n  /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** placeholder for the textArea content. */\n  placeholder?: string;\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * TextArea component based on [NextUI TextArea](https://nextui.org/docs/components/textarea)\n */\nconst TextArea = ({\n  children = null,\n  className = undefined,\n  disabled = false,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  testId: _testId = undefined,\n}: TextAreaProps) => {\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      name={name}\n      disabled={disabled}\n      render={({\n        field: { disabled: isDisabled, onChange, onBlur, value = '', ref },\n      }) => {\n        /**\n         * Ensures the textarea always has a defined string value to prevent uncontrolled to\n         * controlled component warnings:\n         *\n         * 1. Warning Prevention:\n         *    - Sets default value to '' in field destructuring\n         *    - Guarantees the value prop is never undefined/null\n         *    - Prevents React warning: \"A component is changing from uncontrolled to controlled\"\n         *\n         * 2. Value Handling:\n         *    - Converts undefined/null to empty string\n         *    - Converts non-string values to strings\n         *    - Maintains existing string values\n         *\n         * Examples:\n         * - undefined → \"\" (prevents uncontrolled warning)\n         * - null → \"\" (prevents uncontrolled warning)\n         * - \"hello\" → \"hello\" (maintains string value)\n         * - 123 → \"123\" (converts to string)\n         *\n         * Without this handling, the textarea could switch between controlled/uncontrolled\n         * states when the form value changes from undefined to defined, causing React warnings\n         * and potential rendering issues.\n         */\n        const displayValue = value?.toString() ?? '';\n\n        return (\n          <NextTextArea\n            className={cn(className)}\n            classNames={{\n              inputWrapper: 'group-data-[focus=true]:border-focus',\n            }}\n            data-testid={testId}\n            errorMessage={error && <FieldValidationError error={error} />}\n            isDisabled={isDisabled}\n            isRequired={required}\n            isInvalid={invalid}\n            label={\n              showLabel && (\n                <>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </>\n              )\n            }\n            labelPlacement=\"outside\"\n            placeholder={placeholder}\n            name={name}\n            value={displayValue}\n            onChange={onChange}\n            onBlur={onBlur}\n            ref={ref}\n            variant=\"bordered\"\n          >\n            {children}\n          </NextTextArea>\n        );\n      }}\n    />\n  );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"]}

package/dist/{chunk-XJGJ5ZNM.js → chunk-7HK64PN5.js}

@@ -1,18 +1,22 @@
 import {
-  Controller
-} from "./chunk-KOKIM2ND.js";
+  Controller_default
+} from "./chunk-4EJS5FXY.js";
 import {
   FieldCopyTestIdButton_default
 } from "./chunk-2CRY7VDQ.js";
 import {
   FieldValidationError_default
-} from "./chunk-WKM2D7LF.js";
+} from "./chunk-VX76MJAI.js";
 import {
   useFormContext
-} from "./chunk-BZAPTLMC.js";
+} from "./chunk-MRXNKY72.js";
 import {
   slugify
-} from "./chunk-V46BHM2U.js";
+} from "./chunk-IEF2GJ22.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
 
 // src/CheckboxGroup/CheckboxGroup.tsx
 import {
@@ -61,15 +65,33 @@ var CheckboxGroup = ({
     label: classNames.label
   };
   return /* @__PURE__ */ jsx(
-    Controller,
+    Controller_default,
     {
       control,
       name,
       disabled,
-      render: ({ field: { onChange, value, ref, onBlur } }) => {
+      render: ({ field: { onChange, value = [], ref, onBlur } }) => {
+        const getCheckboxValue = (inputValue) => {
+          if (Array.isArray(inputValue)) {
+            return inputValue;
+          }
+          if (inputValue) {
+            return [inputValue];
+          }
+          return [];
+        };
+        const singleCheckboxProps = {
+          value: getCheckboxValue(value),
+          onChange: (newValue) => onChange(newValue && newValue[0])
+        };
+        const multipleCheckboxProps = {
+          onChange,
+          value: getCheckboxValue(value)
+        };
+        const checkboxGroupProps = options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;
         return /* @__PURE__ */ jsx(
           NextCheckboxGroup,
-          {
+          __spreadProps(__spreadValues({
             name,
             classNames: itemGroupClassName,
             "data-testid": testId,
@@ -89,32 +111,26 @@ var CheckboxGroup = ({
               label,
               showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
             ] }),
-            ...options.length === 1 ? {
-              value: [value].filter((v) => v !== void 0),
-              onChange: (newValue) => onChange(newValue && newValue[0])
-            } : {
-              onChange,
-              value
-            },
             onBlur,
-            ref,
-            children: options?.map((option) => {
+            ref
+          }, checkboxGroupProps), {
+            children: options == null ? void 0 : options.map((option) => {
               return /* @__PURE__ */ jsx(
                 Checkbox,
                 {
                   "data-invalid": invalid,
                   classNames: itemClassName,
                   isDisabled: disabled || option.disabled,
-                  value: option?.value,
+                  value: option == null ? void 0 : option.value,
                   "data-testid": slugify(
-                    `${testId}_option_${option?.testId || option?.value}`
+                    `${testId}_option_${(option == null ? void 0 : option.testId) || (option == null ? void 0 : option.value)}`
                   ),
-                  children: option?.label
+                  children: option == null ? void 0 : option.label
                 },
                 `index_${option.value}`
               );
             })
-          }
+          })
         );
       }
     }
@@ -129,4 +145,4 @@ export {
   CheckboxGroup_default,
   CheckboxGroup_default2
 };
-//# sourceMappingURL=chunk-XJGJ5ZNM.js.map
+//# sourceMappingURL=chunk-7HK64PN5.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport {\n  Checkbox,\n  CheckboxGroup as NextCheckboxGroup,\n} from '@nextui-org/checkbox';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { slugify } from '../helpers';\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 NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/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  /** 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 [NextUI CheckboxGroup](https://nextui.org/docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n  className = undefined,\n  label = undefined,\n  options,\n  disabled = false,\n  name,\n  testId: _testId = undefined,\n}: CheckboxGroupProps) => {\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  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  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          <NextCheckboxGroup\n            name={name}\n            classNames={itemGroupClassName}\n            data-testid={testId}\n            // See NextUI styles for group-data condition (data-invalid), e.g.: https://github.com/nextui-org/nextui/blob/main/packages/components/select/src/use-select.ts\n            data-invalid={invalid}\n            errorMessage={\n              error && (\n                <FieldValidationError\n                  error={error}\n                  className={classNames.errorMessage}\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            ref={ref}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...checkboxGroupProps}\n          >\n            {options?.map((option) => {\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={slugify(\n                    `${testId}_option_${option?.testId || option?.value}`,\n                  )}\n                >\n                  {option?.label}\n                </Checkbox>\n              );\n            })}\n          </NextCheckboxGroup>\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"],"mappings":"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","names":["CheckboxGroup_default"]}

package/dist/{chunk-OHJYXA6R.cjs → chunk-C4RM2JSD.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
+var _chunk4AXNPSXGcjs = require('./chunk-4AXNPSXG.cjs');
 
 // src/partials/FieldValidationError/FieldValidationError.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -25,7 +25,7 @@ var FieldValidationError = ({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "ul",
     {
-      "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, testId || errorStrings.join()),
+      "data-testid": _chunk4AXNPSXGcjs.slugify.call(void 0, testId || errorStrings.join()),
       "aria-label": ariaString,
       className,
       children: errorStrings.map((errorString, i) => (
@@ -44,4 +44,4 @@ var FieldValidationError_default2 = FieldValidationError_default;
 
 
 exports.FieldValidationError_default = FieldValidationError_default; exports.FieldValidationError_default2 = FieldValidationError_default2;
-//# sourceMappingURL=chunk-OHJYXA6R.cjs.map
+//# sourceMappingURL=chunk-C4RM2JSD.cjs.map