@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/form/select/select.css

@@ -0,0 +1,74 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._93Y5Aq_root {
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    align-items: center;
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    position: relative;
+
+    @container style(--writing: vertical) {
+      width: fit-content;
+      height: 100%;
+    }
+  }
+
+  ._93Y5Aq_invalid {
+    border-color: var(--color-border-error);
+  }
+
+  ._93Y5Aq_disabled {
+    cursor: not-allowed;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-mute);
+  }
+
+  ._93Y5Aq_select {
+    appearance: none;
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    color: var(--color-fg-base);
+    background-color: #0000;
+    flex-grow: 1;
+
+    @container style(--writing: vertical) {
+      width: auto;
+      height: 100%;
+    }
+  }
+
+  ._93Y5Aq_select:focus-visible {
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  ._93Y5Aq_select:disabled {
+    cursor: not-allowed;
+  }
+
+  ._93Y5Aq_pending {
+    pointer-events: none;
+  }
+
+  ._93Y5Aq_chevron {
+    pointer-events: none;
+    flex-shrink: 0;
+    margin-inline-end: calc(var(--spacing) * 3);
+
+    @container style(--writing: vertical) {
+      rotate: -90deg;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/form/select/select.d.mts

@@ -6,6 +6,6 @@ type Props = {
   options: readonly Option[];
   ref?: Ref<HTMLSelectElement>;
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className' | 'style'>;
-declare const Select: FC<Props>;
+export declare const Select: FC<Props>;
 //#endregion
-export { Select };
+export {};

package/dist/components/form/select/select.mjs

@@ -1,19 +1,36 @@
 "use client";
-import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
+import { chain } from "../../../helpers/chain.mjs";
+import { ignoreSelectKeys } from "../../_internal/ignore-changes.mjs";
+import select_module_default from "./select.module.mjs";
+import { clsx } from "clsx";
+import { useLayoutEffect, useMemo, useRef } from "react";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/select/select.tsx
-const Select = ({ invalid = false, options, disabled = false, ref, ...rest }) => {
+const Select = ({ invalid = false, options, disabled = false, defaultValue, onKeyDown, ref, ...rest }) => {
 	const { pending } = useFormStatus();
+	const selectRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(selectRef, ref), [ref]);
+	const defaultKey = defaultValue === void 0 ? void 0 : JSON.stringify(defaultValue);
+	useLayoutEffect(() => {
+		const select = selectRef.current;
+		if (select === null || defaultKey === void 0) return;
+		const defaults = new Set([JSON.parse(defaultKey)].flat().map(String));
+		for (const option of select.options) option.defaultSelected = defaults.has(option.value);
+	}, [defaultKey]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex h-fit w-full items-center rounded-xl border border-border-base bg-bg-base vertical:h-full vertical:w-fit", invalid && "border-border-error", (disabled || pending) && "cursor-not-allowed border-border-mute bg-bg-mute", FOCUS_RING_WITHIN),
+		className: clsx(select_module_default.root, invalid && select_module_default.invalid, (disabled || pending) && select_module_default.disabled, focus_ring_module_default.ringWithin),
 		children: [/* @__PURE__ */ jsx("select", {
+			"aria-disabled": pending || void 0,
 			"aria-invalid": invalid,
-			className: cn("w-full grow appearance-none bg-transparent px-3 py-2 text-fg-base focus-visible:outline-hidden vertical:h-full vertical:w-auto", "disabled:cursor-not-allowed"),
-			disabled: disabled || pending,
-			ref,
+			className: clsx(select_module_default.select, pending && select_module_default.pending),
+			defaultValue,
+			disabled,
+			onKeyDown: chain(onKeyDown, pending ? ignoreSelectKeys : void 0),
+			ref: mergedRef,
 			...rest,
 			children: options.map((option) => /* @__PURE__ */ jsx("option", {
 				value: option.value,
@@ -21,7 +38,7 @@ const Select = ({ invalid = false, options, disabled = false, ref, ...rest }) =>
 			}, option.value))
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: "vertical:-rotate-90 pointer-events-none me-3 shrink-0",
+			className: select_module_default.chevron,
 			children: /* @__PURE__ */ jsx(ChevronIcon, {
 				direction: "down",
 				size: "sm"

package/dist/components/form/select/select.module.mjs

@@ -0,0 +1,12 @@
+import './select.css';
+//#region src/components/form/select/select.module.css
+var select_module_default = {
+	"chevron": "_93Y5Aq_chevron",
+	"disabled": "_93Y5Aq_disabled",
+	"invalid": "_93Y5Aq_invalid",
+	"pending": "_93Y5Aq_pending",
+	"root": "_93Y5Aq_root",
+	"select": "_93Y5Aq_select"
+};
+//#endregion
+export { select_module_default as default };

package/dist/components/form/slider/index.mjs

@@ -1,2 +1 @@
-import { Slider } from "./slider.mjs";
-export { Slider };
+export { Slider } from "./slider.mjs";

package/dist/components/form/slider/range-input-class.css

@@ -0,0 +1,97 @@
+@layer properties, theme, base;
+
+@layer components {
+  .mzSkOG_input {
+    z-index: var(--z-index-raised);
+    appearance: none;
+    height: calc(var(--spacing) * 8);
+    background-color: #0000;
+    width: 100%;
+    position: absolute;
+    inset: 0;
+
+    @container style(--writing: vertical) {
+      height: auto;
+      width: calc(var(--spacing) * 8);
+      writing-mode: vertical-lr;
+    }
+  }
+
+  .mzSkOG_input:focus {
+    outline-style: none;
+  }
+
+  .mzSkOG_input:disabled {
+    cursor: not-allowed;
+  }
+
+  .mzSkOG_input::-webkit-slider-runnable-track {
+    height: calc(var(--spacing) * 2);
+    border-radius: var(--radius-full);
+    background-color: #0000;
+  }
+
+  .mzSkOG_input::-webkit-slider-thumb {
+    margin-top: calc(var(--spacing) * -1);
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    appearance: none;
+    border-radius: var(--radius-full);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    box-shadow: var(--shadow-xs);
+  }
+
+  .mzSkOG_input::-moz-range-track {
+    height: calc(var(--spacing) * 2);
+    border-radius: var(--radius-full);
+    background-color: #0000;
+  }
+
+  .mzSkOG_input::-moz-range-progress {
+    height: calc(var(--spacing) * 2);
+    border-radius: var(--radius-full);
+    background-color: #0000;
+  }
+
+  .mzSkOG_input::-moz-range-thumb {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    border-radius: var(--radius-full);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    box-shadow: var(--shadow-xs);
+  }
+
+  .mzSkOG_invalid::-webkit-slider-thumb {
+    border-color: var(--color-border-error);
+  }
+
+  .mzSkOG_invalid::-moz-range-thumb {
+    border-color: var(--color-border-error);
+  }
+
+  .mzSkOG_input:focus-visible::-webkit-slider-thumb {
+    box-shadow: var(--shadow-ring-info), var(--shadow-xs);
+    border-color: #0000;
+  }
+
+  .mzSkOG_input:focus-visible::-moz-range-thumb {
+    box-shadow: var(--shadow-ring-info), var(--shadow-xs);
+    border-color: #0000;
+  }
+
+  .mzSkOG_invalid:focus-visible::-webkit-slider-thumb {
+    box-shadow: var(--shadow-ring-error), var(--shadow-xs);
+  }
+
+  .mzSkOG_invalid:focus-visible::-moz-range-thumb {
+    box-shadow: var(--shadow-ring-error), var(--shadow-xs);
+  }
+}
+
+@layer utilities;

package/dist/components/form/slider/range-input-class.d.mts

@@ -0,0 +1,7 @@
+//#region src/components/form/slider/range-input-class.d.ts
+/**
+ * `<input type="range">` を溝の上に重ね、見た目をつまみだけにするクラス。
+ * 溝と塗りは部品側が描く。Slider と RangeSlider で共有する。
+ */
+export declare const rangeInputClass: (invalid: boolean) => string;
+//#endregion

package/dist/components/form/slider/range-input-class.mjs

@@ -0,0 +1,10 @@
+import range_input_class_module_default from "./range-input-class.module.mjs";
+import { clsx } from "clsx";
+//#region src/components/form/slider/range-input-class.ts
+/**
+* `<input type="range">` を溝の上に重ね、見た目をつまみだけにするクラス。
+* 溝と塗りは部品側が描く。Slider と RangeSlider で共有する。
+*/
+const rangeInputClass = (invalid) => clsx(range_input_class_module_default.input, invalid && range_input_class_module_default.invalid);
+//#endregion
+export { rangeInputClass };

package/dist/components/form/slider/range-input-class.module.mjs

@@ -0,0 +1,8 @@
+import './range-input-class.css';
+//#region src/components/form/slider/range-input-class.module.css
+var range_input_class_module_default = {
+	"input": "mzSkOG_input",
+	"invalid": "mzSkOG_invalid"
+};
+//#endregion
+export { range_input_class_module_default as default };

package/dist/components/form/slider/slider.css

@@ -0,0 +1,55 @@
+@layer properties, theme, base;
+
+@layer components {
+  .DOj2rq_root {
+    block-size: calc(var(--spacing) * 8);
+    justify-content: center;
+    align-items: center;
+    inline-size: 100%;
+    display: flex;
+    position: relative;
+
+    @container style(--writing: vertical) {
+      inline-size: calc(var(--spacing) * 48);
+    }
+  }
+
+  .DOj2rq_disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .DOj2rq_track {
+    border-radius: var(--radius-full);
+    block-size: calc(var(--spacing) * 2);
+    background-color: var(--color-bg-mute);
+    inline-size: 100%;
+    position: relative;
+  }
+
+  .DOj2rq_fill {
+    block-size: 100%;
+    inline-size: var(--slider-progress);
+    border-radius: var(--radius-full);
+    background-color: var(--color-primary-bg);
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+
+  .DOj2rq_fillInvalid {
+    background-color: var(--color-bg-error);
+  }
+
+  @media (forced-colors: active) {
+    .DOj2rq_fill {
+      background-color: var(--color-system-highlight);
+    }
+  }
+
+  .DOj2rq_pending {
+    pointer-events: none;
+  }
+}
+
+@layer utilities;

package/dist/components/form/slider/slider.d.mts

@@ -2,9 +2,9 @@ import { FC, InputHTMLAttributes, Ref } from "react";
 //#region src/components/form/slider/slider.d.ts
 type BaseProps = {
   invalid?: boolean;
-  step?: number;
-  max?: number;
-  min?: number;
+  step?: number | 'any';
+  max?: number | string;
+  min?: number | string;
   ref?: Ref<HTMLInputElement>;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'step' | 'max' | 'min'>;
 type ControlledProps = {
@@ -13,11 +13,11 @@ type ControlledProps = {
   defaultValue?: never;
 };
 type UncontrolledProps = {
-  defaultValue?: number;
+  defaultValue?: number | string;
   value?: never;
   onChange?: (value: number) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
-declare const Slider: FC<Props>;
+export declare const Slider: FC<Props>;
 //#endregion
-export { Slider };
+export {};

package/dist/components/form/slider/slider.mjs

@@ -1,48 +1,81 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { chain } from "../../../helpers/chain.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
+import { ignoreStepKeys } from "../../_internal/ignore-changes.mjs";
+import { rangeInputClass } from "./range-input-class.mjs";
+import slider_module_default from "./slider.module.mjs";
+import { clsx } from "clsx";
+import { useEffect, useEffectEvent, useMemo, useRef } from "react";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/slider/slider.tsx
-const Slider = ({ invalid = false, disabled = false, required = false, value, defaultValue, onChange, ref, step = 1, max = 100, min = 0, ...rest }) => {
+const toNumber = (value, fallback) => {
+	const number = value === void 0 || value === "" ? NaN : Number(value);
+	return Number.isFinite(number) ? number : fallback;
+};
+const Slider = ({ invalid = false, disabled = false, required = false, value, defaultValue, onChange, onKeyDown, ref, step = 1, max: maxProp, min: minProp, ...rest }) => {
+	const max = toNumber(maxProp, 100);
+	const min = toNumber(minProp, 0);
+	const initialValue = toNumber(defaultValue, min);
+	const isControlled = value !== void 0;
+	const inputRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
 	const [currentValue, handleChange] = useControllableState({
 		value,
-		defaultValue: defaultValue ?? min,
+		defaultValue: initialValue,
 		onChange
 	});
 	const { pending } = useFormStatus();
 	const disabledResolved = disabled || pending;
+	const handleReset = useEffectEvent(() => {
+		if (!isControlled) handleChange(initialValue);
+	});
+	useEffect(() => {
+		const form = inputRef.current?.form;
+		if (!form) return;
+		const listener = () => {
+			handleReset();
+		};
+		form.addEventListener("reset", listener);
+		return () => {
+			form.removeEventListener("reset", listener);
+		};
+	}, []);
 	const range = max > min ? max - min : 1;
 	const progress = (currentValue - min) / range * 100;
 	const clampedProgress = `${Math.min(Math.max(progress, 0), 100)}%`;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex items-center justify-center", "block-8 inline-full vertical:inline-48", disabledResolved && "opacity-50"),
+		className: clsx(slider_module_default.root, disabledResolved && slider_module_default.disabled),
 		style: { "--slider-progress": clampedProgress },
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: "bg-bg-mute relative rounded-full block-2 inline-full",
+			className: clsx(slider_module_default.track, high_contrast_module_default.edge),
 			children: /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("bg-primary-bg absolute inset-s-0 inset-be-0 block-full inline-(--slider-progress) rounded-full", invalid && "bg-bg-error")
+				className: clsx(slider_module_default.fill, invalid && slider_module_default.fillInvalid)
 			})
 		}), /* @__PURE__ */ jsx("input", {
 			...rest,
+			...isControlled ? { value: currentValue } : { defaultValue: initialValue },
+			"aria-disabled": pending || void 0,
 			"aria-invalid": invalid,
 			"aria-valuemax": max,
 			"aria-valuemin": min,
 			"aria-valuenow": currentValue,
-			className: cn("absolute inset-0 z-10 appearance-none bg-transparent", "h-8 w-full vertical:h-auto vertical:w-8 vertical:[writing-mode:vertical-lr]", "focus:outline-none", "disabled:cursor-not-allowed", "[&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent", "[&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-border-base [&::-webkit-slider-thumb]:bg-bg-base [&::-webkit-slider-thumb]:shadow-xs", "[&:focus-visible::-webkit-slider-thumb]:border-transparent [&:focus-visible::-webkit-slider-thumb]:ring-2 [&:focus-visible::-webkit-slider-thumb]:ring-border-info", "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent", "[&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-transparent", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-border-base [&::-moz-range-thumb]:bg-bg-base [&::-moz-range-thumb]:shadow-xs", "[&:focus-visible::-moz-range-thumb]:border-transparent [&:focus-visible::-moz-range-thumb]:ring-2 [&:focus-visible::-moz-range-thumb]:ring-border-info", invalid && "[&::-moz-range-thumb]:border-border-error [&::-webkit-slider-thumb]:border-border-error [&:focus-visible::-moz-range-thumb]:ring-border-error [&:focus-visible::-webkit-slider-thumb]:ring-border-error"),
-			disabled: disabledResolved,
+			className: clsx(rangeInputClass(invalid), pending && slider_module_default.pending),
+			disabled,
 			max,
 			min,
 			onChange: (event) => {
 				handleChange(Number(event.target.value));
 			},
-			ref,
+			onKeyDown: chain(onKeyDown, pending ? ignoreStepKeys : void 0),
+			ref: mergedRef,
 			required,
 			step,
-			type: "range",
-			value: currentValue
+			type: "range"
 		})]
 	});
 };

package/dist/components/form/slider/slider.module.mjs

@@ -0,0 +1,12 @@
+import './slider.css';
+//#region src/components/form/slider/slider.module.css
+var slider_module_default = {
+	"disabled": "DOj2rq_disabled",
+	"fill": "DOj2rq_fill",
+	"fillInvalid": "DOj2rq_fillInvalid",
+	"pending": "DOj2rq_pending",
+	"root": "DOj2rq_root",
+	"track": "DOj2rq_track"
+};
+//#endregion
+export { slider_module_default as default };

package/dist/components/form/switch/index.mjs

@@ -1,2 +1 @@
-import { Switch } from "./switch.mjs";
-export { Switch };
+export { Switch } from "./switch.mjs";

package/dist/components/form/switch/switch.css

@@ -0,0 +1,103 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._7trF5q_root {
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+    cursor: pointer;
+    width: fit-content;
+    display: inline-flex;
+  }
+
+  ._7trF5q_disabled {
+    cursor: not-allowed;
+    color: var(--color-fg-mute);
+  }
+
+  ._7trF5q_control {
+    flex-shrink: 0;
+    display: inline-flex;
+    position: relative;
+  }
+
+  ._7trF5q_track {
+    border-radius: var(--radius-full);
+    block-size: calc(var(--spacing) * 7);
+    inline-size: calc(var(--spacing) * 12);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    align-items: center;
+    display: inline-flex;
+  }
+
+  ._7trF5q_trackEnabled {
+    background-color: var(--color-bg-mute);
+  }
+
+  ._7trF5q_trackDisabled {
+    background-color: var(--color-bg-subtle);
+  }
+
+  ._7trF5q_invalid {
+    box-shadow: var(--shadow-ring-error);
+  }
+
+  ._7trF5q_input:checked ~ ._7trF5q_trackEnabled {
+    background-color: var(--color-primary-bg);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+    }
+  }
+
+  ._7trF5q_input:focus-visible ~ ._7trF5q_track {
+    box-shadow: var(--shadow-ring-offset-info);
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  ._7trF5q_thumb {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-base);
+    box-shadow: var(--shadow-xs);
+    transition-property: transform, translate, scale, rotate;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-in-out);
+    margin-inline-start: calc(var(--spacing) * .5);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-canvas-text);
+    }
+  }
+
+  ._7trF5q_thumbDisabled {
+    background-color: var(--color-bg-emphasize);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-gray-text);
+    }
+  }
+
+  ._7trF5q_input:checked ~ ._7trF5q_track > ._7trF5q_thumb {
+    translate: calc(var(--spacing) * 5) 0;
+
+    @container style(--writing: vertical) {
+      translate: 0 calc(var(--spacing) * 5);
+    }
+  }
+
+  @media (forced-colors: active) {
+    ._7trF5q_input:checked ~ ._7trF5q_trackEnabled > ._7trF5q_thumb {
+      background-color: var(--color-system-highlight-text);
+    }
+  }
+}
+
+@layer utilities;

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

@@ -16,6 +16,6 @@ type UncontrolledProps = {
   onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
-declare const Switch: FC<Props>;
+export declare const Switch: FC<Props>;
 //#endregion
-export { Switch };
+export {};

package/dist/components/form/switch/switch.mjs

@@ -1,7 +1,9 @@
 "use client";
-import { FOCUS_RING_PEER_NO_BORDER } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
+import { ignoreClick } from "../../_internal/ignore-changes.mjs";
+import switch_module_default from "./switch.module.mjs";
+import { clsx } from "clsx";
 import { useId } from "react";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,29 +11,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const Switch = ({ checked, defaultChecked, id, disabled = false, invalid = false, required = false, label, onChange, ref, ...rest }) => {
 	const generatedId = useId();
 	const inputId = id ?? generatedId;
-	const [isSelected, setSelected] = useControllableState({
-		value: checked,
-		defaultValue: defaultChecked ?? false
-	});
 	const { pending } = useFormStatus();
-	const isControlled = checked !== void 0;
 	const disabledResolved = disabled || pending;
 	return /* @__PURE__ */ jsxs("label", {
-		className: cn("inline-flex w-fit items-center gap-3", disabledResolved ? "cursor-not-allowed text-fg-mute" : "cursor-pointer"),
+		className: clsx(switch_module_default.root, disabledResolved && switch_module_default.disabled),
 		htmlFor: inputId,
+		onClickCapture: pending ? ignoreClick : void 0,
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: "relative inline-flex shrink-0",
+			className: switch_module_default.control,
 			children: [/* @__PURE__ */ jsx("input", {
 				...rest,
-				"aria-checked": isSelected,
+				...checked === void 0 ? { defaultChecked } : { checked },
+				"aria-disabled": pending || void 0,
 				"aria-invalid": invalid,
 				"aria-required": required,
-				...isControlled ? { checked: isSelected } : { defaultChecked },
-				className: "peer sr-only",
-				disabled: disabledResolved,
+				className: clsx(sr_only_module_default.srOnly, switch_module_default.input),
+				disabled,
 				id: inputId,
 				onChange: (event) => {
-					setSelected(event.target.checked);
 					onChange?.(event.target.checked, event);
 				},
 				ref,
@@ -40,8 +37,8 @@ const Switch = ({ checked, defaultChecked, id, disabled = false, invalid = false
 				type: "checkbox"
 			}), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("inline-flex items-center rounded-full transition-colors", "h-7 w-12 vertical:h-12 vertical:w-7", invalid && "ring-2 ring-border-error", isSelected ? "bg-primary-bg" : "bg-bg-mute", disabledResolved && "bg-bg-subtle", FOCUS_RING_PEER_NO_BORDER, "peer-focus-visible:ring-offset-2"),
-				children: /* @__PURE__ */ jsx("span", { className: cn("ms-0.5 size-5 rounded-full bg-bg-base shadow-xs transition-transform", isSelected && "translate-x-5 vertical:translate-x-0 vertical:translate-y-5", disabledResolved && "bg-bg-emphasize") })
+				className: clsx(switch_module_default.track, disabledResolved ? switch_module_default.trackDisabled : switch_module_default.trackEnabled, invalid && switch_module_default.invalid, high_contrast_module_default.edge),
+				children: /* @__PURE__ */ jsx("span", { className: clsx(switch_module_default.thumb, high_contrast_module_default.edge, disabledResolved && switch_module_default.thumbDisabled) })
 			})]
 		}), label ? /* @__PURE__ */ jsx("span", { children: label }) : null]
 	});