@fuf-stack/uniform 1.11.2 → 1.11.3

package/dist/{FieldArray-CDLaGvNj.js.map → FieldArray-omRNwxgy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldArray-CDLaGvNj.js","names":["SortDragHandle","Grid","ElementActionsMenu","ElementRemoveButton","FieldValidationError","FieldArrayLabel","SortContext","FieldArrayElement","FieldArrayValidationError","ElementAppendButton","FieldArray"],"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.2, 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 (for some reason it's hidden by default) and add padding\n              'block px-3 py-2',\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":";;;;;;;;;;;;;;;;;;;AAkBA,MAAM,uBAAuB,EAC3B,mBAAmB,eACnB,YAAY,QACZ,SACA,SAAS,aACqB;AAC9B,QACE,qBAAC;EACC;EACA,WAAW,GAAG,UAAU;EACf;EACT,MAAK;EACG;EACR,SAAQ;aAER,oBAAC,WAAS,EACV,oBAAC,oBAAM,mBAAwB;GACxB;;AAIb,kCAAe;;;;;;;ACVf,MAAM,sBAAsB,EAC1B,YAAY,QACZ,YAAY,OACZ,cAAc,OACd,aAAa,MACb,SACA,SAAS,aACoB;CAC7B,MAAM,gBAAgB,QAAa;AACjC,UAAQ,KAAR;GACE,KAAK;AACH,YAAQ,QAAQ;AAChB;GACF,KAAK;AACH,YAAQ,WAAW;AACnB;GACF,KAAK;AACH,YAAQ,QAAQ;AAChB;GACF,QACE;;;CAKN,MAAM,YAAwB,EAAE;AAEhC,KAAI,UACF,WAAU,KAAK;EACb,KAAK;EACL,OAAO;EACP,MAAM,oBAAC,WAAS;EACjB,CAAC;AAGJ,KAAI,YACF,WAAU,KAAK;EACb,KAAK;EACL,OAAO;EACP,MAAM,oBAAC,cAAY;EACpB,CAAC;AAGJ,KAAI,WACF,WAAU,KAAK;EACb,KAAK;EACL,WAAW;EACX,OAAO;EACP,MAAM,oBAAC,YAAU;EAClB,CAAC;AAGJ,QACE,oBAAC;EACC,WAAU;EACV,OAAO;EACP,UAAU;EACV,WAAU;EACF;EACR,oBAAoB;GAClB,WAAW,GAAG,UAAU;GACxB,eAAe;GACf,MAAM;GACN,SAAS;GACV;GACD;;AAIN,iCAAe;;;;AC/Ef,MAAM,uBAAuB,EAC3B,YAAY,QACZ,mBAAmB,OACnB,SACA,SAAS,aACqB;CAC9B,MAAM,SACJ,oBAAC;EACC,WAAU;EACV,WAAW,GAAG,UAAU;EACxB,OAAM;EACN,MAAM,oBAAC,YAAU;EACR;EACT,MAAK;EACG;EACR,SAAQ;GACR;AAGJ,KAAI,iBACF,QAAO;AAGT,QACE,oBAAC,OAAO;EACN,SAAS;GAAE,SAAS;GAAG,OAAO;GAAQ;EACtC,WAAU;EACV,MAAM;GAAE,SAAS;GAAG,OAAO;GAAG;EAC9B,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG;EACjC,YAAY,EAAE,UAAU,IAAK;YAE5B;GACU;;AAIjB,kCAAe;;;;;;;;AClCf,MAAM,kBAAkB,EACtB,YAAY,QACZ,IACA,SAAS,aACgB;CAEzB,MAAM,EAAE,YAAY,cAAc,YAAY,EAAE,IAAI,CAAC;AAErD,QACE,oBAAC;EACC,WAAW,GAAG,UAAU;EACxB,eAAa;EACb,GAAI;EACJ,GAAI;YAEJ,oBAAC,mBAAiB;GACd;;AAIV,6BAAe;;;;;;;;;AC4Bf,MAAM,qBAAqB,EACzB,UACA,WACA,mBAAmB,OACnB,YAAY,OACZ,qBAAqB,uBAAuB,QAC5C,QACA,IACA,OAAO,QACP,cAAc,OACd,mBAAmB,MACnB,SACA,WAAW,OACX,SAAS,aACmB;CAI5B,MAAM,EAAE,YAAY,WAAW,YAAY,eAAe,YAAY,EAAE,IAAI,CAAC;CAC7E,MAAM,eAAe,WACjB;EACE,WAAW,IAAI,UAAU,SAAS,UAAU;EAC5C;EACA,QAAQ,aAAa,KAAK;EAC3B,GACD;CAGJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAGhD,MAAM,yBAAyC;EAC7C,QAAQ;GAAE,SAAS;GAAG,QAAQ;GAAG,cAAc;GAAG;EAClD,SAAS;GACP,SAAS;GACT,QAAQ;GACR,YAAY;IAAE,UAAU;IAAK,MAAM;IAAW;GAE9C,cAAc;GACf;EACD,MAAM;GACJ,SAAS;GACT,QAAQ;GACR,cAAc;GACd,YAAY;IAEV,SAAS;KAAE,UAAU;KAAK,MAAM;KAAW;IAC3C,QAAQ;KAAE,OAAO;KAAK,UAAU;KAAK,MAAM;KAAW;IACvD;GACF;EACF;AAGD,QACE,oBAAC;EACC,MAAK;EAEL,sBAAsB;AACpB,WAAQ,QAAQ;;YAGjB,YACC,oBAAC,OAAO;GAEN,KAAK;GACL,SAAS,mBAAmB,SAAY;GACxC,WAAW,GAAG,UAAU,SAAS;GACjC,iBAAe;GACf,eAAa,GAAG,OAAO;GACvB,MAAM,mBAAmB,SAAY;GACrC,SAAS,mBAAmB,QAAQ;GACpC,OAAO;GACP,UAAU,mBAAmB,SAAY;aAEzC,qBAAC;IAAI,WAAW,GAAG,UAAU,cAAc;;KAExC,WACC,oBAACA;MACC,WAAW,UAAU;MACjB;MACJ,QAAQ,GAAG,OAAO;OAClB,GACA;KAGJ,oBAACC;MACC,WAAW,GAAG,UAAU,kBAAkB;MAC1C,QAAQ,GAAG,OAAO;MAGjB;OACI;KAGN,aAAa,cACZ,oBAACC;MACC,WAAW,UAAU;MACV;MACE;MACb,YAAY,EAAE,oBAAoB,OAAO,WAAW;MACpD,QAAQ,GAAG,OAAO;MAClB,SAAS;OACP,GAAG;OACH,cAAc;AACZ,YAAI,iBACF,SAAQ,QAAQ;YAEhB,cAAa,MAAM;;OAGxB;OACD,GAEF,0CAEE,oBAAC;MAAgB,SAAS;gBACvB,oBAAoB,OAAO,WAAW,IAAI,OACzC,oBAACC;OAEC,WAAW,UAAU;OACH;OAClB,QAAQ,GAAG,OAAO;OAClB,eAAe;AACb,YAAI,iBACF,SAAQ,QAAQ;YAEhB,cAAa,MAAM;;SARnB,gBAWJ;OAEY,GACjB;;KAED;KAvED,GAwEK,GACV;GACY;;AAItB,gCAAe;;;;;;;;;;AC7Lf,MAAM,mBAAmB,EACvB,YAAY,QACZ,OAAO,QACP,WAC0B;CAC1B,MAAM,EAAE,OAAO,eAAe,SAAS,UAAU,gBAAgB;EAC/D;EACA,OAAO;EACR,CAAC;AAGF,KAAI,CAAC,OACH,QAAO;CAIT,MAAM,YAAY,WAAW,OAAO;AAEpC,QACE,oBAAC;EACC,GAAI,eAAe;EACnB,cAAY;EACZ,MAAK;EACL,WAAW,GAAG,eAAe,EAAE,WAAW,WAAW,EAEnD,oBAAoB,CAAC,WACtB,CAAC;YAED;GACG;;AAIV,8BAAe;;;;;;;;;;;;;;AC7Bf,MAAM,6BAA6B,EACjC,WACoC;CACpC,MAAM,EACJ,OACA,sBACA,uBACA,SACA,WACE,gBAAgB,EAClB,MACD,CAAC;CAGF,MAAM,mBAAmB,kBAAkB;CAG3C,MAAM,YAAY,WAAW,OAAO;AAEpC,QACE,oBAAC;EAAgB,SAAS,CAAC;YACxB,YACC,oBAAC,OAAO;GAEN,MAAM,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAG;GAC9D,SAAS,mBAAmB,QAAQ;IAAE,QAAQ;IAAG,SAAS;IAAG;GAC7D,OAAO,EAAE,UAAU,UAAU;GAC7B,YAAY;IAAE,UAAU;IAAK,MAAM;IAAW;GAC9C,SACE,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAQ;aAG/D,oBAAC;IACC,GAAI,uBAAuB;IAC3B,WAAW,GACT,uBAAuB,EAAE,WAEzB,kBACD;cAED,oBAAC;KAAI,GAAI,sBAAsB;eAC7B,oBAACC;MAEC,OAAO,MAAM;MACL;OACR;MACE;KACF;KAxBF,qBAyBO,GACX;GACY;;AAItB,wCAAe;;;;;;;;;;;;ACnCf,MAAM,eAAe,EACnB,UACA,QACA,MACA,MACA,eACiC;CACjC,MAAM,EAAE,YAAY,gBAAgB;CAGpC,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,eAAe,CAC1B;AAGD,KAAI,CAAC,SACH,QAAO;;;;;CAOT,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;AAGzB,MAAI,OAAO,OAAO,MAAM,IAAI;AAS1B,QAPiB,OAAO,WAAW,UAAU;AAC3C,WAAO,MAAM,OAAO,OAAO;KAC3B,EACe,OAAO,WAAW,UAAU;AAC3C,WAAO,MAAM,OAAO,MAAM;KAC1B,CAEsB;AAIxB,WAAQ,KAAK;;;AAIjB,QACE,oBAAC;EACC,oBAAoB;EACpB,WAAW,CAAC,wBAAwB,sBAAsB;EAC1D,WAAW;EACF;YAET,oBAAC;GACC,UAAU;GACV,OAAO,OAAO,KAAK,UAAU;AAC3B,WAAO,MAAM;KACb;GAED;IACe;GACP;;AAIjB,0BAAe;;;;AC/Ff,MAAa,qBAAqB,GAAG;CACnC,OAAO;EAEL,MAAM,CAEJ,mEAEA,0BACD;EAED,mBAAmB;GAEjB;GAEA;GAEA;GACD;EAED,cAAc;GAEZ;GAEA;GAEA;GACD;EAED,mBAAmB,CAAC,kBAAkB;EAEtC,OAAO;GAEL;GAEA;GAEA;GACD;EAED,MAAM,CAAC,kBAAkB;EAEzB,aAAa,CAAC,kBAAkB;EAEhC,UAAU,CAER,gCAEA,eACD;EAED,eAAe,CAEb,iEAEA,yDACD;EAED,cAAc;GAEZ;GAEA;GAEA;GACD;EAED,gBAAgB;GAEd;GAEA;GAEA;GACD;EACF;CACD,UAAU,EACR,UAAU,EACR,OAAO;EAEL,mBACE;EAEF,cACE;EAEF,gBACE;EACH,EACF,EACF;CACF,CAAC;;;;AAKF,MAAM,cAAc,EAClB,mBAAmB,eACnB,UACA,WAAW,aAAa,QACxB,YAAY,OACZ,qBAAqB,uBAAuB,MAC5C,sBAAsB,QACtB,OAAO,OACP,cAAc,OACd,0BAA0B,OAC1B,MACA,WAAW,OACX,GAAG,wBACkB;CACrB,MAAM,EACJ,QACA,QACA,QACA,QACA,MACA,kBACA,qBACA,WACA,WACE,qBAAqB;EACvB;EACA;EACA,qBAAqB;EACrB;EACA,GAAG;EACJ,CAAC;CAIF,MAAM,YAAY,qBADD,mBAAmB,EAAE,UAAU,CAAC,CAAC,kBAAkB,OAAO,CAAC,EAC3B,YAAY,OAAO;AAEpE,QACE,qBAAC;EAAI,WAAW,UAAU;;GAExB,oBAACC;IACC,WAAW,UAAU;IACrB,OAAO,kBAAkB;IACnB;KACN;GAED,OAAO,SAEN,oBAAC;IAAI,WAAW,GAAG,UAAU,YAAY;cAEvC,oBAACC;KACS;KACF;KACA;KACI;eAGV,oBAAC;MAAG,WAAW,UAAU;MAAM,eAAa;gBAEzC,OAAO,KAAK,OAAO,UAAU;OAC5B,MAAM,cAAc,OAChB,GAAG,KAAK,GAAG,MAAM,GAAG,iBACpB,GAAG,KAAK,GAAG;OACf,MAAM,gBAAgB,GAAG,OAAO,GAAG;OAGnC,MAAM,iBAA2C;QAC/C,cAAc;AACZ,gBAAO,oBAAoB;;QAE7B,iBAAiB;SAEf,MAAM,eADS,UAAU,KAAK,CACa;SAC3C,MAAM,YAAY,OACd,GAAG,eAAe,cAAc,GAChC;AACJ,gBAAO,QAAQ,GAAG,UAAU;;QAE9B,cAAc;AACZ,gBAAO,QAAQ,GAAG,oBAAoB;;QAExC,cAAc;AACZ,gBAAO,MAAM;;QAEhB;AAED,cACE,oBAACC;QAEY;QACO;QACP;QACU;QACb;QACR,IAAI,MAAM;QACH;QACM;QACb,kBAAkB;QAClB,SAAS;QACC;QACV,QAAQ;kBAEP,SAAS;SACR;SACA,QAAQ,OAAO;SACf,SAAS;SACT,MAAM;SACN,QAAQ;SACT,CAAC;UApBG,MAAM,GAqBO;QAEtB;OACC;MACO;KACV,GACJ;GAGJ,oBAACC,qCAAgC,OAAQ;GAGzC,oBAACC;IACmB;IAClB,WAAW,UAAU;IACrB,QAAQ,GAAG,OAAO;IAClB,eAAe;AACb,YAAO,oBAAoB;;KAE7B;;GACE;;AAIV,2BAAe;;;;AC1Of,yBAAeC"}
+{"version":3,"file":"FieldArray-omRNwxgy.js","names":["SortDragHandle","Grid","ElementActionsMenu","ElementRemoveButton","FieldValidationError","FieldArrayLabel","SortContext","FieldArrayElement","FieldArrayValidationError","ElementAppendButton","FieldArray"],"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.2, 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 (for some reason it's hidden by default) and add padding\n              'block px-3 py-2',\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 @@
-const require_FieldCard = require('../FieldCard-NKF358fO.cjs');
+const require_FieldCard = require('../FieldCard-Dt6QU7o7.cjs');
 
 exports.FieldCard = require_FieldCard.FieldCard_default;
 exports.fieldCardVariants = require_FieldCard.fieldCardVariants;

package/dist/FieldCard/index.d.cts

@@ -1,2 +1,2 @@
-import { n as FieldCardProps, r as fieldCardVariants, t as FieldCard } from "../index-DRij_w43.cjs";
+import { n as FieldCardProps, r as fieldCardVariants, t as FieldCard } from "../index-CiF2KXB7.cjs";
 export { FieldCard, FieldCardProps, fieldCardVariants };

package/dist/FieldCard/index.d.ts

@@ -1,2 +1,2 @@
-import { n as FieldCardProps, r as fieldCardVariants, t as FieldCard } from "../index--E2ZsMya.js";
+import { n as FieldCardProps, r as fieldCardVariants, t as FieldCard } from "../index-CTp4vdDb.js";
 export { FieldCard, FieldCardProps, fieldCardVariants };

package/dist/FieldCard/index.js

@@ -1,3 +1,3 @@
-import { n as fieldCardVariants, t as FieldCard_default } from "../FieldCard-C1MCSbPW.js";
+import { n as fieldCardVariants, t as FieldCard_default } from "../FieldCard-Dyi-2qr6.js";
 
 export { FieldCard_default as FieldCard, fieldCardVariants };

package/dist/{FieldCard-NKF358fO.cjs → FieldCard-Dt6QU7o7.cjs}

@@ -1,6 +1,6 @@
-const require_FormContext = require('./FormContext-Bb6d8hdG.cjs');
-const require_FieldValidationError = require('./FieldValidationError-CE8R8qry.cjs');
-const require_useUniformField = require('./useUniformField-Bj23Kvbs.cjs');
+const require_FormContext = require('./FormContext-Lw4YL4-B.cjs');
+const require_FieldValidationError = require('./FieldValidationError-D64j5gnH.cjs');
+const require_useUniformField = require('./useUniformField-D6fwSjrH.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _fuf_stack_pixel_motion = require("@fuf-stack/pixel-motion");
@@ -130,4 +130,4 @@ Object.defineProperty(exports, 'fieldCardVariants', {
     return fieldCardVariants;
   }
 });
-//# sourceMappingURL=FieldCard-NKF358fO.cjs.map
+//# sourceMappingURL=FieldCard-Dt6QU7o7.cjs.map

package/dist/{FieldCard-NKF358fO.cjs.map → FieldCard-Dt6QU7o7.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldCard-NKF358fO.cjs","names":["useUniformField","AnimatePresence","motion","FieldValidationError","useUniformField","FieldCardValidationError"],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["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 FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: 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 */\nconst FieldCardValidationError = ({\n  className = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\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-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.2, 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 {...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 FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\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    ],\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    ],\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\n      'block px-3 py-2',\n    ],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger',\n        label: 'border-danger text-danger',\n        errorFooter: 'border-danger',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\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, invalid, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: hasErrors });\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          className={cn(getLabelProps()?.className, className.label)}\n          role=\"heading\"\n        >\n          {label}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors */}\n      <FieldCardValidationError className={className.errorFooter} name={name} />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,4BAA4B,EAChC,YAAY,QACZ,WACmC;CACnC,MAAM,EACJ,OACA,sBACA,uBACA,SACA,WACEA,wCAAgB,EAClB,MACD,CAAC;CAGF,MAAM,kEAAqC;CAG3C,MAAM,YAAY,WAAW,OAAO;AAEpC,QACE,2CAACC;EAAgB,SAAS,CAAC;YACxB,YACC,2CAACC,+BAAO;GAEN,MAAM,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAG;GAC9D,SAAS,mBAAmB,QAAQ;IAAE,QAAQ;IAAG,SAAS;IAAG;GAC7D,OAAO,EAAE,UAAU,UAAU;GAC7B,YAAY;IAAE,UAAU;IAAK,MAAM;IAAW;GAC9C,SACE,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAQ;aAG/D,2CAAC;IACC,GAAI,uBAAuB;IAC3B,0CAAc,uBAAuB,EAAE,WAAW,UAAU;cAE5D,2CAAC;KAAI,GAAI,sBAAsB;eAC7B,2CAACC;MAEC,OAAO,MAAM;MACL;OACR;MACE;KACF;KApBF,oBAqBO,GACX;GACY;;AAItB,uCAAe;;;;AClEf,MAAa,mDAAuB;CAClC,OAAO;EAEL,MAAM,CAEJ,mDACD;EAED,OAAO;GAEL;GAEA;GAEA;GACD;EAED,SAAS,CAEP,OAEA,aACD;EAED,aAAa,CACX,YAEA,kBACD;EACF;CACD,UAAU,EACR,SAAS;EACP,MAAM;GACJ,MAAM;GACN,OAAO;GACP,aAAa;GACd;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACP,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,SAAS,OACV;CACF,CAAC;;;;;;;;;;AA0BF,MAAM,aAAa,EACjB,UACA,WAAW,aAAa,QACxB,MACA,GAAG,wBACiB;CACpB,MAAM,EAAE,OAAO,eAAe,SAAS,UAAUC,wCAAgB;EAC/D;EACA,GAAG;EACJ,CAAC;CAOF,MAAM,6DADW,kBAAkB,EAAE,SAHnB,WAAW,OAAO,SAGqB,CAAC,EACT,YAAY,OAAO;AAEpE,QACE,4CAAC;EAAI,WAAW,UAAU;;GAEvB,QACC,2CAAC;IACC,GAAI,eAAe;IACnB,cAAY;IACZ,0CAAc,eAAe,EAAE,WAAW,UAAU,MAAM;IAC1D,MAAK;cAEJ;KACG,GACJ;GAGJ,2CAAC;IAAI,WAAW,UAAU;IAAU;KAAe;GAGnD,2CAACC;IAAyB,WAAW,UAAU;IAAmB;KAAQ;;GACtE;;AAIV,wBAAe"}
+{"version":3,"file":"FieldCard-Dt6QU7o7.cjs","names":["useUniformField","AnimatePresence","motion","FieldValidationError","useUniformField","FieldCardValidationError"],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["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 FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: 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 */\nconst FieldCardValidationError = ({\n  className = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\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-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.2, 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 {...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 FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\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    ],\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    ],\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\n      'block px-3 py-2',\n    ],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger',\n        label: 'border-danger text-danger',\n        errorFooter: 'border-danger',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\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, invalid, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: hasErrors });\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          className={cn(getLabelProps()?.className, className.label)}\n          role=\"heading\"\n        >\n          {label}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors */}\n      <FieldCardValidationError className={className.errorFooter} name={name} />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,4BAA4B,EAChC,YAAY,QACZ,WACmC;CACnC,MAAM,EACJ,OACA,sBACA,uBACA,SACA,WACEA,wCAAgB,EAClB,MACD,CAAC;CAGF,MAAM,kEAAqC;CAG3C,MAAM,YAAY,WAAW,OAAO;AAEpC,QACE,2CAACC;EAAgB,SAAS,CAAC;YACxB,YACC,2CAACC,+BAAO;GAEN,MAAM,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAG;GAC9D,SAAS,mBAAmB,QAAQ;IAAE,QAAQ;IAAG,SAAS;IAAG;GAC7D,OAAO,EAAE,UAAU,UAAU;GAC7B,YAAY;IAAE,UAAU;IAAK,MAAM;IAAW;GAC9C,SACE,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAQ;aAG/D,2CAAC;IACC,GAAI,uBAAuB;IAC3B,0CAAc,uBAAuB,EAAE,WAAW,UAAU;cAE5D,2CAAC;KAAI,GAAI,sBAAsB;eAC7B,2CAACC;MAEC,OAAO,MAAM;MACL;OACR;MACE;KACF;KApBF,oBAqBO,GACX;GACY;;AAItB,uCAAe;;;;AClEf,MAAa,mDAAuB;CAClC,OAAO;EAEL,MAAM,CAEJ,mDACD;EAED,OAAO;GAEL;GAEA;GAEA;GACD;EAED,SAAS,CAEP,OAEA,aACD;EAED,aAAa,CACX,YAEA,kBACD;EACF;CACD,UAAU,EACR,SAAS;EACP,MAAM;GACJ,MAAM;GACN,OAAO;GACP,aAAa;GACd;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACP,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,SAAS,OACV;CACF,CAAC;;;;;;;;;;AA0BF,MAAM,aAAa,EACjB,UACA,WAAW,aAAa,QACxB,MACA,GAAG,wBACiB;CACpB,MAAM,EAAE,OAAO,eAAe,SAAS,UAAUC,wCAAgB;EAC/D;EACA,GAAG;EACJ,CAAC;CAOF,MAAM,6DADW,kBAAkB,EAAE,SAHnB,WAAW,OAAO,SAGqB,CAAC,EACT,YAAY,OAAO;AAEpE,QACE,4CAAC;EAAI,WAAW,UAAU;;GAEvB,QACC,2CAAC;IACC,GAAI,eAAe;IACnB,cAAY;IACZ,0CAAc,eAAe,EAAE,WAAW,UAAU,MAAM;IAC1D,MAAK;cAEJ;KACG,GACJ;GAGJ,2CAAC;IAAI,WAAW,UAAU;IAAU;KAAe;GAGnD,2CAACC;IAAyB,WAAW,UAAU;IAAmB;KAAQ;;GACtE;;AAIV,wBAAe"}

package/dist/{FieldCard-C1MCSbPW.js → FieldCard-Dyi-2qr6.js}

@@ -1,5 +1,5 @@
-import { n as FieldValidationError_default } from "./FieldValidationError-1hiDEFew.js";
-import { t as useUniformField } from "./useUniformField-gU4qYUwL.js";
+import { n as FieldValidationError_default } from "./FieldValidationError-BYwitb_B.js";
+import { t as useUniformField } from "./useUniformField-BKVVns0E.js";
 import { cn, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion, useReducedMotion } from "@fuf-stack/pixel-motion";
@@ -118,4 +118,4 @@ var FieldCard_default = FieldCard;
 
 //#endregion
 export { fieldCardVariants as n, FieldCard_default as t };
-//# sourceMappingURL=FieldCard-C1MCSbPW.js.map
+//# sourceMappingURL=FieldCard-Dyi-2qr6.js.map

package/dist/{FieldCard-C1MCSbPW.js.map → FieldCard-Dyi-2qr6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldCard-C1MCSbPW.js","names":["FieldValidationError","FieldCardValidationError"],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["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 FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: 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 */\nconst FieldCardValidationError = ({\n  className = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\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-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.2, 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 {...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 FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\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    ],\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    ],\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\n      'block px-3 py-2',\n    ],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger',\n        label: 'border-danger text-danger',\n        errorFooter: 'border-danger',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\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, invalid, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: hasErrors });\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          className={cn(getLabelProps()?.className, className.label)}\n          role=\"heading\"\n        >\n          {label}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors */}\n      <FieldCardValidationError className={className.errorFooter} name={name} />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,4BAA4B,EAChC,YAAY,QACZ,WACmC;CACnC,MAAM,EACJ,OACA,sBACA,uBACA,SACA,WACE,gBAAgB,EAClB,MACD,CAAC;CAGF,MAAM,mBAAmB,kBAAkB;CAG3C,MAAM,YAAY,WAAW,OAAO;AAEpC,QACE,oBAAC;EAAgB,SAAS,CAAC;YACxB,YACC,oBAAC,OAAO;GAEN,MAAM,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAG;GAC9D,SAAS,mBAAmB,QAAQ;IAAE,QAAQ;IAAG,SAAS;IAAG;GAC7D,OAAO,EAAE,UAAU,UAAU;GAC7B,YAAY;IAAE,UAAU;IAAK,MAAM;IAAW;GAC9C,SACE,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAQ;aAG/D,oBAAC;IACC,GAAI,uBAAuB;IAC3B,WAAW,GAAG,uBAAuB,EAAE,WAAW,UAAU;cAE5D,oBAAC;KAAI,GAAI,sBAAsB;eAC7B,oBAACA;MAEC,OAAO,MAAM;MACL;OACR;MACE;KACF;KApBF,oBAqBO,GACX;GACY;;AAItB,uCAAe;;;;AClEf,MAAa,oBAAoB,GAAG;CAClC,OAAO;EAEL,MAAM,CAEJ,mDACD;EAED,OAAO;GAEL;GAEA;GAEA;GACD;EAED,SAAS,CAEP,OAEA,aACD;EAED,aAAa,CACX,YAEA,kBACD;EACF;CACD,UAAU,EACR,SAAS;EACP,MAAM;GACJ,MAAM;GACN,OAAO;GACP,aAAa;GACd;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACP,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,SAAS,OACV;CACF,CAAC;;;;;;;;;;AA0BF,MAAM,aAAa,EACjB,UACA,WAAW,aAAa,QACxB,MACA,GAAG,wBACiB;CACpB,MAAM,EAAE,OAAO,eAAe,SAAS,UAAU,gBAAgB;EAC/D;EACA,GAAG;EACJ,CAAC;CAOF,MAAM,YAAY,qBADD,kBAAkB,EAAE,SAHnB,WAAW,OAAO,SAGqB,CAAC,EACT,YAAY,OAAO;AAEpE,QACE,qBAAC;EAAI,WAAW,UAAU;;GAEvB,QACC,oBAAC;IACC,GAAI,eAAe;IACnB,cAAY;IACZ,WAAW,GAAG,eAAe,EAAE,WAAW,UAAU,MAAM;IAC1D,MAAK;cAEJ;KACG,GACJ;GAGJ,oBAAC;IAAI,WAAW,UAAU;IAAU;KAAe;GAGnD,oBAACC;IAAyB,WAAW,UAAU;IAAmB;KAAQ;;GACtE;;AAIV,wBAAe"}
+{"version":3,"file":"FieldCard-Dyi-2qr6.js","names":["FieldValidationError","FieldCardValidationError"],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["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 FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: 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 */\nconst FieldCardValidationError = ({\n  className = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\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-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.2, 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 {...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 FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\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    ],\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    ],\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\n      'block px-3 py-2',\n    ],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger',\n        label: 'border-danger text-danger',\n        errorFooter: 'border-danger',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\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, invalid, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = invalid && error?._errors;\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: hasErrors });\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          className={cn(getLabelProps()?.className, className.label)}\n          role=\"heading\"\n        >\n          {label}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors */}\n      <FieldCardValidationError className={className.errorFooter} name={name} />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,4BAA4B,EAChC,YAAY,QACZ,WACmC;CACnC,MAAM,EACJ,OACA,sBACA,uBACA,SACA,WACE,gBAAgB,EAClB,MACD,CAAC;CAGF,MAAM,mBAAmB,kBAAkB;CAG3C,MAAM,YAAY,WAAW,OAAO;AAEpC,QACE,oBAAC;EAAgB,SAAS,CAAC;YACxB,YACC,oBAAC,OAAO;GAEN,MAAM,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAG;GAC9D,SAAS,mBAAmB,QAAQ;IAAE,QAAQ;IAAG,SAAS;IAAG;GAC7D,OAAO,EAAE,UAAU,UAAU;GAC7B,YAAY;IAAE,UAAU;IAAK,MAAM;IAAW;GAC9C,SACE,mBAAmB,SAAY;IAAE,SAAS;IAAG,QAAQ;IAAQ;aAG/D,oBAAC;IACC,GAAI,uBAAuB;IAC3B,WAAW,GAAG,uBAAuB,EAAE,WAAW,UAAU;cAE5D,oBAAC;KAAI,GAAI,sBAAsB;eAC7B,oBAACA;MAEC,OAAO,MAAM;MACL;OACR;MACE;KACF;KApBF,oBAqBO,GACX;GACY;;AAItB,uCAAe;;;;AClEf,MAAa,oBAAoB,GAAG;CAClC,OAAO;EAEL,MAAM,CAEJ,mDACD;EAED,OAAO;GAEL;GAEA;GAEA;GACD;EAED,SAAS,CAEP,OAEA,aACD;EAED,aAAa,CACX,YAEA,kBACD;EACF;CACD,UAAU,EACR,SAAS;EACP,MAAM;GACJ,MAAM;GACN,OAAO;GACP,aAAa;GACd;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACP,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,SAAS,OACV;CACF,CAAC;;;;;;;;;;AA0BF,MAAM,aAAa,EACjB,UACA,WAAW,aAAa,QACxB,MACA,GAAG,wBACiB;CACpB,MAAM,EAAE,OAAO,eAAe,SAAS,UAAU,gBAAgB;EAC/D;EACA,GAAG;EACJ,CAAC;CAOF,MAAM,YAAY,qBADD,kBAAkB,EAAE,SAHnB,WAAW,OAAO,SAGqB,CAAC,EACT,YAAY,OAAO;AAEpE,QACE,qBAAC;EAAI,WAAW,UAAU;;GAEvB,QACC,oBAAC;IACC,GAAI,eAAe;IACnB,cAAY;IACZ,WAAW,GAAG,eAAe,EAAE,WAAW,UAAU,MAAM;IAC1D,MAAK;cAEJ;KACG,GACJ;GAGJ,oBAAC;IAAI,WAAW,UAAU;IAAU;KAAe;GAGnD,oBAACC;IAAyB,WAAW,UAAU;IAAmB;KAAQ;;GACtE;;AAIV,wBAAe"}

package/dist/{FieldCopyTestIdButton-BSYcSo2o.cjs → FieldCopyTestIdButton-By-hEZgA.cjs}

@@ -1,4 +1,4 @@
-const require_FormContext = require('./FormContext-Bb6d8hdG.cjs');
+const require_FormContext = require('./FormContext-Lw4YL4-B.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let _fuf_stack_pixels = require("@fuf-stack/pixels");
 let react_icons_fa6 = require("react-icons/fa6");
@@ -38,4 +38,4 @@ Object.defineProperty(exports, 'FieldCopyTestIdButton_default$1', {
     return FieldCopyTestIdButton_default$1;
   }
 });
-//# sourceMappingURL=FieldCopyTestIdButton-BSYcSo2o.cjs.map
+//# sourceMappingURL=FieldCopyTestIdButton-By-hEZgA.cjs.map

package/dist/{FieldCopyTestIdButton-BSYcSo2o.cjs.map → FieldCopyTestIdButton-By-hEZgA.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldCopyTestIdButton-BSYcSo2o.cjs","names":["Button","FaBullseye","FieldCopyTestIdButton"],"sources":["../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"sourcesContent":["import { FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\nconst FieldCopyTestIdButton = ({\n  className = undefined,\n  testId,\n}: FieldCopyTestIdButtonProps) => {\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(testId).catch((err) => {\n      console.error('Error copying TestId to clipboard', err);\n    });\n  };\n\n  return (\n    <Button\n      className={cn(className, 'pointer-events-auto')}\n      icon={<FaBullseye />}\n      onClick={copyToClipboard}\n      size=\"sm\"\n      variant=\"light\"\n    />\n  );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"],"mappings":";;;;;;;AAYA,MAAM,yBAAyB,EAC7B,YAAY,QACZ,aACgC;CAChC,MAAM,wBAAwB;AAC5B,YAAU,UAAU,UAAU,OAAO,CAAC,OAAO,QAAQ;AACnD,WAAQ,MAAM,qCAAqC,IAAI;IACvD;;AAGJ,QACE,2CAACA;EACC,0CAAc,WAAW,sBAAsB;EAC/C,MAAM,2CAACC,+BAAa;EACpB,SAAS;EACT,MAAK;EACL,SAAQ;GACR;;AAGN,sCAAe;;;;AC1Bf,oCAAeC"}
+{"version":3,"file":"FieldCopyTestIdButton-By-hEZgA.cjs","names":["Button","FaBullseye","FieldCopyTestIdButton"],"sources":["../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"sourcesContent":["import { FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\nconst FieldCopyTestIdButton = ({\n  className = undefined,\n  testId,\n}: FieldCopyTestIdButtonProps) => {\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(testId).catch((err) => {\n      console.error('Error copying TestId to clipboard', err);\n    });\n  };\n\n  return (\n    <Button\n      className={cn(className, 'pointer-events-auto')}\n      icon={<FaBullseye />}\n      onClick={copyToClipboard}\n      size=\"sm\"\n      variant=\"light\"\n    />\n  );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"],"mappings":";;;;;;;AAYA,MAAM,yBAAyB,EAC7B,YAAY,QACZ,aACgC;CAChC,MAAM,wBAAwB;AAC5B,YAAU,UAAU,UAAU,OAAO,CAAC,OAAO,QAAQ;AACnD,WAAQ,MAAM,qCAAqC,IAAI;IACvD;;AAGJ,QACE,2CAACA;EACC,0CAAc,WAAW,sBAAsB;EAC/C,MAAM,2CAACC,+BAAa;EACpB,SAAS;EACT,MAAK;EACL,SAAQ;GACR;;AAGN,sCAAe;;;;AC1Bf,oCAAeC"}

package/dist/{FieldCopyTestIdButton-DWPCDJ-s.js → FieldCopyTestIdButton-D9f1B-VS.js}

@@ -26,4 +26,4 @@ var FieldCopyTestIdButton_default = FieldCopyTestIdButton_default$1;
 
 //#endregion
 export { FieldCopyTestIdButton_default$1 as n, FieldCopyTestIdButton_default as t };
-//# sourceMappingURL=FieldCopyTestIdButton-DWPCDJ-s.js.map
+//# sourceMappingURL=FieldCopyTestIdButton-D9f1B-VS.js.map

package/dist/{FieldCopyTestIdButton-DWPCDJ-s.js.map → FieldCopyTestIdButton-D9f1B-VS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldCopyTestIdButton-DWPCDJ-s.js","names":["FieldCopyTestIdButton"],"sources":["../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"sourcesContent":["import { FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\nconst FieldCopyTestIdButton = ({\n  className = undefined,\n  testId,\n}: FieldCopyTestIdButtonProps) => {\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(testId).catch((err) => {\n      console.error('Error copying TestId to clipboard', err);\n    });\n  };\n\n  return (\n    <Button\n      className={cn(className, 'pointer-events-auto')}\n      icon={<FaBullseye />}\n      onClick={copyToClipboard}\n      size=\"sm\"\n      variant=\"light\"\n    />\n  );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"],"mappings":";;;;;;AAYA,MAAM,yBAAyB,EAC7B,YAAY,QACZ,aACgC;CAChC,MAAM,wBAAwB;AAC5B,YAAU,UAAU,UAAU,OAAO,CAAC,OAAO,QAAQ;AACnD,WAAQ,MAAM,qCAAqC,IAAI;IACvD;;AAGJ,QACE,oBAAC;EACC,WAAW,GAAG,WAAW,sBAAsB;EAC/C,MAAM,oBAAC,eAAa;EACpB,SAAS;EACT,MAAK;EACL,SAAQ;GACR;;AAGN,sCAAe;;;;AC1Bf,oCAAeA"}
+{"version":3,"file":"FieldCopyTestIdButton-D9f1B-VS.js","names":["FieldCopyTestIdButton"],"sources":["../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"sourcesContent":["import { FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\nconst FieldCopyTestIdButton = ({\n  className = undefined,\n  testId,\n}: FieldCopyTestIdButtonProps) => {\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(testId).catch((err) => {\n      console.error('Error copying TestId to clipboard', err);\n    });\n  };\n\n  return (\n    <Button\n      className={cn(className, 'pointer-events-auto')}\n      icon={<FaBullseye />}\n      onClick={copyToClipboard}\n      size=\"sm\"\n      variant=\"light\"\n    />\n  );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"],"mappings":";;;;;;AAYA,MAAM,yBAAyB,EAC7B,YAAY,QACZ,aACgC;CAChC,MAAM,wBAAwB;AAC5B,YAAU,UAAU,UAAU,OAAO,CAAC,OAAO,QAAQ;AACnD,WAAQ,MAAM,qCAAqC,IAAI;IACvD;;AAGJ,QACE,oBAAC;EACC,WAAW,GAAG,WAAW,sBAAsB;EAC/C,MAAM,oBAAC,eAAa;EACpB,SAAS;EACT,MAAK;EACL,SAAQ;GACR;;AAGN,sCAAe;;;;AC1Bf,oCAAeA"}

package/dist/{FieldValidationError-1hiDEFew.js → FieldValidationError-BYwitb_B.js}

@@ -50,4 +50,4 @@ var FieldValidationError_default = FieldValidationError_default$1;
 
 //#endregion
 export { FieldValidationError_default$1 as n, FieldValidationError_default as t };
-//# sourceMappingURL=FieldValidationError-1hiDEFew.js.map
+//# sourceMappingURL=FieldValidationError-BYwitb_B.js.map

package/dist/{FieldValidationError-1hiDEFew.js.map → FieldValidationError-BYwitb_B.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldValidationError-1hiDEFew.js","names":["FieldValidationError"],"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nexport interface FieldValidationErrorProps {\n  /** CSS class name */\n  className?: string;\n  /** Field errors */\n  error?: FieldError[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n  className = undefined,\n  error = undefined,\n  testId,\n}: FieldValidationErrorProps) => {\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  return (\n    <ul\n      aria-label={`Validation errors of field ${testId}`}\n      className={className}\n      data-testid={slugify(`${testId}_error`)}\n    >\n      <AnimatePresence initial={!disableAnimation}>\n        {error?.map(({ message }, i) => {\n          return (\n            <motion.li\n              key={slugify(`${testId}_error_${i}`)}\n              exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n              initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n              style={{ overflow: 'hidden' }}\n              transition={{ duration: 0.2, ease: 'circOut' }}\n              animate={\n                disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n              }\n            >\n              {/* wrap in div to apply padding and animation does not jump */}\n              <div className=\"px-1 pt-1\">{message}</div>\n            </motion.li>\n          );\n        })}\n      </AnimatePresence>\n    </ul>\n  );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";;;;;;;;AAqBA,MAAM,wBAAwB,EAC5B,YAAY,QACZ,QAAQ,QACR,aAC+B;CAE/B,MAAM,mBAAmB,kBAAkB;AAE3C,QACE,oBAAC;EACC,cAAY,8BAA8B;EAC/B;EACX,eAAa,QAAQ,GAAG,OAAO,QAAQ;YAEvC,oBAAC;GAAgB,SAAS,CAAC;aACxB,OAAO,KAAK,EAAE,WAAW,MAAM;AAC9B,WACE,oBAAC,OAAO;KAEN,MAAM,mBAAmB,SAAY;MAAE,SAAS;MAAG,QAAQ;MAAG;KAC9D,SAAS,mBAAmB,QAAQ;MAAE,QAAQ;MAAG,SAAS;MAAG;KAC7D,OAAO,EAAE,UAAU,UAAU;KAC7B,YAAY;MAAE,UAAU;MAAK,MAAM;MAAW;KAC9C,SACE,mBAAmB,SAAY;MAAE,SAAS;MAAG,QAAQ;MAAQ;eAI/D,oBAAC;MAAI,WAAU;gBAAa;OAAc;OAVrC,QAAQ,GAAG,OAAO,SAAS,IAAI,CAW1B;KAEd;IACc;GACf;;AAIT,qCAAe;;;;ACpDf,mCAAeA"}
+{"version":3,"file":"FieldValidationError-BYwitb_B.js","names":["FieldValidationError"],"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nexport interface FieldValidationErrorProps {\n  /** CSS class name */\n  className?: string;\n  /** Field errors */\n  error?: FieldError[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n  className = undefined,\n  error = undefined,\n  testId,\n}: FieldValidationErrorProps) => {\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  return (\n    <ul\n      aria-label={`Validation errors of field ${testId}`}\n      className={className}\n      data-testid={slugify(`${testId}_error`)}\n    >\n      <AnimatePresence initial={!disableAnimation}>\n        {error?.map(({ message }, i) => {\n          return (\n            <motion.li\n              key={slugify(`${testId}_error_${i}`)}\n              exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n              initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n              style={{ overflow: 'hidden' }}\n              transition={{ duration: 0.2, ease: 'circOut' }}\n              animate={\n                disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n              }\n            >\n              {/* wrap in div to apply padding and animation does not jump */}\n              <div className=\"px-1 pt-1\">{message}</div>\n            </motion.li>\n          );\n        })}\n      </AnimatePresence>\n    </ul>\n  );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";;;;;;;;AAqBA,MAAM,wBAAwB,EAC5B,YAAY,QACZ,QAAQ,QACR,aAC+B;CAE/B,MAAM,mBAAmB,kBAAkB;AAE3C,QACE,oBAAC;EACC,cAAY,8BAA8B;EAC/B;EACX,eAAa,QAAQ,GAAG,OAAO,QAAQ;YAEvC,oBAAC;GAAgB,SAAS,CAAC;aACxB,OAAO,KAAK,EAAE,WAAW,MAAM;AAC9B,WACE,oBAAC,OAAO;KAEN,MAAM,mBAAmB,SAAY;MAAE,SAAS;MAAG,QAAQ;MAAG;KAC9D,SAAS,mBAAmB,QAAQ;MAAE,QAAQ;MAAG,SAAS;MAAG;KAC7D,OAAO,EAAE,UAAU,UAAU;KAC7B,YAAY;MAAE,UAAU;MAAK,MAAM;MAAW;KAC9C,SACE,mBAAmB,SAAY;MAAE,SAAS;MAAG,QAAQ;MAAQ;eAI/D,oBAAC;MAAI,WAAU;gBAAa;OAAc;OAVrC,QAAQ,GAAG,OAAO,SAAS,IAAI,CAW1B;KAEd;IACc;GACf;;AAIT,qCAAe;;;;ACpDf,mCAAeA"}

package/dist/{FieldValidationError-CE8R8qry.cjs → FieldValidationError-D64j5gnH.cjs}

@@ -1,4 +1,4 @@
-const require_FormContext = require('./FormContext-Bb6d8hdG.cjs');
+const require_FormContext = require('./FormContext-Lw4YL4-B.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _fuf_stack_pixel_motion = require("@fuf-stack/pixel-motion");
@@ -62,4 +62,4 @@ Object.defineProperty(exports, 'FieldValidationError_default$1', {
     return FieldValidationError_default$1;
   }
 });
-//# sourceMappingURL=FieldValidationError-CE8R8qry.cjs.map
+//# sourceMappingURL=FieldValidationError-D64j5gnH.cjs.map

package/dist/{FieldValidationError-CE8R8qry.cjs.map → FieldValidationError-D64j5gnH.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldValidationError-CE8R8qry.cjs","names":["AnimatePresence","motion","FieldValidationError"],"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nexport interface FieldValidationErrorProps {\n  /** CSS class name */\n  className?: string;\n  /** Field errors */\n  error?: FieldError[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n  className = undefined,\n  error = undefined,\n  testId,\n}: FieldValidationErrorProps) => {\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  return (\n    <ul\n      aria-label={`Validation errors of field ${testId}`}\n      className={className}\n      data-testid={slugify(`${testId}_error`)}\n    >\n      <AnimatePresence initial={!disableAnimation}>\n        {error?.map(({ message }, i) => {\n          return (\n            <motion.li\n              key={slugify(`${testId}_error_${i}`)}\n              exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n              initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n              style={{ overflow: 'hidden' }}\n              transition={{ duration: 0.2, ease: 'circOut' }}\n              animate={\n                disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n              }\n            >\n              {/* wrap in div to apply padding and animation does not jump */}\n              <div className=\"px-1 pt-1\">{message}</div>\n            </motion.li>\n          );\n        })}\n      </AnimatePresence>\n    </ul>\n  );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";;;;;;;;;AAqBA,MAAM,wBAAwB,EAC5B,YAAY,QACZ,QAAQ,QACR,aAC+B;CAE/B,MAAM,kEAAqC;AAE3C,QACE,2CAAC;EACC,cAAY,8BAA8B;EAC/B;EACX,mDAAqB,GAAG,OAAO,QAAQ;YAEvC,2CAACA;GAAgB,SAAS,CAAC;aACxB,OAAO,KAAK,EAAE,WAAW,MAAM;AAC9B,WACE,2CAACC,+BAAO;KAEN,MAAM,mBAAmB,SAAY;MAAE,SAAS;MAAG,QAAQ;MAAG;KAC9D,SAAS,mBAAmB,QAAQ;MAAE,QAAQ;MAAG,SAAS;MAAG;KAC7D,OAAO,EAAE,UAAU,UAAU;KAC7B,YAAY;MAAE,UAAU;MAAK,MAAM;MAAW;KAC9C,SACE,mBAAmB,SAAY;MAAE,SAAS;MAAG,QAAQ;MAAQ;eAI/D,2CAAC;MAAI,WAAU;gBAAa;OAAc;2CAV7B,GAAG,OAAO,SAAS,IAAI,CAW1B;KAEd;IACc;GACf;;AAIT,qCAAe;;;;ACpDf,mCAAeC"}
+{"version":3,"file":"FieldValidationError-D64j5gnH.cjs","names":["AnimatePresence","motion","FieldValidationError"],"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nexport interface FieldValidationErrorProps {\n  /** CSS class name */\n  className?: string;\n  /** Field errors */\n  error?: FieldError[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n  className = undefined,\n  error = undefined,\n  testId,\n}: FieldValidationErrorProps) => {\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  return (\n    <ul\n      aria-label={`Validation errors of field ${testId}`}\n      className={className}\n      data-testid={slugify(`${testId}_error`)}\n    >\n      <AnimatePresence initial={!disableAnimation}>\n        {error?.map(({ message }, i) => {\n          return (\n            <motion.li\n              key={slugify(`${testId}_error_${i}`)}\n              exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n              initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n              style={{ overflow: 'hidden' }}\n              transition={{ duration: 0.2, ease: 'circOut' }}\n              animate={\n                disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n              }\n            >\n              {/* wrap in div to apply padding and animation does not jump */}\n              <div className=\"px-1 pt-1\">{message}</div>\n            </motion.li>\n          );\n        })}\n      </AnimatePresence>\n    </ul>\n  );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";;;;;;;;;AAqBA,MAAM,wBAAwB,EAC5B,YAAY,QACZ,QAAQ,QACR,aAC+B;CAE/B,MAAM,kEAAqC;AAE3C,QACE,2CAAC;EACC,cAAY,8BAA8B;EAC/B;EACX,mDAAqB,GAAG,OAAO,QAAQ;YAEvC,2CAACA;GAAgB,SAAS,CAAC;aACxB,OAAO,KAAK,EAAE,WAAW,MAAM;AAC9B,WACE,2CAACC,+BAAO;KAEN,MAAM,mBAAmB,SAAY;MAAE,SAAS;MAAG,QAAQ;MAAG;KAC9D,SAAS,mBAAmB,QAAQ;MAAE,QAAQ;MAAG,SAAS;MAAG;KAC7D,OAAO,EAAE,UAAU,UAAU;KAC7B,YAAY;MAAE,UAAU;MAAK,MAAM;MAAW;KAC9C,SACE,mBAAmB,SAAY;MAAE,SAAS;MAAG,QAAQ;MAAQ;eAI/D,2CAAC;MAAI,WAAU;gBAAa;OAAc;2CAV7B,GAAG,OAAO,SAAS,IAAI,CAW1B;KAEd;IACc;GACf;;AAIT,qCAAe;;;;ACpDf,mCAAeC"}

package/dist/Form/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_Form = require('../Form-BsD69fql.cjs');
+const require_Form = require('../Form-CvnnGF45.cjs');
 
 exports.Form = require_Form.Form_default$1;
 exports.default = require_Form.Form_default;

package/dist/Form/index.d.cts

@@ -1,2 +1,2 @@
-import { n as FormProps, t as Form } from "../index-jmQP58tO.cjs";
+import { n as FormProps, t as Form } from "../index-B_aIzCcx.cjs";
 export { Form, Form as default, FormProps };

package/dist/Form/index.d.ts

@@ -1,3 +1,3 @@
 import "../FormContext-C2_WMi_v.js";
-import { n as FormProps, t as Form } from "../index-DvB46QAb.js";
+import { n as FormProps, t as Form } from "../index-1Egh73pR.js";
 export { Form, Form as default, FormProps };

package/dist/Form/index.js

@@ -1,3 +1,3 @@
-import { n as Form_default, t as Form_default$1 } from "../Form-DRNEwHsi.js";
+import { n as Form_default, t as Form_default$1 } from "../Form-B1fvbnxi.js";
 
 export { Form_default as Form, Form_default$1 as default };

package/dist/{Form-DRNEwHsi.js → Form-B1fvbnxi.js}

@@ -1,5 +1,5 @@
-import { t as FormContext_default } from "./FormContext-CN9n_KdE.js";
-import { n as useFormContext } from "./useFormContext-JCm1UR_e.js";
+import { t as FormContext_default } from "./FormContext-Dl3k1r_k.js";
+import { n as useFormContext } from "./useFormContext-BFoXZNkp.js";
 import { cn, slugify } from "@fuf-stack/pixel-utils";
 import { useEffect, useState } from "react";
 import { FaBug, FaBullseye } from "react-icons/fa6";
@@ -116,4 +116,4 @@ var Form_default = Form_default$1;
 
 //#endregion
 export { Form_default$1 as n, Form_default as t };
-//# sourceMappingURL=Form-DRNEwHsi.js.map
+//# sourceMappingURL=Form-B1fvbnxi.js.map

package/dist/{Form-DRNEwHsi.js.map → Form-B1fvbnxi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Form-DRNEwHsi.js","names":["FormProvider","FormDebugViewer","Form"],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,mBAAmB,EAAE,YAAY,aAAsC;CAC3E,MAAM,EACJ,WACA,WAAW,EAAE,SAAS,cAAc,aAAa,sBACjD,WACA,cACA,YAAY,EAAE,UACd,cACE,gBAAgB;CAEpB,MAAM,kBAAkB,cAAc;CACtC,MAAM,gBAAgB,cAAc,WAAW,cAAc;CAC7D,MAAM,mBAAmB,cAAc;CAIvC,MAAM,CAAC,QAAQ,aAAa,SAAkC,EAAE,CAAC;AAEjE,iBAAgB;AAEd,MAAI,CAAC,cACH;AAIF,YAAU,WAAW,IAAI,EAAE,CAAC;EAE5B,MAAM,eAAe,UAAU;GAC7B,WAAW,EAAE,QAAQ,MAAM;GAC3B,WAAW,UAAU;AACnB,cAAU,MAAM,UAAU,EAAE,CAAC;;GAEhC,CAAC;AAEF,eAAa;AACX,iBAAc;;IAGf,CAAC,cAAc,CAAC;AAEnB,KAAI,gBACF,QACE,oBAAC;EACC,WAAU;EACV,WAAU;EACV,MAAM,oBAAC,UAAQ;EACf,SAAQ;EACR,eAAe;AACb,gBAAa,QAAQ;;GAEvB;AAKN,KAAI,CAAC,cACH,QAAO;AAGT,QACE,qBAAC;EACC,WAAW,GAAG,UAAU;EACxB,QACE,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAK,WAAU;cAAU;KAAiB,EAC3C,oBAAC;IACC,OAAM;IACN,MAAM,oBAAC,YAAU;IACjB,MAAK;IACL,SAAQ;IACR,eAAe;AACb,kBAAa,MAAM;;KAErB;IACE;aAGR,oBAAC;GACC,WAAU;GACV,MAAM,oBAAC,eAAa;GACpB,SAAS,mBAAmB,UAAU;GACtC,eAAe;AACb,iBAAa,cAAc,UAAU,kBAAkB,QAAQ;;aAGhE,mBAAmB,oBAAoB;IACjC,EACT,oBAAC,QACC,OAAO;GACL;GACA,QAAQ,UAAU;GAClB,QAAQ;IACN;IACA;IACA;IACA;IACD;GACF,GACD;GACG;;AAIX,8BAAe;;;;ACjHf,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;AA0BzC,MAAM,QAAQ,EACZ,UACA,YAAY,QACZ,QAAQ,QACR,gBAAgB,QAChB,OAAO,QACP,UACA,SAAS,QACT,aAAa,QACb,oBAAoB,YACL;AACf,QACE,oBAACA;EACC,mBAAmB;EACJ;EACL;EACE;EACO;aAEjB,EAAE,cAAc,cAAc;AAC9B,UACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,WAAW,GAAG,QAAQ,UAAU;KAChC,sBAAoB;KACpB,eAAa,QAAQ,UAAU,QAAQ,GAAG;KACpC;KACN,UAAU;KAET;MACI,EAEN,CAAC,WAAW,CAAC,OAAO,WACnB,oBAACC,2BAAgB,WAAU,gBAAgB;KAEzC;;GAGG;;AAInB,qBAAe;;;;ACxEf,mBAAeC"}
+{"version":3,"file":"Form-B1fvbnxi.js","names":["FormProvider","FormDebugViewer","Form"],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,mBAAmB,EAAE,YAAY,aAAsC;CAC3E,MAAM,EACJ,WACA,WAAW,EAAE,SAAS,cAAc,aAAa,sBACjD,WACA,cACA,YAAY,EAAE,UACd,cACE,gBAAgB;CAEpB,MAAM,kBAAkB,cAAc;CACtC,MAAM,gBAAgB,cAAc,WAAW,cAAc;CAC7D,MAAM,mBAAmB,cAAc;CAIvC,MAAM,CAAC,QAAQ,aAAa,SAAkC,EAAE,CAAC;AAEjE,iBAAgB;AAEd,MAAI,CAAC,cACH;AAIF,YAAU,WAAW,IAAI,EAAE,CAAC;EAE5B,MAAM,eAAe,UAAU;GAC7B,WAAW,EAAE,QAAQ,MAAM;GAC3B,WAAW,UAAU;AACnB,cAAU,MAAM,UAAU,EAAE,CAAC;;GAEhC,CAAC;AAEF,eAAa;AACX,iBAAc;;IAGf,CAAC,cAAc,CAAC;AAEnB,KAAI,gBACF,QACE,oBAAC;EACC,WAAU;EACV,WAAU;EACV,MAAM,oBAAC,UAAQ;EACf,SAAQ;EACR,eAAe;AACb,gBAAa,QAAQ;;GAEvB;AAKN,KAAI,CAAC,cACH,QAAO;AAGT,QACE,qBAAC;EACC,WAAW,GAAG,UAAU;EACxB,QACE,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAK,WAAU;cAAU;KAAiB,EAC3C,oBAAC;IACC,OAAM;IACN,MAAM,oBAAC,YAAU;IACjB,MAAK;IACL,SAAQ;IACR,eAAe;AACb,kBAAa,MAAM;;KAErB;IACE;aAGR,oBAAC;GACC,WAAU;GACV,MAAM,oBAAC,eAAa;GACpB,SAAS,mBAAmB,UAAU;GACtC,eAAe;AACb,iBAAa,cAAc,UAAU,kBAAkB,QAAQ;;aAGhE,mBAAmB,oBAAoB;IACjC,EACT,oBAAC,QACC,OAAO;GACL;GACA,QAAQ,UAAU;GAClB,QAAQ;IACN;IACA;IACA;IACA;IACD;GACF,GACD;GACG;;AAIX,8BAAe;;;;ACjHf,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;AA0BzC,MAAM,QAAQ,EACZ,UACA,YAAY,QACZ,QAAQ,QACR,gBAAgB,QAChB,OAAO,QACP,UACA,SAAS,QACT,aAAa,QACb,oBAAoB,YACL;AACf,QACE,oBAACA;EACC,mBAAmB;EACJ;EACL;EACE;EACO;aAEjB,EAAE,cAAc,cAAc;AAC9B,UACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,WAAW,GAAG,QAAQ,UAAU;KAChC,sBAAoB;KACpB,eAAa,QAAQ,UAAU,QAAQ,GAAG;KACpC;KACN,UAAU;KAET;MACI,EAEN,CAAC,WAAW,CAAC,OAAO,WACnB,oBAACC,2BAAgB,WAAU,gBAAgB;KAEzC;;GAGG;;AAInB,qBAAe;;;;ACxEf,mBAAeC"}

package/dist/{Form-BsD69fql.cjs → Form-CvnnGF45.cjs}

@@ -1,5 +1,5 @@
-const require_FormContext = require('./FormContext-Bb6d8hdG.cjs');
-const require_useFormContext = require('./useFormContext-Bp0EODoO.cjs');
+const require_FormContext = require('./FormContext-Lw4YL4-B.cjs');
+const require_useFormContext = require('./useFormContext-CEr3zcL6.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react = require("react");
 let react_icons_fa6 = require("react-icons/fa6");
@@ -127,4 +127,4 @@ Object.defineProperty(exports, 'Form_default$1', {
     return Form_default$1;
   }
 });
-//# sourceMappingURL=Form-BsD69fql.cjs.map
+//# sourceMappingURL=Form-CvnnGF45.cjs.map

package/dist/{Form-BsD69fql.cjs.map → Form-CvnnGF45.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Form-BsD69fql.cjs","names":["useFormContext","Button","FaBug","Card","FaTimes","FaBullseye","Json","FormProvider","FormDebugViewer","Form"],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,mBAAmB,EAAE,YAAY,aAAsC;CAC3E,MAAM,EACJ,WACA,WAAW,EAAE,SAAS,cAAc,aAAa,sBACjD,WACA,cACA,YAAY,EAAE,UACd,cACEA,uCAAgB;CAEpB,MAAM,kBAAkB,cAAc;CACtC,MAAM,gBAAgB,cAAc,WAAW,cAAc;CAC7D,MAAM,mBAAmB,cAAc;CAIvC,MAAM,CAAC,QAAQ,iCAA+C,EAAE,CAAC;AAEjE,4BAAgB;AAEd,MAAI,CAAC,cACH;AAIF,YAAU,WAAW,IAAI,EAAE,CAAC;EAE5B,MAAM,eAAe,UAAU;GAC7B,WAAW,EAAE,QAAQ,MAAM;GAC3B,WAAW,UAAU;AACnB,cAAU,MAAM,UAAU,EAAE,CAAC;;GAEhC,CAAC;AAEF,eAAa;AACX,iBAAc;;IAGf,CAAC,cAAc,CAAC;AAEnB,KAAI,gBACF,QACE,2CAACC;EACC,WAAU;EACV,WAAU;EACV,MAAM,2CAACC,0BAAQ;EACf,SAAQ;EACR,eAAe;AACb,gBAAa,QAAQ;;GAEvB;AAKN,KAAI,CAAC,cACH,QAAO;AAGT,QACE,4CAACC;EACC,0CAAc,UAAU;EACxB,QACE,4CAAC;GAAI,WAAU;cACb,2CAAC;IAAK,WAAU;cAAU;KAAiB,EAC3C,2CAACF;IACC,OAAM;IACN,MAAM,2CAACG,2BAAU;IACjB,MAAK;IACL,SAAQ;IACR,eAAe;AACb,kBAAa,MAAM;;KAErB;IACE;aAGR,2CAACH;GACC,WAAU;GACV,MAAM,2CAACI,+BAAa;GACpB,SAAS,mBAAmB,UAAU;GACtC,eAAe;AACb,iBAAa,cAAc,UAAU,kBAAkB,QAAQ;;aAGhE,mBAAmB,oBAAoB;IACjC,EACT,2CAACC,+BACC,OAAO;GACL;GACA,QAAQ,UAAU;GAClB,QAAQ;IACN;IACA;IACA;IACA;IACD;GACF,GACD;GACG;;AAIX,8BAAe;;;;ACjHf,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;AA0BzC,MAAM,QAAQ,EACZ,UACA,YAAY,QACZ,QAAQ,QACR,gBAAgB,QAChB,OAAO,QACP,UACA,SAAS,QACT,aAAa,QACb,oBAAoB,YACL;AACf,QACE,2CAACC;EACC,mBAAmB;EACJ;EACL;EACE;EACO;aAEjB,EAAE,cAAc,cAAc;AAC9B,UACE,4CAAC;IAAI,WAAU;eACb,2CAAC;KACC,0CAAc,QAAQ,UAAU;KAChC,sBAAoB;KACpB,mDAAqB,UAAU,QAAQ,GAAG;KACpC;KACN,UAAU;KAET;MACI,EAEN,CAAC,WAAW,CAAC,OAAO,WACnB,2CAACC,2BAAgB,WAAU,gBAAgB;KAEzC;;GAGG;;AAInB,qBAAe;;;;ACxEf,mBAAeC"}
+{"version":3,"file":"Form-CvnnGF45.cjs","names":["useFormContext","Button","FaBug","Card","FaTimes","FaBullseye","Json","FormProvider","FormDebugViewer","Form"],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,mBAAmB,EAAE,YAAY,aAAsC;CAC3E,MAAM,EACJ,WACA,WAAW,EAAE,SAAS,cAAc,aAAa,sBACjD,WACA,cACA,YAAY,EAAE,UACd,cACEA,uCAAgB;CAEpB,MAAM,kBAAkB,cAAc;CACtC,MAAM,gBAAgB,cAAc,WAAW,cAAc;CAC7D,MAAM,mBAAmB,cAAc;CAIvC,MAAM,CAAC,QAAQ,iCAA+C,EAAE,CAAC;AAEjE,4BAAgB;AAEd,MAAI,CAAC,cACH;AAIF,YAAU,WAAW,IAAI,EAAE,CAAC;EAE5B,MAAM,eAAe,UAAU;GAC7B,WAAW,EAAE,QAAQ,MAAM;GAC3B,WAAW,UAAU;AACnB,cAAU,MAAM,UAAU,EAAE,CAAC;;GAEhC,CAAC;AAEF,eAAa;AACX,iBAAc;;IAGf,CAAC,cAAc,CAAC;AAEnB,KAAI,gBACF,QACE,2CAACC;EACC,WAAU;EACV,WAAU;EACV,MAAM,2CAACC,0BAAQ;EACf,SAAQ;EACR,eAAe;AACb,gBAAa,QAAQ;;GAEvB;AAKN,KAAI,CAAC,cACH,QAAO;AAGT,QACE,4CAACC;EACC,0CAAc,UAAU;EACxB,QACE,4CAAC;GAAI,WAAU;cACb,2CAAC;IAAK,WAAU;cAAU;KAAiB,EAC3C,2CAACF;IACC,OAAM;IACN,MAAM,2CAACG,2BAAU;IACjB,MAAK;IACL,SAAQ;IACR,eAAe;AACb,kBAAa,MAAM;;KAErB;IACE;aAGR,2CAACH;GACC,WAAU;GACV,MAAM,2CAACI,+BAAa;GACpB,SAAS,mBAAmB,UAAU;GACtC,eAAe;AACb,iBAAa,cAAc,UAAU,kBAAkB,QAAQ;;aAGhE,mBAAmB,oBAAoB;IACjC,EACT,2CAACC,+BACC,OAAO;GACL;GACA,QAAQ,UAAU;GAClB,QAAQ;IACN;IACA;IACA;IACA;IACD;GACF,GACD;GACG;;AAIX,8BAAe;;;;ACjHf,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;AA0BzC,MAAM,QAAQ,EACZ,UACA,YAAY,QACZ,QAAQ,QACR,gBAAgB,QAChB,OAAO,QACP,UACA,SAAS,QACT,aAAa,QACb,oBAAoB,YACL;AACf,QACE,2CAACC;EACC,mBAAmB;EACJ;EACL;EACE;EACO;aAEjB,EAAE,cAAc,cAAc;AAC9B,UACE,4CAAC;IAAI,WAAU;eACb,2CAAC;KACC,0CAAc,QAAQ,UAAU;KAChC,sBAAoB;KACpB,mDAAqB,UAAU,QAAQ,GAAG;KACpC;KACN,UAAU;KAET;MACI,EAEN,CAAC,WAAW,CAAC,OAAO,WACnB,2CAACC,2BAAgB,WAAU,gBAAgB;KAEzC;;GAGG;;AAInB,qBAAe;;;;ACxEf,mBAAeC"}

package/dist/{FormContext-CN9n_KdE.js → FormContext-Dl3k1r_k.js}

@@ -1,4 +1,4 @@
-import { i as toFormFormat, o as toValidationFormat } from "./helpers-B-CJOBt3.js";
+import { a as toFormFormat, s as toValidationFormat } from "./helpers-CCINRgQk.js";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { useLocalStorage } from "@fuf-stack/pixels";
 import { jsx } from "react/jsx-runtime";
@@ -226,4 +226,4 @@ var FormContext_default = FormProvider$1;
 
 //#endregion
 export { UniformContext as n, FormContext_default as t };
-//# sourceMappingURL=FormContext-CN9n_KdE.js.map
+//# sourceMappingURL=FormContext-Dl3k1r_k.js.map