@fuf-stack/uniform 0.13.0 → 0.14.0

package/dist/CheckboxGroup/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CheckboxGroup } from '../CheckboxGroup-DYxaS51b.cjs';
-export { b as CheckboxGroupOption, a as CheckboxGroupProps } from '../CheckboxGroup-DYxaS51b.cjs';
+import { C as CheckboxGroup } from '../CheckboxGroup-o-qWkWe1.cjs';
+export { b as CheckboxGroupOption, a as CheckboxGroupProps } from '../CheckboxGroup-o-qWkWe1.cjs';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';

package/dist/CheckboxGroup/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CheckboxGroup } from '../CheckboxGroup-DYxaS51b.js';
-export { b as CheckboxGroupOption, a as CheckboxGroupProps } from '../CheckboxGroup-DYxaS51b.js';
+import { C as CheckboxGroup } from '../CheckboxGroup-o-qWkWe1.js';
+export { b as CheckboxGroupOption, a as CheckboxGroupProps } from '../CheckboxGroup-o-qWkWe1.js';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';

package/dist/FieldArray/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkV644EZQTcjs = require('../chunk-V644EZQT.cjs');
+var _chunkAG4RUDSVcjs = require('../chunk-AG4RUDSV.cjs');
 require('../chunk-JU5RT22Y.cjs');
 require('../chunk-OHJYXA6R.cjs');
 require('../chunk-XJWEUCV3.cjs');
@@ -9,5 +9,5 @@ require('../chunk-BBB4FEY6.cjs');
 
 
 
-exports.FieldArray = _chunkV644EZQTcjs.FieldArray_default; exports.default = _chunkV644EZQTcjs.FieldArray_default2;
+exports.FieldArray = _chunkAG4RUDSVcjs.FieldArray_default; exports.default = _chunkAG4RUDSVcjs.FieldArray_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/FieldArray/index.d.cts

@@ -1,5 +1,5 @@
-import { F as FieldArray } from '../FieldArray-DUvn98Fe.cjs';
-export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-DUvn98Fe.cjs';
+import { F as FieldArray } from '../FieldArray-B_Gsw-to.cjs';
+export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-B_Gsw-to.cjs';
 import 'react/jsx-runtime';
 import 'react-hook-form';
 

package/dist/FieldArray/index.d.ts

@@ -1,5 +1,5 @@
-import { F as FieldArray } from '../FieldArray-DUvn98Fe.js';
-export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-DUvn98Fe.js';
+import { F as FieldArray } from '../FieldArray-B_Gsw-to.js';
+export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-B_Gsw-to.js';
 import 'react/jsx-runtime';
 import 'react-hook-form';
 

package/dist/FieldArray/index.js

@@ -1,7 +1,7 @@
 import {
   FieldArray_default,
   FieldArray_default2
-} from "../chunk-NMATVUWS.js";
+} from "../chunk-VJC7VCFS.js";
 import "../chunk-2CRY7VDQ.js";
 import "../chunk-WKM2D7LF.js";
 import "../chunk-BZAPTLMC.js";

package/dist/{FieldArray-DUvn98Fe.d.cts → FieldArray-B_Gsw-to.d.cts}

@@ -1,8 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UseFieldArrayMove, UseFieldArrayInsert, FieldValues, UseFieldArrayRemove } from 'react-hook-form';
+import { UseFieldArrayInsert, FieldValues, UseFieldArrayMove, UseFieldArrayRemove } from 'react-hook-form';
 
 type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';
-type FieldArrayFieldChildren = (name: string, index: number, length: number, move: UseFieldArrayMove, insert: UseFieldArrayInsert<FieldValues, string>, remove: UseFieldArrayRemove, duplicate: (i: number) => void) => JSX.Element;
+type FieldArrayFieldChildren = (args: {
+    duplicate: (i: number) => void;
+    index: number;
+    insert: UseFieldArrayInsert<FieldValues, string>;
+    length: number;
+    move: UseFieldArrayMove;
+    name: string;
+    remove: UseFieldArrayRemove;
+}) => JSX.Element;
 type MoveField = 'drag-drop' | 'button';
 interface FieldArrayProps {
     /** function that renders the children with provided Properties. */
@@ -17,7 +25,7 @@ interface FieldArrayProps {
     name: string;
     /** ID for test purposes. */
     testId?: string;
-    moveField: MoveField[];
+    moveField?: MoveField[];
 }
 /**
  * FieldArray component using react-hook-form

package/dist/{FieldArray-DUvn98Fe.d.ts → FieldArray-B_Gsw-to.d.ts}

@@ -1,8 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UseFieldArrayMove, UseFieldArrayInsert, FieldValues, UseFieldArrayRemove } from 'react-hook-form';
+import { UseFieldArrayInsert, FieldValues, UseFieldArrayMove, UseFieldArrayRemove } from 'react-hook-form';
 
 type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';
-type FieldArrayFieldChildren = (name: string, index: number, length: number, move: UseFieldArrayMove, insert: UseFieldArrayInsert<FieldValues, string>, remove: UseFieldArrayRemove, duplicate: (i: number) => void) => JSX.Element;
+type FieldArrayFieldChildren = (args: {
+    duplicate: (i: number) => void;
+    index: number;
+    insert: UseFieldArrayInsert<FieldValues, string>;
+    length: number;
+    move: UseFieldArrayMove;
+    name: string;
+    remove: UseFieldArrayRemove;
+}) => JSX.Element;
 type MoveField = 'drag-drop' | 'button';
 interface FieldArrayProps {
     /** function that renders the children with provided Properties. */
@@ -17,7 +25,7 @@ interface FieldArrayProps {
     name: string;
     /** ID for test purposes. */
     testId?: string;
-    moveField: MoveField[];
+    moveField?: MoveField[];
 }
 /**
  * FieldArray component using react-hook-form

package/dist/Input/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkP5YZA7VJcjs = require('../chunk-P5YZA7VJ.cjs');
+var _chunkJQ3E2HJOcjs = require('../chunk-JQ3E2HJO.cjs');
 require('../chunk-VQWKXSHW.cjs');
 require('../chunk-JU5RT22Y.cjs');
 require('../chunk-OHJYXA6R.cjs');
@@ -10,5 +10,5 @@ require('../chunk-BBB4FEY6.cjs');
 
 
 
-exports.Input = _chunkP5YZA7VJcjs.Input_default; exports.default = _chunkP5YZA7VJcjs.Input_default2;
+exports.Input = _chunkJQ3E2HJOcjs.Input_default; exports.default = _chunkJQ3E2HJOcjs.Input_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Input/index.d.cts

@@ -1,5 +1,5 @@
-import { I as Input } from '../Input-B6dNQiiD.cjs';
-export { a as InputProps } from '../Input-B6dNQiiD.cjs';
+import { I as Input } from '../Input-IkWP4cWg.cjs';
+export { a as InputProps } from '../Input-IkWP4cWg.cjs';
 import 'react/jsx-runtime';
 import 'react';
 

package/dist/Input/index.d.ts

@@ -1,5 +1,5 @@
-import { I as Input } from '../Input-B6dNQiiD.js';
-export { a as InputProps } from '../Input-B6dNQiiD.js';
+import { I as Input } from '../Input-IkWP4cWg.js';
+export { a as InputProps } from '../Input-IkWP4cWg.js';
 import 'react/jsx-runtime';
 import 'react';
 

package/dist/Input/index.js

@@ -1,7 +1,7 @@
 import {
   Input_default,
   Input_default2
-} from "../chunk-TB5USZF4.js";
+} from "../chunk-WZ2WBZSC.js";
 import "../chunk-KOKIM2ND.js";
 import "../chunk-2CRY7VDQ.js";
 import "../chunk-WKM2D7LF.js";

package/dist/{Input-B6dNQiiD.d.cts → Input-IkWP4cWg.d.cts}

@@ -18,12 +18,19 @@ interface InputProps {
     startContent?: ReactNode;
     /** HTML data-testid attribute used in e2e tests */
     testId?: string;
+    /** allows disentangled display and form values for a field */
+    transformValue?: {
+        /** transforms the formValue of the field to the display value of the field */
+        displayValue: (value: string | number) => string | number;
+        /** transforms the displayValue of the field to the form value of the field */
+        formValue: (value: string) => string | number;
+    };
     /** input type */
     type?: 'number' | 'password';
 }
 /**
  * Input component based on [NextUI Input](https://nextui.org/docs/components/input)
  */
-declare const Input: ({ className, disabled, endContent, label, name, placeholder, startContent, testId: _testId, type, }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ className, disabled, endContent, label, name, placeholder, startContent, testId: _testId, transformValue, type, }: InputProps) => react_jsx_runtime.JSX.Element;
 
 export { Input as I, type InputProps as a };

package/dist/{Input-B6dNQiiD.d.ts → Input-IkWP4cWg.d.ts}

@@ -18,12 +18,19 @@ interface InputProps {
     startContent?: ReactNode;
     /** HTML data-testid attribute used in e2e tests */
     testId?: string;
+    /** allows disentangled display and form values for a field */
+    transformValue?: {
+        /** transforms the formValue of the field to the display value of the field */
+        displayValue: (value: string | number) => string | number;
+        /** transforms the displayValue of the field to the form value of the field */
+        formValue: (value: string) => string | number;
+    };
     /** input type */
     type?: 'number' | 'password';
 }
 /**
  * Input component based on [NextUI Input](https://nextui.org/docs/components/input)
  */
-declare const Input: ({ className, disabled, endContent, label, name, placeholder, startContent, testId: _testId, type, }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ className, disabled, endContent, label, name, placeholder, startContent, testId: _testId, transformValue, type, }: InputProps) => react_jsx_runtime.JSX.Element;
 
 export { Input as I, type InputProps as a };

package/dist/RadioGroup/index.d.cts

@@ -1,5 +1,5 @@
-import { R as RadioGroup } from '../RadioGroup-DEwUwnRi.cjs';
-export { a as RadioGroupProps } from '../RadioGroup-DEwUwnRi.cjs';
+import { R as RadioGroup } from '../RadioGroup-1J39ASHa.cjs';
+export { a as RadioGroupProps } from '../RadioGroup-1J39ASHa.cjs';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';
 import '@fuf-stack/pixel-utils';

package/dist/RadioGroup/index.d.ts

@@ -1,5 +1,5 @@
-import { R as RadioGroup } from '../RadioGroup-DEwUwnRi.js';
-export { a as RadioGroupProps } from '../RadioGroup-DEwUwnRi.js';
+import { R as RadioGroup } from '../RadioGroup-1J39ASHa.js';
+export { a as RadioGroupProps } from '../RadioGroup-1J39ASHa.js';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';
 import '@fuf-stack/pixel-utils';

package/dist/Select/index.d.cts

@@ -1,5 +1,5 @@
-import { S as Select } from '../Select-Da_AtPOX.cjs';
-export { a as SelectProps } from '../Select-Da_AtPOX.cjs';
+import { S as Select } from '../Select-BhS4z0Pj.cjs';
+export { a as SelectProps } from '../Select-BhS4z0Pj.cjs';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';

package/dist/Select/index.d.ts

@@ -1,5 +1,5 @@
-import { S as Select } from '../Select-Da_AtPOX.js';
-export { a as SelectProps } from '../Select-Da_AtPOX.js';
+import { S as Select } from '../Select-BhS4z0Pj.js';
+export { a as SelectProps } from '../Select-BhS4z0Pj.js';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';

package/dist/Switch/index.d.cts

@@ -1,5 +1,5 @@
-import { S as Switch } from '../Switch-Coq_VhBW.cjs';
-export { a as SwitchProps } from '../Switch-Coq_VhBW.cjs';
+import { S as Switch } from '../Switch-Fdldj8LV.cjs';
+export { a as SwitchProps } from '../Switch-Fdldj8LV.cjs';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';

package/dist/Switch/index.d.ts

@@ -1,5 +1,5 @@
-import { S as Switch } from '../Switch-Coq_VhBW.js';
-export { a as SwitchProps } from '../Switch-Coq_VhBW.js';
+import { S as Switch } from '../Switch-Fdldj8LV.js';
+export { a as SwitchProps } from '../Switch-Fdldj8LV.js';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';

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

@@ -60,11 +60,7 @@ var FieldArrayField = ({
     transform: _utilities.CSS.Translate.toString(transform),
     transition
   };
-  const {
-    getFieldState,
-    // watch,
-    trigger
-  } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
+  const { getFieldState, trigger } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
   const { error, invalid } = getFieldState(`${name}`, void 0);
   const { getHelperWrapperProps, getErrorMessageProps } = _input.useInput.call(void 0, {
     isInvalid: invalid,
@@ -247,12 +243,11 @@ var FieldArray = ({
               return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 FieldArrayField_default,
                 {
-                  id: field.id,
-                  testId: `${testId}_${index}`,
                   className: "mb-3 mt-5 flex flex-row items-center",
                   field,
                   fields,
                   hideButtons,
+                  id: field.id,
                   index,
                   insert,
                   lastNotDeletable,
@@ -260,15 +255,16 @@ var FieldArray = ({
                   moveField,
                   name,
                   remove,
-                  children: children(
-                    `${name}[${index}]`,
+                  testId: `${testId}_${index}`,
+                  children: children({
+                    duplicate,
                     index,
-                    fields.length,
-                    move,
                     insert,
-                    remove,
-                    duplicate
-                  )
+                    length: fields.length,
+                    move,
+                    name: `${name}[${index}]`,
+                    remove
+                  })
                 },
                 field.id
               );
@@ -299,4 +295,4 @@ var FieldArray_default2 = FieldArray_default;
 
 
 exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
-//# sourceMappingURL=chunk-V644EZQT.cjs.map
+//# sourceMappingURL=chunk-AG4RUDSV.cjs.map

package/dist/chunk-AG4RUDSV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-AG4RUDSV.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-AG4RUDSV.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 = (args: {\n  duplicate: (i: number) => void;\n  index: number;\n  insert: UseFieldArrayInsert<FieldValues, string>;\n  length: number;\n  move: UseFieldArrayMove;\n  name: string;\n  remove: UseFieldArrayRemove;\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  // 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                className=\"mb-3 mt-5 flex flex-row items-center\"\n                field={field}\n                fields={fields}\n                hideButtons={hideButtons}\n                id={field.id}\n                index={index}\n                insert={insert}\n                key={field.id}\n                lastNotDeletable={lastNotDeletable}\n                move={move}\n                moveField={moveField}\n                name={name}\n                remove={remove}\n                testId={`${testId}_${index}`}\n              >\n                {children({\n                  duplicate,\n                  index,\n                  insert,\n                  length: fields.length,\n                  move,\n                  name: `${name}[${index}]`,\n                  remove,\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 { getFieldState, trigger } = 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  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-P5YZA7VJ.cjs → chunk-JQ3E2HJO.cjs}

@@ -24,6 +24,7 @@ var Input = ({
   placeholder = " ",
   startContent = void 0,
   testId: _testId = void 0,
+  transformValue = void 0,
   type = void 0
 }) => {
   const { control, debugMode, getFieldState } = _chunkXJWEUCV3cjs.useFormContext.call(void 0, );
@@ -61,13 +62,15 @@ var Input = ({
             onBlur,
             onChange: type === "number" ? (e) => {
               onChange(Number(e.target.value));
-            } : onChange,
+            } : (e) => onChange(
+              transformValue ? transformValue.formValue(e.target.value) : e.target.value
+            ),
             placeholder,
             radius: "sm",
             ref,
             startContent,
             type,
-            value,
+            value: transformValue ? transformValue.displayValue(value) : value,
             variant: "bordered"
           }
         );
@@ -84,4 +87,4 @@ var Input_default2 = Input_default;
 
 
 exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
-//# sourceMappingURL=chunk-P5YZA7VJ.cjs.map
+//# sourceMappingURL=chunk-JQ3E2HJO.cjs.map

package/dist/chunk-JQ3E2HJO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JQ3E2HJO.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JQ3E2HJO.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Input as NextInput } 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 InputProps {\n  /** CSS class name */\n  className?: string;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label (set to false to disable label) */\n  label?: string | false;\n  /** form field name */\n  name: string;\n  /** form field placeholder */\n  placeholder?: string;\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transformValue?: {\n    /** transforms the formValue of the field to the display value of the field */\n    displayValue: (value: string | number) => string | number;\n    /** transforms the displayValue of the field to the form value of the field */\n    formValue: (value: string) => string | number;\n  };\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [NextUI Input](https://nextui.org/docs/components/input)\n */\nconst Input = ({\n  className = undefined,\n  disabled = false,\n  endContent = undefined,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  startContent = undefined,\n  testId: _testId = undefined,\n  transformValue = undefined,\n  type = undefined,\n}: InputProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <Controller\n      control={control}\n      disabled={disabled}\n      name={name}\n      render={({\n        field: { disabled: isDisabled, onChange, onBlur, value, ref },\n      }) => {\n        return (\n          <NextInput\n            className={cn(className)}\n            classNames={{\n              inputWrapper: 'group-data-[focus=true]:border-focus',\n            }}\n            data-testid={testId}\n            endContent={endContent}\n            errorMessage={error && <FieldValidationError error={error} />}\n            isDisabled={isDisabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              showLabel && (\n                <>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </>\n              )\n            }\n            labelPlacement=\"outside\"\n            name={name}\n            onBlur={onBlur}\n            onChange={\n              type === 'number'\n                ? (e) => {\n                    onChange(Number(e.target.value));\n                  }\n                : (e) =>\n                    onChange(\n                      transformValue\n                        ? transformValue.formValue(e.target.value)\n                        : e.target.value,\n                    )\n            }\n            placeholder={placeholder}\n            radius=\"sm\"\n            ref={ref}\n            startContent={startContent}\n            type={type}\n            value={transformValue ? transformValue.displayValue(value) : value}\n            variant=\"bordered\"\n          />\n        );\n      }}\n    />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"]}

package/dist/{chunk-NMATVUWS.js → chunk-VJC7VCFS.js}

@@ -60,11 +60,7 @@ var FieldArrayField = ({
     transform: CSS.Translate.toString(transform),
     transition
   };
-  const {
-    getFieldState,
-    // watch,
-    trigger
-  } = useFormContext();
+  const { getFieldState, trigger } = useFormContext();
   const { error, invalid } = getFieldState(`${name}`, void 0);
   const { getHelperWrapperProps, getErrorMessageProps } = useInput({
     isInvalid: invalid,
@@ -247,12 +243,11 @@ var FieldArray = ({
               return /* @__PURE__ */ jsx2(
                 FieldArrayField_default,
                 {
-                  id: field.id,
-                  testId: `${testId}_${index}`,
                   className: "mb-3 mt-5 flex flex-row items-center",
                   field,
                   fields,
                   hideButtons,
+                  id: field.id,
                   index,
                   insert,
                   lastNotDeletable,
@@ -260,15 +255,16 @@ var FieldArray = ({
                   moveField,
                   name,
                   remove,
-                  children: children(
-                    `${name}[${index}]`,
+                  testId: `${testId}_${index}`,
+                  children: children({
+                    duplicate,
                     index,
-                    fields.length,
-                    move,
                     insert,
-                    remove,
-                    duplicate
-                  )
+                    length: fields.length,
+                    move,
+                    name: `${name}[${index}]`,
+                    remove
+                  })
                 },
                 field.id
               );
@@ -299,4 +295,4 @@ export {
   FieldArray_default,
   FieldArray_default2
 };
-//# sourceMappingURL=chunk-NMATVUWS.js.map
+//# sourceMappingURL=chunk-VJC7VCFS.js.map

package/dist/chunk-VJC7VCFS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/FieldArrayField.tsx","../src/FieldArray/index.ts"],"sourcesContent":["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 = (args: {\n  duplicate: (i: number) => void;\n  index: number;\n  insert: UseFieldArrayInsert<FieldValues, string>;\n  length: number;\n  move: UseFieldArrayMove;\n  name: string;\n  remove: UseFieldArrayRemove;\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  // 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                className=\"mb-3 mt-5 flex flex-row items-center\"\n                field={field}\n                fields={fields}\n                hideButtons={hideButtons}\n                id={field.id}\n                index={index}\n                insert={insert}\n                key={field.id}\n                lastNotDeletable={lastNotDeletable}\n                move={move}\n                moveField={moveField}\n                name={name}\n                remove={remove}\n                testId={`${testId}_${index}`}\n              >\n                {children({\n                  duplicate,\n                  index,\n                  insert,\n                  length: fields.length,\n                  move,\n                  name: `${name}[${index}]`,\n                  remove,\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 { getFieldState, trigger } = 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  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"],"mappings":";;;;;;;;;;;;;;;AAUA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAAA,iBAAgB;AAEzB,SAAS,UAAAC,eAAc;;;ACnBvB,SAAS,aAAa,WAAW,mBAAmB;AAEpD,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AACpB,SAAS,gBAAgB;AAEzB,SAAS,cAAc;AA+DnB,mBAmBY,KAIF,YAvBV;AArCJ,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,MAA4B;AAC1B,QAAM,EAAE,YAAY,WAAW,YAAY,WAAW,WAAW,IAC/D,YAAY,EAAE,GAAG,CAAC;AAEpB,QAAM,QAAQ;AAAA,IACZ,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,QAAM,EAAE,eAAe,QAAQ,IAAI,eAAe;AAClD,QAAM,EAAE,OAAO,QAAQ,IAAI,cAAc,GAAG,IAAI,IAAI,MAAS;AAG7D,QAAM,EAAE,uBAAuB,qBAAqB,IAAI,SAAS;AAAA,IAC/D,WAAW;AAAA,IACX,cAAc,KAAK,UAAU,KAAK;AAAA,IAClC,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,YAAY,EAAE,eAAe,QAAQ;AAAA,EACvC,CAAC;AAED,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,QAAQ,MAAM,QAAQ,GAAG,IAAI,IAAI,KAAK,EAAE;AAAA,QAGvC;AAAA,WAAC,YAAY,SAAS,MAAM,KAAK,CAAC,YAAY,SAAS,KAAK,KAC3D,qBAAC,SAAI,WAAU,mCACZ;AAAA,sBAAU,SAAS,WAAW,KAC7B;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAa,QAAQ,GAAG,IAAI,IAAI,KAAK,aAAa;AAAA,gBAEjD,GAAG;AAAA,gBAEH,GAAG;AAAA,gBAEJ,8BAAC,eAAY;AAAA;AAAA,YACf;AAAA,YAED,UAAU,SAAS,QAAQ,KAC1B,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,GAAG,IAAI,IAAI,KAAK;AAAA,kBACxB,UAAU,UAAU;AAAA,kBACpB,SAAS,MAAM,KAAK,OAAO,QAAQ,CAAC;AAAA,kBACpC,WAAU;AAAA,kBAEV,8BAAC,aAAU;AAAA;AAAA,cACb;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,GAAG,IAAI,IAAI,KAAK;AAAA,kBACxB,UAAU,UAAU,OAAO,SAAS;AAAA,kBACpC,SAAS,MAAM,KAAK,OAAO,QAAQ,CAAC;AAAA,kBACpC,WAAU;AAAA,kBAEV,8BAAC,eAAY;AAAA;AAAA,cACf;AAAA,eACF;AAAA,aAEJ;AAAA,UAGF,qBAAC,SAA6B,WAAU,UACtC;AAAA,iCAAC,SAAI,WAAU,0BAEb;AAAA,kCAAC,SAAI,WAAU,aAAY,eAAa,QACrC,UACH;AAAA,cACC,CAAC,YAAY,SAAS,QAAQ,KAC7B,CAAC,YAAY,SAAS,KAAK,MAC1B,oBAAoB,OAAO,WAAW,IAAI,OACzC,oBAAC,UAAO,SAAS,MAAM,OAAO,KAAK,GAAG,WAAU,QAC9C;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAM;AAAA,kBACN,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,eAAY;AAAA,kBAEZ;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAS;AAAA,sBACT,GAAE;AAAA,sBACF,UAAS;AAAA;AAAA,kBACX;AAAA;AAAA,cACF,GACF;AAAA,eAEN;AAAA,YAEC,CAAC,YAAY,SAAS,QAAQ,KAC/B,CAAC,YAAY,SAAS,KAAK,KAC3B,UAAU,OAAO,SAAS,IACxB;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,QAAQ,qBAAqB,KAAK;AAAA,gBAClC,SAAS,MAAM;AACb,yBAAO,QAAQ,GAAG,CAAC,CAAC;AAAA,gBACtB;AAAA,gBACD;AAAA;AAAA,YAED,IACE;AAAA,eAvCI,QAAQ,MAAM,EAAE,EAwC1B;AAAA;AAAA;AAAA,IACF;AAAA,IACC,SAAS,OAAO,MAAM,KAAK,MAAM;AAAA;AAAA;AAAA,IAIhC,oBAAC,SAAK,GAAG,sBAAsB,GAE7B,8BAAC,SAAK,GAAG,qBAAqB,GAC5B;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,MAAM,OAAO,KAAK,CAAC,GAAG;AAAA;AAAA,IAC/B,GACF,GACF;AAAA,KAEJ;AAEJ;AACA,IAAO,0BAAQ;;;AD5CP,SAGI,OAAAC,MAHJ,QAAAC,aAAA;AAtER,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA,cAAc,CAAC;AAAA,EACf,OAAO,SAAS;AAAA,EAChB,mBAAmB;AAAA,EACnB;AAAA,EACA,QAAQ,UAAU;AAAA,EAClB,YAAY,CAAC,QAAQ;AACvB,MAAuB;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,IAAI,eAAe;AAEnB,QAAM,EAAE,QAAQ,QAAQ,QAAQ,QAAQ,KAAK,IAAI,cAAc;AAAA,IAC7D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,OAAO,QAAQ,SAAS,SAAS,IAAI,cAAc,MAAM,OAAO;AAGxE,QAAM,EAAE,OAAO,eAAe,uBAAuB,qBAAqB,IACxEC,UAAS;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,cAAc,KAAK,UAAU,KAAK;AAAA,IAClC,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,YAAY,EAAE,eAAe,QAAQ;AAAA,EACvC,CAAC;AAEH,MAAI,oBAAoB,OAAO,WAAW,GAAG;AAC3C,WAAO,CAAC,CAAC;AAAA,EACX;AAEA,QAAM,UAAU;AAAA,IACd,UAAU,aAAa;AAAA,IACvB,UAAU,cAAc;AAAA,EAC1B;AAEA,QAAM,gBAAgB,CAAC,UAAwB;AAC7C,UAAM,EAAE,QAAQ,KAAK,IAAI;AAEzB,QAAI,OAAO,OAAO,MAAM,IAAI;AAC1B,YAAM,WAAW,OAAO,UAAU,CAAC,UAAU,MAAM,OAAO,OAAO,EAAE;AACnE,YAAM,WAAW,OAAO,UAAU,CAAC,UAAU,MAAM,OAAO,MAAM,EAAE;AAClE,WAAK,UAAU,QAAQ;AAAA,IACzB;AAAA,EACF;AAEA,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE,gBAAAF;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,WAAW,CAAC,wBAAwB,qBAAqB;AAAA,MAEzD,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,OAAO,IAAI,CAAC,UAAU,MAAM,EAAE;AAAA,UACrC,UAAU;AAAA,UAEV,0BAAAC,MAAC,QAAG,eAAa,QAAQ,QAAQ,MAAM,QAAQ,GAAG,IAAI,EAAE,GACrD;AAAA;AAAA,YAEC,gBAAAD;AAAA,cAAC;AAAA;AAAA,gBAEE,GAAG,cAAc;AAAA,gBAClB,WAAW,GAAG,cAAc,EAAE,SAAS;AAAA,gBAEtC;AAAA;AAAA,YACH;AAAA,YAED,wBAAwB,gBAAAA,KAAC,iCAAsB,QAAgB;AAAA,YAE/D,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,oBAAM,YAAY,CAAC,MAAc;AAC/B,sBAAM,SAAS,UAAU,IAAI;AAC7B,uBAAO,IAAI,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,IAAI,KAAK,CAAC;AAAA,cAC1C;AAEA,qBACE,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,IAAI,MAAM;AAAA,kBACV;AAAA,kBACA;AAAA,kBAEA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,QAAQ,GAAG,MAAM,IAAI,KAAK;AAAA,kBAEzB,mBAAS;AAAA,oBACR;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,QAAQ,OAAO;AAAA,oBACf;AAAA,oBACA,MAAM,GAAG,IAAI,IAAI,KAAK;AAAA,oBACtB;AAAA,kBACF,CAAC;AAAA;AAAA,gBAhBI,MAAM;AAAA,cAiBb;AAAA,YAEJ,CAAC;AAAA,YAEA,CAAC,YAAY,SAAS,KAAK,KAAK,CAAC,YAAY,SAAS,KAAK,KAC1D,gBAAAA;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,QAAQ,GAAG,MAAM;AAAA,gBACjB,MAAK;AAAA,gBACL,SAAS,MAAM,OAAO,CAAC,CAAC;AAAA,gBACzB;AAAA;AAAA,YAED;AAAA,YAGD,OAAO;AAAA,YAEN,gBAAAH,KAAC,SAAK,GAAG,sBAAsB,GAE7B,0BAAAA,KAAC,SAAK,GAAG,qBAAqB,GAE5B,0BAAAA,KAAC,gCAAqB,OAAO,OAAO,SAAS,GAC/C,GACF;AAAA,aAEJ;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;;;AE3Mf,IAAOI,sBAAQ;","names":["useInput","Button","jsx","jsxs","useInput","Button","FieldArray_default"]}

package/dist/{chunk-TB5USZF4.js → chunk-WZ2WBZSC.js}

@@ -24,6 +24,7 @@ var Input = ({
   placeholder = " ",
   startContent = void 0,
   testId: _testId = void 0,
+  transformValue = void 0,
   type = void 0
 }) => {
   const { control, debugMode, getFieldState } = useFormContext();
@@ -61,13 +62,15 @@ var Input = ({
             onBlur,
             onChange: type === "number" ? (e) => {
               onChange(Number(e.target.value));
-            } : onChange,
+            } : (e) => onChange(
+              transformValue ? transformValue.formValue(e.target.value) : e.target.value
+            ),
             placeholder,
             radius: "sm",
             ref,
             startContent,
             type,
-            value,
+            value: transformValue ? transformValue.displayValue(value) : value,
             variant: "bordered"
           }
         );
@@ -84,4 +87,4 @@ export {
   Input_default,
   Input_default2
 };
-//# sourceMappingURL=chunk-TB5USZF4.js.map
+//# sourceMappingURL=chunk-WZ2WBZSC.js.map

package/dist/chunk-WZ2WBZSC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Input as NextInput } 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 InputProps {\n  /** CSS class name */\n  className?: string;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label (set to false to disable label) */\n  label?: string | false;\n  /** form field name */\n  name: string;\n  /** form field placeholder */\n  placeholder?: string;\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transformValue?: {\n    /** transforms the formValue of the field to the display value of the field */\n    displayValue: (value: string | number) => string | number;\n    /** transforms the displayValue of the field to the form value of the field */\n    formValue: (value: string) => string | number;\n  };\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [NextUI Input](https://nextui.org/docs/components/input)\n */\nconst Input = ({\n  className = undefined,\n  disabled = false,\n  endContent = undefined,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  startContent = undefined,\n  testId: _testId = undefined,\n  transformValue = undefined,\n  type = undefined,\n}: InputProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <Controller\n      control={control}\n      disabled={disabled}\n      name={name}\n      render={({\n        field: { disabled: isDisabled, onChange, onBlur, value, ref },\n      }) => {\n        return (\n          <NextInput\n            className={cn(className)}\n            classNames={{\n              inputWrapper: 'group-data-[focus=true]:border-focus',\n            }}\n            data-testid={testId}\n            endContent={endContent}\n            errorMessage={error && <FieldValidationError error={error} />}\n            isDisabled={isDisabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              showLabel && (\n                <>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </>\n              )\n            }\n            labelPlacement=\"outside\"\n            name={name}\n            onBlur={onBlur}\n            onChange={\n              type === 'number'\n                ? (e) => {\n                    onChange(Number(e.target.value));\n                  }\n                : (e) =>\n                    onChange(\n                      transformValue\n                        ? transformValue.formValue(e.target.value)\n                        : e.target.value,\n                    )\n            }\n            placeholder={placeholder}\n            radius=\"sm\"\n            ref={ref}\n            startContent={startContent}\n            type={type}\n            value={transformValue ? transformValue.displayValue(value) : value}\n            variant=\"bordered\"\n          />\n        );\n      }}\n    />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;;;AAEA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAwEgB,SAMnB,UANmB,KAMnB,YANmB;AAlCnC,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,iBAAiB;AAAA,EACjB,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,QACP,OAAO,EAAE,UAAU,YAAY,UAAU,QAAQ,OAAO,IAAI;AAAA,MAC9D,MAAM;AACJ,eACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,SAAS;AAAA,YACvB,YAAY;AAAA,cACV,cAAc;AAAA,YAChB;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,cAAc,SAAS,oBAAC,gCAAqB,OAAc;AAAA,YAC3D;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,OACE,aACE,iCACG;AAAA;AAAA,cACA,wBACC,oBAAC,iCAAsB,QAAgB;AAAA,eAE3C;AAAA,YAGJ,gBAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA,UACE,SAAS,WACL,CAAC,MAAM;AACL,uBAAS,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,YACjC,IACA,CAAC,MACC;AAAA,cACE,iBACI,eAAe,UAAU,EAAE,OAAO,KAAK,IACvC,EAAE,OAAO;AAAA,YACf;AAAA,YAER;AAAA,YACA,QAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO,iBAAiB,eAAe,aAAa,KAAK,IAAI;AAAA,YAC7D,SAAQ;AAAA;AAAA,QACV;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACjHf,IAAOA,iBAAQ;","names":["Input_default"]}

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: "disabled" | "debug" | "debug-testids" | "off";
+    debugMode: "debug" | "debug-testids" | "off" | "disabled";
     debugModeSettings?: DebugModeSettings;
     preventSubmit: (prevent: boolean) => void;
-    setDebugMode: (debugMode: "disabled" | "debug" | "debug-testids" | "off") => void;
+    setDebugMode: (debugMode: "debug" | "debug-testids" | "off" | "disabled") => 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: "disabled" | "debug" | "debug-testids" | "off";
+    debugMode: "debug" | "debug-testids" | "off" | "disabled";
     debugModeSettings?: DebugModeSettings;
     preventSubmit: (prevent: boolean) => void;
-    setDebugMode: (debugMode: "disabled" | "debug" | "debug-testids" | "off") => void;
+    setDebugMode: (debugMode: "debug" | "debug-testids" | "off" | "disabled") => void;
     validation?: VetoInstance;
     watch: react_hook_form.UseFormWatch<react_hook_form.FieldValues>;
     getValues: react_hook_form.UseFormGetValues<react_hook_form.FieldValues>;