@fuf-stack/uniform 1.22.5 → 1.22.7

package/dist/Form-CYlsIABv.cjs

@@ -1,125 +0,0 @@
-const require_FormContext = require("./FormContext-DsmS_mkO.cjs");
-const require_useFormContext = require("./useFormContext-CrXwNYiB.cjs");
-let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
-let react = require("react");
-let react_icons_fa6 = require("react-icons/fa6");
-let react_jsx_runtime = require("react/jsx-runtime");
-let react_icons_fa = require("react-icons/fa");
-let _fuf_stack_pixels_Button = require("@fuf-stack/pixels/Button");
-let _fuf_stack_pixels_Card = require("@fuf-stack/pixels/Card");
-let _fuf_stack_pixels_Json = require("@fuf-stack/pixels/Json");
-require("@fuf-stack/pixels/Json.css");
-//#region src/Form/subcomponents/FormDebugViewer.tsx
-/** Renders a form debug panel with information about the current form state */
-const FormDebugViewer = ({ className = void 0 }) => {
-	const { debugMode, formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful }, getValues, setDebugMode, validation: { errors }, subscribe } = require_useFormContext.useFormContext();
-	const showDebugButton = debugMode === "off";
-	const showDebugCard = debugMode === "debug" || debugMode === "debug-testids";
-	const showDebugTestIds = debugMode === "debug-testids";
-	const [values, setValues] = (0, react.useState)({});
-	(0, react.useEffect)(() => {
-		if (!showDebugCard) return;
-		setValues(getValues() ?? {});
-		const subscription = subscribe({
-			formState: { values: true },
-			callback: (state) => {
-				setValues(state.values ?? {});
-			}
-		});
-		return () => {
-			subscription();
-		};
-	}, [showDebugCard]);
-	if (showDebugButton) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_pixels_Button.Button, {
-		ariaLabel: "Enable form debug mode",
-		className: "fixed bottom-2.5 right-2.5 w-5 text-default-400",
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa6.FaBug, {}),
-		variant: "light",
-		onClick: () => {
-			setDebugMode("debug");
-		}
-	});
-	if (!showDebugCard) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_fuf_stack_pixels_Card.Card, {
-		className: (0, _fuf_stack_pixel_utils.cn)(className),
-		header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex w-full flex-row justify-between",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-lg",
-				children: "Debug Mode"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_pixels_Button.Button, {
-				color: "danger",
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaTimes, {}),
-				size: "sm",
-				variant: "light",
-				onClick: () => {
-					setDebugMode("off");
-				}
-			})]
-		}),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_pixels_Button.Button, {
-			className: "mb-4 ml-auto mr-auto",
-			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa6.FaBullseye, {}),
-			variant: showDebugTestIds ? "solid" : "light",
-			onClick: () => {
-				setDebugMode(debugMode === "debug" ? "debug-testids" : "debug");
-			},
-			children: showDebugTestIds ? "Hide CopyButton" : "Show CopyButton"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fuf_stack_pixels_Json.Json, { value: {
-			values,
-			errors: errors ?? null,
-			submit: {
-				isValid,
-				isSubmitting,
-				isSubmitSuccessful,
-				submitCount
-			}
-		} })]
-	});
-};
-//#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
-Object.defineProperty(exports, "Form", {
-	enumerable: true,
-	get: function() {
-		return Form;
-	}
-});
-Object.defineProperty(exports, "Form_default", {
-	enumerable: true,
-	get: function() {
-		return Form_default;
-	}
-});
-
-//# sourceMappingURL=Form-CYlsIABv.cjs.map

package/dist/Form-CYlsIABv.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form-CYlsIABv.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 { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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"}

package/dist/Form-D3yfDu4L.js

@@ -1,114 +0,0 @@
-import { t as FormProvider } from "./FormContext-BQeKOV-0.js";
-import { n as useFormContext } from "./useFormContext-CT8H8xIe.js";
-import { cn, slugify } from "@fuf-stack/pixel-utils";
-import { useEffect, useState } from "react";
-import { FaBug, FaBullseye } from "react-icons/fa6";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FaTimes } from "react-icons/fa";
-import { Button } from "@fuf-stack/pixels/Button";
-import { Card } from "@fuf-stack/pixels/Card";
-import { Json } from "@fuf-stack/pixels/Json";
-import "@fuf-stack/pixels/Json.css";
-//#region src/Form/subcomponents/FormDebugViewer.tsx
-/** Renders a form debug panel with information about the current form state */
-const FormDebugViewer = ({ className = void 0 }) => {
-	const { debugMode, formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful }, getValues, setDebugMode, validation: { errors }, subscribe } = useFormContext();
-	const showDebugButton = debugMode === "off";
-	const showDebugCard = debugMode === "debug" || debugMode === "debug-testids";
-	const showDebugTestIds = debugMode === "debug-testids";
-	const [values, setValues] = useState({});
-	useEffect(() => {
-		if (!showDebugCard) return;
-		setValues(getValues() ?? {});
-		const subscription = subscribe({
-			formState: { values: true },
-			callback: (state) => {
-				setValues(state.values ?? {});
-			}
-		});
-		return () => {
-			subscription();
-		};
-	}, [showDebugCard]);
-	if (showDebugButton) return /* @__PURE__ */ jsx(Button, {
-		ariaLabel: "Enable form debug mode",
-		className: "fixed bottom-2.5 right-2.5 w-5 text-default-400",
-		icon: /* @__PURE__ */ jsx(FaBug, {}),
-		variant: "light",
-		onClick: () => {
-			setDebugMode("debug");
-		}
-	});
-	if (!showDebugCard) return null;
-	return /* @__PURE__ */ jsxs(Card, {
-		className: cn(className),
-		header: /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full flex-row justify-between",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-lg",
-				children: "Debug Mode"
-			}), /* @__PURE__ */ jsx(Button, {
-				color: "danger",
-				icon: /* @__PURE__ */ jsx(FaTimes, {}),
-				size: "sm",
-				variant: "light",
-				onClick: () => {
-					setDebugMode("off");
-				}
-			})]
-		}),
-		children: [/* @__PURE__ */ jsx(Button, {
-			className: "mb-4 ml-auto mr-auto",
-			icon: /* @__PURE__ */ jsx(FaBullseye, {}),
-			variant: showDebugTestIds ? "solid" : "light",
-			onClick: () => {
-				setDebugMode(debugMode === "debug" ? "debug-testids" : "debug");
-			},
-			children: showDebugTestIds ? "Hide CopyButton" : "Show CopyButton"
-		}), /* @__PURE__ */ jsx(Json, { value: {
-			values,
-			errors: errors ?? null,
-			submit: {
-				isValid,
-				isSubmitting,
-				isSubmitSuccessful,
-				submitCount
-			}
-		} })]
-	});
-};
-//#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 as n, Form_default as t };
-
-//# sourceMappingURL=Form-D3yfDu4L.js.map

package/dist/Form-D3yfDu4L.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form-D3yfDu4L.js","names":[],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,mBAAmB,EAAE,YAAY,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;CAIvC,MAAM,CAAC,QAAQ,aAAa,SAAkC,CAAC,CAAC;CAEhE,gBAAgB;EAEd,IAAI,CAAC,eACH;EAIF,UAAU,UAAU,KAAK,CAAC,CAAC;EAE3B,MAAM,eAAe,UAAU;GAC7B,WAAW,EAAE,QAAQ,KAAK;GAC1B,WAAW,UAAU;IACnB,UAAU,MAAM,UAAU,CAAC,CAAC;GAC9B;EACF,CAAC;EAED,aAAa;GACX,aAAa;EACf;CAEF,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,iBACF,OACE,oBAAC,QAAD;EACE,WAAU;EACV,WAAU;EACV,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,SAAQ;EACR,eAAe;GACb,aAAa,OAAO;EACtB;CACD,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,MAAK;IACL,SAAQ;IACR,eAAe;KACb,aAAa,KAAK;IACpB;GACD,CAAA,CACE;;YAdT,CAiBE,oBAAC,QAAD;GACE,WAAU;GACV,MAAM,oBAAC,YAAD,CAAa,CAAA;GACnB,SAAS,mBAAmB,UAAU;GACtC,eAAe;IACb,aAAa,cAAc,UAAU,kBAAkB,OAAO;GAChE;aAEC,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;;;AC/GA,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;;;ACtEA,IAAA,eAAe"}

package/dist/Input-B5RxbkNS.js

@@ -1,96 +0,0 @@
-import { useUniformField } from "./hooks/useUniformField/index.js";
-import { useInputValueDebounce } from "./hooks/useInputValueDebounce/index.js";
-import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
-import { jsx } from "react/jsx-runtime";
-import { Input } from "@heroui/input";
-import { NumberInput } from "@heroui/number-input";
-//#region src/Input/Input.tsx
-const inputVariants = tv({ slots: {
-	/** wrapper around the whole input */
-	base: "",
-	/** clear button */
-	clearButton: "",
-	/** actual input element */
-	input: "",
-	/** inner wrapper (HeroUI inputWrapper slot) */
-	inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
-} });
-/**
-* Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)
-*/
-const Input$1 = ({ className: _className = void 0, clearable = false, debounceDelay = 300, endContent = void 0, name, onClear = void 0, placeholder = " ", size = void 0, startContent = void 0, type = void 0, ...uniformFieldProps }) => {
-	const { ariaLabel, disabled, field: { onChange: fieldOnChange, onBlur: fieldOnBlur, value: fieldValue, ref }, errorMessage, invalid, label, required, testId, resetField } = useUniformField({
-		name,
-		type,
-		...uniformFieldProps
-	});
-	const { onChange, onBlur, value } = useInputValueDebounce({
-		debounceDelay,
-		name,
-		onBlur: fieldOnBlur,
-		onChange: fieldOnChange,
-		value: fieldValue
-	});
-	const clearableProps = clearable ? {
-		isClearable: true,
-		onClear: () => {
-			resetField(name, { defaultValue: null });
-			if (onClear) onClear();
-		}
-	} : {};
-	const classNames = variantsToClassNames(inputVariants(), _className, "base");
-	const commonProps = {
-		ref,
-		"aria-label": !placeholder || placeholder.trim() === "" ? ariaLabel : void 0,
-		autoComplete: "off",
-		classNames: {
-			base: classNames.base,
-			clearButton: classNames.clearButton,
-			helperWrapper: "p-0",
-			input: classNames.input,
-			inputWrapper: classNames.inputWrapper
-		},
-		"data-testid": testId,
-		endContent,
-		errorMessage,
-		id: testId,
-		isDisabled: disabled,
-		isInvalid: invalid,
-		isRequired: required,
-		label,
-		labelPlacement: "outside",
-		name,
-		onBlur,
-		placeholder,
-		radius: "sm",
-		size,
-		startContent,
-		variant: "bordered",
-		...clearableProps
-	};
-	if (type === "number") {
-		const numberValue = value !== "" && value != null && !Number.isNaN(Number(value)) ? Number(value) : null;
-		return /* @__PURE__ */ jsx(NumberInput, {
-			...commonProps,
-			value: numberValue,
-			formatOptions: { useGrouping: false },
-			onChange: (e) => {
-				if (typeof e === "number") onChange({ target: { value: String(e) } });
-				else onChange(e);
-			}
-		});
-	}
-	return /* @__PURE__ */ jsx(Input, {
-		...commonProps,
-		onChange,
-		type,
-		value
-	});
-};
-//#endregion
-//#region src/Input/index.ts
-var Input_default = Input$1;
-//#endregion
-export { Input$1 as n, Input_default as t };
-
-//# sourceMappingURL=Input-B5RxbkNS.js.map

package/dist/Input-B5RxbkNS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input-B5RxbkNS.js","names":["Input","HeroNumberInput","HeroInput","Input"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;AAcA,MAAa,gBAAgB,GAAG,EAC9B,OAAO;;CAEL,MAAM;;CAEN,aAAa;;CAEb,OAAO;;CAEP,cAAc;AAChB,EACF,CAAC;;;;AAyCD,MAAMA,WAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACE,gBAAgB;EAAE;EAAM;EAAM,GAAG;CAAkB,CAAC;CAGxD,MAAM,EAAE,UAAU,QAAQ,UAAU,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;CACT,CAAC;CAGD,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;GAGb,WAAW,MAAM,EAAE,cAAc,KAAK,CAAC;GAEvC,IAAI,SACF,QAAQ;EAEZ;CACF,IACA,CAAC;CAIP,MAAM,aAAa,qBADF,cAC8B,GAAG,YAAY,MAAM;CAGpE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,KAAK,MAAM,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;EACA,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;CACL;CAGA,IAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,IACxD,OAAO,KAAK,IACZ;EAEN,OACE,oBAACC,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,MACf;GAEA,WAAW,MAAoD;IAC7D,IAAI,OAAO,MAAM,UAEf,SAAS,EACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE,EAC7B,CAAwC;SAGxC,SAAS,CAAC;GAEd;EACD,CAAA;CAEL;CAGA,OACE,oBAACC,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;CAAQ,CAAA;AAE/E;;;ACjMA,IAAA,gBAAeC"}

package/dist/Input-DvVViuWH.cjs

@@ -1,108 +0,0 @@
-require("./FormContext-DsmS_mkO.cjs");
-const require_hooks_useUniformField_index = require("./hooks/useUniformField/index.cjs");
-const require_hooks_useInputValueDebounce_index = require("./hooks/useInputValueDebounce/index.cjs");
-let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _heroui_input = require("@heroui/input");
-let _heroui_number_input = require("@heroui/number-input");
-//#region src/Input/Input.tsx
-const inputVariants = (0, _fuf_stack_pixel_utils.tv)({ slots: {
-	/** wrapper around the whole input */
-	base: "",
-	/** clear button */
-	clearButton: "",
-	/** actual input element */
-	input: "",
-	/** inner wrapper (HeroUI inputWrapper slot) */
-	inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
-} });
-/**
-* Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)
-*/
-const Input = ({ className: _className = void 0, clearable = false, debounceDelay = 300, endContent = void 0, name, onClear = void 0, placeholder = " ", size = void 0, startContent = void 0, type = void 0, ...uniformFieldProps }) => {
-	const { ariaLabel, disabled, field: { onChange: fieldOnChange, onBlur: fieldOnBlur, value: fieldValue, ref }, errorMessage, invalid, label, required, testId, resetField } = require_hooks_useUniformField_index.useUniformField({
-		name,
-		type,
-		...uniformFieldProps
-	});
-	const { onChange, onBlur, value } = require_hooks_useInputValueDebounce_index.useInputValueDebounce({
-		debounceDelay,
-		name,
-		onBlur: fieldOnBlur,
-		onChange: fieldOnChange,
-		value: fieldValue
-	});
-	const clearableProps = clearable ? {
-		isClearable: true,
-		onClear: () => {
-			resetField(name, { defaultValue: null });
-			if (onClear) onClear();
-		}
-	} : {};
-	const classNames = (0, _fuf_stack_pixel_utils.variantsToClassNames)(inputVariants(), _className, "base");
-	const commonProps = {
-		ref,
-		"aria-label": !placeholder || placeholder.trim() === "" ? ariaLabel : void 0,
-		autoComplete: "off",
-		classNames: {
-			base: classNames.base,
-			clearButton: classNames.clearButton,
-			helperWrapper: "p-0",
-			input: classNames.input,
-			inputWrapper: classNames.inputWrapper
-		},
-		"data-testid": testId,
-		endContent,
-		errorMessage,
-		id: testId,
-		isDisabled: disabled,
-		isInvalid: invalid,
-		isRequired: required,
-		label,
-		labelPlacement: "outside",
-		name,
-		onBlur,
-		placeholder,
-		radius: "sm",
-		size,
-		startContent,
-		variant: "bordered",
-		...clearableProps
-	};
-	if (type === "number") {
-		const numberValue = value !== "" && value != null && !Number.isNaN(Number(value)) ? Number(value) : null;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_number_input.NumberInput, {
-			...commonProps,
-			value: numberValue,
-			formatOptions: { useGrouping: false },
-			onChange: (e) => {
-				if (typeof e === "number") onChange({ target: { value: String(e) } });
-				else onChange(e);
-			}
-		});
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_input.Input, {
-		...commonProps,
-		onChange,
-		type,
-		value
-	});
-};
-//#endregion
-//#region src/Input/index.ts
-var Input_default = Input;
-//#endregion
-Object.defineProperty(exports, "Input", {
-	enumerable: true,
-	get: function() {
-		return Input;
-	}
-});
-Object.defineProperty(exports, "Input_default", {
-	enumerable: true,
-	get: function() {
-		return Input_default;
-	}
-});
-
-//# sourceMappingURL=Input-DvVViuWH.cjs.map

package/dist/Input-DvVViuWH.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input-DvVViuWH.cjs","names":["useUniformField","useInputValueDebounce","HeroNumberInput","HeroInput"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;AAcA,MAAa,iBAAA,GAAA,uBAAA,IAAmB,EAC9B,OAAO;;CAEL,MAAM;;CAEN,aAAa;;CAEb,OAAO;;CAEP,cAAc;AAChB,EACF,CAAC;;;;AAyCD,MAAM,SAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACEA,oCAAAA,gBAAgB;EAAE;EAAM;EAAM,GAAG;CAAkB,CAAC;CAGxD,MAAM,EAAE,UAAU,QAAQ,UAAUC,0CAAAA,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;CACT,CAAC;CAGD,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;GAGb,WAAW,MAAM,EAAE,cAAc,KAAK,CAAC;GAEvC,IAAI,SACF,QAAQ;EAEZ;CACF,IACA,CAAC;CAIP,MAAM,cAAA,GAAA,uBAAA,sBADW,cAC8B,GAAG,YAAY,MAAM;CAGpE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,KAAK,MAAM,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;EACA,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;CACL;CAGA,IAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,IACxD,OAAO,KAAK,IACZ;EAEN,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,MACf;GAEA,WAAW,MAAoD;IAC7D,IAAI,OAAO,MAAM,UAEf,SAAS,EACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE,EAC7B,CAAwC;SAGxC,SAAS,CAAC;GAEd;EACD,CAAA;CAEL;CAGA,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;CAAQ,CAAA;AAE/E;;;ACjMA,IAAA,gBAAe"}