@galaxy-io/dls 1.4.15 → 1.5.0

package/dist/inputs/CheckboxInput.d.ts

@@ -1,18 +1,15 @@
-/** Fill color when checked. */
-export declare enum CheckboxInputVariant {
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY"
-}
-/** Box size. Two steps only — this is a hit target, not a type scale. */
-export declare enum CheckboxInputSize {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM"
-}
+import { InputSize, InputVariant } from "./Input";
 export interface CheckboxInputProps {
-    /** @default CheckboxInputVariant.PRIMARY */
-    variant?: CheckboxInputVariant;
-    /** @default CheckboxInputSize.MEDIUM */
-    size?: CheckboxInputSize;
+    /**
+     * Unchecked fill color. The checked fill is a state color and stays
+     * `background.primaryAlt` so the tick keeps its contrast. Unlike the field
+     * inputs, `TRANSPARENT` keeps the hairline border here — without it the box
+     * would be invisible. @default InputVariant.PRIMARY
+     */
+    variant?: InputVariant;
+    /** Box size — a hit target, so it steps 12 / 16 / 20px, not off the type scale.
+     * @default InputSize.MEDIUM */
+    size?: InputSize;
     /** Controlled state. The checkbox holds none of its own. */
     isChecked: boolean;
     /** Draw a dash instead of a tick — for a partially-selected group. */

package/dist/inputs/CheckboxInput.js

@@ -3,24 +3,12 @@ import Text, { TextVariant } from "../text/Text.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import RequiredMarker from "../text/RequiredMarker.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 { CheckIcon, MinusIcon } from "@phosphor-icons/react";
 //#region src/inputs/CheckboxInput.tsx
-/** Fill color when checked. */
-var CheckboxInputVariant = /* @__PURE__ */ function(CheckboxInputVariant) {
-	CheckboxInputVariant["PRIMARY"] = "PRIMARY";
-	CheckboxInputVariant["SECONDARY"] = "SECONDARY";
-	return CheckboxInputVariant;
-}({});
-/** Box size. Two steps only — this is a hit target, not a type scale. */
-var CheckboxInputSize = /* @__PURE__ */ function(CheckboxInputSize) {
-	CheckboxInputSize["SMALL"] = "SMALL";
-	CheckboxInputSize["MEDIUM"] = "MEDIUM";
-	return CheckboxInputSize;
-}({});
 var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
 var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
 var _exp3 = () => ({ theme }) => theme.color.border.selected;
@@ -34,14 +22,9 @@ var CheckboxContainer = withTheme(/*#__PURE__*/ styled("div")({
 		"cythikj-2": [_exp3()]
 	}
 }));
-var _exp5 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "12px").with("MEDIUM", () => "16px").exhaustive();
-};
+var _exp5 = () => ({ $size }) => getInputControlSize($size);
 var _exp6 = () => ({ theme }) => theme.color.border.primary;
-var _exp7 = () => ({ theme, $isChecked, $isIndeterminate }) => $isChecked || $isIndeterminate ? theme.color.background.primaryAlt : theme.color.background.tertiary;
-var _exp8 = () => ({ 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 _exp7 = () => ({ theme, $variant, $isChecked, $isIndeterminate }) => $isChecked || $isIndeterminate ? theme.color.background.primaryAlt : getInputSurfaceColor(theme, $variant);
 var CheckboxWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	name: "CheckboxWrapper",
 	class: "c1f4v2sg",
@@ -49,13 +32,14 @@ var CheckboxWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	vars: {
 		"c1f4v2sg-0": [_exp5()],
 		"c1f4v2sg-1": [_exp6()],
-		"c1f4v2sg-2": [_exp7()],
-		"c1f4v2sg-3": [_exp8()]
+		"c1f4v2sg-2": [_exp7()]
 	}
 }));
+/** The tick sits inside the box, so it runs a step under `getInputIconSize`. */
 var CHECKBOX_INPUT_SIZE_TO_ICON_SIZE_MAP = {
-	["SMALL"]: 10,
-	["MEDIUM"]: 12
+	[InputSize.SMALL]: 10,
+	[InputSize.MEDIUM]: 12,
+	[InputSize.LARGE]: 14
 };
 /**
 * A checkbox with an optional label. Fully controlled — you own `isChecked`.
@@ -63,7 +47,7 @@ var CHECKBOX_INPUT_SIZE_TO_ICON_SIZE_MAP = {
 * `isIndeterminate` is purely visual and does not change what `onChange`
 * reports; the callback still flips against `isChecked`.
 */
-var CheckboxInput = ({ variant = "PRIMARY", size = "MEDIUM", isChecked, isIndeterminate = false, label, isRequired = false, isDisabled = false, onChange, ariaLabel, stopClickPropagation = false }) => {
+var CheckboxInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, isChecked, isIndeterminate = false, label, isRequired = false, isDisabled = false, onChange, ariaLabel, stopClickPropagation = false }) => {
 	const handleClick = (event) => {
 		if (stopClickPropagation) event.stopPropagation();
 		if (!isDisabled) onChange(!isChecked, event);
@@ -105,7 +89,6 @@ var CheckboxInput = ({ variant = "PRIMARY", size = "MEDIUM", isChecked, isIndete
 			$size: size,
 			$isChecked: isChecked,
 			$isIndeterminate: isIndeterminate,
-			$isDisabled: isDisabled,
 			children: renderIcon()
 		}), label && /* @__PURE__ */ jsxs(FlexWrapper, {
 			alignItems: AlignItems.CENTER,
@@ -118,4 +101,4 @@ var CheckboxInput = ({ variant = "PRIMARY", size = "MEDIUM", isChecked, isIndete
 	});
 };
 //#endregion
-export { CheckboxInputSize, CheckboxInputVariant, CheckboxInput as default };
+export { CheckboxInput as default };

package/dist/inputs/ColorInput.d.ts

@@ -1,6 +1,8 @@
-import { InputSize } from "./Input";
+import { InputSize, InputVariant } from "./Input";
 export interface ColorInputProps {
     label?: string;
+    /** Trigger surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** Controlled hex value, e.g. `"#1a1a1a"`. */
@@ -31,5 +33,5 @@ export interface ColorInputProps {
  * `onPreviewChange` fires throughout the drag while `onChange` fires on commit —
  * drive a live preview from the first and persist from the second.
  */
-declare const ColorInput: ({ label, size, value, placeholder, onChange, onPreviewChange, width, fillWidth, isDisabled, isRequired, error, pinnedHex, isOpen: controlledIsOpen, onOpenChange, children, }: ColorInputProps) => import("react").JSX.Element;
+declare const ColorInput: ({ label, variant, size, value, placeholder, onChange, onPreviewChange, width, fillWidth, isDisabled, isRequired, error, pinnedHex, isOpen: controlledIsOpen, onOpenChange, children, }: ColorInputProps) => import("react").JSX.Element;
 export default ColorInput;

package/dist/inputs/ColorInput.js

@@ -4,37 +4,32 @@ import { hexToHsva, hsvaToHex } from "../utils/colors.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import Spacing from "../containers/Spacing.js";
+import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import GridWrapper from "../containers/GridWrapper.js";
-import Spacing from "../containers/Spacing.js";
-import { InputLabel, InputSize } from "./Input.js";
 /* empty css                     */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon } from "@phosphor-icons/react";
 import { Hue, Saturation } from "@uiw/react-color";
 //#region src/inputs/ColorInput.tsx
-var _exp = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "0 6px 0 8px").with(InputSize.MEDIUM, () => "0 8px 0 10px").with(InputSize.LARGE, () => "0 10px 0 12px").exhaustive();
-};
-var _exp2 = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
-};
+var _exp = () => ({ $size }) => `0 ${getInputPadding($size)}`;
+var _exp2 = () => ({ $size }) => getInputHeight($size);
 var _exp3 = () => ({ $width, $fillWidth }) => $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, $isDisabled }) => {
-	if ($isDisabled) return theme.color.border.primary;
+var _exp8 = () => ({ theme, $variant, $isActive, $isDisabled }) => {
+	if ($isDisabled) return getInputBorderColor(theme, $variant);
 	if ($isActive) return theme.color.border.selected;
-	return theme.color.border.primary;
+	return getInputBorderColor(theme, $variant);
 };
 var StyledColorInput = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledColorInput",
@@ -123,23 +118,13 @@ var safeNormalizeHex = (hex) => {
 		return null;
 	}
 };
-var COLOR_INPUT_SIZE_TO_TEXT_SIZE = {
-	[InputSize.SMALL]: TextSize.BODY_MD,
-	[InputSize.MEDIUM]: TextSize.BODY_MD,
-	[InputSize.LARGE]: TextSize.BODY_MD
-};
-var COLOR_INPUT_SIZE_TO_ICON_SIZE = {
-	[InputSize.SMALL]: 14,
-	[InputSize.MEDIUM]: 16,
-	[InputSize.LARGE]: 18
-};
 /**
 * A hex color field with a picker popover. Fully controlled.
 *
 * `onPreviewChange` fires throughout the drag while `onChange` fires on commit —
 * drive a live preview from the first and persist from the second.
 */
-var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select color...", onChange, onPreviewChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, pinnedHex = [], isOpen: controlledIsOpen, onOpenChange, children }) => {
+var ColorInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, value, placeholder = "Select color...", onChange, onPreviewChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, pinnedHex = [], isOpen: controlledIsOpen, onOpenChange, children }) => {
 	const [localState, setLocalState] = useState({
 		isOpen: false,
 		isHovered: false
@@ -328,6 +313,7 @@ var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 					children
 				}) : /* @__PURE__ */ jsxs(StyledColorInput, {
 					$size: size,
+					$variant: variant,
 					$isActive: isOpen,
 					$isDisabled: isDisabled,
 					$isError: !!error,
@@ -347,7 +333,7 @@ var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 							gap: 8,
 							children: [value && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorInputPreviewSwatch, { $color: value }), /* @__PURE__ */ jsx(Spacing, { left: 4 })] }), /* @__PURE__ */ jsx(Text, {
 								variant: textVariant,
-								size: COLOR_INPUT_SIZE_TO_TEXT_SIZE[size],
+								size: getInputTextSize(size),
 								isEllipsis: true,
 								cursor: !isDisabled ? "pointer" : "not-allowed",
 								children: displayValue
@@ -356,7 +342,7 @@ var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
 						/* @__PURE__ */ jsx(Icon, {
 							component: CaretDownIcon,
-							size: COLOR_INPUT_SIZE_TO_ICON_SIZE[size],
+							size: getInputIconSize(size),
 							variant: isOpen || localState.isHovered ? IconVariant.SECONDARY : IconVariant.TERTIARY
 						})
 					]

package/dist/inputs/CopyInput.d.ts

@@ -1,10 +1,12 @@
-import { InputSize } from "./Input";
+import { InputSize, InputVariant } from "./Input";
 export interface CopyInputProps {
     /** The text shown and copied. Read-only — there is no `onChange`. */
     value: string;
     label?: string;
     /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** Field surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** A number is px. */
@@ -18,7 +20,7 @@ export interface CopyInputProps {
  * The trailing button confirms the copy itself, so you don't need to.
  */
 declare const CopyInput: {
-    ({ value, label, labelTooltip, size, width, fillWidth, isMonospace, }: CopyInputProps): import("react").JSX.Element;
+    ({ value, label, labelTooltip, variant, size, width, fillWidth, isMonospace, }: CopyInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default CopyInput;

package/dist/inputs/CopyInput.js

@@ -1,6 +1,6 @@
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
-import { InputSize } from "./Input.js";
+import { InputSize, InputVariant } from "./Input.js";
 import TextInput from "./TextInput.js";
 import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,11 +11,18 @@ var INPUT_SIZE_TO_BUTTON_SIZE = {
 	[InputSize.MEDIUM]: ButtonSize.MEDIUM,
 	[InputSize.LARGE]: ButtonSize.LARGE
 };
+var INPUT_VARIANT_TO_BUTTON_VARIANT = {
+	[InputVariant.TRANSPARENT]: ButtonVariant.TERTIARY,
+	[InputVariant.BASE]: ButtonVariant.SECONDARY,
+	[InputVariant.PRIMARY]: ButtonVariant.SECONDARY,
+	[InputVariant.SECONDARY]: ButtonVariant.SECONDARY,
+	[InputVariant.TERTIARY]: ButtonVariant.SECONDARY
+};
 /**
 * A read-only field with a copy-to-clipboard button — API keys, IDs, share links.
 * The trailing button confirms the copy itself, so you don't need to.
 */
-var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, fillWidth, isMonospace = false }) => {
+var CopyInput = ({ value, label, labelTooltip, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, width, fillWidth, isMonospace = false }) => {
 	const [copied, setCopied] = useState(false);
 	const inputRef = useRef(null);
 	const handleCopy = useCallback(() => {
@@ -35,13 +42,14 @@ var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, f
 			labelTooltip,
 			value,
 			onChange: () => {},
+			variant,
 			size,
 			width,
 			fillWidth,
 			isMonospace
 		}), /* @__PURE__ */ jsx(Button, {
 			icon: copied ? CheckIcon : CopyIcon,
-			variant: ButtonVariant.SECONDARY,
+			variant: INPUT_VARIANT_TO_BUTTON_VARIANT[variant],
 			size: INPUT_SIZE_TO_BUTTON_SIZE[size],
 			onClick: handleCopy
 		})]

package/dist/inputs/DateInput.d.ts

@@ -1,6 +1,8 @@
-import { InputSize } from "./Input";
+import { InputSize, InputVariant } from "./Input";
 export interface DateInputProps {
     label?: string;
+    /** Trigger surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** Controlled value. `null` shows the placeholder. */
@@ -28,5 +30,5 @@ export declare function defaultDateFormat(date: Date): string;
  *
  * Works in `Date` objects throughout; there is no string parsing to get wrong.
  */
-declare const DateInput: ({ label, size, value, placeholder, onChange, width, fillWidth, isDisabled, isRequired, error, minDate, maxDate, format, }: DateInputProps) => import("react").JSX.Element;
+declare const DateInput: ({ label, variant, size, value, placeholder, onChange, width, fillWidth, isDisabled, isRequired, error, minDate, maxDate, format, }: DateInputProps) => import("react").JSX.Element;
 export default DateInput;

package/dist/inputs/DateInput.js

@@ -3,14 +3,13 @@ import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import Spacing from "../containers/Spacing.js";
+import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import GridWrapper from "../containers/GridWrapper.js";
-import Spacing from "../containers/Spacing.js";
-import { InputLabel, InputSize } from "./Input.js";
-import SelectInput, { SelectInputVariant } from "./SelectInput.js";
+import SelectInput from "./SelectInput.js";
 /* empty css                    */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarBlankIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
@@ -63,25 +62,28 @@ var DATE_DAY_TO_LABEL = {
 	["FRIDAY"]: "Fri",
 	["SATURDAY"]: "Sat"
 };
-var _exp = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "0 6px 0 8px").with(InputSize.MEDIUM, () => "0 8px 0 10px").with(InputSize.LARGE, () => "0 10px 0 12px").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 = () => ({ $width, $fillWidth }) => $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, $isDisabled }) => {
-	if ($isDisabled) return theme.color.border.primary;
+var _exp8 = () => ({ theme, $variant, $isActive, $isDisabled }) => {
+	if ($isDisabled) return getInputBorderColor(theme, $variant);
 	if ($isActive) return theme.color.border.selected;
-	return theme.color.border.primary;
+	return getInputBorderColor(theme, $variant);
 };
 var StyledDateInput = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledDateInput",
@@ -131,16 +133,6 @@ var DayCell = withTheme(/*#__PURE__*/ styled("button")({
 		"d60emtx-4": [_exp11()]
 	}
 }));
-var DATE_INPUT_SIZE_TO_TEXT_SIZE = {
-	[InputSize.SMALL]: TextSize.BODY_MD,
-	[InputSize.MEDIUM]: TextSize.BODY_MD,
-	[InputSize.LARGE]: TextSize.BODY_MD
-};
-var DATE_INPUT_SIZE_TO_ICON_SIZE = {
-	[InputSize.SMALL]: 14,
-	[InputSize.MEDIUM]: 16,
-	[InputSize.LARGE]: 18
-};
 var DEFAULT_MAX_DATE = /* @__PURE__ */ new Date();
 function defaultDateFormat(date) {
 	return date.toLocaleDateString("en-US", {
@@ -157,7 +149,7 @@ var getInitialViewDate = (value) => {
 *
 * Works in `Date` objects throughout; there is no string parsing to get wrong.
 */
-var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select date...", onChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, minDate = new Date(1970, 0, 1), maxDate = DEFAULT_MAX_DATE, format = defaultDateFormat }) => {
+var DateInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, value, placeholder = "Select date...", onChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, minDate = new Date(1970, 0, 1), maxDate = DEFAULT_MAX_DATE, format = defaultDateFormat }) => {
 	const [state, setState] = useState({
 		isOpen: false,
 		isHovered: false,
@@ -383,7 +375,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 					onClick: (e) => e.stopPropagation(),
 					onMouseDown: (e) => e.stopPropagation(),
 					children: [/* @__PURE__ */ jsx(SelectInput, {
-						variant: SelectInputVariant.SECONDARY,
+						variant,
 						size: InputSize.SMALL,
 						options: monthOptions,
 						value: selectedMonthOption,
@@ -392,7 +384,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 						onOpenChange: handleMonthSelectOpenChange,
 						width: 120
 					}), /* @__PURE__ */ jsx(SelectInput, {
-						variant: SelectInputVariant.SECONDARY,
+						variant,
 						size: InputSize.SMALL,
 						options: yearOptions,
 						value: selectedYearOption,
@@ -450,7 +442,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 				isRequired
 			}),
 			/* @__PURE__ */ jsx(Dropdown, {
-				variant: DropdownVariant.PRIMARY,
+				variant: INPUT_VARIANT_TO_DROPDOWN_VARIANT[variant],
 				body: calendarBody,
 				isOpen: state.isOpen,
 				onClose: handleClose,
@@ -458,6 +450,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 				fillWidth,
 				children: /* @__PURE__ */ jsxs(StyledDateInput, {
 					$size: size,
+					$variant: variant,
 					$isActive: state.isOpen,
 					$isDisabled: isDisabled,
 					$isError: !!error,
@@ -474,7 +467,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 					children: [
 						/* @__PURE__ */ jsx(Text, {
 							variant: textVariant,
-							size: DATE_INPUT_SIZE_TO_TEXT_SIZE[size],
+							size: getInputTextSize(size),
 							isEllipsis: true,
 							cursor: !isDisabled ? "pointer" : "not-allowed",
 							children: displayValue
@@ -482,7 +475,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
 						/* @__PURE__ */ jsx(Icon, {
 							component: CalendarBlankIcon,
-							size: DATE_INPUT_SIZE_TO_ICON_SIZE[size],
+							size: getInputIconSize(size),
 							variant: state.isOpen || state.isHovered ? IconVariant.SECONDARY : IconVariant.TERTIARY
 						})
 					]

package/dist/inputs/Input.d.ts

@@ -1,5 +1,7 @@
 import { type Ref } from "react";
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import type { Theme } from "../theme/types";
+import { TextSize } from "../text/Text";
 export interface InputLabelProps {
     label: string;
     /** Adds an info icon beside the label with this content on hover. */
@@ -18,8 +20,79 @@ export declare enum InputSize {
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
+/**
+ * Field height for an `InputSize`. The single source of truth — every input in
+ * the family routes through this. Call it from inside a Linaria interpolation:
+ *
+ * ```
+ * height: ${({ $size }) => getInputHeight($size)};
+ * ```
+ */
+export declare function getInputHeight(size: InputSize): string;
+/** `getInputHeight` unwrapped, for callers that need to do arithmetic on it. */
+export declare function getInputHeightValue(size: InputSize): number;
+/**
+ * Horizontal inset for an `InputSize` — 6 / 8 / 12px. Returned as a number so
+ * `TextAreaInput` can fold it into its computed `min-height`; most callers want
+ * `getInputPadding` instead.
+ */
+export declare function getInputPaddingValue(size: InputSize): number;
+/** `getInputPaddingValue` as a CSS length. */
+export declare function getInputPadding(size: InputSize): string;
+/** Type step for an `InputSize` — `body_sm` / `body_md` / `body_lg`. */
+export declare function getInputFontSize(theme: Theme, size: InputSize): string;
+/** The line height paired with `getInputFontSize`. */
+export declare function getInputLineHeight(theme: Theme, size: InputSize): string;
+/** Icon px for an `InputSize` — 12 / 14 / 16, for icons sitting inside a field. */
+export declare function getInputIconSize(size: InputSize): number;
+/**
+ * `getInputFontSize` for copy that renders through `Text` rather than through a
+ * raw `<input>` — the trigger labels in `SelectInput`, `DateInput`, `ColorInput`.
+ */
+export declare function getInputTextSize(size: InputSize): TextSize;
+/**
+ * Hit-target box for the boolean controls — 12 / 16 / 20px. Shared by the
+ * `CheckboxInput` square and the `RadioInput` circle, which are sized as targets
+ * rather than off the type scale, so they do not follow `getInputHeight`.
+ */
+export declare function getInputControlSize(size: InputSize): string;
+/**
+ * Surface color for any input. Mirrors `DropdownVariant` so a field and the
+ * panel it sits in can be tuned to the same step of the neutral stack.
+ *
+ * Paints the *resting* surface only — state colors (checked, selected, filled)
+ * are fixed tokens and are not affected by the variant.
+ *
+ * `TRANSPARENT` drops both the fill and the border. `CheckboxInput` and
+ * `RadioInput` keep their hairline under it, or they would be invisible.
+ */
+export declare enum InputVariant {
+    TRANSPARENT = "TRANSPARENT",
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
+/**
+ * Surface fill for an `InputVariant`. The single source of truth — every input
+ * routes through this. Call it from inside a Linaria interpolation:
+ *
+ * ```
+ * background-color: ${({ theme, $variant }) => getInputSurfaceColor(theme, $variant)};
+ * ```
+ */
+export declare function getInputSurfaceColor(theme: Theme, variant?: InputVariant): string;
+/**
+ * Resting border for an `InputVariant`. Callers short-circuit their own error,
+ * focus and active colors before falling back to this.
+ *
+ * Returns `"transparent"` rather than `"none"` so the box model stays identical
+ * across variants.
+ */
+export declare function getInputBorderColor(theme: Theme, variant?: InputVariant): string;
 export declare const StyledInput: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
     $size: InputSize;
+    $variant?: InputVariant;
     $width?: number | string;
     $fillWidth?: boolean;
     $isError?: boolean;
@@ -28,13 +101,14 @@ export declare const StyledInput: import("react").ComponentType<Pick<import("rea
     $isMonospace?: boolean;
     $isDisabled?: boolean;
 } & {
-    theme: import("../theme").Theme;
+    theme: Theme;
 } & {
     as?: React.ElementType;
-}, "$width" | "$fillWidth" | "$size" | "$isMonospace" | "as" | "$isError" | "$hasLeadingIcon" | "$hasTrailingAction" | "$isDisabled" | keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}, "$width" | "$fillWidth" | "$size" | "$variant" | "$isMonospace" | "as" | "$isError" | "$hasLeadingIcon" | "$hasTrailingAction" | "$isDisabled" | keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<Theme> | undefined;
 }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
     $size: InputSize;
+    $variant?: InputVariant;
     $width?: number | string;
     $fillWidth?: boolean;
     $isError?: boolean;
@@ -43,13 +117,14 @@ export declare const StyledInput: import("react").ComponentType<Pick<import("rea
     $isMonospace?: boolean;
     $isDisabled?: boolean;
 } & {
-    theme: import("../theme").Theme;
+    theme: Theme;
 } & {
     as?: React.ElementType;
 }> & {
     __wyw_meta: unknown;
 } & import("react").FunctionComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
     $size: InputSize;
+    $variant?: InputVariant;
     $width?: number | string;
     $fillWidth?: boolean;
     $isError?: boolean;
@@ -58,7 +133,7 @@ export declare const StyledInput: import("react").ComponentType<Pick<import("rea
     $isMonospace?: boolean;
     $isDisabled?: boolean;
 } & {
-    theme: import("../theme").Theme;
+    theme: Theme;
 } & {
     as?: React.ElementType;
 }>, {}>;
@@ -74,6 +149,8 @@ export interface InputProps<T> {
     parse: (value: T) => T;
     /** Called with the parsed value on every keystroke. */
     onChange: (value: T) => void;
+    /** Field surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** The underlying `<input type>`. Wrappers set it. */