@fuf-stack/uniform 1.19.1 → 1.19.3

package/dist/{FieldArray-BVL5Tz0Q.js.map → FieldArray-CcQ-Re3s.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldArray-BVL5Tz0Q.js","names":[],"sources":["../src/FieldArray/subcomponents/ElementAppendButton.tsx","../src/FieldArray/subcomponents/ElementActionsMenu.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/FieldArrayLabel.tsx","../src/FieldArray/subcomponents/FieldArrayValidationError.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/FieldArray.tsx","../src/FieldArray/index.ts"],"sourcesContent":["import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementAppendButtonProps {\n  /** text of the append element button */\n  appendButtonText?: string;\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 ElementAppendButton = ({\n  appendButtonText = 'Add Element',\n  className = undefined,\n  onClick,\n  testId = undefined,\n}: ElementAppendButtonProps) => {\n  return (\n    <Button\n      disableAnimation\n      className={cn(className)}\n      onClick={onClick}\n      size=\"sm\"\n      testId={testId}\n      variant=\"light\"\n    >\n      <FaPlus />\n      <span>{appendButtonText}</span>\n    </Button>\n  );\n};\n\nexport default ElementAppendButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { MenuItem } from '@fuf-stack/pixels';\nimport type { Key } from 'react';\nimport type { FieldArrayElementMethods } from './FieldArrayElement';\n\nimport { FaCopy, FaTimes } from 'react-icons/fa';\nimport { VscInsert } from 'react-icons/vsc';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Menu } from '@fuf-stack/pixels';\n\nexport interface ElementActionsMenuProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** Whether duplicate action is available */\n  duplicate?: boolean;\n  /** Whether insert after action is available */\n  insertAfter?: boolean;\n  /** Whether to show remove button (false when last element is not deletable) */\n  showRemove?: boolean;\n  /** Field array operation methods */\n  methods: FieldArrayElementMethods;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Menu component for field array element actions (remove, duplicate, insert after)\n */\nconst ElementActionsMenu = ({\n  className = undefined,\n  duplicate = false,\n  insertAfter = false,\n  showRemove = true,\n  methods,\n  testId = undefined,\n}: ElementActionsMenuProps) => {\n  const handleAction = (key: Key) => {\n    switch (key) {\n      case 'remove':\n        methods.remove();\n        break;\n      case 'duplicate':\n        methods.duplicate();\n        break;\n      case 'insertAfter':\n        methods.insert();\n        break;\n      default:\n        break;\n    }\n  };\n\n  // Build menu items based on available actions\n  const menuItems: MenuItem[] = [];\n\n  if (duplicate) {\n    menuItems.push({\n      key: 'duplicate',\n      label: 'Duplicate',\n      icon: <FaCopy />,\n    });\n  }\n\n  if (insertAfter) {\n    menuItems.push({\n      key: 'insertAfter',\n      label: 'Insert After',\n      icon: <VscInsert />,\n    });\n  }\n\n  if (showRemove) {\n    menuItems.push({\n      key: 'remove',\n      className: 'text-danger',\n      label: 'Remove',\n      icon: <FaTimes />,\n    });\n  }\n\n  return (\n    <Menu\n      ariaLabel=\"Element actions\"\n      items={menuItems}\n      onAction={handleAction}\n      placement=\"right\"\n      testId={testId}\n      triggerButtonProps={{\n        className: cn(className),\n        disableRipple: true,\n        size: 'md',\n        variant: 'light',\n      }}\n    />\n  );\n};\n\nexport default ElementActionsMenu;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { motion } from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** Globally disable animations (used for first render or prefers-reduced-motion) */\n  disableAnimation?: boolean;\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  disableAnimation = false,\n  onClick,\n  testId = undefined,\n}: ElementRemoveButtonProps) => {\n  const button = (\n    <Button\n      ariaLabel=\"remove element\"\n      className={cn(className)}\n      color=\"danger\"\n      icon={<FaTimes />}\n      onClick={onClick}\n      size=\"sm\"\n      testId={testId}\n      variant=\"light\"\n    />\n  );\n\n  if (disableAnimation) {\n    return button;\n  }\n\n  return (\n    <motion.div\n      animate={{ opacity: 1, width: 'auto' }}\n      className=\"flex\"\n      exit={{ opacity: 0, width: 0 }}\n      initial={{ opacity: 0, width: 0 }}\n      transition={{ duration: 0.2 }}\n    >\n      {button}\n    </motion.div>\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      {...attributes}\n      {...listeners}\n    >\n      <FaGripVertical />\n    </div>\n  );\n};\n\nexport default SortDragHandle;\n","import type { Variants as MotionVariants } from '@fuf-stack/pixel-motion';\nimport type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useState } from 'react';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { AnimatePresence, motion } from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Grid } from '../../Grid';\nimport ElementActionsMenu from './ElementActionsMenu';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport interface 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 wrapper grid inside the li that wraps the rendered element fields directly */\n    elementFieldsGrid?: ClassValue;\n    /** Class for the li (performs motion animations) */\n    listItem?: ClassValue;\n    /** Class for the li inner div (wraps the rendered element fields) */\n    listItemInner?: ClassValue;\n    /** Class for the actions menu button */\n    actionsMenuButton?: ClassValue;\n    /** Class for the remove element button (when menu is not used) */\n    removeButton?: ClassValue;\n    /** Class for the drag handle when sorting enabled */\n    sortDragHandle?: ClassValue;\n  };\n  /** Globally disable animations for this item (used for first render or prefers-reduced-motion) */\n  disableAnimation?: boolean;\n  /** Bottom margin for elements (for backwards compatibility) */\n  elementMarginBottom?: React.CSSProperties['marginBottom'];\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. Animations when elements are added or removed\n * improve the user experience and provide a better visual feedback.\n */\nconst FieldArrayElement = ({\n  children,\n  className,\n  disableAnimation = false,\n  duplicate = false,\n  elementMarginBottom: _elementMarginBottom = undefined,\n  fields,\n  id,\n  index: _index,\n  insertAfter = false,\n  lastNotDeletable = true,\n  methods,\n  sortable = false,\n  testId = undefined,\n}: FieldArrayElementProps) => {\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, isDragging } = useSortable({ id });\n  const sortingStyle = sortable\n    ? {\n        transform: CSS.Translate.toString(transform),\n        transition,\n        zIndex: isDragging ? 50 : undefined,\n      }\n    : undefined;\n\n  // Local visibility to allow exit animation before removing from RHF state\n  const [isVisible, setIsVisible] = useState(true);\n\n  // Motion variants for the list item\n  const listItemMotionVariants: MotionVariants = {\n    hidden: { opacity: 0, height: 0, marginBottom: 0 },\n    visible: {\n      opacity: 1,\n      height: 'auto',\n      transition: { duration: 0.2, ease: 'circOut' },\n      // push last visible item down to overlap with append button (hide double border)\n      marginBottom: '-1px',\n    },\n    exit: {\n      opacity: 0,\n      height: 0,\n      marginBottom: 0,\n      transition: {\n        // on exit first fade out, then shrink\n        opacity: { duration: 0.1, ease: 'circOut' },\n        height: { delay: 0.1, duration: 0.2, ease: 'circOut' },\n      },\n    },\n  };\n\n  // Height animation handled on <motion.li> using overflow hidden\n  return (\n    <AnimatePresence\n      mode=\"wait\"\n      // remove from RHF state after exit animation\n      onExitComplete={() => {\n        methods.remove();\n      }}\n    >\n      {isVisible ? (\n        <motion.li\n          key={id}\n          ref={setNodeRef}\n          animate={disableAnimation ? undefined : 'visible'}\n          className={cn(className.listItem)}\n          data-dragging={isDragging}\n          data-testid={`${testId}_element`}\n          exit={disableAnimation ? undefined : 'exit'}\n          initial={disableAnimation ? false : 'hidden'}\n          style={sortingStyle}\n          variants={disableAnimation ? undefined : listItemMotionVariants}\n        >\n          <div className={cn(className.listItemInner)}>\n            {/** sorting drag handle */}\n            {sortable ? (\n              <SortDragHandle\n                className={className.sortDragHandle}\n                id={id}\n                testId={`${testId}_sort_drag_handle`}\n              />\n            ) : null}\n\n            {/** render element fields in Grid component */}\n            <Grid\n              className={cn(className.elementFieldsGrid)}\n              testId={`${testId}_element_fields_grid`}\n            >\n              {/* render actual fields */}\n              {children}\n            </Grid>\n\n            {/** actions menu when duplicate or insertAfter is enabled */}\n            {duplicate || insertAfter ? (\n              <ElementActionsMenu\n                className={className.actionsMenuButton}\n                duplicate={duplicate}\n                insertAfter={insertAfter}\n                showRemove={!(lastNotDeletable && fields.length === 1)}\n                testId={`${testId}_actions_menu`}\n                methods={{\n                  ...methods,\n                  remove: () => {\n                    if (disableAnimation) {\n                      methods.remove();\n                    } else {\n                      setIsVisible(false);\n                    }\n                  },\n                }}\n              />\n            ) : (\n              <>\n                {/** remove element button (when menu is not used) */}\n                <AnimatePresence initial={false}>\n                  {lastNotDeletable && fields.length === 1 ? null : (\n                    <ElementRemoveButton\n                      key=\"remove-button\"\n                      className={className.removeButton}\n                      disableAnimation={disableAnimation}\n                      testId={`${testId}_remove_button`}\n                      onClick={() => {\n                        if (disableAnimation) {\n                          methods.remove();\n                        } else {\n                          setIsVisible(false);\n                        }\n                      }}\n                    />\n                  )}\n                </AnimatePresence>\n              </>\n            )}\n          </div>\n        </motion.li>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldArrayElement;\n","import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\n\nexport interface FieldArrayLabelProps {\n  /** CSS class name */\n  className?: string;\n  /** Label content */\n  label: ReactNode;\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders the label for a FieldArray component.\n *\n * This component handles displaying the array label with proper accessibility\n * attributes using the label props from useUniformField.\n */\nconst FieldArrayLabel = ({\n  className = undefined,\n  label: _label,\n  name,\n}: FieldArrayLabelProps) => {\n  const { error, getLabelProps, invalid, label } = useUniformField({\n    name,\n    label: _label,\n  });\n\n  // when no label is provided, don't render anything\n  if (!_label) {\n    return null;\n  }\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  return (\n    <div\n      {...getLabelProps()}\n      aria-level={3}\n      role=\"heading\"\n      className={cn(getLabelProps()?.className, className, {\n        // when there are no array level errors, the label should have foreground color\n        'text-foreground!': !hasErrors,\n      })}\n    >\n      {label}\n    </div>\n  );\n};\n\nexport default FieldArrayLabel;\n","import {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldArrayValidationErrorProps {\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders array-level validation errors for FieldArray.\n *\n * This component handles validation errors that apply to the entire array\n * (e.g., \"Array must contain at least 3 elements\", \"Array elements are not unique\"),\n * as opposed to field-level errors which apply to individual array elements.\n *\n * The component wraps errors in the proper accessibility markup and animates\n * them in/out using Framer Motion when they appear or are resolved.\n */\nconst FieldArrayValidationError = ({\n  name,\n}: FieldArrayValidationErrorProps) => {\n  const {\n    error,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    testId,\n  } = useUniformField({\n    name,\n  });\n\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  return (\n    <AnimatePresence initial={!disableAnimation}>\n      {hasErrors ? (\n        <motion.div\n          key=\"field-array-errors\"\n          exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n          initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n          style={{ overflow: 'hidden' }}\n          transition={{ duration: 0.4, ease: 'circOut' }}\n          animate={\n            disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n          }\n        >\n          <div\n            {...getHelperWrapperProps()}\n            className={cn(\n              getHelperWrapperProps()?.className,\n              // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n              'block px-3 pb-2 pt-1',\n            )}\n          >\n            <div {...getErrorMessageProps()}>\n              <FieldValidationError\n                // @ts-expect-error - error._errors exists but not typed\n                error={error._errors}\n                testId={testId}\n              />\n            </div>\n          </div>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldArrayValidationError;\n","import type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport { useFormContext } 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  /** Array of objects containing unique IDs for sortable items */\n  fields: Record<'id', string>[];\n  /** name of the field array */\n  name: string;\n  /** react-hook-form's move function to update field array indices */\n  move: UseFieldArrayMove;\n  /** enable/disable sorting functionality */\n  sortable: boolean;\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  fields,\n  move,\n  name,\n  sortable,\n}: SortContextProps): ReactNode => {\n  const { trigger } = useFormContext();\n\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) => {\n        return field.id === active.id;\n      });\n      const newIndex = fields.findIndex((field) => {\n        return field.id === over?.id;\n      });\n      // Update the field array order using react-hook-form's move function\n      move(oldIndex, newIndex);\n\n      // Finally trigger validation for the array field,\n      // so validation errors are updated for the new order\n      trigger(name);\n    }\n  };\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext\n        strategy={verticalListSortingStrategy}\n        items={fields.map((field) => {\n          return field.id;\n        })}\n      >\n        {children}\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default SortContext;\n","import type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { flatArrayKey } from '../helpers';\nimport { useUniformFieldArray } from '../hooks/useUniformFieldArray';\nimport ElementAppendButton from './subcomponents/ElementAppendButton';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport FieldArrayLabel from './subcomponents/FieldArrayLabel';\nimport FieldArrayValidationError from './subcomponents/FieldArrayValidationError';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n  slots: {\n    /** base class for the field array wrapper */\n    base: [\n      // base styles\n      'overflow-hidden rounded-small border border-divider bg-content1',\n      // divider between items\n      'divide-y divide-divider',\n    ],\n    /** class for the actions menu button */\n    actionsMenuButton: [\n      // base styles\n      'flex items-center justify-center text-default-600',\n      // fixed height/no round corners/center align\n      'h-full rounded-none',\n      // focus styles - inset ring\n      'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n    ],\n    /** class for the append button */\n    appendButton: [\n      // base styles\n      'w-full justify-start rounded-b-small rounded-t-none font-semibold',\n      // match label height (p-3 = 12px vertical padding + text-base line height)\n      '!h-[48px] !min-h-0',\n      // focus styles - inset ring with rounded bottom corners to match container\n      'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n    ],\n    /** class for the element fields grid */\n    elementFieldsGrid: ['w-full grow p-3'],\n    /** class for the label */\n    label: [\n      // override HeroUI label positioning and display\n      'pointer-events-auto! static! z-auto! block! w-full!',\n      // reset any transforms or translations\n      'translate-x-0! translate-y-0! transform-none!',\n      // card header styling - use text-medium (16px) instead of text-base for correct 48px height\n      'rounded-t-small p-3 font-semibold text-medium',\n    ],\n    /** class for the list */\n    list: ['overflow-hidden'],\n    /** class for the list wrapper */\n    listWrapper: ['overflow-hidden'],\n    /** class for the list item (performs motion animations) */\n    listItem: [\n      // base styles\n      'group relative flex flex-row',\n      // overlap borders by shifting first item up 1px (similar to how last item overlaps with append button)\n      'first:-mt-px',\n    ],\n    /** class for the list item inner */\n    listItemInner: [\n      // base styles\n      'flex w-full flex-row items-stretch divide-divider bg-content1',\n      // x division and borders\n      'divide-x divide-solid border-b border-t border-divider',\n    ],\n    /** class for the remove button */\n    removeButton: [\n      // base styles\n      'flex items-center justify-center',\n      // fixed height/no round corners\n      '!h-full !min-h-0 !rounded-none px-3',\n      // focus styles - inset ring\n      'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n    ],\n    /** class for the sort drag handle */\n    sortDragHandle: [\n      // base styles\n      'flex cursor-grab items-center justify-center px-2 text-default-600 transition-colors',\n      // hover and  dragging state\n      'hover:bg-default-100 active:cursor-grabbing group-data-[dragging=true]:bg-default-100',\n      // focus styles - inset ring\n      'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n    ],\n  },\n  variants: {\n    hasLabel: {\n      false: {\n        // focus styles - when there is no label, the first item actions menu button should have rounded top right corners\n        actionsMenuButton:\n          'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n        // focus styles - when there is no label, the first item remove button focus ring should have rounded top right corners\n        removeButton:\n          'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n        // focus styles - when there is no label, the first item sort drag handle focus ring should have rounded top left corners\n        sortDragHandle:\n          'group-[:first-child]:rounded-tl-small group-[:first-child]:group-data-[dragging=true]:rounded-tl-none',\n      },\n    },\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  elementMarginBottom = undefined,\n  flat = false,\n  insertAfter = false,\n  lastElementNotRemovable = false,\n  name,\n  sortable = false,\n  ...uniformFieldProps\n}: FieldArrayProps) => {\n  const {\n    fields,\n    append,\n    remove,\n    insert,\n    move,\n    disableAnimation,\n    elementInitialValue,\n    getValues,\n    testId,\n  } = useUniformFieldArray({\n    name,\n    flat,\n    elementInitialValue: _elementInitialValue,\n    lastElementNotRemovable,\n    ...uniformFieldProps,\n  });\n\n  // className from slots\n  const variants = fieldArrayVariants({ hasLabel: !!uniformFieldProps.label });\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <div className={className.base}>\n      {/* field array label */}\n      <FieldArrayLabel\n        className={className.label}\n        label={uniformFieldProps.label}\n        name={name}\n      />\n\n      {fields.length ? (\n        /* list wrapper */\n        <div className={cn(className.listWrapper)}>\n          {/* sortable context */}\n          <SortContext\n            fields={fields}\n            move={move}\n            name={name}\n            sortable={sortable}\n          >\n            {/* list container */}\n            <ul className={className.list} data-testid={testId}>\n              {/* fields / list elements  */}\n              {fields.map((field, index) => {\n                const elementName = flat\n                  ? `${name}.${index}.${flatArrayKey}`\n                  : `${name}.${index}`;\n                const elementTestId = `${testId}_${index}`;\n\n                // create methods for element\n                const elementMethods: FieldArrayElementMethods = {\n                  append: () => {\n                    append(elementInitialValue);\n                  },\n                  duplicate: () => {\n                    const values = getValues(name);\n                    const currentValue = (values as unknown[])[index];\n                    const nextValue = flat\n                      ? { [flatArrayKey]: currentValue }\n                      : currentValue;\n                    insert(index + 1, nextValue);\n                  },\n                  insert: () => {\n                    insert(index + 1, elementInitialValue);\n                  },\n                  remove: () => {\n                    remove(index);\n                  },\n                };\n\n                return (\n                  <FieldArrayElement\n                    key={field.id}\n                    className={className}\n                    disableAnimation={disableAnimation}\n                    duplicate={duplicate}\n                    elementMarginBottom={elementMarginBottom}\n                    fields={fields}\n                    id={field.id}\n                    index={index}\n                    insertAfter={insertAfter}\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            </ul>\n          </SortContext>\n        </div>\n      ) : null}\n\n      {/* top level field array errors */}\n      <FieldArrayValidationError name={name} />\n\n      {/* append elements button */}\n      <ElementAppendButton\n        appendButtonText={appendButtonText}\n        className={className.appendButton}\n        testId={`${testId}_append_button`}\n        onClick={() => {\n          append(elementInitialValue);\n        }}\n      />\n    </div>\n  );\n};\n\nexport default FieldArray;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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"}
+{"version":3,"file":"FieldArray-CcQ-Re3s.js","names":[],"sources":["../src/FieldArray/subcomponents/ElementAppendButton.tsx","../src/FieldArray/subcomponents/ElementActionsMenu.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/FieldArrayLabel.tsx","../src/FieldArray/subcomponents/FieldArrayValidationError.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/FieldArray.tsx","../src/FieldArray/index.ts"],"sourcesContent":["import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementAppendButtonProps {\n  /** text of the append element button */\n  appendButtonText?: string;\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 ElementAppendButton = ({\n  appendButtonText = 'Add Element',\n  className = undefined,\n  onClick,\n  testId = undefined,\n}: ElementAppendButtonProps) => {\n  return (\n    <Button\n      disableAnimation\n      className={cn(className)}\n      onClick={onClick}\n      size=\"sm\"\n      testId={testId}\n      variant=\"light\"\n    >\n      <FaPlus />\n      <span>{appendButtonText}</span>\n    </Button>\n  );\n};\n\nexport default ElementAppendButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { MenuItem } from '@fuf-stack/pixels';\nimport type { Key } from 'react';\nimport type { FieldArrayElementMethods } from './FieldArrayElement';\n\nimport { FaCopy, FaTimes } from 'react-icons/fa';\nimport { VscInsert } from 'react-icons/vsc';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Menu } from '@fuf-stack/pixels';\n\nexport interface ElementActionsMenuProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** Whether duplicate action is available */\n  duplicate?: boolean;\n  /** Whether insert after action is available */\n  insertAfter?: boolean;\n  /** Whether to show remove button (false when last element is not deletable) */\n  showRemove?: boolean;\n  /** Field array operation methods */\n  methods: FieldArrayElementMethods;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Menu component for field array element actions (remove, duplicate, insert after)\n */\nconst ElementActionsMenu = ({\n  className = undefined,\n  duplicate = false,\n  insertAfter = false,\n  showRemove = true,\n  methods,\n  testId = undefined,\n}: ElementActionsMenuProps) => {\n  const handleAction = (key: Key) => {\n    switch (key) {\n      case 'remove':\n        methods.remove();\n        break;\n      case 'duplicate':\n        methods.duplicate();\n        break;\n      case 'insertAfter':\n        methods.insert();\n        break;\n      default:\n        break;\n    }\n  };\n\n  // Build menu items based on available actions\n  const menuItems: MenuItem[] = [];\n\n  if (duplicate) {\n    menuItems.push({\n      key: 'duplicate',\n      label: 'Duplicate',\n      icon: <FaCopy />,\n    });\n  }\n\n  if (insertAfter) {\n    menuItems.push({\n      key: 'insertAfter',\n      label: 'Insert After',\n      icon: <VscInsert />,\n    });\n  }\n\n  if (showRemove) {\n    menuItems.push({\n      key: 'remove',\n      className: 'text-danger',\n      label: 'Remove',\n      icon: <FaTimes />,\n    });\n  }\n\n  return (\n    <Menu\n      ariaLabel=\"Element actions\"\n      items={menuItems}\n      onAction={handleAction}\n      placement=\"right\"\n      testId={testId}\n      triggerButtonProps={{\n        className: cn(className),\n        disableRipple: true,\n        size: 'md',\n        variant: 'light',\n      }}\n    />\n  );\n};\n\nexport default ElementActionsMenu;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { motion } from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n  /** CSS class name */\n  className?: ClassValue;\n  /** Globally disable animations (used for first render or prefers-reduced-motion) */\n  disableAnimation?: boolean;\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  disableAnimation = false,\n  onClick,\n  testId = undefined,\n}: ElementRemoveButtonProps) => {\n  const button = (\n    <Button\n      ariaLabel=\"remove element\"\n      className={cn(className)}\n      color=\"danger\"\n      icon={<FaTimes />}\n      onClick={onClick}\n      size=\"sm\"\n      testId={testId}\n      variant=\"light\"\n    />\n  );\n\n  if (disableAnimation) {\n    return button;\n  }\n\n  return (\n    <motion.div\n      animate={{ opacity: 1, width: 'auto' }}\n      className=\"flex\"\n      exit={{ opacity: 0, width: 0 }}\n      initial={{ opacity: 0, width: 0 }}\n      transition={{ duration: 0.2 }}\n    >\n      {button}\n    </motion.div>\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      {...attributes}\n      {...listeners}\n    >\n      <FaGripVertical />\n    </div>\n  );\n};\n\nexport default SortDragHandle;\n","import type { Variants as MotionVariants } from '@fuf-stack/pixel-motion';\nimport type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useState } from 'react';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { AnimatePresence, motion } from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Grid } from '../../Grid';\nimport ElementActionsMenu from './ElementActionsMenu';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport interface 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 wrapper grid inside the li that wraps the rendered element fields directly */\n    elementFieldsGrid?: ClassValue;\n    /** Class for the li (performs motion animations) */\n    listItem?: ClassValue;\n    /** Class for the li inner div (wraps the rendered element fields) */\n    listItemInner?: ClassValue;\n    /** Class for the actions menu button */\n    actionsMenuButton?: ClassValue;\n    /** Class for the remove element button (when menu is not used) */\n    removeButton?: ClassValue;\n    /** Class for the drag handle when sorting enabled */\n    sortDragHandle?: ClassValue;\n  };\n  /** Globally disable animations for this item (used for first render or prefers-reduced-motion) */\n  disableAnimation?: boolean;\n  /** Bottom margin for elements (for backwards compatibility) */\n  elementMarginBottom?: React.CSSProperties['marginBottom'];\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. Animations when elements are added or removed\n * improve the user experience and provide a better visual feedback.\n */\nconst FieldArrayElement = ({\n  children,\n  className,\n  disableAnimation = false,\n  duplicate = false,\n  elementMarginBottom: _elementMarginBottom = undefined,\n  fields,\n  id,\n  index: _index,\n  insertAfter = false,\n  lastNotDeletable = true,\n  methods,\n  sortable = false,\n  testId = undefined,\n}: FieldArrayElementProps) => {\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, isDragging } = useSortable({ id });\n  const sortingStyle = sortable\n    ? {\n        transform: CSS.Translate.toString(transform),\n        transition,\n        zIndex: isDragging ? 50 : undefined,\n      }\n    : undefined;\n\n  // Local visibility to allow exit animation before removing from RHF state\n  const [isVisible, setIsVisible] = useState(true);\n\n  // Motion variants for the list item\n  const listItemMotionVariants: MotionVariants = {\n    hidden: { opacity: 0, height: 0, marginBottom: 0 },\n    visible: {\n      opacity: 1,\n      height: 'auto',\n      transition: { duration: 0.2, ease: 'circOut' },\n      // push last visible item down to overlap with append button (hide double border)\n      marginBottom: '-1px',\n    },\n    exit: {\n      opacity: 0,\n      height: 0,\n      marginBottom: 0,\n      transition: {\n        // on exit first fade out, then shrink\n        opacity: { duration: 0.1, ease: 'circOut' },\n        height: { delay: 0.1, duration: 0.2, ease: 'circOut' },\n      },\n    },\n  };\n\n  // Height animation handled on <motion.li> using overflow hidden\n  return (\n    <AnimatePresence\n      mode=\"wait\"\n      // remove from RHF state after exit animation\n      onExitComplete={() => {\n        methods.remove();\n      }}\n    >\n      {isVisible ? (\n        <motion.li\n          key={id}\n          ref={setNodeRef}\n          animate={disableAnimation ? undefined : 'visible'}\n          className={cn(className.listItem)}\n          data-dragging={isDragging}\n          data-testid={`${testId}_element`}\n          exit={disableAnimation ? undefined : 'exit'}\n          initial={disableAnimation ? false : 'hidden'}\n          style={sortingStyle}\n          variants={disableAnimation ? undefined : listItemMotionVariants}\n        >\n          <div className={cn(className.listItemInner)}>\n            {/** sorting drag handle */}\n            {sortable ? (\n              <SortDragHandle\n                className={className.sortDragHandle}\n                id={id}\n                testId={`${testId}_sort_drag_handle`}\n              />\n            ) : null}\n\n            {/** render element fields in Grid component */}\n            <Grid\n              className={cn(className.elementFieldsGrid)}\n              testId={`${testId}_element_fields_grid`}\n            >\n              {/* render actual fields */}\n              {children}\n            </Grid>\n\n            {/** actions menu when duplicate or insertAfter is enabled */}\n            {duplicate || insertAfter ? (\n              <ElementActionsMenu\n                className={className.actionsMenuButton}\n                duplicate={duplicate}\n                insertAfter={insertAfter}\n                showRemove={!(lastNotDeletable && fields.length === 1)}\n                testId={`${testId}_actions_menu`}\n                methods={{\n                  ...methods,\n                  remove: () => {\n                    if (disableAnimation) {\n                      methods.remove();\n                    } else {\n                      setIsVisible(false);\n                    }\n                  },\n                }}\n              />\n            ) : (\n              <>\n                {/** remove element button (when menu is not used) */}\n                <AnimatePresence initial={false}>\n                  {lastNotDeletable && fields.length === 1 ? null : (\n                    <ElementRemoveButton\n                      key=\"remove-button\"\n                      className={className.removeButton}\n                      disableAnimation={disableAnimation}\n                      testId={`${testId}_remove_button`}\n                      onClick={() => {\n                        if (disableAnimation) {\n                          methods.remove();\n                        } else {\n                          setIsVisible(false);\n                        }\n                      }}\n                    />\n                  )}\n                </AnimatePresence>\n              </>\n            )}\n          </div>\n        </motion.li>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldArrayElement;\n","import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\n\nexport interface FieldArrayLabelProps {\n  /** CSS class name */\n  className?: string;\n  /** Label content */\n  label: ReactNode;\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders the label for a FieldArray component.\n *\n * This component handles displaying the array label with proper accessibility\n * attributes using the label props from useUniformField.\n */\nconst FieldArrayLabel = ({\n  className = undefined,\n  label: _label,\n  name,\n}: FieldArrayLabelProps) => {\n  const { error, getLabelProps, invalid, label } = useUniformField({\n    name,\n    label: _label,\n  });\n\n  // when no label is provided, don't render anything\n  if (!_label) {\n    return null;\n  }\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  return (\n    <div\n      {...getLabelProps()}\n      aria-level={3}\n      role=\"heading\"\n      className={cn(getLabelProps()?.className, className, {\n        // when there are no array level errors, the label should have foreground color\n        'text-foreground!': !hasErrors,\n      })}\n    >\n      {label}\n    </div>\n  );\n};\n\nexport default FieldArrayLabel;\n","import {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldArrayValidationErrorProps {\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders array-level validation errors for FieldArray.\n *\n * This component handles validation errors that apply to the entire array\n * (e.g., \"Array must contain at least 3 elements\", \"Array elements are not unique\"),\n * as opposed to field-level errors which apply to individual array elements.\n *\n * The component wraps errors in the proper accessibility markup and animates\n * them in/out using Framer Motion when they appear or are resolved.\n */\nconst FieldArrayValidationError = ({\n  name,\n}: FieldArrayValidationErrorProps) => {\n  const {\n    error,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    testId,\n  } = useUniformField({\n    name,\n  });\n\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  return (\n    <AnimatePresence initial={!disableAnimation}>\n      {hasErrors ? (\n        <motion.div\n          key=\"field-array-errors\"\n          exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n          initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n          style={{ overflow: 'hidden' }}\n          transition={{ duration: 0.4, ease: 'circOut' }}\n          animate={\n            disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n          }\n        >\n          <div\n            {...getHelperWrapperProps()}\n            className={cn(\n              getHelperWrapperProps()?.className,\n              // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n              'block px-3 pb-2 pt-1',\n            )}\n          >\n            <div {...getErrorMessageProps()}>\n              <FieldValidationError\n                // @ts-expect-error - error._errors exists but not typed\n                error={error._errors}\n                testId={testId}\n              />\n            </div>\n          </div>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldArrayValidationError;\n","import type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport { useFormContext } 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  /** Array of objects containing unique IDs for sortable items */\n  fields: Record<'id', string>[];\n  /** name of the field array */\n  name: string;\n  /** react-hook-form's move function to update field array indices */\n  move: UseFieldArrayMove;\n  /** enable/disable sorting functionality */\n  sortable: boolean;\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  fields,\n  move,\n  name,\n  sortable,\n}: SortContextProps): ReactNode => {\n  const { trigger } = useFormContext();\n\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) => {\n        return field.id === active.id;\n      });\n      const newIndex = fields.findIndex((field) => {\n        return field.id === over?.id;\n      });\n      // Update the field array order using react-hook-form's move function\n      move(oldIndex, newIndex);\n\n      // Finally trigger validation for the array field,\n      // so validation errors are updated for the new order\n      trigger(name);\n    }\n  };\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext\n        strategy={verticalListSortingStrategy}\n        items={fields.map((field) => {\n          return field.id;\n        })}\n      >\n        {children}\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default SortContext;\n","import type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { flatArrayKey } from '../helpers';\nimport { useUniformFieldArray } from '../hooks/useUniformFieldArray';\nimport ElementAppendButton from './subcomponents/ElementAppendButton';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport FieldArrayLabel from './subcomponents/FieldArrayLabel';\nimport FieldArrayValidationError from './subcomponents/FieldArrayValidationError';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n  slots: {\n    /** base class for the field array wrapper */\n    base: [\n      // base styles\n      'overflow-hidden rounded-small border border-divider bg-content1',\n      // divider between items\n      'divide-y divide-divider',\n    ],\n    /** class for the actions menu button */\n    actionsMenuButton: [\n      // base styles\n      'flex items-center justify-center text-default-600',\n      // fixed height/no round corners/center align\n      'h-full rounded-none',\n      // focus styles - inset ring\n      'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n    ],\n    /** class for the append button */\n    appendButton: [\n      // base styles\n      'w-full justify-start rounded-b-small rounded-t-none font-semibold',\n      // match label height (p-3 = 12px vertical padding + text-base line height)\n      '!h-[48px] !min-h-0',\n      // focus styles - inset ring with rounded bottom corners to match container\n      'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n    ],\n    /** class for the element fields grid */\n    elementFieldsGrid: ['w-full grow p-3'],\n    /** class for the label */\n    label: [\n      // override HeroUI label positioning and display\n      'pointer-events-auto! static! z-auto! block! w-full!',\n      // reset any transforms or translations\n      'translate-x-0! translate-y-0! transform-none!',\n      // card header styling - use text-medium (16px) instead of text-base for correct 48px height\n      'rounded-t-small p-3 font-semibold text-medium',\n    ],\n    /** class for the list */\n    list: ['overflow-hidden'],\n    /** class for the list wrapper */\n    listWrapper: ['overflow-hidden'],\n    /** class for the list item (performs motion animations) */\n    listItem: [\n      // base styles\n      'group relative flex flex-row',\n      // overlap borders by shifting first item up 1px (similar to how last item overlaps with append button)\n      'first:-mt-px',\n    ],\n    /** class for the list item inner */\n    listItemInner: [\n      // base styles\n      'flex w-full flex-row items-stretch divide-divider bg-content1',\n      // x division and borders\n      'divide-x divide-solid border-b border-t border-divider',\n    ],\n    /** class for the remove button */\n    removeButton: [\n      // base styles\n      'flex items-center justify-center',\n      // fixed height/no round corners\n      '!h-full !min-h-0 !rounded-none px-3',\n      // focus styles - inset ring\n      'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n    ],\n    /** class for the sort drag handle */\n    sortDragHandle: [\n      // base styles\n      'flex cursor-grab items-center justify-center px-2 text-default-600 transition-colors',\n      // hover and  dragging state\n      'hover:bg-default-100 active:cursor-grabbing group-data-[dragging=true]:bg-default-100',\n      // focus styles - inset ring\n      'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n    ],\n  },\n  variants: {\n    hasLabel: {\n      false: {\n        // focus styles - when there is no label, the first item actions menu button should have rounded top right corners\n        actionsMenuButton:\n          'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n        // focus styles - when there is no label, the first item remove button focus ring should have rounded top right corners\n        removeButton:\n          'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n        // focus styles - when there is no label, the first item sort drag handle focus ring should have rounded top left corners\n        sortDragHandle:\n          'group-[:first-child]:rounded-tl-small group-[:first-child]:group-data-[dragging=true]:rounded-tl-none',\n      },\n    },\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  elementMarginBottom = undefined,\n  flat = false,\n  insertAfter = false,\n  lastElementNotRemovable = false,\n  name,\n  sortable = false,\n  ...uniformFieldProps\n}: FieldArrayProps) => {\n  const {\n    fields,\n    append,\n    remove,\n    insert,\n    move,\n    disableAnimation,\n    elementInitialValue,\n    getValues,\n    testId,\n  } = useUniformFieldArray({\n    name,\n    flat,\n    elementInitialValue: _elementInitialValue,\n    lastElementNotRemovable,\n    ...uniformFieldProps,\n  });\n\n  // className from slots\n  const variants = fieldArrayVariants({ hasLabel: !!uniformFieldProps.label });\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <div className={className.base}>\n      {/* field array label */}\n      <FieldArrayLabel\n        className={className.label}\n        label={uniformFieldProps.label}\n        name={name}\n      />\n\n      {fields.length ? (\n        /* list wrapper */\n        <div className={cn(className.listWrapper)}>\n          {/* sortable context */}\n          <SortContext\n            fields={fields}\n            move={move}\n            name={name}\n            sortable={sortable}\n          >\n            {/* list container */}\n            <ul className={className.list} data-testid={testId}>\n              {/* fields / list elements  */}\n              {fields.map((field, index) => {\n                const elementName = flat\n                  ? `${name}.${index}.${flatArrayKey}`\n                  : `${name}.${index}`;\n                const elementTestId = `${testId}_${index}`;\n\n                // create methods for element\n                const elementMethods: FieldArrayElementMethods = {\n                  append: () => {\n                    append(elementInitialValue);\n                  },\n                  duplicate: () => {\n                    const values = getValues(name);\n                    const currentValue = (values as unknown[])[index];\n                    const nextValue = flat\n                      ? { [flatArrayKey]: currentValue }\n                      : currentValue;\n                    insert(index + 1, nextValue);\n                  },\n                  insert: () => {\n                    insert(index + 1, elementInitialValue);\n                  },\n                  remove: () => {\n                    remove(index);\n                  },\n                };\n\n                return (\n                  <FieldArrayElement\n                    key={field.id}\n                    className={className}\n                    disableAnimation={disableAnimation}\n                    duplicate={duplicate}\n                    elementMarginBottom={elementMarginBottom}\n                    fields={fields}\n                    id={field.id}\n                    index={index}\n                    insertAfter={insertAfter}\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            </ul>\n          </SortContext>\n        </div>\n      ) : null}\n\n      {/* top level field array errors */}\n      <FieldArrayValidationError name={name} />\n\n      {/* append elements button */}\n      <ElementAppendButton\n        appendButtonText={appendButtonText}\n        className={className.appendButton}\n        testId={`${testId}_append_button`}\n        onClick={() => {\n          append(elementInitialValue);\n        }}\n      />\n    </div>\n  );\n};\n\nexport default FieldArray;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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"}

package/dist/FieldCard/index.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_FieldCard = require("../FieldCard-C0kNSLj7.cjs");
+const require_FieldCard = require("../FieldCard-Bkp8PHJw.cjs");
 exports.FieldCard = require_FieldCard.FieldCard;
 exports.fieldCardVariants = require_FieldCard.fieldCardVariants;

package/dist/FieldCard/index.js

@@ -1,2 +1,2 @@
-import { n as fieldCardVariants, t as FieldCard } from "../FieldCard-SjYNs4sL.js";
+import { n as fieldCardVariants, t as FieldCard } from "../FieldCard-DynQT-O7.js";
 export { FieldCard, fieldCardVariants };

package/dist/{FieldCard-C0kNSLj7.cjs → FieldCard-Bkp8PHJw.cjs}

@@ -109,19 +109,24 @@ const hasVisibleChildErrors = (errors, touched) => {
 };
 const fieldCardVariants = (0, _fuf_stack_pixel_utils.tv)({
 	slots: {
+		/** base class for the field card wrapper */
 		base: ["overflow-hidden rounded-small border bg-content1", "transition-colors duration-150 motion-reduce:transition-none"],
+		/** class for the label/header */
 		label: [
 			"pointer-events-auto! static! z-auto! block! w-full!",
 			"translate-x-0! translate-y-0! transform-none!",
 			"rounded-t-small border-b p-3 font-semibold text-medium",
 			"transition-colors duration-150 motion-reduce:transition-none"
 		],
+		/** class for the content */
 		content: ["p-3", "grid gap-4"],
+		/** class for the error footer wrapper */
 		errorFooter: [
 			"border-t",
 			"block px-3 pb-2 pt-1",
 			"transition-colors duration-150 motion-reduce:transition-none"
 		],
+		/** class for the error text (empty base, color controlled by variant) */
 		errorText: []
 	},
 	variants: { invalid: {
@@ -226,4 +231,4 @@ Object.defineProperty(exports, "fieldCardVariants", {
 	}
 });
 
-//# sourceMappingURL=FieldCard-C0kNSLj7.cjs.map
+//# sourceMappingURL=FieldCard-Bkp8PHJw.cjs.map

package/dist/{FieldCard-C0kNSLj7.cjs.map → FieldCard-Bkp8PHJw.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldCard-C0kNSLj7.cjs","names":["useUniformField","AnimatePresence","motion","FieldValidationError","useUniformField","useFormContext","checkFieldIsRequired"],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: string;\n  /** Error object from parent FieldCard (passed directly to avoid duplicate hook calls) */\n  error?: FieldError[] | undefined;\n  /** CSS class name for the error text (controls color based on invalid state) */\n  errorTextClassName?: string;\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders validation errors in the footer of a FieldCard component.\n *\n * This component handles displaying field-level validation errors with proper\n * accessibility attributes and animates them in/out using Framer Motion.\n *\n * Note: Object-level errors (_errors) are always shown when they exist,\n * but the danger styling is controlled by the parent FieldCard based on\n * whether child fields have been touched.\n */\nconst FieldCardValidationError = ({\n  className = undefined,\n  error = undefined,\n  errorTextClassName = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\n  const { getErrorMessageProps, getHelperWrapperProps, testId } =\n    useUniformField({\n      name,\n    });\n\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  // Always show object-level errors (_errors) when they exist\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = !!error?._errors;\n\n  return (\n    <AnimatePresence initial={!disableAnimation}>\n      {hasErrors ? (\n        <motion.div\n          key=\"field-card-errors\"\n          exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n          initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n          style={{ overflow: 'hidden' }}\n          transition={{ duration: 0.4, ease: 'circOut' }}\n          animate={\n            disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n          }\n        >\n          <div\n            {...getHelperWrapperProps()}\n            className={cn(getHelperWrapperProps()?.className, className)}\n          >\n            <div\n              {...getErrorMessageProps()}\n              className={cn(\n                getErrorMessageProps()?.className,\n                errorTextClassName,\n              )}\n            >\n              <FieldValidationError\n                // @ts-expect-error - error._errors exists but not typed\n                error={error._errors}\n                testId={testId}\n              />\n            </div>\n          </div>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { useDebounce } from '@fuf-stack/pixels';\n\nimport { checkFieldIsRequired, useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\n\n/**\n * Recursively checks if any child field has an error (regardless of touched state).\n * Returns true if at least one child has an error.\n */\nexport const hasAnyChildErrors = (\n  errors: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      if (errorValue === undefined) {\n        return false;\n      }\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasAnyChildErrors(errorValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field is touched.\n * Returns true if at least one child is touched.\n */\nexport const hasAnyChildTouched = (\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!touched) {\n    return false;\n  }\n\n  return Object.keys(touched)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const touchedValue = touched[key];\n      if (touchedValue === undefined) {\n        return false;\n      }\n      // If touchedValue is truthy (boolean true), field is touched\n      if (touchedValue === true) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof touchedValue === 'object' && touchedValue !== null) {\n        return hasAnyChildTouched(touchedValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field with an error is also touched.\n * Returns true if at least one touched child has an error.\n */\nexport const hasVisibleChildErrors = (\n  errors: Record<string, unknown> | undefined,\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors || !touched) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      // Skip object-level errors (_errors) - those are handled separately\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      const touchedValue = touched[key];\n\n      // If this key doesn't exist in both errors and touched, skip\n      if (errorValue === undefined || touchedValue === undefined) {\n        return false;\n      }\n\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        // touchedValue being truthy means the field is touched\n        return !!touchedValue;\n      }\n\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasVisibleChildErrors(\n          errorValue as Record<string, unknown>,\n          touchedValue as Record<string, unknown>,\n        );\n      }\n\n      return false;\n    });\n};\n\nexport const fieldCardVariants = tv({\n  slots: {\n    /** base class for the field card wrapper */\n    base: [\n      // base styles\n      'overflow-hidden rounded-small border bg-content1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the label/header */\n    label: [\n      // override HeroUI label positioning and display\n      'pointer-events-auto! static! z-auto! block! w-full!',\n      // reset any transforms or translations\n      'translate-x-0! translate-y-0! transform-none!',\n      // card header styling - use text-medium (16px) for proper header size\n      'rounded-t-small border-b p-3 font-semibold text-medium',\n      // animate border and text color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the content */\n    content: [\n      // same as p-3 of Card component\n      'p-3',\n      // default grid for form components (see Grid component)\n      'grid gap-4',\n    ],\n    /** class for the error footer wrapper */\n    errorFooter: [\n      'border-t',\n      // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n      'block px-3 pb-2 pt-1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the error text (empty base, color controlled by variant) */\n    errorText: [],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger-200',\n        label: 'border-danger-200 text-danger',\n        errorFooter: 'border-danger-200',\n        errorText: '!text-danger text-tiny',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\n        errorText: '!text-foreground-500 text-tiny',\n      },\n    },\n  },\n  defaultVariants: {\n    invalid: false,\n  },\n});\n\ntype ClassName = TVClassName<typeof fieldCardVariants>;\n\nexport interface FieldCardProps {\n  /** Content to render inside the card */\n  children: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Label content for the card header */\n  label: ReactNode;\n  /** Field name for validation */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * FieldCard component - A card-styled container with label header and error footer\n *\n * Displays form field content in a card layout with:\n * - Label/title in the header\n * - Content in the body\n * - Validation errors in the footer\n * - Danger outline when validation errors exist\n */\nconst FieldCard = ({\n  children,\n  className: _className = undefined,\n  name,\n  ...uniformFieldProps\n}: FieldCardProps) => {\n  const { error, getLabelProps, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  const {\n    control,\n    formState: { touchedFields, submitCount },\n    validation,\n  } = useFormContext();\n\n  // Check if any registered child field is required\n  const validationInstance = validation?.baseInstance ?? validation?.instance;\n  const registeredFields: string[] = Array.from(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (control as any)._names?.mount ?? [],\n  );\n  const childFieldPrefix = `${name}.`;\n  const isRequired = validationInstance\n    ? registeredFields\n        .filter((f) => {\n          return f.startsWith(childFieldPrefix);\n        })\n        .some((f) => {\n          return checkFieldIsRequired(\n            validationInstance,\n            f.split('.').filter((k) => {\n              return k !== '';\n            }),\n          );\n        })\n    : false;\n\n  // Get touched state for this field's children by traversing the path\n  const getNestedValue = (\n    obj: Record<string, unknown> | undefined,\n    path: string,\n  ): Record<string, unknown> | undefined => {\n    if (!obj) {\n      return undefined;\n    }\n    const keys = path.split('.');\n    let current: unknown = obj;\n    keys.every((key) => {\n      if (current && typeof current === 'object') {\n        current = (current as Record<string, unknown>)[key];\n        return true;\n      }\n      current = undefined;\n      return false;\n    });\n    return current as Record<string, unknown> | undefined;\n  };\n\n  const fieldTouched = getNestedValue(\n    touchedFields as Record<string, unknown>,\n    name,\n  );\n\n  // Check for object-level errors (_errors)\n  // @ts-expect-error - error._errors exists but not typed\n  const hasObjectErrors = !!error?._errors;\n\n  const errorRecord = error as unknown as Record<string, unknown>;\n\n  // Check if any child field has errors (regardless of touched state)\n  const hasChildErrors = hasAnyChildErrors(errorRecord);\n  // Check if any child field is touched\n  const isAnyChildTouched = hasAnyChildTouched(fieldTouched);\n\n  // Show invalid styling (danger border/header/error text) when:\n  // 1. Any child field has an error AND (it's touched OR form was submitted), OR\n  // 2. Object-level _errors exists AND no child errors AND (any child touched OR submitted)\n  const rawShowInvalid =\n    (hasChildErrors &&\n      (hasVisibleChildErrors(errorRecord, fieldTouched) || submitCount > 0)) ||\n    (hasObjectErrors &&\n      !hasChildErrors &&\n      (isAnyChildTouched || submitCount > 0));\n\n  // Debounce to prevent flickering during rapid state changes\n  const showInvalid = useDebounce(rawShowInvalid, 200);\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: showInvalid });\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <div className={className.base}>\n      {/* card header with label */}\n      {label ? (\n        <div\n          {...getLabelProps()}\n          aria-level={3}\n          // Override getLabelProps className to use our own invalid styling based on hasErrors,\n          // not HeroUI's which is based on any child field being invalid\n          className={className.label}\n          role=\"heading\"\n        >\n          {label}\n          {/* Manual asterisk: getLabelProps uses schema-required for the object itself,\n              but FieldCard needs asterisk based on whether any CHILD field is required */}\n          {isRequired ? (\n            <span aria-hidden=\"true\" className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors - always show _errors, but danger styling controlled by showInvalid */}\n      <FieldCardValidationError\n        className={className.errorFooter}\n        error={error}\n        errorTextClassName={className.errorText}\n        name={name}\n      />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":"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"}
+{"version":3,"file":"FieldCard-Bkp8PHJw.cjs","names":["useUniformField","AnimatePresence","motion","FieldValidationError","useUniformField","useFormContext","checkFieldIsRequired"],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: string;\n  /** Error object from parent FieldCard (passed directly to avoid duplicate hook calls) */\n  error?: FieldError[] | undefined;\n  /** CSS class name for the error text (controls color based on invalid state) */\n  errorTextClassName?: string;\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders validation errors in the footer of a FieldCard component.\n *\n * This component handles displaying field-level validation errors with proper\n * accessibility attributes and animates them in/out using Framer Motion.\n *\n * Note: Object-level errors (_errors) are always shown when they exist,\n * but the danger styling is controlled by the parent FieldCard based on\n * whether child fields have been touched.\n */\nconst FieldCardValidationError = ({\n  className = undefined,\n  error = undefined,\n  errorTextClassName = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\n  const { getErrorMessageProps, getHelperWrapperProps, testId } =\n    useUniformField({\n      name,\n    });\n\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  // Always show object-level errors (_errors) when they exist\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = !!error?._errors;\n\n  return (\n    <AnimatePresence initial={!disableAnimation}>\n      {hasErrors ? (\n        <motion.div\n          key=\"field-card-errors\"\n          exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n          initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n          style={{ overflow: 'hidden' }}\n          transition={{ duration: 0.4, ease: 'circOut' }}\n          animate={\n            disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n          }\n        >\n          <div\n            {...getHelperWrapperProps()}\n            className={cn(getHelperWrapperProps()?.className, className)}\n          >\n            <div\n              {...getErrorMessageProps()}\n              className={cn(\n                getErrorMessageProps()?.className,\n                errorTextClassName,\n              )}\n            >\n              <FieldValidationError\n                // @ts-expect-error - error._errors exists but not typed\n                error={error._errors}\n                testId={testId}\n              />\n            </div>\n          </div>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { useDebounce } from '@fuf-stack/pixels';\n\nimport { checkFieldIsRequired, useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\n\n/**\n * Recursively checks if any child field has an error (regardless of touched state).\n * Returns true if at least one child has an error.\n */\nexport const hasAnyChildErrors = (\n  errors: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      if (errorValue === undefined) {\n        return false;\n      }\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasAnyChildErrors(errorValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field is touched.\n * Returns true if at least one child is touched.\n */\nexport const hasAnyChildTouched = (\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!touched) {\n    return false;\n  }\n\n  return Object.keys(touched)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const touchedValue = touched[key];\n      if (touchedValue === undefined) {\n        return false;\n      }\n      // If touchedValue is truthy (boolean true), field is touched\n      if (touchedValue === true) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof touchedValue === 'object' && touchedValue !== null) {\n        return hasAnyChildTouched(touchedValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field with an error is also touched.\n * Returns true if at least one touched child has an error.\n */\nexport const hasVisibleChildErrors = (\n  errors: Record<string, unknown> | undefined,\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors || !touched) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      // Skip object-level errors (_errors) - those are handled separately\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      const touchedValue = touched[key];\n\n      // If this key doesn't exist in both errors and touched, skip\n      if (errorValue === undefined || touchedValue === undefined) {\n        return false;\n      }\n\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        // touchedValue being truthy means the field is touched\n        return !!touchedValue;\n      }\n\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasVisibleChildErrors(\n          errorValue as Record<string, unknown>,\n          touchedValue as Record<string, unknown>,\n        );\n      }\n\n      return false;\n    });\n};\n\nexport const fieldCardVariants = tv({\n  slots: {\n    /** base class for the field card wrapper */\n    base: [\n      // base styles\n      'overflow-hidden rounded-small border bg-content1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the label/header */\n    label: [\n      // override HeroUI label positioning and display\n      'pointer-events-auto! static! z-auto! block! w-full!',\n      // reset any transforms or translations\n      'translate-x-0! translate-y-0! transform-none!',\n      // card header styling - use text-medium (16px) for proper header size\n      'rounded-t-small border-b p-3 font-semibold text-medium',\n      // animate border and text color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the content */\n    content: [\n      // same as p-3 of Card component\n      'p-3',\n      // default grid for form components (see Grid component)\n      'grid gap-4',\n    ],\n    /** class for the error footer wrapper */\n    errorFooter: [\n      'border-t',\n      // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n      'block px-3 pb-2 pt-1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the error text (empty base, color controlled by variant) */\n    errorText: [],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger-200',\n        label: 'border-danger-200 text-danger',\n        errorFooter: 'border-danger-200',\n        errorText: '!text-danger text-tiny',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\n        errorText: '!text-foreground-500 text-tiny',\n      },\n    },\n  },\n  defaultVariants: {\n    invalid: false,\n  },\n});\n\ntype ClassName = TVClassName<typeof fieldCardVariants>;\n\nexport interface FieldCardProps {\n  /** Content to render inside the card */\n  children: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Label content for the card header */\n  label: ReactNode;\n  /** Field name for validation */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * FieldCard component - A card-styled container with label header and error footer\n *\n * Displays form field content in a card layout with:\n * - Label/title in the header\n * - Content in the body\n * - Validation errors in the footer\n * - Danger outline when validation errors exist\n */\nconst FieldCard = ({\n  children,\n  className: _className = undefined,\n  name,\n  ...uniformFieldProps\n}: FieldCardProps) => {\n  const { error, getLabelProps, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  const {\n    control,\n    formState: { touchedFields, submitCount },\n    validation,\n  } = useFormContext();\n\n  // Check if any registered child field is required\n  const validationInstance = validation?.baseInstance ?? validation?.instance;\n  const registeredFields: string[] = Array.from(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (control as any)._names?.mount ?? [],\n  );\n  const childFieldPrefix = `${name}.`;\n  const isRequired = validationInstance\n    ? registeredFields\n        .filter((f) => {\n          return f.startsWith(childFieldPrefix);\n        })\n        .some((f) => {\n          return checkFieldIsRequired(\n            validationInstance,\n            f.split('.').filter((k) => {\n              return k !== '';\n            }),\n          );\n        })\n    : false;\n\n  // Get touched state for this field's children by traversing the path\n  const getNestedValue = (\n    obj: Record<string, unknown> | undefined,\n    path: string,\n  ): Record<string, unknown> | undefined => {\n    if (!obj) {\n      return undefined;\n    }\n    const keys = path.split('.');\n    let current: unknown = obj;\n    keys.every((key) => {\n      if (current && typeof current === 'object') {\n        current = (current as Record<string, unknown>)[key];\n        return true;\n      }\n      current = undefined;\n      return false;\n    });\n    return current as Record<string, unknown> | undefined;\n  };\n\n  const fieldTouched = getNestedValue(\n    touchedFields as Record<string, unknown>,\n    name,\n  );\n\n  // Check for object-level errors (_errors)\n  // @ts-expect-error - error._errors exists but not typed\n  const hasObjectErrors = !!error?._errors;\n\n  const errorRecord = error as unknown as Record<string, unknown>;\n\n  // Check if any child field has errors (regardless of touched state)\n  const hasChildErrors = hasAnyChildErrors(errorRecord);\n  // Check if any child field is touched\n  const isAnyChildTouched = hasAnyChildTouched(fieldTouched);\n\n  // Show invalid styling (danger border/header/error text) when:\n  // 1. Any child field has an error AND (it's touched OR form was submitted), OR\n  // 2. Object-level _errors exists AND no child errors AND (any child touched OR submitted)\n  const rawShowInvalid =\n    (hasChildErrors &&\n      (hasVisibleChildErrors(errorRecord, fieldTouched) || submitCount > 0)) ||\n    (hasObjectErrors &&\n      !hasChildErrors &&\n      (isAnyChildTouched || submitCount > 0));\n\n  // Debounce to prevent flickering during rapid state changes\n  const showInvalid = useDebounce(rawShowInvalid, 200);\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: showInvalid });\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <div className={className.base}>\n      {/* card header with label */}\n      {label ? (\n        <div\n          {...getLabelProps()}\n          aria-level={3}\n          // Override getLabelProps className to use our own invalid styling based on hasErrors,\n          // not HeroUI's which is based on any child field being invalid\n          className={className.label}\n          role=\"heading\"\n        >\n          {label}\n          {/* Manual asterisk: getLabelProps uses schema-required for the object itself,\n              but FieldCard needs asterisk based on whether any CHILD field is required */}\n          {isRequired ? (\n            <span aria-hidden=\"true\" className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors - always show _errors, but danger styling controlled by showInvalid */}\n      <FieldCardValidationError\n        className={className.errorFooter}\n        error={error}\n        errorTextClassName={className.errorText}\n        name={name}\n      />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":"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"}

package/dist/{FieldCard-SjYNs4sL.js → FieldCard-DynQT-O7.js}

@@ -108,19 +108,24 @@ const hasVisibleChildErrors = (errors, touched) => {
 };
 const fieldCardVariants = tv({
 	slots: {
+		/** base class for the field card wrapper */
 		base: ["overflow-hidden rounded-small border bg-content1", "transition-colors duration-150 motion-reduce:transition-none"],
+		/** class for the label/header */
 		label: [
 			"pointer-events-auto! static! z-auto! block! w-full!",
 			"translate-x-0! translate-y-0! transform-none!",
 			"rounded-t-small border-b p-3 font-semibold text-medium",
 			"transition-colors duration-150 motion-reduce:transition-none"
 		],
+		/** class for the content */
 		content: ["p-3", "grid gap-4"],
+		/** class for the error footer wrapper */
 		errorFooter: [
 			"border-t",
 			"block px-3 pb-2 pt-1",
 			"transition-colors duration-150 motion-reduce:transition-none"
 		],
+		/** class for the error text (empty base, color controlled by variant) */
 		errorText: []
 	},
 	variants: { invalid: {
@@ -214,4 +219,4 @@ const FieldCard = ({ children, className: _className = void 0, name, ...uniformF
 //#endregion
 export { fieldCardVariants as n, FieldCard as t };
 
-//# sourceMappingURL=FieldCard-SjYNs4sL.js.map
+//# sourceMappingURL=FieldCard-DynQT-O7.js.map

package/dist/{FieldCard-SjYNs4sL.js.map → FieldCard-DynQT-O7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldCard-SjYNs4sL.js","names":[],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: string;\n  /** Error object from parent FieldCard (passed directly to avoid duplicate hook calls) */\n  error?: FieldError[] | undefined;\n  /** CSS class name for the error text (controls color based on invalid state) */\n  errorTextClassName?: string;\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders validation errors in the footer of a FieldCard component.\n *\n * This component handles displaying field-level validation errors with proper\n * accessibility attributes and animates them in/out using Framer Motion.\n *\n * Note: Object-level errors (_errors) are always shown when they exist,\n * but the danger styling is controlled by the parent FieldCard based on\n * whether child fields have been touched.\n */\nconst FieldCardValidationError = ({\n  className = undefined,\n  error = undefined,\n  errorTextClassName = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\n  const { getErrorMessageProps, getHelperWrapperProps, testId } =\n    useUniformField({\n      name,\n    });\n\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  // Always show object-level errors (_errors) when they exist\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = !!error?._errors;\n\n  return (\n    <AnimatePresence initial={!disableAnimation}>\n      {hasErrors ? (\n        <motion.div\n          key=\"field-card-errors\"\n          exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n          initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n          style={{ overflow: 'hidden' }}\n          transition={{ duration: 0.4, ease: 'circOut' }}\n          animate={\n            disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n          }\n        >\n          <div\n            {...getHelperWrapperProps()}\n            className={cn(getHelperWrapperProps()?.className, className)}\n          >\n            <div\n              {...getErrorMessageProps()}\n              className={cn(\n                getErrorMessageProps()?.className,\n                errorTextClassName,\n              )}\n            >\n              <FieldValidationError\n                // @ts-expect-error - error._errors exists but not typed\n                error={error._errors}\n                testId={testId}\n              />\n            </div>\n          </div>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { useDebounce } from '@fuf-stack/pixels';\n\nimport { checkFieldIsRequired, useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\n\n/**\n * Recursively checks if any child field has an error (regardless of touched state).\n * Returns true if at least one child has an error.\n */\nexport const hasAnyChildErrors = (\n  errors: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      if (errorValue === undefined) {\n        return false;\n      }\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasAnyChildErrors(errorValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field is touched.\n * Returns true if at least one child is touched.\n */\nexport const hasAnyChildTouched = (\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!touched) {\n    return false;\n  }\n\n  return Object.keys(touched)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const touchedValue = touched[key];\n      if (touchedValue === undefined) {\n        return false;\n      }\n      // If touchedValue is truthy (boolean true), field is touched\n      if (touchedValue === true) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof touchedValue === 'object' && touchedValue !== null) {\n        return hasAnyChildTouched(touchedValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field with an error is also touched.\n * Returns true if at least one touched child has an error.\n */\nexport const hasVisibleChildErrors = (\n  errors: Record<string, unknown> | undefined,\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors || !touched) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      // Skip object-level errors (_errors) - those are handled separately\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      const touchedValue = touched[key];\n\n      // If this key doesn't exist in both errors and touched, skip\n      if (errorValue === undefined || touchedValue === undefined) {\n        return false;\n      }\n\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        // touchedValue being truthy means the field is touched\n        return !!touchedValue;\n      }\n\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasVisibleChildErrors(\n          errorValue as Record<string, unknown>,\n          touchedValue as Record<string, unknown>,\n        );\n      }\n\n      return false;\n    });\n};\n\nexport const fieldCardVariants = tv({\n  slots: {\n    /** base class for the field card wrapper */\n    base: [\n      // base styles\n      'overflow-hidden rounded-small border bg-content1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the label/header */\n    label: [\n      // override HeroUI label positioning and display\n      'pointer-events-auto! static! z-auto! block! w-full!',\n      // reset any transforms or translations\n      'translate-x-0! translate-y-0! transform-none!',\n      // card header styling - use text-medium (16px) for proper header size\n      'rounded-t-small border-b p-3 font-semibold text-medium',\n      // animate border and text color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the content */\n    content: [\n      // same as p-3 of Card component\n      'p-3',\n      // default grid for form components (see Grid component)\n      'grid gap-4',\n    ],\n    /** class for the error footer wrapper */\n    errorFooter: [\n      'border-t',\n      // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n      'block px-3 pb-2 pt-1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the error text (empty base, color controlled by variant) */\n    errorText: [],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger-200',\n        label: 'border-danger-200 text-danger',\n        errorFooter: 'border-danger-200',\n        errorText: '!text-danger text-tiny',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\n        errorText: '!text-foreground-500 text-tiny',\n      },\n    },\n  },\n  defaultVariants: {\n    invalid: false,\n  },\n});\n\ntype ClassName = TVClassName<typeof fieldCardVariants>;\n\nexport interface FieldCardProps {\n  /** Content to render inside the card */\n  children: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Label content for the card header */\n  label: ReactNode;\n  /** Field name for validation */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * FieldCard component - A card-styled container with label header and error footer\n *\n * Displays form field content in a card layout with:\n * - Label/title in the header\n * - Content in the body\n * - Validation errors in the footer\n * - Danger outline when validation errors exist\n */\nconst FieldCard = ({\n  children,\n  className: _className = undefined,\n  name,\n  ...uniformFieldProps\n}: FieldCardProps) => {\n  const { error, getLabelProps, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  const {\n    control,\n    formState: { touchedFields, submitCount },\n    validation,\n  } = useFormContext();\n\n  // Check if any registered child field is required\n  const validationInstance = validation?.baseInstance ?? validation?.instance;\n  const registeredFields: string[] = Array.from(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (control as any)._names?.mount ?? [],\n  );\n  const childFieldPrefix = `${name}.`;\n  const isRequired = validationInstance\n    ? registeredFields\n        .filter((f) => {\n          return f.startsWith(childFieldPrefix);\n        })\n        .some((f) => {\n          return checkFieldIsRequired(\n            validationInstance,\n            f.split('.').filter((k) => {\n              return k !== '';\n            }),\n          );\n        })\n    : false;\n\n  // Get touched state for this field's children by traversing the path\n  const getNestedValue = (\n    obj: Record<string, unknown> | undefined,\n    path: string,\n  ): Record<string, unknown> | undefined => {\n    if (!obj) {\n      return undefined;\n    }\n    const keys = path.split('.');\n    let current: unknown = obj;\n    keys.every((key) => {\n      if (current && typeof current === 'object') {\n        current = (current as Record<string, unknown>)[key];\n        return true;\n      }\n      current = undefined;\n      return false;\n    });\n    return current as Record<string, unknown> | undefined;\n  };\n\n  const fieldTouched = getNestedValue(\n    touchedFields as Record<string, unknown>,\n    name,\n  );\n\n  // Check for object-level errors (_errors)\n  // @ts-expect-error - error._errors exists but not typed\n  const hasObjectErrors = !!error?._errors;\n\n  const errorRecord = error as unknown as Record<string, unknown>;\n\n  // Check if any child field has errors (regardless of touched state)\n  const hasChildErrors = hasAnyChildErrors(errorRecord);\n  // Check if any child field is touched\n  const isAnyChildTouched = hasAnyChildTouched(fieldTouched);\n\n  // Show invalid styling (danger border/header/error text) when:\n  // 1. Any child field has an error AND (it's touched OR form was submitted), OR\n  // 2. Object-level _errors exists AND no child errors AND (any child touched OR submitted)\n  const rawShowInvalid =\n    (hasChildErrors &&\n      (hasVisibleChildErrors(errorRecord, fieldTouched) || submitCount > 0)) ||\n    (hasObjectErrors &&\n      !hasChildErrors &&\n      (isAnyChildTouched || submitCount > 0));\n\n  // Debounce to prevent flickering during rapid state changes\n  const showInvalid = useDebounce(rawShowInvalid, 200);\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: showInvalid });\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <div className={className.base}>\n      {/* card header with label */}\n      {label ? (\n        <div\n          {...getLabelProps()}\n          aria-level={3}\n          // Override getLabelProps className to use our own invalid styling based on hasErrors,\n          // not HeroUI's which is based on any child field being invalid\n          className={className.label}\n          role=\"heading\"\n        >\n          {label}\n          {/* Manual asterisk: getLabelProps uses schema-required for the object itself,\n              but FieldCard needs asterisk based on whether any CHILD field is required */}\n          {isRequired ? (\n            <span aria-hidden=\"true\" className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors - always show _errors, but danger styling controlled by showInvalid */}\n      <FieldCardValidationError\n        className={className.errorFooter}\n        error={error}\n        errorTextClassName={className.errorText}\n        name={name}\n      />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":"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"}
+{"version":3,"file":"FieldCard-DynQT-O7.js","names":[],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: string;\n  /** Error object from parent FieldCard (passed directly to avoid duplicate hook calls) */\n  error?: FieldError[] | undefined;\n  /** CSS class name for the error text (controls color based on invalid state) */\n  errorTextClassName?: string;\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders validation errors in the footer of a FieldCard component.\n *\n * This component handles displaying field-level validation errors with proper\n * accessibility attributes and animates them in/out using Framer Motion.\n *\n * Note: Object-level errors (_errors) are always shown when they exist,\n * but the danger styling is controlled by the parent FieldCard based on\n * whether child fields have been touched.\n */\nconst FieldCardValidationError = ({\n  className = undefined,\n  error = undefined,\n  errorTextClassName = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\n  const { getErrorMessageProps, getHelperWrapperProps, testId } =\n    useUniformField({\n      name,\n    });\n\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  // Always show object-level errors (_errors) when they exist\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = !!error?._errors;\n\n  return (\n    <AnimatePresence initial={!disableAnimation}>\n      {hasErrors ? (\n        <motion.div\n          key=\"field-card-errors\"\n          exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n          initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n          style={{ overflow: 'hidden' }}\n          transition={{ duration: 0.4, ease: 'circOut' }}\n          animate={\n            disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n          }\n        >\n          <div\n            {...getHelperWrapperProps()}\n            className={cn(getHelperWrapperProps()?.className, className)}\n          >\n            <div\n              {...getErrorMessageProps()}\n              className={cn(\n                getErrorMessageProps()?.className,\n                errorTextClassName,\n              )}\n            >\n              <FieldValidationError\n                // @ts-expect-error - error._errors exists but not typed\n                error={error._errors}\n                testId={testId}\n              />\n            </div>\n          </div>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { useDebounce } from '@fuf-stack/pixels';\n\nimport { checkFieldIsRequired, useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\n\n/**\n * Recursively checks if any child field has an error (regardless of touched state).\n * Returns true if at least one child has an error.\n */\nexport const hasAnyChildErrors = (\n  errors: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      if (errorValue === undefined) {\n        return false;\n      }\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasAnyChildErrors(errorValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field is touched.\n * Returns true if at least one child is touched.\n */\nexport const hasAnyChildTouched = (\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!touched) {\n    return false;\n  }\n\n  return Object.keys(touched)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const touchedValue = touched[key];\n      if (touchedValue === undefined) {\n        return false;\n      }\n      // If touchedValue is truthy (boolean true), field is touched\n      if (touchedValue === true) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof touchedValue === 'object' && touchedValue !== null) {\n        return hasAnyChildTouched(touchedValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field with an error is also touched.\n * Returns true if at least one touched child has an error.\n */\nexport const hasVisibleChildErrors = (\n  errors: Record<string, unknown> | undefined,\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors || !touched) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      // Skip object-level errors (_errors) - those are handled separately\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      const touchedValue = touched[key];\n\n      // If this key doesn't exist in both errors and touched, skip\n      if (errorValue === undefined || touchedValue === undefined) {\n        return false;\n      }\n\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        // touchedValue being truthy means the field is touched\n        return !!touchedValue;\n      }\n\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasVisibleChildErrors(\n          errorValue as Record<string, unknown>,\n          touchedValue as Record<string, unknown>,\n        );\n      }\n\n      return false;\n    });\n};\n\nexport const fieldCardVariants = tv({\n  slots: {\n    /** base class for the field card wrapper */\n    base: [\n      // base styles\n      'overflow-hidden rounded-small border bg-content1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the label/header */\n    label: [\n      // override HeroUI label positioning and display\n      'pointer-events-auto! static! z-auto! block! w-full!',\n      // reset any transforms or translations\n      'translate-x-0! translate-y-0! transform-none!',\n      // card header styling - use text-medium (16px) for proper header size\n      'rounded-t-small border-b p-3 font-semibold text-medium',\n      // animate border and text color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the content */\n    content: [\n      // same as p-3 of Card component\n      'p-3',\n      // default grid for form components (see Grid component)\n      'grid gap-4',\n    ],\n    /** class for the error footer wrapper */\n    errorFooter: [\n      'border-t',\n      // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n      'block px-3 pb-2 pt-1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the error text (empty base, color controlled by variant) */\n    errorText: [],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger-200',\n        label: 'border-danger-200 text-danger',\n        errorFooter: 'border-danger-200',\n        errorText: '!text-danger text-tiny',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\n        errorText: '!text-foreground-500 text-tiny',\n      },\n    },\n  },\n  defaultVariants: {\n    invalid: false,\n  },\n});\n\ntype ClassName = TVClassName<typeof fieldCardVariants>;\n\nexport interface FieldCardProps {\n  /** Content to render inside the card */\n  children: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Label content for the card header */\n  label: ReactNode;\n  /** Field name for validation */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * FieldCard component - A card-styled container with label header and error footer\n *\n * Displays form field content in a card layout with:\n * - Label/title in the header\n * - Content in the body\n * - Validation errors in the footer\n * - Danger outline when validation errors exist\n */\nconst FieldCard = ({\n  children,\n  className: _className = undefined,\n  name,\n  ...uniformFieldProps\n}: FieldCardProps) => {\n  const { error, getLabelProps, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  const {\n    control,\n    formState: { touchedFields, submitCount },\n    validation,\n  } = useFormContext();\n\n  // Check if any registered child field is required\n  const validationInstance = validation?.baseInstance ?? validation?.instance;\n  const registeredFields: string[] = Array.from(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (control as any)._names?.mount ?? [],\n  );\n  const childFieldPrefix = `${name}.`;\n  const isRequired = validationInstance\n    ? registeredFields\n        .filter((f) => {\n          return f.startsWith(childFieldPrefix);\n        })\n        .some((f) => {\n          return checkFieldIsRequired(\n            validationInstance,\n            f.split('.').filter((k) => {\n              return k !== '';\n            }),\n          );\n        })\n    : false;\n\n  // Get touched state for this field's children by traversing the path\n  const getNestedValue = (\n    obj: Record<string, unknown> | undefined,\n    path: string,\n  ): Record<string, unknown> | undefined => {\n    if (!obj) {\n      return undefined;\n    }\n    const keys = path.split('.');\n    let current: unknown = obj;\n    keys.every((key) => {\n      if (current && typeof current === 'object') {\n        current = (current as Record<string, unknown>)[key];\n        return true;\n      }\n      current = undefined;\n      return false;\n    });\n    return current as Record<string, unknown> | undefined;\n  };\n\n  const fieldTouched = getNestedValue(\n    touchedFields as Record<string, unknown>,\n    name,\n  );\n\n  // Check for object-level errors (_errors)\n  // @ts-expect-error - error._errors exists but not typed\n  const hasObjectErrors = !!error?._errors;\n\n  const errorRecord = error as unknown as Record<string, unknown>;\n\n  // Check if any child field has errors (regardless of touched state)\n  const hasChildErrors = hasAnyChildErrors(errorRecord);\n  // Check if any child field is touched\n  const isAnyChildTouched = hasAnyChildTouched(fieldTouched);\n\n  // Show invalid styling (danger border/header/error text) when:\n  // 1. Any child field has an error AND (it's touched OR form was submitted), OR\n  // 2. Object-level _errors exists AND no child errors AND (any child touched OR submitted)\n  const rawShowInvalid =\n    (hasChildErrors &&\n      (hasVisibleChildErrors(errorRecord, fieldTouched) || submitCount > 0)) ||\n    (hasObjectErrors &&\n      !hasChildErrors &&\n      (isAnyChildTouched || submitCount > 0));\n\n  // Debounce to prevent flickering during rapid state changes\n  const showInvalid = useDebounce(rawShowInvalid, 200);\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: showInvalid });\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <div className={className.base}>\n      {/* card header with label */}\n      {label ? (\n        <div\n          {...getLabelProps()}\n          aria-level={3}\n          // Override getLabelProps className to use our own invalid styling based on hasErrors,\n          // not HeroUI's which is based on any child field being invalid\n          className={className.label}\n          role=\"heading\"\n        >\n          {label}\n          {/* Manual asterisk: getLabelProps uses schema-required for the object itself,\n              but FieldCard needs asterisk based on whether any CHILD field is required */}\n          {isRequired ? (\n            <span aria-hidden=\"true\" className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors - always show _errors, but danger styling controlled by showInvalid */}\n      <FieldCardValidationError\n        className={className.errorFooter}\n        error={error}\n        errorTextClassName={className.errorText}\n        name={name}\n      />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":"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"}

package/dist/FormContext-BrY1FQYR.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormContext-BrY1FQYR.cjs","names":["toValidationFormat","debug","React","toFormFormat","toSubmitFormat","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n  // Client validation schemas state\n  const [clientValidationSchemas, setClientValidationSchemas] = useState<\n    Record<string, VetoTypeAny>\n  >({});\n\n  // Memoized function to set/clear client validation schema\n  const setClientValidationSchema = useMemo(() => {\n    return (key: string, schema: VetoTypeAny | null) => {\n      // update client validation schemas\n      setClientValidationSchemas((prev) => {\n        // if no schema and no existing client validation schema for this key, do nothing\n        if (!prev[key] && !schema) {\n          return prev;\n        }\n        // if no schema, remove the client validation schema for this key\n        if (!schema) {\n          const { [key]: _removed, ...rest } = prev;\n          return rest;\n        }\n        // if schema, add or update the client validation schema for this key\n        return { ...prev, [key]: schema };\n      });\n    };\n  }, []);\n\n  return {\n    clientValidationSchemas,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n  // Setup client validation schemas\n  const { clientValidationSchemas, setClientValidationSchema } =\n    useClientValidationManager();\n\n  // Create a stable dependency array from the client validation schemas\n  const clientSchemaValues = useMemo(\n    () => {\n      const keys = Object.keys(clientValidationSchemas).sort();\n      return keys\n        .map((key) => {\n          return clientValidationSchemas[key];\n        })\n        .filter(Boolean);\n    },\n    // Include the object identity to react to schema instance updates with same shape\n    [clientValidationSchemas],\n  );\n\n  // Memoized extended validation instance\n  const extendedValidation = useMemo(\n    () => {\n      const hasBaseValidation = !!baseValidation;\n      const hasClientSchemas = clientSchemaValues.length > 0;\n\n      // If no base validation and no client schemas, return undefined\n      if (!hasBaseValidation && !hasClientSchemas) {\n        return undefined;\n      }\n\n      // If no client schemas, return base validation\n      if (!hasClientSchemas) {\n        return baseValidation;\n      }\n\n      // Combine client validation schemas\n      const clientSchemasCombined = clientSchemaValues.reduce(\n        // @ts-expect-error is ok, because initially it is null\n        (combined, clientSchema) => {\n          return combined ? and(combined, clientSchema) : clientSchema;\n        },\n        null,\n      );\n\n      // return combined validation\n      if (hasBaseValidation && clientSchemasCombined) {\n        return veto(and(baseValidation.schema, clientSchemasCombined));\n      }\n\n      // If we only have client schemas, return them as a veto instance\n      if (clientSchemasCombined) {\n        return veto(clientSchemasCombined);\n      }\n\n      // This should not happen due to the conditions above, but just in case\n      return baseValidation;\n    },\n    // Recompute when validation schema instances change\n    [baseValidation, clientSchemaValues],\n  );\n\n  return {\n    extendedValidation,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (extendedValidation?: VetoInstance) => {\n  // Use ref to store validation errors without triggering re-renders\n  const validationErrors = useRef<VetoFormattedError>(undefined);\n\n  // Memoized resolver function for React Hook Form\n  const resolver = useMemo(() => {\n    if (!extendedValidation) {\n      return undefined;\n    }\n\n    return async (values: FieldValues) => {\n      const validationValues = toValidationFormat(values) ?? {};\n      const result = await extendedValidation.validateAsync(validationValues);\n      validationErrors.current = result.errors ?? undefined;\n\n      // Transform veto result to React Hook Form format\n      return {\n        values: result.data ?? {},\n        errors: result.errors ?? {},\n      };\n    };\n  }, [extendedValidation]);\n\n  // Hash for memo dependency optimization in consuming components\n  const validationErrorsHash = JSON.stringify(validationErrors.current);\n\n  return {\n    resolver,\n    validationErrors: validationErrors.current,\n    validationErrorsHash,\n  };\n};\n","import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toSubmitFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n  fieldName: Path<TFieldValues>,\n  value: unknown,\n) => void;\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 * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n *    validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n *    user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n *    form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n *    field dependencies.\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 *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n *   1. FormProvider (provider) loads and uses context instance A\n *   2. File is edited, HMR triggers\n *   3. SubmitButton (consumer) hot-reloads and imports context instance B\n *   4. Provider writes to instance A, Consumer reads from instance B\n *   5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n *   6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n *   - First load: Create context and store in window\n *   - Subsequent HMRs: Reuse the same context from window\n *   - All components always reference the SAME context instance\n *   - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\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  /** Function to trigger form submit programmatically */\n  triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n  /** User change tracking (user input only, not programmatic changes) */\n  userChange: {\n    /**\n     * Subscribe to user field changes.\n     * Returns an unsubscribe function.\n     */\n    subscribe: (listener: UserChangeListener) => () => void;\n    /**\n     * Notify all subscribers about a user field change.\n     * Called from useController when user interacts with a field.\n     */\n    notify: (fieldName: string, value: unknown) => void;\n  };\n  /** Form validation configuration */\n  validation: {\n    /** Base validation schema instance (without client validation) */\n    baseInstance?: VetoInstance;\n    /** Veto validation schema instance for form validation */\n    instance?: VetoInstance;\n    /** Current validation errors in form */\n    errors?: VetoFormattedError;\n    /** Function to set client validation schema for a specific key */\n    setClientValidationSchema: (\n      key: string,\n      schema: VetoTypeAny | null,\n    ) => void;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n    {\n      debugMode: 'off',\n      preventSubmit: () => {\n        return undefined;\n      },\n      setDebugMode: () => {\n        return undefined;\n      },\n      triggerSubmit: () => {\n        return undefined;\n      },\n      userChange: {\n        subscribe: () => {\n          return () => {\n            return undefined;\n          };\n        },\n        notify: () => {\n          return undefined;\n        },\n      },\n      validation: {\n        setClientValidationSchema: () => {\n          return undefined;\n        },\n      },\n    },\n  );\n  debug('Creating new UniformContext instance');\n} else {\n  debug(\n    'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n  );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n  .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n  contextExists: !!UniformContext,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\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?: BaseSyntheticEvent) => Promise<void>;\n    isValid: boolean;\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 * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion 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: baseValidation = undefined,\n  validationTrigger,\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  // Create extended validation combining base + client validations\n  const { extendedValidation, setClientValidationSchema } =\n    useExtendedValidation(baseValidation);\n\n  // Create resolver from extended validation + get current validation errors\n  const { resolver, validationErrors, validationErrorsHash } =\n    useFormResolver(extendedValidation);\n\n  // Initialize react hook form with the resolver\n  const methods = useForm({\n    defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n    // set rhf mode\n    // see: https://react-hook-form.com/docs/useform#mode\n    mode: validationTrigger,\n    resolver,\n  });\n\n  // Get isValid from React Hook Form's formState\n  const isValid = methods.formState?.isValid;\n\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // User change listener registry (stored in ref to avoid re-renders)\n  const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n  // Subscribe to user changes\n  const subscribeUserChange = useCallback(\n    (listener: UserChangeListener): (() => void) => {\n      userChangeListenersRef.current.add(listener);\n      // Return cleanup function to unsubscribe\n      return () => {\n        userChangeListenersRef.current.delete(listener);\n      };\n    },\n    [],\n  );\n\n  // Notify all subscribers about user change\n  const notifyUserChange = useCallback(\n    (fieldName: string, value: unknown): void => {\n      // Notify all registered listeners\n      userChangeListenersRef.current.forEach((listener) => {\n        listener(fieldName as Path<object>, value);\n      });\n    },\n    [],\n  );\n\n  // Create submit handler with automatic data conversion\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    debug('handleSubmit called', {\n      preventSubmit,\n      formStateIsValid: methods.formState.isValid,\n      validationErrors: methods.formState.errors,\n      validationTrigger,\n      formValues: methods.getValues(),\n    });\n\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      debug('⛔ Form submit PREVENTED', {\n        formStateIsValid: methods.formState.isValid,\n        preventSubmit,\n      });\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n\n    debug('✓ Form submit ALLOWED', {\n      formStateIsValid: methods.formState.isValid,\n      preventSubmit,\n      reason: !methods.formState.isValid\n        ? 'Form is invalid (will trigger validation and show errors)'\n        : 'Form is valid and preventSubmit is false',\n    });\n\n    // Convert form data to submission format:\n    // - Unwrap flat array wrappers and convert markers\n    // - Remove empty strings, nulls, empty arrays, and empty objects\n    const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n      const submitData = toSubmitFormat(data) ?? {};\n      debug('onSubmit callback called', { submitData });\n      return onSubmit(submitData, event);\n    };\n\n    await methods.handleSubmit(wrappedOnSubmit)(e);\n\n    debug('handleSubmit completed');\n  };\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => {\n      return {\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          debug('preventSubmit called', {\n            previousValue: preventSubmit,\n            newValue: prevent,\n            formStateIsValid: methods.formState.isValid,\n            validationErrors: methods.formState.errors,\n          });\n          setPreventSubmit(prevent);\n        },\n        setClientValidationSchema,\n        setDebugMode,\n        triggerSubmit: handleSubmit,\n        userChange: {\n          subscribe: subscribeUserChange,\n          notify: notifyUserChange,\n        },\n        validation: {\n          baseInstance: baseValidation,\n          instance: extendedValidation,\n          errors: validationErrors,\n          setClientValidationSchema,\n        },\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [debugMode, debugModeSettings?.disable, validationErrorsHash],\n  );\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit, isValid })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n"],"mappings":"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"}
+{"version":3,"file":"FormContext-BrY1FQYR.cjs","names":["toValidationFormat","debug","React","toFormFormat","toSubmitFormat","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n  // Client validation schemas state\n  const [clientValidationSchemas, setClientValidationSchemas] = useState<\n    Record<string, VetoTypeAny>\n  >({});\n\n  // Memoized function to set/clear client validation schema\n  const setClientValidationSchema = useMemo(() => {\n    return (key: string, schema: VetoTypeAny | null) => {\n      // update client validation schemas\n      setClientValidationSchemas((prev) => {\n        // if no schema and no existing client validation schema for this key, do nothing\n        if (!prev[key] && !schema) {\n          return prev;\n        }\n        // if no schema, remove the client validation schema for this key\n        if (!schema) {\n          const { [key]: _removed, ...rest } = prev;\n          return rest;\n        }\n        // if schema, add or update the client validation schema for this key\n        return { ...prev, [key]: schema };\n      });\n    };\n  }, []);\n\n  return {\n    clientValidationSchemas,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n  // Setup client validation schemas\n  const { clientValidationSchemas, setClientValidationSchema } =\n    useClientValidationManager();\n\n  // Create a stable dependency array from the client validation schemas\n  const clientSchemaValues = useMemo(\n    () => {\n      const keys = Object.keys(clientValidationSchemas).sort();\n      return keys\n        .map((key) => {\n          return clientValidationSchemas[key];\n        })\n        .filter(Boolean);\n    },\n    // Include the object identity to react to schema instance updates with same shape\n    [clientValidationSchemas],\n  );\n\n  // Memoized extended validation instance\n  const extendedValidation = useMemo(\n    () => {\n      const hasBaseValidation = !!baseValidation;\n      const hasClientSchemas = clientSchemaValues.length > 0;\n\n      // If no base validation and no client schemas, return undefined\n      if (!hasBaseValidation && !hasClientSchemas) {\n        return undefined;\n      }\n\n      // If no client schemas, return base validation\n      if (!hasClientSchemas) {\n        return baseValidation;\n      }\n\n      // Combine client validation schemas\n      const clientSchemasCombined = clientSchemaValues.reduce(\n        // @ts-expect-error is ok, because initially it is null\n        (combined, clientSchema) => {\n          return combined ? and(combined, clientSchema) : clientSchema;\n        },\n        null,\n      );\n\n      // return combined validation\n      if (hasBaseValidation && clientSchemasCombined) {\n        return veto(and(baseValidation.schema, clientSchemasCombined));\n      }\n\n      // If we only have client schemas, return them as a veto instance\n      if (clientSchemasCombined) {\n        return veto(clientSchemasCombined);\n      }\n\n      // This should not happen due to the conditions above, but just in case\n      return baseValidation;\n    },\n    // Recompute when validation schema instances change\n    [baseValidation, clientSchemaValues],\n  );\n\n  return {\n    extendedValidation,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (extendedValidation?: VetoInstance) => {\n  // Use ref to store validation errors without triggering re-renders\n  const validationErrors = useRef<VetoFormattedError>(undefined);\n\n  // Memoized resolver function for React Hook Form\n  const resolver = useMemo(() => {\n    if (!extendedValidation) {\n      return undefined;\n    }\n\n    return async (values: FieldValues) => {\n      const validationValues = toValidationFormat(values) ?? {};\n      const result = await extendedValidation.validateAsync(validationValues);\n      validationErrors.current = result.errors ?? undefined;\n\n      // Transform veto result to React Hook Form format\n      return {\n        values: result.data ?? {},\n        errors: result.errors ?? {},\n      };\n    };\n  }, [extendedValidation]);\n\n  // Hash for memo dependency optimization in consuming components\n  const validationErrorsHash = JSON.stringify(validationErrors.current);\n\n  return {\n    resolver,\n    validationErrors: validationErrors.current,\n    validationErrorsHash,\n  };\n};\n","import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toSubmitFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n  fieldName: Path<TFieldValues>,\n  value: unknown,\n) => void;\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 * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n *    validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n *    user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n *    form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n *    field dependencies.\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 *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n *   1. FormProvider (provider) loads and uses context instance A\n *   2. File is edited, HMR triggers\n *   3. SubmitButton (consumer) hot-reloads and imports context instance B\n *   4. Provider writes to instance A, Consumer reads from instance B\n *   5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n *   6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n *   - First load: Create context and store in window\n *   - Subsequent HMRs: Reuse the same context from window\n *   - All components always reference the SAME context instance\n *   - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\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  /** Function to trigger form submit programmatically */\n  triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n  /** User change tracking (user input only, not programmatic changes) */\n  userChange: {\n    /**\n     * Subscribe to user field changes.\n     * Returns an unsubscribe function.\n     */\n    subscribe: (listener: UserChangeListener) => () => void;\n    /**\n     * Notify all subscribers about a user field change.\n     * Called from useController when user interacts with a field.\n     */\n    notify: (fieldName: string, value: unknown) => void;\n  };\n  /** Form validation configuration */\n  validation: {\n    /** Base validation schema instance (without client validation) */\n    baseInstance?: VetoInstance;\n    /** Veto validation schema instance for form validation */\n    instance?: VetoInstance;\n    /** Current validation errors in form */\n    errors?: VetoFormattedError;\n    /** Function to set client validation schema for a specific key */\n    setClientValidationSchema: (\n      key: string,\n      schema: VetoTypeAny | null,\n    ) => void;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n    {\n      debugMode: 'off',\n      preventSubmit: () => {\n        return undefined;\n      },\n      setDebugMode: () => {\n        return undefined;\n      },\n      triggerSubmit: () => {\n        return undefined;\n      },\n      userChange: {\n        subscribe: () => {\n          return () => {\n            return undefined;\n          };\n        },\n        notify: () => {\n          return undefined;\n        },\n      },\n      validation: {\n        setClientValidationSchema: () => {\n          return undefined;\n        },\n      },\n    },\n  );\n  debug('Creating new UniformContext instance');\n} else {\n  debug(\n    'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n  );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n  .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n  contextExists: !!UniformContext,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\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?: BaseSyntheticEvent) => Promise<void>;\n    isValid: boolean;\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 * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion 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: baseValidation = undefined,\n  validationTrigger,\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  // Create extended validation combining base + client validations\n  const { extendedValidation, setClientValidationSchema } =\n    useExtendedValidation(baseValidation);\n\n  // Create resolver from extended validation + get current validation errors\n  const { resolver, validationErrors, validationErrorsHash } =\n    useFormResolver(extendedValidation);\n\n  // Initialize react hook form with the resolver\n  const methods = useForm({\n    defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n    // set rhf mode\n    // see: https://react-hook-form.com/docs/useform#mode\n    mode: validationTrigger,\n    resolver,\n  });\n\n  // Get isValid from React Hook Form's formState\n  const isValid = methods.formState?.isValid;\n\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // User change listener registry (stored in ref to avoid re-renders)\n  const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n  // Subscribe to user changes\n  const subscribeUserChange = useCallback(\n    (listener: UserChangeListener): (() => void) => {\n      userChangeListenersRef.current.add(listener);\n      // Return cleanup function to unsubscribe\n      return () => {\n        userChangeListenersRef.current.delete(listener);\n      };\n    },\n    [],\n  );\n\n  // Notify all subscribers about user change\n  const notifyUserChange = useCallback(\n    (fieldName: string, value: unknown): void => {\n      // Notify all registered listeners\n      userChangeListenersRef.current.forEach((listener) => {\n        listener(fieldName as Path<object>, value);\n      });\n    },\n    [],\n  );\n\n  // Create submit handler with automatic data conversion\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    debug('handleSubmit called', {\n      preventSubmit,\n      formStateIsValid: methods.formState.isValid,\n      validationErrors: methods.formState.errors,\n      validationTrigger,\n      formValues: methods.getValues(),\n    });\n\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      debug('⛔ Form submit PREVENTED', {\n        formStateIsValid: methods.formState.isValid,\n        preventSubmit,\n      });\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n\n    debug('✓ Form submit ALLOWED', {\n      formStateIsValid: methods.formState.isValid,\n      preventSubmit,\n      reason: !methods.formState.isValid\n        ? 'Form is invalid (will trigger validation and show errors)'\n        : 'Form is valid and preventSubmit is false',\n    });\n\n    // Convert form data to submission format:\n    // - Unwrap flat array wrappers and convert markers\n    // - Remove empty strings, nulls, empty arrays, and empty objects\n    const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n      const submitData = toSubmitFormat(data) ?? {};\n      debug('onSubmit callback called', { submitData });\n      return onSubmit(submitData, event);\n    };\n\n    await methods.handleSubmit(wrappedOnSubmit)(e);\n\n    debug('handleSubmit completed');\n  };\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => {\n      return {\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          debug('preventSubmit called', {\n            previousValue: preventSubmit,\n            newValue: prevent,\n            formStateIsValid: methods.formState.isValid,\n            validationErrors: methods.formState.errors,\n          });\n          setPreventSubmit(prevent);\n        },\n        setClientValidationSchema,\n        setDebugMode,\n        triggerSubmit: handleSubmit,\n        userChange: {\n          subscribe: subscribeUserChange,\n          notify: notifyUserChange,\n        },\n        validation: {\n          baseInstance: baseValidation,\n          instance: extendedValidation,\n          errors: validationErrors,\n          setClientValidationSchema,\n        },\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [debugMode, debugModeSettings?.disable, validationErrorsHash],\n  );\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit, isValid })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,mCAAmC;CAE9C,MAAM,CAAC,yBAAyB,+BAAA,GAAA,MAAA,UAE9B,EAAE,CAAC;AAsBL,QAAO;EACL;EACA,4BAAA,GAAA,MAAA,eArB8C;AAC9C,WAAQ,KAAa,WAA+B;AAElD,gCAA4B,SAAS;AAEnC,SAAI,CAAC,KAAK,QAAQ,CAAC,OACjB,QAAO;AAGT,SAAI,CAAC,QAAQ;MACX,MAAM,GAAG,MAAM,UAAU,GAAG,SAAS;AACrC,aAAO;;AAGT,YAAO;MAAE,GAAG;OAAO,MAAM;MAAQ;MACjC;;KAEH,EAAE,CAIsB;EAC1B;;;;;;;;AASH,MAAa,yBAAyB,mBAAkC;CAEtE,MAAM,EAAE,yBAAyB,8BAC/B,4BAA4B;CAG9B,MAAM,sBAAA,GAAA,MAAA,eACE;AAEJ,SADa,OAAO,KAAK,wBAAwB,CAAC,MACvC,CACR,KAAK,QAAQ;AACZ,UAAO,wBAAwB;IAC/B,CACD,OAAO,QAAQ;IAGpB,CAAC,wBAAwB,CAC1B;AA4CD,QAAO;EACL,qBAAA,GAAA,MAAA,eAzCM;GACJ,MAAM,oBAAoB,CAAC,CAAC;GAC5B,MAAM,mBAAmB,mBAAmB,SAAS;AAGrD,OAAI,CAAC,qBAAqB,CAAC,iBACzB;AAIF,OAAI,CAAC,iBACH,QAAO;GAIT,MAAM,wBAAwB,mBAAmB,QAE9C,UAAU,iBAAiB;AAC1B,WAAO,YAAA,GAAA,gBAAA,KAAe,UAAU,aAAa,GAAG;MAElD,KACD;AAGD,OAAI,qBAAqB,sBACvB,SAAA,GAAA,gBAAA,OAAA,GAAA,gBAAA,KAAgB,eAAe,QAAQ,sBAAsB,CAAC;AAIhE,OAAI,sBACF,SAAA,GAAA,gBAAA,MAAY,sBAAsB;AAIpC,UAAO;KAGT,CAAC,gBAAgB,mBAAmB,CAIlB;EAClB;EACD;;;;;;;;AASH,MAAa,mBAAmB,uBAAsC;CAEpE,MAAM,oBAAA,GAAA,MAAA,QAA8C,KAAA,EAAU;CAG9D,MAAM,YAAA,GAAA,MAAA,eAAyB;AAC7B,MAAI,CAAC,mBACH;AAGF,SAAO,OAAO,WAAwB;GACpC,MAAM,mBAAmBA,sBAAAA,mBAAmB,OAAO,IAAI,EAAE;GACzD,MAAM,SAAS,MAAM,mBAAmB,cAAc,iBAAiB;AACvE,oBAAiB,UAAU,OAAO,UAAU,KAAA;AAG5C,UAAO;IACL,QAAQ,OAAO,QAAQ,EAAE;IACzB,QAAQ,OAAO,UAAU,EAAE;IAC5B;;IAEF,CAAC,mBAAmB,CAAC;CAGxB,MAAM,uBAAuB,KAAK,UAAU,iBAAiB,QAAQ;AAErE,QAAO;EACL;EACA,kBAAkB,iBAAiB;EACnC;EACD;;;;AChJH,MAAMC,WAAAA,GAAAA,MAAAA,SAAoB,sBAAsB;AAmBhD,MAAM,uCAAuC;AAkG7C,IAAI,CAAE,OAAe,qBAAqB;AAEvC,QAAe,sBAAsBC,MAAAA,QAAM,cAC1C;EACE,WAAW;EACX,qBAAqB;EAGrB,oBAAoB;EAGpB,qBAAqB;EAGrB,YAAY;GACV,iBAAiB;AACf,iBAAa;;GAIf,cAAc;GAGf;EACD,YAAY,EACV,iCAAiC,IAGlC;EACF,CACF;AACD,SAAM,uCAAuC;MAE7C,SACE,2EACD;AAMH,MAAa,iBAAkB,OAC5B;AAEHD,QAAM,2BAA2B;CAC/B,eAAe,CAAC,CAAC;CAEjB,qBAAqB,CAAC,CAAE,OAAe;CAEvC,eAAe,mBAAoB,OAAe;CACnD,CAAC;;;;;;;;;AA6BF,MAAM,gBAA6C,EACjD,UACA,oBAAoB,KAAA,GACpB,gBAAgB,KAAA,GAChB,UACA,YAAY,iBAAiB,KAAA,GAC7B,wBACI;CAEJ,MAAM,CAAC,WAAW,iBAAA,GAAA,kBAAA,iBAChB,mBAAmB,mBAAmB,sCACtC,MACD;CAGD,MAAM,EAAE,oBAAoB,8BAC1B,sBAAsB,eAAe;CAGvC,MAAM,EAAE,UAAU,kBAAkB,yBAClC,gBAAgB,mBAAmB;CAGrC,MAAM,WAAA,GAAA,gBAAA,SAAkB;EACtB,eAAe,gBAAgBE,sBAAAA,aAAa,cAAc,GAAG;EAG7D,MAAM;EACN;EACD,CAAC;CAGF,MAAM,UAAU,QAAQ,WAAW;CAGnC,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UAA6B,MAAM;CAGzD,MAAM,0BAAA,GAAA,MAAA,wBAAyD,IAAI,KAAK,CAAC;CAGzE,MAAM,uBAAA,GAAA,MAAA,cACH,aAA+C;AAC9C,yBAAuB,QAAQ,IAAI,SAAS;AAE5C,eAAa;AACX,0BAAuB,QAAQ,OAAO,SAAS;;IAGnD,EAAE,CACH;CAGD,MAAM,oBAAA,GAAA,MAAA,cACH,WAAmB,UAAyB;AAE3C,yBAAuB,QAAQ,SAAS,aAAa;AACnD,YAAS,WAA2B,MAAM;IAC1C;IAEJ,EAAE,CACH;CAID,MAAM,eAAe,OAAO,MAAiC;AAC3D,UAAM,uBAAuB;GAC3B;GACA,kBAAkB,QAAQ,UAAU;GACpC,kBAAkB,QAAQ,UAAU;GACpC;GACA,YAAY,QAAQ,WAAW;GAChC,CAAC;AAIF,MAAI,QAAQ,UAAU,WAAW,eAAe;AAC9C,WAAM,2BAA2B;IAC/B,kBAAkB,QAAQ,UAAU;IACpC;IACD,CAAC;AACF,WAAQ,KACN,4EACD;AACD,MAAG,gBAAgB;AACnB,UAAO,QAAQ,SAAS;;AAG1B,UAAM,yBAAyB;GAC7B,kBAAkB,QAAQ,UAAU;GACpC;GACA,QAAQ,CAAC,QAAQ,UAAU,UACvB,8DACA;GACL,CAAC;EAKF,MAAM,mBAAmB,MAAmB,UAA+B;GACzE,MAAM,aAAaC,sBAAAA,eAAe,KAAK,IAAI,EAAE;AAC7C,WAAM,4BAA4B,EAAE,YAAY,CAAC;AACjD,UAAO,SAAS,YAAY,MAAM;;AAGpC,QAAM,QAAQ,aAAa,gBAAgB,CAAC,EAAE;AAE9C,UAAM,yBAAyB;;CAIjC,MAAM,gBAAA,GAAA,MAAA,eACE;AACJ,SAAO;GAGL,WAAW,mBAAmB,UAAU,aAAa;GACrD,gBAAgB,YAAqB;AACnC,YAAM,wBAAwB;KAC5B,eAAe;KACf,UAAU;KACV,kBAAkB,QAAQ,UAAU;KACpC,kBAAkB,QAAQ,UAAU;KACrC,CAAC;AACF,qBAAiB,QAAQ;;GAE3B;GACA;GACA,eAAe;GACf,YAAY;IACV,WAAW;IACX,QAAQ;IACT;GACD,YAAY;IACV,cAAc;IACd,UAAU;IACV,QAAQ;IACR;IACD;GACF;IAGH;EAAC;EAAW,mBAAmB;EAAS;EAAqB,CAC9D;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAe,UAAhB;EAAyB,OAAO;YAE9B,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,cAAD;GAAkB,GAAI;aACnB,SAAS;IAAE;IAAc;IAAS,CAAC;GACnB,CAAA;EACK,CAAA"}