@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/form/radio-card/radio-card.css

@@ -0,0 +1,147 @@
+@layer properties, theme, base;
+
+@layer components {
+  .RU7zwG_root {
+    min-width: 0;
+    gap: calc(var(--spacing) * 3);
+    border-width: 0;
+    inline-size: 100%;
+    margin: 0;
+    padding: 0;
+    display: grid;
+  }
+
+  .RU7zwG_disabled {
+    opacity: .7;
+  }
+
+  .RU7zwG_card {
+    border-radius: var(--radius-xl);
+    background-color: var(--color-bg-base);
+    min-width: 0;
+    padding: calc(var(--spacing) * 4);
+    text-align: left;
+    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);
+    border-width: 1px;
+    inline-size: 100%;
+    display: flex;
+  }
+
+  .RU7zwG_valid {
+    border-color: var(--color-border-mute);
+  }
+
+  .RU7zwG_invalid {
+    border-color: var(--color-border-error);
+  }
+
+  .RU7zwG_optionDisabled {
+    cursor: not-allowed;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-subtle);
+    color: var(--color-fg-mute);
+  }
+
+  @media (hover: hover) {
+    .RU7zwG_valid:hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+
+  .RU7zwG_card:has(:checked) {
+    border-color: var(--color-primary-border);
+    background-color: var(--color-primary-bg-subtle);
+  }
+
+  .RU7zwG_invalid:has(:checked) {
+    border-color: var(--color-border-error);
+  }
+
+  .RU7zwG_optionDisabled:has(:checked) {
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-subtle);
+  }
+
+  @media (hover: hover) {
+    .RU7zwG_card:has(:checked):hover {
+      background-color: var(--color-primary-bg-mute);
+    }
+  }
+
+  .RU7zwG_card:has(.RU7zwG_input:focus-visible) {
+    box-shadow: var(--shadow-ring-info);
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .RU7zwG_visual {
+    margin-right: calc(var(--spacing) * 4);
+    flex-shrink: 0;
+  }
+
+  .RU7zwG_text {
+    gap: var(--spacing);
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .RU7zwG_label {
+    color: var(--color-fg-base);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .RU7zwG_description {
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  .RU7zwG_indicator {
+    margin-top: calc(var(--spacing) * .5);
+    margin-left: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+    border-radius: var(--radius-full);
+    border-width: 1px;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-base);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .RU7zwG_input:checked ~ .RU7zwG_indicator {
+    border-color: var(--color-border-base);
+    background-color: var(--color-primary-bg);
+  }
+
+  .RU7zwG_dot {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+    border-radius: var(--radius-full);
+    background-color: var(--color-primary-border);
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-in-out);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-canvas-text);
+    }
+  }
+
+  .RU7zwG_input:checked ~ .RU7zwG_indicator > .RU7zwG_dot {
+    opacity: 1;
+  }
+}
+
+@layer utilities;

package/dist/components/form/radio-card/radio-card.d.mts

@@ -1,6 +1,6 @@
 import { FC, FieldsetHTMLAttributes, ReactNode, Ref } from "react";
 //#region src/components/form/radio-card/radio-card.d.ts
-type RadioCardOption = Readonly<{
+export type RadioCardOption = Readonly<{
   value: string;
   label: string;
   description?: string;
@@ -10,6 +10,7 @@ type RadioCardOption = Readonly<{
 type BaseProps = {
   'aria-labelledby': string;
   invalid?: boolean;
+  required?: boolean;
   options: readonly RadioCardOption[];
   ref?: Ref<HTMLFieldSetElement>;
 } & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className' | 'style' | 'children' | 'onChange' | 'defaultValue' | 'aria-labelledby' | 'role'>;
@@ -24,6 +25,5 @@ type UncontrolledProps = {
   onChange?: (value: string) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
-declare const RadioCard: FC<Props>;
-//#endregion
-export { RadioCard, RadioCardOption };
+export declare const RadioCard: FC<Props>;
+//#endregion

package/dist/components/form/radio-card/radio-card.mjs

@@ -1,69 +1,63 @@
 "use client";
-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 radio_card_module_default from "./radio-card.module.mjs";
+import { clsx } from "clsx";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/radio-card/radio-card.tsx
-const RadioCard = ({ "aria-labelledby": labelledbyId, name, disabled = false, invalid = false, options, value, defaultValue, onChange, ref, ...rest }) => {
+const RadioCard = ({ "aria-labelledby": labelledbyId, name, disabled = false, invalid = false, required = false, options, value, defaultValue, onChange, ref, ...rest }) => {
 	const groupId = useId();
-	const [currentValue, setCurrentValue] = useControllableState({
-		value,
-		defaultValue
-	});
-	const selectValue = (nextValue) => {
-		setCurrentValue(nextValue);
-		onChange?.(nextValue);
-	};
+	const isControlled = value !== void 0;
 	return /* @__PURE__ */ jsx("fieldset", {
 		...rest,
 		"aria-labelledby": labelledbyId,
-		className: cn("m-0 min-w-0 border-0 p-0 inline-full", "grid gap-3", disabled && "opacity-70"),
+		className: clsx(radio_card_module_default.root, disabled && radio_card_module_default.disabled),
 		ref,
 		role: "radiogroup",
 		children: options.map((option) => {
-			const checked = currentValue === option.value;
 			const optionDisabled = disabled || option.disabled === true;
 			const hasDescription = option.description !== void 0 && option.description !== "";
 			const hasVisual = option.visual !== void 0 && option.visual !== null;
 			const optionId = `${groupId}-${option.value}`;
 			return /* @__PURE__ */ jsxs("label", {
-				className: cn("flex min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors inline-full", "has-[input:focus-visible]:outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-border-info", checked && "border-primary-border bg-primary-bg-subtle hover:bg-primary-bg-mute", invalid ? "border-border-error" : !checked && "border-border-mute hover:bg-bg-subtle", optionDisabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
+				className: clsx(radio_card_module_default.card, invalid ? radio_card_module_default.invalid : radio_card_module_default.valid, optionDisabled && radio_card_module_default.optionDisabled),
 				id: optionId,
 				children: [
 					/* @__PURE__ */ jsx("input", {
 						"aria-describedby": hasDescription ? `${optionId}-description` : void 0,
 						"aria-labelledby": `${optionId}-label`,
-						checked,
-						className: "sr-only",
+						...isControlled ? { checked: value === option.value } : { defaultChecked: defaultValue === option.value },
+						className: clsx(sr_only_module_default.srOnly, radio_card_module_default.input),
 						disabled: optionDisabled,
 						name: name ?? groupId,
 						onChange: () => {
-							selectValue(option.value);
+							onChange?.(option.value);
 						},
+						required,
 						type: "radio",
 						value: option.value
 					}),
 					hasVisual ? /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: "mr-4 shrink-0",
+						className: radio_card_module_default.visual,
 						children: option.visual
 					}) : null,
 					/* @__PURE__ */ jsxs("span", {
-						className: "flex min-w-0 flex-1 flex-col gap-1",
+						className: radio_card_module_default.text,
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-fg-base font-medium",
+							className: radio_card_module_default.label,
 							id: `${optionId}-label`,
 							children: option.label
 						}), hasDescription ? /* @__PURE__ */ jsx("span", {
-							className: "text-fg-mute text-sm",
+							className: radio_card_module_default.description,
 							id: `${optionId}-description`,
 							children: option.description
 						}) : null]
 					}),
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: cn("mt-0.5 ml-4 inline-flex size-5 shrink-0 items-center justify-center rounded-full border", checked ? "border-border-base bg-primary-bg" : "border-border-mute bg-bg-base"),
-						children: /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full bg-primary-border transition-opacity", checked ? "opacity-100" : "opacity-0") })
+						className: radio_card_module_default.indicator,
+						children: /* @__PURE__ */ jsx("span", { className: radio_card_module_default.dot })
 					})
 				]
 			}, option.value);

package/dist/components/form/radio-card/radio-card.module.mjs

@@ -0,0 +1,19 @@
+import './radio-card.css';
+//#region src/components/form/radio-card/radio-card.module.css
+var radio_card_module_default = {
+	"card": "RU7zwG_card",
+	"description": "RU7zwG_description",
+	"disabled": "RU7zwG_disabled",
+	"dot": "RU7zwG_dot",
+	"indicator": "RU7zwG_indicator",
+	"input": "RU7zwG_input",
+	"invalid": "RU7zwG_invalid",
+	"label": "RU7zwG_label",
+	"optionDisabled": "RU7zwG_optionDisabled",
+	"root": "RU7zwG_root",
+	"text": "RU7zwG_text",
+	"valid": "RU7zwG_valid",
+	"visual": "RU7zwG_visual"
+};
+//#endregion
+export { radio_card_module_default as default };

package/dist/components/form/range-slider/index.d.mts

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

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

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

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

@@ -0,0 +1,67 @@
+@layer properties, theme, base;
+
+@layer components {
+  .oss4bG_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);
+    }
+  }
+
+  .oss4bG_disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .oss4bG_track {
+    border-radius: var(--radius-full);
+    block-size: calc(var(--spacing) * 2);
+    background-color: var(--color-bg-mute);
+    inline-size: 100%;
+    position: relative;
+  }
+
+  .oss4bG_fill {
+    block-size: 100%;
+    inline-size: calc(var(--range-end) - var(--range-start));
+    border-radius: var(--radius-full);
+    background-color: var(--color-primary-bg);
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: var(--range-start);
+  }
+
+  .oss4bG_fillInvalid {
+    background-color: var(--color-bg-error);
+  }
+
+  @media (forced-colors: active) {
+    .oss4bG_fill {
+      background-color: var(--color-system-highlight);
+    }
+  }
+
+  .oss4bG_thumb {
+    pointer-events: none;
+  }
+
+  .oss4bG_interactive::-webkit-slider-thumb {
+    pointer-events: auto;
+  }
+
+  .oss4bG_interactive::-moz-range-thumb {
+    pointer-events: auto;
+  }
+
+  .oss4bG_thumb.oss4bG_onTop {
+    z-index: calc(var(--z-index-raised) * 2);
+  }
+}
+
+@layer utilities;

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

@@ -0,0 +1,30 @@
+import { FC, HTMLAttributes, Ref } from "react";
+//#region src/components/form/range-slider/range-slider.d.ts
+type BaseProps = {
+  min?: number;
+  max?: number;
+  step?: number;
+  /** 下側・上側のつまみがそれぞれ送る名前。 */
+  name?: readonly [string, string];
+  invalid?: boolean;
+  disabled?: boolean;
+  /**
+   * 両方のつまみの input に渡す。range は常に値を持つので必須の検査には
+   * 掛からないが、読み上げには必須の欄として伝わる（Slider と同じ扱い）。
+   */
+  required?: boolean;
+  ref?: Ref<HTMLDivElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'defaultValue' | 'onChange' | 'role'>;
+type ControlledProps = {
+  value: readonly [number, number];
+  onChange: (value: [number, number]) => void;
+  defaultValue?: never;
+};
+type UncontrolledProps = {
+  defaultValue?: readonly [number, number];
+  value?: never;
+  onChange?: (value: [number, number]) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
+export declare const RangeSlider: FC<Props>;
+//#endregion

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

@@ -0,0 +1,135 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
+import { ignoreStepKeys } from "../../_internal/ignore-changes.mjs";
+import { rangeInputClass } from "../slider/range-input-class.mjs";
+import range_slider_module_default from "./range-slider.module.mjs";
+import { clsx } from "clsx";
+import { useEffect, useId, useRef, useState } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/range-slider/range-slider.tsx
+const percentOf = (value, min, max) => {
+	const span = max > min ? max - min : 1;
+	const ratio = Math.min(Math.max((value - min) / span, 0), 1);
+	return `${String(ratio * 100)}%`;
+};
+const RangeSlider = ({ min = 0, max = 100, step = 1, name, value, defaultValue, onChange, invalid = false, disabled = false, required = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ref, ...rest }) => {
+	const messages = getMessages();
+	const id = useId();
+	const { pending } = useFormStatus();
+	const disabledResolved = disabled || pending;
+	const startRef = useRef(null);
+	const endRef = useRef(null);
+	const isControlled = value !== void 0;
+	const [shown, setShown] = useState(defaultValue ?? [min, max]);
+	const [start, end] = value ?? shown;
+	useEffect(() => {
+		const form = startRef.current?.form;
+		if (isControlled || form === null || form === void 0) return;
+		const handleReset = () => {
+			setTimeout(() => {
+				const startInput = startRef.current;
+				const endInput = endRef.current;
+				if (startInput !== null && endInput !== null) setShown([Number(startInput.value), Number(endInput.value)]);
+			}, 0);
+		};
+		form.addEventListener("reset", handleReset);
+		return () => {
+			form.removeEventListener("reset", handleReset);
+		};
+	}, [isControlled]);
+	const commit = (edge) => (event) => {
+		const typed = Number(event.target.value);
+		const next = edge === "start" ? Math.min(typed, end) : Math.max(typed, start);
+		if (!isControlled && next !== typed) event.target.value = String(next);
+		const pair = edge === "start" ? [next, end] : [start, next];
+		if (!isControlled) setShown(pair);
+		onChange?.(pair);
+	};
+	const groupNameId = `${id}-name`;
+	const startNameId = `${id}-start`;
+	const endNameId = `${id}-end`;
+	const groupName = ariaLabelledBy ?? (ariaLabel === void 0 ? void 0 : groupNameId);
+	const thumbName = (own) => groupName === void 0 ? own : `${groupName} ${own}`;
+	const startOnTop = start > min + (max - min) / 2;
+	const thumbClass = (onTop) => clsx(rangeInputClass(invalid), range_slider_module_default.thumb, !pending && range_slider_module_default.interactive, onTop && range_slider_module_default.onTop);
+	const thumbValue = (edge) => isControlled ? { value: edge === 0 ? start : end } : { defaultValue: (defaultValue ?? [min, max])[edge] };
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		className: clsx(range_slider_module_default.root, disabledResolved && range_slider_module_default.disabled),
+		ref,
+		role: "group",
+		style: {
+			"--range-start": percentOf(start, min, max),
+			"--range-end": percentOf(end, min, max)
+		},
+		children: [
+			ariaLabel !== void 0 && ariaLabelledBy === void 0 ? /* @__PURE__ */ jsx("span", {
+				hidden: true,
+				id: groupNameId,
+				children: ariaLabel
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				hidden: true,
+				id: startNameId,
+				children: messages.rangeSliderStart
+			}),
+			/* @__PURE__ */ jsx("span", {
+				hidden: true,
+				id: endNameId,
+				children: messages.rangeSliderEnd
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: clsx(range_slider_module_default.track, high_contrast_module_default.edge),
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: clsx(range_slider_module_default.fill, invalid && range_slider_module_default.fillInvalid)
+				})
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...thumbValue(0),
+				"aria-describedby": ariaDescribedBy,
+				"aria-disabled": pending || void 0,
+				"aria-invalid": invalid,
+				"aria-labelledby": thumbName(startNameId),
+				"aria-valuemax": end,
+				className: thumbClass(startOnTop),
+				disabled,
+				max,
+				min,
+				name: name?.[0],
+				onChange: commit("start"),
+				onKeyDown: pending ? ignoreStepKeys : void 0,
+				ref: startRef,
+				required,
+				step,
+				type: "range"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...thumbValue(1),
+				"aria-describedby": ariaDescribedBy,
+				"aria-disabled": pending || void 0,
+				"aria-invalid": invalid,
+				"aria-labelledby": thumbName(endNameId),
+				"aria-valuemin": start,
+				className: thumbClass(!startOnTop),
+				disabled,
+				max,
+				min,
+				name: name?.[1],
+				onChange: commit("end"),
+				onKeyDown: pending ? ignoreStepKeys : void 0,
+				ref: endRef,
+				required,
+				step,
+				type: "range"
+			})
+		]
+	});
+};
+//#endregion
+export { RangeSlider };

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

@@ -0,0 +1,14 @@
+import './range-slider.css';
+//#region src/components/form/range-slider/range-slider.module.css
+var range_slider_module_default = {
+	"disabled": "oss4bG_disabled",
+	"fill": "oss4bG_fill",
+	"fillInvalid": "oss4bG_fillInvalid",
+	"interactive": "oss4bG_interactive",
+	"onTop": "oss4bG_onTop",
+	"root": "oss4bG_root",
+	"thumb": "oss4bG_thumb",
+	"track": "oss4bG_track"
+};
+//#endregion
+export { range_slider_module_default as default };

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

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"