@fuf-stack/uniform 1.22.5 → 1.22.7

package/dist/FieldCard/index.js.map

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

package/dist/{FieldCopyTestIdButton-Dpmo0uBV.js → FieldCopyTestIdButton-CRJBix9D.js}

@@ -21,6 +21,6 @@ const FieldCopyTestIdButton = ({ className = void 0, testId }) => {
 //#region src/partials/FieldCopyTestIdButton/index.ts
 var FieldCopyTestIdButton_default = FieldCopyTestIdButton;
 //#endregion
-export { FieldCopyTestIdButton as n, FieldCopyTestIdButton_default as t };
+export { FieldCopyTestIdButton_default as t };
 
-//# sourceMappingURL=FieldCopyTestIdButton-Dpmo0uBV.js.map
+//# sourceMappingURL=FieldCopyTestIdButton-CRJBix9D.js.map

package/dist/{FieldCopyTestIdButton-Dpmo0uBV.js.map → FieldCopyTestIdButton-CRJBix9D.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldCopyTestIdButton-Dpmo0uBV.js","names":[],"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,KAAA,GACZ,aACgC;CAChC,MAAM,wBAAwB;EAC5B,UAAU,UAAU,UAAU,MAAM,EAAE,OAAO,QAAQ;GACnD,QAAQ,MAAM,qCAAqC,GAAG;EACxD,CAAC;CACH;CAEA,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,WAAW,qBAAqB;EAC9C,MAAM,oBAAC,YAAD,CAAa,CAAA;EACnB,SAAS;EACT,MAAK;EACL,SAAQ;CACT,CAAA;AAEL;;;ACzBA,IAAA,gCAAe"}
+{"version":3,"file":"FieldCopyTestIdButton-CRJBix9D.js","names":[],"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 default FieldCopyTestIdButton;\n"],"mappings":";;;;;AAYA,MAAM,yBAAyB,EAC7B,YAAY,KAAA,GACZ,aACgC;CAChC,MAAM,wBAAwB;EAC5B,UAAU,UAAU,UAAU,MAAM,EAAE,OAAO,QAAQ;GACnD,QAAQ,MAAM,qCAAqC,GAAG;EACxD,CAAC;CACH;CAEA,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,WAAW,qBAAqB;EAC9C,MAAM,oBAAC,YAAD,CAAa,CAAA;EACnB,SAAS;EACT,MAAK;EACL,SAAQ;CACT,CAAA;AAEL;;;AC3BA,IAAA,gCAAe"}

package/dist/{FieldCopyTestIdButton-ptoB1F75.cjs → FieldCopyTestIdButton-D3D_LmJh.cjs}

@@ -1,4 +1,3 @@
-require("./FormContext-DsmS_mkO.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");
@@ -22,12 +21,6 @@ const FieldCopyTestIdButton = ({ className = void 0, testId }) => {
 //#region src/partials/FieldCopyTestIdButton/index.ts
 var FieldCopyTestIdButton_default = FieldCopyTestIdButton;
 //#endregion
-Object.defineProperty(exports, "FieldCopyTestIdButton", {
-	enumerable: true,
-	get: function() {
-		return FieldCopyTestIdButton;
-	}
-});
 Object.defineProperty(exports, "FieldCopyTestIdButton_default", {
 	enumerable: true,
 	get: function() {
@@ -35,4 +28,4 @@ Object.defineProperty(exports, "FieldCopyTestIdButton_default", {
 	}
 });
 
-//# sourceMappingURL=FieldCopyTestIdButton-ptoB1F75.cjs.map
+//# sourceMappingURL=FieldCopyTestIdButton-D3D_LmJh.cjs.map

package/dist/{FieldCopyTestIdButton-ptoB1F75.cjs.map → FieldCopyTestIdButton-D3D_LmJh.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldCopyTestIdButton-ptoB1F75.cjs","names":["Button","FaBullseye"],"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,KAAA,GACZ,aACgC;CAChC,MAAM,wBAAwB;EAC5B,UAAU,UAAU,UAAU,MAAM,EAAE,OAAO,QAAQ;GACnD,QAAQ,MAAM,qCAAqC,GAAG;EACxD,CAAC;CACH;CAEA,OACE,iBAAA,GAAA,kBAAA,KAACA,kBAAAA,QAAD;EACE,YAAA,GAAA,uBAAA,IAAc,WAAW,qBAAqB;EAC9C,MAAM,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,YAAD,CAAa,CAAA;EACnB,SAAS;EACT,MAAK;EACL,SAAQ;CACT,CAAA;AAEL;;;ACzBA,IAAA,gCAAe"}
+{"version":3,"file":"FieldCopyTestIdButton-D3D_LmJh.cjs","names":["Button","FaBullseye"],"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 default FieldCopyTestIdButton;\n"],"mappings":";;;;;AAYA,MAAM,yBAAyB,EAC7B,YAAY,KAAA,GACZ,aACgC;CAChC,MAAM,wBAAwB;EAC5B,UAAU,UAAU,UAAU,MAAM,EAAE,OAAO,QAAQ;GACnD,QAAQ,MAAM,qCAAqC,GAAG;EACxD,CAAC;CACH;CAEA,OACE,iBAAA,GAAA,kBAAA,KAACA,kBAAAA,QAAD;EACE,YAAA,GAAA,uBAAA,IAAc,WAAW,qBAAqB;EAC9C,MAAM,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,YAAD,CAAa,CAAA;EACnB,SAAS;EACT,MAAK;EACL,SAAQ;CACT,CAAA;AAEL;;;AC3BA,IAAA,gCAAe"}

package/dist/{FieldValidationError-ktTyyyip.js → FieldValidationError-ByRoIxaM.js}

@@ -15,6 +15,10 @@ const FieldValidationError = ({ className = void 0, error = void 0, testId }) =>
 			initial: !disableAnimation,
 			children: error?.map(({ message }, i) => {
 				return /* @__PURE__ */ jsx(motion.li, {
+					animate: disableAnimation ? void 0 : {
+						opacity: 1,
+						height: "auto"
+					},
 					exit: disableAnimation ? void 0 : {
 						opacity: 0,
 						height: 0
@@ -28,10 +32,6 @@ const FieldValidationError = ({ className = void 0, error = void 0, testId }) =>
 						duration: .2,
 						ease: "circOut"
 					},
-					animate: disableAnimation ? void 0 : {
-						opacity: 1,
-						height: "auto"
-					},
 					children: /* @__PURE__ */ jsx("div", {
 						className: "px-1 pt-1",
 						children: message
@@ -47,4 +47,4 @@ var FieldValidationError_default = FieldValidationError;
 //#endregion
 export { FieldValidationError as n, FieldValidationError_default as t };
 
-//# sourceMappingURL=FieldValidationError-ktTyyyip.js.map
+//# sourceMappingURL=FieldValidationError-ByRoIxaM.js.map

package/dist/{FieldValidationError-ktTyyyip.js.map → FieldValidationError-ByRoIxaM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldValidationError-ktTyyyip.js","names":[],"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,KAAA,GACZ,QAAQ,KAAA,GACR,aAC+B;CAE/B,MAAM,mBAAmB,iBAAiB;CAE1C,OACE,oBAAC,MAAD;EACE,cAAY,8BAA8B;EAC/B;EACX,eAAa,QAAQ,GAAG,OAAO,OAAO;YAEtC,oBAAC,iBAAD;GAAiB,SAAS,CAAC;aACxB,OAAO,KAAK,EAAE,WAAW,MAAM;IAC9B,OACE,oBAAC,OAAO,IAAR;KAEE,MAAM,mBAAmB,KAAA,IAAY;MAAE,SAAS;MAAG,QAAQ;KAAE;KAC7D,SAAS,mBAAmB,QAAQ;MAAE,QAAQ;MAAG,SAAS;KAAE;KAC5D,OAAO,EAAE,UAAU,SAAS;KAC5B,YAAY;MAAE,UAAU;MAAK,MAAM;KAAU;KAC7C,SACE,mBAAmB,KAAA,IAAY;MAAE,SAAS;MAAG,QAAQ;KAAO;eAI9D,oBAAC,OAAD;MAAK,WAAU;gBAAa;KAAa,CAAA;IAChC,GAXJ,QAAQ,GAAG,OAAO,SAAS,GAAG,CAW1B;GAEf,CAAC;EACc,CAAA;CACf,CAAA;AAER;;;AClDA,IAAA,+BAAe"}
+{"version":3,"file":"FieldValidationError-ByRoIxaM.js","names":[],"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              animate={\n                disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n              }\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            >\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 default FieldValidationError;\n"],"mappings":";;;;;;;AAqBA,MAAM,wBAAwB,EAC5B,YAAY,KAAA,GACZ,QAAQ,KAAA,GACR,aAC+B;CAE/B,MAAM,mBAAmB,iBAAiB;CAE1C,OACE,oBAAC,MAAD;EACE,cAAY,8BAA8B;EAC/B;EACX,eAAa,QAAQ,GAAG,OAAO,OAAO;YAEtC,oBAAC,iBAAD;GAAiB,SAAS,CAAC;aACxB,OAAO,KAAK,EAAE,WAAW,MAAM;IAC9B,OACE,oBAAC,OAAO,IAAR;KAEE,SACE,mBAAmB,KAAA,IAAY;MAAE,SAAS;MAAG,QAAQ;KAAO;KAE9D,MAAM,mBAAmB,KAAA,IAAY;MAAE,SAAS;MAAG,QAAQ;KAAE;KAC7D,SAAS,mBAAmB,QAAQ;MAAE,QAAQ;MAAG,SAAS;KAAE;KAC5D,OAAO,EAAE,UAAU,SAAS;KAC5B,YAAY;MAAE,UAAU;MAAK,MAAM;KAAU;eAG7C,oBAAC,OAAD;MAAK,WAAU;gBAAa;KAAa,CAAA;IAChC,GAXJ,QAAQ,GAAG,OAAO,SAAS,GAAG,CAW1B;GAEf,CAAC;EACc,CAAA;CACf,CAAA;AAER;;;ACpDA,IAAA,+BAAe"}

package/dist/{FieldValidationError-BQcvvU9i.cjs → FieldValidationError-CfYKzl7P.cjs}

@@ -1,4 +1,3 @@
-require("./FormContext-DsmS_mkO.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");
@@ -16,6 +15,10 @@ const FieldValidationError = ({ className = void 0, error = void 0, testId }) =>
 			initial: !disableAnimation,
 			children: error?.map(({ message }, i) => {
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_pixel_motion.motion.li, {
+					animate: disableAnimation ? void 0 : {
+						opacity: 1,
+						height: "auto"
+					},
 					exit: disableAnimation ? void 0 : {
 						opacity: 0,
 						height: 0
@@ -29,10 +32,6 @@ const FieldValidationError = ({ className = void 0, error = void 0, testId }) =>
 						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
@@ -59,4 +58,4 @@ Object.defineProperty(exports, "FieldValidationError_default", {
 	}
 });
 
-//# sourceMappingURL=FieldValidationError-BQcvvU9i.cjs.map
+//# sourceMappingURL=FieldValidationError-CfYKzl7P.cjs.map

package/dist/{FieldValidationError-BQcvvU9i.cjs.map → FieldValidationError-CfYKzl7P.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldValidationError-BQcvvU9i.cjs","names":["AnimatePresence","motion"],"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,KAAA,GACZ,QAAQ,KAAA,GACR,aAC+B;CAE/B,MAAM,oBAAA,GAAA,wBAAA,kBAAoC;CAE1C,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,cAAY,8BAA8B;EAC/B;EACX,gBAAA,GAAA,uBAAA,SAAqB,GAAG,OAAO,OAAO;YAEtC,iBAAA,GAAA,kBAAA,KAACA,wBAAAA,iBAAD;GAAiB,SAAS,CAAC;aACxB,OAAO,KAAK,EAAE,WAAW,MAAM;IAC9B,OACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,OAAO,IAAR;KAEE,MAAM,mBAAmB,KAAA,IAAY;MAAE,SAAS;MAAG,QAAQ;KAAE;KAC7D,SAAS,mBAAmB,QAAQ;MAAE,QAAQ;MAAG,SAAS;KAAE;KAC5D,OAAO,EAAE,UAAU,SAAS;KAC5B,YAAY;MAAE,UAAU;MAAK,MAAM;KAAU;KAC7C,SACE,mBAAmB,KAAA,IAAY;MAAE,SAAS;MAAG,QAAQ;KAAO;eAI9D,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBAAa;KAAa,CAAA;IAChC,IAAA,GAAA,uBAAA,SAXI,GAAG,OAAO,SAAS,GAAG,CAW1B;GAEf,CAAC;EACc,CAAA;CACf,CAAA;AAER;;;AClDA,IAAA,+BAAe"}
+{"version":3,"file":"FieldValidationError-CfYKzl7P.cjs","names":["AnimatePresence","motion"],"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              animate={\n                disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n              }\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            >\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 default FieldValidationError;\n"],"mappings":";;;;;;;AAqBA,MAAM,wBAAwB,EAC5B,YAAY,KAAA,GACZ,QAAQ,KAAA,GACR,aAC+B;CAE/B,MAAM,oBAAA,GAAA,wBAAA,kBAAoC;CAE1C,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,cAAY,8BAA8B;EAC/B;EACX,gBAAA,GAAA,uBAAA,SAAqB,GAAG,OAAO,OAAO;YAEtC,iBAAA,GAAA,kBAAA,KAACA,wBAAAA,iBAAD;GAAiB,SAAS,CAAC;aACxB,OAAO,KAAK,EAAE,WAAW,MAAM;IAC9B,OACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,OAAO,IAAR;KAEE,SACE,mBAAmB,KAAA,IAAY;MAAE,SAAS;MAAG,QAAQ;KAAO;KAE9D,MAAM,mBAAmB,KAAA,IAAY;MAAE,SAAS;MAAG,QAAQ;KAAE;KAC7D,SAAS,mBAAmB,QAAQ;MAAE,QAAQ;MAAG,SAAS;KAAE;KAC5D,OAAO,EAAE,UAAU,SAAS;KAC5B,YAAY;MAAE,UAAU;MAAK,MAAM;KAAU;eAG7C,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBAAa;KAAa,CAAA;IAChC,IAAA,GAAA,uBAAA,SAXI,GAAG,OAAO,SAAS,GAAG,CAW1B;GAEf,CAAC;EACc,CAAA;CACf,CAAA;AAER;;;ACpDA,IAAA,+BAAe"}

package/dist/Form/index.cjs

@@ -2,6 +2,125 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Form = require("../Form-CYlsIABv.cjs");
-exports.Form = require_Form.Form;
-exports.default = require_Form.Form_default;
+const require_FormContext = require("../FormContext-EGH0cVnH.cjs");
+const require_useFormContext = require("../useFormContext-kUHonwgu.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
+const EMPTY_VALUES = {};
+/** 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 latestValuesRef = (0, react.useRef)(EMPTY_VALUES);
+	const values = (0, react.useSyncExternalStore)((onStoreChange) => {
+		if (!showDebugCard) return () => {};
+		latestValuesRef.current = getValues() ?? EMPTY_VALUES;
+		onStoreChange();
+		const unsubscribe = subscribe({
+			formState: { values: true },
+			callback: (state) => {
+				latestValuesRef.current = state.values ?? EMPTY_VALUES;
+				onStoreChange();
+			}
+		});
+		return () => {
+			unsubscribe();
+		};
+	}, () => {
+		if (!showDebugCard) return EMPTY_VALUES;
+		return latestValuesRef.current;
+	}, () => {
+		return EMPTY_VALUES;
+	});
+	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, {}),
+		onClick: () => {
+			setDebugMode("debug");
+		},
+		variant: "light"
+	});
+	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, {}),
+				onClick: () => {
+					setDebugMode("off");
+				},
+				size: "sm",
+				variant: "light"
+			})]
+		}),
+		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, {}),
+			onClick: () => {
+				setDebugMode(debugMode === "debug" ? "debug-testids" : "debug");
+			},
+			variant: showDebugTestIds ? "solid" : "light",
+			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
+			}
+		} })]
+	});
+};
+//#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.FormProvider, {
+		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, { className: "w-96 shrink" })]
+			});
+		}
+	});
+};
+//#endregion
+//#region src/Form/index.ts
+var Form_default = Form;
+//#endregion
+exports.default = Form_default;
+
+//# sourceMappingURL=index.cjs.map

package/dist/Form/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useFormContext","Button","FaBug","Card","FaTimes","FaBullseye","Json","FormProvider"],"sources":["../../src/Form/subcomponents/FormDebugViewer.tsx","../../src/Form/Form.tsx","../../src/Form/index.ts"],"sourcesContent":["import { useRef, useSyncExternalStore } 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\n// Stable empty snapshot used by useSyncExternalStore to avoid re-render loops.\nconst EMPTY_VALUES: Record<string, unknown> = {};\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  const latestValuesRef = useRef<Record<string, unknown>>(EMPTY_VALUES);\n\n  // Subscribe to RHF as an external store so this component updates itself\n  // without forcing parent re-renders via watch().\n  const values = useSyncExternalStore<Record<string, unknown>>(\n    // subscribe: tell React how to listen for external store changes\n    (onStoreChange) => {\n      if (!showDebugCard) {\n        // No-op while the panel is hidden to avoid unnecessary subscriptions.\n        return () => {};\n      }\n\n      // Seed the snapshot once when the debug panel becomes visible.\n      latestValuesRef.current = getValues() ?? EMPTY_VALUES;\n      onStoreChange();\n\n      const unsubscribe = subscribe({\n        formState: { values: true },\n        callback: (state) => {\n          latestValuesRef.current = state.values ?? EMPTY_VALUES;\n          // Notify React that a new snapshot is available.\n          onStoreChange();\n        },\n      });\n\n      return () => {\n        // Ensure RHF subscription is always cleaned up.\n        unsubscribe();\n      };\n    },\n    // getSnapshot: return the current client-side value for this render.\n    () => {\n      if (!showDebugCard) {\n        // Keep the debug payload empty when the panel is not visible.\n        return EMPTY_VALUES;\n      }\n\n      return latestValuesRef.current;\n    },\n    // getServerSnapshot: stable fallback for non-client rendering environments.\n    () => {\n      return EMPTY_VALUES;\n    },\n  );\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        onClick={() => {\n          setDebugMode('debug');\n        }}\n        variant=\"light\"\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            onClick={() => {\n              setDebugMode('off');\n            }}\n            size=\"sm\"\n            variant=\"light\"\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n        variant={showDebugTestIds ? 'solid' : 'light'}\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 default Form;\n"],"mappings":"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"}

package/dist/Form/index.d.cts

@@ -1,2 +1,43 @@
-import { n as FormProps, t as Form } from "../index-C3-TV4Up.cjs";
-export { Form, Form as default, type FormProps };
+import { t as DebugModeSettings } from "../FormContext-BLWS7bhO.cjs";
+import { ReactNode } from "react";
+import { VetoInstance } from "@fuf-stack/veto";
+import { FieldValues, SubmitHandler } from "react-hook-form";
+
+//#region src/Form/Form.d.ts
+interface FormProps {
+  /** form children */
+  children: ReactNode | ReactNode[];
+  /** CSS class name */
+  className?: string | string[];
+  /** settings for from debug mode */
+  debug?: DebugModeSettings;
+  /** initial form values */
+  initialValues?: FieldValues;
+  /** name of the form */
+  name?: string;
+  /** form submit handler */
+  onSubmit: SubmitHandler<FieldValues>;
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+  /** veto validation schema */
+  validation?: VetoInstance;
+  /** when the validation should be triggered */
+  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+}
+/**
+ * Form component that has to wrap every uniform
+ */
+declare const Form: ({
+  children,
+  className,
+  debug,
+  initialValues,
+  name,
+  onSubmit,
+  testId,
+  validation,
+  validationTrigger
+}: FormProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { type FormProps, Form as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/Form/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/Form/Form.tsx"],"mappings":";;;;;;UAYiB,SAAA;;EAEf,QAAA,EAAU,SAAA,GAAY,SAAA;EAFE;EAIxB,SAAA;EAFU;EAIV,KAAA,GAAQ,iBAAA;EAAA;EAER,aAAA,GAAgB,WAAA;EAIQ;EAFxB,IAAA;EAMa;EAJb,QAAA,EAAU,aAAA,CAAc,WAAA;EAIC;EAFzB,MAAA;EAZU;EAcV,UAAA,GAAa,YAAA;EAZb;EAcA,iBAAA;AAAA;;;;cAMI,IAAA;EAAQ,QAAA;EAAA,SAAA;EAAA,KAAA;EAAA,aAAA;EAAA,IAAA;EAAA,QAAA;EAAA,MAAA;EAAA,UAAA;EAAA;AAAA,GAUX,SAAA,iCAAS,GAAA,CAAA,OAAA"}

package/dist/Form/index.d.ts

@@ -1,2 +1,43 @@
-import { n as FormProps, t as Form } from "../index-54OZEaUU.js";
-export { Form, Form as default, type FormProps };
+import { t as DebugModeSettings } from "../FormContext-LgzrDWu1.js";
+import { ReactNode } from "react";
+import { FieldValues, SubmitHandler } from "react-hook-form";
+import { VetoInstance } from "@fuf-stack/veto";
+
+//#region src/Form/Form.d.ts
+interface FormProps {
+  /** form children */
+  children: ReactNode | ReactNode[];
+  /** CSS class name */
+  className?: string | string[];
+  /** settings for from debug mode */
+  debug?: DebugModeSettings;
+  /** initial form values */
+  initialValues?: FieldValues;
+  /** name of the form */
+  name?: string;
+  /** form submit handler */
+  onSubmit: SubmitHandler<FieldValues>;
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+  /** veto validation schema */
+  validation?: VetoInstance;
+  /** when the validation should be triggered */
+  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+}
+/**
+ * Form component that has to wrap every uniform
+ */
+declare const Form: ({
+  children,
+  className,
+  debug,
+  initialValues,
+  name,
+  onSubmit,
+  testId,
+  validation,
+  validationTrigger
+}: FormProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { type FormProps, Form as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/Form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/Form/Form.tsx"],"mappings":";;;;;;UAYiB,SAAA;;EAEf,QAAA,EAAU,SAAA,GAAY,SAAA;EAFE;EAIxB,SAAA;EAFU;EAIV,KAAA,GAAQ,iBAAA;EAAA;EAER,aAAA,GAAgB,WAAA;EAIQ;EAFxB,IAAA;EAMa;EAJb,QAAA,EAAU,aAAA,CAAc,WAAA;EAIC;EAFzB,MAAA;EAZU;EAcV,UAAA,GAAa,YAAA;EAZb;EAcA,iBAAA;AAAA;;;;cAMI,IAAA;EAAQ,QAAA;EAAA,SAAA;EAAA,KAAA;EAAA,aAAA;EAAA,IAAA;EAAA,QAAA;EAAA,MAAA;EAAA,UAAA;EAAA;AAAA,GAUX,SAAA,iCAAS,GAAA,CAAA,OAAA"}

package/dist/Form/index.js

@@ -1,2 +1,122 @@
-import { n as Form, t as Form_default } from "../Form-D3yfDu4L.js";
-export { Form, Form_default as default };
+import { t as FormProvider } from "../FormContext-DjJOJKxj.js";
+import { n as useFormContext } from "../useFormContext-BJqa1FoT.js";
+import { cn, slugify } from "@fuf-stack/pixel-utils";
+import { useRef, useSyncExternalStore } 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
+const EMPTY_VALUES = {};
+/** 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 latestValuesRef = useRef(EMPTY_VALUES);
+	const values = useSyncExternalStore((onStoreChange) => {
+		if (!showDebugCard) return () => {};
+		latestValuesRef.current = getValues() ?? EMPTY_VALUES;
+		onStoreChange();
+		const unsubscribe = subscribe({
+			formState: { values: true },
+			callback: (state) => {
+				latestValuesRef.current = state.values ?? EMPTY_VALUES;
+				onStoreChange();
+			}
+		});
+		return () => {
+			unsubscribe();
+		};
+	}, () => {
+		if (!showDebugCard) return EMPTY_VALUES;
+		return latestValuesRef.current;
+	}, () => {
+		return EMPTY_VALUES;
+	});
+	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, {}),
+		onClick: () => {
+			setDebugMode("debug");
+		},
+		variant: "light"
+	});
+	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, {}),
+				onClick: () => {
+					setDebugMode("off");
+				},
+				size: "sm",
+				variant: "light"
+			})]
+		}),
+		children: [/* @__PURE__ */ jsx(Button, {
+			className: "mb-4 ml-auto mr-auto",
+			icon: /* @__PURE__ */ jsx(FaBullseye, {}),
+			onClick: () => {
+				setDebugMode(debugMode === "debug" ? "debug-testids" : "debug");
+			},
+			variant: showDebugTestIds ? "solid" : "light",
+			children: showDebugTestIds ? "Hide CopyButton" : "Show CopyButton"
+		}), /* @__PURE__ */ jsx(Json, { value: {
+			values,
+			errors: errors ?? null,
+			submit: {
+				isValid,
+				isSubmitting,
+				isSubmitSuccessful,
+				submitCount
+			}
+		} })]
+	});
+};
+//#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(FormProvider, {
+		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, { className: "w-96 shrink" })]
+			});
+		}
+	});
+};
+//#endregion
+//#region src/Form/index.ts
+var Form_default = Form;
+//#endregion
+export { Form_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/Form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Form/subcomponents/FormDebugViewer.tsx","../../src/Form/Form.tsx","../../src/Form/index.ts"],"sourcesContent":["import { useRef, useSyncExternalStore } 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\n// Stable empty snapshot used by useSyncExternalStore to avoid re-render loops.\nconst EMPTY_VALUES: Record<string, unknown> = {};\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  const latestValuesRef = useRef<Record<string, unknown>>(EMPTY_VALUES);\n\n  // Subscribe to RHF as an external store so this component updates itself\n  // without forcing parent re-renders via watch().\n  const values = useSyncExternalStore<Record<string, unknown>>(\n    // subscribe: tell React how to listen for external store changes\n    (onStoreChange) => {\n      if (!showDebugCard) {\n        // No-op while the panel is hidden to avoid unnecessary subscriptions.\n        return () => {};\n      }\n\n      // Seed the snapshot once when the debug panel becomes visible.\n      latestValuesRef.current = getValues() ?? EMPTY_VALUES;\n      onStoreChange();\n\n      const unsubscribe = subscribe({\n        formState: { values: true },\n        callback: (state) => {\n          latestValuesRef.current = state.values ?? EMPTY_VALUES;\n          // Notify React that a new snapshot is available.\n          onStoreChange();\n        },\n      });\n\n      return () => {\n        // Ensure RHF subscription is always cleaned up.\n        unsubscribe();\n      };\n    },\n    // getSnapshot: return the current client-side value for this render.\n    () => {\n      if (!showDebugCard) {\n        // Keep the debug payload empty when the panel is not visible.\n        return EMPTY_VALUES;\n      }\n\n      return latestValuesRef.current;\n    },\n    // getServerSnapshot: stable fallback for non-client rendering environments.\n    () => {\n      return EMPTY_VALUES;\n    },\n  );\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        onClick={() => {\n          setDebugMode('debug');\n        }}\n        variant=\"light\"\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            onClick={() => {\n              setDebugMode('off');\n            }}\n            size=\"sm\"\n            variant=\"light\"\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n        variant={showDebugTestIds ? 'solid' : 'light'}\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 default Form;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,eAAwC,CAAC;;AAQ/C,MAAM,mBAAmB,EAAE,YAAY,KAAA,QAAsC;CAC3E,MAAM,EACJ,WACA,WAAW,EAAE,SAAS,cAAc,aAAa,sBACjD,WACA,cACA,YAAY,EAAE,UACd,cACE,eAAe;CAEnB,MAAM,kBAAkB,cAAc;CACtC,MAAM,gBAAgB,cAAc,WAAW,cAAc;CAC7D,MAAM,mBAAmB,cAAc;CACvC,MAAM,kBAAkB,OAAgC,YAAY;CAIpE,MAAM,SAAS,sBAEZ,kBAAkB;EACjB,IAAI,CAAC,eAEH,aAAa,CAAC;EAIhB,gBAAgB,UAAU,UAAU,KAAK;EACzC,cAAc;EAEd,MAAM,cAAc,UAAU;GAC5B,WAAW,EAAE,QAAQ,KAAK;GAC1B,WAAW,UAAU;IACnB,gBAAgB,UAAU,MAAM,UAAU;IAE1C,cAAc;GAChB;EACF,CAAC;EAED,aAAa;GAEX,YAAY;EACd;CACF,SAEM;EACJ,IAAI,CAAC,eAEH,OAAO;EAGT,OAAO,gBAAgB;CACzB,SAEM;EACJ,OAAO;CACT,CACF;CAEA,IAAI,iBACF,OACE,oBAAC,QAAD;EACE,WAAU;EACV,WAAU;EACV,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,eAAe;GACb,aAAa,OAAO;EACtB;EACA,SAAQ;CACT,CAAA;CAKL,IAAI,CAAC,eACH,OAAO;CAGT,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,SAAS;EACvB,QACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAU;GAAgB,CAAA,GAC1C,oBAAC,QAAD;IACE,OAAM;IACN,MAAM,oBAAC,SAAD,CAAU,CAAA;IAChB,eAAe;KACb,aAAa,KAAK;IACpB;IACA,MAAK;IACL,SAAQ;GACT,CAAA,CACE;;YAdT,CAiBE,oBAAC,QAAD;GACE,WAAU;GACV,MAAM,oBAAC,YAAD,CAAa,CAAA;GACnB,eAAe;IACb,aAAa,cAAc,UAAU,kBAAkB,OAAO;GAChE;GACA,SAAS,mBAAmB,UAAU;aAErC,mBAAmB,oBAAoB;EAClC,CAAA,GACR,oBAAC,MAAD,EACE,OAAO;GACL;GACA,QAAQ,UAAU;GAClB,QAAQ;IACN;IACA;IACA;IACA;GACF;EACF,EACD,CAAA,CACG;;AAEV;;;ACpIA,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;AA0BzC,MAAM,QAAQ,EACZ,UACA,YAAY,KAAA,GACZ,QAAQ,KAAA,GACR,gBAAgB,KAAA,GAChB,OAAO,KAAA,GACP,UACA,SAAS,KAAA,GACT,aAAa,KAAA,GACb,oBAAoB,YACL;CACf,OACE,oBAAC,cAAD;EACE,mBAAmB;EACJ;EACL;EACE;EACO;aAEjB,EAAE,cAAc,cAAc;GAC9B,OACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,WAAW,GAAG,QAAQ,SAAS;KAC/B,sBAAoB;KACpB,eAAa,QAAQ,UAAU,QAAQ,EAAE;KACnC;KACN,UAAU;KAET;IACG,CAAA,GAEL,CAAC,WAAW,CAAC,OAAO,WACnB,oBAAC,iBAAD,EAAiB,WAAU,cAAe,CAAA,CAEzC;;EAET;CACY,CAAA;AAElB;;;ACxEA,IAAA,eAAe"}

package/dist/{FormContext-3kamRn2C.d.cts → FormContext-BLWS7bhO.d.cts}

@@ -17,4 +17,4 @@ type FormResetListener = () => void;
 type UserChangeListener<TFieldValues extends object = object> = (fieldName: Path<TFieldValues>, value: unknown) => void;
 //#endregion
 export { FormResetListener as n, UserChangeListener as r, DebugModeSettings as t };
-//# sourceMappingURL=FormContext-3kamRn2C.d.cts.map
+//# sourceMappingURL=FormContext-BLWS7bhO.d.cts.map

package/dist/{FormContext-3kamRn2C.d.cts.map → FormContext-BLWS7bhO.d.cts.map}

@@ -1 +1 @@
-{"version":3,"file":"FormContext-3kamRn2C.d.cts","names":[],"sources":["../src/Form/subcomponents/FormContext.tsx"],"mappings":";;;;;UAsBiB,iBAAA;EAAiB;EAEhC,OAAA;EAAA;EAEA,eAAe;AAAA;;KAIL,iBAAA;;AAAiB;AAK7B;KAAY,kBAAA,0CACV,SAAA,EAAW,IAAI,CAAC,YAAA,GAChB,KAAA"}
+{"version":3,"file":"FormContext-BLWS7bhO.d.cts","names":[],"sources":["../src/Form/subcomponents/FormContext.tsx"],"mappings":";;;;;UAsBiB,iBAAA;EAAiB;EAEhC,OAAA;EAAA;EAEA,eAAe;AAAA;;KAIL,iBAAA;;AAAiB;AAK7B;KAAY,kBAAA,0CACV,SAAA,EAAW,IAAI,CAAC,YAAA,GAChB,KAAA"}

package/dist/{FormContext-BQeKOV-0.js → FormContext-DjJOJKxj.js}

@@ -275,4 +275,4 @@ const FormProvider$1 = ({ children, debugModeSettings = void 0, initialValues =
 //#endregion
 export { UniformContext as n, FormProvider$1 as t };
 
-//# sourceMappingURL=FormContext-BQeKOV-0.js.map
+//# sourceMappingURL=FormContext-DjJOJKxj.js.map