@fuf-stack/uniform 1.10.3 → 1.11.0

package/dist/FieldCard/index.d.cts

@@ -1,97 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as tailwind_variants from 'tailwind-variants';
-import { TVClassName } from '@fuf-stack/pixel-utils';
-import { ReactNode } from 'react';
-
-declare const fieldCardVariants: tailwind_variants.TVReturnType<{
-    invalid: {
-        true: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-        false: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-    };
-}, {
-    /** base class for the field card wrapper */
-    base: string[];
-    /** class for the label/header */
-    label: string[];
-    /** class for the content */
-    content: string[];
-    /** class for the error footer wrapper */
-    errorFooter: string[];
-}, undefined, {
-    invalid: {
-        true: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-        false: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-    };
-}, {
-    /** base class for the field card wrapper */
-    base: string[];
-    /** class for the label/header */
-    label: string[];
-    /** class for the content */
-    content: string[];
-    /** class for the error footer wrapper */
-    errorFooter: string[];
-}, tailwind_variants.TVReturnType<{
-    invalid: {
-        true: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-        false: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-    };
-}, {
-    /** base class for the field card wrapper */
-    base: string[];
-    /** class for the label/header */
-    label: string[];
-    /** class for the content */
-    content: string[];
-    /** class for the error footer wrapper */
-    errorFooter: string[];
-}, undefined, unknown, unknown, undefined>>;
-type ClassName = TVClassName<typeof fieldCardVariants>;
-interface FieldCardProps {
-    /** Content to render inside the card */
-    children: ReactNode;
-    /** CSS class name */
-    className?: ClassName;
-    /** Label content for the card header */
-    label: ReactNode;
-    /** Field name for validation */
-    name: string;
-    /** HTML data-testid attribute used in e2e tests */
-    testId?: string;
-}
-/**
- * FieldCard component - A card-styled container with label header and error footer
- *
- * Displays form field content in a card layout with:
- * - Label/title in the header
- * - Content in the body
- * - Validation errors in the footer
- * - Danger outline when validation errors exist
- */
-declare const FieldCard: ({ children, className: _className, name, ...uniformFieldProps }: FieldCardProps) => react_jsx_runtime.JSX.Element;
-
-export { FieldCard, type FieldCardProps, fieldCardVariants };
+import { n as FieldCardProps, r as fieldCardVariants, t as FieldCard } from "../index-CzypMcVS.cjs";
+export { FieldCard, FieldCardProps, fieldCardVariants };

package/dist/FieldCard/index.d.ts

@@ -1,97 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as tailwind_variants from 'tailwind-variants';
-import { TVClassName } from '@fuf-stack/pixel-utils';
-import { ReactNode } from 'react';
-
-declare const fieldCardVariants: tailwind_variants.TVReturnType<{
-    invalid: {
-        true: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-        false: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-    };
-}, {
-    /** base class for the field card wrapper */
-    base: string[];
-    /** class for the label/header */
-    label: string[];
-    /** class for the content */
-    content: string[];
-    /** class for the error footer wrapper */
-    errorFooter: string[];
-}, undefined, {
-    invalid: {
-        true: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-        false: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-    };
-}, {
-    /** base class for the field card wrapper */
-    base: string[];
-    /** class for the label/header */
-    label: string[];
-    /** class for the content */
-    content: string[];
-    /** class for the error footer wrapper */
-    errorFooter: string[];
-}, tailwind_variants.TVReturnType<{
-    invalid: {
-        true: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-        false: {
-            base: string;
-            label: string;
-            errorFooter: string;
-        };
-    };
-}, {
-    /** base class for the field card wrapper */
-    base: string[];
-    /** class for the label/header */
-    label: string[];
-    /** class for the content */
-    content: string[];
-    /** class for the error footer wrapper */
-    errorFooter: string[];
-}, undefined, unknown, unknown, undefined>>;
-type ClassName = TVClassName<typeof fieldCardVariants>;
-interface FieldCardProps {
-    /** Content to render inside the card */
-    children: ReactNode;
-    /** CSS class name */
-    className?: ClassName;
-    /** Label content for the card header */
-    label: ReactNode;
-    /** Field name for validation */
-    name: string;
-    /** HTML data-testid attribute used in e2e tests */
-    testId?: string;
-}
-/**
- * FieldCard component - A card-styled container with label header and error footer
- *
- * Displays form field content in a card layout with:
- * - Label/title in the header
- * - Content in the body
- * - Validation errors in the footer
- * - Danger outline when validation errors exist
- */
-declare const FieldCard: ({ children, className: _className, name, ...uniformFieldProps }: FieldCardProps) => react_jsx_runtime.JSX.Element;
-
-export { FieldCard, type FieldCardProps, fieldCardVariants };
+import { n as FieldCardProps, r as fieldCardVariants, t as FieldCard } from "../index-C_ATGeaX.js";
+export { FieldCard, FieldCardProps, fieldCardVariants };

package/dist/FieldCard/index.js

@@ -1,19 +1,3 @@
-import {
-  FieldCard_default,
-  fieldCardVariants
-} from "../chunk-4RQJCFM7.js";
-import "../chunk-GEC75GNL.js";
-import "../chunk-NTDKZW4E.js";
-import "../chunk-ELYGQTXB.js";
-import "../chunk-5MTIQ6WD.js";
-import "../chunk-AHJJIANM.js";
-import "../chunk-CNTOODUQ.js";
-import "../chunk-SJWL6EMI.js";
-import "../chunk-IV45K4WU.js";
-import "../chunk-O2XJNQQK.js";
-import "../chunk-K2V4ULA2.js";
-export {
-  FieldCard_default as FieldCard,
-  fieldCardVariants
-};
-//# sourceMappingURL=index.js.map
+import { n as fieldCardVariants, t as FieldCard_default } from "../FieldCard-mpmErfDK.js";
+
+export { FieldCard_default as FieldCard, fieldCardVariants };

package/dist/FieldCard-mpmErfDK.js

@@ -0,0 +1,121 @@
+import { n as FieldValidationError_default } from "./FieldValidationError-D86DPSOH.js";
+import { t as useUniformField } from "./useUniformField-ClprfrES.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";
+
+//#region src/FieldCard/subcomponents/FieldCardValidationError.tsx
+/**
+* Renders validation errors in the footer of a FieldCard component.
+*
+* This component handles displaying field-level validation errors with proper
+* 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 disableAnimation = useReducedMotion();
+	const hasErrors = invalid && error?._errors;
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: !disableAnimation,
+		children: hasErrors ? /* @__PURE__ */ jsx(motion.div, {
+			exit: disableAnimation ? void 0 : {
+				opacity: 0,
+				height: 0
+			},
+			initial: disableAnimation ? false : {
+				height: 0,
+				opacity: 0
+			},
+			style: { overflow: "hidden" },
+			transition: {
+				duration: .2,
+				ease: "circOut"
+			},
+			animate: disableAnimation ? void 0 : {
+				opacity: 1,
+				height: "auto"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				...getHelperWrapperProps(),
+				className: cn(getHelperWrapperProps()?.className, className),
+				children: /* @__PURE__ */ jsx("div", {
+					...getErrorMessageProps(),
+					children: /* @__PURE__ */ jsx(FieldValidationError_default, {
+						error: error._errors,
+						testId
+					})
+				})
+			})
+		}, "field-card-errors") : null
+	});
+};
+var FieldCardValidationError_default = FieldCardValidationError;
+
+//#endregion
+//#region src/FieldCard/FieldCard.tsx
+const fieldCardVariants = tv({
+	slots: {
+		base: ["overflow-hidden rounded-small border bg-content1"],
+		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"
+		],
+		content: ["p-3", "grid gap-4"],
+		errorFooter: ["border-t", "block px-3 py-2"]
+	},
+	variants: { invalid: {
+		true: {
+			base: "border-danger",
+			label: "border-danger text-danger",
+			errorFooter: "border-danger"
+		},
+		false: {
+			base: "border-divider",
+			label: "border-divider text-foreground",
+			errorFooter: "border-divider"
+		}
+	} },
+	defaultVariants: { invalid: false }
+});
+/**
+* FieldCard component - A card-styled container with label header and error footer
+*
+* Displays form field content in a card layout with:
+* - Label/title in the header
+* - Content in the body
+* - Validation errors in the footer
+* - Danger outline when validation errors exist
+*/
+const FieldCard = ({ children, className: _className = void 0, name, ...uniformFieldProps }) => {
+	const { error, getLabelProps, invalid, label } = useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const className = variantsToClassNames(fieldCardVariants({ invalid: invalid && error?._errors }), _className, "base");
+	return /* @__PURE__ */ jsxs("div", {
+		className: className.base,
+		children: [
+			label ? /* @__PURE__ */ jsx("div", {
+				...getLabelProps(),
+				"aria-level": 3,
+				className: cn(getLabelProps()?.className, className.label),
+				role: "heading",
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: className.content,
+				children
+			}),
+			/* @__PURE__ */ jsx(FieldCardValidationError_default, {
+				className: className.errorFooter,
+				name
+			})
+		]
+	});
+};
+var FieldCard_default = FieldCard;
+
+//#endregion
+export { fieldCardVariants as n, FieldCard_default as t };
+//# sourceMappingURL=FieldCard-mpmErfDK.js.map

package/dist/FieldCard-mpmErfDK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldCard-mpmErfDK.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/FieldCard-pP7aniZU.cjs

@@ -0,0 +1,133 @@
+const require_FormContext = require('./FormContext-C3GymQOA.cjs');
+const require_FieldValidationError = require('./FieldValidationError-Cq6aI0tE.cjs');
+const require_useUniformField = require('./useUniformField-BMvnRC_r.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");
+
+//#region src/FieldCard/subcomponents/FieldCardValidationError.tsx
+/**
+* Renders validation errors in the footer of a FieldCard component.
+*
+* This component handles displaying field-level validation errors with proper
+* 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 disableAnimation = (0, __fuf_stack_pixel_motion.useReducedMotion)();
+	const hasErrors = invalid && 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, {
+			exit: disableAnimation ? void 0 : {
+				opacity: 0,
+				height: 0
+			},
+			initial: disableAnimation ? false : {
+				height: 0,
+				opacity: 0
+			},
+			style: { overflow: "hidden" },
+			transition: {
+				duration: .2,
+				ease: "circOut"
+			},
+			animate: disableAnimation ? void 0 : {
+				opacity: 1,
+				height: "auto"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...getHelperWrapperProps(),
+				className: (0, __fuf_stack_pixel_utils.cn)(getHelperWrapperProps()?.className, className),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					...getErrorMessageProps(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FieldValidationError.FieldValidationError_default$1, {
+						error: error._errors,
+						testId
+					})
+				})
+			})
+		}, "field-card-errors") : null
+	});
+};
+var FieldCardValidationError_default = FieldCardValidationError;
+
+//#endregion
+//#region src/FieldCard/FieldCard.tsx
+const fieldCardVariants = (0, __fuf_stack_pixel_utils.tv)({
+	slots: {
+		base: ["overflow-hidden rounded-small border bg-content1"],
+		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"
+		],
+		content: ["p-3", "grid gap-4"],
+		errorFooter: ["border-t", "block px-3 py-2"]
+	},
+	variants: { invalid: {
+		true: {
+			base: "border-danger",
+			label: "border-danger text-danger",
+			errorFooter: "border-danger"
+		},
+		false: {
+			base: "border-divider",
+			label: "border-divider text-foreground",
+			errorFooter: "border-divider"
+		}
+	} },
+	defaultVariants: { invalid: false }
+});
+/**
+* FieldCard component - A card-styled container with label header and error footer
+*
+* Displays form field content in a card layout with:
+* - Label/title in the header
+* - Content in the body
+* - Validation errors in the footer
+* - Danger outline when validation errors exist
+*/
+const FieldCard = ({ children, className: _className = void 0, name, ...uniformFieldProps }) => {
+	const { error, getLabelProps, invalid, label } = require_useUniformField.useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const className = (0, __fuf_stack_pixel_utils.variantsToClassNames)(fieldCardVariants({ invalid: invalid && error?._errors }), _className, "base");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: className.base,
+		children: [
+			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...getLabelProps(),
+				"aria-level": 3,
+				className: (0, __fuf_stack_pixel_utils.cn)(getLabelProps()?.className, className.label),
+				role: "heading",
+				children: label
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: className.content,
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldCardValidationError_default, {
+				className: className.errorFooter,
+				name
+			})
+		]
+	});
+};
+var FieldCard_default = FieldCard;
+
+//#endregion
+Object.defineProperty(exports, 'FieldCard_default', {
+  enumerable: true,
+  get: function () {
+    return FieldCard_default;
+  }
+});
+Object.defineProperty(exports, 'fieldCardVariants', {
+  enumerable: true,
+  get: function () {
+    return fieldCardVariants;
+  }
+});
+//# sourceMappingURL=FieldCard-pP7aniZU.cjs.map

package/dist/FieldCard-pP7aniZU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldCard-pP7aniZU.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,mEAAqC;CAG3C,MAAM,YAAY,WAAW,OAAO;AAEpC,QACE,2CAACC;EAAgB,SAAS,CAAC;YACxB,YACC,2CAACC,gCAAO;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,2CAAc,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,oDAAuB;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,8DADW,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,2CAAc,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/FieldCopyTestIdButton-AaLwu_8y.cjs

@@ -0,0 +1,41 @@
+const require_FormContext = require('./FormContext-C3GymQOA.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");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx
+const FieldCopyTestIdButton = ({ className = void 0, testId }) => {
+	const copyToClipboard = () => {
+		navigator.clipboard.writeText(testId).catch((err) => {
+			console.error("Error copying TestId to clipboard", err);
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixels.Button, {
+		className: (0, __fuf_stack_pixel_utils.cn)(className, "pointer-events-auto"),
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa6.FaBullseye, {}),
+		onClick: copyToClipboard,
+		size: "sm",
+		variant: "light"
+	});
+};
+var FieldCopyTestIdButton_default = FieldCopyTestIdButton;
+
+//#endregion
+//#region src/partials/FieldCopyTestIdButton/index.ts
+var FieldCopyTestIdButton_default$1 = FieldCopyTestIdButton_default;
+
+//#endregion
+Object.defineProperty(exports, 'FieldCopyTestIdButton_default', {
+  enumerable: true,
+  get: function () {
+    return FieldCopyTestIdButton_default$1;
+  }
+});
+Object.defineProperty(exports, 'FieldCopyTestIdButton_default$1', {
+  enumerable: true,
+  get: function () {
+    return FieldCopyTestIdButton_default;
+  }
+});
+//# sourceMappingURL=FieldCopyTestIdButton-AaLwu_8y.cjs.map

package/dist/FieldCopyTestIdButton-AaLwu_8y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldCopyTestIdButton-AaLwu_8y.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,2CAAc,WAAW,sBAAsB;EAC/C,MAAM,2CAACC,+BAAa;EACpB,SAAS;EACT,MAAK;EACL,SAAQ;GACR;;AAGN,oCAAe;;;;AC1Bf,sCAAeC"}

package/dist/FieldCopyTestIdButton-Cx8AXJhO.js

@@ -0,0 +1,29 @@
+import { cn } from "@fuf-stack/pixel-utils";
+import { Button } from "@fuf-stack/pixels";
+import { FaBullseye } from "react-icons/fa6";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx
+const FieldCopyTestIdButton = ({ className = void 0, testId }) => {
+	const copyToClipboard = () => {
+		navigator.clipboard.writeText(testId).catch((err) => {
+			console.error("Error copying TestId to clipboard", err);
+		});
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		className: cn(className, "pointer-events-auto"),
+		icon: /* @__PURE__ */ jsx(FaBullseye, {}),
+		onClick: copyToClipboard,
+		size: "sm",
+		variant: "light"
+	});
+};
+var FieldCopyTestIdButton_default = FieldCopyTestIdButton;
+
+//#endregion
+//#region src/partials/FieldCopyTestIdButton/index.ts
+var FieldCopyTestIdButton_default$1 = FieldCopyTestIdButton_default;
+
+//#endregion
+export { FieldCopyTestIdButton_default as n, FieldCopyTestIdButton_default$1 as t };
+//# sourceMappingURL=FieldCopyTestIdButton-Cx8AXJhO.js.map

package/dist/FieldCopyTestIdButton-Cx8AXJhO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldCopyTestIdButton-Cx8AXJhO.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,oCAAe;;;;AC1Bf,sCAAeA"}

package/dist/FieldValidationError-Cq6aI0tE.cjs

@@ -0,0 +1,65 @@
+const require_FormContext = require('./FormContext-C3GymQOA.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");
+
+//#region src/partials/FieldValidationError/FieldValidationError.tsx
+/**
+* Renders a validation error of a field
+*/
+const FieldValidationError = ({ className = void 0, error = void 0, testId }) => {
+	const disableAnimation = (0, __fuf_stack_pixel_motion.useReducedMotion)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		"aria-label": `Validation errors of field ${testId}`,
+		className,
+		"data-testid": (0, __fuf_stack_pixel_utils.slugify)(`${testId}_error`),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixel_motion.AnimatePresence, {
+			initial: !disableAnimation,
+			children: error?.map(({ message }, i) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixel_motion.motion.li, {
+					exit: disableAnimation ? void 0 : {
+						opacity: 0,
+						height: 0
+					},
+					initial: disableAnimation ? false : {
+						height: 0,
+						opacity: 0
+					},
+					style: { overflow: "hidden" },
+					transition: {
+						duration: .2,
+						ease: "circOut"
+					},
+					animate: disableAnimation ? void 0 : {
+						opacity: 1,
+						height: "auto"
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "px-1 pt-1",
+						children: message
+					})
+				}, (0, __fuf_stack_pixel_utils.slugify)(`${testId}_error_${i}`));
+			})
+		})
+	});
+};
+var FieldValidationError_default = FieldValidationError;
+
+//#endregion
+//#region src/partials/FieldValidationError/index.ts
+var FieldValidationError_default$1 = FieldValidationError_default;
+
+//#endregion
+Object.defineProperty(exports, 'FieldValidationError_default', {
+  enumerable: true,
+  get: function () {
+    return FieldValidationError_default$1;
+  }
+});
+Object.defineProperty(exports, 'FieldValidationError_default$1', {
+  enumerable: true,
+  get: function () {
+    return FieldValidationError_default;
+  }
+});
+//# sourceMappingURL=FieldValidationError-Cq6aI0tE.cjs.map