@fuf-stack/uniform 0.15.0 → 0.16.0

package/dist/{chunk-QLQR44AD.cjs → chunk-Q23XGBJ5.cjs}

@@ -1,11 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunk2NSCPLAAcjs = require('./chunk-2NSCPLAA.cjs');
+var _chunkIUVEFLF3cjs = require('./chunk-IUVEFLF3.cjs');
 
 
-
-var _chunk4AXNPSXGcjs = require('./chunk-4AXNPSXG.cjs');
+var _chunkCESGUF6Fcjs = require('./chunk-CESGUF6F.cjs');
 
 
 var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
@@ -27,9 +26,9 @@ var FormDebugViewer = ({ className = void 0 }) => {
     setDebugMode,
     validation,
     watch
-  } = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
+  } = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
   const [validationErrors, setValidationErrors] = _react.useState.call(void 0, null);
-  const validationValues = _chunk4AXNPSXGcjs.toValidationFormat.call(void 0, watch());
+  const validationValues = _chunkCESGUF6Fcjs.toValidationFormat.call(void 0, watch());
   const debugTestIdsEnabled = debugMode === "debug-testids";
   _react.useEffect.call(void 0, 
     () => {
@@ -116,7 +115,7 @@ var Form = ({
   validationTrigger = "all"
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk2NSCPLAAcjs.FormContext_default,
+    _chunkIUVEFLF3cjs.FormContext_default,
     {
       debugModeSettings: debug,
       initialValues,
@@ -128,7 +127,7 @@ var Form = ({
           "form",
           {
             className: _pixelutils.cn.call(void 0, "flex-grow", className),
-            "data-testid": _chunk4AXNPSXGcjs.slugify.call(void 0, testId || name || ""),
+            "data-testid": _pixelutils.slugify.call(void 0, testId || name || ""),
             name,
             onSubmit: handleSubmit,
             children
@@ -148,4 +147,4 @@ var Form_default2 = Form_default;
 
 
 exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
-//# sourceMappingURL=chunk-QLQR44AD.cjs.map
+//# sourceMappingURL=chunk-Q23XGBJ5.cjs.map

package/dist/chunk-Q23XGBJ5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-Q23XGBJ5.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-Q23XGBJ5.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, Card, Json } from '@fuf-stack/pixels';\n\nimport { toValidationFormat } from '../../helpers';\nimport { useFormContext } from '../../hooks';\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-2LAPLELO.js → chunk-STU7SBQX.js}

@@ -1,18 +1,15 @@
 import {
   Controller_default
-} from "./chunk-4EJS5FXY.js";
+} from "./chunk-ZI22WT2P.js";
 import {
   FieldCopyTestIdButton_default
 } from "./chunk-2CRY7VDQ.js";
 import {
   FieldValidationError_default
-} from "./chunk-VX76MJAI.js";
+} from "./chunk-ASPOGQPS.js";
 import {
   useFormContext
-} from "./chunk-MRXNKY72.js";
-import {
-  slugify
-} from "./chunk-IEF2GJ22.js";
+} from "./chunk-T4N6TMUL.js";
 import {
   __objRest,
   __spreadProps,
@@ -20,13 +17,13 @@ import {
 } from "./chunk-CRTRMMJ7.js";
 
 // src/RadioGroup/RadioGroup.tsx
-import { RadioGroup as NextRadioGroup, Radio } from "@nextui-org/radio";
-import { cn as cn3, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { RadioGroup as HeroRadioGroup, Radio } from "@heroui/radio";
+import { cn as cn3, slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { ButtonGroup } from "@fuf-stack/pixels";
 import Tabs from "@fuf-stack/pixels/Tabs";
 
 // src/RadioGroup/Variants/RadioBox.tsx
-import { useRadio } from "@nextui-org/radio";
+import { useRadio } from "@heroui/radio";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { cn } from "@fuf-stack/pixel-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -117,7 +114,8 @@ var radioGroupVariants = tv({
     itemLabelWrapper: "",
     itemWrapper: 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid="true"]):not(group-data-[selected="false"])]:border-focus',
     // TODO: get rid of !.
-    // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts
+    // see HeroUI styles for group-data condition,
+    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
     label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
     wrapper: "",
     // Tabs
@@ -244,7 +242,7 @@ var RadioGroup = ({
             });
         }
         return /* @__PURE__ */ jsx3(
-          NextRadioGroup,
+          HeroRadioGroup,
           {
             classNames,
             "data-invalid": invalid,
@@ -280,4 +278,4 @@ export {
   RadioGroup_default,
   RadioGroup_default2
 };
-//# sourceMappingURL=chunk-2LAPLELO.js.map
+//# sourceMappingURL=chunk-STU7SBQX.js.map

package/dist/chunk-STU7SBQX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/Variants/RadioBox.tsx","../src/RadioGroup/Variants/RadioButton.tsx","../src/RadioGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup, Radio } from '@heroui/radio';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { ButtonGroup } from '@fuf-stack/pixels';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './Variants/RadioBox';\nimport { RadioButton } from './Variants/RadioButton';\n\nexport const radioGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    buttonGroup:\n      'rounded-xl group-data-[invalid=true]:border group-data-[invalid=true]:border-danger', // optional if a button group is used\n    itemBase: '',\n    itemBaseActive: 'bg-opacity-50', // optional if a button group is used\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n    // Tabs\n    tabList: '',\n    tab: '',\n    tabContent: '',\n    cursor: '',\n    panel: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioGroupVariants>;\ntype ClassName = TVClassName<typeof radioGroupVariants>;\n\nexport interface RadioGroupOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: React.ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: React.ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioGroupProps<\n  V extends 'default' | 'radioBox' | 'radioButton' | 'tabs',\n> extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: V extends 'default' | 'radioBox' | 'radioButton'\n    ? RadioGroupOption[]\n    : TabProps[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioGroup should look like. */\n  variant?: V;\n}\n\n/**\n * RadioGroup component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioGroup = ({\n  className = undefined,\n  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n  variant = 'default',\n}: RadioGroupProps<\n  'default' | 'radioBox' | 'radioButton' | 'tabs'\n>): ReactElement => {\n  const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = radioGroupVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <Controller\n      control={control}\n      disabled={disabled}\n      name={name}\n      render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\n        let RadioComponents: ReactNode;\n\n        const itemClassNames = {\n          base: classNames.itemBase,\n          control: classNames.itemControl,\n          description: classNames.itemDescription,\n          label: classNames.itemLabel,\n          labelWrapper: classNames.itemLabelWrapper,\n          wrapper: classNames.itemWrapper,\n          tabList: classNames.tabList,\n          tab: classNames.tab,\n          tabContent: classNames.tabContent,\n          cursor: classNames.cursor,\n          panel: classNames.panel,\n        };\n\n        switch (variant) {\n          case 'radioBox':\n            RadioComponents = options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <RadioBox\n                    classNames={itemClassNames}\n                    data-testid={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    description={option.description}\n                    icon={option.icon}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    onChange={onChange}\n                    value={option.value}\n                  >\n                    {option.label ? option.label : option.value}\n                  </RadioBox>\n                );\n              }\n              return null;\n            });\n            break;\n          case 'radioButton':\n            RadioComponents = options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <RadioButton\n                    className={cn(classNames.itemBase, {\n                      [classNames.itemBaseActive]:\n                        getValues()[name] !== option.value,\n                    })}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    testID={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    onChange={onChange}\n                    value={option.value}\n                    // TODO: how to do the classNames properly (make selected option darker with same color)\n                  >\n                    {option.label ? option.label : option.value}\n                  </RadioButton>\n                );\n              }\n              return null;\n            });\n            break;\n\n          case 'tabs':\n            RadioComponents = (\n              <Tabs\n                fullWidth={false}\n                tabs={options as TabProps[]}\n                onSelectionChange={onChange}\n              />\n            );\n            break;\n          default:\n            RadioComponents = options.map((option) => {\n              if ('value' in option) {\n                return (\n                  <Radio\n                    classNames={itemClassNames}\n                    data-testid={slugify(\n                      `${testId}_option_${option.testId || option.value}`,\n                    )}\n                    isDisabled={isDisabled || option.disabled}\n                    key={option.value}\n                    onChange={onChange}\n                    value={option.value}\n                  >\n                    {option.label ? option.label : option.value}\n                  </Radio>\n                );\n              }\n              return null;\n            });\n        }\n\n        return (\n          <HeroRadioGroup\n            classNames={classNames}\n            // see HeroUI styles for group-data condition (data-invalid),\n            // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n            data-invalid={invalid}\n            data-required={required}\n            data-testid={testId}\n            errorMessage={error && <FieldValidationError error={error} />}\n            isDisabled={isDisabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              showLabel && (\n                // eslint-disable-next-line jsx-a11y/label-has-associated-control\n                <label>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </label>\n              )\n            }\n            name={name}\n            orientation={inline ? 'horizontal' : 'vertical'}\n            onBlur={onBlur}\n            onChange={onChange}\n            ref={ref}\n          >\n            {variant === 'radioButton' ? (\n              <ButtonGroup className={classNames.buttonGroup}>\n                {RadioComponents}\n              </ButtonGroup>\n            ) : (\n              RadioComponents\n            )}\n          </HeroRadioGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default RadioGroup;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n  /** icon for the option */\n  icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props);\n\n  return (\n    <Component\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...getBaseProps()}\n      className={cn(\n        'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n        {\n          // disabled styles\n          'pointer-events-none opacity-disabled': isDisabled,\n        },\n      )}\n    >\n      <VisuallyHidden>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n      <span {...getWrapperProps()}>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <span {...getControlProps()} />\n      </span>\n      {icon}\n      <div\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...getLabelWrapperProps()}\n        className={cn(getLabelWrapperProps().className, 'grow')}\n      >\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        {children && <span {...getLabelProps()}>{children}</span>}\n        {description && (\n          <span className=\"text-small text-foreground opacity-70\">\n            {description}\n          </span>\n        )}\n      </div>\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface RadioButtonProps {\n  /** label of the value. */\n  children: React.ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** disables the option */\n  isDisabled?: boolean;\n  /** HTML data-testid attribute of the option */\n  testID?: string;\n  /** Callback function. Executed if the option is clicked. */\n  onChange: (...event: unknown[]) => void;\n  /** value of the option. */\n  value: string;\n}\n\nexport const RadioButton = ({\n  children,\n  className = undefined,\n  isDisabled = false,\n  onChange,\n  testID = undefined,\n  value,\n}: RadioButtonProps) => {\n  return (\n    <Button\n      className={cn(className)}\n      testId={testID}\n      disabled={isDisabled}\n      key={`index_${value}`}\n      onClick={() => {\n        return onChange(value);\n      }}\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default RadioButton;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"],"mappings":"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","names":["cn","cn","jsx","jsx","jsxs","cn","RadioGroup_default"]}

package/dist/{chunk-MRXNKY72.js → chunk-T4N6TMUL.js}

@@ -1,7 +1,6 @@
 import {
-  slugify,
   toValidationFormat
-} from "./chunk-IEF2GJ22.js";
+} from "./chunk-UAV6PVB4.js";
 import {
   __async,
   __objRest,
@@ -15,6 +14,7 @@ import { useFieldArray } from "react-hook-form";
 // src/hooks/useFormContext/useFormContext.ts
 import { useContext } from "react";
 import { useFormContext as useHookFormContext } from "react-hook-form";
+import { slugify } from "@fuf-stack/pixel-utils";
 
 // src/Form/subcomponents/FormContext.tsx
 import React, { useMemo, useState } from "react";
@@ -121,7 +121,7 @@ var useFormContext = () => {
 };
 
 // src/hooks/useInput/useInput.ts
-import { useInput } from "@nextui-org/input";
+import { useInput } from "@heroui/input";
 
 export {
   useFieldArray,
@@ -130,4 +130,4 @@ export {
   useFormContext,
   useInput
 };
-//# sourceMappingURL=chunk-MRXNKY72.js.map
+//# sourceMappingURL=chunk-T4N6TMUL.js.map

package/dist/chunk-T4N6TMUL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useFieldArray/useFieldArray.ts","../src/hooks/useFormContext/useFormContext.ts","../src/Form/subcomponents/FormContext.tsx","../src/hooks/useInput/useInput.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\n/** @see https://react-hook-form.com/docs/usefieldarray */\nexport { useFieldArray } from 'react-hook-form';\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { FieldError } from 'react-hook-form';\n\nimport { useContext } from 'react';\nimport { useFormContext as useHookFormContext } from 'react-hook-form';\n\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nimport { UniformContext } from '../../Form/subcomponents/FormContext';\n\n/** Schema check whether a field is required or optional */\nexport const checkFieldIsRequired = (\n  validation: VetoInstance,\n  path: string[],\n): boolean => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const checkRequired = (schema: any) => {\n    // arrays with minLength are required\n    if (schema.type === 'array' && schema?.minLength) {\n      return true;\n    }\n    // all other fields are required if they are\n    // not optional and not nullable\n    return !schema.isOptional && !schema.isNullable;\n  };\n\n  return validation.checkSchemaPath(checkRequired, path);\n};\n\n/**\n * Custom hook that extends react-hook-form's useFormContext to add validation and state management.\n */\nexport const useFormContext = () => {\n  const {\n    formState,\n    // https://react-hook-form.com/docs/useform/getfieldstate\n    // for getFieldState a subscription to formState properties is needed!\n    getFieldState: getFieldStateOrig,\n    ...otherMethods\n  } = useHookFormContext();\n\n  const uniformContext = useContext(UniformContext);\n\n  /**\n   * Updated getFieldState method which returns:\n   * - Whether the field is required by checking the validation schema\n   * - Existing field state information (errors, etc.)\n   */\n  const getFieldState = (name: string, testId?: string) => {\n    const fieldPath =\n      typeof name === 'string' ? name.replace(/\\[\\d+\\]/g, '').split('.') : name;\n\n    // Check if the field is required using the validation schema\n    const required = uniformContext?.validation\n      ? checkFieldIsRequired(uniformContext.validation, fieldPath)\n      : false;\n\n    // Get the original field state (errors, etc.) from react-hook-form\n    const { error, ...rest } = getFieldStateOrig(name, formState);\n\n    return {\n      ...rest,\n      error: error as FieldError[] | undefined, // Ensure correct type for error\n      required,\n      testId: slugify(testId || name),\n    };\n  };\n\n  return {\n    ...otherMethods,\n    ...uniformContext,\n    getFieldState,\n    formState,\n  };\n};\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport React, { useMemo, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toValidationFormat } from '../../helpers';\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport type DebugModeSettings = {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n};\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n *    form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n *    that can be used to validate form fields and handle validation logic.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n */\nexport const UniformContext = React.createContext<{\n  /** Form debug mode enabled or not */\n  debugMode: DebugMode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** Function to update if the form can currently be submitted */\n  preventSubmit: (prevent: boolean) => void;\n  /** Setter to enable or disable form debug mode */\n  setDebugMode: (debugMode: DebugMode) => void;\n  /** Optional Veto validation schema instance for form validation */\n  validation?: VetoInstance;\n}>({\n  debugMode: 'off',\n  preventSubmit: () => undefined,\n  setDebugMode: () => undefined,\n  validation: undefined,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n  /** children form render function */\n  children: (childProps: {\n    handleSubmit: (e?: React.BaseSyntheticEvent) => Promise<void>;\n  }) => ReactNode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** Veto validation schema instance */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - The veto validation schema context\n * - Submit handler creation and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n  children,\n  debugModeSettings = undefined,\n  initialValues = undefined,\n  onSubmit,\n  validation = undefined,\n  validationTrigger,\n}) => {\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // Form Debug mode state is handled in the form context\n  const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n    debugModeSettings?.localStorageKey || DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n    'off',\n  );\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => ({\n      // set debugMode to disabled when debugModeSettings.disable is true\n      // otherwise use current debug mode from localStorage\n      debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n      preventSubmit: (prevent: boolean) => {\n        setPreventSubmit(prevent);\n      },\n      setDebugMode,\n      validation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [debugMode, debugModeSettings?.disable],\n  );\n\n  // Initialize react hook form\n  const methods = useForm({\n    defaultValues: initialValues,\n    // add validation config when validation schema provided\n    ...(validation\n      ? {\n          // set rhf mode\n          // see: https://react-hook-form.com/docs/useform#mode\n          mode: validationTrigger,\n          resolver: async (values) => {\n            const { data, errors, ...rest } = await validation.validateAsync(\n              toValidationFormat(values),\n            );\n            // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n            return { values: data || {}, errors: errors || {}, ...rest };\n          },\n        }\n      : {}),\n  });\n\n  // Create submit handler\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    // only prevent submit when form state is valid, because otherwise\n    // submit will only trigger validation and add errors / focus invalid fields\n    if (methods.formState.isValid && preventSubmit) {\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n    await methods.handleSubmit(onSubmit)(e);\n  };\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n","/* eslint-disable import/prefer-default-export */\nexport { useInput } from '@heroui/input';\n"],"mappings":";;;;;;;;;;;AAGA,SAAS,qBAAqB;;;ACA9B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB,0BAA0B;AAErD,SAAS,eAAe;;;ACFxB,OAAO,SAAS,SAAS,gBAAgB;AACzC,SAAS,gBAAgB,kBAAkB,eAAe;AAE1D,SAAS,uBAAuB;AA+I1B;AAlIN,IAAM,uCAAuC;AAetC,IAAM,iBAAiB,MAAM,cAWjC;AAAA,EACD,WAAW;AAAA,EACX,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AACd,CAAC;AA2BD,IAAM,eAA4C,CAAC;AAAA,EACjD;AAAA,EACA,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB;AAAA,EACA,aAAa;AAAA,EACb;AACF,MAAM;AAEJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAGxD,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,KAChC,uDAAmB,oBAAmB;AAAA,IACtC;AAAA,EACF;AAGA,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA;AAAA;AAAA,MAGL,YAAW,uDAAmB,WAAU,aAAa;AAAA,MACrD,eAAe,CAAC,YAAqB;AACnC,yBAAiB,OAAO;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,WAAW,uDAAmB,OAAO;AAAA,EACxC;AAGA,QAAM,UAAU,QAAQ;AAAA,IACtB,eAAe;AAAA,KAEX,aACA;AAAA;AAAA;AAAA,IAGE,MAAM;AAAA,IACN,UAAU,CAAO,WAAW;AAC1B,YAAkC,WAAM,WAAW;AAAA,QACjD,mBAAmB,MAAM;AAAA,MAC3B,GAFQ,QAAM,OAzH1B,IAyH8C,IAAT,iBAAS,IAAT,CAAjB,QAAM;AAId,aAAO,iBAAE,QAAQ,QAAQ,CAAC,GAAG,QAAQ,UAAU,CAAC,KAAM;AAAA,IACxD;AAAA,EACF,IACA,CAAC,EACN;AAID,QAAM,eAAe,CAAO,MAAiC;AAG3D,QAAI,QAAQ,UAAU,WAAW,eAAe;AAC9C,cAAQ;AAAA,QACN;AAAA,MACF;AACA,6BAAG;AACH,aAAO,QAAQ,QAAQ;AAAA,IACzB;AACA,UAAM,QAAQ,aAAa,QAAQ,EAAE,CAAC;AAAA,EACxC;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,cAG9B,8BAAC,mDAAqB,UAArB,EACE,mBAAS,EAAE,aAAa,CAAC,IAC5B,GACF;AAEJ;AAEA,IAAO,sBAAQ;;;ADlJR,IAAM,uBAAuB,CAClC,YACA,SACY;AAEZ,QAAM,gBAAgB,CAAC,WAAgB;AAErC,QAAI,OAAO,SAAS,YAAW,iCAAQ,YAAW;AAChD,aAAO;AAAA,IACT;AAGA,WAAO,CAAC,OAAO,cAAc,CAAC,OAAO;AAAA,EACvC;AAEA,SAAO,WAAW,gBAAgB,eAAe,IAAI;AACvD;AAKO,IAAM,iBAAiB,MAAM;AAClC,QAMI,wBAAmB,GALrB;AAAA;AAAA,IAGA,eAAe;AAAA,EArCnB,IAuCM,IADC,yBACD,IADC;AAAA,IAJH;AAAA;AAAA;AAAA,IAGA;AAAA;AAIF,QAAM,iBAAiB,WAAW,cAAc;AAOhD,QAAM,gBAAgB,CAAC,MAAc,WAAoB;AACvD,UAAM,YACJ,OAAO,SAAS,WAAW,KAAK,QAAQ,YAAY,EAAE,EAAE,MAAM,GAAG,IAAI;AAGvE,UAAM,YAAW,iDAAgB,cAC7B,qBAAqB,eAAe,YAAY,SAAS,IACzD;AAGJ,UAA2BA,MAAA,kBAAkB,MAAM,SAAS,GAApD,QA1DZ,IA0D+BA,KAAT,iBAASA,KAAT,CAAV;AAER,WAAO,iCACF,OADE;AAAA,MAEL;AAAA;AAAA,MACA;AAAA,MACA,QAAQ,QAAQ,UAAU,IAAI;AAAA,IAChC;AAAA,EACF;AAEA,SAAO,gDACF,eACA,iBAFE;AAAA,IAGL;AAAA,IACA;AAAA,EACF;AACF;;;AEzEA,SAAS,gBAAgB;","names":["_a"]}

package/dist/{chunk-4EP3IGSK.cjs → chunk-TJESSWIB.cjs}

@@ -3,15 +3,15 @@
 var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
 
 
-var _chunkC4RM2JSDcjs = require('./chunk-C4RM2JSD.cjs');
+var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
 
 
 
 
-var _chunk2NSCPLAAcjs = require('./chunk-2NSCPLAA.cjs');
+var _chunkIUVEFLF3cjs = require('./chunk-IUVEFLF3.cjs');
 
 
-var _chunk4AXNPSXGcjs = require('./chunk-4AXNPSXG.cjs');
+var _chunkCESGUF6Fcjs = require('./chunk-CESGUF6F.cjs');
 
 
 
@@ -115,9 +115,9 @@ var FieldArrayElement = ({
   testId = void 0
 }) => {
   var _a;
-  const { getFieldState } = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
+  const { getFieldState } = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
   const { error, invalid } = getFieldState(`${name}`, void 0);
-  const { getHelperWrapperProps, getErrorMessageProps } = _chunk2NSCPLAAcjs.useInput.call(void 0, {
+  const { getHelperWrapperProps, getErrorMessageProps } = _chunkIUVEFLF3cjs.useInput.call(void 0, {
     classNames: { helperWrapper: "block" },
     errorMessage: JSON.stringify(error),
     isInvalid: invalid,
@@ -166,7 +166,7 @@ var FieldArrayElement = ({
       }
     ),
     error && typeof error[index] !== "undefined" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkC4RM2JSDcjs.FieldValidationError_default,
+      _chunkOE5IW4ZGcjs.FieldValidationError_default,
       {
         error: (_a = error[Number(index)]) == null ? void 0 : _a._errors
       }
@@ -271,13 +271,13 @@ var FieldArray = ({
     getFieldState,
     trigger
     // watch
-  } = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
-  const { fields, append, remove, insert, move } = _chunk2NSCPLAAcjs.useFieldArray.call(void 0, {
+  } = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
+  const { fields, append, remove, insert, move } = _chunkIUVEFLF3cjs.useFieldArray.call(void 0, {
     control,
     name
   });
   const { error, testId, invalid, required } = getFieldState(name, _testId);
-  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _chunk2NSCPLAAcjs.useInput.call(void 0, {
+  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _chunkIUVEFLF3cjs.useInput.call(void 0, {
     isInvalid: invalid,
     isRequired: required,
     errorMessage: JSON.stringify(error),
@@ -286,7 +286,7 @@ var FieldArray = ({
     placeholder: " ",
     classNames: { helperWrapper: "block" }
   });
-  const elementInitialValue = _chunk4AXNPSXGcjs.toNullishString.call(void 0, _elementInitialValue);
+  const elementInitialValue = _chunkCESGUF6Fcjs.toNullishString.call(void 0, _elementInitialValue);
   if (lastElementNotDeletable && fields.length === 0) {
     append(elementInitialValue);
   }
@@ -355,7 +355,7 @@ var FieldArray = ({
             children: appendButtonText
           }
         ),
-        (error == null ? void 0 : error._errors) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC4RM2JSDcjs.FieldValidationError_default, { error: error == null ? void 0 : error._errors }) })) }))
+        (error == null ? void 0 : error._errors) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error: error == null ? void 0 : error._errors }) })) }))
       ]
     }
   ) });
@@ -369,4 +369,4 @@ var FieldArray_default2 = FieldArray_default;
 
 
 exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
-//# sourceMappingURL=chunk-4EP3IGSK.cjs.map
+//# sourceMappingURL=chunk-TJESSWIB.cjs.map

package/dist/{chunk-4EP3IGSK.cjs.map → chunk-TJESSWIB.cjs.map}

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

package/dist/{chunk-IEF2GJ22.js → chunk-UAV6PVB4.js}

@@ -1,8 +1,3 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-CRTRMMJ7.js";
-
 // src/helpers/nullishFields/nullishFields.ts
 var nullString = "__NULL__";
 var falseString = "__FALSE__";
@@ -59,24 +54,10 @@ var toValidationFormat = (formState) => {
   );
 };
 
-// src/helpers/slugify/slugify.ts
-import slug from "slug";
-var slugify = (string, options) => {
-  const replacement = (options == null ? void 0 : options.replacement) || "_";
-  return slug(string, __spreadValues(__spreadProps(__spreadValues({}, slug.defaults.modes.rfc3986), {
-    charmap: __spreadValues(__spreadProps(__spreadValues({}, slug.defaults.modes.rfc3986.charmap), {
-      // allow dots by default
-      ".": "."
-    }), replacement !== "-" ? { "-": "_" } : {}),
-    replacement
-  }), options || {}));
-};
-
 export {
   fromNullishString,
   toNullishString,
   toFormFormat,
-  toValidationFormat,
-  slugify
+  toValidationFormat
 };
-//# sourceMappingURL=chunk-IEF2GJ22.js.map
+//# sourceMappingURL=chunk-UAV6PVB4.js.map

package/dist/chunk-UAV6PVB4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/helpers/nullishFields/nullishFields.ts"],"sourcesContent":["/**\n * String markers used to preserve null, false, and 0 values during JSON processing\n */\nconst nullString = '__NULL__';\nconst falseString = '__FALSE__';\nconst zeroString = '__ZERO__';\n\n/**\n * Converts marker strings back to their original values when processing arrays\n */\nexport const fromNullishString = (value: unknown): unknown => {\n  if (typeof value !== 'string') return value;\n\n  switch (value) {\n    case nullString:\n      return null;\n    case falseString:\n      return false;\n    case zeroString:\n      return 0;\n    default:\n      return value;\n  }\n};\n\n/**\n * Converts null/falsy values to marker strings for JSON processing\n */\nexport const toNullishString = (value: unknown): unknown => {\n  if (value === null || value === '') return nullString;\n  if (value === false) return falseString;\n  if (value === 0) return zeroString;\n  return value;\n};\n\n/**\n * Converts field values to a format suitable for forms by:\n * - Converting array values to their string markers to preserve null/falsy values\n * - Removing empty strings and null values from objects\n *\n * This conversion is required because React Hook Form does not support arrays with\n * flat values (string, number, boolean, null). Array fields must contain objects.\n * We work around this by converting array values to string markers.\n *\n * @example\n * const fields = {\n *   name: 'John',\n *   scores: [0, null, 75, false],\n *   contact: {\n *     email: '',\n *     phone: null,\n *     address: '123 Main St'\n *   }\n * };\n *\n * // Result:\n * {\n *   name: 'John',\n *   scores: ['__ZERO__', '__NULL__', 75, '__FALSE__'],\n *   contact: {\n *     address: '123 Main St'\n *   }\n * }\n */\nexport const toFormFormat = (\n  fields: Record<string, unknown>,\n): Record<string, unknown> => {\n  return JSON.parse(\n    JSON.stringify(fields, (_, value) => {\n      if (Array.isArray(value)) {\n        return value.map(toNullishString);\n      }\n\n      if (value && typeof value === 'object') {\n        return Object.fromEntries(\n          Object.entries(value).filter(([_key, v]) => v !== '' && v !== null),\n        );\n      }\n\n      return value;\n    }),\n  );\n};\n\n/**\n * Converts form state to a format suitable for validation by:\n * - Converting array string markers (__NULL__, __FALSE__, __ZERO__) back to their original values\n * - Converting _NULL__ to null\n * - Removing fields that contain empty strings, null, or any string markers representing null/empty values\n *\n * @example\n * const formState = {\n *   name: 'John',\n *   scores: [75, '__ZERO__', '_NULL__', '__FALSE__'],\n *   email: null,\n *   phone: '__NULL__',\n *   contact: {\n *     address: '123 Main St',\n *     fax: null\n *   }\n * };\n *\n * // Result:\n * {\n *   name: 'John',\n *   scores: [75, 0, null, false],\n *   contact: {\n *     address: '123 Main St'\n *   }\n * }\n */\nexport const toValidationFormat = (\n  formState: Record<string, unknown>,\n): Record<string, unknown> => {\n  return JSON.parse(\n    JSON.stringify(formState, (_, value) => {\n      if (Array.isArray(value)) {\n        return value.map(fromNullishString);\n      }\n\n      if (value && typeof value === 'object') {\n        return Object.fromEntries(\n          Object.entries(value)\n            .filter(\n              ([_key, v]) =>\n                fromNullishString(v) !== '' && fromNullishString(v) !== null,\n            )\n            .map(([k, v]) => [k, fromNullishString(v)]),\n        );\n      }\n\n      return value;\n    }),\n  );\n};\n"],"mappings":";AAGA,IAAM,aAAa;AACnB,IAAM,cAAc;AACpB,IAAM,aAAa;AAKZ,IAAM,oBAAoB,CAAC,UAA4B;AAC5D,MAAI,OAAO,UAAU,SAAU,QAAO;AAEtC,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKO,IAAM,kBAAkB,CAAC,UAA4B;AAC1D,MAAI,UAAU,QAAQ,UAAU,GAAI,QAAO;AAC3C,MAAI,UAAU,MAAO,QAAO;AAC5B,MAAI,UAAU,EAAG,QAAO;AACxB,SAAO;AACT;AA+BO,IAAM,eAAe,CAC1B,WAC4B;AAC5B,SAAO,KAAK;AAAA,IACV,KAAK,UAAU,QAAQ,CAAC,GAAG,UAAU;AACnC,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,eAAO,MAAM,IAAI,eAAe;AAAA,MAClC;AAEA,UAAI,SAAS,OAAO,UAAU,UAAU;AACtC,eAAO,OAAO;AAAA,UACZ,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,QACpE;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AACF;AA6BO,IAAM,qBAAqB,CAChC,cAC4B;AAC5B,SAAO,KAAK;AAAA,IACV,KAAK,UAAU,WAAW,CAAC,GAAG,UAAU;AACtC,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,eAAO,MAAM,IAAI,iBAAiB;AAAA,MACpC;AAEA,UAAI,SAAS,OAAO,UAAU,UAAU;AACtC,eAAO,OAAO;AAAA,UACZ,OAAO,QAAQ,KAAK,EACjB;AAAA,YACC,CAAC,CAAC,MAAM,CAAC,MACP,kBAAkB,CAAC,MAAM,MAAM,kBAAkB,CAAC,MAAM;AAAA,UAC5D,EACC,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC;AAAA,QAC9C;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AACF;","names":[]}

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

@@ -1,29 +1,23 @@
 import {
   Controller_default
-} from "./chunk-4EJS5FXY.js";
+} from "./chunk-ZI22WT2P.js";
 import {
   FieldCopyTestIdButton_default
 } from "./chunk-2CRY7VDQ.js";
 import {
   FieldValidationError_default
-} from "./chunk-VX76MJAI.js";
+} from "./chunk-ASPOGQPS.js";
 import {
   useFormContext
-} from "./chunk-MRXNKY72.js";
-import {
-  slugify
-} from "./chunk-IEF2GJ22.js";
+} from "./chunk-T4N6TMUL.js";
 import {
   __spreadProps,
   __spreadValues
 } from "./chunk-CRTRMMJ7.js";
 
 // src/CheckboxGroup/CheckboxGroup.tsx
-import {
-  Checkbox,
-  CheckboxGroup as NextCheckboxGroup
-} from "@nextui-org/checkbox";
-import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { Checkbox, CheckboxGroup as HeroCheckboxGroup } from "@heroui/checkbox";
+import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 var checkboxGroupVariants = tv({
   slots: {
@@ -34,7 +28,8 @@ var checkboxGroupVariants = tv({
     itemIcon: "",
     itemLabel: "text-sm",
     itemWrapper: "",
-    // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts
+    // see HeroUI styles for group-data condition,
+    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
     label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger",
     wrapper: ""
   }
@@ -90,7 +85,7 @@ var CheckboxGroup = ({
         };
         const checkboxGroupProps = options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;
         return /* @__PURE__ */ jsx(
-          NextCheckboxGroup,
+          HeroCheckboxGroup,
           __spreadProps(__spreadValues({
             name,
             classNames: itemGroupClassName,
@@ -145,4 +140,4 @@ export {
   CheckboxGroup_default,
   CheckboxGroup_default2
 };
-//# sourceMappingURL=chunk-7HK64PN5.js.map
+//# sourceMappingURL=chunk-WKJN5A2E.js.map

package/dist/chunk-WKJN5A2E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport { Checkbox, CheckboxGroup as HeroCheckboxGroup } from '@heroui/checkbox';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    errorMessage: 'text-tiny',\n    itemBase: '',\n    itemIcon: '',\n    itemLabel: 'text-sm',\n    itemWrapper: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof checkboxGroupVariants>;\ntype ClassName = TVClassName<typeof checkboxGroupVariants>;\n\nexport type CheckboxGroupOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n  /** disables the option */\n  disabled?: boolean;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n};\n\nexport interface CheckboxGroupProps extends VariantProps {\n  /** CSS class name. ClassName: string | { buttons?: string | { base?: string; active?: string }; base?: string;} */\n  className?: ClassName;\n  /** label displayed above the Checkboxes */\n  label?: React.ReactNode;\n  /** Name the Field is registered on the form. */\n  name: string;\n  /** Checkboxes that should be displayed. */\n  options: CheckboxGroupOption[];\n  /** sets all buttons disabled */\n  disabled?: boolean;\n  /** id for internal testing. */\n  testId?: string;\n}\n\n/**\n * CheckboxGroup component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n  className = undefined,\n  label = undefined,\n  options,\n  disabled = false,\n  name,\n  testId: _testId = undefined,\n}: CheckboxGroupProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = checkboxGroupVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassName = {\n    base: classNames.itemBase,\n    wrapper: classNames.itemWrapper,\n    icon: classNames.itemIcon,\n    label: classNames.itemLabel,\n  };\n  const itemGroupClassName = {\n    base: classNames.base,\n    wrapper: classNames.wrapper,\n    label: classNames.label,\n  };\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      disabled={disabled}\n      render={({ field: { onChange, value = [], ref, onBlur } }) => {\n        /**\n         * Handles the checkbox group value changes based on the number of options:\n         * 1. For single checkbox (options.length === 1):\n         *    - Converts undefined/empty array to [] for consistent controlled behavior\n         *    - Extracts single value from array for onChange\n         *\n         *    Example: undefined → []\n         *            [value] → value\n         *\n         * 2. For multiple checkboxes:\n         *    - Uses raw value array with fallback to empty array\n         *    - Passes through onChange directly\n         *\n         *    Example: undefined → []\n         *            ['value1', 'value2'] → ['value1', 'value2']\n         */\n        const getCheckboxValue = (inputValue: unknown): string[] => {\n          if (Array.isArray(inputValue)) {\n            return inputValue;\n          }\n          if (inputValue) {\n            return [inputValue as string];\n          }\n          return [];\n        };\n\n        const singleCheckboxProps = {\n          value: getCheckboxValue(value),\n          onChange: (newValue: string[]) => onChange(newValue && newValue[0]),\n        };\n\n        const multipleCheckboxProps = {\n          onChange,\n          value: getCheckboxValue(value),\n        };\n\n        const checkboxGroupProps =\n          options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n        return (\n          <HeroCheckboxGroup\n            name={name}\n            classNames={itemGroupClassName}\n            data-testid={testId}\n            // see HeroUI styles for group-data condition (data-invalid),\n            // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n            data-invalid={invalid}\n            errorMessage={\n              error && (\n                <FieldValidationError\n                  error={error}\n                  className={classNames.errorMessage}\n                />\n              )\n            }\n            isDisabled={disabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              showLabel && (\n                // eslint-disable-next-line jsx-a11y/label-has-associated-control\n                <label>\n                  {label}\n                  {showTestIdCopyButton && (\n                    <FieldCopyTestIdButton testId={testId} />\n                  )}\n                </label>\n              )\n            }\n            onBlur={onBlur}\n            ref={ref}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...checkboxGroupProps}\n          >\n            {options?.map((option) => {\n              return (\n                <Checkbox\n                  data-invalid={invalid}\n                  classNames={itemClassName}\n                  key={`index_${option.value}`}\n                  isDisabled={disabled || option.disabled}\n                  value={option?.value}\n                  data-testid={slugify(\n                    `${testId}_option_${option?.testId || option?.value}`,\n                  )}\n                >\n                  {option?.label}\n                </Checkbox>\n              );\n            })}\n          </HeroCheckboxGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default CheckboxGroup;\n","import CheckboxGroup from './CheckboxGroup';\n\nexport type { CheckboxGroupProps, CheckboxGroupOption } from './CheckboxGroup';\n\nexport { CheckboxGroup };\n\nexport default CheckboxGroup;\n"],"mappings":"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","names":["CheckboxGroup_default"]}