npm - @fuf-stack/uniform - Versions diffs - 1.15.0 → 1.16.0 - Mend

@fuf-stack/uniform 1.15.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/dist/Checkboxes/index.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as Checkboxes, r as CheckboxesProps, t as CheckboxOption } from "../index-DLJiYqVE.cjs";
+import { n as Checkboxes, r as CheckboxesProps, t as CheckboxOption } from "../index-CZ5EIIjq.cjs";
 export { CheckboxOption, Checkboxes, Checkboxes as default, CheckboxesProps };

package/dist/Checkboxes/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as Checkboxes, r as CheckboxesProps, t as CheckboxOption } from "../index-DsSuY_wP.js";
+import { n as Checkboxes, r as CheckboxesProps, t as CheckboxOption } from "../index-DubKudrE.js";
 export { CheckboxOption, Checkboxes, Checkboxes as default, CheckboxesProps };

package/dist/FieldArray/index.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_FieldArray = require('../FieldArray-DgJgrLOY.cjs');
+const require_FieldArray = require('../FieldArray-BgvSTDWi.cjs');
 exports.FieldArray = require_FieldArray.FieldArray_default$1;
 exports.default = require_FieldArray.FieldArray_default;

package/dist/FieldArray/index.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as FieldArrayProps, n as FieldArrayChildrenRenderFn, r as FieldArrayFeatures, t as FieldArray } from "../index-Bs-1Pwc6.cjs";
+import { i as FieldArrayProps, n as FieldArrayChildrenRenderFn, r as FieldArrayFeatures, t as FieldArray } from "../index-Ct2YYfiU.cjs";
 export { FieldArray, FieldArray as default, FieldArrayChildrenRenderFn, FieldArrayFeatures, FieldArrayProps };

package/dist/FieldArray/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as FieldArrayProps, n as FieldArrayChildrenRenderFn, r as FieldArrayFeatures, t as FieldArray } from "../index-CODzh0zX.js";
+import { i as FieldArrayProps, n as FieldArrayChildrenRenderFn, r as FieldArrayFeatures, t as FieldArray } from "../index-CJ90vm9t.js";
 export { FieldArray, FieldArray as default, FieldArrayChildrenRenderFn, FieldArrayFeatures, FieldArrayProps };

package/dist/FieldArray/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import { n as FieldArray_default, t as FieldArray_default$1 } from "../FieldArray-Bnv1_-Rl.js";
+import { n as FieldArray_default, t as FieldArray_default$1 } from "../FieldArray-C8Ipn-tM.js";
 export { FieldArray_default as FieldArray, FieldArray_default$1 as default };

package/dist/{FieldArray-DgJgrLOY.cjs → FieldArray-BgvSTDWi.cjs} RENAMED Viewed

@@ -297,7 +297,7 @@ const FieldArrayValidationError = ({ name }) => {
 			},
 			style: { overflow: "hidden" },
 			transition: {
-				duration: .2,
+				duration: .4,
 				ease: "circOut"
 			},
 			animate: disableAnimation ? void 0 : {
@@ -306,7 +306,7 @@ const FieldArrayValidationError = ({ name }) => {
 			},
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				...getHelperWrapperProps(),
-				className: (0, _fuf_stack_pixel_utils.cn)(getHelperWrapperProps()?.className, "block px-3 py-2"),
+				className: (0, _fuf_stack_pixel_utils.cn)(getHelperWrapperProps()?.className, "block px-3 pb-2 pt-1"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					...getErrorMessageProps(),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FieldValidationError.FieldValidationError_default$1, {
@@ -512,4 +512,4 @@ Object.defineProperty(exports, 'FieldArray_default$1', {
     return FieldArray_default$1;
   }
 });
-//# sourceMappingURL=FieldArray-DgJgrLOY.cjs.map
+//# sourceMappingURL=FieldArray-BgvSTDWi.cjs.map

package/dist/FieldArray-BgvSTDWi.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FieldArray-BgvSTDWi.cjs","names":["Button","FaPlus","FaCopy","VscInsert","FaTimes","Menu","Button","FaTimes","motion","FaGripVertical","CSS","AnimatePresence","motion","SortDragHandle","Grid","ElementActionsMenu","ElementRemoveButton","useUniformField","useUniformField","AnimatePresence","motion","FieldValidationError","PointerSensor","KeyboardSensor","DndContext","closestCenter","restrictToVerticalAxis","restrictToWindowEdges","SortableContext","verticalListSortingStrategy","useUniformFieldArray","FieldArrayLabel","SortContext","flatArrayKey","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.4, ease: 'circOut' }}\n animate={\n disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n }\n >\n <div\n {...getHelperWrapperProps()}\n className={cn(\n getHelperWrapperProps()?.className,\n // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n 'block px-3 pb-2 pt-1',\n )}\n >\n <div {...getErrorMessageProps()}>\n <FieldValidationError\n // @ts-expect-error - error._errors exists but not typed\n error={error._errors}\n testId={testId}\n />\n </div>\n </div>\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n};\n\nexport default FieldArrayValidationError;\n","import type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport { useFormContext } from 'react-hook-form';\n\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n restrictToVerticalAxis,\n restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\ninterface SortContextProps {\n /** child components */\n children: ReactNode;\n /** Array of objects containing unique IDs for sortable items */\n fields: Record<'id', string>[];\n /** name of the field array */\n name: string;\n /** react-hook-form's move function to update field array indices */\n move: UseFieldArrayMove;\n /** enable/disable sorting functionality */\n sortable: boolean;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n children,\n fields,\n move,\n name,\n sortable,\n}: SortContextProps): ReactNode => {\n const { trigger } = useFormContext();\n\n // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n // Early return if sorting is disabled\n if (!sortable) {\n return children;\n }\n\n /**\n * Handles the end of a drag operation by updating field positions\n * @param event - The drag end event containing active and over elements\n */\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n\n // Only move if dropping over a different item\n if (active.id !== over?.id) {\n // Find the indices of the dragged item and drop target\n const oldIndex = fields.findIndex((field) => {\n return field.id === active.id;\n });\n const newIndex = fields.findIndex((field) => {\n return field.id === over?.id;\n });\n // Update the field array order using react-hook-form's move function\n move(oldIndex, newIndex);\n\n // Finally trigger validation for the array field,\n // so validation errors are updated for the new order\n trigger(name);\n }\n };\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n >\n <SortableContext\n strategy={verticalListSortingStrategy}\n items={fields.map((field) => {\n return field.id;\n })}\n >\n {children}\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default SortContext;\n","import type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { flatArrayKey } from '../helpers';\nimport { useUniformFieldArray } from '../hooks/useUniformFieldArray';\nimport ElementAppendButton from './subcomponents/ElementAppendButton';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport FieldArrayLabel from './subcomponents/FieldArrayLabel';\nimport FieldArrayValidationError from './subcomponents/FieldArrayValidationError';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n slots: {\n /** base class for the field array wrapper */\n base: [\n // base styles\n 'overflow-hidden rounded-small border border-divider bg-content1',\n // divider between items\n 'divide-y divide-divider',\n ],\n /** class for the actions menu button */\n actionsMenuButton: [\n // base styles\n 'flex items-center justify-center text-default-600',\n // fixed height/no round corners/center align\n 'h-full rounded-none',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the append button */\n appendButton: [\n // base styles\n 'w-full justify-start rounded-b-small rounded-t-none font-semibold',\n // match label height (p-3 = 12px vertical padding + text-base line height)\n '!h-[48px] !min-h-0',\n // focus styles - inset ring with rounded bottom corners to match container\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the element fields grid */\n elementFieldsGrid: ['w-full grow p-3'],\n /** class for the label */\n label: [\n // override HeroUI label positioning and display\n 'pointer-events-auto! static! z-auto! block! w-full!',\n // reset any transforms or translations\n 'translate-x-0! translate-y-0! transform-none!',\n // card header styling - use text-medium (16px) instead of text-base for correct 48px height\n 'rounded-t-small p-3 font-semibold text-medium',\n ],\n /** class for the list */\n list: ['overflow-hidden'],\n /** class for the list wrapper */\n listWrapper: ['overflow-hidden'],\n /** class for the list item (performs motion animations) */\n listItem: [\n // base styles\n 'group relative flex flex-row',\n // overlap borders by shifting first item up 1px (similar to how last item overlaps with append button)\n 'first:-mt-px',\n ],\n /** class for the list item inner */\n listItemInner: [\n // base styles\n 'flex w-full flex-row items-stretch divide-divider bg-content1',\n // x division and borders\n 'divide-x divide-solid border-b border-t border-divider',\n ],\n /** class for the remove button */\n removeButton: [\n // base styles\n 'flex items-center justify-center',\n // fixed height/no round corners\n '!h-full !min-h-0 !rounded-none px-3',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the sort drag handle */\n sortDragHandle: [\n // base styles\n 'flex cursor-grab items-center justify-center px-2 text-default-600 transition-colors',\n // hover and dragging state\n 'hover:bg-default-100 active:cursor-grabbing group-data-[dragging=true]:bg-default-100',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n },\n variants: {\n hasLabel: {\n false: {\n // focus styles - when there is no label, the first item actions menu button should have rounded top right corners\n actionsMenuButton:\n 'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n // focus styles - when there is no label, the first item remove button focus ring should have rounded top right corners\n removeButton:\n 'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n // focus styles - when there is no label, the first item sort drag handle focus ring should have rounded top left corners\n sortDragHandle:\n 'group-[:first-child]:rounded-tl-small group-[:first-child]:group-data-[dragging=true]:rounded-tl-none',\n },\n },\n },\n});\n\n/**\n * FieldArray component based in [RHF useFieldArray](https://react-hook-form.com/docs/usefieldarray)\n */\nconst FieldArray = ({\n appendButtonText = 'Add Element',\n children,\n className: _className = undefined,\n duplicate = false,\n elementInitialValue: _elementInitialValue = null,\n elementMarginBottom = undefined,\n flat = false,\n insertAfter = false,\n lastElementNotRemovable = false,\n name,\n sortable = false,\n ...uniformFieldProps\n}: FieldArrayProps) => {\n const {\n fields,\n append,\n remove,\n insert,\n move,\n disableAnimation,\n elementInitialValue,\n getValues,\n testId,\n } = useUniformFieldArray({\n name,\n flat,\n elementInitialValue: _elementInitialValue,\n lastElementNotRemovable,\n ...uniformFieldProps,\n });\n\n // className from slots\n const variants = fieldArrayVariants({ hasLabel: !!uniformFieldProps.label });\n const className = variantsToClassNames(variants, _className, 'base');\n\n return (\n <div className={className.base}>\n {/* field array label */}\n <FieldArrayLabel\n className={className.label}\n label={uniformFieldProps.label}\n name={name}\n />\n\n {fields.length ? (\n /* list wrapper */\n <div className={cn(className.listWrapper)}>\n {/* sortable context */}\n <SortContext\n fields={fields}\n move={move}\n name={name}\n sortable={sortable}\n >\n {/* list container */}\n <ul className={className.list} data-testid={testId}>\n {/* fields / list elements */}\n {fields.map((field, index) => {\n const elementName = flat\n ? `${name}.${index}.${flatArrayKey}`\n : `${name}.${index}`;\n const elementTestId = `${testId}_${index}`;\n\n // create methods for element\n const elementMethods: FieldArrayElementMethods = {\n append: () => {\n append(elementInitialValue);\n },\n duplicate: () => {\n const values = getValues(name);\n const currentValue = (values as unknown[])[index];\n const nextValue = flat\n ? { [flatArrayKey]: currentValue }\n : currentValue;\n insert(index + 1, nextValue);\n },\n insert: () => {\n insert(index + 1, elementInitialValue);\n },\n remove: () => {\n remove(index);\n },\n };\n\n return (\n <FieldArrayElement\n key={field.id}\n className={className}\n disableAnimation={disableAnimation}\n duplicate={duplicate}\n elementMarginBottom={elementMarginBottom}\n fields={fields}\n id={field.id}\n index={index}\n insertAfter={insertAfter}\n lastNotDeletable={lastElementNotRemovable}\n methods={elementMethods}\n sortable={sortable}\n testId={elementTestId}\n >\n {children({\n index,\n length: fields.length,\n methods: elementMethods,\n name: elementName,\n testId: elementTestId,\n })}\n </FieldArrayElement>\n );\n })}\n </ul>\n </SortContext>\n </div>\n ) : null}\n\n {/* top level field array errors */}\n <FieldArrayValidationError name={name} />\n\n {/* append elements button */}\n <ElementAppendButton\n appendButtonText={appendButtonText}\n className={className.appendButton}\n testId={`${testId}_append_button`}\n onClick={() => {\n append(elementInitialValue);\n }}\n />\n </div>\n );\n};\n\nexport default FieldArray;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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"}

package/dist/{FieldArray-Bnv1_-Rl.js → FieldArray-C8Ipn-tM.js} RENAMED Viewed

@@ -296,7 +296,7 @@ const FieldArrayValidationError = ({ name }) => {
 			},
 			style: { overflow: "hidden" },
 			transition: {
-				duration: .2,
+				duration: .4,
 				ease: "circOut"
 			},
 			animate: disableAnimation ? void 0 : {
@@ -305,7 +305,7 @@ const FieldArrayValidationError = ({ name }) => {
 			},
 			children: /* @__PURE__ */ jsx("div", {
 				...getHelperWrapperProps(),
-				className: cn(getHelperWrapperProps()?.className, "block px-3 py-2"),
+				className: cn(getHelperWrapperProps()?.className, "block px-3 pb-2 pt-1"),
 				children: /* @__PURE__ */ jsx("div", {
 					...getErrorMessageProps(),
 					children: /* @__PURE__ */ jsx(FieldValidationError_default, {
@@ -500,4 +500,4 @@ var FieldArray_default = FieldArray_default$1;
 //#endregion
 export { FieldArray_default$1 as n, FieldArray_default as t };
-//# sourceMappingURL=FieldArray-Bnv1_-Rl.js.map
+//# sourceMappingURL=FieldArray-C8Ipn-tM.js.map

package/dist/FieldArray-C8Ipn-tM.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FieldArray-C8Ipn-tM.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.4, ease: 'circOut' }}\n animate={\n disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n }\n >\n <div\n {...getHelperWrapperProps()}\n className={cn(\n getHelperWrapperProps()?.className,\n // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n 'block px-3 pb-2 pt-1',\n )}\n >\n <div {...getErrorMessageProps()}>\n <FieldValidationError\n // @ts-expect-error - error._errors exists but not typed\n error={error._errors}\n testId={testId}\n />\n </div>\n </div>\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n};\n\nexport default FieldArrayValidationError;\n","import type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport { useFormContext } from 'react-hook-form';\n\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n restrictToVerticalAxis,\n restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\ninterface SortContextProps {\n /** child components */\n children: ReactNode;\n /** Array of objects containing unique IDs for sortable items */\n fields: Record<'id', string>[];\n /** name of the field array */\n name: string;\n /** react-hook-form's move function to update field array indices */\n move: UseFieldArrayMove;\n /** enable/disable sorting functionality */\n sortable: boolean;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n children,\n fields,\n move,\n name,\n sortable,\n}: SortContextProps): ReactNode => {\n const { trigger } = useFormContext();\n\n // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n // Early return if sorting is disabled\n if (!sortable) {\n return children;\n }\n\n /**\n * Handles the end of a drag operation by updating field positions\n * @param event - The drag end event containing active and over elements\n */\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n\n // Only move if dropping over a different item\n if (active.id !== over?.id) {\n // Find the indices of the dragged item and drop target\n const oldIndex = fields.findIndex((field) => {\n return field.id === active.id;\n });\n const newIndex = fields.findIndex((field) => {\n return field.id === over?.id;\n });\n // Update the field array order using react-hook-form's move function\n move(oldIndex, newIndex);\n\n // Finally trigger validation for the array field,\n // so validation errors are updated for the new order\n trigger(name);\n }\n };\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n >\n <SortableContext\n strategy={verticalListSortingStrategy}\n items={fields.map((field) => {\n return field.id;\n })}\n >\n {children}\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default SortContext;\n","import type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { flatArrayKey } from '../helpers';\nimport { useUniformFieldArray } from '../hooks/useUniformFieldArray';\nimport ElementAppendButton from './subcomponents/ElementAppendButton';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport FieldArrayLabel from './subcomponents/FieldArrayLabel';\nimport FieldArrayValidationError from './subcomponents/FieldArrayValidationError';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n slots: {\n /** base class for the field array wrapper */\n base: [\n // base styles\n 'overflow-hidden rounded-small border border-divider bg-content1',\n // divider between items\n 'divide-y divide-divider',\n ],\n /** class for the actions menu button */\n actionsMenuButton: [\n // base styles\n 'flex items-center justify-center text-default-600',\n // fixed height/no round corners/center align\n 'h-full rounded-none',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the append button */\n appendButton: [\n // base styles\n 'w-full justify-start rounded-b-small rounded-t-none font-semibold',\n // match label height (p-3 = 12px vertical padding + text-base line height)\n '!h-[48px] !min-h-0',\n // focus styles - inset ring with rounded bottom corners to match container\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the element fields grid */\n elementFieldsGrid: ['w-full grow p-3'],\n /** class for the label */\n label: [\n // override HeroUI label positioning and display\n 'pointer-events-auto! static! z-auto! block! w-full!',\n // reset any transforms or translations\n 'translate-x-0! translate-y-0! transform-none!',\n // card header styling - use text-medium (16px) instead of text-base for correct 48px height\n 'rounded-t-small p-3 font-semibold text-medium',\n ],\n /** class for the list */\n list: ['overflow-hidden'],\n /** class for the list wrapper */\n listWrapper: ['overflow-hidden'],\n /** class for the list item (performs motion animations) */\n listItem: [\n // base styles\n 'group relative flex flex-row',\n // overlap borders by shifting first item up 1px (similar to how last item overlaps with append button)\n 'first:-mt-px',\n ],\n /** class for the list item inner */\n listItemInner: [\n // base styles\n 'flex w-full flex-row items-stretch divide-divider bg-content1',\n // x division and borders\n 'divide-x divide-solid border-b border-t border-divider',\n ],\n /** class for the remove button */\n removeButton: [\n // base styles\n 'flex items-center justify-center',\n // fixed height/no round corners\n '!h-full !min-h-0 !rounded-none px-3',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the sort drag handle */\n sortDragHandle: [\n // base styles\n 'flex cursor-grab items-center justify-center px-2 text-default-600 transition-colors',\n // hover and dragging state\n 'hover:bg-default-100 active:cursor-grabbing group-data-[dragging=true]:bg-default-100',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n },\n variants: {\n hasLabel: {\n false: {\n // focus styles - when there is no label, the first item actions menu button should have rounded top right corners\n actionsMenuButton:\n 'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n // focus styles - when there is no label, the first item remove button focus ring should have rounded top right corners\n removeButton:\n 'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n // focus styles - when there is no label, the first item sort drag handle focus ring should have rounded top left corners\n sortDragHandle:\n 'group-[:first-child]:rounded-tl-small group-[:first-child]:group-data-[dragging=true]:rounded-tl-none',\n },\n },\n },\n});\n\n/**\n * FieldArray component based in [RHF useFieldArray](https://react-hook-form.com/docs/usefieldarray)\n */\nconst FieldArray = ({\n appendButtonText = 'Add Element',\n children,\n className: _className = undefined,\n duplicate = false,\n elementInitialValue: _elementInitialValue = null,\n elementMarginBottom = undefined,\n flat = false,\n insertAfter = false,\n lastElementNotRemovable = false,\n name,\n sortable = false,\n ...uniformFieldProps\n}: FieldArrayProps) => {\n const {\n fields,\n append,\n remove,\n insert,\n move,\n disableAnimation,\n elementInitialValue,\n getValues,\n testId,\n } = useUniformFieldArray({\n name,\n flat,\n elementInitialValue: _elementInitialValue,\n lastElementNotRemovable,\n ...uniformFieldProps,\n });\n\n // className from slots\n const variants = fieldArrayVariants({ hasLabel: !!uniformFieldProps.label });\n const className = variantsToClassNames(variants, _className, 'base');\n\n return (\n <div className={className.base}>\n {/* field array label */}\n <FieldArrayLabel\n className={className.label}\n label={uniformFieldProps.label}\n name={name}\n />\n\n {fields.length ? (\n /* list wrapper */\n <div className={cn(className.listWrapper)}>\n {/* sortable context */}\n <SortContext\n fields={fields}\n move={move}\n name={name}\n sortable={sortable}\n >\n {/* list container */}\n <ul className={className.list} data-testid={testId}>\n {/* fields / list elements */}\n {fields.map((field, index) => {\n const elementName = flat\n ? `${name}.${index}.${flatArrayKey}`\n : `${name}.${index}`;\n const elementTestId = `${testId}_${index}`;\n\n // create methods for element\n const elementMethods: FieldArrayElementMethods = {\n append: () => {\n append(elementInitialValue);\n },\n duplicate: () => {\n const values = getValues(name);\n const currentValue = (values as unknown[])[index];\n const nextValue = flat\n ? { [flatArrayKey]: currentValue }\n : currentValue;\n insert(index + 1, nextValue);\n },\n insert: () => {\n insert(index + 1, elementInitialValue);\n },\n remove: () => {\n remove(index);\n },\n };\n\n return (\n <FieldArrayElement\n key={field.id}\n className={className}\n disableAnimation={disableAnimation}\n duplicate={duplicate}\n elementMarginBottom={elementMarginBottom}\n fields={fields}\n id={field.id}\n index={index}\n insertAfter={insertAfter}\n lastNotDeletable={lastElementNotRemovable}\n methods={elementMethods}\n sortable={sortable}\n testId={elementTestId}\n >\n {children({\n index,\n length: fields.length,\n methods: elementMethods,\n name: elementName,\n testId: elementTestId,\n })}\n </FieldArrayElement>\n );\n })}\n </ul>\n </SortContext>\n </div>\n ) : null}\n\n {/* top level field array errors */}\n <FieldArrayValidationError name={name} />\n\n {/* append elements button */}\n <ElementAppendButton\n appendButtonText={appendButtonText}\n className={className.appendButton}\n testId={`${testId}_append_button`}\n onClick={() => {\n append(elementInitialValue);\n }}\n />\n </div>\n );\n};\n\nexport default FieldArray;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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"}

package/dist/FieldCard/index.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-const require_FieldCard = require('../FieldCard-CeEnVxiB.cjs');
+const require_FieldCard = require('../FieldCard-DcMORXZR.cjs');
 exports.FieldCard = require_FieldCard.FieldCard_default;
 exports.fieldCardVariants = require_FieldCard.fieldCardVariants;

package/dist/FieldCard/index.d.cts CHANGED Viewed

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

package/dist/FieldCard/index.d.ts CHANGED Viewed

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

package/dist/FieldCard/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import { n as fieldCardVariants, t as FieldCard_default } from "../FieldCard-CLd4PaoX.js";
+import { n as fieldCardVariants, t as FieldCard_default } from "../FieldCard-DZSiMFoO.js";
 export { FieldCard_default as FieldCard, fieldCardVariants };

package/dist/{FieldCard-CLd4PaoX.js → FieldCard-DZSiMFoO.js} RENAMED Viewed

@@ -1,4 +1,5 @@
 import { n as FieldValidationError_default } from "./FieldValidationError-BYwitb_B.js";
+import { n as useFormContext, t as checkFieldIsRequired } from "./useFormContext-UFBqUfOr.js";
 import { t as useUniformField } from "./useUniformField-C6oSAFa3.js";
 import { cn, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,9 +13,9 @@ import { AnimatePresence, motion, useReducedMotion } from "@fuf-stack/pixel-moti
 * accessibility attributes and animates them in/out using Framer Motion.
 */
 const FieldCardValidationError = ({ className = void 0, name }) => {
-	const { error, getErrorMessageProps, getHelperWrapperProps, invalid, testId } = useUniformField({ name });
+	const { error, getErrorMessageProps, getHelperWrapperProps, testId } = useUniformField({ name });
 	const disableAnimation = useReducedMotion();
-	const hasErrors = invalid && error?._errors;
+	const hasErrors = !!error?._errors;
 	return /* @__PURE__ */ jsx(AnimatePresence, {
 		initial: !disableAnimation,
 		children: hasErrors ? /* @__PURE__ */ jsx(motion.div, {
@@ -28,7 +29,7 @@ const FieldCardValidationError = ({ className = void 0, name }) => {
 			},
 			style: { overflow: "hidden" },
 			transition: {
-				duration: .2,
+				duration: .4,
 				ease: "circOut"
 			},
 			animate: disableAnimation ? void 0 : {
@@ -53,22 +54,44 @@ var FieldCardValidationError_default = FieldCardValidationError;
 //#endregion
 //#region src/FieldCard/FieldCard.tsx
+/**
+* Recursively checks if any child field with an error is also touched.
+* Returns true if at least one touched child has an error.
+*/
+const hasVisibleChildErrors = (errors, touched) => {
+	if (!errors || !touched) return false;
+	return Object.keys(errors).filter((key) => {
+		return key !== "_errors";
+	}).some((key) => {
+		const errorValue = errors[key];
+		const touchedValue = touched[key];
+		if (errorValue === void 0 || touchedValue === void 0) return false;
+		if (Array.isArray(errorValue)) return !!touchedValue;
+		if (typeof errorValue === "object" && errorValue !== null) return hasVisibleChildErrors(errorValue, touchedValue);
+		return false;
+	});
+};
 const fieldCardVariants = tv({
 	slots: {
-		base: ["overflow-hidden rounded-small border bg-content1"],
+		base: ["overflow-hidden rounded-small border bg-content1", "transition-colors duration-150 motion-reduce:transition-none"],
 		label: [
 			"pointer-events-auto! static! z-auto! block! w-full!",
 			"translate-x-0! translate-y-0! transform-none!",
-			"rounded-t-small border-b p-3 font-semibold text-medium"
+			"rounded-t-small border-b p-3 font-semibold text-medium",
+			"transition-colors duration-150 motion-reduce:transition-none"
 		],
 		content: ["p-3", "grid gap-4"],
-		errorFooter: ["border-t", "block px-3 py-2"]
+		errorFooter: [
+			"border-t",
+			"block px-3 pb-2 pt-1",
+			"transition-colors duration-150 motion-reduce:transition-none"
+		]
 	},
 	variants: { invalid: {
 		true: {
-			base: "border-danger",
-			label: "border-danger text-danger",
-			errorFooter: "border-danger"
+			base: "border-danger-200",
+			label: "border-danger-200 text-danger",
+			errorFooter: "border-danger-200"
 		},
 		false: {
 			base: "border-divider",
@@ -88,20 +111,52 @@ const fieldCardVariants = tv({
 * - Danger outline when validation errors exist
 */
 const FieldCard = ({ children, className: _className = void 0, name, ...uniformFieldProps }) => {
-	const { error, getLabelProps, invalid, label } = useUniformField({
+	const { error, getLabelProps, label } = useUniformField({
 		name,
 		...uniformFieldProps
 	});
-	const className = variantsToClassNames(fieldCardVariants({ invalid: invalid && error?._errors }), _className, "base");
+	const { control, formState: { touchedFields, submitCount }, validation } = useFormContext();
+	const validationInstance = validation?.baseInstance ?? validation?.instance;
+	const registeredFields = Array.from(control._names?.mount ?? []);
+	const childFieldPrefix = `${name}.`;
+	const isRequired = validationInstance ? registeredFields.filter((f) => {
+		return f.startsWith(childFieldPrefix);
+	}).some((f) => {
+		return checkFieldIsRequired(validationInstance, f.split(".").filter((k) => {
+			return k !== "";
+		}));
+	}) : false;
+	const getNestedValue = (obj, path) => {
+		if (!obj) return;
+		const keys = path.split(".");
+		let current = obj;
+		keys.every((key) => {
+			if (current && typeof current === "object") {
+				current = current[key];
+				return true;
+			}
+			current = void 0;
+			return false;
+		});
+		return current;
+	};
+	const fieldTouched = getNestedValue(touchedFields, name);
+	const hasObjectErrors = !!error?._errors;
+	const hasChildErrors = submitCount > 0 || hasVisibleChildErrors(error, fieldTouched);
+	const className = variantsToClassNames(fieldCardVariants({ invalid: hasObjectErrors || hasChildErrors }), _className, "base");
 	return /* @__PURE__ */ jsxs("div", {
 		className: className.base,
 		children: [
-			label ? /* @__PURE__ */ jsx("div", {
+			label ? /* @__PURE__ */ jsxs("div", {
 				...getLabelProps(),
 				"aria-level": 3,
-				className: cn(getLabelProps()?.className, className.label),
+				className: className.label,
 				role: "heading",
-				children: label
+				children: [label, isRequired ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "ml-0.5 text-danger",
+					children: "*"
+				}) : null]
 			}) : null,
 			/* @__PURE__ */ jsx("div", {
 				className: className.content,
@@ -118,4 +173,4 @@ var FieldCard_default = FieldCard;
 //#endregion
 export { fieldCardVariants as n, FieldCard_default as t };
-//# sourceMappingURL=FieldCard-CLd4PaoX.js.map
+//# sourceMappingURL=FieldCard-DZSiMFoO.js.map

package/dist/FieldCard-DZSiMFoO.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FieldCard-DZSiMFoO.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 { error, getErrorMessageProps, getHelperWrapperProps, testId } =\n useUniformField({\n name,\n });\n\n // disable all animation if user prefers reduced motion\n const disableAnimation = useReducedMotion();\n\n // Always show object-level errors (_errors) as they represent explicit\n // validation rules (e.g., refineObject custom validators)\n // @ts-expect-error - error._errors exists but not typed\n const hasErrors = !!error?._errors;\n\n return (\n <AnimatePresence initial={!disableAnimation}>\n {hasErrors ? (\n <motion.div\n key=\"field-card-errors\"\n exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n style={{ overflow: 'hidden' }}\n transition={{ duration: 0.4, ease: 'circOut' }}\n animate={\n disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n }\n >\n <div\n {...getHelperWrapperProps()}\n className={cn(getHelperWrapperProps()?.className, className)}\n >\n <div {...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 { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { checkFieldIsRequired, useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\n\n/**\n * Recursively checks if any child field with an error is also touched.\n * Returns true if at least one touched child has an error.\n */\nexport const hasVisibleChildErrors = (\n errors: Record<string, unknown> | undefined,\n touched: Record<string, unknown> | undefined,\n): boolean => {\n if (!errors || !touched) {\n return false;\n }\n\n return Object.keys(errors)\n .filter((key) => {\n // Skip object-level errors (_errors) - those are handled separately\n return key !== '_errors';\n })\n .some((key) => {\n const errorValue = errors[key];\n const touchedValue = touched[key];\n\n // If this key doesn't exist in both errors and touched, skip\n if (errorValue === undefined || touchedValue === undefined) {\n return false;\n }\n\n // If errorValue is an array, it's a leaf field error\n if (Array.isArray(errorValue)) {\n // touchedValue being truthy means the field is touched\n return !!touchedValue;\n }\n\n // Recursively check nested objects\n if (typeof errorValue === 'object' && errorValue !== null) {\n return hasVisibleChildErrors(\n errorValue as Record<string, unknown>,\n touchedValue as Record<string, unknown>,\n );\n }\n\n return false;\n });\n};\n\nexport const fieldCardVariants = tv({\n slots: {\n /** base class for the field card wrapper */\n base: [\n // base styles\n 'overflow-hidden rounded-small border bg-content1',\n // animate border color change, respect reduced motion\n 'transition-colors duration-150 motion-reduce:transition-none',\n ],\n /** class for the label/header */\n label: [\n // override HeroUI label positioning and display\n 'pointer-events-auto! static! z-auto! block! w-full!',\n // reset any transforms or translations\n 'translate-x-0! translate-y-0! transform-none!',\n // card header styling - use text-medium (16px) for proper header size\n 'rounded-t-small border-b p-3 font-semibold text-medium',\n // animate border and text color change, respect reduced motion\n 'transition-colors duration-150 motion-reduce:transition-none',\n ],\n /** class for the content */\n content: [\n // same as p-3 of Card component\n 'p-3',\n // default grid for form components (see Grid component)\n 'grid gap-4',\n ],\n /** class for the error footer wrapper */\n errorFooter: [\n 'border-t',\n // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n 'block px-3 pb-2 pt-1',\n // animate border color change, respect reduced motion\n 'transition-colors duration-150 motion-reduce:transition-none',\n ],\n },\n variants: {\n invalid: {\n true: {\n base: 'border-danger-200',\n label: 'border-danger-200 text-danger',\n errorFooter: 'border-danger-200',\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, label } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n const {\n control,\n formState: { touchedFields, submitCount },\n validation,\n } = useFormContext();\n\n // Check if any registered child field is required\n const validationInstance = validation?.baseInstance ?? validation?.instance;\n const registeredFields: string[] = Array.from(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (control as any)._names?.mount ?? [],\n );\n const childFieldPrefix = `${name}.`;\n const isRequired = validationInstance\n ? registeredFields\n .filter((f) => {\n return f.startsWith(childFieldPrefix);\n })\n .some((f) => {\n return checkFieldIsRequired(\n validationInstance,\n f.split('.').filter((k) => {\n return k !== '';\n }),\n );\n })\n : false;\n\n // Get touched state for this field's children by traversing the path\n const getNestedValue = (\n obj: Record<string, unknown> | undefined,\n path: string,\n ): Record<string, unknown> | undefined => {\n if (!obj) {\n return undefined;\n }\n const keys = path.split('.');\n let current: unknown = obj;\n keys.every((key) => {\n if (current && typeof current === 'object') {\n current = (current as Record<string, unknown>)[key];\n return true;\n }\n current = undefined;\n return false;\n });\n return current as Record<string, unknown> | undefined;\n };\n\n const fieldTouched = getNestedValue(\n touchedFields as Record<string, unknown>,\n name,\n );\n\n // Check for object-level errors (_errors) - always show these as they represent\n // explicit object-level validation rules (e.g., refineObject custom validators)\n // @ts-expect-error - error._errors exists but not typed\n const hasObjectErrors = !!error?._errors;\n\n // Check if any child field with an error is also touched\n const hasChildErrors =\n submitCount > 0 ||\n hasVisibleChildErrors(\n error as unknown as Record<string, unknown>,\n fieldTouched,\n );\n\n // Show invalid state if there are object errors or visible child errors\n const showInvalid = hasObjectErrors || hasChildErrors;\n\n // className from slots\n const variants = fieldCardVariants({ invalid: showInvalid });\n const className = variantsToClassNames(variants, _className, 'base');\n\n return (\n <div className={className.base}>\n {/* card header with label */}\n {label ? (\n <div\n {...getLabelProps()}\n aria-level={3}\n // Override getLabelProps className to use our own invalid styling based on hasErrors,\n // not HeroUI's which is based on any child field being invalid\n className={className.label}\n role=\"heading\"\n >\n {label}\n {/* Manual asterisk: getLabelProps uses schema-required for the object itself,\n but FieldCard needs asterisk based on whether any CHILD field is required */}\n {isRequired ? (\n <span aria-hidden=\"true\" className=\"ml-0.5 text-danger\">\n *\n </span>\n ) : null}\n </div>\n ) : null}\n\n {/* card content */}\n <div className={className.content}>{children}</div>\n\n {/* card footer with validation errors */}\n <FieldCardValidationError className={className.errorFooter} name={name} />\n </div>\n );\n};\n\nexport default FieldCard;\n"],"mappings":"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"}

package/dist/{FieldCard-CeEnVxiB.cjs → FieldCard-DcMORXZR.cjs} RENAMED Viewed

@@ -1,5 +1,6 @@
 const require_FormContext = require('./FormContext-CeFKQmVH.cjs');
 const require_FieldValidationError = require('./FieldValidationError-A384-L3Y.cjs');
+const require_useFormContext = require('./useFormContext-DJiJlfGJ.cjs');
 const require_useUniformField = require('./useUniformField-Dd3AnpgE.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -13,9 +14,9 @@ let _fuf_stack_pixel_motion = require("@fuf-stack/pixel-motion");
 * accessibility attributes and animates them in/out using Framer Motion.
 */
 const FieldCardValidationError = ({ className = void 0, name }) => {
-	const { error, getErrorMessageProps, getHelperWrapperProps, invalid, testId } = require_useUniformField.useUniformField({ name });
+	const { error, getErrorMessageProps, getHelperWrapperProps, testId } = require_useUniformField.useUniformField({ name });
 	const disableAnimation = (0, _fuf_stack_pixel_motion.useReducedMotion)();
-	const hasErrors = invalid && error?._errors;
+	const hasErrors = !!error?._errors;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_pixel_motion.AnimatePresence, {
 		initial: !disableAnimation,
 		children: hasErrors ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_pixel_motion.motion.div, {
@@ -29,7 +30,7 @@ const FieldCardValidationError = ({ className = void 0, name }) => {
 			},
 			style: { overflow: "hidden" },
 			transition: {
-				duration: .2,
+				duration: .4,
 				ease: "circOut"
 			},
 			animate: disableAnimation ? void 0 : {
@@ -54,22 +55,44 @@ var FieldCardValidationError_default = FieldCardValidationError;
 //#endregion
 //#region src/FieldCard/FieldCard.tsx
+/**
+* Recursively checks if any child field with an error is also touched.
+* Returns true if at least one touched child has an error.
+*/
+const hasVisibleChildErrors = (errors, touched) => {
+	if (!errors || !touched) return false;
+	return Object.keys(errors).filter((key) => {
+		return key !== "_errors";
+	}).some((key) => {
+		const errorValue = errors[key];
+		const touchedValue = touched[key];
+		if (errorValue === void 0 || touchedValue === void 0) return false;
+		if (Array.isArray(errorValue)) return !!touchedValue;
+		if (typeof errorValue === "object" && errorValue !== null) return hasVisibleChildErrors(errorValue, touchedValue);
+		return false;
+	});
+};
 const fieldCardVariants = (0, _fuf_stack_pixel_utils.tv)({
 	slots: {
-		base: ["overflow-hidden rounded-small border bg-content1"],
+		base: ["overflow-hidden rounded-small border bg-content1", "transition-colors duration-150 motion-reduce:transition-none"],
 		label: [
 			"pointer-events-auto! static! z-auto! block! w-full!",
 			"translate-x-0! translate-y-0! transform-none!",
-			"rounded-t-small border-b p-3 font-semibold text-medium"
+			"rounded-t-small border-b p-3 font-semibold text-medium",
+			"transition-colors duration-150 motion-reduce:transition-none"
 		],
 		content: ["p-3", "grid gap-4"],
-		errorFooter: ["border-t", "block px-3 py-2"]
+		errorFooter: [
+			"border-t",
+			"block px-3 pb-2 pt-1",
+			"transition-colors duration-150 motion-reduce:transition-none"
+		]
 	},
 	variants: { invalid: {
 		true: {
-			base: "border-danger",
-			label: "border-danger text-danger",
-			errorFooter: "border-danger"
+			base: "border-danger-200",
+			label: "border-danger-200 text-danger",
+			errorFooter: "border-danger-200"
 		},
 		false: {
 			base: "border-divider",
@@ -89,20 +112,52 @@ const fieldCardVariants = (0, _fuf_stack_pixel_utils.tv)({
 * - Danger outline when validation errors exist
 */
 const FieldCard = ({ children, className: _className = void 0, name, ...uniformFieldProps }) => {
-	const { error, getLabelProps, invalid, label } = require_useUniformField.useUniformField({
+	const { error, getLabelProps, label } = require_useUniformField.useUniformField({
 		name,
 		...uniformFieldProps
 	});
-	const className = (0, _fuf_stack_pixel_utils.variantsToClassNames)(fieldCardVariants({ invalid: invalid && error?._errors }), _className, "base");
+	const { control, formState: { touchedFields, submitCount }, validation } = require_useFormContext.useFormContext();
+	const validationInstance = validation?.baseInstance ?? validation?.instance;
+	const registeredFields = Array.from(control._names?.mount ?? []);
+	const childFieldPrefix = `${name}.`;
+	const isRequired = validationInstance ? registeredFields.filter((f) => {
+		return f.startsWith(childFieldPrefix);
+	}).some((f) => {
+		return require_useFormContext.checkFieldIsRequired(validationInstance, f.split(".").filter((k) => {
+			return k !== "";
+		}));
+	}) : false;
+	const getNestedValue = (obj, path) => {
+		if (!obj) return;
+		const keys = path.split(".");
+		let current = obj;
+		keys.every((key) => {
+			if (current && typeof current === "object") {
+				current = current[key];
+				return true;
+			}
+			current = void 0;
+			return false;
+		});
+		return current;
+	};
+	const fieldTouched = getNestedValue(touchedFields, name);
+	const hasObjectErrors = !!error?._errors;
+	const hasChildErrors = submitCount > 0 || hasVisibleChildErrors(error, fieldTouched);
+	const className = (0, _fuf_stack_pixel_utils.variantsToClassNames)(fieldCardVariants({ invalid: hasObjectErrors || hasChildErrors }), _className, "base");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: className.base,
 		children: [
-			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				...getLabelProps(),
 				"aria-level": 3,
-				className: (0, _fuf_stack_pixel_utils.cn)(getLabelProps()?.className, className.label),
+				className: className.label,
 				role: "heading",
-				children: label
+				children: [label, isRequired ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					className: "ml-0.5 text-danger",
+					children: "*"
+				}) : null]
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: className.content,
@@ -130,4 +185,4 @@ Object.defineProperty(exports, 'fieldCardVariants', {
     return fieldCardVariants;
   }
 });
-//# sourceMappingURL=FieldCard-CeEnVxiB.cjs.map
+//# sourceMappingURL=FieldCard-DcMORXZR.cjs.map