@fuf-stack/uniform 1.10.3 → 1.11.0

package/dist/SwitchBox-DPHryDOM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchBox-DPHryDOM.js","names":["SwitchBox"],"sources":["../src/SwitchBox/SwitchBox.tsx","../src/SwitchBox/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { SwitchProps as HeroSwitchProps } from '@heroui/switch';\nimport type { ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { useSwitch } from '@heroui/switch';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const switchBoxVariants = tv({\n  slots: {\n    box: 'group inline-flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-default hover:bg-content2 data-[selected=true]:border-focus',\n    description: 'text-foreground opacity-70',\n    icon: '',\n    label:\n      'font-medium text-foreground group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    wrapper: '',\n    thumb: '',\n    thumbIcon: '',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        box: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        box: '!border-danger',\n        label: '!text-danger',\n      },\n    },\n    size: {\n      sm: {\n        box: 'gap-2 p-3',\n        description: 'text-xs',\n        label: 'text-xs',\n      },\n      md: {\n        box: 'gap-4 p-4',\n        description: 'text-small',\n        label: 'text-sm',\n      },\n      lg: {\n        box: 'gap-4 p-5',\n        description: 'text-small',\n        label: 'text-base',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype ClassName = TVClassName<typeof switchBoxVariants>;\n\nexport interface SwitchBoxProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Description text displayed below the label */\n  description?: ReactNode;\n  /** whether the switch should be disabled */\n  disabled?: boolean;\n  /** Icon to be displayed in the box */\n  icon?: ReactNode;\n  /** component displayed as the label */\n  label?: ReactNode;\n  /** name the field is registered under */\n  name: string;\n  /** whether the field is required */\n  required?: boolean;\n  /* Size of the switch */\n  size?: 'sm' | 'md' | 'lg';\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Icon to be displayed inside the thumb */\n  thumbIcon?: HeroSwitchProps['thumbIcon'];\n}\n\n/**\n * SwitchBox component - A card-like box with a switch control\n */\nconst SwitchBox = ({\n  className = undefined,\n  description = undefined,\n  icon = undefined,\n  name,\n  size = undefined,\n  thumbIcon = undefined,\n  ...uniformFieldProps\n}: SwitchBoxProps) => {\n  const {\n    defaultValue,\n    disabled,\n    errorMessage,\n    field,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Ref for the visual switch to forward focus\n  const visualSwitchRef = useRef<HTMLInputElement>(null);\n\n  // Use the useSwitch hook to get access to all the necessary props\n  const {\n    Component,\n    slots,\n    isSelected,\n    getBaseProps,\n    getInputProps,\n    getWrapperProps,\n  } = useSwitch({\n    defaultSelected: !!defaultValue,\n    isDisabled: disabled,\n    isSelected: !!field.value,\n    name: `${name}_switch`,\n    onValueChange: onChange,\n    size,\n    thumbIcon,\n  });\n\n  // classNames from slots\n  const variants = switchBoxVariants({\n    isDisabled: disabled,\n    isInvalid: invalid,\n    size,\n  });\n  const classNames = variantsToClassNames(variants, className, 'box');\n\n  return (\n    <div>\n      <Component\n        {...getBaseProps()}\n        className={classNames.box}\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n      >\n        <VisuallyHidden>\n          <input\n            ref={ref}\n            aria-label={typeof label === 'string' ? label : name}\n            checked={!!field.value}\n            name={name}\n            tabIndex={-1}\n            type=\"checkbox\"\n            onChange={(e) => {\n              onChange(e.target.checked);\n            }}\n            onFocus={() => {\n              // When RHF focuses this hidden input (e.g., on validation error),\n              // forward focus to the visual switch to show focus ring\n              visualSwitchRef.current?.focus();\n            }}\n          />\n          {/* Visual switch input for focus ring */}\n          <input\n            ref={visualSwitchRef}\n            {...getInputProps()}\n            onBlur={(e) => {\n              // Call HeroUI's internal onBlur to clear focus state and remove focus ring\n              getInputProps().onBlur?.(e);\n              // Then call RHF's onBlur to mark field as touched\n              onBlur();\n            }}\n          />\n        </VisuallyHidden>\n        {!icon ? (\n          <span\n            {...getWrapperProps()}\n            className={cn(getWrapperProps().className, classNames.wrapper)}\n          >\n            <span className={cn(slots.thumb({ class: classNames.thumb }))}>\n              {thumbIcon && typeof thumbIcon === 'function'\n                ? thumbIcon({\n                    isSelected: !!isSelected,\n                    className: slots.thumbIcon({ class: classNames.thumbIcon }),\n                    width: '1em',\n                    height: '1em',\n                    'data-checked': isSelected ? 'true' : 'false',\n                  })\n                : thumbIcon}\n            </span>\n          </span>\n        ) : null}\n        {icon ? <div className={classNames.icon}>{icon}</div> : null}\n        <div className=\"grow\">\n          {label ? <div className={classNames.label}>{label}</div> : null}\n          {description ? (\n            <div className={classNames.description}>{description}</div>\n          ) : null}\n        </div>\n        {icon ? (\n          <span\n            {...getWrapperProps()}\n            className={cn(getWrapperProps().className, classNames.wrapper)}\n          >\n            <span className={cn(slots.thumb({ class: classNames.thumb }))}>\n              {thumbIcon && typeof thumbIcon === 'function'\n                ? thumbIcon({\n                    isSelected: !!isSelected,\n                    className: slots.thumbIcon({ class: classNames.thumbIcon }),\n                    width: '1em',\n                    height: '1em',\n                    'data-checked': isSelected ? 'true' : 'false',\n                  })\n                : thumbIcon}\n            </span>\n          </span>\n        ) : null}\n      </Component>\n      {invalid ? (\n        <div\n          {...getHelperWrapperProps()}\n          className={cn(\n            getHelperWrapperProps()?.className,\n            // force helper to be visible (for some reason it's hidden by default) and remove margin\n            'ml-0 block',\n          )}\n        >\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default SwitchBox;\n","import SwitchBox from './SwitchBox';\n\nexport type { SwitchBoxProps } from './SwitchBox';\n\nexport { switchBoxVariants } from './SwitchBox';\nexport { SwitchBox };\n\nexport default SwitchBox;\n"],"mappings":"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"}

package/dist/SwitchBox-DqVmZYId.cjs

@@ -0,0 +1,174 @@
+const require_FormContext = require('./FormContext-C3GymQOA.cjs');
+const require_useUniformField = require('./useUniformField-BMvnRC_r.cjs');
+let __fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __react_aria_visually_hidden = require("@react-aria/visually-hidden");
+let __heroui_switch = require("@heroui/switch");
+
+//#region src/SwitchBox/SwitchBox.tsx
+const switchBoxVariants = (0, __fuf_stack_pixel_utils.tv)({
+	slots: {
+		box: "group inline-flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-default hover:bg-content2 data-[selected=true]:border-focus",
+		description: "text-foreground opacity-70",
+		icon: "",
+		label: "font-medium text-foreground group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]",
+		wrapper: "",
+		thumb: "",
+		thumbIcon: ""
+	},
+	variants: {
+		isDisabled: { true: { box: "pointer-events-none opacity-disabled" } },
+		isInvalid: { true: {
+			box: "!border-danger",
+			label: "!text-danger"
+		} },
+		size: {
+			sm: {
+				box: "gap-2 p-3",
+				description: "text-xs",
+				label: "text-xs"
+			},
+			md: {
+				box: "gap-4 p-4",
+				description: "text-small",
+				label: "text-sm"
+			},
+			lg: {
+				box: "gap-4 p-5",
+				description: "text-small",
+				label: "text-base"
+			}
+		}
+	},
+	defaultVariants: { size: "md" }
+});
+/**
+* SwitchBox component - A card-like box with a switch control
+*/
+const SwitchBox = ({ className = void 0, description = void 0, icon = void 0, name, size = void 0, thumbIcon = void 0, ...uniformFieldProps }) => {
+	const { defaultValue, disabled, errorMessage, field, getErrorMessageProps, getHelperWrapperProps, invalid, label, onBlur, onChange, ref, required, testId } = require_useUniformField.useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const visualSwitchRef = (0, react.useRef)(null);
+	const { Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps } = (0, __heroui_switch.useSwitch)({
+		defaultSelected: !!defaultValue,
+		isDisabled: disabled,
+		isSelected: !!field.value,
+		name: `${name}_switch`,
+		onValueChange: onChange,
+		size,
+		thumbIcon
+	});
+	const classNames = (0, __fuf_stack_pixel_utils.variantsToClassNames)(switchBoxVariants({
+		isDisabled: disabled,
+		isInvalid: invalid,
+		size
+	}), className, "box");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		...getBaseProps(),
+		className: classNames.box,
+		"data-invalid": invalid,
+		"data-required": required,
+		"data-testid": testId,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__react_aria_visually_hidden.VisuallyHidden, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref,
+				"aria-label": typeof label === "string" ? label : name,
+				checked: !!field.value,
+				name,
+				tabIndex: -1,
+				type: "checkbox",
+				onChange: (e) => {
+					onChange(e.target.checked);
+				},
+				onFocus: () => {
+					visualSwitchRef.current?.focus();
+				}
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: visualSwitchRef,
+				...getInputProps(),
+				onBlur: (e) => {
+					getInputProps().onBlur?.(e);
+					onBlur();
+				}
+			})] }),
+			!icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...getWrapperProps(),
+				className: (0, __fuf_stack_pixel_utils.cn)(getWrapperProps().className, classNames.wrapper),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: (0, __fuf_stack_pixel_utils.cn)(slots.thumb({ class: classNames.thumb })),
+					children: thumbIcon && typeof thumbIcon === "function" ? thumbIcon({
+						isSelected: !!isSelected,
+						className: slots.thumbIcon({ class: classNames.thumbIcon }),
+						width: "1em",
+						height: "1em",
+						"data-checked": isSelected ? "true" : "false"
+					}) : thumbIcon
+				})
+			}) : null,
+			icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames.icon,
+				children: icon
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grow",
+				children: [label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classNames.label,
+					children: label
+				}) : null, description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classNames.description,
+					children: description
+				}) : null]
+			}),
+			icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...getWrapperProps(),
+				className: (0, __fuf_stack_pixel_utils.cn)(getWrapperProps().className, classNames.wrapper),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: (0, __fuf_stack_pixel_utils.cn)(slots.thumb({ class: classNames.thumb })),
+					children: thumbIcon && typeof thumbIcon === "function" ? thumbIcon({
+						isSelected: !!isSelected,
+						className: slots.thumbIcon({ class: classNames.thumbIcon }),
+						width: "1em",
+						height: "1em",
+						"data-checked": isSelected ? "true" : "false"
+					}) : thumbIcon
+				})
+			}) : null
+		]
+	}), invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...getHelperWrapperProps(),
+		className: (0, __fuf_stack_pixel_utils.cn)(getHelperWrapperProps()?.className, "ml-0 block"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...getErrorMessageProps(),
+			children: errorMessage
+		})
+	}) : null] });
+};
+var SwitchBox_default = SwitchBox;
+
+//#endregion
+//#region src/SwitchBox/index.ts
+var SwitchBox_default$1 = SwitchBox_default;
+
+//#endregion
+Object.defineProperty(exports, 'SwitchBox_default', {
+  enumerable: true,
+  get: function () {
+    return SwitchBox_default$1;
+  }
+});
+Object.defineProperty(exports, 'SwitchBox_default$1', {
+  enumerable: true,
+  get: function () {
+    return SwitchBox_default;
+  }
+});
+Object.defineProperty(exports, 'switchBoxVariants', {
+  enumerable: true,
+  get: function () {
+    return switchBoxVariants;
+  }
+});
+//# sourceMappingURL=SwitchBox-DqVmZYId.cjs.map

package/dist/SwitchBox-DqVmZYId.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchBox-DqVmZYId.cjs","names":["useUniformField","VisuallyHidden","SwitchBox"],"sources":["../src/SwitchBox/SwitchBox.tsx","../src/SwitchBox/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { SwitchProps as HeroSwitchProps } from '@heroui/switch';\nimport type { ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { useSwitch } from '@heroui/switch';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const switchBoxVariants = tv({\n  slots: {\n    box: 'group inline-flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-default hover:bg-content2 data-[selected=true]:border-focus',\n    description: 'text-foreground opacity-70',\n    icon: '',\n    label:\n      'font-medium text-foreground group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    wrapper: '',\n    thumb: '',\n    thumbIcon: '',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        box: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        box: '!border-danger',\n        label: '!text-danger',\n      },\n    },\n    size: {\n      sm: {\n        box: 'gap-2 p-3',\n        description: 'text-xs',\n        label: 'text-xs',\n      },\n      md: {\n        box: 'gap-4 p-4',\n        description: 'text-small',\n        label: 'text-sm',\n      },\n      lg: {\n        box: 'gap-4 p-5',\n        description: 'text-small',\n        label: 'text-base',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype ClassName = TVClassName<typeof switchBoxVariants>;\n\nexport interface SwitchBoxProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Description text displayed below the label */\n  description?: ReactNode;\n  /** whether the switch should be disabled */\n  disabled?: boolean;\n  /** Icon to be displayed in the box */\n  icon?: ReactNode;\n  /** component displayed as the label */\n  label?: ReactNode;\n  /** name the field is registered under */\n  name: string;\n  /** whether the field is required */\n  required?: boolean;\n  /* Size of the switch */\n  size?: 'sm' | 'md' | 'lg';\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Icon to be displayed inside the thumb */\n  thumbIcon?: HeroSwitchProps['thumbIcon'];\n}\n\n/**\n * SwitchBox component - A card-like box with a switch control\n */\nconst SwitchBox = ({\n  className = undefined,\n  description = undefined,\n  icon = undefined,\n  name,\n  size = undefined,\n  thumbIcon = undefined,\n  ...uniformFieldProps\n}: SwitchBoxProps) => {\n  const {\n    defaultValue,\n    disabled,\n    errorMessage,\n    field,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Ref for the visual switch to forward focus\n  const visualSwitchRef = useRef<HTMLInputElement>(null);\n\n  // Use the useSwitch hook to get access to all the necessary props\n  const {\n    Component,\n    slots,\n    isSelected,\n    getBaseProps,\n    getInputProps,\n    getWrapperProps,\n  } = useSwitch({\n    defaultSelected: !!defaultValue,\n    isDisabled: disabled,\n    isSelected: !!field.value,\n    name: `${name}_switch`,\n    onValueChange: onChange,\n    size,\n    thumbIcon,\n  });\n\n  // classNames from slots\n  const variants = switchBoxVariants({\n    isDisabled: disabled,\n    isInvalid: invalid,\n    size,\n  });\n  const classNames = variantsToClassNames(variants, className, 'box');\n\n  return (\n    <div>\n      <Component\n        {...getBaseProps()}\n        className={classNames.box}\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n      >\n        <VisuallyHidden>\n          <input\n            ref={ref}\n            aria-label={typeof label === 'string' ? label : name}\n            checked={!!field.value}\n            name={name}\n            tabIndex={-1}\n            type=\"checkbox\"\n            onChange={(e) => {\n              onChange(e.target.checked);\n            }}\n            onFocus={() => {\n              // When RHF focuses this hidden input (e.g., on validation error),\n              // forward focus to the visual switch to show focus ring\n              visualSwitchRef.current?.focus();\n            }}\n          />\n          {/* Visual switch input for focus ring */}\n          <input\n            ref={visualSwitchRef}\n            {...getInputProps()}\n            onBlur={(e) => {\n              // Call HeroUI's internal onBlur to clear focus state and remove focus ring\n              getInputProps().onBlur?.(e);\n              // Then call RHF's onBlur to mark field as touched\n              onBlur();\n            }}\n          />\n        </VisuallyHidden>\n        {!icon ? (\n          <span\n            {...getWrapperProps()}\n            className={cn(getWrapperProps().className, classNames.wrapper)}\n          >\n            <span className={cn(slots.thumb({ class: classNames.thumb }))}>\n              {thumbIcon && typeof thumbIcon === 'function'\n                ? thumbIcon({\n                    isSelected: !!isSelected,\n                    className: slots.thumbIcon({ class: classNames.thumbIcon }),\n                    width: '1em',\n                    height: '1em',\n                    'data-checked': isSelected ? 'true' : 'false',\n                  })\n                : thumbIcon}\n            </span>\n          </span>\n        ) : null}\n        {icon ? <div className={classNames.icon}>{icon}</div> : null}\n        <div className=\"grow\">\n          {label ? <div className={classNames.label}>{label}</div> : null}\n          {description ? (\n            <div className={classNames.description}>{description}</div>\n          ) : null}\n        </div>\n        {icon ? (\n          <span\n            {...getWrapperProps()}\n            className={cn(getWrapperProps().className, classNames.wrapper)}\n          >\n            <span className={cn(slots.thumb({ class: classNames.thumb }))}>\n              {thumbIcon && typeof thumbIcon === 'function'\n                ? thumbIcon({\n                    isSelected: !!isSelected,\n                    className: slots.thumbIcon({ class: classNames.thumbIcon }),\n                    width: '1em',\n                    height: '1em',\n                    'data-checked': isSelected ? 'true' : 'false',\n                  })\n                : thumbIcon}\n            </span>\n          </span>\n        ) : null}\n      </Component>\n      {invalid ? (\n        <div\n          {...getHelperWrapperProps()}\n          className={cn(\n            getHelperWrapperProps()?.className,\n            // force helper to be visible (for some reason it's hidden by default) and remove margin\n            'ml-0 block',\n          )}\n        >\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default SwitchBox;\n","import SwitchBox from './SwitchBox';\n\nexport type { SwitchBoxProps } from './SwitchBox';\n\nexport { switchBoxVariants } from './SwitchBox';\nexport { SwitchBox };\n\nexport default SwitchBox;\n"],"mappings":"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"}

package/dist/TextArea/index.cjs

@@ -1,20 +1,5 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_TextArea = require('../TextArea-CH-F6_ax.cjs');
 
-
-var _chunkKDNO5YO5cjs = require('../chunk-KDNO5YO5.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.TextArea = _chunkKDNO5YO5cjs.TextArea_default; exports.default = _chunkKDNO5YO5cjs.TextArea_default2;
-//# sourceMappingURL=index.cjs.map
+exports.TextArea = require_TextArea.TextArea_default$1;
+exports.default = require_TextArea.TextArea_default;

package/dist/TextArea/index.d.cts

@@ -1,10 +1,2 @@
-import { T as TextArea } from '../TextArea-CYcFOcun.cjs';
-export { a as TextAreaProps } from '../TextArea-CYcFOcun.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { TextArea, TextArea as default };
+import { n as TextAreaProps, t as TextArea } from "../index-CI9QBUoM.cjs";
+export { TextArea, TextArea as default, TextAreaProps };

package/dist/TextArea/index.d.ts

@@ -1,10 +1,2 @@
-import { T as TextArea } from '../TextArea-CYcFOcun.js';
-export { a as TextAreaProps } from '../TextArea-CYcFOcun.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { TextArea, TextArea as default };
+import { n as TextAreaProps, t as TextArea } from "../index-CraZe1qS.js";
+export { TextArea, TextArea as default, TextAreaProps };

package/dist/TextArea/index.js

@@ -1,20 +1,3 @@
-import {
-  TextArea_default,
-  TextArea_default2
-} from "../chunk-264VRHMT.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 {
-  TextArea_default as TextArea,
-  TextArea_default2 as default
-};
-//# sourceMappingURL=index.js.map
+import { n as TextArea_default, t as TextArea_default$1 } from "../TextArea-BR6e-Fio.js";
+
+export { TextArea_default as TextArea, TextArea_default$1 as default };

package/dist/TextArea-BR6e-Fio.js

@@ -0,0 +1,64 @@
+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 { Textarea } from "@heroui/input";
+
+//#region src/TextArea/TextArea.tsx
+const textAreaVariants = tv({ slots: {
+	base: "",
+	clearButton: "",
+	input: "",
+	inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
+} });
+/**
+* TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)
+*/
+const TextArea = ({ children = null, className: _className = void 0, debounceDelay = 300, name, placeholder = " ", ...uniformFieldProps }) => {
+	const { ariaLabel, disabled, errorMessage, field: { onChange: fieldOnChange, onBlur: fieldOnBlur, value: fieldValue, ref }, invalid, label, required, testId } = useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const { onChange, onBlur, value } = useInputValueDebounce({
+		debounceDelay,
+		onBlur: fieldOnBlur,
+		onChange: fieldOnChange,
+		value: fieldValue
+	});
+	const classNames = variantsToClassNames(textAreaVariants(), _className, "base");
+	return /* @__PURE__ */ jsx(Textarea, {
+		ref,
+		"data-testid": testId,
+		errorMessage,
+		id: testId,
+		isDisabled: disabled,
+		isInvalid: invalid,
+		isRequired: required,
+		label,
+		labelPlacement: "outside",
+		name,
+		onBlur,
+		onChange,
+		placeholder,
+		value,
+		variant: "bordered",
+		"aria-label": !placeholder || placeholder.trim() === "" ? ariaLabel : void 0,
+		classNames: {
+			base: classNames.base,
+			clearButton: classNames.clearButton,
+			helperWrapper: "p-0",
+			input: classNames.input,
+			inputWrapper: classNames.inputWrapper
+		},
+		children
+	});
+};
+var TextArea_default = TextArea;
+
+//#endregion
+//#region src/TextArea/index.ts
+var TextArea_default$1 = TextArea_default;
+
+//#endregion
+export { TextArea_default as n, TextArea_default$1 as t };
+//# sourceMappingURL=TextArea-BR6e-Fio.js.map

package/dist/TextArea-BR6e-Fio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea-BR6e-Fio.js","names":["HeroTextArea","TextArea"],"sources":["../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/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 textAreaVariants = 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 textAreaVariants>;\ntype ClassName = TVClassName<typeof textAreaVariants>;\n\nexport interface TextAreaProps 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  /** Child components. The content of the textarea. */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** Determines if the TextArea is disabled or not. */\n  disabled?: boolean;\n  /** Label displayed above the TextArea. */\n  label?: ReactNode;\n  /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** placeholder for the textArea content. */\n  placeholder?: string;\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)\n */\nconst TextArea = ({\n  children = null,\n  className: _className = undefined,\n  debounceDelay = 300,\n  name,\n  placeholder = ' ',\n  ...uniformFieldProps\n}: TextAreaProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({ name, ...uniformFieldProps });\n\n  // Use debounced handlers for form updates\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // classNames from slots\n  const variants = textAreaVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroTextArea\n      ref={ref}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      id={testId}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label}\n      labelPlacement=\"outside\"\n      name={name}\n      onBlur={onBlur}\n      onChange={onChange}\n      placeholder={placeholder}\n      value={value}\n      variant=\"bordered\"\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      }\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    >\n      {children}\n    </HeroTextArea>\n  );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"],"mappings":";;;;;;;AAWA,MAAa,mBAAmB,GAAG,EACjC,OAAO;CAEL,MAAM;CAEN,aAAa;CAEb,OAAO;CAEP,cAAc;CACf,EACF,CAAC;;;;AA6BF,MAAM,YAAY,EAChB,WAAW,MACX,WAAW,aAAa,QACxB,gBAAgB,KAChB,MACA,cAAc,KACd,GAAG,wBACgB;CACnB,MAAM,EACJ,WACA,UACA,cACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,SACA,OACA,UACA,WACE,gBAAgB;EAAE;EAAM,GAAG;EAAmB,CAAC;CAGnD,MAAM,EAAE,UAAU,QAAQ,UAAU,sBAAsB;EACxD;EACA,QAAQ;EACR,UAAU;EACV,OAAO;EACR,CAAC;CAIF,MAAM,aAAa,qBADF,kBAAkB,EACe,YAAY,OAAO;AAErE,QACE,oBAACA;EACM;EACL,eAAa;EACC;EACd,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACL;EACP,gBAAe;EACT;EACE;EACE;EACG;EACN;EACP,SAAQ;EAER,cACE,CAAC,eAAe,YAAY,MAAM,KAAK,KAAK,YAAY;EAE1D,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;GAC1B;EAEA;GACY;;AAInB,uBAAe;;;;ACpHf,yBAAeC"}

package/dist/TextArea-CH-F6_ax.cjs

@@ -0,0 +1,76 @@
+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");
+
+//#region src/TextArea/TextArea.tsx
+const textAreaVariants = (0, __fuf_stack_pixel_utils.tv)({ slots: {
+	base: "",
+	clearButton: "",
+	input: "",
+	inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
+} });
+/**
+* TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)
+*/
+const TextArea = ({ children = null, className: _className = void 0, debounceDelay = 300, name, placeholder = " ", ...uniformFieldProps }) => {
+	const { ariaLabel, disabled, errorMessage, field: { onChange: fieldOnChange, onBlur: fieldOnBlur, value: fieldValue, ref }, invalid, label, required, testId } = require_useUniformField.useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const { onChange, onBlur, value } = require_useInputValueDebounce.useInputValueDebounce({
+		debounceDelay,
+		onBlur: fieldOnBlur,
+		onChange: fieldOnChange,
+		value: fieldValue
+	});
+	const classNames = (0, __fuf_stack_pixel_utils.variantsToClassNames)(textAreaVariants(), _className, "base");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__heroui_input.Textarea, {
+		ref,
+		"data-testid": testId,
+		errorMessage,
+		id: testId,
+		isDisabled: disabled,
+		isInvalid: invalid,
+		isRequired: required,
+		label,
+		labelPlacement: "outside",
+		name,
+		onBlur,
+		onChange,
+		placeholder,
+		value,
+		variant: "bordered",
+		"aria-label": !placeholder || placeholder.trim() === "" ? ariaLabel : void 0,
+		classNames: {
+			base: classNames.base,
+			clearButton: classNames.clearButton,
+			helperWrapper: "p-0",
+			input: classNames.input,
+			inputWrapper: classNames.inputWrapper
+		},
+		children
+	});
+};
+var TextArea_default = TextArea;
+
+//#endregion
+//#region src/TextArea/index.ts
+var TextArea_default$1 = TextArea_default;
+
+//#endregion
+Object.defineProperty(exports, 'TextArea_default', {
+  enumerable: true,
+  get: function () {
+    return TextArea_default$1;
+  }
+});
+Object.defineProperty(exports, 'TextArea_default$1', {
+  enumerable: true,
+  get: function () {
+    return TextArea_default;
+  }
+});
+//# sourceMappingURL=TextArea-CH-F6_ax.cjs.map

package/dist/TextArea-CH-F6_ax.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea-CH-F6_ax.cjs","names":["useUniformField","useInputValueDebounce","HeroTextArea","TextArea"],"sources":["../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/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 textAreaVariants = 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 textAreaVariants>;\ntype ClassName = TVClassName<typeof textAreaVariants>;\n\nexport interface TextAreaProps 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  /** Child components. The content of the textarea. */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** Determines if the TextArea is disabled or not. */\n  disabled?: boolean;\n  /** Label displayed above the TextArea. */\n  label?: ReactNode;\n  /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** placeholder for the textArea content. */\n  placeholder?: string;\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)\n */\nconst TextArea = ({\n  children = null,\n  className: _className = undefined,\n  debounceDelay = 300,\n  name,\n  placeholder = ' ',\n  ...uniformFieldProps\n}: TextAreaProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({ name, ...uniformFieldProps });\n\n  // Use debounced handlers for form updates\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // classNames from slots\n  const variants = textAreaVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroTextArea\n      ref={ref}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      id={testId}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label}\n      labelPlacement=\"outside\"\n      name={name}\n      onBlur={onBlur}\n      onChange={onChange}\n      placeholder={placeholder}\n      value={value}\n      variant=\"bordered\"\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      }\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    >\n      {children}\n    </HeroTextArea>\n  );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"],"mappings":";;;;;;;;AAWA,MAAa,mDAAsB,EACjC,OAAO;CAEL,MAAM;CAEN,aAAa;CAEb,OAAO;CAEP,cAAc;CACf,EACF,CAAC;;;;AA6BF,MAAM,YAAY,EAChB,WAAW,MACX,WAAW,aAAa,QACxB,gBAAgB,KAChB,MACA,cAAc,KACd,GAAG,wBACgB;CACnB,MAAM,EACJ,WACA,UACA,cACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,SACA,OACA,UACA,WACEA,wCAAgB;EAAE;EAAM,GAAG;EAAmB,CAAC;CAGnD,MAAM,EAAE,UAAU,QAAQ,UAAUC,oDAAsB;EACxD;EACA,QAAQ;EACR,UAAU;EACV,OAAO;EACR,CAAC;CAIF,MAAM,+DADW,kBAAkB,EACe,YAAY,OAAO;AAErE,QACE,2CAACC;EACM;EACL,eAAa;EACC;EACd,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACL;EACP,gBAAe;EACT;EACE;EACE;EACG;EACN;EACP,SAAQ;EAER,cACE,CAAC,eAAe,YAAY,MAAM,KAAK,KAAK,YAAY;EAE1D,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;GAC1B;EAEA;GACY;;AAInB,uBAAe;;;;ACpHf,yBAAeC"}

package/dist/helpers/index.cjs

@@ -1,18 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-
-
-
-var _chunkOKJWLH7Tcjs = require('../chunk-OKJWLH7T.cjs');
-require('../chunk-555JRYCS.cjs');
-
-
-
-
-
-
-
-exports.flatArrayKey = _chunkOKJWLH7Tcjs.flatArrayKey; exports.fromNullishString = _chunkOKJWLH7Tcjs.fromNullishString; exports.nameToTestId = _chunkOKJWLH7Tcjs.nameToTestId; exports.toFormFormat = _chunkOKJWLH7Tcjs.toFormFormat; exports.toNullishString = _chunkOKJWLH7Tcjs.toNullishString; exports.toValidationFormat = _chunkOKJWLH7Tcjs.toValidationFormat;
-//# sourceMappingURL=index.cjs.map
+const require_helpers = require('../helpers-KTgXi0lA.cjs');
+
+exports.flatArrayKey = require_helpers.flatArrayKey;
+exports.fromNullishString = require_helpers.fromNullishString;
+exports.nameToTestId = require_helpers.nameToTestId;
+exports.toFormFormat = require_helpers.toFormFormat;
+exports.toNullishString = require_helpers.toNullishString;
+exports.toValidationFormat = require_helpers.toValidationFormat;

package/dist/helpers/index.d.cts

@@ -1,132 +1,2 @@
-/** Key used to wrap flat array elements when converting to form format */
-declare const flatArrayKey = "__FLAT__";
-/**
- * Converts marker strings back to their original values when processing arrays
- */
-declare const fromNullishString: (value: unknown) => unknown;
-/**
- * Converts null/falsy values to marker strings for JSON processing
- */
-declare const toNullishString: (value: unknown) => unknown;
-/**
- * Converts field values to a format suitable for forms by:
- * - Wrapping arrays of primitives as objects using the flatArrayKey `__FLAT__`
- *   to satisfy RHF's requirement that array fields contain objects
- * - Removing empty strings and null values from objects
- *
- * This conversion is required because React Hook Form does not support arrays with
- * flat values (string, number, boolean, null). Array fields must contain objects.
- * We work around this by wrapping primitive entries: `{ __FLAT__: <value> }`.
- *
- * @example
- * const fields = {
- *   name: 'John',
- *   scores: [0, null, 75, false],
- *   scoresDetailed: [
- *     { score: 1 },
- *     { score: null },
- *     { score: 0 },
- *     { score: false },
- *     { score: '' },
- *   ],
- *   contact: {
- *     email: '',
- *     phone: null,
- *     address: '123 Main St'
- *   }
- * };
- *
- * // Result:
- * {
- *   name: 'John',
- *   scores: [
- *     { __FLAT__: 0 },
- *     { __FLAT__: null },
- *     { __FLAT__: 75 },
- *     { __FLAT__: false }
- *   ],
- *   // Arrays of objects are left as objects; empty/null properties are removed
- *   scoresDetailed: [
- *     { score: 1 },
- *     {}, // null score removed
- *     { score: 0 },
- *     { score: false },
- *     {}, // empty string removed
- *   ],
- *   contact: {
- *     address: '123 Main St'
- *   }
- * }
- */
-declare const toFormFormat: (fields: Record<string, unknown>) => Record<string, unknown>;
-/**
- * Converts form state to a format suitable for validation by:
- * - Unwrapping flat array wrappers `{ __FLAT__: <value> }` back to primitives
- * - Converting legacy string markers (__NULL__, __FALSE__, __ZERO__) back to their original values
- * - Removing fields whose converted value is empty string or null
- * - Removing empty arrays
- *
- * @example
- * const formState = {
- *   name: 'John',
- *   scores: [
- *     { __FLAT__: 75 },
- *     { __FLAT__: 0 },
- *     { __FLAT__: null },
- *     { __FLAT__: false }
- *   ],
- *   emptyArray: [],
- *   scoresDetailed: [
- *     { score: 1 },
- *     {},
- *     { score: 0 },
- *     { score: false },
- *     {},
- *   ],
- *   contact: {
- *     address: '123 Main St',
- *     fax: null
- *   }
- * };
- *
- * // Result:
- * {
- *   name: 'John',
- *   scores: [75, 0, null, false],
- *   // emptyArray is removed
- *   // Objects inside arrays remain objects; empty entries remain empty objects
- *   scoresDetailed: [
- *     { score: 1 },
- *     {},
- *     { score: 0 },
- *     { score: false },
- *     {},
- *   ],
- *   contact: {
- *     address: '123 Main St'
- *   }
- * }
- */
-declare const toValidationFormat: (formState: Record<string, unknown> | null | undefined) => Record<string, unknown> | null | undefined;
-/**
- * Converts a field name to a testId by removing flat array key segments and slugifying.
- * Removes all occurrences of `flatArrayKey` from the field name and applies slugify transformation.
- *
- * This is used to generate stable testIds for form fields that don't include
- * the internal `__FLAT__` marker used for flat arrays.
- *
- * @param name - The field name as a string (e.g., 'tags.0.__FLAT__') or array path (e.g., ['tags', '0', '__FLAT__'])
- * @returns The slugified field name with all flat array key segments removed (e.g., 'tags_0')
- *
- * @example
- * ```ts
- * nameToTestId('tags.0.__FLAT__') // => 'tags_0'
- * nameToTestId('array.0.__FLAT__') // => 'array_0'
- * nameToTestId('nested.array.0.__FLAT__.field') // => 'nested_array_0_field'
- * nameToTestId('simple.field') // => 'simple_field'
- * nameToTestId(['tags', '0', '__FLAT__']) // => 'tags_0'
- * ```
- */
-declare const nameToTestId: (name: string | readonly string[]) => string;
-
-export { flatArrayKey, fromNullishString, nameToTestId, toFormFormat, toNullishString, toValidationFormat };
+import { a as toNullishString, i as toFormFormat, n as fromNullishString, o as toValidationFormat, r as nameToTestId, t as flatArrayKey } from "../index-G0IgQWoU.cjs";
+export { flatArrayKey, fromNullishString, nameToTestId, toFormFormat, toNullishString, toValidationFormat };