@fuf-stack/uniform 1.22.5 → 1.22.6

package/dist/{index-19JGtN7H.d.cts.map → Switch/index.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"index-19JGtN7H.d.cts","names":[],"sources":["../src/Switch/Switch.tsx"],"mappings":";;;;;cAaa,cAAA,IAAc,KAAA;EAAA;;;gbAezB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gbAfyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kbAiBV;;;;sbACH;EAAA;kbAAc;;;;sbAEC;EAAA;;;;;kbAoBf;;;;sbApBuB;EAAA;IAAA;;;kbAQnC;;;;sbAIA;EAAA;IAAA;;;kbAQA;;;;sbAiGD;EAAA;IAAA;;;kbA3Fe;;;;sbAQb;EAAA;IAAA;;;kbARa;;;;sbAAA;EAAA;kbAAA;;;;sbAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA7BX,YAAA,GAAe,OAAO,QAAQ,cAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,cAAA;AAAA,UAEnB,aAAA,SAAoB,YAAA;;EAEnC,SAAA;;EAEA,SAAA,GAAY,SAAA;;EAEZ,QAAA;;EAEA,UAAA,GAAa,SAAA;;EAEb,KAAA,GAAQ,SAAA;;EAER,IAAA;EAEA,IAAA;;EAEA,YAAA,GAAe,SAAA;;EAEf,MAAA;;EAEA,SAAA,GAAY,WAAA;AAAA;;;;cAMR,MAAA;EAAU,SAAA;EAAA,UAAA;EAAA,IAAA;EAAA,IAAA;EAAA,YAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAQb,aAAA,iCAAW,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/Switch/Switch.tsx"],"mappings":";;;;;cAaa,cAAA,IAAc,KAAA;EAAA;;;gbAezB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gbAfyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kbAiBV;;;;sbACH;EAAA;kbAAc;;;;sbAEC;EAAA;;;;;kbAoBf;;;;sbApBuB;EAAA;IAAA;;;kbAQnC;;;;sbAIA;EAAA;IAAA;;;kbAQA;;;;sbAiGD;EAAA;IAAA;;;kbA3Fe;;;;sbAQb;EAAA;IAAA;;;kbARa;;;;sbAAA;EAAA;kbAAA;;;;sbAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA7BX,YAAA,GAAe,OAAO,QAAQ,cAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,cAAA;AAAA,UAEnB,WAAA,SAAoB,YAAA;;EAEnC,SAAA;;EAEA,SAAA,GAAY,SAAA;;EAEZ,QAAA;;EAEA,UAAA,GAAa,SAAA;;EAEb,KAAA,GAAQ,SAAA;;EAER,IAAA;EAEA,IAAA;;EAEA,YAAA,GAAe,SAAA;;EAEf,MAAA;;EAEA,SAAA,GAAY,aAAA;AAAA;;;;cAMR,MAAA;EAAU,SAAA;EAAA,UAAA;EAAA,IAAA;EAAA,IAAA;EAAA,YAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAQb,WAAA,iCAAW,GAAA,CAAA,OAAA"}

package/dist/Switch/index.js

@@ -1,2 +1,81 @@
-import { n as Switch, r as switchVariants, t as Switch_default } from "../Switch-DvKRPFcC.js";
-export { Switch, Switch_default as default, switchVariants };
+import { useUniformField } from "../hooks/useUniformField/index.js";
+import { cn, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { Switch } from "@heroui/switch";
+//#region src/Switch/Switch.tsx
+const switchVariants = tv({ slots: {
+	base: "",
+	endContent: "",
+	errorMessage: "ml-1 mt-1",
+	label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]",
+	outerWrapper: "place-content-center",
+	startContent: "",
+	thumb: "",
+	thumbIcon: "",
+	wrapper: ""
+} });
+/**
+*  Switch component based on [HeroUI Switch](https://www.heroui.com//docs/components/switch)
+*/
+const Switch$1 = ({ className = void 0, endContent = void 0, name, size = void 0, startContent = void 0, thumbIcon = void 0, ...uniformFieldProps }) => {
+	const { ariaLabel, defaultValue, disabled, errorMessage, field, getErrorMessageProps, getHelperWrapperProps, invalid, label, onBlur, onChange, ref, required, testId } = useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const visualSwitchRef = useRef(null);
+	const classNames = variantsToClassNames(switchVariants(), className, "outerWrapper");
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames.outerWrapper,
+		children: [
+			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", {
+				ref,
+				"aria-label": ariaLabel,
+				checked: !!field.value,
+				name,
+				onBlur,
+				onChange: (e) => {
+					onChange(e.target.checked);
+				},
+				onFocus: () => {
+					visualSwitchRef.current?.focus();
+				},
+				type: "checkbox"
+			}) }),
+			/* @__PURE__ */ jsx(Switch, {
+				ref: visualSwitchRef,
+				"aria-label": ariaLabel,
+				classNames,
+				"data-invalid": invalid,
+				"data-required": required,
+				"data-testid": testId,
+				defaultSelected: !!defaultValue,
+				endContent,
+				isDisabled: disabled,
+				isSelected: !!field.value,
+				name: `${name}_switch`,
+				onValueChange: onChange,
+				size,
+				startContent,
+				thumbIcon,
+				children: label
+			}),
+			invalid ? /* @__PURE__ */ jsx("div", {
+				...getHelperWrapperProps(),
+				className: cn(getHelperWrapperProps()?.className, "ml-0 block"),
+				children: /* @__PURE__ */ jsx("div", {
+					...getErrorMessageProps(),
+					children: errorMessage
+				})
+			}) : null
+		]
+	});
+};
+//#endregion
+//#region src/Switch/index.ts
+var Switch_default = Switch$1;
+//#endregion
+export { Switch_default as default, switchVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Switch","HeroSwitch","Switch"],"sources":["../../src/Switch/Switch.tsx","../../src/Switch/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } 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 { Switch as HeroSwitch } 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 switchVariants = tv({\n  slots: {\n    base: '',\n    endContent: '',\n    errorMessage: 'ml-1 mt-1',\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      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    outerWrapper: 'place-content-center',\n    startContent: '',\n    thumb: '',\n    thumbIcon: '',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof switchVariants>;\ntype ClassName = TVClassName<typeof switchVariants>;\n\nexport interface SwitchProps 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  /** whether the select should be disabled */\n  disabled?: boolean;\n  /** Icon to be displayed at the end of the switch (when enabled) */\n  endContent?: ReactNode;\n  /** component displayed next to the switch */\n  label?: ReactNode;\n  /** name the field is registered under */\n  name: string;\n  /* Size of the switch */\n  size?: 'sm' | 'md' | 'lg';\n  /** Icon to be displayed at the start of the switch (when disabled) */\n  startContent?: ReactNode;\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 *  Switch component based on [HeroUI Switch](https://www.heroui.com//docs/components/switch)\n */\nconst Switch = ({\n  className = undefined,\n  endContent = undefined,\n  name,\n  size = undefined,\n  startContent = undefined,\n  thumbIcon = undefined,\n  ...uniformFieldProps\n}: SwitchProps) => {\n  const {\n    ariaLabel,\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  // classNames from slots\n  const variants = switchVariants();\n  const classNames = variantsToClassNames(variants, className, 'outerWrapper');\n\n  return (\n    <div className={classNames.outerWrapper}>\n      {/* Visually hidden input for form accessibility and focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={ariaLabel}\n          checked={!!field.value}\n          name={name}\n          onBlur={onBlur}\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          type=\"checkbox\"\n        />\n      </VisuallyHidden>\n      {/* Visual HeroSwitch component */}\n      <HeroSwitch\n        ref={visualSwitchRef}\n        aria-label={ariaLabel}\n        classNames={classNames}\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n        defaultSelected={!!defaultValue}\n        endContent={endContent}\n        isDisabled={disabled}\n        isSelected={!!field.value}\n        name={`${name}_switch`}\n        onValueChange={onChange}\n        size={size}\n        startContent={startContent}\n        thumbIcon={thumbIcon}\n      >\n        {label}\n      </HeroSwitch>\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 Switch;\n","import Switch from './Switch';\n\nexport type { SwitchProps } from './Switch';\n\nexport { switchVariants } from './Switch';\n\nexport default Switch;\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,GAAG,EAC/B,OAAO;CACL,MAAM;CACN,YAAY;CACZ,cAAc;CAGd,OACE;CACF,cAAc;CACd,cAAc;CACd,OAAO;CACP,WAAW;CACX,SAAS;AACX,EACF,CAAC;;;;AA+BD,MAAMA,YAAU,EACd,YAAY,KAAA,GACZ,aAAa,KAAA,GACb,MACA,OAAO,KAAA,GACP,eAAe,KAAA,GACf,YAAY,KAAA,GACZ,GAAG,wBACc;CACjB,MAAM,EACJ,WACA,cACA,UACA,cACA,OACA,sBACA,uBACA,SACA,OACA,QACA,UACA,KACA,UACA,WACE,gBAAgB;EAClB;EACA,GAAG;CACL,CAAC;CAGD,MAAM,kBAAkB,OAAyB,IAAI;CAIrD,MAAM,aAAa,qBADF,eAC8B,GAAG,WAAW,cAAc;CAE3E,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW;YAA3B;GAEE,oBAAC,gBAAD,EAAA,UACE,oBAAC,SAAD;IACO;IACL,cAAY;IACZ,SAAS,CAAC,CAAC,MAAM;IACX;IACE;IACR,WAAW,MAAM;KACf,SAAS,EAAE,OAAO,OAAO;IAC3B;IACA,eAAe;KAGb,gBAAgB,SAAS,MAAM;IACjC;IACA,MAAK;GACN,CAAA,EACa,CAAA;GAEhB,oBAACC,QAAD;IACE,KAAK;IACL,cAAY;IACA;IACZ,gBAAc;IACd,iBAAe;IACf,eAAa;IACb,iBAAiB,CAAC,CAAC;IACP;IACZ,YAAY;IACZ,YAAY,CAAC,CAAC,MAAM;IACpB,MAAM,GAAG,KAAK;IACd,eAAe;IACT;IACQ;IACH;cAEV;GACS,CAAA;GACX,UACC,oBAAC,OAAD;IACE,GAAI,sBAAsB;IAC1B,WAAW,GACT,sBAAsB,GAAG,WAEzB,YACF;cAEA,oBAAC,OAAD;KAAK,GAAI,qBAAqB;eAAI;IAAkB,CAAA;GACjD,CAAA,IACH;EACD;;AAET;;;AChJA,IAAA,iBAAeC"}

package/dist/SwitchBox/index.cjs

@@ -2,7 +2,157 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_SwitchBox = require("../SwitchBox-Dl-F5y2m.cjs");
-exports.SwitchBox = require_SwitchBox.SwitchBox;
-exports.default = require_SwitchBox.SwitchBox_default;
-exports.switchBoxVariants = require_SwitchBox.switchBoxVariants;
+const require_hooks_useUniformField_index = require("../hooks/useUniformField/index.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_hooks_useUniformField_index.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)(react_jsx_runtime.Fragment, { 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,
+				onChange: (e) => {
+					onChange(e.target.checked);
+				},
+				onFocus: () => {
+					visualSwitchRef.current?.focus();
+				},
+				tabIndex: -1,
+				type: "checkbox"
+			}), /* @__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] });
+};
+//#endregion
+//#region src/SwitchBox/index.ts
+var SwitchBox_default = SwitchBox;
+//#endregion
+exports.default = SwitchBox_default;
+exports.switchBoxVariants = switchBoxVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/SwitchBox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useUniformField","VisuallyHidden"],"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    <>\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            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            tabIndex={-1}\n            type=\"checkbox\"\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    </>\n  );\n};\n\nexport default SwitchBox;\n","import SwitchBox from './SwitchBox';\n\nexport type { SwitchBoxProps } from './SwitchBox';\n\nexport { switchBoxVariants } from './SwitchBox';\n\nexport default SwitchBox;\n"],"mappings":"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"}