@fuf-stack/uniform 1.10.3 → 1.11.0

package/dist/FieldValidationError-Cq6aI0tE.cjs.map

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

package/dist/FieldValidationError-D86DPSOH.js

@@ -0,0 +1,53 @@
+import { slugify } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "@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 = useReducedMotion();
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": `Validation errors of field ${testId}`,
+		className,
+		"data-testid": slugify(`${testId}_error`),
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: !disableAnimation,
+			children: error?.map(({ message }, i) => {
+				return /* @__PURE__ */ jsx(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__ */ jsx("div", {
+						className: "px-1 pt-1",
+						children: message
+					})
+				}, slugify(`${testId}_error_${i}`));
+			})
+		})
+	});
+};
+var FieldValidationError_default = FieldValidationError;
+
+//#endregion
+//#region src/partials/FieldValidationError/index.ts
+var FieldValidationError_default$1 = FieldValidationError_default;
+
+//#endregion
+export { FieldValidationError_default as n, FieldValidationError_default$1 as t };
+//# sourceMappingURL=FieldValidationError-D86DPSOH.js.map

package/dist/FieldValidationError-D86DPSOH.js.map

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

package/dist/Form/index.cjs

@@ -1,14 +1,5 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_Form = require('../Form-FvN3SXfF.cjs');
 
-
-var _chunkLWPZZ2AWcjs = require('../chunk-LWPZZ2AW.cjs');
-require('../chunk-3JAVQAL5.cjs');
-require('../chunk-FYN7ZWLW.cjs');
-require('../chunk-AQJLKHAE.cjs');
-require('../chunk-OKJWLH7T.cjs');
-require('../chunk-555JRYCS.cjs');
-
-
-
-exports.Form = _chunkLWPZZ2AWcjs.Form_default; exports.default = _chunkLWPZZ2AWcjs.Form_default2;
-//# sourceMappingURL=index.cjs.map
+exports.Form = require_Form.Form_default$1;
+exports.default = require_Form.Form_default;

package/dist/Form/index.d.cts

@@ -1,11 +1,2 @@
-import { F as Form } from '../Form-BZZJPLsi.cjs';
-export { a as FormProps } from '../Form-BZZJPLsi.cjs';
-import 'react/jsx-runtime';
-import '@fuf-stack/veto';
-import 'react';
-import 'react-hook-form';
-import '../FormContext-9Firwt4k.cjs';
-
-
-
-export { Form, Form as default };
+import { n as FormProps, t as Form } from "../index-jmQP58tO.cjs";
+export { Form, Form as default, FormProps };

package/dist/Form/index.d.ts

@@ -1,11 +1,3 @@
-import { F as Form } from '../Form-zsUjI2yq.js';
-export { a as FormProps } from '../Form-zsUjI2yq.js';
-import 'react/jsx-runtime';
-import '@fuf-stack/veto';
-import 'react';
-import 'react-hook-form';
-import '../FormContext-9Firwt4k.js';
-
-
-
-export { Form, Form as default };
+import "../FormContext-C2_WMi_v.js";
+import { n as FormProps, t as Form } from "../index-aHcGnXHf.js";
+export { Form, Form as default, FormProps };

package/dist/Form/index.js

@@ -1,14 +1,3 @@
-import {
-  Form_default,
-  Form_default2
-} from "../chunk-UB7CSOZU.js";
-import "../chunk-36LBVB45.js";
-import "../chunk-SJWL6EMI.js";
-import "../chunk-IV45K4WU.js";
-import "../chunk-O2XJNQQK.js";
-import "../chunk-K2V4ULA2.js";
-export {
-  Form_default as Form,
-  Form_default2 as default
-};
-//# sourceMappingURL=index.js.map
+import { n as Form_default, t as Form_default$1 } from "../Form-CFmCTl60.js";
+
+export { Form_default as Form, Form_default$1 as default };

package/dist/Form-CFmCTl60.js

@@ -0,0 +1,119 @@
+import { t as FormContext_default } from "./FormContext-CN9n_KdE.js";
+import { n as useFormContext } from "./useFormContext-JCm1UR_e.js";
+import { cn, slugify } from "@fuf-stack/pixel-utils";
+import { useEffect, useState } from "react";
+import { FaBug, FaBullseye } from "react-icons/fa6";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FaTimes } from "react-icons/fa";
+import { Button } from "@fuf-stack/pixels/Button";
+import { Card } from "@fuf-stack/pixels/Card";
+import { Json } from "@fuf-stack/pixels/Json";
+import "@fuf-stack/pixels/Json.css";
+
+//#region src/Form/subcomponents/FormDebugViewer.tsx
+/** Renders a form debug panel with information about the current form state */
+const FormDebugViewer = ({ className = void 0 }) => {
+	const { debugMode, formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful }, getValues, setDebugMode, validation: { errors }, subscribe } = useFormContext();
+	const showDebugButton = debugMode === "off";
+	const showDebugCard = debugMode === "debug" || debugMode === "debug-testids";
+	const showDebugTestIds = debugMode === "debug-testids";
+	const [values, setValues] = useState({});
+	useEffect(() => {
+		if (!showDebugCard) return;
+		setValues(getValues() ?? {});
+		const subscription = subscribe({
+			formState: { values: true },
+			callback: (state) => {
+				setValues(state.values ?? {});
+			}
+		});
+		return () => {
+			subscription();
+		};
+	}, [showDebugCard]);
+	if (showDebugButton) return /* @__PURE__ */ jsx(Button, {
+		ariaLabel: "Enable form debug mode",
+		className: "fixed bottom-2.5 right-2.5 w-5 text-default-400",
+		icon: /* @__PURE__ */ jsx(FaBug, {}),
+		variant: "light",
+		onClick: () => {
+			setDebugMode("debug");
+		}
+	});
+	if (!showDebugCard) return null;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn(className),
+		header: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-row justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-lg",
+				children: "Debug Mode"
+			}), /* @__PURE__ */ jsx(Button, {
+				color: "danger",
+				icon: /* @__PURE__ */ jsx(FaTimes, {}),
+				size: "sm",
+				variant: "light",
+				onClick: () => {
+					setDebugMode("off");
+				}
+			})]
+		}),
+		children: [/* @__PURE__ */ jsx(Button, {
+			className: "mb-4 ml-auto mr-auto",
+			icon: /* @__PURE__ */ jsx(FaBullseye, {}),
+			variant: showDebugTestIds ? "solid" : "light",
+			onClick: () => {
+				setDebugMode(debugMode === "debug" ? "debug-testids" : "debug");
+			},
+			children: showDebugTestIds ? "Hide CopyButton" : "Show CopyButton"
+		}), /* @__PURE__ */ jsx(Json, { value: {
+			values,
+			errors: errors ?? null,
+			submit: {
+				isValid,
+				isSubmitting,
+				isSubmitSuccessful,
+				submitCount
+			}
+		} })]
+	});
+};
+var FormDebugViewer_default = FormDebugViewer;
+
+//#endregion
+//#region src/Form/Form.tsx
+const IS_TEST = process.env.NODE_ENV === "test";
+/**
+* Form component that has to wrap every uniform
+*/
+const Form = ({ children, className = void 0, debug = void 0, initialValues = void 0, name = void 0, onSubmit, testId = void 0, validation = void 0, validationTrigger = "all" }) => {
+	return /* @__PURE__ */ jsx(FormContext_default, {
+		debugModeSettings: debug,
+		initialValues,
+		onSubmit,
+		validation,
+		validationTrigger,
+		children: ({ handleSubmit, isValid }) => {
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full flex-row justify-between gap-6",
+				children: [/* @__PURE__ */ jsx("form", {
+					className: cn("grow", className),
+					"data-form-is-valid": isValid,
+					"data-testid": slugify(testId ?? name ?? ""),
+					name,
+					onSubmit: handleSubmit,
+					children
+				}), !IS_TEST && !debug?.disable && /* @__PURE__ */ jsx(FormDebugViewer_default, { className: "w-96 shrink" })]
+			});
+		}
+	});
+};
+var Form_default = Form;
+
+//#endregion
+//#region src/Form/index.ts
+var Form_default$1 = Form_default;
+
+//#endregion
+export { Form_default as n, Form_default$1 as t };
+//# sourceMappingURL=Form-CFmCTl60.js.map

package/dist/Form-CFmCTl60.js.map

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

package/dist/Form-FvN3SXfF.cjs

@@ -0,0 +1,130 @@
+const require_FormContext = require('./FormContext-C3GymQOA.cjs');
+const require_useFormContext = require('./useFormContext-CWuN-_7P.cjs');
+let __fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react = require("react");
+let react_icons_fa6 = require("react-icons/fa6");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_icons_fa = require("react-icons/fa");
+let __fuf_stack_pixels_Button = require("@fuf-stack/pixels/Button");
+let __fuf_stack_pixels_Card = require("@fuf-stack/pixels/Card");
+let __fuf_stack_pixels_Json = require("@fuf-stack/pixels/Json");
+require("@fuf-stack/pixels/Json.css");
+
+//#region src/Form/subcomponents/FormDebugViewer.tsx
+/** Renders a form debug panel with information about the current form state */
+const FormDebugViewer = ({ className = void 0 }) => {
+	const { debugMode, formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful }, getValues, setDebugMode, validation: { errors }, subscribe } = require_useFormContext.useFormContext();
+	const showDebugButton = debugMode === "off";
+	const showDebugCard = debugMode === "debug" || debugMode === "debug-testids";
+	const showDebugTestIds = debugMode === "debug-testids";
+	const [values, setValues] = (0, react.useState)({});
+	(0, react.useEffect)(() => {
+		if (!showDebugCard) return;
+		setValues(getValues() ?? {});
+		const subscription = subscribe({
+			formState: { values: true },
+			callback: (state) => {
+				setValues(state.values ?? {});
+			}
+		});
+		return () => {
+			subscription();
+		};
+	}, [showDebugCard]);
+	if (showDebugButton) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixels_Button.Button, {
+		ariaLabel: "Enable form debug mode",
+		className: "fixed bottom-2.5 right-2.5 w-5 text-default-400",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa6.FaBug, {}),
+		variant: "light",
+		onClick: () => {
+			setDebugMode("debug");
+		}
+	});
+	if (!showDebugCard) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__fuf_stack_pixels_Card.Card, {
+		className: (0, __fuf_stack_pixel_utils.cn)(className),
+		header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full flex-row justify-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-lg",
+				children: "Debug Mode"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixels_Button.Button, {
+				color: "danger",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaTimes, {}),
+				size: "sm",
+				variant: "light",
+				onClick: () => {
+					setDebugMode("off");
+				}
+			})]
+		}),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixels_Button.Button, {
+			className: "mb-4 ml-auto mr-auto",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa6.FaBullseye, {}),
+			variant: showDebugTestIds ? "solid" : "light",
+			onClick: () => {
+				setDebugMode(debugMode === "debug" ? "debug-testids" : "debug");
+			},
+			children: showDebugTestIds ? "Hide CopyButton" : "Show CopyButton"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixels_Json.Json, { value: {
+			values,
+			errors: errors ?? null,
+			submit: {
+				isValid,
+				isSubmitting,
+				isSubmitSuccessful,
+				submitCount
+			}
+		} })]
+	});
+};
+var FormDebugViewer_default = FormDebugViewer;
+
+//#endregion
+//#region src/Form/Form.tsx
+const IS_TEST = process.env.NODE_ENV === "test";
+/**
+* Form component that has to wrap every uniform
+*/
+const Form = ({ children, className = void 0, debug = void 0, initialValues = void 0, name = void 0, onSubmit, testId = void 0, validation = void 0, validationTrigger = "all" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormContext.FormContext_default, {
+		debugModeSettings: debug,
+		initialValues,
+		onSubmit,
+		validation,
+		validationTrigger,
+		children: ({ handleSubmit, isValid }) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex w-full flex-row justify-between gap-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+					className: (0, __fuf_stack_pixel_utils.cn)("grow", className),
+					"data-form-is-valid": isValid,
+					"data-testid": (0, __fuf_stack_pixel_utils.slugify)(testId ?? name ?? ""),
+					name,
+					onSubmit: handleSubmit,
+					children
+				}), !IS_TEST && !debug?.disable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormDebugViewer_default, { className: "w-96 shrink" })]
+			});
+		}
+	});
+};
+var Form_default = Form;
+
+//#endregion
+//#region src/Form/index.ts
+var Form_default$1 = Form_default;
+
+//#endregion
+Object.defineProperty(exports, 'Form_default', {
+  enumerable: true,
+  get: function () {
+    return Form_default$1;
+  }
+});
+Object.defineProperty(exports, 'Form_default$1', {
+  enumerable: true,
+  get: function () {
+    return Form_default;
+  }
+});
+//# sourceMappingURL=Form-FvN3SXfF.cjs.map

package/dist/Form-FvN3SXfF.cjs.map

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

package/dist/FormContext-C2_WMi_v.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import { FieldValues, Path, SubmitHandler } from "react-hook-form";
+import { VetoFormattedError, VetoInstance, VetoTypeAny } from "@fuf-stack/veto";
+
+//#region src/Form/subcomponents/FormContext.d.ts
+interface DebugModeSettings {
+  /** disable form debug completely */
+  disable?: boolean;
+  /** custom localStorage key to save debug mode state */
+  localStorageKey?: string;
+}
+/**
+ * Listener function that gets called when a field changes due to user input
+ */
+type UserChangeListener<TFieldValues extends object = object> = (fieldName: Path<TFieldValues>, value: unknown) => void;
+//#endregion
+export { UserChangeListener as n, DebugModeSettings as t };
+//# sourceMappingURL=FormContext-C2_WMi_v.d.ts.map

package/dist/FormContext-C2_WMi_v.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormContext-C2_WMi_v.d.ts","names":[],"sources":["../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":[],"mappings":";;;;;AAsBiB,UAAA,iBAAA,CAAiB;EAUtB;;;;;;;;KAAA,uEACC,KAAK"}