@galaxy-io/dls 1.4.14 → 1.5.0

package/dist/inputs/SliderInput.js

@@ -1,12 +1,23 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text from "../text/Text.js";
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
-import { InputLabel } from "./Input.js";
+import { InputLabel, InputSize, InputVariant, getInputSurfaceColor, getInputTextSize } from "./Input.js";
 /* empty css                      */
 import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inputs/SliderInput.tsx
+/**
+* Rail thickness per `InputSize`. A slider has no box to fill, so it runs its
+* own scale rather than `getInputHeight`.
+*/
+function getSliderRailHeight(size) {
+	return match(size).returnType().with(InputSize.SMALL, () => 2).with(InputSize.MEDIUM, () => 3).with(InputSize.LARGE, () => 4).exhaustive();
+}
+function getSliderHandleSize(size) {
+	return match(size).returnType().with(InputSize.SMALL, () => 6).with(InputSize.MEDIUM, () => 8).with(InputSize.LARGE, () => 10).exhaustive();
+}
 var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
 var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
 var SliderWrapper = withTheme(/*#__PURE__*/ styled("div")({
@@ -18,39 +29,48 @@ var SliderWrapper = withTheme(/*#__PURE__*/ styled("div")({
 		"sbeizks-1": [_exp2()]
 	}
 }));
-var _exp3 = () => ({ theme }) => theme.color.opacity.bw24Alt;
+var _exp3 = () => ({ $size }) => `${getSliderRailHeight($size)}px`;
+var _exp4 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
 var SliderTrack = withTheme(/*#__PURE__*/ styled("div")({
 	name: "SliderTrack",
 	class: "s42jcip",
 	propsAsIs: false,
-	vars: { "s42jcip-0": [_exp3()] }
+	vars: {
+		"s42jcip-0": [_exp3()],
+		"s42jcip-1": [_exp4()]
+	}
 }));
-var _exp4 = () => ({ theme }) => theme.color.icon.primary;
+var _exp5 = () => ({ theme }) => theme.color.icon.primary;
 var SliderFill = withTheme(/*#__PURE__*/ styled("div")({
 	name: "SliderFill",
 	class: "s1b59sw7",
 	propsAsIs: false,
-	vars: { "s1b59sw7-0": [_exp4()] }
+	vars: { "s1b59sw7-0": [_exp5()] }
 }));
-var _exp5 = () => ({ $percentage }) => `calc(4px + ${$percentage}% - ${$percentage / 100 * 8}px)`;
-var _exp6 = () => ({ theme }) => theme.color.icon.primary;
-var _exp7 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "grab";
-var _exp8 = () => ({ $isDragging }) => $isDragging ? "none" : "left 0.1s ease-out, transform 0.1s ease-out";
-var _exp9 = () => ({ $isDisabled }) => $isDisabled ? "none" : "auto";
-var _exp0 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "grabbing";
-var _exp1 = () => ({ $isDisabled }) => $isDisabled ? "translate(-50%, -50%)" : "translate(-50%, -50%) scale(1.1)";
+var _exp6 = () => ({ $percentage, $size }) => {
+	const handle = getSliderHandleSize($size);
+	return `calc(${handle / 2}px + ${$percentage}% - ${$percentage / 100 * handle}px)`;
+};
+var _exp8 = () => ({ $size }) => `${getSliderHandleSize($size)}px`;
+var _exp9 = () => ({ theme }) => theme.color.icon.primary;
+var _exp0 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "grab";
+var _exp1 = () => ({ $isDragging }) => $isDragging ? "none" : "left 0.1s ease-out, transform 0.1s ease-out";
+var _exp10 = () => ({ $isDisabled }) => $isDisabled ? "none" : "auto";
+var _exp11 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "grabbing";
+var _exp12 = () => ({ $isDisabled }) => $isDisabled ? "translate(-50%, -50%)" : "translate(-50%, -50%) scale(1.1)";
 var SliderHandle = withTheme(/*#__PURE__*/ styled("div")({
 	name: "SliderHandle",
 	class: "salrebx",
 	propsAsIs: false,
 	vars: {
-		"salrebx-0": [_exp5()],
-		"salrebx-1": [_exp6()],
-		"salrebx-2": [_exp7()],
-		"salrebx-3": [_exp8()],
-		"salrebx-4": [_exp9()],
-		"salrebx-5": [_exp0()],
-		"salrebx-6": [_exp1()]
+		"salrebx-0": [_exp6()],
+		"salrebx-1": [_exp8()],
+		"salrebx-2": [_exp9()],
+		"salrebx-3": [_exp0()],
+		"salrebx-4": [_exp1()],
+		"salrebx-5": [_exp10()],
+		"salrebx-6": [_exp11()],
+		"salrebx-7": [_exp12()]
 	}
 }));
 var HiddenInput = /*#__PURE__*/ styled("input")({
@@ -64,7 +84,7 @@ var HiddenInput = /*#__PURE__*/ styled("input")({
 * `onChange` fires on every pointer move. When each change is expensive, drive
 * a preview from it and commit on `onInteractionEnd`.
 */
-var SliderInput = ({ label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min = 0, max = 100, step = 1, isDisabled = false, width, fillWidth }) => {
+var SliderInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min = 0, max = 100, step = 1, isDisabled = false, width, fillWidth }) => {
 	const [isDragging, setIsDragging] = useState(false);
 	const sliderRef = useRef(null);
 	const isInteractingRef = useRef(false);
@@ -134,13 +154,18 @@ var SliderInput = ({ label, labelTooltip, value, onChange, onInteractionStart, o
 			children: [/* @__PURE__ */ jsx(InputLabel, {
 				label,
 				labelTooltip
-			}), /* @__PURE__ */ jsx(Text, { children: value })]
+			}), /* @__PURE__ */ jsx(Text, {
+				size: getInputTextSize(size),
+				children: value
+			})]
 		}), /* @__PURE__ */ jsxs(SliderWrapper, {
 			ref: sliderRef,
 			$isDisabled: isDisabled,
 			onMouseDown: handleMouseDown,
 			children: [
 				/* @__PURE__ */ jsx(SliderTrack, {
+					$variant: variant,
+					$size: size,
 					$isDisabled: isDisabled,
 					children: /* @__PURE__ */ jsx(SliderFill, {
 						$percentage: percentage,
@@ -150,6 +175,7 @@ var SliderInput = ({ label, labelTooltip, value, onChange, onInteractionStart, o
 				}),
 				/* @__PURE__ */ jsx(SliderHandle, {
 					$percentage: percentage,
+					$size: size,
 					$isDisabled: isDisabled,
 					$isDragging: isDragging
 				}),

package/dist/inputs/SwitcherInput.d.ts

@@ -1,4 +1,4 @@
-import { InputSize } from "./Input";
+import { InputSize, InputVariant } from "./Input";
 export interface SwitcherInputItem {
     /** Matched against `selectedId` to decide which segment is active. */
     id: string;
@@ -7,6 +7,11 @@ export interface SwitcherInputItem {
     onClick: () => void;
 }
 export interface SwitcherInputProps {
+    /**
+     * Container surface color. The selected segment is a state color and stays
+     * `background.secondary` regardless. @default InputVariant.PRIMARY
+     */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** Segments, left to right. */
@@ -18,5 +23,5 @@ export interface SwitcherInputProps {
  * A segmented control for switching between a few mutually exclusive views.
  * Each item carries its own `onClick`, so there is no top-level change handler.
  */
-declare const SwitcherInput: ({ size, items, selectedId }: SwitcherInputProps) => import("react").JSX.Element;
+declare const SwitcherInput: ({ variant, size, items, selectedId, }: SwitcherInputProps) => import("react").JSX.Element;
 export default SwitcherInput;

package/dist/inputs/SwitcherInput.js

@@ -1,19 +1,17 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextWeight } from "../text/Text.js";
-import { InputSize } from "./Input.js";
+import { InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputSurfaceColor, getInputTextSize } from "./Input.js";
 /* empty css                        */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { jsx } from "react/jsx-runtime";
 //#region src/inputs/SwitcherInput.tsx
-var _exp = () => ({ theme }) => theme.color.background.primary;
-var _exp2 = () => ({ theme }) => theme.color.border.primary;
+var _exp = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
+var _exp2 = () => ({ theme, $variant }) => getInputBorderColor(theme, $variant);
 var _exp3 = () => ({ $size }) => {
 	return match($size).with(InputSize.SMALL, () => "0 1.5px").with(InputSize.MEDIUM, () => "1px 2px").with(InputSize.LARGE, () => "2px 2px").exhaustive();
 };
-var _exp4 = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
-};
+var _exp4 = () => ({ $size }) => getInputHeight($size);
 var StyledSwitcherInput = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledSwitcherInput",
 	class: "sx2momv",
@@ -44,14 +42,16 @@ var StyledSwitcherInputItem = withTheme(/*#__PURE__*/ styled("div")({
 * A segmented control for switching between a few mutually exclusive views.
 * Each item carries its own `onClick`, so there is no top-level change handler.
 */
-var SwitcherInput = ({ size = InputSize.MEDIUM, items, selectedId }) => {
+var SwitcherInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, items, selectedId }) => {
 	return /* @__PURE__ */ jsx(StyledSwitcherInput, {
 		$size: size,
+		$variant: variant,
 		children: items.map((item) => /* @__PURE__ */ jsx(StyledSwitcherInputItem, {
 			onClick: item.onClick,
 			$isSelected: item.id === selectedId,
 			$size: size,
 			children: /* @__PURE__ */ jsx(Text, {
+				size: getInputTextSize(size),
 				weight: item.id === selectedId ? TextWeight.MEDIUM : TextWeight.REGULAR,
 				cursor: "pointer",
 				children: item.label

package/dist/inputs/TextAreaInput.d.ts

@@ -1,25 +1,12 @@
-/** Text size and inset density. Row count comes from `lines`, not from this. */
-export declare enum TextAreaSize {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM",
-    LARGE = "LARGE"
-}
-/** Background treatment. `TRANSPARENT` is for embedding in an existing surface. */
-export declare enum TextAreaVariant {
-    TRANSPARENT = "TRANSPARENT",
-    BASE = "BASE",
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY",
-    TERTIARY = "TERTIARY"
-}
+import { InputSize, InputVariant } from "./Input";
 export interface TextAreaInputProps {
     /** Controlled value. */
     value?: string;
     onChange: (value: string) => void;
-    /** @default TextAreaVariant.PRIMARY */
-    variant?: TextAreaVariant;
-    /** @default TextAreaSize.MEDIUM */
-    size?: TextAreaSize;
+    /** Field surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
+    /** @default InputSize.MEDIUM */
+    size?: InputSize;
     /** Visible rows before scrolling. @default 3 */
     lines?: number;
     placeholder?: string;

package/dist/inputs/TextAreaInput.js

@@ -3,36 +3,24 @@ import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import TextShimmer from "../text/TextShimmer.js";
-import { InputLabel } from "./Input.js";
+import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputLineHeight, getInputPadding, getInputPaddingValue, getInputSurfaceColor } from "./Input.js";
 /* empty css                        */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
 import { forwardRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inputs/TextAreaInput.tsx
-/** Text size and inset density. Row count comes from `lines`, not from this. */
-var TextAreaSize = /* @__PURE__ */ function(TextAreaSize) {
-	TextAreaSize["SMALL"] = "SMALL";
-	TextAreaSize["MEDIUM"] = "MEDIUM";
-	TextAreaSize["LARGE"] = "LARGE";
-	return TextAreaSize;
-}({});
-/** Background treatment. `TRANSPARENT` is for embedding in an existing surface. */
-var TextAreaVariant = /* @__PURE__ */ function(TextAreaVariant) {
-	TextAreaVariant["TRANSPARENT"] = "TRANSPARENT";
-	TextAreaVariant["BASE"] = "BASE";
-	TextAreaVariant["PRIMARY"] = "PRIMARY";
-	TextAreaVariant["SECONDARY"] = "SECONDARY";
-	TextAreaVariant["TERTIARY"] = "TERTIARY";
-	return TextAreaVariant;
-}({});
-var _exp = () => ({ $lines, $size, theme, $height, $noPadding }) => {
-	if ($height) return "auto";
-	const lineHeight = match($size).with("SMALL", () => Number(theme.font.sans.height.body_sm.replace("px", ""))).with("MEDIUM", () => Number(theme.font.sans.height.body_md.replace("px", ""))).with("LARGE", () => Number(theme.font.sans.height.body_lg.replace("px", ""))).exhaustive();
-	if ($noPadding) return `${lineHeight * $lines}px`;
-	const padding = match($size).with("SMALL", () => 12).with("MEDIUM", () => 16).with("LARGE", () => 20).exhaustive();
-	return `${lineHeight * $lines + padding}px`;
-};
+/**
+* Row count drives the height, so the box is measured rather than stepped:
+* `lines` line-boxes plus the inset above and below. Shared by the field and by
+* the loading placeholder that has to match it exactly.
+*/
+function getTextAreaMinHeight(theme, size, lines, height, noPadding) {
+	if (height) return "auto";
+	const lineHeight = Number(getInputLineHeight(theme, size).replace("px", ""));
+	if (noPadding) return `${lineHeight * lines}px`;
+	return `${lineHeight * lines + 2 * getInputPaddingValue(size)}px`;
+}
+var _exp = () => ({ $lines, $size, theme, $height, $noPadding }) => getTextAreaMinHeight(theme, $size, $lines, $height, $noPadding);
 var _exp2 = () => ({ $fillWidth, $width }) => {
 	if ($fillWidth) return "100%";
 	if ($width) return getCssSizeValue($width, "0");
@@ -44,26 +32,19 @@ var _exp3 = () => ({ $height, $fillHeight }) => {
 	return "auto";
 };
 var _exp4 = () => ({ $fillHeight }) => $fillHeight ? "1" : "none";
-var _exp5 = () => ({ theme, $variant }) => match($variant).with("TRANSPARENT", () => "transparent").with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
+var _exp5 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
 var _exp6 = () => ({ theme, $variant, $error, $noBorder }) => {
-	if ($noBorder) return "none";
+	if ($noBorder) return "transparent";
 	if ($error) return theme.color.border.error;
-	return match($variant).with("TRANSPARENT", () => theme.color.border.primary).with("BASE", () => theme.color.border.primary).with("PRIMARY", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).exhaustive();
+	return getInputBorderColor(theme, $variant);
 };
 var _exp7 = () => ({ theme }) => theme.color.text.primary;
-var _exp8 = () => ({ theme, $size }) => {
-	return match($size).with("SMALL", () => theme.font.sans.size.body_sm).with("MEDIUM", () => theme.font.sans.size.body_md).with("LARGE", () => theme.font.sans.size.body_lg).exhaustive();
-};
-var _exp9 = () => ({ theme, $size }) => {
-	return match($size).with("SMALL", () => theme.font.sans.height.body_sm).with("MEDIUM", () => theme.font.sans.height.body_md).with("LARGE", () => theme.font.sans.height.body_lg).exhaustive();
-};
+var _exp8 = () => ({ theme, $size }) => getInputFontSize(theme, $size);
+var _exp9 = () => ({ theme, $size }) => getInputLineHeight(theme, $size);
 var _exp0 = () => ({ theme }) => theme.font.sans.weight.regular;
 var _exp1 = () => ({ theme }) => theme.font.sans.family;
-var _exp10 = () => ({ $size, $noPadding }) => {
-	if ($noPadding) return "0";
-	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "10px").exhaustive();
-};
-var _exp11 = () => ({ theme }) => theme.color.border.primary;
+var _exp10 = () => ({ $size, $noPadding }) => $noPadding ? "0" : getInputPadding($size);
+var _exp11 = () => ({ theme, $variant }) => getInputBorderColor(theme, $variant);
 var _exp12 = () => ({ theme }) => theme.color.border.selected;
 var _exp13 = () => ({ theme }) => theme.color.text.disabled;
 var StyledTextArea = withTheme(/*#__PURE__*/ styled("textarea")({
@@ -101,13 +82,7 @@ var TextAreaWrapper = /*#__PURE__*/ styled("div")({
 		"tu0hnok-2": [_exp16()]
 	}
 });
-var _exp17 = () => ({ $lines, $size, theme, $height, $noPadding }) => {
-	if ($height) return "auto";
-	const lineHeight = match($size).with("SMALL", () => Number(theme.font.sans.height.body_sm.replace("px", ""))).with("MEDIUM", () => Number(theme.font.sans.height.body_md.replace("px", ""))).with("LARGE", () => Number(theme.font.sans.height.body_lg.replace("px", ""))).exhaustive();
-	if ($noPadding) return `${lineHeight * $lines}px`;
-	const padding = match($size).with("SMALL", () => 12).with("MEDIUM", () => 16).with("LARGE", () => 20).exhaustive();
-	return `${lineHeight * $lines + padding}px`;
-};
+var _exp17 = () => ({ $lines, $size, theme, $height, $noPadding }) => getTextAreaMinHeight(theme, $size, $lines, $height, $noPadding);
 var _exp18 = () => ({ $fillWidth, $width }) => {
 	if ($fillWidth) return "100%";
 	if ($width) return getCssSizeValue($width, "0");
@@ -119,15 +94,12 @@ var _exp19 = () => ({ $height, $fillHeight }) => {
 	return "auto";
 };
 var _exp20 = () => ({ $fillHeight }) => $fillHeight ? "1" : "none";
-var _exp21 = () => ({ theme, $variant }) => match($variant).with("TRANSPARENT", () => "transparent").with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
+var _exp21 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
 var _exp22 = () => ({ theme, $variant, $noBorder }) => {
 	if ($noBorder) return "transparent";
-	return match($variant).with("TRANSPARENT", () => theme.color.border.primary).with("BASE", () => theme.color.border.primary).with("PRIMARY", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).exhaustive();
-};
-var _exp23 = () => ({ $size, $noPadding }) => {
-	if ($noPadding) return "0";
-	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "10px").exhaustive();
+	return getInputBorderColor(theme, $variant);
 };
+var _exp23 = () => ({ $size, $noPadding }) => $noPadding ? "0" : getInputPadding($size);
 var LoadingContainer = withTheme(/*#__PURE__*/ styled("div")({
 	name: "LoadingContainer",
 	class: "l48iv0n",
@@ -144,9 +116,9 @@ var LoadingContainer = withTheme(/*#__PURE__*/ styled("div")({
 }));
 var DEFAULT_STATE = { error: void 0 };
 var TEXTAREA_SIZE_TO_SHIMMER_HEIGHT_MAP = {
-	["SMALL"]: 12,
-	["MEDIUM"]: 14,
-	["LARGE"]: 16
+	[InputSize.SMALL]: 12,
+	[InputSize.MEDIUM]: 14,
+	[InputSize.LARGE]: 16
 };
 /**
 * A multi-line text field. Not resizable by the user — size it with `lines`,
@@ -155,7 +127,7 @@ var TEXTAREA_SIZE_TO_SHIMMER_HEIGHT_MAP = {
 * Note this one takes `required`/`disabled` rather than the `isRequired`/
 * `isDisabled` the other inputs use.
 */
-var TextAreaInput = forwardRef(({ variant = "PRIMARY", size = "MEDIUM", lines = 3, value, min, max, placeholder, label, labelTooltip, error, required, disabled, autoFocus, onChange, onKeyDown, onBlur, onFocus, width, height, fillWidth, fillHeight, noBorder, noPadding, isLoading }, ref) => {
+var TextAreaInput = forwardRef(({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, lines = 3, value, min, max, placeholder, label, labelTooltip, error, required, disabled, autoFocus, onChange, onKeyDown, onBlur, onFocus, width, height, fillWidth, fillHeight, noBorder, noPadding, isLoading }, ref) => {
 	const [state, setState] = useState(DEFAULT_STATE);
 	const handleFocus = (e) => {
 		setState({
@@ -244,4 +216,4 @@ var TextAreaInput = forwardRef(({ variant = "PRIMARY", size = "MEDIUM", lines =
 });
 TextAreaInput.displayName = "TextAreaInput";
 //#endregion
-export { TextAreaSize, TextAreaVariant, TextAreaInput as default };
+export { TextAreaInput as default };

package/dist/inputs/TextInput.d.ts

@@ -1,6 +1,10 @@
 import { type InputProps } from "./Input";
-/** Every `InputProps` field except `type` and `parse`, which are fixed to text. */
-export type TextInputProps = Omit<InputProps<string>, "type" | "parse">;
+/**
+ * Every `InputProps` field except `type` and `parse`, which are fixed to text.
+ * `onFocus` is omitted because the field owns focus to clear its length error,
+ * and `step` is numeric-only.
+ */
+export type TextInputProps = Omit<InputProps<string>, "type" | "parse" | "onFocus" | "step">;
 /**
  * A single-line text field. The default input.
  *

package/dist/inputs/TextInput.js

@@ -9,7 +9,7 @@ var DEFAULT_STATE = { error: "" };
 * `min`/`max` bound the *character count*, not a numeric range — the field
 * validates length on blur and shows its own error. A `error` you pass wins.
 */
-var TextInput = forwardRef(({ size, value, min, max, placeholder, label, labelTooltip, leading, trailing, error, isRequired, isDisabled, autoFocus, onChange, onKeyDown, onBlur, fillWidth, width, isMonospace }, ref) => {
+var TextInput = forwardRef(({ variant, size, value, min, max, placeholder, label, labelTooltip, leading, trailing, error, isRequired, isDisabled, autoFocus, onChange, onKeyDown, onBlur, fillWidth, width, isMonospace }, ref) => {
 	const [state, setState] = useState(DEFAULT_STATE);
 	const handleFocus = () => {
 		setState({
@@ -31,6 +31,7 @@ var TextInput = forwardRef(({ size, value, min, max, placeholder, label, labelTo
 	return /* @__PURE__ */ jsx(Input, {
 		parse: String,
 		onChange,
+		variant,
 		size,
 		ref,
 		type: "text",

package/dist/inputs/ToggleInput.d.ts

@@ -1,4 +1,13 @@
+import { InputSize, InputVariant } from "./Input";
 export interface ToggleInputProps {
+    /**
+     * Off-state track color. The on-state track is a state color and stays
+     * `icon.primary`. @default InputVariant.PRIMARY
+     */
+    variant?: InputVariant;
+    /** Track size — a hit target, so it runs 28×16 / 32×18 / 36×20px.
+     * @default InputSize.MEDIUM */
+    size?: InputSize;
     /** Label rendered above the switch, like the other inputs. */
     label?: string;
     /** Adds an info icon beside the label with this content on hover. */
@@ -18,5 +27,5 @@ export interface ToggleInputProps {
  * Use it for settings that apply immediately. For something that only takes
  * effect on submit, a `CheckboxInput` reads more honestly.
  */
-declare const ToggleInput: ({ label, labelTooltip, value, onChange, isDisabled, width, fillWidth, }: ToggleInputProps) => import("react").JSX.Element;
+declare const ToggleInput: ({ variant, size, label, labelTooltip, value, onChange, isDisabled, width, fillWidth, }: ToggleInputProps) => import("react").JSX.Element;
 export default ToggleInput;

package/dist/inputs/ToggleInput.js

@@ -1,11 +1,22 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import FlexWrapper, { AlignItems, JustifyContent } from "../containers/FlexWrapper.js";
-import { InputLabel } from "./Input.js";
+import { InputLabel, InputSize, InputVariant, getInputSurfaceColor } from "./Input.js";
 /* empty css                      */
 import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inputs/ToggleInput.tsx
+function getToggleTrackWidth(size) {
+	return match(size).returnType().with(InputSize.SMALL, () => 28).with(InputSize.MEDIUM, () => 32).with(InputSize.LARGE, () => 36).exhaustive();
+}
+function getToggleTrackHeight(size) {
+	return match(size).returnType().with(InputSize.SMALL, () => 16).with(InputSize.MEDIUM, () => 18).with(InputSize.LARGE, () => 20).exhaustive();
+}
+/** The thumb fills the track minus its border and inset on each side — 12 / 14 / 16px. */
+function getToggleThumbSize(size) {
+	return getToggleTrackHeight(size) - 4;
+}
 var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
 var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
 var ToggleWrapper = withTheme(/*#__PURE__*/ styled("div")({
@@ -17,26 +28,34 @@ var ToggleWrapper = withTheme(/*#__PURE__*/ styled("div")({
 		"t1t8zlu-1": [_exp2()]
 	}
 }));
-var _exp3 = () => ({ theme, $isChecked }) => $isChecked ? theme.color.icon.primary : theme.color.opacity.bw24Alt;
-var _exp4 = () => ({ theme }) => theme.color.border.primary;
+var _exp3 = () => ({ $size }) => `${getToggleTrackWidth($size)}px`;
+var _exp4 = () => ({ $size }) => `${getToggleTrackHeight($size)}px`;
+var _exp6 = () => ({ theme, $variant, $isChecked }) => $isChecked ? theme.color.icon.primary : getInputSurfaceColor(theme, $variant);
+var _exp8 = () => ({ theme }) => theme.color.border.primary;
 var ToggleTrack = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ToggleTrack",
 	class: "t1br7yd",
 	propsAsIs: false,
 	vars: {
 		"t1br7yd-0": [_exp3()],
-		"t1br7yd-1": [_exp4()]
+		"t1br7yd-1": [_exp4()],
+		"t1br7yd-2": [_exp6()],
+		"t1br7yd-3": [_exp8()]
 	}
 }));
-var _exp5 = () => ({ $isChecked }) => $isChecked ? "calc(100% - 14px - 1.5px)" : "1.5px";
-var _exp6 = () => ({ theme }) => theme.color.background.base;
+var _exp9 = () => ({ $size, $isChecked }) => $isChecked ? `calc(100% - ${getToggleThumbSize($size)}px - 1.5px)` : `1.5px`;
+var _exp1 = () => ({ $size }) => `${getToggleThumbSize($size)}px`;
+var _exp10 = () => ({ theme, $isChecked }) => $isChecked ? theme.color.background.primary : theme.color.background.primaryAlt;
+var _exp11 = () => ({ theme }) => theme.color.border.primary;
 var ToggleThumb = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ToggleThumb",
 	class: "t1xwadc7",
 	propsAsIs: false,
 	vars: {
-		"t1xwadc7-0": [_exp5()],
-		"t1xwadc7-1": [_exp6()]
+		"t1xwadc7-0": [_exp9()],
+		"t1xwadc7-1": [_exp1()],
+		"t1xwadc7-2": [_exp10()],
+		"t1xwadc7-3": [_exp11()]
 	}
 }));
 var HiddenInput = /*#__PURE__*/ styled("input")({
@@ -50,7 +69,7 @@ var HiddenInput = /*#__PURE__*/ styled("input")({
 * Use it for settings that apply immediately. For something that only takes
 * effect on submit, a `CheckboxInput` reads more honestly.
 */
-var ToggleInput = ({ label, labelTooltip, value, onChange, isDisabled = false, width, fillWidth }) => {
+var ToggleInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, label, labelTooltip, value, onChange, isDisabled = false, width, fillWidth }) => {
 	const handleClick = useCallback(() => {
 		if (!isDisabled) onChange(!value);
 	}, [
@@ -86,9 +105,12 @@ var ToggleInput = ({ label, labelTooltip, value, onChange, isDisabled = false, w
 			"aria-disabled": isDisabled,
 			tabIndex: isDisabled ? -1 : 0,
 			children: [/* @__PURE__ */ jsx(ToggleTrack, {
+				$variant: variant,
+				$size: size,
 				$isChecked: value,
 				$isDisabled: isDisabled,
 				children: /* @__PURE__ */ jsx(ToggleThumb, {
+					$size: size,
 					$isChecked: value,
 					$isDisabled: isDisabled
 				})