@fuf-stack/uniform 1.10.3 → 1.11.0

package/dist/Grid/index.d.ts

@@ -1,8 +1,2 @@
-import { G as Grid } from '../Grid-DF3L9NF3.js';
-export { a as GridProps } from '../Grid-DF3L9NF3.js';
-import 'react/jsx-runtime';
-import 'react';
-
-
-
-export { Grid, Grid as default };
+import { n as GridProps, t as Grid } from "../index-CQWoxgWk.js";
+export { Grid, Grid as default, GridProps };

package/dist/Grid/index.js

@@ -1,10 +1,3 @@
-import {
-  Grid_default,
-  Grid_default2
-} from "../chunk-B62HKKMS.js";
-import "../chunk-K2V4ULA2.js";
-export {
-  Grid_default as Grid,
-  Grid_default2 as default
-};
-//# sourceMappingURL=index.js.map
+import { n as Grid_default, t as Grid_default$1 } from "../Grid-DEH7Sezi.js";
+
+export { Grid_default as Grid, Grid_default$1 as default };

package/dist/Grid-DEH7Sezi.js

@@ -0,0 +1,23 @@
+import { cn } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Grid/Grid.tsx
+/**
+* Defines the default grid for form components
+*/
+const Grid = ({ children = null, className = void 0, testId = void 0 }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-4", className),
+		"data-testid": testId,
+		children
+	});
+};
+var Grid_default = Grid;
+
+//#endregion
+//#region src/Grid/index.ts
+var Grid_default$1 = Grid_default;
+
+//#endregion
+export { Grid_default as n, Grid_default$1 as t };
+//# sourceMappingURL=Grid-DEH7Sezi.js.map

package/dist/Grid-DEH7Sezi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-DEH7Sezi.js","names":["Grid"],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\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-4', 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":";;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,QACZ,SAAS,aACM;AACf,QACE,oBAAC;EAAI,WAAW,GAAG,cAAc,UAAU;EAAE,eAAa;EACvD;GACG;;AAIV,mBAAe;;;;ACtBf,qBAAeA"}

package/dist/Grid-DG60vYYG.cjs

@@ -0,0 +1,35 @@
+const require_FormContext = require('./FormContext-C3GymQOA.cjs');
+let __fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/Grid/Grid.tsx
+/**
+* Defines the default grid for form components
+*/
+const Grid = ({ children = null, className = void 0, testId = void 0 }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __fuf_stack_pixel_utils.cn)("grid gap-4", className),
+		"data-testid": testId,
+		children
+	});
+};
+var Grid_default = Grid;
+
+//#endregion
+//#region src/Grid/index.ts
+var Grid_default$1 = Grid_default;
+
+//#endregion
+Object.defineProperty(exports, 'Grid_default', {
+  enumerable: true,
+  get: function () {
+    return Grid_default$1;
+  }
+});
+Object.defineProperty(exports, 'Grid_default$1', {
+  enumerable: true,
+  get: function () {
+    return Grid_default;
+  }
+});
+//# sourceMappingURL=Grid-DG60vYYG.cjs.map

package/dist/Grid-DG60vYYG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-DG60vYYG.cjs","names":["Grid"],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\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-4', 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":";;;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,QACZ,SAAS,aACM;AACf,QACE,2CAAC;EAAI,2CAAc,cAAc,UAAU;EAAE,eAAa;EACvD;GACG;;AAIV,mBAAe;;;;ACtBf,qBAAeA"}

package/dist/Input/index.cjs

@@ -1,20 +1,5 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_Input = require('../Input-DKfFFOpo.cjs');
 
-
-var _chunkECUVOZGQcjs = require('../chunk-ECUVOZGQ.cjs');
-require('../chunk-3ZQXSGR2.cjs');
-require('../chunk-V3M7HL26.cjs');
-require('../chunk-OE5BOGGX.cjs');
-require('../chunk-NHEZXA4H.cjs');
-require('../chunk-6AWHOBNL.cjs');
-require('../chunk-PCTYJUY7.cjs');
-require('../chunk-56TQOKG7.cjs');
-require('../chunk-FYN7ZWLW.cjs');
-require('../chunk-AQJLKHAE.cjs');
-require('../chunk-OKJWLH7T.cjs');
-require('../chunk-555JRYCS.cjs');
-
-
-
-exports.Input = _chunkECUVOZGQcjs.Input_default; exports.default = _chunkECUVOZGQcjs.Input_default2;
-//# sourceMappingURL=index.cjs.map
+exports.Input = require_Input.Input_default$1;
+exports.default = require_Input.Input_default;

package/dist/Input/index.d.cts

@@ -1,11 +1,2 @@
-import { I as Input } from '../Input-BGYDOpbo.cjs';
-export { a as InputProps } from '../Input-BGYDOpbo.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-import '../hooks/useInputValueTransform/index.cjs';
-
-
-
-export { Input, Input as default };
+import { n as InputProps, t as Input } from "../index-iuLEYAix.cjs";
+export { Input, Input as default, InputProps };

package/dist/Input/index.d.ts

@@ -1,11 +1,2 @@
-import { I as Input } from '../Input-__SqMh2n.js';
-export { a as InputProps } from '../Input-__SqMh2n.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-import '../hooks/useInputValueTransform/index.js';
-
-
-
-export { Input, Input as default };
+import { n as InputProps, t as Input } from "../index-Drl7euco.js";
+export { Input, Input as default, InputProps };

package/dist/Input/index.js

@@ -1,20 +1,3 @@
-import {
-  Input_default,
-  Input_default2
-} from "../chunk-EVASKP6Q.js";
-import "../chunk-LEMQGDFE.js";
-import "../chunk-GEC75GNL.js";
-import "../chunk-NTDKZW4E.js";
-import "../chunk-ELYGQTXB.js";
-import "../chunk-5MTIQ6WD.js";
-import "../chunk-AHJJIANM.js";
-import "../chunk-CNTOODUQ.js";
-import "../chunk-SJWL6EMI.js";
-import "../chunk-IV45K4WU.js";
-import "../chunk-O2XJNQQK.js";
-import "../chunk-K2V4ULA2.js";
-export {
-  Input_default as Input,
-  Input_default2 as default
-};
-//# sourceMappingURL=index.js.map
+import { n as Input_default, t as Input_default$1 } from "../Input--h5t7Sbl.js";
+
+export { Input_default as Input, Input_default$1 as default };

package/dist/Input--h5t7Sbl.js

@@ -0,0 +1,94 @@
+import { t as useUniformField } from "./useUniformField-ClprfrES.js";
+import { t as useInputValueDebounce } from "./useInputValueDebounce-DaH5ONlQ.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: {
+	base: "",
+	clearButton: "",
+	input: "",
+	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,
+		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
+	});
+};
+var Input_default = Input$1;
+
+//#endregion
+//#region src/Input/index.ts
+var Input_default$1 = Input_default;
+
+//#endregion
+export { Input_default as n, Input_default$1 as t };
+//# sourceMappingURL=Input--h5t7Sbl.js.map

package/dist/Input--h5t7Sbl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input--h5t7Sbl.js","names":["Input","clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'>","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    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;CACf,EACF,CAAC;;;;AAyCF,MAAMA,WAAS,EACb,WAAW,aAAa,QACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,QACb,MACA,UAAU,QACV,cAAc,KACd,OAAO,QACP,eAAe,QACf,OAAO,QACP,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;EAAmB,CAAC;CAGzD,MAAM,EAAE,UAAU,QAAQ,UAAU,sBAAsB;EACxD;EACA,QAAQ;EACR,UAAU;EACV,OAAO;EACR,CAAC;CAGF,MAAMC,iBACJ,YACI;EACE,aAAa;EACb,eAAe;AAGb,cAAW,MAAM,EAAE,cAAc,MAAM,CAAC;AAExC,OAAI,QACF,UAAS;;EAGd,GACD,EAAE;CAIR,MAAM,aAAa,qBADF,eAAe,EACkB,YAAY,OAAO;CAGrE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,MAAM,KAAK,KAAK,YAAY;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;GAC1B;EACD,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;EACJ;AAGD,KAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC,GACzD,OAAO,MAAM,GACb;AAEN,SACE,oBAACC;GACC,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,OACd;GAED,WAAW,MAAoD;AAC7D,QAAI,OAAO,MAAM,SAEf,UAAS,EACP,QAAQ,EAAE,OAAO,OAAO,EAAE,EAAE,EAC7B,CAAwC;QAGzC,UAAS,EAAE;;IAGf;;AAKN,QACE,oBAACC;EAAU,GAAI;EAAuB;EAAgB;EAAa;GAAS;;AAIhF,oBAAeH;;;;AClMf,sBAAeI"}

package/dist/Input-DKfFFOpo.cjs

@@ -0,0 +1,106 @@
+const require_FormContext = require('./FormContext-C3GymQOA.cjs');
+const require_useUniformField = require('./useUniformField-BMvnRC_r.cjs');
+const require_useInputValueDebounce = require('./useInputValueDebounce-tL8maIp8.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: {
+	base: "",
+	clearButton: "",
+	input: "",
+	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_useUniformField.useUniformField({
+		name,
+		type,
+		...uniformFieldProps
+	});
+	const { onChange, onBlur, value } = require_useInputValueDebounce.useInputValueDebounce({
+		debounceDelay,
+		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
+	});
+};
+var Input_default = Input;
+
+//#endregion
+//#region src/Input/index.ts
+var Input_default$1 = Input_default;
+
+//#endregion
+Object.defineProperty(exports, 'Input_default', {
+  enumerable: true,
+  get: function () {
+    return Input_default$1;
+  }
+});
+Object.defineProperty(exports, 'Input_default$1', {
+  enumerable: true,
+  get: function () {
+    return Input_default;
+  }
+});
+//# sourceMappingURL=Input-DKfFFOpo.cjs.map

package/dist/Input-DKfFFOpo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-DKfFFOpo.cjs","names":["useUniformField","useInputValueDebounce","clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'>","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    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,gDAAmB,EAC9B,OAAO;CAEL,MAAM;CAEN,aAAa;CAEb,OAAO;CAEP,cAAc;CACf,EACF,CAAC;;;;AAyCF,MAAM,SAAS,EACb,WAAW,aAAa,QACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,QACb,MACA,UAAU,QACV,cAAc,KACd,OAAO,QACP,eAAe,QACf,OAAO,QACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACEA,wCAAgB;EAAE;EAAM;EAAM,GAAG;EAAmB,CAAC;CAGzD,MAAM,EAAE,UAAU,QAAQ,UAAUC,oDAAsB;EACxD;EACA,QAAQ;EACR,UAAU;EACV,OAAO;EACR,CAAC;CAGF,MAAMC,iBACJ,YACI;EACE,aAAa;EACb,eAAe;AAGb,cAAW,MAAM,EAAE,cAAc,MAAM,CAAC;AAExC,OAAI,QACF,UAAS;;EAGd,GACD,EAAE;CAIR,MAAM,+DADW,eAAe,EACkB,YAAY,OAAO;CAGrE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,MAAM,KAAK,KAAK,YAAY;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;GAC1B;EACD,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;EACJ;AAGD,KAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC,GACzD,OAAO,MAAM,GACb;AAEN,SACE,2CAACC;GACC,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,OACd;GAED,WAAW,MAAoD;AAC7D,QAAI,OAAO,MAAM,SAEf,UAAS,EACP,QAAQ,EAAE,OAAO,OAAO,EAAE,EAAE,EAC7B,CAAwC;QAGzC,UAAS,EAAE;;IAGf;;AAKN,QACE,2CAACC;EAAU,GAAI;EAAuB;EAAgB;EAAa;GAAS;;AAIhF,oBAAe;;;;AClMf,sBAAeC"}

package/dist/RadioBoxes/index.cjs

@@ -1,21 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_RadioBoxes = require('../RadioBoxes-Bd9ahl4i.cjs');
 
-
-
-var _chunkTHDHNYP7cjs = require('../chunk-THDHNYP7.cjs');
-require('../chunk-V3M7HL26.cjs');
-require('../chunk-OE5BOGGX.cjs');
-require('../chunk-NHEZXA4H.cjs');
-require('../chunk-6AWHOBNL.cjs');
-require('../chunk-PCTYJUY7.cjs');
-require('../chunk-56TQOKG7.cjs');
-require('../chunk-FYN7ZWLW.cjs');
-require('../chunk-AQJLKHAE.cjs');
-require('../chunk-OKJWLH7T.cjs');
-require('../chunk-555JRYCS.cjs');
-
-
-
-
-exports.RadioBoxes = _chunkTHDHNYP7cjs.RadioBoxes_default; exports.default = _chunkTHDHNYP7cjs.RadioBoxes_default2; exports.radioBoxVariants = _chunkTHDHNYP7cjs.radioBoxVariants;
-//# sourceMappingURL=index.cjs.map
+exports.RadioBoxes = require_RadioBoxes.RadioBoxes_default$1;
+exports.default = require_RadioBoxes.RadioBoxes_default;
+exports.radioBoxVariants = require_RadioBoxes.radioBoxVariants;

package/dist/RadioBoxes/index.d.cts

@@ -1,10 +1,2 @@
-import { R as RadioBoxes } from '../RadioBox-DnqCiTR1.cjs';
-export { a as RadioBoxesProps, r as radioBoxVariants } from '../RadioBox-DnqCiTR1.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { RadioBoxes, RadioBoxes as default };
+import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-DpD4MxGD.cjs";
+export { RadioBoxes, RadioBoxes as default, RadioBoxesProps, radioBoxVariants };

package/dist/RadioBoxes/index.d.ts

@@ -1,10 +1,2 @@
-import { R as RadioBoxes } from '../RadioBox-DnqCiTR1.js';
-export { a as RadioBoxesProps, r as radioBoxVariants } from '../RadioBox-DnqCiTR1.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { RadioBoxes, RadioBoxes as default };
+import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-RvYO46Vg.js";
+export { RadioBoxes, RadioBoxes as default, RadioBoxesProps, radioBoxVariants };

package/dist/RadioBoxes/index.js

@@ -1,21 +1,3 @@
-import {
-  RadioBoxes_default,
-  RadioBoxes_default2,
-  radioBoxVariants
-} from "../chunk-C6WYP35Z.js";
-import "../chunk-GEC75GNL.js";
-import "../chunk-NTDKZW4E.js";
-import "../chunk-ELYGQTXB.js";
-import "../chunk-5MTIQ6WD.js";
-import "../chunk-AHJJIANM.js";
-import "../chunk-CNTOODUQ.js";
-import "../chunk-SJWL6EMI.js";
-import "../chunk-IV45K4WU.js";
-import "../chunk-O2XJNQQK.js";
-import "../chunk-K2V4ULA2.js";
-export {
-  RadioBoxes_default as RadioBoxes,
-  RadioBoxes_default2 as default,
-  radioBoxVariants
-};
-//# sourceMappingURL=index.js.map
+import { n as RadioBoxes_default, r as radioBoxVariants, t as RadioBoxes_default$1 } from "../RadioBoxes-7qdHj3ti.js";
+
+export { RadioBoxes_default as RadioBoxes, RadioBoxes_default$1 as default, radioBoxVariants };

package/dist/RadioBoxes-7qdHj3ti.js

@@ -0,0 +1,138 @@
+import { t as useUniformField } from "./useUniformField-ClprfrES.js";
+import { cn, slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RadioGroup, useRadio } from "@heroui/radio";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+
+//#region src/RadioBoxes/RadioBox.tsx
+const radioBoxVariants = tv({
+	slots: {
+		base: "group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus",
+		control: "",
+		description: "text-foreground opacity-70 text-small",
+		icon: "",
+		label: "",
+		labelWrapper: "grow"
+	},
+	variants: {
+		isDisabled: { true: { base: "pointer-events-none opacity-disabled" } },
+		isInvalid: { true: { base: "!border-danger" } }
+	}
+});
+const RadioBox = ({ classNames: _classNames = void 0, icon = void 0, isInvalid = false, ...props }) => {
+	const { children, Component, description, getBaseProps, getControlProps, getInputProps, getLabelProps, getLabelWrapperProps, getWrapperProps, isDisabled } = useRadio(props);
+	const classNames = variantsToClassNames(radioBoxVariants({
+		isDisabled,
+		isInvalid
+	}), _classNames, "base");
+	return /* @__PURE__ */ jsxs(Component, {
+		...getBaseProps(),
+		className: classNames.base,
+		children: [
+			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...getInputProps() }) }),
+			!icon ? /* @__PURE__ */ jsx("span", {
+				...getWrapperProps(),
+				children: /* @__PURE__ */ jsx("span", {
+					...getControlProps(),
+					className: cn(getControlProps().className, classNames.control)
+				})
+			}) : null,
+			icon ? /* @__PURE__ */ jsx("div", {
+				className: classNames.icon,
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				...getLabelWrapperProps(),
+				className: cn(getLabelWrapperProps().className, classNames.labelWrapper),
+				children: [children ? /* @__PURE__ */ jsx("span", {
+					...getLabelProps(),
+					className: cn(getLabelProps().className, classNames.label),
+					children
+				}) : null, description ? /* @__PURE__ */ jsx("div", {
+					className: classNames.description,
+					children: description
+				}) : null]
+			}),
+			icon ? /* @__PURE__ */ jsx("span", {
+				...getWrapperProps(),
+				children: /* @__PURE__ */ jsx("span", {
+					...getControlProps(),
+					className: cn(getControlProps().className, classNames.control)
+				})
+			}) : null
+		]
+	});
+};
+
+//#endregion
+//#region src/RadioBoxes/RadioBoxes.tsx
+const radioBoxesVariants = tv({ slots: {
+	base: "group gap-0",
+	boxBase: "",
+	boxControl: "",
+	boxDescription: "",
+	boxLabel: "",
+	boxLabelWrapper: "",
+	label: "mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
+	wrapper: ""
+} });
+/**
+* RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)
+*/
+const RadioBoxes = ({ className = void 0, inline = false, name, options, ...uniformFieldProps }) => {
+	const { ariaLabel, defaultValue, errorMessage, invalid, disabled, label, onBlur, onChange, ref, required, testId } = useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const classNames = variantsToClassNames(radioBoxesVariants(), className, "base");
+	const boxClassNames = {
+		base: classNames.boxBase,
+		control: classNames.boxControl,
+		description: classNames.boxDescription,
+		label: classNames.boxLabel,
+		labelWrapper: classNames.boxLabelWrapper
+	};
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		ref,
+		"aria-label": ariaLabel,
+		classNames,
+		"data-invalid": invalid,
+		"data-required": required,
+		"data-testid": testId,
+		defaultValue,
+		errorMessage,
+		isDisabled: disabled,
+		isInvalid: invalid,
+		isRequired: required,
+		label: label ? /* @__PURE__ */ jsx("legend", { children: label }) : null,
+		name,
+		onBlur,
+		onValueChange: onChange,
+		orientation: inline ? "horizontal" : "vertical",
+		children: options.map((option) => {
+			if ("value" in option) {
+				const optionTestId = slugify(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true });
+				return /* @__PURE__ */ jsx(RadioBox, {
+					classNames: boxClassNames,
+					"data-testid": optionTestId,
+					description: option.description,
+					icon: option.icon,
+					isDisabled: !!disabled || option.disabled,
+					isInvalid: invalid,
+					value: option.value,
+					children: option.label ?? option.value
+				}, option.value);
+			}
+			return null;
+		})
+	});
+};
+var RadioBoxes_default = RadioBoxes;
+
+//#endregion
+//#region src/RadioBoxes/index.ts
+var RadioBoxes_default$1 = RadioBoxes_default;
+
+//#endregion
+export { RadioBoxes_default as n, radioBoxVariants as r, RadioBoxes_default$1 as t };
+//# sourceMappingURL=RadioBoxes-7qdHj3ti.js.map