@fuf-stack/uniform 0.0.3 → 0.0.4

package/dist/Form/index.cjs

@@ -1,149 +1,11 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkWQRM7G4Ccjs = require('../chunk-WQRM7G4C.cjs');
+var _chunkII57W3V2cjs = require('../chunk-II57W3V2.cjs');
+require('../chunk-WQRM7G4C.cjs');
+require('../chunk-BBB4FEY6.cjs');
 
 
-var _chunkBBB4FEY6cjs = require('../chunk-BBB4FEY6.cjs');
 
-// src/Form/Form.tsx
-var _react = require('react');
-var _reacthookform = require('react-hook-form');
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-
-// src/Form/subcomponents/FormDebugViewer.tsx
-
-var _fa = require('react-icons/fa');
-var _fa6 = require('react-icons/fa6');
-
-var _Button = require('@fuf-stack/pixels/Button'); var _Button2 = _interopRequireDefault(_Button);
-var _Card = require('@fuf-stack/pixels/Card'); var _Card2 = _interopRequireDefault(_Card);
-var _useLocalStorage = require('@fuf-stack/pixels/hooks/useLocalStorage'); var _useLocalStorage2 = _interopRequireDefault(_useLocalStorage);
-var _Json = require('@fuf-stack/pixels/Json'); var _Json2 = _interopRequireDefault(_Json);
-var _jsxruntime = require('react/jsx-runtime');
-var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
-var FormDebugViewer = ({ className = void 0 }) => {
-  const {
-    watch,
-    formState: { dirtyFields, isValid, isSubmitting },
-    validation
-  } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
-  const [debug, setDebug] = _useLocalStorage2.default.call(void 0, LOCALSTORAGE_DEBUG_KEY, false);
-  const [validationErrors, setValidationErrors] = _react.useState.call(void 0, null);
-  const formValues = watch();
-  _react.useEffect.call(void 0, () => {
-    const updateValidationErrors = async () => {
-      if (validation) {
-        const validateResult = await _optionalChain([validation, 'optionalAccess', _ => _.validateAsync, 'call', _2 => _2(formValues)]);
-        setValidationErrors(_optionalChain([validateResult, 'optionalAccess', _3 => _3.errors]));
-      }
-    };
-    updateValidationErrors();
-  }, [JSON.stringify(formValues)]);
-  if (!debug) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _Button2.default,
-      {
-        ariaLabel: "Enable form debug mode",
-        onClick: () => setDebug(!debug),
-        className: "absolute bottom-2.5 right-2.5 w-5 text-default-400",
-        variant: "light",
-        icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaBug, {})
-      }
-    );
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Card2.default,
-    {
-      className: _classnames2.default.call(void 0, className),
-      header: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-row justify-between", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-lg", children: "Debug Mode" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _Button2.default,
-          {
-            icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, { className: "text-danger" }),
-            onClick: () => setDebug(false),
-            size: "sm",
-            variant: "flat"
-          }
-        )
-      ] }),
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _Json2.default,
-        {
-          value: {
-            values: formValues,
-            errors: validationErrors,
-            dirtyFields,
-            isValid,
-            isSubmitting
-          }
-        }
-      )
-    }
-  );
-};
-var FormDebugViewer_default = FormDebugViewer;
-
-// src/Form/Form.tsx
-
-var removeNullishFields = (obj) => {
-  return JSON.parse(
-    JSON.stringify(obj, (_key, value) => {
-      return value === null ? void 0 : value;
-    })
-  );
-};
-var Form = ({
-  children,
-  className = void 0,
-  initialValues = void 0,
-  name = void 0,
-  onSubmit,
-  testId = void 0,
-  validation = void 0,
-  validationTrigger = "all"
-}) => {
-  const methods = _reacthookform.useForm.call(void 0, 
-    validation ? {
-      defaultValues: initialValues,
-      resolver: async (values) => {
-        const { data, errors, ...rest } = await validation.validateAsync(
-          removeNullishFields(values)
-        );
-        return { values: data || {}, errors: errors || {}, ...rest };
-      },
-      // set rhf mode
-      // see: https://react-hook-form.com/docs/useform#mode
-      mode: validationTrigger === "all-instant" ? "all" : validationTrigger
-    } : {
-      defaultValues: initialValues
-    }
-  );
-  _react.useEffect.call(void 0, () => {
-    if (validationTrigger === "all-instant") {
-      methods.trigger();
-    }
-  }, []);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWQRM7G4Ccjs.FormContext_default, { ...methods, validation, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-row justify-between gap-6", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "form",
-      {
-        className: _classnames2.default.call(void 0, "flex-grow", className),
-        "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, testId || name || ""),
-        name,
-        onSubmit: methods.handleSubmit(onSubmit),
-        children
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormDebugViewer_default, { className: "w-96 flex-shrink" })
-  ] }) });
-};
-var Form_default = Form;
-
-// src/Form/index.ts
-var Form_default2 = Form_default;
-
-
-exports.default = Form_default2;
+exports.Form = _chunkII57W3V2cjs.Form_default; exports.default = _chunkII57W3V2cjs.Form_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Form/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Form/Form.tsx","../../src/Form/subcomponents/FormDebugViewer.tsx","../../src/Form/index.ts"],"names":["useEffect","cn","jsx","jsxs","Form_default"],"mappings":"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","sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport cn from 'classnames';\n\nimport {slugify} from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n  return JSON.parse(\n    JSON.stringify(obj, (_key, value) => {\n      return value === null ? undefined : value;\n    }),\n  );\n};\n\ninterface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\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?:\n    | 'onChange'\n    | 'onBlur'\n    | 'onSubmit'\n    | 'onTouched'\n    | 'all'\n    | 'all-instant';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  const methods = useForm(\n    validation\n      ? {\n          defaultValues: initialValues,\n          resolver: async (values) => {\n            const { data, errors, ...rest } = await validation.validateAsync(\n              removeNullishFields(values),\n          );\n            // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n            return { values: data || {}, errors: errors || {}, ...rest };\n          },\n          // set rhf mode\n          // see: https://react-hook-form.com/docs/useform#mode\n          mode: validationTrigger === 'all-instant' ? 'all' : validationTrigger,\n        }\n      : {\n          defaultValues: initialValues,\n        },\n  );\n\n  useEffect(() => {\n    if (validationTrigger === 'all-instant') {\n      methods.trigger();\n    }\n  }, []);\n\n  return (\n    <FormProvider {...methods} validation={validation}>\n      <div className=\"flex w-full flex-row justify-between gap-6\">\n        <form\n          className={cn('flex-grow', className)}\n          data-testid={slugify(testId || name || '')}\n          name={name}\n          onSubmit={methods.handleSubmit(onSubmit)}\n        >\n          {children}\n        </form>\n        <FormDebugViewer className=\"w-96 flex-shrink\" />\n      </div>\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\nimport Card from '@fuf-stack/pixels/Card';\nimport useLocalStorage from '@fuf-stack/pixels/hooks/useLocalStorage';\nimport Json from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    watch,\n    formState: { dirtyFields, isValid, isSubmitting },\n    validation,\n  } = useFormContext();\n\n  const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n  const [validationErrors, setValidationErrors] = useState<\n    VetoError['errors'] | null\n  >(null);\n\n  const formValues = watch();\n\n  useEffect(() => {\n    const updateValidationErrors = async () => {\n      if (validation) {\n        const validateResult = await validation?.validateAsync(formValues);\n        setValidationErrors(validateResult?.errors);\n      }\n    };\n    updateValidationErrors();\n  }, [JSON.stringify(formValues)]);\n\n  if (!debug) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        onClick={() => setDebug(!debug)}\n        className=\"absolute bottom-2.5 right-2.5 w-5 text-default-400\"\n        variant=\"light\"\n        icon={<FaBug />}\n      />\n    );\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            icon={<FaTimes className=\"text-danger\" />}\n            onClick={() => setDebug(false)}\n            size=\"sm\"\n            variant=\"flat\"\n          />\n        </div>\n      }\n    >\n      <Json\n        value={{\n          values: formValues,\n          errors: validationErrors,\n          dirtyFields,\n          isValid,\n          isSubmitting,\n        }}\n      />\n    </Card>\n  );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport default Form;\n"]}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/Form/index.d.cts

@@ -1,29 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { VetoInstance } from '@fuf-stack/veto';
-import { ReactNode } from 'react';
-import { FieldValues, SubmitHandler } from 'react-hook-form';
+import { F as Form } from '../Form-Bv0R3QNk.cjs';
+export { a as FormProps } from '../Form-Bv0R3QNk.cjs';
+import 'react/jsx-runtime';
+import '@fuf-stack/veto';
+import 'react';
+import 'react-hook-form';
 
-interface FormProps {
-    /** form children */
-    children: ReactNode | ReactNode[];
-    /** CSS class name */
-    className?: string | string[];
-    /** 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' | 'all-instant';
-}
-/**
- * Form component that has to wrap every uniform
- */
-declare const Form: ({ children, className, initialValues, name, onSubmit, testId, validation, validationTrigger, }: FormProps) => react_jsx_runtime.JSX.Element;
 
-export { Form as default };
+
+export { Form, Form as default };

package/dist/Form/index.d.ts

@@ -1,29 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { VetoInstance } from '@fuf-stack/veto';
-import { ReactNode } from 'react';
-import { FieldValues, SubmitHandler } from 'react-hook-form';
+import { F as Form } from '../Form-Bv0R3QNk.js';
+export { a as FormProps } from '../Form-Bv0R3QNk.js';
+import 'react/jsx-runtime';
+import '@fuf-stack/veto';
+import 'react';
+import 'react-hook-form';
 
-interface FormProps {
-    /** form children */
-    children: ReactNode | ReactNode[];
-    /** CSS class name */
-    className?: string | string[];
-    /** 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' | 'all-instant';
-}
-/**
- * Form component that has to wrap every uniform
- */
-declare const Form: ({ children, className, initialValues, name, onSubmit, testId, validation, validationTrigger, }: FormProps) => react_jsx_runtime.JSX.Element;
 
-export { Form as default };
+
+export { Form, Form as default };

package/dist/Form/index.js

@@ -1,149 +1,11 @@
 import {
-  FormContext_default,
-  useFormContext
-} from "../chunk-BCMPSLSG.js";
-import {
-  slugify
-} from "../chunk-V46BHM2U.js";
-
-// src/Form/Form.tsx
-import { useEffect as useEffect2 } from "react";
-import { useForm } from "react-hook-form";
-import cn2 from "classnames";
-
-// src/Form/subcomponents/FormDebugViewer.tsx
-import { useEffect, useState } from "react";
-import { FaTimes } from "react-icons/fa";
-import { FaBug } from "react-icons/fa6";
-import cn from "classnames";
-import Button from "@fuf-stack/pixels/Button";
-import Card from "@fuf-stack/pixels/Card";
-import useLocalStorage from "@fuf-stack/pixels/hooks/useLocalStorage";
-import Json from "@fuf-stack/pixels/Json";
-import { jsx, jsxs } from "react/jsx-runtime";
-var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
-var FormDebugViewer = ({ className = void 0 }) => {
-  const {
-    watch,
-    formState: { dirtyFields, isValid, isSubmitting },
-    validation
-  } = useFormContext();
-  const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);
-  const [validationErrors, setValidationErrors] = useState(null);
-  const formValues = watch();
-  useEffect(() => {
-    const updateValidationErrors = async () => {
-      if (validation) {
-        const validateResult = await validation?.validateAsync(formValues);
-        setValidationErrors(validateResult?.errors);
-      }
-    };
-    updateValidationErrors();
-  }, [JSON.stringify(formValues)]);
-  if (!debug) {
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        ariaLabel: "Enable form debug mode",
-        onClick: () => setDebug(!debug),
-        className: "absolute bottom-2.5 right-2.5 w-5 text-default-400",
-        variant: "light",
-        icon: /* @__PURE__ */ jsx(FaBug, {})
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    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,
-          {
-            icon: /* @__PURE__ */ jsx(FaTimes, { className: "text-danger" }),
-            onClick: () => setDebug(false),
-            size: "sm",
-            variant: "flat"
-          }
-        )
-      ] }),
-      children: /* @__PURE__ */ jsx(
-        Json,
-        {
-          value: {
-            values: formValues,
-            errors: validationErrors,
-            dirtyFields,
-            isValid,
-            isSubmitting
-          }
-        }
-      )
-    }
-  );
-};
-var FormDebugViewer_default = FormDebugViewer;
-
-// src/Form/Form.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var removeNullishFields = (obj) => {
-  return JSON.parse(
-    JSON.stringify(obj, (_key, value) => {
-      return value === null ? void 0 : value;
-    })
-  );
-};
-var Form = ({
-  children,
-  className = void 0,
-  initialValues = void 0,
-  name = void 0,
-  onSubmit,
-  testId = void 0,
-  validation = void 0,
-  validationTrigger = "all"
-}) => {
-  const methods = useForm(
-    validation ? {
-      defaultValues: initialValues,
-      resolver: async (values) => {
-        const { data, errors, ...rest } = await validation.validateAsync(
-          removeNullishFields(values)
-        );
-        return { values: data || {}, errors: errors || {}, ...rest };
-      },
-      // set rhf mode
-      // see: https://react-hook-form.com/docs/useform#mode
-      mode: validationTrigger === "all-instant" ? "all" : validationTrigger
-    } : {
-      defaultValues: initialValues
-    }
-  );
-  useEffect2(() => {
-    if (validationTrigger === "all-instant") {
-      methods.trigger();
-    }
-  }, []);
-  return /* @__PURE__ */ jsx2(FormContext_default, { ...methods, validation, children: /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-row justify-between gap-6", children: [
-    /* @__PURE__ */ jsx2(
-      "form",
-      {
-        className: cn2("flex-grow", className),
-        "data-testid": slugify(testId || name || ""),
-        name,
-        onSubmit: methods.handleSubmit(onSubmit),
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx2(FormDebugViewer_default, { className: "w-96 flex-shrink" })
-  ] }) });
-};
-var Form_default = Form;
-
-// src/Form/index.ts
-var Form_default2 = Form_default;
+  Form_default,
+  Form_default2
+} from "../chunk-BQUVQMFA.js";
+import "../chunk-BCMPSLSG.js";
+import "../chunk-V46BHM2U.js";
 export {
+  Form_default as Form,
   Form_default2 as default
 };
 //# sourceMappingURL=index.js.map

package/dist/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Form/Form.tsx","../../src/Form/subcomponents/FormDebugViewer.tsx","../../src/Form/index.ts"],"sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport cn from 'classnames';\n\nimport {slugify} from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n  return JSON.parse(\n    JSON.stringify(obj, (_key, value) => {\n      return value === null ? undefined : value;\n    }),\n  );\n};\n\ninterface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\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?:\n    | 'onChange'\n    | 'onBlur'\n    | 'onSubmit'\n    | 'onTouched'\n    | 'all'\n    | 'all-instant';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  const methods = useForm(\n    validation\n      ? {\n          defaultValues: initialValues,\n          resolver: async (values) => {\n            const { data, errors, ...rest } = await validation.validateAsync(\n              removeNullishFields(values),\n          );\n            // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n            return { values: data || {}, errors: errors || {}, ...rest };\n          },\n          // set rhf mode\n          // see: https://react-hook-form.com/docs/useform#mode\n          mode: validationTrigger === 'all-instant' ? 'all' : validationTrigger,\n        }\n      : {\n          defaultValues: initialValues,\n        },\n  );\n\n  useEffect(() => {\n    if (validationTrigger === 'all-instant') {\n      methods.trigger();\n    }\n  }, []);\n\n  return (\n    <FormProvider {...methods} validation={validation}>\n      <div className=\"flex w-full flex-row justify-between gap-6\">\n        <form\n          className={cn('flex-grow', className)}\n          data-testid={slugify(testId || name || '')}\n          name={name}\n          onSubmit={methods.handleSubmit(onSubmit)}\n        >\n          {children}\n        </form>\n        <FormDebugViewer className=\"w-96 flex-shrink\" />\n      </div>\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\nimport Card from '@fuf-stack/pixels/Card';\nimport useLocalStorage from '@fuf-stack/pixels/hooks/useLocalStorage';\nimport Json from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    watch,\n    formState: { dirtyFields, isValid, isSubmitting },\n    validation,\n  } = useFormContext();\n\n  const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n  const [validationErrors, setValidationErrors] = useState<\n    VetoError['errors'] | null\n  >(null);\n\n  const formValues = watch();\n\n  useEffect(() => {\n    const updateValidationErrors = async () => {\n      if (validation) {\n        const validateResult = await validation?.validateAsync(formValues);\n        setValidationErrors(validateResult?.errors);\n      }\n    };\n    updateValidationErrors();\n  }, [JSON.stringify(formValues)]);\n\n  if (!debug) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        onClick={() => setDebug(!debug)}\n        className=\"absolute bottom-2.5 right-2.5 w-5 text-default-400\"\n        variant=\"light\"\n        icon={<FaBug />}\n      />\n    );\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            icon={<FaTimes className=\"text-danger\" />}\n            onClick={() => setDebug(false)}\n            size=\"sm\"\n            variant=\"flat\"\n          />\n        </div>\n      }\n    >\n      <Json\n        value={{\n          values: formValues,\n          errors: validationErrors,\n          dirtyFields,\n          isValid,\n          isSubmitting,\n        }}\n      />\n    </Card>\n  );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport default Form;\n"],"mappings":"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","names":["useEffect","cn","jsx","jsxs","useEffect","cn","Form_default"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Form-Bv0R3QNk.d.cts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VetoInstance } from '@fuf-stack/veto';
+import { ReactNode } from 'react';
+import { FieldValues, SubmitHandler } from 'react-hook-form';
+
+interface FormProps {
+    /** form children */
+    children: ReactNode | ReactNode[];
+    /** CSS class name */
+    className?: string | string[];
+    /** 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' | 'all-instant';
+}
+/**
+ * Form component that has to wrap every uniform
+ */
+declare const Form: ({ children, className, initialValues, name, onSubmit, testId, validation, validationTrigger, }: FormProps) => react_jsx_runtime.JSX.Element;
+
+export { Form as F, type FormProps as a };

package/dist/Form-Bv0R3QNk.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VetoInstance } from '@fuf-stack/veto';
+import { ReactNode } from 'react';
+import { FieldValues, SubmitHandler } from 'react-hook-form';
+
+interface FormProps {
+    /** form children */
+    children: ReactNode | ReactNode[];
+    /** CSS class name */
+    className?: string | string[];
+    /** 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' | 'all-instant';
+}
+/**
+ * Form component that has to wrap every uniform
+ */
+declare const Form: ({ children, className, initialValues, name, onSubmit, testId, validation, validationTrigger, }: FormProps) => react_jsx_runtime.JSX.Element;
+
+export { Form as F, type FormProps as a };

package/dist/Grid/index.cjs

@@ -1,18 +1,9 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/Grid/Grid.tsx
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-var _jsxruntime = require('react/jsx-runtime');
-var Grid = ({
-  children = null,
-  className = void 0,
-  testId = void 0
-}) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _classnames2.default.call(void 0, "grid gap-6", className), "data-testid": testId, children });
-};
-var Grid_default = Grid;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-// src/Grid/index.ts
-var Grid_default2 = Grid_default;
 
+var _chunkZPFKVKGVcjs = require('../chunk-ZPFKVKGV.cjs');
 
-exports.default = Grid_default2;
+
+
+exports.Grid = _chunkZPFKVKGVcjs.Grid_default; exports.default = _chunkZPFKVKGVcjs.Grid_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Grid/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Grid/Grid.tsx","../../src/Grid/index.ts"],"names":["Grid_default"],"mappings":";AAEA,OAAO,QAAQ;AAoBX;AANJ,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AACX,MAAiB;AACf,SACE,oBAAC,SAAI,WAAW,GAAG,cAAc,SAAS,GAAG,eAAa,QACvD,UACH;AAEJ;AAEA,IAAO,eAAQ;;;AC1Bf,IAAOA,gBAAQ","sourcesContent":["import type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\ninterface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport default Grid;\n"]}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/Grid/index.d.cts

@@ -1,17 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { G as Grid } from '../Grid-DF3L9NF3.cjs';
+export { a as GridProps } from '../Grid-DF3L9NF3.cjs';
+import 'react/jsx-runtime';
+import 'react';
 
-interface GridProps {
-    /** child components */
-    children?: ReactNode;
-    /** CSS class name */
-    className?: string;
-    /** HTML data-testid attribute used in e2e tests */
-    testId?: string;
-}
-/**
- * Defines the default grid for form components
- */
-declare const Grid: ({ children, className, testId, }: GridProps) => react_jsx_runtime.JSX.Element;
 
-export { Grid as default };
+
+export { Grid, Grid as default };

package/dist/Grid/index.d.ts

@@ -1,17 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { G as Grid } from '../Grid-DF3L9NF3.js';
+export { a as GridProps } from '../Grid-DF3L9NF3.js';
+import 'react/jsx-runtime';
+import 'react';
 
-interface GridProps {
-    /** child components */
-    children?: ReactNode;
-    /** CSS class name */
-    className?: string;
-    /** HTML data-testid attribute used in e2e tests */
-    testId?: string;
-}
-/**
- * Defines the default grid for form components
- */
-declare const Grid: ({ children, className, testId, }: GridProps) => react_jsx_runtime.JSX.Element;
 
-export { Grid as default };
+
+export { Grid, Grid as default };

package/dist/Grid/index.js

@@ -1,18 +1,9 @@
-// src/Grid/Grid.tsx
-import cn from "classnames";
-import { jsx } from "react/jsx-runtime";
-var Grid = ({
-  children = null,
-  className = void 0,
-  testId = void 0
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6", className), "data-testid": testId, children });
-};
-var Grid_default = Grid;
-
-// src/Grid/index.ts
-var Grid_default2 = Grid_default;
+import {
+  Grid_default,
+  Grid_default2
+} from "../chunk-4MEKDDB2.js";
 export {
+  Grid_default as Grid,
   Grid_default2 as default
 };
 //# sourceMappingURL=index.js.map

package/dist/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Grid/Grid.tsx","../../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\ninterface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport default Grid;\n"],"mappings":";AAEA,OAAO,QAAQ;AAoBX;AANJ,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AACX,MAAiB;AACf,SACE,oBAAC,SAAI,WAAW,GAAG,cAAc,SAAS,GAAG,eAAa,QACvD,UACH;AAEJ;AAEA,IAAO,eAAQ;;;AC1Bf,IAAOA,gBAAQ;","names":["Grid_default"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Grid-DF3L9NF3.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface GridProps {
+    /** child components */
+    children?: ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
+}
+/**
+ * Defines the default grid for form components
+ */
+declare const Grid: ({ children, className, testId, }: GridProps) => react_jsx_runtime.JSX.Element;
+
+export { Grid as G, type GridProps as a };

package/dist/Grid-DF3L9NF3.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface GridProps {
+    /** child components */
+    children?: ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
+}
+/**
+ * Defines the default grid for form components
+ */
+declare const Grid: ({ children, className, testId, }: GridProps) => react_jsx_runtime.JSX.Element;
+
+export { Grid as G, type GridProps as a };

package/dist/SubmitButton/index.cjs

@@ -40,5 +40,6 @@ var SubmitButton_default = SubmitButton;
 var SubmitButton_default2 = SubmitButton_default;
 
 
-exports.default = SubmitButton_default2;
+
+exports.SubmitButton = SubmitButton_default; exports.default = SubmitButton_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/SubmitButton/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SubmitButton/SubmitButton.tsx","../../src/SubmitButton/index.ts"],"names":["SubmitButton_default"],"mappings":";;;;;;;;AAGA,OAAO,QAAQ;AAEf,OAAO,YAAY;AAoCf;AAbJ,IAAM,eAAe,CAAC;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX,MAAyB;AACvB,QAAM;AAAA,IACJ,WAAW,EAAE,SAAS,cAAc,aAAa;AAAA,EACnD,IAAI,eAAe;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB;AAAA,MACA,QAAQ,QAAQ,MAAM;AAAA,MACtB,UAAU,CAAC,WAAW,gBAAgB;AAAA,MACtC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;ACrDf,IAAOA,wBAAQ","sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels/Button';\nimport type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\n\ninterface SubmitButtonProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string | string[];\n  /** color of the button */\n  color?: ButtonProps['color'];\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** function called when the button is pressed. */\n  onClick?: ButtonProps['onClick'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n  children = 'Submit',\n  className = undefined,\n  color = 'success',\n  loading = false,\n  onClick = undefined,\n  testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n  const {\n    formState: { isValid, isSubmitting, isValidating },\n  } = useFormContext();\n\n  return (\n    <Button\n      className={cn(className)}\n      color={color}\n      testId={slugify(testId)}\n      disabled={!isValid || isSubmitting || isValidating}\n      loading={loading}\n      onClick={onClick}\n      type=\"submit\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport default SubmitButton;\n"]}
+{"version":3,"sources":["../../src/SubmitButton/SubmitButton.tsx","../../src/SubmitButton/index.ts"],"names":["SubmitButton_default"],"mappings":";;;;;;;;AAGA,OAAO,QAAQ;AAEf,OAAO,YAAY;AAoCf;AAbJ,IAAM,eAAe,CAAC;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX,MAAyB;AACvB,QAAM;AAAA,IACJ,WAAW,EAAE,SAAS,cAAc,aAAa;AAAA,EACnD,IAAI,eAAe;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB;AAAA,MACA,QAAQ,QAAQ,MAAM;AAAA,MACtB,UAAU,CAAC,WAAW,gBAAgB;AAAA,MACtC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;ACjDf,IAAOA,wBAAQ","sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels/Button';\nimport type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string | string[];\n  /** color of the button */\n  color?: ButtonProps['color'];\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** function called when the button is pressed. */\n  onClick?: ButtonProps['onClick'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n  children = 'Submit',\n  className = undefined,\n  color = 'success',\n  loading = false,\n  onClick = undefined,\n  testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n  const {\n    formState: { isValid, isSubmitting, isValidating },\n  } = useFormContext();\n\n  return (\n    <Button\n      className={cn(className)}\n      color={color}\n      testId={slugify(testId)}\n      disabled={!isValid || isSubmitting || isValidating}\n      loading={loading}\n      onClick={onClick}\n      type=\"submit\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"]}

package/dist/SubmitButton/index.d.cts

@@ -21,4 +21,4 @@ interface SubmitButtonProps {
  */
 declare const SubmitButton: ({ children, className, color, loading, onClick, testId, }: SubmitButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { SubmitButton as default };
+export { SubmitButton, type SubmitButtonProps, SubmitButton as default };

package/dist/SubmitButton/index.d.ts

@@ -21,4 +21,4 @@ interface SubmitButtonProps {
  */
 declare const SubmitButton: ({ children, className, color, loading, onClick, testId, }: SubmitButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { SubmitButton as default };
+export { SubmitButton, type SubmitButtonProps, SubmitButton as default };

package/dist/SubmitButton/index.js

@@ -39,6 +39,7 @@ var SubmitButton_default = SubmitButton;
 // src/SubmitButton/index.ts
 var SubmitButton_default2 = SubmitButton_default;
 export {
+  SubmitButton_default as SubmitButton,
   SubmitButton_default2 as default
 };
 //# sourceMappingURL=index.js.map

package/dist/SubmitButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SubmitButton/SubmitButton.tsx","../../src/SubmitButton/index.ts"],"sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels/Button';\nimport type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\n\ninterface SubmitButtonProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string | string[];\n  /** color of the button */\n  color?: ButtonProps['color'];\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** function called when the button is pressed. */\n  onClick?: ButtonProps['onClick'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n  children = 'Submit',\n  className = undefined,\n  color = 'success',\n  loading = false,\n  onClick = undefined,\n  testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n  const {\n    formState: { isValid, isSubmitting, isValidating },\n  } = useFormContext();\n\n  return (\n    <Button\n      className={cn(className)}\n      color={color}\n      testId={slugify(testId)}\n      disabled={!isValid || isSubmitting || isValidating}\n      loading={loading}\n      onClick={onClick}\n      type=\"submit\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport default SubmitButton;\n"],"mappings":";;;;;;;;AAGA,OAAO,QAAQ;AAEf,OAAO,YAAY;AAoCf;AAbJ,IAAM,eAAe,CAAC;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX,MAAyB;AACvB,QAAM;AAAA,IACJ,WAAW,EAAE,SAAS,cAAc,aAAa;AAAA,EACnD,IAAI,eAAe;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB;AAAA,MACA,QAAQ,QAAQ,MAAM;AAAA,MACtB,UAAU,CAAC,WAAW,gBAAgB;AAAA,MACtC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;ACrDf,IAAOA,wBAAQ;","names":["SubmitButton_default"]}
+{"version":3,"sources":["../../src/SubmitButton/SubmitButton.tsx","../../src/SubmitButton/index.ts"],"sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels/Button';\nimport type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string | string[];\n  /** color of the button */\n  color?: ButtonProps['color'];\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** function called when the button is pressed. */\n  onClick?: ButtonProps['onClick'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n  children = 'Submit',\n  className = undefined,\n  color = 'success',\n  loading = false,\n  onClick = undefined,\n  testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n  const {\n    formState: { isValid, isSubmitting, isValidating },\n  } = useFormContext();\n\n  return (\n    <Button\n      className={cn(className)}\n      color={color}\n      testId={slugify(testId)}\n      disabled={!isValid || isSubmitting || isValidating}\n      loading={loading}\n      onClick={onClick}\n      type=\"submit\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"],"mappings":";;;;;;;;AAGA,OAAO,QAAQ;AAEf,OAAO,YAAY;AAoCf;AAbJ,IAAM,eAAe,CAAC;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX,MAAyB;AACvB,QAAM;AAAA,IACJ,WAAW,EAAE,SAAS,cAAc,aAAa;AAAA,EACnD,IAAI,eAAe;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB;AAAA,MACA,QAAQ,QAAQ,MAAM;AAAA,MACtB,UAAU,CAAC,WAAW,gBAAgB;AAAA,MACtC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;ACjDf,IAAOA,wBAAQ;","names":["SubmitButton_default"]}

package/dist/chunk-4MEKDDB2.js

@@ -0,0 +1,20 @@
+// src/Grid/Grid.tsx
+import cn from "classnames";
+import { jsx } from "react/jsx-runtime";
+var Grid = ({
+  children = null,
+  className = void 0,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6", className), "data-testid": testId, children });
+};
+var Grid_default = Grid;
+
+// src/Grid/index.ts
+var Grid_default2 = Grid_default;
+
+export {
+  Grid_default,
+  Grid_default2
+};
+//# sourceMappingURL=chunk-4MEKDDB2.js.map

package/dist/chunk-4MEKDDB2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";AAEA,OAAO,QAAQ;AAoBX;AANJ,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AACX,MAAiB;AACf,SACE,oBAAC,SAAI,WAAW,GAAG,cAAc,SAAS,GAAG,eAAa,QACvD,UACH;AAEJ;AAEA,IAAO,eAAQ;;;ACtBf,IAAOA,gBAAQ;","names":["Grid_default"]}

package/dist/chunk-BQUVQMFA.js

@@ -0,0 +1,158 @@
+import {
+  FormContext_default,
+  useFormContext
+} from "./chunk-BCMPSLSG.js";
+import {
+  slugify
+} from "./chunk-V46BHM2U.js";
+
+// src/Form/Form.tsx
+import { useEffect as useEffect2 } from "react";
+import { useForm } from "react-hook-form";
+import cn2 from "classnames";
+
+// src/Form/subcomponents/FormDebugViewer.tsx
+import { useEffect, useState } from "react";
+import { FaTimes } from "react-icons/fa";
+import { FaBug } from "react-icons/fa6";
+import cn from "classnames";
+import Button from "@fuf-stack/pixels/Button";
+import Card from "@fuf-stack/pixels/Card";
+import useLocalStorage from "@fuf-stack/pixels/hooks/useLocalStorage";
+import Json from "@fuf-stack/pixels/Json";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
+var FormDebugViewer = ({ className = void 0 }) => {
+  const {
+    watch,
+    formState: { dirtyFields, isValid, isSubmitting },
+    validation
+  } = useFormContext();
+  const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);
+  const [validationErrors, setValidationErrors] = useState(null);
+  const formValues = watch();
+  useEffect(() => {
+    const updateValidationErrors = async () => {
+      if (validation) {
+        const validateResult = await validation?.validateAsync(formValues);
+        setValidationErrors(validateResult?.errors);
+      }
+    };
+    updateValidationErrors();
+  }, [JSON.stringify(formValues)]);
+  if (!debug) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ariaLabel: "Enable form debug mode",
+        onClick: () => setDebug(!debug),
+        className: "absolute bottom-2.5 right-2.5 w-5 text-default-400",
+        variant: "light",
+        icon: /* @__PURE__ */ jsx(FaBug, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    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,
+          {
+            icon: /* @__PURE__ */ jsx(FaTimes, { className: "text-danger" }),
+            onClick: () => setDebug(false),
+            size: "sm",
+            variant: "flat"
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx(
+        Json,
+        {
+          value: {
+            values: formValues,
+            errors: validationErrors,
+            dirtyFields,
+            isValid,
+            isSubmitting
+          }
+        }
+      )
+    }
+  );
+};
+var FormDebugViewer_default = FormDebugViewer;
+
+// src/Form/Form.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var removeNullishFields = (obj) => {
+  return JSON.parse(
+    JSON.stringify(obj, (_key, value) => {
+      return value === null ? void 0 : value;
+    })
+  );
+};
+var Form = ({
+  children,
+  className = void 0,
+  initialValues = void 0,
+  name = void 0,
+  onSubmit,
+  testId = void 0,
+  validation = void 0,
+  validationTrigger = "all"
+}) => {
+  const methods = useForm(
+    validation ? {
+      defaultValues: initialValues,
+      resolver: async (values) => {
+        const { data, errors, ...rest } = await validation.validateAsync(
+          removeNullishFields(values)
+        );
+        return { values: data || {}, errors: errors || {}, ...rest };
+      },
+      // set rhf mode
+      // see: https://react-hook-form.com/docs/useform#mode
+      mode: validationTrigger === "all-instant" ? "all" : validationTrigger
+    } : {
+      defaultValues: initialValues
+    }
+  );
+  useEffect2(
+    () => {
+      if (validationTrigger === "all-instant") {
+        methods.trigger();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [validationTrigger]
+  );
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    /* @__PURE__ */ jsx2(FormContext_default, { ...methods, validation, children: /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-row justify-between gap-6", children: [
+      /* @__PURE__ */ jsx2(
+        "form",
+        {
+          className: cn2("flex-grow", className),
+          "data-testid": slugify(testId || name || ""),
+          name,
+          onSubmit: methods.handleSubmit(onSubmit),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx2(FormDebugViewer_default, { className: "w-96 flex-shrink" })
+    ] }) })
+  );
+};
+var Form_default = Form;
+
+// src/Form/index.ts
+var Form_default2 = Form_default;
+
+export {
+  Form_default,
+  Form_default2
+};
+//# sourceMappingURL=chunk-BQUVQMFA.js.map

package/dist/chunk-BQUVQMFA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport cn from 'classnames';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n  return JSON.parse(\n    JSON.stringify(obj, (_key, value) => {\n      return value === null ? undefined : value;\n    }),\n  );\n};\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\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?:\n    | 'onChange'\n    | 'onBlur'\n    | 'onSubmit'\n    | 'onTouched'\n    | 'all'\n    | 'all-instant';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  const methods = useForm(\n    validation\n      ? {\n          defaultValues: initialValues,\n          resolver: async (values) => {\n            const { data, errors, ...rest } = await validation.validateAsync(\n              removeNullishFields(values),\n          );\n            // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n            return { values: data || {}, errors: errors || {}, ...rest };\n          },\n          // set rhf mode\n          // see: https://react-hook-form.com/docs/useform#mode\n          mode: validationTrigger === 'all-instant' ? 'all' : validationTrigger,\n        }\n      : {\n          defaultValues: initialValues,\n        },\n  );\n\n  useEffect(\n    () => {\n      if (validationTrigger === 'all-instant') {\n        methods.trigger();\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [validationTrigger],\n  );\n\n  return (\n    // eslint-disable-next-line react/jsx-props-no-spreading\n    <FormProvider {...methods} validation={validation}>\n      <div className=\"flex w-full flex-row justify-between gap-6\">\n        <form\n          className={cn('flex-grow', className)}\n          data-testid={slugify(testId || name || '')}\n          name={name}\n          onSubmit={methods.handleSubmit(onSubmit)}\n        >\n          {children}\n        </form>\n        <FormDebugViewer className=\"w-96 flex-shrink\" />\n      </div>\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\nimport Card from '@fuf-stack/pixels/Card';\nimport useLocalStorage from '@fuf-stack/pixels/hooks/useLocalStorage';\nimport Json from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    watch,\n    formState: { dirtyFields, isValid, isSubmitting },\n    validation,\n  } = useFormContext();\n\n  const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n  const [validationErrors, setValidationErrors] = useState<\n    VetoError['errors'] | null\n  >(null);\n\n  const formValues = watch();\n\n  useEffect(() => {\n    const updateValidationErrors = async () => {\n      if (validation) {\n        const validateResult = await validation?.validateAsync(formValues);\n        setValidationErrors(validateResult?.errors);\n      }\n    };\n    updateValidationErrors();\n  }, [JSON.stringify(formValues)]);\n\n  if (!debug) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        onClick={() => setDebug(!debug)}\n        className=\"absolute bottom-2.5 right-2.5 w-5 text-default-400\"\n        variant=\"light\"\n        icon={<FaBug />}\n      />\n    );\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            icon={<FaTimes className=\"text-danger\" />}\n            onClick={() => setDebug(false)}\n            size=\"sm\"\n            variant=\"flat\"\n          />\n        </div>\n      }\n    >\n      <Json\n        value={{\n          values: formValues,\n          errors: validationErrors,\n          dirtyFields,\n          isValid,\n          isSubmitting,\n        }}\n      />\n    </Card>\n  );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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","names":["useEffect","cn","jsx","jsxs","useEffect","cn","Form_default"]}

package/dist/chunk-II57W3V2.cjs

@@ -0,0 +1,158 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+var _chunkWQRM7G4Ccjs = require('./chunk-WQRM7G4C.cjs');
+
+
+var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
+
+// src/Form/Form.tsx
+var _react = require('react');
+var _reacthookform = require('react-hook-form');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// src/Form/subcomponents/FormDebugViewer.tsx
+
+var _fa = require('react-icons/fa');
+var _fa6 = require('react-icons/fa6');
+
+var _Button = require('@fuf-stack/pixels/Button'); var _Button2 = _interopRequireDefault(_Button);
+var _Card = require('@fuf-stack/pixels/Card'); var _Card2 = _interopRequireDefault(_Card);
+var _useLocalStorage = require('@fuf-stack/pixels/hooks/useLocalStorage'); var _useLocalStorage2 = _interopRequireDefault(_useLocalStorage);
+var _Json = require('@fuf-stack/pixels/Json'); var _Json2 = _interopRequireDefault(_Json);
+var _jsxruntime = require('react/jsx-runtime');
+var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
+var FormDebugViewer = ({ className = void 0 }) => {
+  const {
+    watch,
+    formState: { dirtyFields, isValid, isSubmitting },
+    validation
+  } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
+  const [debug, setDebug] = _useLocalStorage2.default.call(void 0, LOCALSTORAGE_DEBUG_KEY, false);
+  const [validationErrors, setValidationErrors] = _react.useState.call(void 0, null);
+  const formValues = watch();
+  _react.useEffect.call(void 0, () => {
+    const updateValidationErrors = async () => {
+      if (validation) {
+        const validateResult = await _optionalChain([validation, 'optionalAccess', _ => _.validateAsync, 'call', _2 => _2(formValues)]);
+        setValidationErrors(_optionalChain([validateResult, 'optionalAccess', _3 => _3.errors]));
+      }
+    };
+    updateValidationErrors();
+  }, [JSON.stringify(formValues)]);
+  if (!debug) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Button2.default,
+      {
+        ariaLabel: "Enable form debug mode",
+        onClick: () => setDebug(!debug),
+        className: "absolute bottom-2.5 right-2.5 w-5 text-default-400",
+        variant: "light",
+        icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaBug, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Card2.default,
+    {
+      className: _classnames2.default.call(void 0, className),
+      header: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-row justify-between", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-lg", children: "Debug Mode" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Button2.default,
+          {
+            icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, { className: "text-danger" }),
+            onClick: () => setDebug(false),
+            size: "sm",
+            variant: "flat"
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Json2.default,
+        {
+          value: {
+            values: formValues,
+            errors: validationErrors,
+            dirtyFields,
+            isValid,
+            isSubmitting
+          }
+        }
+      )
+    }
+  );
+};
+var FormDebugViewer_default = FormDebugViewer;
+
+// src/Form/Form.tsx
+
+var removeNullishFields = (obj) => {
+  return JSON.parse(
+    JSON.stringify(obj, (_key, value) => {
+      return value === null ? void 0 : value;
+    })
+  );
+};
+var Form = ({
+  children,
+  className = void 0,
+  initialValues = void 0,
+  name = void 0,
+  onSubmit,
+  testId = void 0,
+  validation = void 0,
+  validationTrigger = "all"
+}) => {
+  const methods = _reacthookform.useForm.call(void 0, 
+    validation ? {
+      defaultValues: initialValues,
+      resolver: async (values) => {
+        const { data, errors, ...rest } = await validation.validateAsync(
+          removeNullishFields(values)
+        );
+        return { values: data || {}, errors: errors || {}, ...rest };
+      },
+      // set rhf mode
+      // see: https://react-hook-form.com/docs/useform#mode
+      mode: validationTrigger === "all-instant" ? "all" : validationTrigger
+    } : {
+      defaultValues: initialValues
+    }
+  );
+  _react.useEffect.call(void 0, 
+    () => {
+      if (validationTrigger === "all-instant") {
+        methods.trigger();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [validationTrigger]
+  );
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWQRM7G4Ccjs.FormContext_default, { ...methods, validation, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-row justify-between gap-6", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "form",
+        {
+          className: _classnames2.default.call(void 0, "flex-grow", className),
+          "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, testId || name || ""),
+          name,
+          onSubmit: methods.handleSubmit(onSubmit),
+          children
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormDebugViewer_default, { className: "w-96 flex-shrink" })
+    ] }) })
+  );
+};
+var Form_default = Form;
+
+// src/Form/index.ts
+var Form_default2 = Form_default;
+
+
+
+
+exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
+//# sourceMappingURL=chunk-II57W3V2.cjs.map

package/dist/chunk-II57W3V2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["useEffect","cn","jsx","jsxs","Form_default"],"mappings":"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","sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport cn from 'classnames';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n  return JSON.parse(\n    JSON.stringify(obj, (_key, value) => {\n      return value === null ? undefined : value;\n    }),\n  );\n};\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\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?:\n    | 'onChange'\n    | 'onBlur'\n    | 'onSubmit'\n    | 'onTouched'\n    | 'all'\n    | 'all-instant';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  const methods = useForm(\n    validation\n      ? {\n          defaultValues: initialValues,\n          resolver: async (values) => {\n            const { data, errors, ...rest } = await validation.validateAsync(\n              removeNullishFields(values),\n          );\n            // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n            return { values: data || {}, errors: errors || {}, ...rest };\n          },\n          // set rhf mode\n          // see: https://react-hook-form.com/docs/useform#mode\n          mode: validationTrigger === 'all-instant' ? 'all' : validationTrigger,\n        }\n      : {\n          defaultValues: initialValues,\n        },\n  );\n\n  useEffect(\n    () => {\n      if (validationTrigger === 'all-instant') {\n        methods.trigger();\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [validationTrigger],\n  );\n\n  return (\n    // eslint-disable-next-line react/jsx-props-no-spreading\n    <FormProvider {...methods} validation={validation}>\n      <div className=\"flex w-full flex-row justify-between gap-6\">\n        <form\n          className={cn('flex-grow', className)}\n          data-testid={slugify(testId || name || '')}\n          name={name}\n          onSubmit={methods.handleSubmit(onSubmit)}\n        >\n          {children}\n        </form>\n        <FormDebugViewer className=\"w-96 flex-shrink\" />\n      </div>\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\nimport Card from '@fuf-stack/pixels/Card';\nimport useLocalStorage from '@fuf-stack/pixels/hooks/useLocalStorage';\nimport Json from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    watch,\n    formState: { dirtyFields, isValid, isSubmitting },\n    validation,\n  } = useFormContext();\n\n  const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n  const [validationErrors, setValidationErrors] = useState<\n    VetoError['errors'] | null\n  >(null);\n\n  const formValues = watch();\n\n  useEffect(() => {\n    const updateValidationErrors = async () => {\n      if (validation) {\n        const validateResult = await validation?.validateAsync(formValues);\n        setValidationErrors(validateResult?.errors);\n      }\n    };\n    updateValidationErrors();\n  }, [JSON.stringify(formValues)]);\n\n  if (!debug) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        onClick={() => setDebug(!debug)}\n        className=\"absolute bottom-2.5 right-2.5 w-5 text-default-400\"\n        variant=\"light\"\n        icon={<FaBug />}\n      />\n    );\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            icon={<FaTimes className=\"text-danger\" />}\n            onClick={() => setDebug(false)}\n            size=\"sm\"\n            variant=\"flat\"\n          />\n        </div>\n      }\n    >\n      <Json\n        value={{\n          values: formValues,\n          errors: validationErrors,\n          dirtyFields,\n          isValid,\n          isSubmitting,\n        }}\n      />\n    </Card>\n  );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"]}

package/dist/chunk-ZPFKVKGV.cjs

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/Grid/Grid.tsx
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _jsxruntime = require('react/jsx-runtime');
+var Grid = ({
+  children = null,
+  className = void 0,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _classnames2.default.call(void 0, "grid gap-6", className), "data-testid": testId, children });
+};
+var Grid_default = Grid;
+
+// src/Grid/index.ts
+var Grid_default2 = Grid_default;
+
+
+
+
+exports.Grid_default = Grid_default; exports.Grid_default2 = Grid_default2;
+//# sourceMappingURL=chunk-ZPFKVKGV.cjs.map

package/dist/chunk-ZPFKVKGV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"names":["Grid_default"],"mappings":";AAEA,OAAO,QAAQ;AAoBX;AANJ,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AACX,MAAiB;AACf,SACE,oBAAC,SAAI,WAAW,GAAG,cAAc,SAAS,GAAG,eAAa,QACvD,UACH;AAEJ;AAEA,IAAO,eAAQ;;;ACtBf,IAAOA,gBAAQ","sourcesContent":["import type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"]}

package/dist/index.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkII57W3V2cjs = require('./chunk-II57W3V2.cjs');
+
+
+var _chunkZPFKVKGVcjs = require('./chunk-ZPFKVKGV.cjs');
+require('./chunk-WQRM7G4C.cjs');
+require('./chunk-BBB4FEY6.cjs');
+
+
+
+exports.Form = _chunkII57W3V2cjs.Form_default; exports.Grid = _chunkZPFKVKGVcjs.Grid_default;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/index.d.cts

@@ -0,0 +1,6 @@
+export { F as Form, a as FormProps } from './Form-Bv0R3QNk.cjs';
+export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.cjs';
+import 'react/jsx-runtime';
+import '@fuf-stack/veto';
+import 'react';
+import 'react-hook-form';

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { F as Form, a as FormProps } from './Form-Bv0R3QNk.js';
+export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.js';
+import 'react/jsx-runtime';
+import '@fuf-stack/veto';
+import 'react';
+import 'react-hook-form';

package/dist/index.js

@@ -0,0 +1,13 @@
+import {
+  Form_default
+} from "./chunk-BQUVQMFA.js";
+import {
+  Grid_default
+} from "./chunk-4MEKDDB2.js";
+import "./chunk-BCMPSLSG.js";
+import "./chunk-V46BHM2U.js";
+export {
+  Form_default as Form,
+  Grid_default as Grid
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "@fuf-stack/uniform",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "fuf react form library",
   "author": "Hannes Tiede",
   "homepage": "https://github.com/fuf-stack/uniform#readme",
   "license": "MIT",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
   "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
     "./Form": {
       "import": "./dist/Form/index.js",
       "require": "./dist/Form/index.cjs",
@@ -17,11 +25,6 @@
       "require": "./dist/Grid/index.cjs",
       "types": "./dist/Grid/index.d.ts"
     },
-    "./SubmitButton": {
-      "import": "./dist/SubmitButton/index.js",
-      "require": "./dist/SubmitButton/index.cjs",
-      "types": "./dist/SubmitButton/index.d.ts"
-    },
     "./helpers": {
       "import": "./dist/helpers/index.js",
       "require": "./dist/helpers/index.cjs",
@@ -41,6 +44,11 @@
       "import": "./dist/partials/FieldValidationError/index.js",
       "require": "./dist/partials/FieldValidationError/index.cjs",
       "types": "./dist/partials/FieldValidationError/index.d.ts"
+    },
+    "./SubmitButton": {
+      "import": "./dist/SubmitButton/index.js",
+      "require": "./dist/SubmitButton/index.cjs",
+      "types": "./dist/SubmitButton/index.d.ts"
     }
   },
   "files": [
@@ -88,8 +96,8 @@
     "@types/react-dom": "18.2.22",
     "@types/slug": "5.0.8",
     "@repo/storybook-config": "0.0.1",
-    "@repo/vite-config": "0.0.1",
-    "@repo/tailwind-config": "0.0.1"
+    "@repo/tailwind-config": "0.0.1",
+    "@repo/vite-config": "0.0.1"
   },
   "scripts": {
     "test": "vitest ./src"