@fuf-stack/uniform 0.16.7 → 0.16.9

package/dist/FieldArray/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkTA4JEORCcjs = require('../chunk-TA4JEORC.cjs');
+var _chunkHCWKJ7D7cjs = require('../chunk-HCWKJ7D7.cjs');
 require('../chunk-JU5RT22Y.cjs');
 require('../chunk-OE5IW4ZG.cjs');
 require('../chunk-IUVEFLF3.cjs');
@@ -10,5 +10,5 @@ require('../chunk-4DAZAO6Y.cjs');
 
 
 
-exports.FieldArray = _chunkTA4JEORCcjs.FieldArray_default; exports.default = _chunkTA4JEORCcjs.FieldArray_default2;
+exports.FieldArray = _chunkHCWKJ7D7cjs.FieldArray_default; exports.default = _chunkHCWKJ7D7cjs.FieldArray_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/FieldArray/index.js

@@ -1,7 +1,7 @@
 import {
   FieldArray_default,
   FieldArray_default2
-} from "../chunk-P6SZXKR2.js";
+} from "../chunk-Q2VW52VP.js";
 import "../chunk-2CRY7VDQ.js";
 import "../chunk-ASPOGQPS.js";
 import "../chunk-T4N6TMUL.js";

package/dist/Form/index.cjs

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunk36LPVTTAcjs = require('../chunk-36LPVTTA.cjs');
+var _chunkRMFLMX75cjs = require('../chunk-RMFLMX75.cjs');
 require('../chunk-IUVEFLF3.cjs');
 require('../chunk-CESGUF6F.cjs');
 require('../chunk-4DAZAO6Y.cjs');
 
 
 
-exports.Form = _chunk36LPVTTAcjs.Form_default; exports.default = _chunk36LPVTTAcjs.Form_default2;
+exports.Form = _chunkRMFLMX75cjs.Form_default; exports.default = _chunkRMFLMX75cjs.Form_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Form/index.js

@@ -1,7 +1,7 @@
 import {
   Form_default,
   Form_default2
-} from "../chunk-CCTMABK2.js";
+} from "../chunk-3HFF7ZAK.js";
 import "../chunk-T4N6TMUL.js";
 import "../chunk-UAV6PVB4.js";
 import "../chunk-CRTRMMJ7.js";

package/dist/Select/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunk5NWVDM2Acjs = require('../chunk-5NWVDM2A.cjs');
+var _chunkKIWE5ERIcjs = require('../chunk-KIWE5ERI.cjs');
 require('../chunk-EPYFZXEI.cjs');
 require('../chunk-JU5RT22Y.cjs');
 require('../chunk-OE5IW4ZG.cjs');
@@ -11,5 +11,5 @@ require('../chunk-4DAZAO6Y.cjs');
 
 
 
-exports.Select = _chunk5NWVDM2Acjs.Select_default; exports.default = _chunk5NWVDM2Acjs.Select_default2;
+exports.Select = _chunkKIWE5ERIcjs.Select_default; exports.default = _chunkKIWE5ERIcjs.Select_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Select/index.js

@@ -1,7 +1,7 @@
 import {
   Select_default,
   Select_default2
-} from "../chunk-JXQIVBYP.js";
+} from "../chunk-RKXB5SCQ.js";
 import "../chunk-AT2VVPRD.js";
 import "../chunk-2CRY7VDQ.js";
 import "../chunk-ASPOGQPS.js";

package/dist/{chunk-CCTMABK2.js → chunk-3HFF7ZAK.js}

@@ -67,10 +67,11 @@ var FormDebugViewer = ({ className = void 0 }) => {
         /* @__PURE__ */ jsx(
           Button,
           {
-            icon: /* @__PURE__ */ jsx(FaTimes, { className: "text-danger" }),
+            color: "danger",
+            icon: /* @__PURE__ */ jsx(FaTimes, {}),
             onClick: () => setDebugMode("off"),
             size: "sm",
-            variant: "flat"
+            variant: "light"
           }
         )
       ] }),
@@ -150,4 +151,4 @@ export {
   Form_default,
   Form_default2
 };
-//# sourceMappingURL=chunk-CCTMABK2.js.map
+//# sourceMappingURL=chunk-3HFF7ZAK.js.map

package/dist/{chunk-CCTMABK2.js.map → chunk-3HFF7ZAK.js.map}

@@ -1 +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, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\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          {/* render debug viewer when not in test environment and debug not disabled */}\n          {!IS_TEST && !debug?.disable && (\n            <FormDebugViewer className=\"w-96 flex-shrink\" />\n          )}\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 } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { toValidationFormat } from '../../helpers';\nimport { useFormContext } from '../../hooks';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\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 validationValues = toValidationFormat(watch());\n  const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n  useEffect(\n    () => {\n      const updateValidationErrors = async () => {\n        if (validation) {\n          const validateResult =\n            await validation?.validateAsync(validationValues);\n          setValidationErrors(validateResult?.errors);\n        }\n      };\n      updateValidationErrors();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(validationValues)],\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: validationValues,\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"]}
+{"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, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\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          {/* render debug viewer when not in test environment and debug not disabled */}\n          {!IS_TEST && !debug?.disable && (\n            <FormDebugViewer className=\"w-96 flex-shrink\" />\n          )}\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 } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { toValidationFormat } from '../../helpers';\nimport { useFormContext } from '../../hooks';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\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 validationValues = toValidationFormat(watch());\n  const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n  useEffect(\n    () => {\n      const updateValidationErrors = async () => {\n        if (validation) {\n          const validateResult =\n            await validation?.validateAsync(validationValues);\n          setValidationErrors(validateResult?.errors);\n        }\n      };\n      updateValidationErrors();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(validationValues)],\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            color=\"danger\"\n            icon={<FaTimes />}\n            onClick={() => setDebugMode('off')}\n            size=\"sm\"\n            variant=\"light\"\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: validationValues,\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-TA4JEORC.cjs → chunk-HCWKJ7D7.cjs}

@@ -358,6 +358,7 @@ var FieldArray = ({
           _pixels.Button,
           {
             className: className.appendButton,
+            disableAnimation: true,
             onClick: () => append(elementInitialValue),
             size: "sm",
             testId: `${testId}_append_button`,
@@ -378,4 +379,4 @@ var FieldArray_default2 = FieldArray_default;
 
 
 exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
-//# sourceMappingURL=chunk-TA4JEORC.cjs.map
+//# sourceMappingURL=chunk-HCWKJ7D7.cjs.map

package/dist/chunk-HCWKJ7D7.cjs.map

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

package/dist/{chunk-5NWVDM2A.cjs → chunk-KIWE5ERI.cjs}

@@ -165,6 +165,8 @@ var Select = ({
                     groupHeading: () => classNames.groupHeading,
                     indicatorsContainer: () => classNames.indicatorsContainer,
                     indicatorSeparator: () => classNames.indicatorSeparator,
+                    loadingIndicator: () => classNames.loadingIndicator,
+                    loadingMessage: () => classNames.loadingMessage,
                     input: () => classNames.input,
                     menu: () => classNames.menu,
                     menuList: () => classNames.menuList,
@@ -244,4 +246,4 @@ var Select_default2 = Select_default;
 
 
 exports.Select_default = Select_default; exports.Select_default2 = Select_default2;
-//# sourceMappingURL=chunk-5NWVDM2A.cjs.map
+//# sourceMappingURL=chunk-KIWE5ERI.cjs.map

package/dist/chunk-KIWE5ERI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-KIWE5ERI.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["Select_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-KIWE5ERI.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: '!z-50',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ntype SelectOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n};\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: React.ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n  // eslint-disable-next-line react/jsx-props-no-spreading\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value)}`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  disabled = false,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  label: _label = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  testId: _testId = undefined,\n}: SelectProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const {\n    getBaseProps,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    getTriggerProps,\n    getValueProps,\n    label,\n  } = useSelect({\n    children: [],\n    classNames,\n    errorMessage: JSON.stringify(error),\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label: _label,\n    labelPlacement: 'outside',\n    placeholder: ' ',\n  });\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        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        field: { onChange, value, ref, onBlur },\n      }) => (\n        <div\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...getBaseProps()}\n          className={cn(classNames.base)}\n          data-testid={`${testId}_wrapper`}\n          // see HeroUI styles for group-data condition (data-invalid),\n          // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n          data-required={required}\n        >\n          {showLabel && (\n            <label\n              className={classNames.label}\n              data-slot=\"label\"\n              htmlFor={`react-select-${name}-input`}\n              id={getLabelProps().id}\n            >\n              {label}\n              {showTestIdCopyButton && (\n                <FieldCopyTestIdButton testId={testId} />\n              )}\n            </label>\n          )}\n          <ReactSelect\n            aria-errormessage=\"\"\n            aria-labelledby={\n              getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            }\n            aria-invalid={invalid}\n            classNames={{\n              control: () =>\n                cn(classNames.control, {\n                  [classNames.control_focused]: isFocused && !invalid,\n                }),\n              clearIndicator: () => classNames.clearIndicator,\n              dropdownIndicator: () => classNames.dropdownIndicator,\n              groupHeading: () => classNames.groupHeading,\n              indicatorsContainer: () => classNames.indicatorsContainer,\n              indicatorSeparator: () => classNames.indicatorSeparator,\n              loadingIndicator: () => classNames.loadingIndicator,\n              loadingMessage: () => classNames.loadingMessage,\n              input: () => classNames.input,\n              menu: () => classNames.menu,\n              menuList: () => classNames.menuList,\n              menuPortal: () => classNames.menuPortal,\n              multiValue: () => classNames.multiValue,\n              multiValueLabel: () =>\n                cn(classNames.multiValueLabel, `${getValueProps().className}`),\n              multiValueRemove: () => classNames.multiValueRemove,\n              noOptionsMessage: () => classNames.noOptionsMessage,\n              option: ({\n                isFocused: optionIsFocused,\n                isSelected: optionIsSelected,\n              }) =>\n                cn(classNames.option, {\n                  [classNames.option_focused]: optionIsFocused,\n                  [classNames.option_selected]: optionIsSelected,\n                }),\n              placeholder: () => classNames.placeholder,\n              singleValue: () =>\n                cn(classNames.singleValue, `${getValueProps().className}`),\n              valueContainer: () => classNames.valueContainer,\n            }}\n            components={{\n              Input: InputComponent,\n              Option: OptionComponent,\n              DropdownIndicator: DropdownIndicatorComponent,\n              Control: ControlComponent,\n            }}\n            // Does not affect the testId of the select, but is needed to pass it to sub-components\n            data-testid={testId}\n            filterOption={filterOption}\n            formatOptionLabel={renderOptionLabel}\n            inputValue={inputValue}\n            instanceId={name}\n            isClearable={clearable}\n            isDisabled={disabled}\n            isLoading={loading}\n            isMulti={multiSelect}\n            name={name}\n            // set menuPosition to fixed so that menu can be rendered\n            // inside Card / Modal components, menuShouldBlockScroll\n            // prevents container scroll when menu is open\n            menuPosition=\"fixed\"\n            menuShouldBlockScroll\n            options={options}\n            placeholder={placeholder}\n            onBlur={(_e) => {\n              setIsFocused(false);\n              return onBlur();\n            }}\n            onChange={(option) => {\n              if (multiSelect) {\n                onChange(\n                  (option as SelectOption[])?.map((_option) => _option.value),\n                );\n              } else {\n                onChange((option as SelectOption)?.value);\n              }\n            }}\n            onFocus={(_e) => {\n              setIsFocused(true);\n            }}\n            onInputChange={onInputChange}\n            ref={ref}\n            // set complete option as value by current field value\n            value={options.find((option) => option.value === value)}\n            unstyled\n          />\n          {error && (\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 error={error} />\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    />\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"]}

package/dist/{chunk-P6SZXKR2.js → chunk-Q2VW52VP.js}

@@ -358,6 +358,7 @@ var FieldArray = ({
           Button3,
           {
             className: className.appendButton,
+            disableAnimation: true,
             onClick: () => append(elementInitialValue),
             size: "sm",
             testId: `${testId}_append_button`,
@@ -378,4 +379,4 @@ export {
   FieldArray_default,
   FieldArray_default2
 };
-//# sourceMappingURL=chunk-P6SZXKR2.js.map
+//# sourceMappingURL=chunk-Q2VW52VP.js.map

package/dist/chunk-Q2VW52VP.js.map

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

package/dist/{chunk-JXQIVBYP.js → chunk-RKXB5SCQ.js}

@@ -165,6 +165,8 @@ var Select = ({
                     groupHeading: () => classNames.groupHeading,
                     indicatorsContainer: () => classNames.indicatorsContainer,
                     indicatorSeparator: () => classNames.indicatorSeparator,
+                    loadingIndicator: () => classNames.loadingIndicator,
+                    loadingMessage: () => classNames.loadingMessage,
                     input: () => classNames.input,
                     menu: () => classNames.menu,
                     menuList: () => classNames.menuList,
@@ -244,4 +246,4 @@ export {
   Select_default,
   Select_default2
 };
-//# sourceMappingURL=chunk-JXQIVBYP.js.map
+//# sourceMappingURL=chunk-RKXB5SCQ.js.map

package/dist/{chunk-JXQIVBYP.js.map → chunk-RKXB5SCQ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: '!z-50',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ntype SelectOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n};\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: React.ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n  // eslint-disable-next-line react/jsx-props-no-spreading\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value)}`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  disabled = false,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  label: _label = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  testId: _testId = undefined,\n}: SelectProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const {\n    getBaseProps,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    getTriggerProps,\n    getValueProps,\n    label,\n  } = useSelect({\n    children: [],\n    classNames,\n    errorMessage: JSON.stringify(error),\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label: _label,\n    labelPlacement: 'outside',\n    placeholder: ' ',\n  });\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        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        field: { onChange, value, ref, onBlur },\n      }) => (\n        <div\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...getBaseProps()}\n          className={cn(classNames.base)}\n          data-testid={`${testId}_wrapper`}\n          // see HeroUI styles for group-data condition (data-invalid),\n          // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n          data-required={required}\n        >\n          {showLabel && (\n            <label\n              className={classNames.label}\n              data-slot=\"label\"\n              htmlFor={`react-select-${name}-input`}\n              id={getLabelProps().id}\n            >\n              {label}\n              {showTestIdCopyButton && (\n                <FieldCopyTestIdButton testId={testId} />\n              )}\n            </label>\n          )}\n          <ReactSelect\n            aria-errormessage=\"\"\n            aria-labelledby={\n              getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            }\n            aria-invalid={invalid}\n            classNames={{\n              control: () =>\n                cn(classNames.control, {\n                  [classNames.control_focused]: isFocused && !invalid,\n                }),\n              clearIndicator: () => classNames.clearIndicator,\n              dropdownIndicator: () => classNames.dropdownIndicator,\n              groupHeading: () => classNames.groupHeading,\n              indicatorsContainer: () => classNames.indicatorsContainer,\n              indicatorSeparator: () => classNames.indicatorSeparator,\n              input: () => classNames.input,\n              menu: () => classNames.menu,\n              menuList: () => classNames.menuList,\n              menuPortal: () => classNames.menuPortal,\n              multiValue: () => classNames.multiValue,\n              multiValueLabel: () =>\n                cn(classNames.multiValueLabel, `${getValueProps().className}`),\n              multiValueRemove: () => classNames.multiValueRemove,\n              noOptionsMessage: () => classNames.noOptionsMessage,\n              option: ({\n                isFocused: optionIsFocused,\n                isSelected: optionIsSelected,\n              }) =>\n                cn(classNames.option, {\n                  [classNames.option_focused]: optionIsFocused,\n                  [classNames.option_selected]: optionIsSelected,\n                }),\n              placeholder: () => classNames.placeholder,\n              singleValue: () =>\n                cn(classNames.singleValue, `${getValueProps().className}`),\n              valueContainer: () => classNames.valueContainer,\n            }}\n            components={{\n              Input: InputComponent,\n              Option: OptionComponent,\n              DropdownIndicator: DropdownIndicatorComponent,\n              Control: ControlComponent,\n            }}\n            // Does not affect the testId of the select, but is needed to pass it to sub-components\n            data-testid={testId}\n            filterOption={filterOption}\n            formatOptionLabel={renderOptionLabel}\n            inputValue={inputValue}\n            instanceId={name}\n            isClearable={clearable}\n            isDisabled={disabled}\n            isLoading={loading}\n            isMulti={multiSelect}\n            name={name}\n            // set menuPosition to fixed so that menu can be rendered\n            // inside Card / Modal components, menuShouldBlockScroll\n            // prevents container scroll when menu is open\n            menuPosition=\"fixed\"\n            menuShouldBlockScroll\n            options={options}\n            placeholder={placeholder}\n            onBlur={(_e) => {\n              setIsFocused(false);\n              return onBlur();\n            }}\n            onChange={(option) => {\n              if (multiSelect) {\n                onChange(\n                  (option as SelectOption[])?.map((_option) => _option.value),\n                );\n              } else {\n                onChange((option as SelectOption)?.value);\n              }\n            }}\n            onFocus={(_e) => {\n              setIsFocused(true);\n            }}\n            onInputChange={onInputChange}\n            ref={ref}\n            // set complete option as value by current field value\n            value={options.find((option) => option.value === value)}\n            unstyled\n          />\n          {error && (\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 error={error} />\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    />\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"],"mappings":"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","names":["Select_default"]}
+{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: '!z-50',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ntype SelectOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n};\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: React.ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n  // eslint-disable-next-line react/jsx-props-no-spreading\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value)}`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  disabled = false,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  label: _label = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  testId: _testId = undefined,\n}: SelectProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const {\n    getBaseProps,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    getTriggerProps,\n    getValueProps,\n    label,\n  } = useSelect({\n    children: [],\n    classNames,\n    errorMessage: JSON.stringify(error),\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label: _label,\n    labelPlacement: 'outside',\n    placeholder: ' ',\n  });\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        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        field: { onChange, value, ref, onBlur },\n      }) => (\n        <div\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...getBaseProps()}\n          className={cn(classNames.base)}\n          data-testid={`${testId}_wrapper`}\n          // see HeroUI styles for group-data condition (data-invalid),\n          // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n          data-required={required}\n        >\n          {showLabel && (\n            <label\n              className={classNames.label}\n              data-slot=\"label\"\n              htmlFor={`react-select-${name}-input`}\n              id={getLabelProps().id}\n            >\n              {label}\n              {showTestIdCopyButton && (\n                <FieldCopyTestIdButton testId={testId} />\n              )}\n            </label>\n          )}\n          <ReactSelect\n            aria-errormessage=\"\"\n            aria-labelledby={\n              getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            }\n            aria-invalid={invalid}\n            classNames={{\n              control: () =>\n                cn(classNames.control, {\n                  [classNames.control_focused]: isFocused && !invalid,\n                }),\n              clearIndicator: () => classNames.clearIndicator,\n              dropdownIndicator: () => classNames.dropdownIndicator,\n              groupHeading: () => classNames.groupHeading,\n              indicatorsContainer: () => classNames.indicatorsContainer,\n              indicatorSeparator: () => classNames.indicatorSeparator,\n              loadingIndicator: () => classNames.loadingIndicator,\n              loadingMessage: () => classNames.loadingMessage,\n              input: () => classNames.input,\n              menu: () => classNames.menu,\n              menuList: () => classNames.menuList,\n              menuPortal: () => classNames.menuPortal,\n              multiValue: () => classNames.multiValue,\n              multiValueLabel: () =>\n                cn(classNames.multiValueLabel, `${getValueProps().className}`),\n              multiValueRemove: () => classNames.multiValueRemove,\n              noOptionsMessage: () => classNames.noOptionsMessage,\n              option: ({\n                isFocused: optionIsFocused,\n                isSelected: optionIsSelected,\n              }) =>\n                cn(classNames.option, {\n                  [classNames.option_focused]: optionIsFocused,\n                  [classNames.option_selected]: optionIsSelected,\n                }),\n              placeholder: () => classNames.placeholder,\n              singleValue: () =>\n                cn(classNames.singleValue, `${getValueProps().className}`),\n              valueContainer: () => classNames.valueContainer,\n            }}\n            components={{\n              Input: InputComponent,\n              Option: OptionComponent,\n              DropdownIndicator: DropdownIndicatorComponent,\n              Control: ControlComponent,\n            }}\n            // Does not affect the testId of the select, but is needed to pass it to sub-components\n            data-testid={testId}\n            filterOption={filterOption}\n            formatOptionLabel={renderOptionLabel}\n            inputValue={inputValue}\n            instanceId={name}\n            isClearable={clearable}\n            isDisabled={disabled}\n            isLoading={loading}\n            isMulti={multiSelect}\n            name={name}\n            // set menuPosition to fixed so that menu can be rendered\n            // inside Card / Modal components, menuShouldBlockScroll\n            // prevents container scroll when menu is open\n            menuPosition=\"fixed\"\n            menuShouldBlockScroll\n            options={options}\n            placeholder={placeholder}\n            onBlur={(_e) => {\n              setIsFocused(false);\n              return onBlur();\n            }}\n            onChange={(option) => {\n              if (multiSelect) {\n                onChange(\n                  (option as SelectOption[])?.map((_option) => _option.value),\n                );\n              } else {\n                onChange((option as SelectOption)?.value);\n              }\n            }}\n            onFocus={(_e) => {\n              setIsFocused(true);\n            }}\n            onInputChange={onInputChange}\n            ref={ref}\n            // set complete option as value by current field value\n            value={options.find((option) => option.value === value)}\n            unstyled\n          />\n          {error && (\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 error={error} />\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    />\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"],"mappings":"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","names":["Select_default"]}

package/dist/{chunk-36LPVTTA.cjs → chunk-RMFLMX75.cjs}

@@ -67,10 +67,11 @@ var FormDebugViewer = ({ className = void 0 }) => {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _Button.Button,
           {
-            icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, { className: "text-danger" }),
+            color: "danger",
+            icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, {}),
             onClick: () => setDebugMode("off"),
             size: "sm",
-            variant: "flat"
+            variant: "light"
           }
         )
       ] }),
@@ -150,4 +151,4 @@ var Form_default2 = Form_default;
 
 
 exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
-//# sourceMappingURL=chunk-36LPVTTA.cjs.map
+//# sourceMappingURL=chunk-RMFLMX75.cjs.map

package/dist/chunk-RMFLMX75.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-RMFLMX75.cjs","../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["jsx","jsxs","cn","Form_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-RMFLMX75.cjs","sourcesContent":[null,"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, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\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          {/* render debug viewer when not in test environment and debug not disabled */}\n          {!IS_TEST && !debug?.disable && (\n            <FormDebugViewer className=\"w-96 flex-shrink\" />\n          )}\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 } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { toValidationFormat } from '../../helpers';\nimport { useFormContext } from '../../hooks';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\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 validationValues = toValidationFormat(watch());\n  const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n  useEffect(\n    () => {\n      const updateValidationErrors = async () => {\n        if (validation) {\n          const validateResult =\n            await validation?.validateAsync(validationValues);\n          setValidationErrors(validateResult?.errors);\n        }\n      };\n      updateValidationErrors();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(validationValues)],\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            color=\"danger\"\n            icon={<FaTimes />}\n            onClick={() => setDebugMode('off')}\n            size=\"sm\"\n            variant=\"light\"\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: validationValues,\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"]}

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk5NWVDM2Acjs = require('./chunk-5NWVDM2A.cjs');
+var _chunkKIWE5ERIcjs = require('./chunk-KIWE5ERI.cjs');
 
 
 var _chunkH65I56SIcjs = require('./chunk-H65I56SI.cjs');
@@ -15,10 +15,10 @@ var _chunkO3523LQ5cjs = require('./chunk-O3523LQ5.cjs');
 var _chunkBV2GRLYXcjs = require('./chunk-BV2GRLYX.cjs');
 
 
-var _chunkTA4JEORCcjs = require('./chunk-TA4JEORC.cjs');
+var _chunkHCWKJ7D7cjs = require('./chunk-HCWKJ7D7.cjs');
 
 
-var _chunk36LPVTTAcjs = require('./chunk-36LPVTTA.cjs');
+var _chunkRMFLMX75cjs = require('./chunk-RMFLMX75.cjs');
 
 
 var _chunk6GN255GPcjs = require('./chunk-6GN255GP.cjs');
@@ -72,5 +72,5 @@ require('./chunk-4DAZAO6Y.cjs');
 
 
 
-exports.CheckboxGroup = _chunkBV2GRLYXcjs.CheckboxGroup_default; exports.Controller = _chunkEPYFZXEIcjs.Controller_default; exports.FieldArray = _chunkTA4JEORCcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkOE5IW4ZGcjs.FieldValidationError_default; exports.Form = _chunk36LPVTTAcjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunkQY5DV3O7cjs.Input_default; exports.RadioGroup = _chunkAINICJHTcjs.RadioGroup_default; exports.Select = _chunk5NWVDM2Acjs.Select_default; exports.SubmitButton = _chunkH65I56SIcjs.SubmitButton_default; exports.Switch = _chunkOR76PGSScjs.Switch_default; exports.TextArea = _chunkO3523LQ5cjs.TextArea_default; exports.checkFieldIsRequired = _chunkIUVEFLF3cjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useFieldArray = _chunkIUVEFLF3cjs.useFieldArray; exports.useFormContext = _chunkIUVEFLF3cjs.useFormContext; exports.useInput = _chunkIUVEFLF3cjs.useInput;
+exports.CheckboxGroup = _chunkBV2GRLYXcjs.CheckboxGroup_default; exports.Controller = _chunkEPYFZXEIcjs.Controller_default; exports.FieldArray = _chunkHCWKJ7D7cjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkOE5IW4ZGcjs.FieldValidationError_default; exports.Form = _chunkRMFLMX75cjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunkQY5DV3O7cjs.Input_default; exports.RadioGroup = _chunkAINICJHTcjs.RadioGroup_default; exports.Select = _chunkKIWE5ERIcjs.Select_default; exports.SubmitButton = _chunkH65I56SIcjs.SubmitButton_default; exports.Switch = _chunkOR76PGSScjs.Switch_default; exports.TextArea = _chunkO3523LQ5cjs.TextArea_default; exports.checkFieldIsRequired = _chunkIUVEFLF3cjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useFieldArray = _chunkIUVEFLF3cjs.useFieldArray; exports.useFormContext = _chunkIUVEFLF3cjs.useFormContext; exports.useInput = _chunkIUVEFLF3cjs.useInput;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   Select_default
-} from "./chunk-JXQIVBYP.js";
+} from "./chunk-RKXB5SCQ.js";
 import {
   SubmitButton_default
 } from "./chunk-GNDW3TAU.js";
@@ -15,10 +15,10 @@ import {
 } from "./chunk-6IRNFSTI.js";
 import {
   FieldArray_default
-} from "./chunk-P6SZXKR2.js";
+} from "./chunk-Q2VW52VP.js";
 import {
   Form_default
-} from "./chunk-CCTMABK2.js";
+} from "./chunk-3HFF7ZAK.js";
 import {
   Grid_default
 } from "./chunk-PDCEKC3G.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuf-stack/uniform",
-  "version": "0.16.7",
+  "version": "0.16.9",
   "description": "fuf react form library",
   "author": "Hannes Tiede",
   "homepage": "https://github.com/fuf-stack/pixels#readme",
@@ -124,13 +124,13 @@
     "@heroui/system": "2.4.12",
     "@heroui/theme": "2.4.12",
     "@react-aria/visually-hidden": "3.8.22",
-    "framer-motion": "12.7.1",
+    "framer-motion": "12.7.2",
     "react-icons": "5.5.0",
     "react-hook-form": "7.55.0",
     "react-select": "5.10.1",
     "@fuf-stack/pixel-utils": "0.5.2",
     "@fuf-stack/veto": "0.9.6",
-    "@fuf-stack/pixels": "0.39.9"
+    "@fuf-stack/pixels": "0.40.0"
   },
   "devDependencies": {
     "@types/debug": "4.1.12",

package/dist/chunk-36LPVTTA.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-36LPVTTA.cjs","../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["jsx","jsxs","cn","Form_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-36LPVTTA.cjs","sourcesContent":[null,"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, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\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          {/* render debug viewer when not in test environment and debug not disabled */}\n          {!IS_TEST && !debug?.disable && (\n            <FormDebugViewer className=\"w-96 flex-shrink\" />\n          )}\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 } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { toValidationFormat } from '../../helpers';\nimport { useFormContext } from '../../hooks';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\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 validationValues = toValidationFormat(watch());\n  const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n  useEffect(\n    () => {\n      const updateValidationErrors = async () => {\n        if (validation) {\n          const validateResult =\n            await validation?.validateAsync(validationValues);\n          setValidationErrors(validateResult?.errors);\n        }\n      };\n      updateValidationErrors();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(validationValues)],\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: validationValues,\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"]}

package/dist/chunk-5NWVDM2A.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-5NWVDM2A.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["Select_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACdA,8BAAyB;AACzB,qGAAwC;AAExC,wCAA0B;AAE1B,oDAAsD;AAmG7C,+CAAA;AA5FF,IAAM,eAAA,EAAiB,4BAAA;AAAG,EAC/B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,sBAAA;AAAA,IACN,cAAA,EACE,wGAAA;AAAA,IACF,OAAA,EACE,yNAAA;AAAA,IACF,eAAA,EAAiB,cAAA;AAAA,IACjB,SAAA,EAAW,EAAA;AAAA,IACX,WAAA,EAAa,EAAA;AAAA,IACb,iBAAA,EACE,+FAAA;AAAA,IACF,KAAA,EAAO,EAAA;AAAA,IACP,YAAA,EAAc,4CAAA;AAAA,IACd,mBAAA,EAAqB,WAAA;AAAA,IACrB,kBAAA,EAAoB,gBAAA;AAAA,IACpB,KAAA,EAAO,aAAA;AAAA;AAAA;AAAA,IAGP,KAAA,EACE,yPAAA;AAAA,IACF,gBAAA,EAAkB,EAAA;AAAA,IAClB,cAAA,EAAgB,oCAAA;AAAA,IAChB,IAAA,EAAM,qEAAA;AAAA,IACN,QAAA,EAAU,EAAA;AAAA;AAAA;AAAA,IAGV,UAAA,EAAY,OAAA;AAAA,IACZ,UAAA,EAAY,8DAAA;AAAA,IACZ,mBAAA,EAAqB,EAAA;AAAA,IACrB,eAAA,EAAiB,kBAAA;AAAA,IACjB,gBAAA,EACE,+FAAA;AAAA,IACF,gBAAA,EAAkB,oCAAA;AAAA,IAClB,cAAA,EAAgB,sCAAA;AAAA,IAChB,eAAA,EAAiB,gBAAA;AAAA,IACjB,MAAA,EAAQ,wCAAA;AAAA,IACR,WAAA,EAAa,8CAAA;AAAA,IACb,eAAA,EAAiB,EAAA;AAAA,IACjB,WAAA,EAAa,kBAAA;AAAA,IACb,cAAA,EAAgB;AAAA,EAClB;AACF,CAAC,CAAA;AA6CD,IAAM,eAAA,EAA0C,CAAC,KAAA,EAAA,GAAU;AAGzD,EAAA,MAAM,OAAA,EAAS,CAAA,EAAA;AAER,EAAA;AACT;AAEM;AAGW,EAAA;AAEb,EAAA;AAKJ;AAEM;AA1HN,EAAA;AA6HiB,EAAA;AAEb,EAAA;AAKJ;AAEM;AAKW,EAAA;AAEb,EAAA;AAKJ;AAGgB;AACF,EAAA;AACA,EAAA;AACD,EAAA;AACI,EAAA;AACf,EAAA;AACa,EAAA;AACG,EAAA;AACN,EAAA;AACI,EAAA;AACd,EAAA;AACgB,EAAA;AAChB,EAAA;AACc,EAAA;AACN,EAAA;AACS;AACT,EAAA;AACO,EAAA;AAER,EAAA;AAED,EAAA;AACA,EAAA;AAEA,EAAA;AACJ,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACY,EAAA;AACD,IAAA;AACX,IAAA;AACc,IAAA;AACF,IAAA;AACD,IAAA;AACA,IAAA;AACC,IAAA;AACL,IAAA;AACP,IAAA;AACa,IAAA;AACd,EAAA;AAEK,EAAA;AACA,EAAA;AAGJ,EAAA;AAAC,IAAA;AAAA,IAAA;AACC,MAAA;AACA,MAAA;AACA,MAAA;AACS,MAAA;AAAA;AAEE,QAAA;AACR,MAAA;AA7MT,QAAA;AA8MQ,QAAA;AAAC,UAAA;AAAA,UAAA;AAGC,YAAA;AACA,YAAA;AAGA,YAAA;AAEC,YAAA;AAAA,cAAA;AACE,gBAAA;AAAA,gBAAA;AACC,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AAEC,kBAAA;AAAA,oBAAA;AAAA,oBAAA;AAEwC,kBAAA;AAAA,gBAAA;AAE3C,cAAA;AAEF,8BAAA;AAAC,gBAAA;AAAA,gBAAA;AACC,kBAAA;AACA,kBAAA;AAGA,kBAAA;AACA,kBAAA;AAAY,oBAAA;AAEe,sBAAA;AACuB,oBAAA;AAC7C,oBAAA;AAC8B,oBAAA;AACG,oBAAA;AACL,oBAAA;AACO,oBAAA;AACD,oBAAA;AACb,oBAAA;AACD,oBAAA;AACI,oBAAA;AACE,oBAAA;AACA,oBAAA;AAEkC,oBAAA;AAC5B,oBAAA;AACA,oBAAA;AAC1B,sBAAA;AACI,sBAAA;AACC,oBAAA;AAEU,sBAAA;AACS,sBAAA;AACC,oBAAA;AAC/B,oBAAA;AAC2B,oBAAA;AAE6B,oBAAA;AAE7D,kBAAA;AACA,kBAAA;AAAY,oBAAA;AACH,oBAAA;AACC,oBAAA;AACW,oBAAA;AAErB,kBAAA;AAEA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AAIA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACE,oBAAA;AACA,oBAAA;AACF,kBAAA;AACA,kBAAA;AACE,oBAAA;AACE,sBAAA;AAAA,wBAAA;AACuD,sBAAA;AACvD,oBAAA;AAEA,sBAAA;AAAwC,oBAAA;AAE5C,kBAAA;AACA,kBAAA;AACE,oBAAA;AACF,kBAAA;AACA,kBAAA;AACA,kBAAA;AAEA,kBAAA;AACA,kBAAA;AAAQ,gBAAA;AACV,cAAA;AACC,cAAA;AAEC,8BAAA;AAKA,YAAA;AAAA,UAAA;AAEJ,QAAA;AAAA,MAAA;AAAA,IAAA;AAEJ,EAAA;AAEJ;AAEO;ADzFW;AACA;AEzOXA;AF2OW;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-5NWVDM2A.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: '!z-50',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ntype SelectOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n};\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: React.ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n  // eslint-disable-next-line react/jsx-props-no-spreading\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value)}`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  disabled = false,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  label: _label = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  testId: _testId = undefined,\n}: SelectProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const {\n    getBaseProps,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    getTriggerProps,\n    getValueProps,\n    label,\n  } = useSelect({\n    children: [],\n    classNames,\n    errorMessage: JSON.stringify(error),\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label: _label,\n    labelPlacement: 'outside',\n    placeholder: ' ',\n  });\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        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        field: { onChange, value, ref, onBlur },\n      }) => (\n        <div\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...getBaseProps()}\n          className={cn(classNames.base)}\n          data-testid={`${testId}_wrapper`}\n          // see HeroUI styles for group-data condition (data-invalid),\n          // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n          data-required={required}\n        >\n          {showLabel && (\n            <label\n              className={classNames.label}\n              data-slot=\"label\"\n              htmlFor={`react-select-${name}-input`}\n              id={getLabelProps().id}\n            >\n              {label}\n              {showTestIdCopyButton && (\n                <FieldCopyTestIdButton testId={testId} />\n              )}\n            </label>\n          )}\n          <ReactSelect\n            aria-errormessage=\"\"\n            aria-labelledby={\n              getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            }\n            aria-invalid={invalid}\n            classNames={{\n              control: () =>\n                cn(classNames.control, {\n                  [classNames.control_focused]: isFocused && !invalid,\n                }),\n              clearIndicator: () => classNames.clearIndicator,\n              dropdownIndicator: () => classNames.dropdownIndicator,\n              groupHeading: () => classNames.groupHeading,\n              indicatorsContainer: () => classNames.indicatorsContainer,\n              indicatorSeparator: () => classNames.indicatorSeparator,\n              input: () => classNames.input,\n              menu: () => classNames.menu,\n              menuList: () => classNames.menuList,\n              menuPortal: () => classNames.menuPortal,\n              multiValue: () => classNames.multiValue,\n              multiValueLabel: () =>\n                cn(classNames.multiValueLabel, `${getValueProps().className}`),\n              multiValueRemove: () => classNames.multiValueRemove,\n              noOptionsMessage: () => classNames.noOptionsMessage,\n              option: ({\n                isFocused: optionIsFocused,\n                isSelected: optionIsSelected,\n              }) =>\n                cn(classNames.option, {\n                  [classNames.option_focused]: optionIsFocused,\n                  [classNames.option_selected]: optionIsSelected,\n                }),\n              placeholder: () => classNames.placeholder,\n              singleValue: () =>\n                cn(classNames.singleValue, `${getValueProps().className}`),\n              valueContainer: () => classNames.valueContainer,\n            }}\n            components={{\n              Input: InputComponent,\n              Option: OptionComponent,\n              DropdownIndicator: DropdownIndicatorComponent,\n              Control: ControlComponent,\n            }}\n            // Does not affect the testId of the select, but is needed to pass it to sub-components\n            data-testid={testId}\n            filterOption={filterOption}\n            formatOptionLabel={renderOptionLabel}\n            inputValue={inputValue}\n            instanceId={name}\n            isClearable={clearable}\n            isDisabled={disabled}\n            isLoading={loading}\n            isMulti={multiSelect}\n            name={name}\n            // set menuPosition to fixed so that menu can be rendered\n            // inside Card / Modal components, menuShouldBlockScroll\n            // prevents container scroll when menu is open\n            menuPosition=\"fixed\"\n            menuShouldBlockScroll\n            options={options}\n            placeholder={placeholder}\n            onBlur={(_e) => {\n              setIsFocused(false);\n              return onBlur();\n            }}\n            onChange={(option) => {\n              if (multiSelect) {\n                onChange(\n                  (option as SelectOption[])?.map((_option) => _option.value),\n                );\n              } else {\n                onChange((option as SelectOption)?.value);\n              }\n            }}\n            onFocus={(_e) => {\n              setIsFocused(true);\n            }}\n            onInputChange={onInputChange}\n            ref={ref}\n            // set complete option as value by current field value\n            value={options.find((option) => option.value === value)}\n            unstyled\n          />\n          {error && (\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 error={error} />\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    />\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"]}

package/dist/chunk-P6SZXKR2.js.map

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

package/dist/chunk-TA4JEORC.cjs.map

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