@k8ordo/ui 1.0.0

package/dist/components/form/number-field/number-field.d.mts

@@ -0,0 +1,25 @@
+import { FC, InputHTMLAttributes, Ref } from "react";
+//#region src/components/form/number-field/number-field.d.ts
+type BaseProps = {
+  invalid?: boolean;
+  precision?: number;
+  ref?: Ref<HTMLInputElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'style' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'step' | 'min' | 'max'> & {
+  step?: number;
+  min?: number;
+  max?: number;
+};
+type ControlledProps = {
+  value: number;
+  onChange: (value: number) => void;
+  defaultValue?: never;
+};
+type UncontrolledProps = {
+  defaultValue?: number;
+  value?: never;
+  onChange?: (value: number) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
+declare const NumberField: FC<Props>;
+//#endregion
+export { NumberField };

package/dist/components/form/number-field/number-field.mjs

@@ -0,0 +1,115 @@
+"use client";
+import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { chain } from "../../../helpers/chain.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { toPrecision } from "../../../internal/to-precision.mjs";
+import { clamp } from "../../../internal/clamp.mjs";
+import { cast } from "./cast.mjs";
+import { useState } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/number-field/number-field.tsx
+const NumberField = ({ invalid = false, disabled = false, required = false, value, defaultValue, onChange, onBlur, onKeyDown, ref, step = 1, precision = 0, max = 9007199254740991, min = -9007199254740991, ...rest }) => {
+	const messages = useMessages();
+	const [currentValue, setCurrentValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? 0,
+		onChange
+	});
+	const [displayValue, setDisplayValue] = useState(() => currentValue.toFixed(precision));
+	const [prevValue, setPrevValue] = useState(currentValue);
+	const { pending } = useFormStatus();
+	if (currentValue !== prevValue) {
+		setDisplayValue(currentValue.toFixed(precision));
+		setPrevValue(currentValue);
+	}
+	const handleChange = (newValue) => {
+		setCurrentValue(newValue);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex h-12 w-full items-center justify-between gap-2 rounded-xl border border-border-base bg-bg-base vertical:h-auto vertical:w-12", FOCUS_RING_WITHIN, "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
+		children: [/* @__PURE__ */ jsx("input", {
+			autoComplete: "off",
+			autoCorrect: "off",
+			inputMode: "decimal",
+			...rest,
+			"aria-invalid": invalid,
+			"aria-required": required,
+			"aria-valuemax": max,
+			"aria-valuemin": min,
+			"aria-valuenow": currentValue,
+			className: cn("grow bg-transparent pe-8 ps-3 focus-visible:outline-hidden size-full", "disabled:cursor-not-allowed", "read-only:cursor-not-allowed"),
+			disabled,
+			readOnly: pending || void 0,
+			onBlur: chain(onBlur, () => {
+				const newValue = clamp(cast(displayValue, precision), min, max);
+				handleChange(newValue);
+				setDisplayValue(newValue.toFixed(precision));
+			}),
+			onChange: (e) => {
+				if (e.nativeEvent instanceof InputEvent && e.nativeEvent.isComposing) return;
+				setDisplayValue(e.target.value);
+			},
+			onKeyDown: chain(onKeyDown, (e) => {
+				if (e.key === "ArrowUp") {
+					const newValue = clamp(toPrecision(cast(displayValue, precision) + step, precision), min, max);
+					handleChange(newValue);
+					setDisplayValue(newValue.toFixed(precision));
+				}
+				if (e.key === "ArrowDown") {
+					const newValue = clamp(toPrecision(cast(displayValue, precision) - step, precision), min, max);
+					handleChange(newValue);
+					setDisplayValue(newValue.toFixed(precision));
+				}
+			}),
+			pattern: "[0-9]*(.[0-9]+)?",
+			ref,
+			role: "spinbutton",
+			type: "text",
+			value: displayValue
+		}), /* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
+			className: "vertical:inset-e-auto vertical:bottom-1 vertical:h-auto vertical:w-full vertical:flex-row vertical:px-1 vertical:py-0 absolute inset-e-1 flex h-full flex-col py-1",
+			children: [/* @__PURE__ */ jsxs("button", {
+				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors vertical:h-6 vertical:w-auto", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute hover:disabled:bg-transparent"),
+				disabled: disabled || pending,
+				onClick: () => {
+					const newValue = clamp(toPrecision(cast(displayValue, precision) + step, precision), min, max);
+					handleChange(newValue);
+					setDisplayValue(newValue.toFixed(precision));
+				},
+				tabIndex: -1,
+				type: "button",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: messages.numberFieldIncrement
+				}), /* @__PURE__ */ jsx(ChevronIcon, {
+					direction: "up",
+					size: "sm"
+				})]
+			}), /* @__PURE__ */ jsxs("button", {
+				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors vertical:h-6 vertical:w-auto", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute hover:disabled:bg-transparent"),
+				disabled: disabled || pending,
+				onClick: () => {
+					const newValue = clamp(toPrecision(cast(displayValue, precision) - step, precision), min, max);
+					handleChange(newValue);
+					setDisplayValue(newValue.toFixed(precision));
+				},
+				tabIndex: -1,
+				type: "button",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: messages.numberFieldDecrement
+				}), /* @__PURE__ */ jsx(ChevronIcon, {
+					direction: "down",
+					size: "sm"
+				})]
+			})]
+		})]
+	});
+};
+//#endregion
+export { NumberField };

package/dist/components/form/password-input/index.d.mts

@@ -0,0 +1,2 @@
+import { PasswordInput } from "./password-input.mjs";
+export { PasswordInput };

package/dist/components/form/password-input/index.mjs

@@ -0,0 +1,2 @@
+import { PasswordInput } from "./password-input.mjs";
+export { PasswordInput };

package/dist/components/form/password-input/password-input.d.mts

@@ -0,0 +1,11 @@
+import { FC, InputHTMLAttributes, Ref } from "react";
+//#region src/components/form/password-input/password-input.d.ts
+type Props = {
+  invalid?: boolean;
+  showLabel?: string;
+  hideLabel?: string;
+  ref?: Ref<HTMLInputElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style'>;
+declare const PasswordInput: FC<Props>;
+//#endregion
+export { PasswordInput };

package/dist/components/form/password-input/password-input.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { FOCUS_RING_NO_BORDER, FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
+import { ViewIcon, ViewOffIcon } from "../../icons/lucide.mjs";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/password-input/password-input.tsx
+const PasswordInput = ({ invalid = false, autoComplete = "current-password", showLabel, hideLabel, disabled = false, readOnly, ref, ...rest }) => {
+	const messages = useMessages();
+	const { isOpen: isVisible, toggle: toggleVisible } = useDisclosure();
+	const { pending } = useFormStatus();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex w-full items-center rounded-xl border border-border-base bg-bg-base vertical:h-full vertical:w-auto", invalid && "border-border-error", (disabled || pending) && "cursor-not-allowed border-border-mute bg-bg-mute", FOCUS_RING_WITHIN),
+		children: [/* @__PURE__ */ jsx("input", {
+			"aria-invalid": invalid,
+			autoComplete,
+			className: cn("w-full grow bg-transparent px-3 py-2 focus-visible:outline-hidden vertical:h-full vertical:w-auto", "disabled:cursor-not-allowed", "read-only:cursor-not-allowed read-only:bg-bg-subtle"),
+			disabled,
+			readOnly: pending || readOnly,
+			ref,
+			type: isVisible ? "text" : "password",
+			...rest
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": isVisible ? hideLabel ?? messages.passwordHide : showLabel ?? messages.passwordShow,
+			className: cn("me-2 inline-flex shrink-0 items-center justify-center rounded-md p-1 text-fg-mute transition-colors", FOCUS_RING_NO_BORDER, !disabled && !pending && "hover:bg-bg-mute hover:text-fg-base", (disabled || pending) && "cursor-not-allowed text-fg-mute/70"),
+			disabled: disabled || pending,
+			onClick: toggleVisible,
+			type: "button",
+			children: isVisible ? /* @__PURE__ */ jsx(ViewOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx(ViewIcon, { size: "sm" })
+		})]
+	});
+};
+//#endregion
+export { PasswordInput };

package/dist/components/form/radio/index.d.mts

@@ -0,0 +1,2 @@
+import { Radio } from "./radio.mjs";
+export { Radio };

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

@@ -0,0 +1,2 @@
+import { Radio } from "./radio.mjs";
+export { Radio };

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

@@ -0,0 +1,24 @@
+import { Option } from "../../../types/variables.mjs";
+import { ChangeEvent, FC, HTMLAttributes, Ref } from "react";
+//#region src/components/form/radio/radio.d.ts
+type BaseProps = {
+  'aria-labelledby': string;
+  name?: string;
+  disabled?: boolean;
+  options: readonly Option[];
+  ref?: Ref<HTMLDivElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'className' | 'style' | 'children' | 'aria-labelledby' | 'onChange'>;
+type ControlledProps = {
+  value: string;
+  onChange: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+  defaultValue?: never;
+};
+type UncontrolledProps = {
+  defaultValue?: string;
+  value?: never;
+  onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
+declare const Radio: FC<Props>;
+//#endregion
+export { Radio };

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

@@ -0,0 +1,51 @@
+"use client";
+import { FOCUS_RING_PEER } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/radio/radio.tsx
+const Radio = ({ "aria-labelledby": labelledbyId, name, disabled = false, value, defaultValue, onChange, options, ref, ...rest }) => {
+	const [selectedValue, setSelectedValue] = useControllableState({
+		value,
+		defaultValue
+	});
+	const { pending } = useFormStatus();
+	const isControlled = value !== void 0;
+	const disabledResolved = disabled || pending;
+	const selectValue = (nextValue, event) => {
+		setSelectedValue(nextValue);
+		onChange?.(nextValue, event);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"aria-labelledby": labelledbyId,
+		className: cn("flex cursor-pointer flex-col gap-2", disabledResolved && "cursor-not-allowed"),
+		ref,
+		role: "radiogroup",
+		children: options.map((option) => /* @__PURE__ */ jsxs("label", {
+			className: cn("flex items-center gap-2 text-left", disabledResolved ? "cursor-not-allowed" : "cursor-pointer"),
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					...isControlled ? { checked: value === option.value } : { defaultChecked: defaultValue === option.value },
+					className: "peer sr-only",
+					disabled: disabledResolved,
+					name: name ?? labelledbyId,
+					onChange: (event) => {
+						selectValue(option.value, event);
+					},
+					type: "radio",
+					value: option.value
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: cn("inline-flex size-5 items-center justify-center rounded-full border-2 transition-colors", FOCUS_RING_PEER, selectedValue === option.value ? "border-border-base bg-primary-bg" : "border-border-mute bg-bg-base", disabledResolved && "border-border-mute bg-bg-mute"),
+					children: /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full transition-opacity", selectedValue === option.value ? "bg-primary-border opacity-100" : "bg-transparent opacity-0") })
+				}),
+				/* @__PURE__ */ jsx("span", { children: option.label })
+			]
+		}, option.value))
+	});
+};
+//#endregion
+export { Radio };

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

@@ -0,0 +1,2 @@
+import { RadioCard, RadioCardOption } from "./radio-card.mjs";
+export { RadioCard, type RadioCardOption };

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

@@ -0,0 +1,2 @@
+import { RadioCard } from "./radio-card.mjs";
+export { RadioCard };

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

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

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

@@ -0,0 +1,74 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+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 groupId = useId();
+	const [currentValue, setCurrentValue] = useControllableState({
+		value,
+		defaultValue
+	});
+	const selectValue = (nextValue) => {
+		setCurrentValue(nextValue);
+		onChange?.(nextValue);
+	};
+	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"),
+		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"),
+				id: optionId,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						"aria-describedby": hasDescription ? `${optionId}-description` : void 0,
+						"aria-labelledby": `${optionId}-label`,
+						checked,
+						className: "sr-only",
+						disabled: optionDisabled,
+						name: name ?? groupId,
+						onChange: () => {
+							selectValue(option.value);
+						},
+						type: "radio",
+						value: option.value
+					}),
+					hasVisual ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "mr-4 shrink-0",
+						children: option.visual
+					}) : null,
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-fg-base font-medium",
+							id: `${optionId}-label`,
+							children: option.label
+						}), hasDescription ? /* @__PURE__ */ jsx("span", {
+							className: "text-fg-mute text-sm",
+							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") })
+					})
+				]
+			}, option.value);
+		})
+	});
+};
+//#endregion
+export { RadioCard };

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

@@ -0,0 +1,2 @@
+import { Select } from "./select.mjs";
+export { Select };

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

@@ -0,0 +1,2 @@
+import { Select } from "./select.mjs";
+export { Select };

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

@@ -0,0 +1,11 @@
+import { Option } from "../../../types/variables.mjs";
+import { FC, Ref, SelectHTMLAttributes } from "react";
+//#region src/components/form/select/select.d.ts
+type Props = {
+  invalid?: boolean;
+  options: readonly Option[];
+  ref?: Ref<HTMLSelectElement>;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className' | 'style'>;
+declare const Select: FC<Props>;
+//#endregion
+export { Select };

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

@@ -0,0 +1,33 @@
+"use client";
+import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+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 { pending } = useFormStatus();
+	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),
+		children: [/* @__PURE__ */ jsx("select", {
+			"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,
+			...rest,
+			children: options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "vertical:-rotate-90 pointer-events-none me-3 shrink-0",
+			children: /* @__PURE__ */ jsx(ChevronIcon, {
+				direction: "down",
+				size: "sm"
+			})
+		})]
+	});
+};
+//#endregion
+export { Select };

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

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

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

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

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

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

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

@@ -0,0 +1,50 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+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 [currentValue, handleChange] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? min,
+		onChange
+	});
+	const { pending } = useFormStatus();
+	const disabledResolved = disabled || pending;
+	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"),
+		style: { "--slider-progress": clampedProgress },
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "bg-bg-mute relative rounded-full block-2 inline-full",
+			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")
+			})
+		}), /* @__PURE__ */ jsx("input", {
+			...rest,
+			"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,
+			max,
+			min,
+			onChange: (event) => {
+				handleChange(Number(event.target.value));
+			},
+			ref,
+			required,
+			step,
+			type: "range",
+			value: currentValue
+		})]
+	});
+};
+//#endregion
+export { Slider };

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { ChangeEvent, FC, InputHTMLAttributes, Ref } from "react";
+//#region src/components/form/switch/switch.d.ts
+type BaseProps = {
+  invalid?: boolean;
+  label: string;
+  ref?: Ref<HTMLInputElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'style' | 'value' | 'onChange' | 'defaultChecked' | 'checked' | 'children'>;
+type ControlledProps = {
+  checked: boolean;
+  onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+  defaultChecked?: never;
+};
+type UncontrolledProps = {
+  defaultChecked?: boolean;
+  checked?: never;
+  onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
+declare const Switch: FC<Props>;
+//#endregion
+export { Switch };

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

@@ -0,0 +1,50 @@
+"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 { useId } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/switch/switch.tsx
+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"),
+		htmlFor: inputId,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "relative inline-flex shrink-0",
+			children: [/* @__PURE__ */ jsx("input", {
+				...rest,
+				"aria-checked": isSelected,
+				"aria-invalid": invalid,
+				"aria-required": required,
+				...isControlled ? { checked: isSelected } : { defaultChecked },
+				className: "peer sr-only",
+				disabled: disabledResolved,
+				id: inputId,
+				onChange: (event) => {
+					setSelected(event.target.checked);
+					onChange?.(event.target.checked, event);
+				},
+				ref,
+				required,
+				role: "switch",
+				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") })
+			})]
+		}), label ? /* @__PURE__ */ jsx("span", { children: label }) : null]
+	});
+};
+//#endregion
+export { Switch };

package/dist/components/form/text-field/index.d.mts

@@ -0,0 +1,2 @@
+import { TextField } from "./text-field.mjs";
+export { TextField };

package/dist/components/form/text-field/index.mjs

@@ -0,0 +1,2 @@
+import { TextField } from "./text-field.mjs";
+export { TextField };

package/dist/components/form/text-field/text-field.d.mts

@@ -0,0 +1,11 @@
+import { FC, HTMLInputTypeAttribute, InputHTMLAttributes, Ref } from "react";
+//#region src/components/form/text-field/text-field.d.ts
+type TextInputType = Extract<HTMLInputTypeAttribute, 'text' | 'email' | 'tel' | 'url' | 'search'>;
+type Props = {
+  invalid?: boolean;
+  ref?: Ref<HTMLInputElement>;
+  type?: TextInputType;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type'>;
+declare const TextField: FC<Props>;
+//#endregion
+export { TextField };