@fuf-stack/uniform 1.22.5 → 1.22.6

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/Input/Input.tsx"],"mappings":";;;;;cAca,aAAA,IAAa,KAAA;EAAA;;;gbAWxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gbAXwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sbAaT;EAAA;IAAA;;;kbACH;;;;sbAEc;EAAA;IAAA;;;kbAclB;;;;sbAdsC;EAAA;kbAAZ;;;;sbAMlC;EAAA;AAAA;;kbAMa;;;;sbAMb;EAAA;;obAMA;;;;wbAIY;IAAA;;obAER;;;;wbAMS;IAAA;;obAAA;;;;wbAAA;IAAA;;obAYZ;;;;wbAZY;IAAA;EAAA;;;;MAAA,mDAAA;2BAAA;qBAAA;;;;;;qbAAA;qbAAA;4bAYZ;sbAAU;6bAAA;MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAnDR,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,UAAA,SAAmB,YAAA;;EAElC,SAAA;;EAEA,SAAA,GAAY,SAAA;;EAEZ,SAAA;;EAEA,aAAA;;EAEA,QAAA;;EAEA,UAAA,GAAa,SAAA;;EAEb,KAAA,GAAQ,SAAA;;EAER,IAAA;;EAEA,OAAA;;EAEA,WAAA;;EAEA,IAAA;;EAEA,YAAA,GAAe,SAAA;;EAEf,MAAA;;EAEA,SAAA,GAAY,mBAAA;;EAEZ,IAAA;AAAA;;;;cAMI,KAAA;EAAS,SAAA,EAAA,UAAA;EAAA,SAAA;EAAA,aAAA;EAAA,UAAA;EAAA,IAAA;EAAA,OAAA;EAAA,WAAA;EAAA,IAAA;EAAA,YAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAYZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}

package/dist/Input/index.js

@@ -1,2 +1,96 @@
-import { n as Input, t as Input_default } from "../Input-B5RxbkNS.js";
-export { Input, Input_default as default };
+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,
+			formatOptions: { useGrouping: false },
+			onChange: (e) => {
+				if (typeof e === "number") onChange({ target: { value: String(e) } });
+				else onChange(e);
+			},
+			value: numberValue
+		});
+	}
+	return /* @__PURE__ */ jsx(Input, {
+		...commonProps,
+		onChange,
+		type,
+		value
+	});
+};
+//#endregion
+//#region src/Input/index.ts
+var Input_default = Input$1;
+//#endregion
+export { Input_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.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        // 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            });\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\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      />\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 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;GAEJ,eAAe,EACb,aAAa,MACf;GAEA,WAAW,MAAoD;IAC7D,IAAI,OAAO,MAAM,UAEf,SAAS,EACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE,EAC7B,CAAC;SAGD,SAAS,CAAC;GAEd;GAGA,OAAO;EACR,CAAA;CAEL;CAGA,OACE,oBAACC,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;CAAQ,CAAA;AAE/E;;;ACnMA,IAAA,gBAAeC"}

package/dist/RadioBoxes/index.cjs

@@ -2,7 +2,139 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_RadioBoxes = require("../RadioBoxes-BmLrbYXt.cjs");
-exports.RadioBoxes = require_RadioBoxes.RadioBoxes;
-exports.default = require_RadioBoxes.RadioBoxes_default;
-exports.radioBoxVariants = require_RadioBoxes.radioBoxVariants;
+const require_helpers_index = require("../helpers/index.cjs");
+const require_hooks_useUniformField_index = require("../hooks/useUniformField/index.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _heroui_radio = require("@heroui/radio");
+let _react_aria_visually_hidden = require("@react-aria/visually-hidden");
+//#region src/RadioBoxes/RadioBox.tsx
+const radioBoxVariants = (0, _fuf_stack_pixel_utils.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 } = (0, _heroui_radio.useRadio)(props);
+	const classNames = (0, _fuf_stack_pixel_utils.variantsToClassNames)(radioBoxVariants({
+		isDisabled,
+		isInvalid
+	}), _classNames, "base");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		...getBaseProps(),
+		className: classNames.base,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_aria_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...getInputProps() }) }),
+			!icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...getWrapperProps(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...getControlProps(),
+					className: (0, _fuf_stack_pixel_utils.cn)(getControlProps().className, classNames.control)
+				})
+			}) : null,
+			icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames.icon,
+				children: icon
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...getLabelWrapperProps(),
+				className: (0, _fuf_stack_pixel_utils.cn)(getLabelWrapperProps().className, classNames.labelWrapper),
+				children: [children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...getLabelProps(),
+					className: (0, _fuf_stack_pixel_utils.cn)(getLabelProps().className, classNames.label),
+					children
+				}) : null, description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classNames.description,
+					children: description
+				}) : null]
+			}),
+			icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...getWrapperProps(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...getControlProps(),
+					className: (0, _fuf_stack_pixel_utils.cn)(getControlProps().className, classNames.control)
+				})
+			}) : null
+		]
+	});
+};
+//#endregion
+//#region src/RadioBoxes/RadioBoxes.tsx
+const radioBoxesVariants = (0, _fuf_stack_pixel_utils.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, errorMessage, invalid, disabled, label, field: { onBlur, onChange, ref, value }, required, testId } = require_hooks_useUniformField_index.useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const { convertToOriginalType } = require_helpers_index.createOptionValueConverter(options);
+	const classNames = (0, _fuf_stack_pixel_utils.variantsToClassNames)(radioBoxesVariants(), className, "base");
+	const boxClassNames = {
+		base: classNames.boxBase,
+		control: classNames.boxControl,
+		description: classNames.boxDescription,
+		label: classNames.boxLabel,
+		labelWrapper: classNames.boxLabelWrapper
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_radio.RadioGroup, {
+		ref,
+		"aria-label": ariaLabel,
+		classNames,
+		"data-invalid": invalid,
+		"data-required": required,
+		"data-testid": testId,
+		errorMessage,
+		isDisabled: disabled,
+		isInvalid: invalid,
+		isRequired: required,
+		label: label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", { children: label }) : null,
+		name,
+		onBlur,
+		onValueChange: (newValue) => {
+			onChange(convertToOriginalType(newValue));
+		},
+		orientation: inline ? "horizontal" : "vertical",
+		value: value != null ? String(value) : "",
+		children: options.map((option) => {
+			if ("value" in option) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioBox, {
+				classNames: boxClassNames,
+				"data-testid": (0, _fuf_stack_pixel_utils.slugify)(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true }),
+				description: option.description,
+				icon: option.icon,
+				isDisabled: !!disabled || option.disabled,
+				isInvalid: invalid,
+				value: String(option.value),
+				children: option.label ?? option.value
+			}, String(option.value));
+			return null;
+		})
+	});
+};
+//#endregion
+//#region src/RadioBoxes/index.ts
+var RadioBoxes_default = RadioBoxes;
+//#endregion
+exports.default = RadioBoxes_default;
+exports.radioBoxVariants = radioBoxVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/RadioBoxes/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["VisuallyHidden","useUniformField","createOptionValueConverter","HeroRadioGroup"],"sources":["../../src/RadioBoxes/RadioBox.tsx","../../src/RadioBoxes/RadioBoxes.tsx","../../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n  slots: {\n    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',\n    control: '',\n    description: 'text-foreground opacity-70 text-small',\n    icon: '',\n    label: '',\n    labelWrapper: 'grow',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        base: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        base: '!border-danger',\n      },\n    },\n  },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** icon for the option */\n  icon?: ReactNode;\n  /** whether the radio is invalid */\n  isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n  classNames: _classNames = undefined,\n  icon = undefined,\n  isInvalid = false,\n  ...props\n}: RadioBoxProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props as HeroRadioProps);\n\n  // classNames from slots\n  const variants = radioBoxVariants({\n    isDisabled,\n    isInvalid,\n  });\n  const classNames = variantsToClassNames(\n    variants,\n    // @ts-expect-error not sure here, but it works\n    _classNames,\n    'base',\n  );\n\n  return (\n    <Component {...getBaseProps()} className={classNames.base}>\n      <VisuallyHidden>\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {!icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n      {icon ? <div className={classNames.icon}>{icon}</div> : null}\n      <div\n        {...getLabelWrapperProps()}\n        className={cn(\n          getLabelWrapperProps().className,\n          classNames.labelWrapper,\n        )}\n      >\n        {children ? (\n          <span\n            {...getLabelProps()}\n            className={cn(getLabelProps().className, classNames.label)}\n          >\n            {children}\n          </span>\n        ) : null}\n        {description ? (\n          <div className={classNames.description}>{description}</div>\n        ) : null}\n      </div>\n      {icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    boxBase: '',\n    boxControl: '',\n    boxDescription: '',\n    boxLabel: '',\n    boxLabelWrapper: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number;\n}\n\nexport interface RadioBoxesProps 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  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioBoxOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadioBoxesProps) => {\n  const {\n    ariaLabel,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    field: { onBlur, onChange, ref, value },\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n  const boxClassNames: RadioBoxProps['classNames'] = {\n    base: classNames.boxBase,\n    control: classNames.boxControl,\n    description: classNames.boxDescription,\n    label: classNames.boxLabel,\n    labelWrapper: classNames.boxLabelWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      onValueChange={(newValue) => {\n        onChange(convertToOriginalType(newValue));\n      }}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      value={value != null ? String(value) : ''}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <RadioBox\n              key={String(option.value)}\n              classNames={boxClassNames}\n              data-testid={optionTestId}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={!!disabled || option.disabled}\n              isInvalid={invalid}\n              value={String(option.value)}\n            >\n              {option.label ?? option.value}\n            </RadioBox>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps, RadioBoxOption } from './RadioBoxes';\n\nexport { radioBoxVariants } from './RadioBox';\n\nexport default RadioBoxes;\n"],"mappings":"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"}