@galaxy-io/dls 1.4.15 → 1.5.0

package/dist/inputs/PasswordInput.js

@@ -1,4 +1,4 @@
-import Input, { InputSize } from "./Input.js";
+import Input from "./Input.js";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
@@ -8,17 +8,19 @@ var DEFAULT_STATE = { showPassword: false };
 * A masked text field with a built-in reveal toggle in the trailing slot.
 * Toggling only flips the DOM `type` — the value is never transformed.
 */
-var PasswordInput = forwardRef(({ size = InputSize.MEDIUM, value, placeholder, label, leading, error, isRequired, isDisabled, autoFocus, onChange, width, fillWidth, onKeyDown, onBlur, onFocus }, ref) => {
+var PasswordInput = forwardRef(({ variant, size, value, placeholder, label, labelTooltip, leading, error, isRequired, isDisabled, autoFocus, onChange, width, fillWidth, onKeyDown, onBlur, onFocus, isMonospace }, ref) => {
 	const [state, setState] = useState(DEFAULT_STATE);
 	return /* @__PURE__ */ jsx(Input, {
 		ref,
 		parse: String,
 		onChange,
+		variant,
 		size,
 		type: state.showPassword ? "text" : "password",
 		value,
 		placeholder,
 		label,
+		labelTooltip,
 		leading,
 		trailing: {
 			icon: state.showPassword ? EyeSlashIcon : EyeIcon,
@@ -36,7 +38,8 @@ var PasswordInput = forwardRef(({ size = InputSize.MEDIUM, value, placeholder, l
 		onBlur,
 		onFocus,
 		width,
-		fillWidth
+		fillWidth,
+		isMonospace
 	});
 });
 PasswordInput.displayName = "PasswordInput";

package/dist/inputs/RadioInput.d.ts

@@ -1,18 +1,15 @@
-/** Fill color of the dot when selected. */
-export declare enum RadioInputVariant {
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY"
-}
-/** Circle size. Two steps only — this is a hit target, not a type scale. */
-export declare enum RadioInputSize {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM"
-}
+import { InputSize, InputVariant } from "./Input";
 export interface RadioInputProps {
-    /** @default RadioInputVariant.PRIMARY */
-    variant?: RadioInputVariant;
-    /** @default RadioInputSize.MEDIUM */
-    size?: RadioInputSize;
+    /**
+     * Unselected fill color. The selected fill is a state color and stays
+     * `background.primaryAlt` so the dot keeps its contrast. Unlike the field
+     * inputs, `TRANSPARENT` keeps the hairline border here — without it the
+     * circle would be invisible. @default InputVariant.PRIMARY
+     */
+    variant?: InputVariant;
+    /** Circle size — a hit target, so it steps 12 / 16 / 20px, not off the type scale.
+     * @default InputSize.MEDIUM */
+    size?: InputSize;
     /** Controlled state. The radio holds none of its own. */
     isSelected: boolean;
     /** Text beside the circle. */

package/dist/inputs/RadioInput.js

@@ -5,24 +5,13 @@ import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import RequiredMarker from "../text/RequiredMarker.js";
 import Spacing from "../containers/Spacing.js";
+import { InputSize, InputVariant, getInputControlSize, getInputSurfaceColor } from "./Input.js";
 /* empty css                     */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { InfoIcon } from "@phosphor-icons/react";
 //#region src/inputs/RadioInput.tsx
-/** Fill color of the dot when selected. */
-var RadioInputVariant = /* @__PURE__ */ function(RadioInputVariant) {
-	RadioInputVariant["PRIMARY"] = "PRIMARY";
-	RadioInputVariant["SECONDARY"] = "SECONDARY";
-	return RadioInputVariant;
-}({});
-/** Circle size. Two steps only — this is a hit target, not a type scale. */
-var RadioInputSize = /* @__PURE__ */ function(RadioInputSize) {
-	RadioInputSize["SMALL"] = "SMALL";
-	RadioInputSize["MEDIUM"] = "MEDIUM";
-	return RadioInputSize;
-}({});
 var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
 var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
 var RadioContainer = /*#__PURE__*/ styled("div")({
@@ -34,14 +23,9 @@ var RadioContainer = /*#__PURE__*/ styled("div")({
 		"r1pzr59l-1": [_exp2()]
 	}
 });
-var _exp4 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "12px").with("MEDIUM", () => "16px").exhaustive();
-};
+var _exp4 = () => ({ $size }) => getInputControlSize($size);
 var _exp5 = () => ({ theme }) => theme.color.border.primary;
-var _exp6 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.primaryAlt : theme.color.background.tertiary;
-var _exp7 = () => ({ theme, $isDisabled, $variant }) => {
-	return match($variant).with("PRIMARY", () => $isDisabled ? theme.color.border.primary : theme.color.border.primary).with("SECONDARY", () => $isDisabled ? theme.color.border.primary : theme.color.border.primary).exhaustive();
-};
+var _exp6 = () => ({ theme, $variant, $isSelected }) => $isSelected ? theme.color.background.primaryAlt : getInputSurfaceColor(theme, $variant);
 var RadioWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	name: "RadioWrapper",
 	class: "r1mwwvky",
@@ -49,25 +33,26 @@ var RadioWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	vars: {
 		"r1mwwvky-0": [_exp4()],
 		"r1mwwvky-1": [_exp5()],
-		"r1mwwvky-2": [_exp6()],
-		"r1mwwvky-3": [_exp7()]
+		"r1mwwvky-2": [_exp6()]
 	}
 }));
-var _exp9 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").exhaustive();
-};
-var _exp0 = () => ({ theme }) => theme.color.background.primary;
-var _exp1 = () => ({ $isSelected }) => $isSelected ? 1 : 0;
-var _exp10 = () => ({ $isSelected }) => $isSelected ? "scale(1)" : "scale(0)";
+/** The dot is half the circle it sits in — see `getInputControlSize`. */
+function getRadioDotSize(size) {
+	return match(size).returnType().with(InputSize.SMALL, () => "6px").with(InputSize.MEDIUM, () => "8px").with(InputSize.LARGE, () => "10px").exhaustive();
+}
+var _exp8 = () => ({ $size }) => getRadioDotSize($size);
+var _exp9 = () => ({ theme }) => theme.color.background.primary;
+var _exp0 = () => ({ $isSelected }) => $isSelected ? 1 : 0;
+var _exp1 = () => ({ $isSelected }) => $isSelected ? "scale(1)" : "scale(0)";
 var RadioDot = withTheme(/*#__PURE__*/ styled("div")({
 	name: "RadioDot",
 	class: "r137y8ev",
 	propsAsIs: false,
 	vars: {
-		"r137y8ev-0": [_exp9()],
-		"r137y8ev-1": [_exp0()],
-		"r137y8ev-2": [_exp1()],
-		"r137y8ev-3": [_exp10()]
+		"r137y8ev-0": [_exp8()],
+		"r137y8ev-1": [_exp9()],
+		"r137y8ev-2": [_exp0()],
+		"r137y8ev-3": [_exp1()]
 	}
 }));
 /**
@@ -76,7 +61,7 @@ var RadioDot = withTheme(/*#__PURE__*/ styled("div")({
 * There is no group component — render several and enforce single-selection in
 * your own state.
 */
-var RadioInput = ({ variant = "PRIMARY", size = "MEDIUM", isSelected, label, labelTooltip, isRequired = false, isDisabled = false, onChange }) => {
+var RadioInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, isSelected, label, labelTooltip, isRequired = false, isDisabled = false, onChange }) => {
 	const handleClick = () => {
 		if (!isDisabled) onChange(!isSelected);
 	};
@@ -87,7 +72,6 @@ var RadioInput = ({ variant = "PRIMARY", size = "MEDIUM", isSelected, label, lab
 			$variant: variant,
 			$size: size,
 			$isSelected: isSelected,
-			$isDisabled: isDisabled,
 			children: /* @__PURE__ */ jsx(RadioDot, {
 				$size: size,
 				$isSelected: isSelected
@@ -118,4 +102,4 @@ var RadioInput = ({ variant = "PRIMARY", size = "MEDIUM", isSelected, label, lab
 	});
 };
 //#endregion
-export { RadioInputSize, RadioInputVariant, RadioInput as default };
+export { RadioInput as default };

package/dist/inputs/SelectInput.d.ts

@@ -1,13 +1,6 @@
 import { IconVariant } from "../icons/Icon";
-import { TextSize, TextVariant } from "../text/Text";
-import { InputSize } from "./Input";
-/** Surface treatment of the closed trigger. Shared with `MultiSelectInput`. */
-export declare enum SelectInputVariant {
-    BASE = "BASE",
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY",
-    TERTIARY = "TERTIARY"
-}
+import { TextVariant } from "../text/Text";
+import { InputSize, InputVariant } from "./Input";
 /** One choice in a select. */
 export interface SelectInputOption {
     /** Stable identity — selection is matched on this, not on `value`. */
@@ -30,8 +23,8 @@ export interface PinnedOption {
 }
 export interface SelectInputProps {
     label?: string;
-    /** @default SelectInputVariant.PRIMARY */
-    variant?: SelectInputVariant;
+    /** Trigger surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** Every choice. Order is preserved. */
@@ -63,9 +56,7 @@ export interface SelectInputProps {
     /** Debounce before `onSearch` fires, in ms. @default 300 */
     debounceMs?: number;
 }
-export declare const SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP: Record<SelectInputVariant, IconVariant>;
-export declare const SELECT_INPUT_SIZE_TO_ICON_SIZE: Record<InputSize, number>;
-export declare const SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP: Record<InputSize, TextSize>;
+export declare const INPUT_VARIANT_TO_ICON_VARIANT_MAP: Record<InputVariant, IconVariant>;
 /**
  * Single-choice dropdown with keyboard navigation and optional search.
  *

package/dist/inputs/SelectInput.js

@@ -5,43 +5,37 @@ import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Spacing from "../containers/Spacing.js";
-import { InputLabel, InputSize } from "./Input.js";
+import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
+import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
 import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
 /* empty css                      */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCounterClockwiseIcon, CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 //#region src/inputs/SelectInput.tsx
-/** Surface treatment of the closed trigger. Shared with `MultiSelectInput`. */
-var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
-	SelectInputVariant["BASE"] = "BASE";
-	SelectInputVariant["PRIMARY"] = "PRIMARY";
-	SelectInputVariant["SECONDARY"] = "SECONDARY";
-	SelectInputVariant["TERTIARY"] = "TERTIARY";
-	return SelectInputVariant;
-}({});
-var _exp = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "0 6px").with(InputSize.MEDIUM, () => "0 8px").with(InputSize.LARGE, () => "0 10px").exhaustive();
-};
-var _exp2 = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
+var INPUT_VARIANT_TO_DROPDOWN_VARIANT = {
+	[InputVariant.TRANSPARENT]: DropdownVariant.TRANSPARENT,
+	[InputVariant.BASE]: DropdownVariant.PRIMARY,
+	[InputVariant.PRIMARY]: DropdownVariant.PRIMARY,
+	[InputVariant.SECONDARY]: DropdownVariant.SECONDARY,
+	[InputVariant.TERTIARY]: DropdownVariant.TERTIARY
 };
+var _exp = () => ({ $size }) => `0 ${getInputPadding($size)}`;
+var _exp2 = () => ({ $size }) => getInputHeight($size);
 var _exp3 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
 var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
 var _exp5 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var _exp6 = () => ({ theme }) => theme.color.background.primary;
-var _exp7 = () => ({ theme, $isActive, $isError }) => {
+var _exp6 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
+var _exp7 = () => ({ theme, $variant, $isActive, $isError }) => {
 	if ($isActive) return theme.color.border.selected;
 	if ($isError) return theme.color.border.error;
-	return theme.color.border.primary;
+	return getInputBorderColor(theme, $variant);
 };
-var _exp8 = () => ({ theme, $isActive }) => $isActive ? theme.color.border.selected : theme.color.border.primary;
+var _exp8 = () => ({ theme, $variant, $isActive }) => $isActive ? theme.color.border.selected : getInputBorderColor(theme, $variant);
 var StyledSelectInput = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledSelectInput",
 	class: "s1ecxi56",
@@ -57,16 +51,10 @@ var StyledSelectInput = withTheme(/*#__PURE__*/ styled("div")({
 		"s1ecxi56-7": [_exp8()]
 	}
 }));
-var _exp9 = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
-};
+var _exp9 = () => ({ $size }) => getInputHeight($size);
 var _exp0 = () => ({ theme }) => theme.color.text.primary;
-var _exp1 = () => ({ theme, $size }) => {
-	return match($size).with(InputSize.SMALL, () => theme.font.sans.size.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.size.body_md).with(InputSize.LARGE, () => theme.font.sans.size.body_lg).exhaustive();
-};
-var _exp10 = () => ({ theme, $size }) => {
-	return match($size).with(InputSize.SMALL, () => theme.font.sans.height.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.height.body_md).with(InputSize.LARGE, () => theme.font.sans.height.body_lg).exhaustive();
-};
+var _exp1 = () => ({ theme, $size }) => getInputFontSize(theme, $size);
+var _exp10 = () => ({ theme, $size }) => getInputLineHeight(theme, $size);
 var _exp11 = () => ({ theme }) => theme.font.sans.weight.medium;
 var _exp12 = () => ({ theme }) => theme.font.sans.family;
 var _exp13 = () => ({ theme }) => theme.color.text.tertiary;
@@ -106,10 +94,10 @@ var SelectInputOptionsContainer = /*#__PURE__*/ styled("div")({
 	vars: { "sk260f0-0": [_exp16()] }
 });
 var _exp17 = () => ({ theme, $isSelected, $isFocused }) => {
-	if ($isSelected || $isFocused) return theme.color.background.tertiary;
+	if ($isSelected || $isFocused) return theme.color.background.secondary;
 	return "transparent";
 };
-var _exp19 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp19 = () => ({ theme }) => theme.color.background.secondary;
 var SelectInputOption = withTheme(/*#__PURE__*/ styled("button")({
 	name: "SelectInputOption",
 	class: "so10ras",
@@ -138,21 +126,12 @@ var OptionIconSlot = /*#__PURE__*/ styled("span")({
 	class: "o9236d8",
 	propsAsIs: false
 });
-var SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP = {
-	["BASE"]: IconVariant.SECONDARY,
-	["PRIMARY"]: IconVariant.SECONDARY,
-	["SECONDARY"]: IconVariant.SECONDARY,
-	["TERTIARY"]: IconVariant.PRIMARY
-};
-var SELECT_INPUT_SIZE_TO_ICON_SIZE = {
-	[InputSize.SMALL]: 12,
-	[InputSize.MEDIUM]: 14,
-	[InputSize.LARGE]: 16
-};
-var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
-	[InputSize.SMALL]: TextSize.BODY_MD,
-	[InputSize.MEDIUM]: TextSize.BODY_MD,
-	[InputSize.LARGE]: TextSize.BODY_MD
+var INPUT_VARIANT_TO_ICON_VARIANT_MAP = {
+	[InputVariant.TRANSPARENT]: IconVariant.SECONDARY,
+	[InputVariant.BASE]: IconVariant.SECONDARY,
+	[InputVariant.PRIMARY]: IconVariant.SECONDARY,
+	[InputVariant.SECONDARY]: IconVariant.SECONDARY,
+	[InputVariant.TERTIARY]: IconVariant.PRIMARY
 };
 /**
 * Single-choice dropdown with keyboard navigation and optional search.
@@ -161,7 +140,7 @@ var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
 * option back. Passing `onSearch` turns the trigger into a search box — you own
 * the filtering, so it works equally well against a local list or a server.
 */
-var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
+var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
 	const isSearchable = !!onSearch;
 	const [isHovered, setIsHovered] = useState(false);
 	const [searchTerm, setSearchTerm] = useState("");
@@ -321,7 +300,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 				},
 				onMouseEnter: () => setFocusedOptionIndex(index),
 				children: [/* @__PURE__ */ jsx(Text, {
-					size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+					size: getInputTextSize(size),
 					cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 					isEllipsis: true,
 					children: pinnedOption.label
@@ -354,7 +333,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 								shrink: 1,
 								minWidth: 0,
 								children: /* @__PURE__ */ jsx(Text, {
-									size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+									size: getInputTextSize(size),
 									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 									isEllipsis: true,
 									variant: option.variant ?? TextVariant.PRIMARY,
@@ -372,7 +351,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 					style: { padding: "8px" },
 					children: /* @__PURE__ */ jsx(Text, {
 						variant: TextVariant.TERTIARY,
-						size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+						size: getInputTextSize(size),
 						children: "No options found"
 					})
 				})
@@ -390,7 +369,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 						size: 12
 					}), /* @__PURE__ */ jsx(Text, {
 						variant: TextVariant.SECONDARY,
-						size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+						size: getInputTextSize(size),
 						cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 						children: "Reset"
 					})]
@@ -418,7 +397,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 				isRequired
 			}),
 			/* @__PURE__ */ jsx(Dropdown, {
-				variant: DropdownVariant.PRIMARY,
+				variant: INPUT_VARIANT_TO_DROPDOWN_VARIANT[variant],
 				body: dropdownBody,
 				isOpen: visible,
 				onClose: handleClose,
@@ -441,7 +420,6 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 					children: [
 						/* @__PURE__ */ jsx(StyledSearchInput, {
 							ref: inputRef,
-							$variant: variant,
 							$size: size,
 							$isActive: visible ?? false,
 							$isDisabled: effectiveIsDisabled,
@@ -464,7 +442,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
 								component: CaretDownIcon,
-								size: 10,
+								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
 						}) })
@@ -498,7 +476,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 								minWidth: 0,
 								children: /* @__PURE__ */ jsx(Text, {
 									variant: textVariant,
-									size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+									size: getInputTextSize(size),
 									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 									isEllipsis: true,
 									children: selectedOption ? selectedOption.label : placeholder
@@ -511,7 +489,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
 								component: CaretDownIcon,
-								size: 10,
+								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
 						}) })
@@ -527,4 +505,4 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 	});
 };
 //#endregion
-export { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputVariant, SelectInput as default };
+export { INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInput as default };

package/dist/inputs/SliderInput.d.ts

@@ -1,4 +1,12 @@
+import { InputSize, InputVariant } from "./Input";
 export interface SliderInputProps {
+    /**
+     * Track color. The filled portion and the handle are state colors and stay
+     * `icon.primary`. @default InputVariant.PRIMARY
+     */
+    variant?: InputVariant;
+    /** Rail and handle size — 2/6, 3/8 or 4/10px. @default InputSize.MEDIUM */
+    size?: InputSize;
     label?: string;
     /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
@@ -27,5 +35,5 @@ export interface SliderInputProps {
  * `onChange` fires on every pointer move. When each change is expensive, drive
  * a preview from it and commit on `onInteractionEnd`.
  */
-declare const SliderInput: ({ label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min, max, step, isDisabled, width, fillWidth, }: SliderInputProps) => import("react").JSX.Element;
+declare const SliderInput: ({ variant, size, label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min, max, step, isDisabled, width, fillWidth, }: SliderInputProps) => import("react").JSX.Element;
 export default SliderInput;

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