@fuf-stack/uniform 0.12.0 → 0.13.0

package/dist/{chunk-NL2RK5NJ.cjs → chunk-V644EZQT.cjs}

@@ -7,13 +7,12 @@ var _chunkOHJYXA6Rcjs = require('./chunk-OHJYXA6R.cjs');
 
 
 
-var _chunkD276MAWRcjs = require('./chunk-D276MAWR.cjs');
+var _chunkXJWEUCV3cjs = require('./chunk-XJWEUCV3.cjs');
 
 
 var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
 
 // src/FieldArray/FieldArray.tsx
-var _react = require('react');
 
 
 
@@ -34,7 +33,6 @@ var _input = require('@nextui-org/input');
 var _pixels = require('@fuf-stack/pixels');
 
 // src/FieldArray/FieldArrayField.tsx
-
 var _fa = require('react-icons/fa');
 
 var _utilities = require('@dnd-kit/utilities');
@@ -64,10 +62,9 @@ var FieldArrayField = ({
   };
   const {
     getFieldState,
-    // register,
-    watch,
+    // watch,
     trigger
-  } = _chunkD276MAWRcjs.useFormContext.call(void 0, );
+  } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
   const { error, invalid } = getFieldState(`${name}`, void 0);
   const { getHelperWrapperProps, getErrorMessageProps } = _input.useInput.call(void 0, {
     isInvalid: invalid,
@@ -76,88 +73,93 @@ var FieldArrayField = ({
     placeholder: " ",
     classNames: { helperWrapper: "block" }
   });
-  const formValues = watch();
-  _react.useEffect.call(void 0, () => {
-    trigger(`${name}.${index}`);
-  }, [JSON.stringify(formValues)]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { ref: setNodeRef, style, className, children: [
-      !hideButtons.includes("move") && !hideButtons.includes("all") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mr-6 flex flex-row items-center", children: [
-        moveField.includes("drag-drop") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "div",
-          {
-            className: "mr-2 text-base text-xl",
-            "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, `${name}_${index}_movebutton`),
-            ...attributes,
-            ...listeners,
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaGripLines, {})
-          }
-        ),
-        moveField.includes("button") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _pixels.Button,
-            {
-              testId: `${name}.${index}.up`,
-              disabled: index === 0,
-              onClick: () => move(index, index - 1),
-              className: "flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaAngleUp, {})
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _pixels.Button,
-            {
-              testId: `${name}.${index}.down`,
-              disabled: index === fields.length - 1,
-              onClick: () => move(index, index + 1),
-              className: "flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaAngleDown, {})
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-grow", "data-testid": testId, children }),
-          !hideButtons.includes("remove") && !hideButtons.includes("all") && (lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pixels.Button, { onClick: () => remove(index), className: "ml-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "svg",
-            {
-              className: "h-4 w-4",
-              xmlns: "http://www.w3.org/2000/svg",
-              viewBox: "0 0 20 20",
-              fill: "currentColor",
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "path",
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "li",
+      {
+        ref: setNodeRef,
+        style,
+        className,
+        onBlur: () => trigger(`${name}.${index}`),
+        children: [
+          !hideButtons.includes("move") && !hideButtons.includes("all") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mr-6 flex flex-row items-center", children: [
+            moveField.includes("drag-drop") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: "mr-2 text-base text-xl",
+                "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, `${name}_${index}_movebutton`),
+                ...attributes,
+                ...listeners,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaGripLines, {})
+              }
+            ),
+            moveField.includes("button") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _pixels.Button,
+                {
+                  testId: `${name}.${index}.up`,
+                  disabled: index === 0,
+                  onClick: () => move(index, index - 1),
+                  className: "flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaAngleUp, {})
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _pixels.Button,
                 {
-                  fillRule: "evenodd",
-                  d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
-                  clipRule: "evenodd"
+                  testId: `${name}.${index}.down`,
+                  disabled: index === fields.length - 1,
+                  onClick: () => move(index, index + 1),
+                  className: "flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaAngleDown, {})
                 }
               )
-            }
-          ) }))
-        ] }),
-        !hideButtons.includes("insert") && !hideButtons.includes("all") && index !== fields.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _pixels.Button,
-          {
-            className: "text-xs font-medium",
-            testId: `add-harbor-button-${index}`,
-            onClick: () => {
-              insert(index + 1, {});
-            },
-            children: "insert"
-          }
-        ) : null
-      ] }, `rest-${field.id}`)
-    ] }),
+            ] })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full", children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-grow", "data-testid": testId, children }),
+              !hideButtons.includes("remove") && !hideButtons.includes("all") && (lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pixels.Button, { onClick: () => remove(index), className: "ml-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "svg",
+                {
+                  className: "h-4 w-4",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              ) }))
+            ] }),
+            !hideButtons.includes("insert") && !hideButtons.includes("all") && index !== fields.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _pixels.Button,
+              {
+                className: "text-xs font-medium",
+                testId: `add-harbor-button-${index}`,
+                onClick: () => {
+                  insert(index + 1, {});
+                },
+                children: "insert"
+              }
+            ) : null
+          ] }, `rest-${field.id}`)
+        ]
+      }
+    ),
     error && typeof error[index] !== "undefined" && // // @ts-expect-error rhf incompatibility
     // error[Number(index)]?._errors && ( // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)
     // eslint-disable-next-line react/jsx-props-no-spreading
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getErrorMessageProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _chunkOHJYXA6Rcjs.FieldValidationError_default,
       {
-        error: _optionalChain([error, 'access', _ => _[Number(index)], 'optionalAccess', _2 => _2._errors]) || error[Number(index)]
+        error: _optionalChain([error, 'access', _ => _[Number(index)], 'optionalAccess', _2 => _2._errors])
       }
     ) }) })
   ] });
@@ -180,19 +182,14 @@ var FieldArray = ({
     debugMode,
     getValues,
     getFieldState,
-    // register,
-    trigger,
-    watch
-  } = _chunkD276MAWRcjs.useFormContext.call(void 0, );
-  const { fields, append, remove, insert, move } = _chunkD276MAWRcjs.useFieldArray.call(void 0, {
+    trigger
+    // watch
+  } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
+  const { fields, append, remove, insert, move } = _chunkXJWEUCV3cjs.useFieldArray.call(void 0, {
     control,
     name
   });
   const { error, testId, invalid, required } = getFieldState(name, _testId);
-  const formValues = watch();
-  _react.useEffect.call(void 0, () => {
-    trigger(`${name}`);
-  }, [JSON.stringify(formValues)]);
   const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _input.useInput.call(void 0, {
     isInvalid: invalid,
     isRequired: required,
@@ -231,7 +228,7 @@ var FieldArray = ({
         {
           items: fields.map((field) => field.id),
           strategy: _sortable.verticalListSortingStrategy,
-          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "ul", { "data-testid": testId, children: [
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "ul", { "data-testid": testId, onBlur: () => trigger(`${name}`), children: [
             showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "label",
@@ -302,4 +299,4 @@ var FieldArray_default2 = FieldArray_default;
 
 
 exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
-//# sourceMappingURL=chunk-NL2RK5NJ.cjs.map
+//# sourceMappingURL=chunk-V644EZQT.cjs.map

package/dist/chunk-V644EZQT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-V644EZQT.cjs","../src/FieldArray/FieldArray.tsx","../src/FieldArray/FieldArrayField.tsx","../src/FieldArray/index.ts"],"names":["jsx","Button"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-V644EZQT.cjs","sourcesContent":[null,"import type { DragEndEvent } from '@dnd-kit/core';\nimport type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\n\n// import { useEffect } from 'react';\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';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFieldArray, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayField from './FieldArrayField';\n\nexport type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';\nexport type FieldArrayFieldChildren = (\n  name: string,\n  index: number,\n  length: number,\n  move: UseFieldArrayMove,\n  insert: UseFieldArrayInsert<FieldValues, string>,\n  remove: UseFieldArrayRemove,\n  duplicate: (i: number) => void,\n) => JSX.Element;\n\nexport type MoveField = 'drag-drop' | 'button';\n\nexport interface FieldArrayProps {\n  /** function that renders the children with provided Properties. */\n  children: FieldArrayFieldChildren;\n  /** Hide a set of buttons. */\n  hideButtons?: FieldArrayHideOption[];\n  /** label of the FieldArray. */\n  label?: React.ReactNode;\n  /** stops user from deleting all items. */\n  lastNotDeletable?: boolean;\n  /** name the FieldArray is registered in RHF */\n  name: string;\n  /** ID for test purposes. */\n  testId?: string;\n  /* how the fields can be moved */\n  moveField: MoveField[];\n}\n\n/**\n * FieldArray component using react-hook-form\n */\nconst FieldArray = ({\n  children,\n  hideButtons = [],\n  label: _label = undefined,\n  lastNotDeletable = true,\n  name,\n  testId: _testId = undefined,\n  moveField = ['button'],\n}: FieldArrayProps) => {\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  // const _formValues = watch();\n\n  // useEffect(() => {\n  //   trigger(`${name}`);\n  //   // eslint-disable-next-line react-hooks/exhaustive-deps\n  // }, [JSON.stringify(fields)]);\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  if (lastNotDeletable && fields.length === 0) {\n    append({});\n  }\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (active.id !== over?.id) {\n      const oldIndex = fields.findIndex((field) => field.id === active.id);\n      const newIndex = fields.findIndex((field) => field.id === over?.id);\n      move(oldIndex, newIndex);\n    }\n  };\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n    >\n      <SortableContext\n        items={fields.map((field) => field.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        <ul data-testid={testId} onBlur={() => trigger(`${name}`)}>\n          {showLabel && (\n            // eslint-disable-next-line jsx-a11y/label-has-associated-control\n            <label\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...getLabelProps()}\n              className={`${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`}\n            >\n              {label}\n            </label>\n          )}\n          {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n\n          {fields.map((field, index) => {\n            const duplicate = (i: number) => {\n              const values = getValues(name);\n              insert(i + 1, { ...values[i], id: null });\n            };\n\n            return (\n              <FieldArrayField\n                id={field.id}\n                key={field.id}\n                testId={`${testId}_${index}`}\n                className=\"mb-3 mt-5 flex flex-row items-center\"\n                field={field}\n                fields={fields}\n                hideButtons={hideButtons}\n                index={index}\n                insert={insert}\n                lastNotDeletable={lastNotDeletable}\n                move={move}\n                moveField={moveField}\n                name={name}\n                remove={remove}\n              >\n                {children(\n                  `${name}[${index}]`,\n                  index,\n                  fields.length,\n                  move,\n                  insert,\n                  remove,\n                  duplicate,\n                )}\n              </FieldArrayField>\n            );\n          })}\n\n          {!hideButtons.includes('add') && !hideButtons.includes('all') && (\n            <Button\n              testId={`${testId}_append`}\n              size=\"sm\"\n              onClick={() => append({})}\n            >\n              Add\n            </Button>\n          )}\n          {/* @ts-expect-error rhf incompatibility */}\n          {error?._errors && (\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            <div {...getHelperWrapperProps()}>\n              {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n              <div {...getErrorMessageProps()}>\n                {/* @ts-expect-error rhf incompatibility */}\n                <FieldValidationError error={error?._errors} />\n              </div>\n            </div>\n          )}\n        </ul>\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default FieldArray;\n","import type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\nimport type { FieldArrayHideOption, MoveField } from './FieldArray';\n\n// import { useEffect } from 'react';\nimport { FaAngleDown, FaAngleUp, FaGripLines } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ninterface FieldArrayFieldProps {\n  children: React.ReactNode;\n  className?: string;\n  field: Record<'id', string>;\n  fields: Record<'id', string>[];\n  hideButtons?: FieldArrayHideOption[];\n  id: string | number;\n  index: number;\n  insert: UseFieldArrayInsert<FieldValues, string>;\n  lastNotDeletable?: boolean;\n  move: UseFieldArrayMove;\n  moveField: MoveField[];\n  testId?: string;\n  name: string;\n  remove: UseFieldArrayRemove;\n}\n\n/**\n * FieldArrayField component using react-hook-form\n */\nconst FieldArrayField = ({\n  children,\n  className = undefined,\n  field,\n  fields,\n  hideButtons = [],\n  id,\n  index,\n  insert,\n  lastNotDeletable = true,\n  move,\n  moveField,\n  name,\n  remove,\n  testId = undefined,\n}: FieldArrayFieldProps) => {\n  const { attributes, listeners, setNodeRef, transform, transition } =\n    useSortable({ id });\n\n  const style = {\n    transform: CSS.Translate.toString(transform),\n    transition,\n  };\n\n  const {\n    getFieldState,\n    // watch,\n    trigger,\n  } = 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    isInvalid: invalid,\n    errorMessage: JSON.stringify(error),\n    labelPlacement: 'inside',\n    placeholder: ' ',\n    classNames: { helperWrapper: 'block' },\n  });\n\n  // const _formValues = watch();\n  // useEffect(() => {\n  //   trigger(`${name}.${index}`);\n  //   // eslint-disable-next-line react-hooks/exhaustive-deps\n  // }, [JSON.stringify(formValues)]);\n\n  return (\n    <>\n      <li\n        ref={setNodeRef}\n        style={style}\n        className={className}\n        onBlur={() => trigger(`${name}.${index}`)}\n      >\n        {/** Start Button up/down */}\n        {!hideButtons.includes('move') && !hideButtons.includes('all') && (\n          <div className=\"mr-6 flex flex-row items-center\">\n            {moveField.includes('drag-drop') && (\n              <div\n                className=\"mr-2 text-base text-xl\"\n                data-testid={slugify(`${name}_${index}_movebutton`)}\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                <FaGripLines />\n              </div>\n            )}\n            {moveField.includes('button') && (\n              <div className=\"flex flex-col\">\n                <Button\n                  testId={`${name}.${index}.up`}\n                  disabled={index === 0}\n                  onClick={() => move(index, index - 1)}\n                  className=\"flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleUp />\n                </Button>\n                <Button\n                  testId={`${name}.${index}.down`}\n                  disabled={index === fields.length - 1}\n                  onClick={() => move(index, index + 1)}\n                  className=\"flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleDown />\n                </Button>\n              </div>\n            )}\n          </div>\n        )}\n        {/** End Button up/down */}\n        <div key={`rest-${field.id}`} className=\"w-full\">\n          <div className=\"mb-2 flex items-center\">\n            {/** RENDER CHILDREN */}\n            <div className=\"flex-grow\" data-testid={testId}>\n              {children}\n            </div>\n            {!hideButtons.includes('remove') &&\n              !hideButtons.includes('all') &&\n              (lastNotDeletable && fields.length === 1 ? null : (\n                <Button onClick={() => remove(index)} className=\"ml-1\">\n                  <svg\n                    className=\"h-4 w-4\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </Button>\n              ))}\n          </div>\n\n          {!hideButtons.includes('insert') &&\n          !hideButtons.includes('all') &&\n          index !== fields.length - 1 ? (\n            <Button\n              className=\"text-xs font-medium\"\n              testId={`add-harbor-button-${index}`}\n              onClick={() => {\n                insert(index + 1, {});\n              }}\n            >\n              insert\n            </Button>\n          ) : null}\n        </div>\n      </li>\n      {error && typeof error[index] !== 'undefined' && (\n        // // @ts-expect-error rhf incompatibility\n        // error[Number(index)]?._errors && ( // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        <div {...getHelperWrapperProps()}>\n          {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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};\nexport default FieldArrayField;\n","import FieldArray from './FieldArray';\n\nexport type {\n  FieldArrayProps,\n  FieldArrayHideOption,\n  FieldArrayFieldChildren,\n} from './FieldArray';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"]}

package/dist/{chunk-KGTNPZZO.js → chunk-VP7WDLJM.js}

@@ -1,7 +1,8 @@
 import {
   FormContext_default,
+  removeNullishFields,
   useFormContext
-} from "./chunk-INTF7ABH.js";
+} from "./chunk-BZAPTLMC.js";
 import {
   slugify
 } from "./chunk-V46BHM2U.js";
@@ -25,7 +26,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
     watch
   } = useFormContext();
   const [validationErrors, setValidationErrors] = useState(null);
-  const formValues = watch();
+  const formValues = removeNullishFields(watch());
   const debugTestIdsEnabled = debugMode === "debug-testids";
   useEffect(
     () => {
@@ -143,4 +144,4 @@ export {
   Form_default,
   Form_default2
 };
-//# sourceMappingURL=chunk-KGTNPZZO.js.map
+//# sourceMappingURL=chunk-VP7WDLJM.js.map

package/dist/chunk-VP7WDLJM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit }) => (\n        <div className=\"flex w-full flex-row justify-between gap-6\">\n          <form\n            className={cn('flex-grow', className)}\n            data-testid={slugify(testId || name || '')}\n            name={name}\n            onSubmit={handleSubmit}\n          >\n            {children}\n          </form>\n          {!debug?.disable && <FormDebugViewer className=\"w-96 flex-shrink\" />}\n        </div>\n      )}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button, Card, Json } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\nimport { removeNullishFields } from './FormContext';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { dirtyFields, isValid, isSubmitting },\n    setDebugMode,\n    validation,\n    watch,\n  } = useFormContext();\n\n  const [validationErrors, setValidationErrors] = useState<\n    VetoError['errors'] | null\n  >(null);\n\n  const formValues = removeNullishFields(watch());\n  const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n  useEffect(\n    () => {\n      const updateValidationErrors = async () => {\n        if (validation) {\n          const validateResult = await validation?.validateAsync(formValues);\n          setValidationErrors(validateResult?.errors);\n        }\n      };\n      updateValidationErrors();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(formValues)],\n  );\n\n  if (!debugMode || debugMode === 'off') {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        onClick={() => setDebugMode('debug')}\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        variant=\"light\"\n        icon={<FaBug />}\n      />\n    );\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            icon={<FaTimes className=\"text-danger\" />}\n            onClick={() => setDebugMode('off')}\n            size=\"sm\"\n            variant=\"flat\"\n          />\n        </div>\n      }\n    >\n      <Button\n        variant={debugTestIdsEnabled ? 'solid' : 'light'}\n        icon={<FaBullseye />}\n        className=\"mb-4 ml-auto mr-auto\"\n        onClick={() =>\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug')\n        }\n      >\n        {debugTestIdsEnabled ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values: formValues,\n          errors: validationErrors,\n          dirtyFields,\n          isValid,\n          isSubmitting,\n        }}\n      />\n    </Card>\n  );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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","names":["cn","jsx","jsxs","cn","Form_default"]}

package/dist/{chunk-IQ4V57MX.cjs → chunk-VZ5MMFIF.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkD276MAWRcjs = require('./chunk-D276MAWR.cjs');
+var _chunkXJWEUCV3cjs = require('./chunk-XJWEUCV3.cjs');
 
 
 var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
@@ -20,7 +20,7 @@ var SubmitButton = ({
 }) => {
   const {
     formState: { isSubmitting, isValidating }
-  } = _chunkD276MAWRcjs.useFormContext.call(void 0, );
+  } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _pixels.Button,
     {
@@ -45,4 +45,4 @@ var SubmitButton_default2 = SubmitButton_default;
 
 
 exports.SubmitButton_default = SubmitButton_default; exports.SubmitButton_default2 = SubmitButton_default2;
-//# sourceMappingURL=chunk-IQ4V57MX.cjs.map
+//# sourceMappingURL=chunk-VZ5MMFIF.cjs.map

package/dist/{chunk-IQ4V57MX.cjs.map → chunk-VZ5MMFIF.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-IQ4V57MX.cjs","../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"names":["SubmitButton_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACJA,oDAAmB;AACnB,2CAAuB;AAsCnB,+CAAA;AAbJ,IAAM,aAAA,EAAe,CAAC;AAAA,EACpB,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,MAAA,EAAQ,SAAA;AAAA,EACR,QAAA,EAAU,KAAA;AAAA,EACV,QAAA,EAAU,KAAA,CAAA;AAAA,EACV,KAAA,EAAO,IAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA,EAAA,GAAyB;AACvB,EAAA,MAAM;AAAA,IACJ,SAAA,EAAW,EAAE,YAAA,EAAc,aAAa;AAAA,EAC1C,EAAA,EAAI,8CAAA,CAAe;AACnB,EAAA,uBACE,6BAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,MACvB,KAAA;AAAA,MACA,MAAA,EAAQ,uCAAA,MAAc,CAAA;AAAA,MACtB,QAAA,EAAU,aAAA,GAAgB,YAAA;AAAA,MAC1B,OAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,qBAAA,EAAQ,YAAA;ADlBf;AACA;AElCA,IAAOA,sBAAAA,EAAQ,oBAAA;AFoCf;AACA;AACE;AACA;AACF,2GAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-IQ4V57MX.cjs","sourcesContent":[null,"import type { ButtonProps } from '@fuf-stack/pixels';\nimport type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** color of the button */\n  color?: ButtonProps['color'];\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** function called when the button is pressed. */\n  onClick?: ButtonProps['onClick'];\n  /** size of the button */\n  size?: ButtonProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n  children = 'Submit',\n  className = undefined,\n  color = 'success',\n  loading = false,\n  onClick = undefined,\n  size = 'md',\n  testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n  const {\n    formState: { isSubmitting, isValidating },\n  } = useFormContext();\n  return (\n    <Button\n      className={cn(className)}\n      color={color}\n      testId={slugify(testId)}\n      disabled={isSubmitting || isValidating}\n      loading={loading}\n      onClick={onClick}\n      size={size}\n      type=\"submit\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"]}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-VZ5MMFIF.cjs","../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"names":["SubmitButton_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACJA,oDAAmB;AACnB,2CAAuB;AAsCnB,+CAAA;AAbJ,IAAM,aAAA,EAAe,CAAC;AAAA,EACpB,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,MAAA,EAAQ,SAAA;AAAA,EACR,QAAA,EAAU,KAAA;AAAA,EACV,QAAA,EAAU,KAAA,CAAA;AAAA,EACV,KAAA,EAAO,IAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA,EAAA,GAAyB;AACvB,EAAA,MAAM;AAAA,IACJ,SAAA,EAAW,EAAE,YAAA,EAAc,aAAa;AAAA,EAC1C,EAAA,EAAI,8CAAA,CAAe;AACnB,EAAA,uBACE,6BAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,MACvB,KAAA;AAAA,MACA,MAAA,EAAQ,uCAAA,MAAc,CAAA;AAAA,MACtB,QAAA,EAAU,aAAA,GAAgB,YAAA;AAAA,MAC1B,OAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,qBAAA,EAAQ,YAAA;ADlBf;AACA;AElCA,IAAOA,sBAAAA,EAAQ,oBAAA;AFoCf;AACA;AACE;AACA;AACF,2GAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-VZ5MMFIF.cjs","sourcesContent":[null,"import type { ButtonProps } from '@fuf-stack/pixels';\nimport type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** color of the button */\n  color?: ButtonProps['color'];\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** function called when the button is pressed. */\n  onClick?: ButtonProps['onClick'];\n  /** size of the button */\n  size?: ButtonProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n  children = 'Submit',\n  className = undefined,\n  color = 'success',\n  loading = false,\n  onClick = undefined,\n  size = 'md',\n  testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n  const {\n    formState: { isSubmitting, isValidating },\n  } = useFormContext();\n  return (\n    <Button\n      className={cn(className)}\n      color={color}\n      testId={slugify(testId)}\n      disabled={isSubmitting || isValidating}\n      loading={loading}\n      onClick={onClick}\n      size={size}\n      type=\"submit\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"]}

package/dist/{chunk-CMRP3HEK.js → chunk-XJGJ5ZNM.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-WKM2D7LF.js";
 import {
   useFormContext
-} from "./chunk-INTF7ABH.js";
+} from "./chunk-BZAPTLMC.js";
 import {
   slugify
 } from "./chunk-V46BHM2U.js";
@@ -129,4 +129,4 @@ export {
   CheckboxGroup_default,
   CheckboxGroup_default2
 };
-//# sourceMappingURL=chunk-CMRP3HEK.js.map
+//# sourceMappingURL=chunk-XJGJ5ZNM.js.map

package/dist/{chunk-D276MAWR.cjs → chunk-XJWEUCV3.cjs}

@@ -17,7 +17,7 @@ var _jsxruntime = require('react/jsx-runtime');
 var removeNullishFields = (obj) => {
   return JSON.parse(
     JSON.stringify(obj, (_key, value) => {
-      return value === null ? void 0 : value;
+      return value === "" || value === null ? void 0 : value;
     })
   );
 };
@@ -128,5 +128,6 @@ var useFormContext = () => {
 
 
 
-exports.useFieldArray = _reacthookform.useFieldArray; exports.FormContext_default = FormContext_default; exports.checkFieldIsRequired = checkFieldIsRequired; exports.useFormContext = useFormContext;
-//# sourceMappingURL=chunk-D276MAWR.cjs.map
+
+exports.useFieldArray = _reacthookform.useFieldArray; exports.removeNullishFields = removeNullishFields; exports.FormContext_default = FormContext_default; exports.checkFieldIsRequired = checkFieldIsRequired; exports.useFormContext = useFormContext;
+//# sourceMappingURL=chunk-XJWEUCV3.cjs.map

package/dist/chunk-XJWEUCV3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-XJWEUCV3.cjs","../src/hooks/useFieldArray/useFieldArray.ts","../src/hooks/useFormContext/useFormContext.ts","../src/Form/subcomponents/FormContext.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-XJWEUCV3.cjs","sourcesContent":[null,"/* eslint-disable import/prefer-default-export */\n\n/** @see https://react-hook-form.com/docs/usefieldarray */\nexport { useFieldArray } from 'react-hook-form';\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { FieldError } from 'react-hook-form';\n\nimport { useContext } from 'react';\nimport { useFormContext as useHookFormContext } from 'react-hook-form';\n\nimport { UniformContext } from '../../Form/subcomponents/FormContext';\nimport { slugify } from '../../helpers';\n\n/** Schema check whether a field is required or optional */\nexport const checkFieldIsRequired = (\n  validation: VetoInstance,\n  path: string[],\n): boolean => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const checkRequired = (schema: any) => {\n    // arrays with minLength are required\n    if (schema.type === 'array' && schema?.minLength) {\n      return true;\n    }\n    // all other fields are required if they are\n    // not optional and not nullable\n    return !schema.isOptional && !schema.isNullable;\n  };\n\n  return validation.checkSchemaPath(checkRequired, path);\n};\n\n/**\n * Custom hook that extends react-hook-form's useFormContext to add validation and state management.\n */\nexport const useFormContext = () => {\n  const {\n    formState,\n    // https://react-hook-form.com/docs/useform/getfieldstate\n    // for getFieldState a subscription to formState properties is needed!\n    getFieldState: getFieldStateOrig,\n    ...otherMethods\n  } = useHookFormContext();\n\n  const uniformContext = useContext(UniformContext);\n\n  /**\n   * Updated getFieldState method which returns:\n   * - Whether the field is required by checking the validation schema\n   * - Existing field state information (errors, etc.)\n   */\n  const getFieldState = (name: string, testId?: string) => {\n    const fieldPath =\n      typeof name === 'string' ? name.replace(/\\[\\d+\\]/g, '').split('.') : name;\n\n    // Check if the field is required using the validation schema\n    const required = uniformContext?.validation\n      ? checkFieldIsRequired(uniformContext.validation, fieldPath)\n      : false;\n\n    // Get the original field state (errors, etc.) from react-hook-form\n    const { error, ...rest } = getFieldStateOrig(name, formState);\n\n    return {\n      ...rest,\n      error: error as FieldError[] | undefined, // Ensure correct type for error\n      required,\n      testId: slugify(testId || name),\n    };\n  };\n\n  return {\n    ...otherMethods,\n    ...uniformContext,\n    getFieldState,\n    formState,\n  };\n};\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport React, { useMemo, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n  return JSON.parse(\n    JSON.stringify(obj, (_key, value) => {\n      return value === '' || value === null ? undefined : value;\n    }),\n  );\n};\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport type DebugModeSettings = {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n};\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n *    form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n *    that can be used to validate form fields and handle validation logic.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n */\nexport const UniformContext = React.createContext<{\n  /** Form debug mode enabled or not */\n  debugMode: DebugMode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** Function to update if the form can currently be submitted */\n  preventSubmit: (prevent: boolean) => void;\n  /** Setter to enable or disable form debug mode */\n  setDebugMode: (debugMode: DebugMode) => void;\n  /** Optional Veto validation schema instance for form validation */\n  validation?: VetoInstance;\n}>({\n  debugMode: 'off',\n  preventSubmit: () => undefined,\n  setDebugMode: () => undefined,\n  validation: undefined,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n  /** children form render function */\n  children: (childProps: {\n    handleSubmit: (e?: React.BaseSyntheticEvent) => Promise<void>;\n  }) => ReactNode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** Veto validation schema instance */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - The veto validation schema context\n * - Submit handler creation and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n  children,\n  debugModeSettings = undefined,\n  initialValues = undefined,\n  onSubmit,\n  validation = undefined,\n  validationTrigger,\n}) => {\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // Form Debug mode state is handled in the form context\n  const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n    debugModeSettings?.localStorageKey || DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n    'off',\n  );\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => ({\n      // set debugMode to disabled when debugModeSettings.disable is true\n      // otherwise use current debug mode from localStorage\n      debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n      preventSubmit: (prevent: boolean) => {\n        setPreventSubmit(prevent);\n      },\n      setDebugMode,\n      validation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [debugMode, debugModeSettings?.disable],\n  );\n\n  // Initialize react hook form\n  const methods = useForm({\n    defaultValues: initialValues,\n    // add validation config when validation schema provided\n    ...(validation\n      ? {\n          // set rhf mode\n          // see: https://react-hook-form.com/docs/useform#mode\n          mode: validationTrigger,\n          resolver: async (values) => {\n            const { data, errors, ...rest } = await validation.validateAsync(\n              removeNullishFields(values),\n            );\n            // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n            return { values: data || {}, errors: errors || {}, ...rest };\n          },\n        }\n      : {}),\n  });\n\n  // Create submit handler\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    // only prevent submit when form state is valid, because otherwise\n    // submit will only trigger validation and add errors / focus invalid fields\n    if (methods.formState.isValid && preventSubmit) {\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n    await methods.handleSubmit(onSubmit)(e); // TODO: removeNullishFields here? @Hannes\n  };\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n"]}

package/dist/{chunk-ANXGDI6O.cjs → chunk-XJZAS7NG.cjs}

@@ -9,7 +9,7 @@ var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
 var _chunkOHJYXA6Rcjs = require('./chunk-OHJYXA6R.cjs');
 
 
-var _chunkD276MAWRcjs = require('./chunk-D276MAWR.cjs');
+var _chunkXJWEUCV3cjs = require('./chunk-XJWEUCV3.cjs');
 
 
 var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
@@ -134,7 +134,7 @@ var RadioGroup = ({
   testId: _testId = void 0,
   variant = "default"
 }) => {
-  const { control, debugMode, getFieldState, getValues } = _chunkD276MAWRcjs.useFormContext.call(void 0, );
+  const { control, debugMode, getFieldState, getValues } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
   const { error, invalid, required, testId } = getFieldState(name, _testId);
   const showTestIdCopyButton = debugMode === "debug-testids";
   const showLabel = label || showTestIdCopyButton;
@@ -276,4 +276,4 @@ var RadioGroup_default2 = RadioGroup_default;
 
 
 exports.RadioGroup_default = RadioGroup_default; exports.RadioGroup_default2 = RadioGroup_default2;
-//# sourceMappingURL=chunk-ANXGDI6O.cjs.map
+//# sourceMappingURL=chunk-XJZAS7NG.cjs.map

package/dist/{chunk-ANXGDI6O.cjs.map → chunk-XJZAS7NG.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-ANXGDI6O.cjs","../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/Variants/RadioBox.tsx","../src/RadioGroup/Variants/RadioButton.tsx","../src/RadioGroup/index.ts"],"names":["jsx","cn"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-ANXGDI6O.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as NextRadioGroup, Radio } from '@nextui-org/radio';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { ButtonGroup } from '@fuf-stack/pixels';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { Controller } from '../Controller';\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './Variants/RadioBox';\nimport { RadioButton } from './Variants/RadioButton';\n\nexport const radioGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    buttonGroup:\n      'rounded-xl group-data-[invalid=true]:border group-data-[invalid=true]:border-danger', // optional if a button group is used\n    itemBase: '',\n    itemBaseActive: 'bg-opacity-50', // optional if a button group is used\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 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    // Tabs\n    tabList: '',\n    tab: '',\n    tabContent: '',\n    cursor: '',\n    panel: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioGroupVariants>;\ntype ClassName = TVClassName<typeof radioGroupVariants>;\n\nexport interface RadioGroupOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: React.ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: React.ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioGroupProps<\n  V extends 'default' | 'radioBox' | 'radioButton' | 'tabs',\n> 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: V extends 'default' | 'radioBox' | 'radioButton'\n    ? RadioGroupOption[]\n    : TabProps[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioGroup should look like. */\n  variant?: V;\n}\n\n/**\n * RadioGroup component based on [NextUI RadioGroup](https://nextui.org/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  variant = 'default',\n}: RadioGroupProps<\n  'default' | 'radioBox' | 'radioButton' | 'tabs'\n>): 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        let RadioComponents: ReactNode;\n\n        const itemClassNames = {\n          base: classNames.itemBase,\n          control: classNames.itemControl,\n          description: classNames.itemDescription,\n          label: classNames.itemLabel,\n          labelWrapper: classNames.itemLabelWrapper,\n          wrapper: classNames.itemWrapper,\n          tabList: classNames.tabList,\n          tab: classNames.tab,\n          tabContent: classNames.tabContent,\n          cursor: classNames.cursor,\n          panel: classNames.panel,\n        };\n\n        switch (variant) {\n          case 'radioBox':\n            RadioComponents = options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <RadioBox\n                    classNames={itemClassNames}\n                    data-testid={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    description={option.description}\n                    icon={option.icon}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    onChange={onChange}\n                    value={option.value}\n                  >\n                    {option.label ? option.label : option.value}\n                  </RadioBox>\n                );\n              }\n              return null;\n            });\n            break;\n          case 'radioButton':\n            RadioComponents = options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <RadioButton\n                    className={cn(classNames.itemBase, {\n                      [classNames.itemBaseActive]:\n                        getValues()[name] !== option.value,\n                    })}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    testID={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    onChange={onChange}\n                    value={option.value}\n                    // TODO: how to do the classNames properly (make selected option darker with same color)\n                  >\n                    {option.label ? option.label : option.value}\n                  </RadioButton>\n                );\n              }\n              return null;\n            });\n            break;\n\n          case 'tabs':\n            RadioComponents = (\n              <Tabs\n                fullWidth={false}\n                tabs={options as TabProps[]}\n                onSelectionChange={onChange}\n              />\n            );\n            break;\n          default:\n            RadioComponents = 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        }\n\n        return (\n          <NextRadioGroup\n            classNames={classNames}\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            data-required={required}\n            data-testid={testId}\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            onChange={onChange}\n            ref={ref}\n          >\n            {variant === 'radioButton' ? (\n              <ButtonGroup className={classNames.buttonGroup}>\n                {RadioComponents}\n              </ButtonGroup>\n            ) : (\n              RadioComponents\n            )}\n          </NextRadioGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default RadioGroup;\n","import type { RadioProps as NextRadioProps } from '@nextui-org/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@nextui-org/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends NextRadioProps {\n  /** icon for the option */\n  icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props);\n\n  return (\n    <Component\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...getBaseProps()}\n      className={cn(\n        'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n        {\n          // disabled styles\n          'pointer-events-none opacity-disabled': isDisabled,\n        },\n      )}\n    >\n      <VisuallyHidden>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n      <span {...getWrapperProps()}>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <span {...getControlProps()} />\n      </span>\n      {icon}\n      <div\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...getLabelWrapperProps()}\n        className={cn(getLabelWrapperProps().className, 'grow')}\n      >\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        {children && <span {...getLabelProps()}>{children}</span>}\n        {description && (\n          <span className=\"text-small text-foreground opacity-70\">\n            {description}\n          </span>\n        )}\n      </div>\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface RadioButtonProps {\n  /** label of the value. */\n  children: React.ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** disables the option */\n  isDisabled?: boolean;\n  /** HTML data-testid attribute of the option */\n  testID?: string;\n  /** Callback function. Executed if the option is clicked. */\n  onChange: (...event: unknown[]) => void;\n  /** value of the option. */\n  value: string;\n}\n\nexport const RadioButton = ({\n  children,\n  className = undefined,\n  isDisabled = false,\n  onChange,\n  testID = undefined,\n  value,\n}: RadioButtonProps) => {\n  return (\n    <Button\n      className={cn(className)}\n      testId={testID}\n      disabled={isDisabled}\n      key={`index_${value}`}\n      onClick={() => {\n        return onChange(value);\n      }}\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default RadioButton;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"]}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-XJZAS7NG.cjs","../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/Variants/RadioBox.tsx","../src/RadioGroup/Variants/RadioButton.tsx","../src/RadioGroup/index.ts"],"names":["jsx","cn"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACZA,0CAAoD;AAEpD,oDAA6C;AAC7C,2CAA4B;AAC5B,0FAAiB;ADajB;AACA;AEnBA;AACA,6DAA+B;AAE/B;AAmCQ,+CAAA;AA5BD,IAAM,SAAA,EAAW,CAAC,EAAE,KAAA,EAAO,KAAA,CAAA,EAAW,GAAG,MAAM,CAAA,EAAA,GAAkB;AACtE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,oBAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,EACF,EAAA,EAAI,6BAAA,KAAc,CAAA;AAElB,EAAA,uBACE,8BAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MAEE,GAAG,YAAA,CAAa,CAAA;AAAA,MACjB,SAAA,EAAW,4BAAA;AAAA,QACT,0KAAA;AAAA,QACA;AAAA;AAAA,UAEE,sCAAA,EAAwC;AAAA,QAC1C;AAAA,MACF,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,6BAAA,8BAAC,EAAA,EAEC,QAAA,kBAAA,6BAAA,OAAC,EAAA,EAAO,GAAG,aAAA,CAAc,EAAA,CAAG,EAAA,CAC9B,CAAA;AAAA,wBAEA,6BAAA,MAAC,EAAA,EAAM,GAAG,eAAA,CAAgB,CAAA,EAExB,QAAA,kBAAA,6BAAA,MAAC,EAAA,EAAM,GAAG,eAAA,CAAgB,EAAA,CAAG,EAAA,CAC/B,CAAA;AAAA,QACC,IAAA;AAAA,wBACD,8BAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEE,GAAG,oBAAA,CAAqB,CAAA;AAAA,YACzB,SAAA,EAAW,4BAAA,oBAAG,CAAqB,CAAA,CAAE,SAAA,EAAW,MAAM,CAAA;AAAA,YAGrD,QAAA,EAAA;AAAA,cAAA,SAAA,mBAAY,6BAAA,MAAC,EAAA,EAAM,GAAG,aAAA,CAAc,CAAA,EAAI,SAAA,CAAS,CAAA;AAAA,cACjD,YAAA,mBACC,6BAAA,MAAC,EAAA,EAAK,SAAA,EAAU,uCAAA,EACb,QAAA,EAAA,YAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,CAAA;AAEJ,CAAA;AFMA;AACA;AGvEA;AACA;AA0BI;AATG,IAAM,YAAA,EAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,WAAA,EAAa,KAAA;AAAA,EACb,QAAA;AAAA,EACA,OAAA,EAAS,KAAA,CAAA;AAAA,EACT;AACF,CAAA,EAAA,GAAwB;AACtB,EAAA,uBACEA,6BAAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,4BAAAA,SAAY,CAAA;AAAA,MACvB,MAAA,EAAQ,MAAA;AAAA,MACR,QAAA,EAAU,UAAA;AAAA,MAEV,OAAA,EAAS,CAAA,EAAA,GAAM;AACb,QAAA,OAAO,QAAA,CAAS,KAAK,CAAA;AAAA,MACvB,CAAA;AAAA,MAEC;AAAA,IAAA,CAAA;AAAA,IALI,CAAA,MAAA,EAAS,KAAK,CAAA;AAAA,EAAA;AAQzB;AH0DA;AACA;ACuCkB;AAvHX;AAA8B,EAAA;AAC5B,IAAA;AACC;AAAA,IAAA;AAEJ;AAAA,IAAA;AACQ,IAAA;AACM;AAAA,IAAA;AACH,IAAA;AACI,IAAA;AACN,IAAA;AACO,IAAA;AAEhB;AAAA;AAAA,IAAA;AAGA,IAAA;AACO;AAAA,IAAA;AAEA,IAAA;AACJ,IAAA;AACO,IAAA;AACJ,IAAA;AACD,EAAA;AAEX;AA8CA;AAAoB,EAAA;AACN,EAAA;AACD,EAAA;AACF,EAAA;AACD,EAAA;AACR,EAAA;AACA,EAAA;AACkB,EAAA;AAEpB;AAGE,EAAA;AAEA,EAAA;AAEA,EAAA;AACA,EAAA;AAEA,EAAA;AACA,EAAA;AAEA,EAAA;AACE,IAAA;AAAC,IAAA;AAAA,MAAA;AACC,MAAA;AACA,MAAA;AACA,MAAA;AAEE,QAAA;AAEA,QAAA;AAAuB,UAAA;AACJ,UAAA;AACG,UAAA;AACI,UAAA;AACN,UAAA;AACO,UAAA;AACL,UAAA;AACA,UAAA;AACJ,UAAA;AACO,UAAA;AACJ,UAAA;AACD,QAAA;AAGpB,QAAA;AAAiB,UAAA;AAEb,YAAA;AACE,cAAA;AACE,gBAAA;AACE,kBAAA;AAAC,kBAAA;AAAA,oBAAA;AACa,oBAAA;AACC,sBAAA;AACsC,oBAAA;AACnD,oBAAA;AACoB,oBAAA;AACP,oBAAA;AACoB,oBAAA;AAEjC,oBAAA;AACc,oBAAA;AAEwB,kBAAA;AAAA,kBAAA;AAJ1B,gBAAA;AAKd,cAAA;AAGJ,cAAA;AAAO,YAAA;AAET,YAAA;AAAA,UAAA;AAEA,YAAA;AACE,cAAA;AACE,gBAAA;AACE,kBAAA;AAAC,kBAAA;AAAA,oBAAA;AACoC,sBAAA;AAEF,oBAAA;AAChC,oBAAA;AACgC,oBAAA;AAEzB,sBAAA;AAC2C,oBAAA;AACnD,oBAAA;AACA,oBAAA;AACc,oBAAA;AAGwB,kBAAA;AAAA,kBAAA;AAR1B,gBAAA;AASd,cAAA;AAGJ,cAAA;AAAO,YAAA;AAET,YAAA;AAAA,UAAA;AAGA,YAAA;AACE,cAAA;AAAC,cAAA;AAAA,gBAAA;AACY,gBAAA;AACL,gBAAA;AACa,cAAA;AAAA,YAAA;AAGvB,YAAA;AAAA,UAAA;AAEA,YAAA;AACE,cAAA;AACE,gBAAA;AACE,kBAAA;AAAC,kBAAA;AAAA,oBAAA;AACa,oBAAA;AACC,sBAAA;AACsC,oBAAA;AACnD,oBAAA;AACiC,oBAAA;AAEjC,oBAAA;AACc,oBAAA;AAEwB,kBAAA;AAAA,kBAAA;AAJ1B,gBAAA;AAKd,cAAA;AAGJ,cAAA;AAAO,YAAA;AACR,QAAA;AAGL,QAAA;AACE,UAAA;AAAC,UAAA;AAAA,YAAA;AACC,YAAA;AAEc,YAAA;AACC,YAAA;AACF,YAAA;AAC8C,YAAA;AAC3D,YAAA;AACW,YAAA;AACC,YAAA;AAEV,4BAAA;AAGK,cAAA;AAAA,cAAA;AAEwC,YAAA;AAE3C,YAAA;AAGJ,YAAA;AACqC,YAAA;AACrC,YAAA;AACA,YAAA;AACA,YAAA;AAOE,UAAA;AAAA,QAAA;AAEJ,MAAA;AAEJ,IAAA;AAAA,EAAA;AAGN;AAEA;ADeA;AACA;AIzQA;AJ2QA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-XJZAS7NG.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as NextRadioGroup, Radio } from '@nextui-org/radio';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { ButtonGroup } from '@fuf-stack/pixels';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { Controller } from '../Controller';\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './Variants/RadioBox';\nimport { RadioButton } from './Variants/RadioButton';\n\nexport const radioGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    buttonGroup:\n      'rounded-xl group-data-[invalid=true]:border group-data-[invalid=true]:border-danger', // optional if a button group is used\n    itemBase: '',\n    itemBaseActive: 'bg-opacity-50', // optional if a button group is used\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 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    // Tabs\n    tabList: '',\n    tab: '',\n    tabContent: '',\n    cursor: '',\n    panel: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioGroupVariants>;\ntype ClassName = TVClassName<typeof radioGroupVariants>;\n\nexport interface RadioGroupOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: React.ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: React.ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioGroupProps<\n  V extends 'default' | 'radioBox' | 'radioButton' | 'tabs',\n> 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: V extends 'default' | 'radioBox' | 'radioButton'\n    ? RadioGroupOption[]\n    : TabProps[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioGroup should look like. */\n  variant?: V;\n}\n\n/**\n * RadioGroup component based on [NextUI RadioGroup](https://nextui.org/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  variant = 'default',\n}: RadioGroupProps<\n  'default' | 'radioBox' | 'radioButton' | 'tabs'\n>): 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        let RadioComponents: ReactNode;\n\n        const itemClassNames = {\n          base: classNames.itemBase,\n          control: classNames.itemControl,\n          description: classNames.itemDescription,\n          label: classNames.itemLabel,\n          labelWrapper: classNames.itemLabelWrapper,\n          wrapper: classNames.itemWrapper,\n          tabList: classNames.tabList,\n          tab: classNames.tab,\n          tabContent: classNames.tabContent,\n          cursor: classNames.cursor,\n          panel: classNames.panel,\n        };\n\n        switch (variant) {\n          case 'radioBox':\n            RadioComponents = options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <RadioBox\n                    classNames={itemClassNames}\n                    data-testid={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    description={option.description}\n                    icon={option.icon}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    onChange={onChange}\n                    value={option.value}\n                  >\n                    {option.label ? option.label : option.value}\n                  </RadioBox>\n                );\n              }\n              return null;\n            });\n            break;\n          case 'radioButton':\n            RadioComponents = options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <RadioButton\n                    className={cn(classNames.itemBase, {\n                      [classNames.itemBaseActive]:\n                        getValues()[name] !== option.value,\n                    })}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    testID={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    onChange={onChange}\n                    value={option.value}\n                    // TODO: how to do the classNames properly (make selected option darker with same color)\n                  >\n                    {option.label ? option.label : option.value}\n                  </RadioButton>\n                );\n              }\n              return null;\n            });\n            break;\n\n          case 'tabs':\n            RadioComponents = (\n              <Tabs\n                fullWidth={false}\n                tabs={options as TabProps[]}\n                onSelectionChange={onChange}\n              />\n            );\n            break;\n          default:\n            RadioComponents = 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        }\n\n        return (\n          <NextRadioGroup\n            classNames={classNames}\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            data-required={required}\n            data-testid={testId}\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            onChange={onChange}\n            ref={ref}\n          >\n            {variant === 'radioButton' ? (\n              <ButtonGroup className={classNames.buttonGroup}>\n                {RadioComponents}\n              </ButtonGroup>\n            ) : (\n              RadioComponents\n            )}\n          </NextRadioGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default RadioGroup;\n","import type { RadioProps as NextRadioProps } from '@nextui-org/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@nextui-org/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends NextRadioProps {\n  /** icon for the option */\n  icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props);\n\n  return (\n    <Component\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...getBaseProps()}\n      className={cn(\n        'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n        {\n          // disabled styles\n          'pointer-events-none opacity-disabled': isDisabled,\n        },\n      )}\n    >\n      <VisuallyHidden>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n      <span {...getWrapperProps()}>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <span {...getControlProps()} />\n      </span>\n      {icon}\n      <div\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...getLabelWrapperProps()}\n        className={cn(getLabelWrapperProps().className, 'grow')}\n      >\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        {children && <span {...getLabelProps()}>{children}</span>}\n        {description && (\n          <span className=\"text-small text-foreground opacity-70\">\n            {description}\n          </span>\n        )}\n      </div>\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface RadioButtonProps {\n  /** label of the value. */\n  children: React.ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** disables the option */\n  isDisabled?: boolean;\n  /** HTML data-testid attribute of the option */\n  testID?: string;\n  /** Callback function. Executed if the option is clicked. */\n  onChange: (...event: unknown[]) => void;\n  /** value of the option. */\n  value: string;\n}\n\nexport const RadioButton = ({\n  children,\n  className = undefined,\n  isDisabled = false,\n  onChange,\n  testID = undefined,\n  value,\n}: RadioButtonProps) => {\n  return (\n    <Button\n      className={cn(className)}\n      testId={testID}\n      disabled={isDisabled}\n      key={`index_${value}`}\n      onClick={() => {\n        return onChange(value);\n      }}\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default RadioButton;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"]}

package/dist/hooks/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunkD276MAWRcjs = require('../chunk-D276MAWR.cjs');
+var _chunkXJWEUCV3cjs = require('../chunk-XJWEUCV3.cjs');
 require('../chunk-BBB4FEY6.cjs');
 
 
 
 
-exports.checkFieldIsRequired = _chunkD276MAWRcjs.checkFieldIsRequired; exports.useFieldArray = _chunkD276MAWRcjs.useFieldArray; exports.useFormContext = _chunkD276MAWRcjs.useFormContext;
+exports.checkFieldIsRequired = _chunkXJWEUCV3cjs.checkFieldIsRequired; exports.useFieldArray = _chunkXJWEUCV3cjs.useFieldArray; exports.useFormContext = _chunkXJWEUCV3cjs.useFormContext;
 //# sourceMappingURL=index.cjs.map

package/dist/hooks/index.d.cts

@@ -20,10 +20,10 @@ declare const useFormContext: () => {
         isValidating: boolean;
     };
     formState: react_hook_form.FormState<react_hook_form.FieldValues>;
-    debugMode: "debug" | "debug-testids" | "off" | "disabled";
+    debugMode: "disabled" | "debug" | "debug-testids" | "off";
     debugModeSettings?: DebugModeSettings;
     preventSubmit: (prevent: boolean) => void;
-    setDebugMode: (debugMode: "debug" | "debug-testids" | "off" | "disabled") => void;
+    setDebugMode: (debugMode: "disabled" | "debug" | "debug-testids" | "off") => void;
     validation?: VetoInstance;
     watch: react_hook_form.UseFormWatch<react_hook_form.FieldValues>;
     getValues: react_hook_form.UseFormGetValues<react_hook_form.FieldValues>;

package/dist/hooks/index.d.ts

@@ -20,10 +20,10 @@ declare const useFormContext: () => {
         isValidating: boolean;
     };
     formState: react_hook_form.FormState<react_hook_form.FieldValues>;
-    debugMode: "debug" | "debug-testids" | "off" | "disabled";
+    debugMode: "disabled" | "debug" | "debug-testids" | "off";
     debugModeSettings?: DebugModeSettings;
     preventSubmit: (prevent: boolean) => void;
-    setDebugMode: (debugMode: "debug" | "debug-testids" | "off" | "disabled") => void;
+    setDebugMode: (debugMode: "disabled" | "debug" | "debug-testids" | "off") => void;
     validation?: VetoInstance;
     watch: react_hook_form.UseFormWatch<react_hook_form.FieldValues>;
     getValues: react_hook_form.UseFormGetValues<react_hook_form.FieldValues>;

package/dist/hooks/index.js

@@ -2,7 +2,7 @@ import {
   checkFieldIsRequired,
   useFieldArray,
   useFormContext
-} from "../chunk-INTF7ABH.js";
+} from "../chunk-BZAPTLMC.js";
 import "../chunk-V46BHM2U.js";
 export {
   checkFieldIsRequired,