@g4rcez/components 5.0.2 → 5.0.3

package/dist/components/form/multi-select.jsx

@@ -1,18 +1,16 @@
 "use client";
-import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingOverlay, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
+import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingOverlay, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useTransitionStyles, } from "@floating-ui/react";
 import { CaretDownIcon, XIcon } from "@phosphor-icons/react";
 import { AnimatePresence, motion } from "motion/react";
-import React, { forwardRef, Fragment, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { Virtuoso } from "react-virtuoso";
 import { useRemoveScroll } from "../../hooks/use-remove-scroll";
 import { useTranslations } from "../../hooks/use-translations";
 import { Dict } from "../../lib/dict";
 import { css, getRemainingSize, initializeInputDataset } from "../../lib/dom";
-import { noop } from "../../lib/fns";
 import { fzf } from "../../lib/fzf";
 import { Tag } from "../core/tag";
-import { Checkbox } from "./checkbox";
 import { InputField } from "./input-field";
 const MIN_SIZE = 40;
 const Frag = (props) => <Fragment>{props.children}</Fragment>;
@@ -24,11 +22,11 @@ const transitionStyles = {
 };
 const EMPTY_NODES = [];
 const EMPTY_VALUES = [];
-const List = forwardRef(function VirtualItem({ item: _item, context: _context, ...props }, ref) {
-    return <motion.li {...props} ref={ref} className="last:rounded-t-dropdown-radius"/>;
+const List = forwardRef(function VirtualList({ context, ...props }, ref) {
+    return <motion.div {...props} id={context?.listboxId} ref={ref} role="listbox" className="last:rounded-t-dropdown-radius"/>;
 });
 const Item = forwardRef(function VirtualList({ context: _context, ...props }, ref) {
-    return (<motion.div {...props} ref={ref} className="w-full rounded-b-dropdown-radius border-b border-tooltip-border last:border-transparent">
+    return (<motion.div {...props} ref={ref} role="presentation" className="w-full">
             <AnimatePresence>{props.children}</AnimatePresence>
         </motion.div>);
 });
@@ -64,6 +62,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
     const searchInputRef = useRef(null);
     const defaults = props.value ?? props.defaultValue ?? EMPTY_VALUES;
     const translation = useTranslations();
+    const generatedId = useId();
     const [open, setOpen] = useState(false);
     const [shadow, setShadow] = useState("");
     const [value, setValue] = useState(() => {
@@ -128,7 +127,6 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
     const isTopPlacement = placement === "top" || placement === "top-start";
     const transitions = useTransitionStyles(context, transitionStyles);
     const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-        useRole(context, { role: "listbox" }),
         useDismiss(context),
         useListNavigation(context, {
             cols: 0,
@@ -186,6 +184,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
         setLabel((prev) => prev.concat(opt.label ?? ""));
         setShadow("");
         setIndex(i);
+        searchInputRef.current?.focus();
     };
     const onChange = (event) => {
         const v = event.target.value;
@@ -211,7 +210,10 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
         onChangeOptions?.([]);
         setClosed();
     };
-    const id = props.id || props.name;
+    const id = props.id || props.name || generatedId;
+    const shadowId = `${id}-shadow`;
+    const listboxId = `${shadowId}-listbox`;
+    const activeOptionId = open && index !== null && displayList[index] ? `${shadowId}-option-${index}` : undefined;
     const tags = value.map((x, i) => (<Tag size="small" key={`MultiSelect-${x.value}-x`} icon={<button type="button" aria-label={`Remove ${x.label ?? x.value}`} className="text-current hover:text-danger focus:text-danger" onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -221,7 +223,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                     </button>}>
                 {x.label ?? x.value}
             </Tag>));
-    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} name={props.name} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} id={props.name || props.id} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} right={<span className="flex items-center gap-0.5">
+    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} name={props.name} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} id={id} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} right={<span className="flex items-center gap-0.5">
                         {right}
                         <button type="button" className="transition-colors link:text-primary" onClick={onCaretDownClick}>
                             <CaretDownIcon size={20}/>
@@ -233,17 +235,23 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                                 </svg>
                             </button>) : null}
                     </span>}>
-                <ul {...getReferenceProps({
+                <div {...getReferenceProps({
         ...props,
-        tabIndex: 0,
+        tabIndex: open ? -1 : 0,
         onFocus,
-        id: `${id}-shadow`,
-        name: `${id}-shadow`,
+        id: shadowId,
+        role: open ? "presentation" : "combobox",
+        name: shadowId,
         ref: refs.setReference,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
+        "aria-activedescendant": activeOptionId,
+        "aria-labelledby": `${id}-label`,
     })} data-name={id} data-target={id} data-shadow="true" data-error={!!error} data-value={values.join(",")} className={css("input placeholder-input-mask group h-input-height w-full text-input-text", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", "flex flex-row items-center gap-input-gap whitespace-nowrap text-left", "max-w-full overflow-x-auto truncate overflow-ellipsis", props.className)}>
-                    {values.length > 0 ? null : <li className="text-input-placeholder">{props.placeholder}</li>}
+                    {values.length > 0 ? null : <span className="text-input-placeholder">{props.placeholder}</span>}
                     <OverflowControl label={selectedLabel}>{tags}</OverflowControl>
-                </ul>
+                </div>
                 <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || values || undefined}/>
                 <FloatingPortal preserveTabOrder>
                     {open ? (<FloatingOverlay lockScroll className="z-floating">
@@ -257,26 +265,28 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                 position: strategy,
             },
         })} data-floating="true" className={css("relative shadow-floating overflow-clip isolate z-floating m-0 max-h-dropdown-max-h list-none overscroll-contain rounded-dropdown-radius border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")}>
-                                    <input ref={searchInputRef} value={shadow} onChange={onChange} title={props.title} placeholder={translation.multiSelectInnerPlaceholder} className="input placeholder-input-mask group mb-1 h-input-height w-full flex-1 rounded-none border-b border-input-border bg-transparent px-input-padding-x py-input-padding-y outline-none transition-colors focus:border-primary" onKeyDown={(event) => {
+                                    <input ref={searchInputRef} value={shadow} onChange={onChange} title={props.title} role="combobox" aria-autocomplete="list" aria-expanded={open} aria-haspopup="listbox" aria-controls={listboxId} aria-activedescendant={activeOptionId} aria-labelledby={`${id}-label`} autoComplete="off" placeholder={translation.multiSelectInnerPlaceholder} className="input placeholder-input-mask group mb-1 h-input-height w-full flex-1 rounded-none border-b border-input-border bg-transparent px-input-padding-x py-input-padding-y outline-none transition-colors focus:border-primary" onKeyDown={(event) => {
                 if (event.key === "ArrowDown") {
-                    let next = index + 1;
+                    event.preventDefault();
+                    let next = index === null ? 0 : index + 1;
                     if (next > displayList.length - 1)
                         next = 0;
                     virtuoso.current?.scrollIntoView({ index: next });
                     return setIndex(next);
                 }
                 if (event.key === "ArrowUp") {
-                    let next = index - 1;
+                    event.preventDefault();
+                    let next = index === null ? displayList.length - 1 : index - 1;
                     if (next < 0)
                         next = displayList.length - 1;
                     virtuoso.current?.scrollIntoView({ index: next });
                     return setIndex(next);
                 }
                 if (event.key === "Escape") {
-                    event.currentTarget.blur();
+                    event.preventDefault();
                     return setClosed();
                 }
-                if (event.key === "Enter") {
+                if (event.key === "Enter" || event.key === " " || event.code === "Space") {
                     if (index !== null && displayList[index]) {
                         event.preventDefault();
                         return onSelect(displayList[index], index);
@@ -301,7 +311,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                     const sum = (li?.getBoundingClientRect().height ?? MIN_SIZE) * displayList.length;
                     flushSync(() => setH(Math.min(320, sum + 2)));
                 }}>
-                                            <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} style={{ height: h }} defaultItemHeight={MIN_SIZE} components={components} totalListHeightChanged={(totalHeight) => setH(Math.min(320, totalHeight))} scrollerRef={(e) => {
+                                            <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} context={{ listboxId }} style={{ height: h }} initialItemCount={displayList.length} defaultItemHeight={MIN_SIZE} components={components} totalListHeightChanged={(totalHeight) => setH(Math.min(320, totalHeight))} scrollerRef={(e) => {
                     scroller.current = e;
                     removeScrollRef.current = e;
                 }} className="max-h-72 border-floating-border bg-floating-background p-0 text-foreground" itemContent={(i, option) => {
@@ -309,26 +319,24 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                     const active = value.has(option.value) || value.has(option.label ?? "");
                     const selected = index === i;
                     const children = option.label ?? option.value;
-                    return (<button data-value={option.value} {...getItemProps({
+                    return (<div id={`${shadowId}-option-${i}`} data-value={option.value} {...getItemProps({
                         ref: (node) => {
                             listRef.current[i] = node;
                         },
                         role: "option",
-                        type: "button",
-                        "aria-checked": active,
-                        "aria-current": active,
                         "aria-selected": active,
                         "aria-disabled": option.disabled,
-                        onClick: () => onSelect(option, i),
-                    })} className={`flex w-full max-w-full cursor-pointer items-center justify-start p-menu-item-p text-left hover:bg-floating-hover focus:bg-floating-hover ${active || selected ? "bg-floating-hover text-floating-foreground" : ""}`}>
-                                                            <Checkbox onChange={noop} checked={active} aria-checked={active} onClick={(e) => {
-                            e.stopPropagation();
-                            onSelect(option, i);
-                        }}/>
+                        tabIndex: -1,
+                        onClick: () => {
+                            if (!option.disabled)
+                                onSelect(option, i);
+                        },
+                    })} className={css("flex w-full max-w-full cursor-pointer items-center justify-start p-menu-item-p text-left hover:bg-floating-hover focus:bg-floating-hover", active || selected ? "bg-floating-hover text-floating-foreground" : "")}>
+                                                            <span aria-hidden="true" data-selected={active} className="mr-checkbox-gap inline-block size-checkbox-size rounded-checkbox-radius border border-card-border data-[selected=true]:bg-primary"/>
                                                             <Label {...option} label={option.label} value={option.value}>
                                                                 {children}
                                                             </Label>
-                                                        </button>);
+                                                        </div>);
                 }}/>
                                         </motion.div>)}
                                     <div className="gap-menu-item-gap sticky bottom-0 flex w-full flex-nowrap items-center overflow-x-auto rounded-b-dropdown-radius bg-floating-background p-menu-item-p">

package/dist/components/form/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGA4GlB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGA+GlB,CAAC"}

package/dist/components/form/select.js

@@ -1,77 +1,81 @@
 "use client";
 import { o as e, t, u as n } from "../../dom-Bn4wY_Zx.js";
 import { t as r } from "../../CaretDown.es-BXl0Ixp3.js";
-import { n as i } from "../../input-field-B_whI66Q.js";
-import { t as a } from "../../use-translations-DTLfPE3_.js";
-import { createElement as o, forwardRef as s, useEffect as c, useImperativeHandle as l, useRef as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { n as i } from "../../input-field-ffx1MbHo.js";
+import { t as a } from "../../use-translations-BE4PuhLm.js";
+import { createElement as o, forwardRef as s, useEffect as c, useId as l, useImperativeHandle as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/form/select.tsx
-var p = s(({ required: s = !0, options: p, info: m, selectContainer: h = "", feedback: g = null, labelClassName: _, interactive: v, rightLabel: y, hiddenLabel: b, loading: x, optionalText: S, container: C, hideLeft: w = !1, right: T, left: E, error: D, ...O }, k) => {
-	let A = a(), j = u(null), M = O.id ?? O.name;
-	return l(k, () => j.current), c(() => {
-		if (j.current === null) return;
-		let t = new AbortController(), n = j.current, r = e(j.current);
+var m = s(({ required: s = !0, options: m, info: h, selectContainer: g = "", feedback: _ = null, labelClassName: v, interactive: y, rightLabel: b, hiddenLabel: x, loading: S, optionalText: C, container: w, hideLeft: T = !1, right: E, left: D, error: O, ...k }, A) => {
+	let j = a(), M = d(null), N = l(), P = k.id ?? k.name ?? N, F = [
+		k["aria-describedby"],
+		_ ? `${P}-feedback` : void 0,
+		O ? `${P}-error` : void 0
+	].filter(Boolean).join(" ") || void 0;
+	return u(A, () => M.current), c(() => {
+		if (M.current === null) return;
+		let t = new AbortController(), n = M.current, r = e(M.current);
 		return n.addEventListener("change", () => n.setAttribute("data-selected", "true"), {
 			once: !0,
 			signal: t.signal
 		}), () => {
 			r(), t.abort();
 		};
-	}, []), /* @__PURE__ */ d(i, {
-		info: m,
-		left: E,
-		error: D,
-		form: O.form,
-		loading: x,
-		name: O.name,
-		feedback: g,
-		hideLeft: w,
+	}, []), /* @__PURE__ */ f(i, {
+		info: h,
+		left: D,
+		error: O,
+		form: k.form,
+		loading: S,
+		name: k.name ?? P,
+		feedback: _,
+		hideLeft: T,
 		required: s,
-		title: O.title,
-		container: C,
+		title: k.title,
+		container: w,
 		componentName: "select",
-		rightLabel: y,
-		hiddenLabel: b,
-		interactive: v,
-		id: O.name || O.id,
-		optionalText: S,
-		labelClassName: _,
-		placeholder: O.placeholder,
-		right: /* @__PURE__ */ f("label", {
-			htmlFor: M,
-			children: [T, /* @__PURE__ */ f("button", {
-				onClick: () => j.current?.focus(),
-				type: "button",
-				className: "mt-2 transition-colors hover:text-primary",
-				children: [/* @__PURE__ */ d(r, { size: 20 }), /* @__PURE__ */ d("span", {
-					className: "sr-only",
-					children: A.inputCaretDown
-				})]
+		rightLabel: b,
+		hiddenLabel: x,
+		interactive: y,
+		id: P,
+		optionalText: C,
+		labelClassName: v,
+		placeholder: k.placeholder,
+		right: /* @__PURE__ */ p("span", { children: [E, /* @__PURE__ */ p("button", {
+			onClick: () => M.current?.focus(),
+			type: "button",
+			className: "mt-2 transition-colors hover:text-primary",
+			children: [/* @__PURE__ */ f(r, { size: 20 }), /* @__PURE__ */ f("span", {
+				className: "sr-only",
+				children: j.inputCaretDown
 			})]
-		}),
-		children: /* @__PURE__ */ f("select", {
-			...O,
-			id: M,
-			name: M,
+		})] }),
+		children: /* @__PURE__ */ p("select", {
+			...k,
+			id: P,
+			name: k.name ?? P,
 			required: s,
-			ref: n(k, j),
-			"data-selected": !!O.value || !1,
-			title: typeof O.title == "string" ? O.title : void 0,
-			className: t("input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text", "bg-transparent px-input-padding-x py-input-padding-y text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", O.className),
-			children: [/* @__PURE__ */ d("option", {
+			ref: n(A, M),
+			"aria-invalid": O ? !0 : k["aria-invalid"],
+			"aria-labelledby": `${P}-label`,
+			"aria-describedby": F,
+			"data-selected": !!k.value || !1,
+			title: typeof k.title == "string" ? k.title : void 0,
+			className: t("input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text", "bg-transparent px-input-padding-x py-input-padding-y text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", k.className),
+			children: [/* @__PURE__ */ f("option", {
 				value: "",
 				disabled: !0,
 				hidden: !0,
-				children: O.placeholder
-			}), p.map((e) => /* @__PURE__ */ o("option", {
+				children: k.placeholder
+			}), m.map((e) => /* @__PURE__ */ o("option", {
 				...e,
 				value: e.value,
-				key: `${M}-select-option-${e.value}`
+				key: `${P}-select-option-${e.value}`
 			}, e.label ?? e.value))]
 		})
 	});
 });
 //#endregion
-export { p as Select };
+export { m as Select };
 
 //# sourceMappingURL=select.js.map

package/dist/components/form/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../src/components/form/select.tsx"],"sourcesContent":["\"use client\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css, initializeInputDataset, mergeRefs } from \"../../lib/dom\";\nimport { Override } from \"../../types\";\nimport { InputField, InputFieldProps } from \"./input-field\";\n\nexport type OptionProps = Override<\n    React.ComponentProps<\"option\">,\n    {\n        value: string;\n        \"data-dynamic\"?: string;\n    } & Partial<Record<`data-${string}`, string>>\n>;\n\nexport type SelectProps = Override<\n    InputFieldProps<\"select\">,\n    {\n        options: OptionProps[];\n        selectContainer?: string;\n    }\n>;\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (\n        {\n            required = true,\n            options,\n            info,\n            selectContainer: _selectContainer = \"\",\n            feedback = null,\n            labelClassName,\n            interactive,\n            rightLabel,\n            hiddenLabel,\n            loading,\n            optionalText,\n            container,\n            hideLeft = false,\n            right,\n            left,\n            error,\n            ...props\n        }: SelectProps,\n        ref\n    ) => {\n        const translation = useTranslations();\n        const inputRef = useRef<HTMLSelectElement>(null);\n        const id = props.id ?? props.name;\n        useImperativeHandle(ref, () => inputRef.current!);\n\n        useEffect(() => {\n            if (inputRef.current === null) return;\n            const controller = new AbortController();\n            const input = inputRef.current;\n            const focus = initializeInputDataset(inputRef.current);\n            input.addEventListener(\"change\", () => input.setAttribute(\"data-selected\", \"true\"), {\n                once: true,\n                signal: controller.signal,\n            });\n            return () => {\n                focus();\n                controller.abort();\n            };\n        }, []);\n\n        const onClickLabel = () => inputRef.current?.focus();\n\n        return (\n            <InputField<\"select\">\n                info={info}\n                left={left}\n                error={error}\n                form={props.form}\n                loading={loading}\n                name={props.name}\n                feedback={feedback}\n                hideLeft={hideLeft}\n                required={required}\n                title={props.title}\n                container={container}\n                componentName=\"select\"\n                rightLabel={rightLabel}\n                hiddenLabel={hiddenLabel}\n                interactive={interactive}\n                id={props.name || props.id}\n                optionalText={optionalText}\n                labelClassName={labelClassName}\n                placeholder={props.placeholder}\n                right={\n                    <label htmlFor={id}>\n                        {right}\n                        <button onClick={onClickLabel} type=\"button\" className=\"mt-2 transition-colors hover:text-primary\">\n                            <CaretDownIcon size={20} />\n                            <span className=\"sr-only\">{translation.inputCaretDown}</span>\n                        </button>\n                    </label>\n                }\n            >\n                <select\n                    {...props}\n                    id={id}\n                    name={id}\n                    required={required}\n                    ref={mergeRefs(ref, inputRef)}\n                    data-selected={!!props.value || false}\n                    title={typeof props.title === \"string\" ? props.title : undefined}\n                    className={css(\n                        \"input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text\",\n                        \"bg-transparent px-input-padding-x py-input-padding-y text-foreground placeholder-input-placeholder\",\n                        \"outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error\",\n                        \"data-[selected=false]:text-input-placeholder\",\n                        props.className\n                    )}\n                >\n                    <option value=\"\" disabled hidden>\n                        {props.placeholder}\n                    </option>\n                    {options.map((option) => (\n                        <option\n                            {...option}\n                            value={option.value}\n                            key={`${id}-select-option-${option.value}`}\n                        >\n                            {option.label ?? option.value}\n                        </option>\n                    ))}\n                </select>\n            </InputField>\n        );\n    }\n);\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAS,GAEd,EACI,cAAW,IACX,YACA,SACA,iBAAiB,IAAmB,IACpC,cAAW,MACX,mBACA,gBACA,eACA,gBACA,YACA,iBACA,cACA,cAAW,IACX,UACA,SACA,UACA,GAAG,KAEP,MACC;CACD,IAAM,IAAc,EAAgB,GAC9B,IAAW,EAA0B,IAAI,GACzC,IAAK,EAAM,MAAM,EAAM;CAoB7B,OAnBA,EAAoB,SAAW,EAAS,OAAQ,GAEhD,QAAgB;EACZ,IAAI,EAAS,YAAY,MAAM;EAC/B,IAAM,IAAa,IAAI,gBAAgB,GACjC,IAAQ,EAAS,SACjB,IAAQ,EAAuB,EAAS,OAAO;EAKrD,OAJA,EAAM,iBAAiB,gBAAgB,EAAM,aAAa,iBAAiB,MAAM,GAAG;GAChF,MAAM;GACN,QAAQ,EAAW;EACvB,CAAC,SACY;GAET,AADA,EAAM,GACN,EAAW,MAAM;EACrB;CACJ,GAAG,CAAC,CAAC,GAKD,kBAAC,GAAD;EACU;EACA;EACC;EACP,MAAM,EAAM;EACH;EACT,MAAM,EAAM;EACF;EACA;EACA;EACV,OAAO,EAAM;EACF;EACX,eAAc;EACF;EACC;EACA;EACb,IAAI,EAAM,QAAQ,EAAM;EACV;EACE;EAChB,aAAa,EAAM;EACnB,OACI,kBAAC,SAAD;GAAO,SAAS;aAAhB,CACK,GACD,kBAAC,UAAD;IAAQ,eA1BG,EAAS,SAAS,MAAM;IA0BJ,MAAK;IAAS,WAAU;cAAvD,CACI,kBAAC,GAAD,EAAe,MAAM,GAAK,CAAA,GAC1B,kBAAC,QAAD;KAAM,WAAU;eAAW,EAAY;IAAqB,CAAA,CACxD;KACL;;YAGX,kBAAC,UAAD;GACI,GAAI;GACA;GACJ,MAAM;GACI;GACV,KAAK,EAAU,GAAK,CAAQ;GAC5B,iBAAe,CAAC,CAAC,EAAM,SAAS;GAChC,OAAO,OAAO,EAAM,SAAU,WAAW,EAAM,QAAQ,KAAA;GACvD,WAAW,EACP,wGACA,sGACA,mGACA,gDACA,EAAM,SACV;aAdJ,CAgBI,kBAAC,UAAD;IAAQ,OAAM;IAAG,UAAA;IAAS,QAAA;cACrB,EAAM;GACH,CAAA,GACP,EAAQ,KAAK,MACV,kBAAC,UAAD;IACI,GAAI;IACJ,OAAO,EAAO;IACd,KAAK,GAAG,EAAG,iBAAiB,EAAO;GAG/B,GADH,EAAO,SAAS,EAAO,KACpB,CACX,CACG;;CACA,CAAA;AAEpB,CACJ"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../src/components/form/select.tsx"],"sourcesContent":["\"use client\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css, initializeInputDataset, mergeRefs } from \"../../lib/dom\";\nimport { Override } from \"../../types\";\nimport { InputField, InputFieldProps } from \"./input-field\";\n\nexport type OptionProps = Override<\n    React.ComponentProps<\"option\">,\n    {\n        value: string;\n        \"data-dynamic\"?: string;\n    } & Partial<Record<`data-${string}`, string>>\n>;\n\nexport type SelectProps = Override<\n    InputFieldProps<\"select\">,\n    {\n        options: OptionProps[];\n        selectContainer?: string;\n    }\n>;\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (\n        {\n            required = true,\n            options,\n            info,\n            selectContainer: _selectContainer = \"\",\n            feedback = null,\n            labelClassName,\n            interactive,\n            rightLabel,\n            hiddenLabel,\n            loading,\n            optionalText,\n            container,\n            hideLeft = false,\n            right,\n            left,\n            error,\n            ...props\n        }: SelectProps,\n        ref\n    ) => {\n        const translation = useTranslations();\n        const inputRef = useRef<HTMLSelectElement>(null);\n        const generatedId = useId();\n        const id = props.id ?? props.name ?? generatedId;\n        const describedBy =\n            [props[\"aria-describedby\"], feedback ? `${id}-feedback` : undefined, error ? `${id}-error` : undefined].filter(Boolean).join(\" \") ||\n            undefined;\n        useImperativeHandle(ref, () => inputRef.current!);\n\n        useEffect(() => {\n            if (inputRef.current === null) return;\n            const controller = new AbortController();\n            const input = inputRef.current;\n            const focus = initializeInputDataset(inputRef.current);\n            input.addEventListener(\"change\", () => input.setAttribute(\"data-selected\", \"true\"), {\n                once: true,\n                signal: controller.signal,\n            });\n            return () => {\n                focus();\n                controller.abort();\n            };\n        }, []);\n\n        const onClickLabel = () => inputRef.current?.focus();\n\n        return (\n            <InputField<\"select\">\n                info={info}\n                left={left}\n                error={error}\n                form={props.form}\n                loading={loading}\n                name={props.name ?? id}\n                feedback={feedback}\n                hideLeft={hideLeft}\n                required={required}\n                title={props.title}\n                container={container}\n                componentName=\"select\"\n                rightLabel={rightLabel}\n                hiddenLabel={hiddenLabel}\n                interactive={interactive}\n                id={id}\n                optionalText={optionalText}\n                labelClassName={labelClassName}\n                placeholder={props.placeholder}\n                right={\n                    <span>\n                        {right}\n                        <button onClick={onClickLabel} type=\"button\" className=\"mt-2 transition-colors hover:text-primary\">\n                            <CaretDownIcon size={20} />\n                            <span className=\"sr-only\">{translation.inputCaretDown}</span>\n                        </button>\n                    </span>\n                }\n            >\n                <select\n                    {...props}\n                    id={id}\n                    name={props.name ?? id}\n                    required={required}\n                    ref={mergeRefs(ref, inputRef)}\n                    aria-invalid={error ? true : props[\"aria-invalid\"]}\n                    aria-labelledby={`${id}-label`}\n                    aria-describedby={describedBy}\n                    data-selected={!!props.value || false}\n                    title={typeof props.title === \"string\" ? props.title : undefined}\n                    className={css(\n                        \"input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text\",\n                        \"bg-transparent px-input-padding-x py-input-padding-y text-foreground placeholder-input-placeholder\",\n                        \"outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error\",\n                        \"data-[selected=false]:text-input-placeholder\",\n                        props.className\n                    )}\n                >\n                    <option value=\"\" disabled hidden>\n                        {props.placeholder}\n                    </option>\n                    {options.map((option) => (\n                        <option {...option} value={option.value} key={`${id}-select-option-${option.value}`}>\n                            {option.label ?? option.value}\n                        </option>\n                    ))}\n                </select>\n            </InputField>\n        );\n    }\n);\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAS,GAEd,EACI,cAAW,IACX,YACA,SACA,iBAAiB,IAAmB,IACpC,cAAW,MACX,mBACA,gBACA,eACA,gBACA,YACA,iBACA,cACA,cAAW,IACX,UACA,SACA,UACA,GAAG,KAEP,MACC;CACD,IAAM,IAAc,EAAgB,GAC9B,IAAW,EAA0B,IAAI,GACzC,IAAc,EAAM,GACpB,IAAK,EAAM,MAAM,EAAM,QAAQ,GAC/B,IACF;EAAC,EAAM;EAAqB,IAAW,GAAG,EAAG,aAAa,KAAA;EAAW,IAAQ,GAAG,EAAG,UAAU,KAAA;CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAChI,KAAA;CAoBJ,OAnBA,EAAoB,SAAW,EAAS,OAAQ,GAEhD,QAAgB;EACZ,IAAI,EAAS,YAAY,MAAM;EAC/B,IAAM,IAAa,IAAI,gBAAgB,GACjC,IAAQ,EAAS,SACjB,IAAQ,EAAuB,EAAS,OAAO;EAKrD,OAJA,EAAM,iBAAiB,gBAAgB,EAAM,aAAa,iBAAiB,MAAM,GAAG;GAChF,MAAM;GACN,QAAQ,EAAW;EACvB,CAAC,SACY;GAET,AADA,EAAM,GACN,EAAW,MAAM;EACrB;CACJ,GAAG,CAAC,CAAC,GAKD,kBAAC,GAAD;EACU;EACA;EACC;EACP,MAAM,EAAM;EACH;EACT,MAAM,EAAM,QAAQ;EACV;EACA;EACA;EACV,OAAO,EAAM;EACF;EACX,eAAc;EACF;EACC;EACA;EACT;EACU;EACE;EAChB,aAAa,EAAM;EACnB,OACI,kBAAC,QAAD,EAAA,UAAA,CACK,GACD,kBAAC,UAAD;GAAQ,eA1BG,EAAS,SAAS,MAAM;GA0BJ,MAAK;GAAS,WAAU;aAAvD,CACI,kBAAC,GAAD,EAAe,MAAM,GAAK,CAAA,GAC1B,kBAAC,QAAD;IAAM,WAAU;cAAW,EAAY;GAAqB,CAAA,CACxD;IACN,EAAA,CAAA;YAGV,kBAAC,UAAD;GACI,GAAI;GACA;GACJ,MAAM,EAAM,QAAQ;GACV;GACV,KAAK,EAAU,GAAK,CAAQ;GAC5B,gBAAc,IAAQ,KAAO,EAAM;GACnC,mBAAiB,GAAG,EAAG;GACvB,oBAAkB;GAClB,iBAAe,CAAC,CAAC,EAAM,SAAS;GAChC,OAAO,OAAO,EAAM,SAAU,WAAW,EAAM,QAAQ,KAAA;GACvD,WAAW,EACP,wGACA,sGACA,mGACA,gDACA,EAAM,SACV;aAjBJ,CAmBI,kBAAC,UAAD;IAAQ,OAAM;IAAG,UAAA;IAAS,QAAA;cACrB,EAAM;GACH,CAAA,GACP,EAAQ,KAAK,MACV,kBAAC,UAAD;IAAQ,GAAI;IAAQ,OAAO,EAAO;IAAO,KAAK,GAAG,EAAG,iBAAiB,EAAO;GAEpE,GADH,EAAO,SAAS,EAAO,KACpB,CACX,CACG;;CACA,CAAA;AAEpB,CACJ"}

package/dist/components/form/select.jsx

@@ -1,13 +1,16 @@
 "use client";
 import { CaretDownIcon } from "@phosphor-icons/react";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
 import { useTranslations } from "../../hooks/use-translations";
 import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { InputField } from "./input-field";
 export const Select = forwardRef(({ required = true, options, info, selectContainer: _selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, hiddenLabel, loading, optionalText, container, hideLeft = false, right, left, error, ...props }, ref) => {
     const translation = useTranslations();
     const inputRef = useRef(null);
-    const id = props.id ?? props.name;
+    const generatedId = useId();
+    const id = props.id ?? props.name ?? generatedId;
+    const describedBy = [props["aria-describedby"], feedback ? `${id}-feedback` : undefined, error ? `${id}-error` : undefined].filter(Boolean).join(" ") ||
+        undefined;
     useImperativeHandle(ref, () => inputRef.current);
     useEffect(() => {
         if (inputRef.current === null)
@@ -25,14 +28,14 @@ export const Select = forwardRef(({ required = true, options, info, selectContai
         };
     }, []);
     const onClickLabel = () => inputRef.current?.focus();
-    return (<InputField info={info} left={left} error={error} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} componentName="select" rightLabel={rightLabel} hiddenLabel={hiddenLabel} interactive={interactive} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} right={<label htmlFor={id}>
+    return (<InputField info={info} left={left} error={error} form={props.form} loading={loading} name={props.name ?? id} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} componentName="select" rightLabel={rightLabel} hiddenLabel={hiddenLabel} interactive={interactive} id={id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} right={<span>
                         {right}
                         <button onClick={onClickLabel} type="button" className="mt-2 transition-colors hover:text-primary">
                             <CaretDownIcon size={20}/>
                             <span className="sr-only">{translation.inputCaretDown}</span>
                         </button>
-                    </label>}>
-                <select {...props} id={id} name={id} required={required} ref={mergeRefs(ref, inputRef)} data-selected={!!props.value || false} title={typeof props.title === "string" ? props.title : undefined} className={css("input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text", "bg-transparent px-input-padding-x py-input-padding-y text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className)}>
+                    </span>}>
+                <select {...props} id={id} name={props.name ?? id} required={required} ref={mergeRefs(ref, inputRef)} aria-invalid={error ? true : props["aria-invalid"]} aria-labelledby={`${id}-label`} aria-describedby={describedBy} data-selected={!!props.value || false} title={typeof props.title === "string" ? props.title : undefined} className={css("input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text", "bg-transparent px-input-padding-x py-input-padding-y text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className)}>
                     <option value="" disabled hidden>
                         {props.placeholder}
                     </option>

package/dist/components/form/slider.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../slider-TX9hiHO-.js";
+export { e as Slider };

package/dist/components/form/switch.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-export type SwitchProps = React.ComponentProps<"input"> & {
+export type SwitchProps = Omit<React.ComponentProps<"input">, "onKeyDown"> & {
     error?: string;
     loading?: boolean;
     container?: string;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
     onCheck?: (nextValue: boolean) => void;
 };
 export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/form/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAInG,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,MAAM,mGAqEjB,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAInG,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,MAAM,mGA2FlB,CAAC"}

package/dist/components/form/switch.js

@@ -4,58 +4,63 @@ import { t } from "../../use-stable-ref-D5LFCx0u.js";
 import { forwardRef as n, useEffect as r, useId as i, useImperativeHandle as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/form/switch.tsx
-var u = n(({ children: n, loading: u, container: d, error: f, ...p }, m) => {
-	let h = i(), [g, _] = s(p.checked ?? !1), v = g, y = o(null), b = t(p.onChange);
-	a(m, () => y.current), r(() => {
-		if (y.current !== null && b.current) {
+var u = n(({ children: n, loading: u, container: d, error: f, onKeyDown: p, onCheck: m, ...h }, g) => {
+	let _ = i(), v = f ? `${h.id || _}-error` : void 0, y = [h["aria-describedby"], v].filter(Boolean).join(" ") || void 0, b = f ? !0 : h["aria-invalid"], [x, S] = s(h.checked ?? !1), C = x, w = o(null), T = t(h.onChange);
+	a(g, () => w.current), r(() => {
+		if (w.current !== null && T.current) {
 			let e = (e) => {
-				b.current && b.current(e);
-			}, t = y.current;
+				T.current && T.current(e);
+			}, t = w.current;
 			return t.addEventListener("change", e), () => t?.removeEventListener("change", e);
 		}
-	}, [b]);
-	let x = () => {
-		let e = !y.current?.checked;
-		_(e), p?.onCheck?.(e), y.current !== null && (y.current.checked = e, y.current.dispatchEvent(new Event("change", { bubbles: !0 })));
+	}, [T]);
+	let E = () => {
+		let e = !w.current?.checked;
+		S(e), m?.(e), w.current !== null && (w.current.checked = e, w.current.dispatchEvent(new Event("change", { bubbles: !0 })));
 	};
 	return /* @__PURE__ */ l("fieldset", {
 		className: e("flex flex-col flex-wrap justify-center", d),
 		"data-component": "switch",
-		disabled: p.disabled || u,
+		disabled: h.disabled || u,
 		children: [/* @__PURE__ */ l("span", {
 			className: "flex flex-row flex-wrap items-center",
 			children: [
 				/* @__PURE__ */ c("input", {
-					...p,
+					...h,
 					hidden: !0,
-					ref: y,
+					ref: w,
 					type: "checkbox",
-					checked: v,
-					id: p.id || h,
+					checked: C,
+					id: h.id || _,
 					"data-trigger": "change",
-					"data-checked": v,
-					disabled: p.disabled || u,
-					onChange: (e) => _(e.target.checked)
+					"data-checked": C,
+					disabled: h.disabled || u,
+					onChange: (e) => S(e.target.checked)
 				}),
 				/* @__PURE__ */ c("button", {
 					role: "switch",
 					type: "button",
-					onClick: x,
-					"aria-checked": v,
-					"data-checked": v,
-					"aria-labelledby": `${h}-label`,
-					disabled: p.disabled || u,
+					onClick: E,
+					onKeyDown: (e) => {
+						p?.(e), !e.defaultPrevented && (e.key === " " || e.key === "Space" || e.code === "Space" || e.key === "Enter") && (e.preventDefault(), E());
+					},
+					"aria-checked": C,
+					"aria-invalid": b,
+					"aria-describedby": y,
+					"data-checked": C,
+					"aria-labelledby": `${_}-label`,
+					disabled: h.disabled || u,
 					className: "relative inline-flex h-switch-track-h w-switch-track-w flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary",
 					children: /* @__PURE__ */ c("span", {
 						"aria-hidden": "true",
-						"data-checked": v,
+						"data-checked": C,
 						className: "inline-block aspect-square size-switch-thumb-size transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch"
 					})
 				}),
 				/* @__PURE__ */ c("label", {
-					htmlFor: p.id || h,
+					htmlFor: h.id || _,
 					className: "ml-switch-gap inline-block text-switch-label-text",
-					id: `${h}-label`,
+					id: `${_}-label`,
 					children: /* @__PURE__ */ c("span", {
 						className: "font-medium text-foreground",
 						children: n
@@ -63,6 +68,7 @@ var u = n(({ children: n, loading: u, container: d, error: f, ...p }, m) => {
 				})
 			]
 		}), /* @__PURE__ */ c("span", {
+			id: v,
 			className: "mt-switch-hint-mt flex-1 whitespace-nowrap text-switch-hint-text text-danger empty:mt-0 empty:hidden",
 			children: f
 		})]

package/dist/components/form/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/form/switch.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from \"react\";\nimport { useStableRef } from \"../../hooks/use-stable-ref\";\nimport { css } from \"../../lib/dom\";\n\nexport type SwitchProps = React.ComponentProps<\"input\"> & {\n    error?: string;\n    loading?: boolean;\n    container?: string;\n    onCheck?: (nextValue: boolean) => void;\n};\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(({ children, loading, container, error, ...props }: SwitchProps, ref) => {\n    const id = useId();\n    const [innerChecked, setInnerChecked] = useState(props.checked ?? false);\n    const checked = innerChecked;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const stableOnChange = useStableRef(props.onChange);\n    useImperativeHandle(ref, () => innerRef.current!);\n\n    useEffect(() => {\n        if (innerRef.current !== null) {\n            if (stableOnChange.current) {\n                const onChange = (e: Event) => {\n                    if (stableOnChange.current) stableOnChange.current(e as unknown as React.ChangeEvent<HTMLInputElement>);\n                };\n                const ref = innerRef.current;\n                ref.addEventListener(\"change\", onChange);\n                return () => ref?.removeEventListener(\"change\", onChange);\n            }\n        }\n    }, [stableOnChange]);\n\n    const onCheck = () => {\n        const checked = !innerRef.current?.checked;\n        setInnerChecked(checked);\n        props?.onCheck?.(checked);\n        if (innerRef.current !== null) {\n            innerRef.current.checked = checked;\n            innerRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n        }\n    };\n\n    return (\n        <fieldset className={css(\"flex flex-col flex-wrap justify-center\", container)} data-component=\"switch\" disabled={props.disabled || loading}>\n            <span className=\"flex flex-row flex-wrap items-center\">\n                <input\n                    {...props}\n                    hidden\n                    ref={innerRef}\n                    type=\"checkbox\"\n                    checked={checked}\n                    id={props.id || id}\n                    data-trigger=\"change\"\n                    data-checked={checked}\n                    disabled={props.disabled || loading}\n                    onChange={(e) => setInnerChecked(e.target.checked)}\n                />\n                <button\n                    role=\"switch\"\n                    type=\"button\"\n                    onClick={onCheck}\n                    aria-checked={checked}\n                    data-checked={checked}\n                    aria-labelledby={`${id}-label`}\n                    disabled={props.disabled || loading}\n                    className=\"relative inline-flex h-switch-track-h w-switch-track-w flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary\"\n                >\n                    <span\n                        aria-hidden=\"true\"\n                        data-checked={checked}\n                        className=\"inline-block aspect-square size-switch-thumb-size transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch\"\n                    />\n                </button>\n                <label htmlFor={props.id || id} className=\"ml-switch-gap inline-block text-switch-label-text\" id={`${id}-label`}>\n                    <span className=\"font-medium text-foreground\">{children}</span>\n                </label>\n            </span>\n            <span className=\"mt-switch-hint-mt flex-1 whitespace-nowrap text-switch-hint-text text-danger empty:mt-0 empty:hidden\">{error}</span>\n        </fieldset>\n    );\n});\n"],"mappings":";;;;;;AAYA,IAAa,IAAS,GAA2C,EAAE,aAAU,YAAS,cAAW,UAAO,GAAG,KAAsB,MAAQ;CACrI,IAAM,IAAK,EAAM,GACX,CAAC,GAAc,KAAmB,EAAS,EAAM,WAAW,EAAK,GACjE,IAAU,GACV,IAAW,EAAyB,IAAI,GACxC,IAAiB,EAAa,EAAM,QAAQ;CAGlD,AAFA,EAAoB,SAAW,EAAS,OAAQ,GAEhD,QAAgB;EACZ,IAAI,EAAS,YAAY,QACjB,EAAe,SAAS;GACxB,IAAM,KAAY,MAAa;IAC3B,AAAI,EAAe,WAAS,EAAe,QAAQ,CAAmD;GAC1G,GACM,IAAM,EAAS;GAErB,OADA,EAAI,iBAAiB,UAAU,CAAQ,SAC1B,GAAK,oBAAoB,UAAU,CAAQ;EAC5D;CAER,GAAG,CAAC,CAAc,CAAC;CAEnB,IAAM,UAAgB;EAClB,IAAM,IAAU,CAAC,EAAS,SAAS;EAGnC,AAFA,EAAgB,CAAO,GACvB,GAAO,UAAU,CAAO,GACpB,EAAS,YAAY,SACrB,EAAS,QAAQ,UAAU,GAC3B,EAAS,QAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAE7E;CAEA,OACI,kBAAC,YAAD;EAAU,WAAW,EAAI,0CAA0C,CAAS;EAAG,kBAAe;EAAS,UAAU,EAAM,YAAY;YAAnI,CACI,kBAAC,QAAD;GAAM,WAAU;aAAhB;IACI,kBAAC,SAAD;KACI,GAAI;KACJ,QAAA;KACA,KAAK;KACL,MAAK;KACI;KACT,IAAI,EAAM,MAAM;KAChB,gBAAa;KACb,gBAAc;KACd,UAAU,EAAM,YAAY;KAC5B,WAAW,MAAM,EAAgB,EAAE,OAAO,OAAO;IACpD,CAAA;IACD,kBAAC,UAAD;KACI,MAAK;KACL,MAAK;KACL,SAAS;KACT,gBAAc;KACd,gBAAc;KACd,mBAAiB,GAAG,EAAG;KACvB,UAAU,EAAM,YAAY;KAC5B,WAAU;eAEV,kBAAC,QAAD;MACI,eAAY;MACZ,gBAAc;MACd,WAAU;KACb,CAAA;IACG,CAAA;IACR,kBAAC,SAAD;KAAO,SAAS,EAAM,MAAM;KAAI,WAAU;KAAoD,IAAI,GAAG,EAAG;eACpG,kBAAC,QAAD;MAAM,WAAU;MAA+B;KAAe,CAAA;IAC3D,CAAA;GACL;MACN,kBAAC,QAAD;GAAM,WAAU;aAAwG;EAAY,CAAA,CAC9H;;AAElB,CAAC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/form/switch.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from \"react\";\nimport { useStableRef } from \"../../hooks/use-stable-ref\";\nimport { css } from \"../../lib/dom\";\n\nexport type SwitchProps = Omit<React.ComponentProps<\"input\">, \"onKeyDown\"> & {\n    error?: string;\n    loading?: boolean;\n    container?: string;\n    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n    onCheck?: (nextValue: boolean) => void;\n};\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n    ({ children, loading, container, error, onKeyDown, onCheck: onCheckProp, ...props }: SwitchProps, ref) => {\n        const id = useId();\n        const errorId = error ? `${props.id || id}-error` : undefined;\n        const describedBy = [props[\"aria-describedby\"], errorId].filter(Boolean).join(\" \") || undefined;\n        const ariaInvalid = error ? true : props[\"aria-invalid\"];\n        const [innerChecked, setInnerChecked] = useState(props.checked ?? false);\n        const checked = innerChecked;\n        const innerRef = useRef<HTMLInputElement>(null);\n        const stableOnChange = useStableRef(props.onChange);\n        useImperativeHandle(ref, () => innerRef.current!);\n\n        useEffect(() => {\n            if (innerRef.current !== null) {\n                if (stableOnChange.current) {\n                    const onChange = (e: Event) => {\n                        if (stableOnChange.current) stableOnChange.current(e as unknown as React.ChangeEvent<HTMLInputElement>);\n                    };\n                    const ref = innerRef.current;\n                    ref.addEventListener(\"change\", onChange);\n                    return () => ref?.removeEventListener(\"change\", onChange);\n                }\n            }\n        }, [stableOnChange]);\n\n        const onCheck = () => {\n            const checked = !innerRef.current?.checked;\n            setInnerChecked(checked);\n            onCheckProp?.(checked);\n            if (innerRef.current !== null) {\n                innerRef.current.checked = checked;\n                innerRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n            }\n        };\n\n        return (\n            <fieldset\n                className={css(\"flex flex-col flex-wrap justify-center\", container)}\n                data-component=\"switch\"\n                disabled={props.disabled || loading}\n            >\n                <span className=\"flex flex-row flex-wrap items-center\">\n                    <input\n                        {...props}\n                        hidden\n                        ref={innerRef}\n                        type=\"checkbox\"\n                        checked={checked}\n                        id={props.id || id}\n                        data-trigger=\"change\"\n                        data-checked={checked}\n                        disabled={props.disabled || loading}\n                        onChange={(e) => setInnerChecked(e.target.checked)}\n                    />\n                    <button\n                        role=\"switch\"\n                        type=\"button\"\n                        onClick={onCheck}\n                        onKeyDown={(event) => {\n                            onKeyDown?.(event);\n\n                            if (event.defaultPrevented) return;\n                            if (event.key === \" \" || event.key === \"Space\" || event.code === \"Space\" || event.key === \"Enter\") {\n                                event.preventDefault();\n                                onCheck();\n                            }\n                        }}\n                        aria-checked={checked}\n                        aria-invalid={ariaInvalid}\n                        aria-describedby={describedBy}\n                        data-checked={checked}\n                        aria-labelledby={`${id}-label`}\n                        disabled={props.disabled || loading}\n                        className=\"relative inline-flex h-switch-track-h w-switch-track-w flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary\"\n                    >\n                        <span\n                            aria-hidden=\"true\"\n                            data-checked={checked}\n                            className=\"inline-block aspect-square size-switch-thumb-size transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch\"\n                        />\n                    </button>\n                    <label htmlFor={props.id || id} className=\"ml-switch-gap inline-block text-switch-label-text\" id={`${id}-label`}>\n                        <span className=\"font-medium text-foreground\">{children}</span>\n                    </label>\n                </span>\n                <span id={errorId} className=\"mt-switch-hint-mt flex-1 whitespace-nowrap text-switch-hint-text text-danger empty:mt-0 empty:hidden\">\n                    {error}\n                </span>\n            </fieldset>\n        );\n    }\n);\n"],"mappings":";;;;;;AAaA,IAAa,IAAS,GACjB,EAAE,aAAU,YAAS,cAAW,UAAO,cAAW,SAAS,GAAa,GAAG,KAAsB,MAAQ;CACtG,IAAM,IAAK,EAAM,GACX,IAAU,IAAQ,GAAG,EAAM,MAAM,EAAG,UAAU,KAAA,GAC9C,IAAc,CAAC,EAAM,qBAAqB,CAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK,KAAA,GAChF,IAAc,IAAQ,KAAO,EAAM,iBACnC,CAAC,GAAc,KAAmB,EAAS,EAAM,WAAW,EAAK,GACjE,IAAU,GACV,IAAW,EAAyB,IAAI,GACxC,IAAiB,EAAa,EAAM,QAAQ;CAGlD,AAFA,EAAoB,SAAW,EAAS,OAAQ,GAEhD,QAAgB;EACZ,IAAI,EAAS,YAAY,QACjB,EAAe,SAAS;GACxB,IAAM,KAAY,MAAa;IAC3B,AAAI,EAAe,WAAS,EAAe,QAAQ,CAAmD;GAC1G,GACM,IAAM,EAAS;GAErB,OADA,EAAI,iBAAiB,UAAU,CAAQ,SAC1B,GAAK,oBAAoB,UAAU,CAAQ;EAC5D;CAER,GAAG,CAAC,CAAc,CAAC;CAEnB,IAAM,UAAgB;EAClB,IAAM,IAAU,CAAC,EAAS,SAAS;EAGnC,AAFA,EAAgB,CAAO,GACvB,IAAc,CAAO,GACjB,EAAS,YAAY,SACrB,EAAS,QAAQ,UAAU,GAC3B,EAAS,QAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAE7E;CAEA,OACI,kBAAC,YAAD;EACI,WAAW,EAAI,0CAA0C,CAAS;EAClE,kBAAe;EACf,UAAU,EAAM,YAAY;YAHhC,CAKI,kBAAC,QAAD;GAAM,WAAU;aAAhB;IACI,kBAAC,SAAD;KACI,GAAI;KACJ,QAAA;KACA,KAAK;KACL,MAAK;KACI;KACT,IAAI,EAAM,MAAM;KAChB,gBAAa;KACb,gBAAc;KACd,UAAU,EAAM,YAAY;KAC5B,WAAW,MAAM,EAAgB,EAAE,OAAO,OAAO;IACpD,CAAA;IACD,kBAAC,UAAD;KACI,MAAK;KACL,MAAK;KACL,SAAS;KACT,YAAY,MAAU;MAClB,IAAY,CAAK,GAEb,GAAM,qBACN,EAAM,QAAQ,OAAO,EAAM,QAAQ,WAAW,EAAM,SAAS,WAAW,EAAM,QAAQ,aACtF,EAAM,eAAe,GACrB,EAAQ;KAEhB;KACA,gBAAc;KACd,gBAAc;KACd,oBAAkB;KAClB,gBAAc;KACd,mBAAiB,GAAG,EAAG;KACvB,UAAU,EAAM,YAAY;KAC5B,WAAU;eAEV,kBAAC,QAAD;MACI,eAAY;MACZ,gBAAc;MACd,WAAU;KACb,CAAA;IACG,CAAA;IACR,kBAAC,SAAD;KAAO,SAAS,EAAM,MAAM;KAAI,WAAU;KAAoD,IAAI,GAAG,EAAG;eACpG,kBAAC,QAAD;MAAM,WAAU;MAA+B;KAAe,CAAA;IAC3D,CAAA;GACL;MACN,kBAAC,QAAD;GAAM,IAAI;GAAS,WAAU;aACxB;EACC,CAAA,CACA;;AAElB,CACJ"}