@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/inputs/ToggleInput.d.ts

@@ -1,31 +1,129 @@
-import { InputSize, InputVariant } from "./Input";
-export interface ToggleInputProps {
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactElement, type ReactNode, type RefAttributes } from "react";
+/** Canonical rungs; ToggleInput supports all five. */
+export declare enum ToggleInputSize {
+    /** 20px track, 16px segments, caption text, 12px icons. */
+    X_SMALL = "X_SMALL",
+    /** 24px track, 20px segments, body_sm text, 12px icons. */
+    SMALL = "SMALL",
+    /** 32px track, 28px segments, body_md text, 14px icons. The default (1.x MEDIUM was 28px). */
+    MEDIUM = "MEDIUM",
+    /** 36px track, 32px segments, body_lg text, 14px icons. */
+    LARGE = "LARGE",
+    /** 40px track, 36px segments, body_lg text, 16px icons. */
+    X_LARGE = "X_LARGE"
+}
+/** Track fill (Constitution V-A surface set; the 1.x InputVariant members, unchanged). */
+export declare enum ToggleInputVariant {
+    /** `background.base`. */
+    BASE = "BASE",
+    /** `background.primary`. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary`. The default. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
+/** One segment. Give it a `label`, or an `icon` with an `ariaLabel` for an icon-only segment. */
+export type ToggleOption<TId extends string = string> = {
+    /** Identifies the option; `value` and `onChange` use it. Unique within `options`. */
+    id: TId;
+    /** Phosphor icon component (`TableIcon`, not `<TableIcon />`), before the label. */
+    icon?: PhosphorIcon;
+    /** Hint shown in a `Tooltip` on hover and focus. An icon-only segment shows its `ariaLabel` when this is unset; pass `""` for none. */
+    tooltip?: ReactNode;
+    /** This option cannot be chosen; arrows skip it. Pair it with `tooltip` to say why. */
+    isDisabled?: boolean;
+} & ({
+    /** Visible text. */
+    label: string;
+    /** Name override; must start with `label` (WCAG 2.5.3). */
+    ariaLabel?: string;
+} | {
+    /** No visible text: an icon-only segment. */
+    label?: undefined;
+    /** Phosphor icon component; required when there is no `label`. */
+    icon: PhosphorIcon;
+    /** Accessible name of the icon-only segment. */
+    ariaLabel: string;
+});
+export interface ToggleInputProps<TId extends string = string> extends AriaAttributes {
+    /** The segments, left to right. Two to five short options. */
+    options: ToggleOption<TId>[];
+    /** Controlled selection: the chosen option's `id`, or `null` for none. Pass it with `onChange`. An id that matches no option also selects nothing. */
+    value?: TId | null;
     /**
-     * Off-state track color. The on-state track is a state color and stays
-     * `icon.primary`. @default InputVariant.PRIMARY
+     * Initial selection while uncontrolled; `null` starts with nothing selected.
+     * @default the first enabled option's id
      */
-    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. */
+    defaultValue?: TId | null;
+    /** Called with the chosen option's `id` when the user picks a different segment (click, arrows, Home/End). Not called for the segment already selected. */
+    onChange?: (value: TId) => void;
+    /**
+     * Control rung: 20 / 24 / 32 / 36 / 40px tall.
+     * @default ToggleInputSize.MEDIUM
+     */
+    size?: ToggleInputSize;
+    /**
+     * Track fill, from the surface set. Ignored with `isGhost`.
+     * @default ToggleInputVariant.SECONDARY
+     */
+    variant?: ToggleInputVariant;
+    /**
+     * Ghost track: no fill and no hairline (1.x `TRANSPARENT`); the selected fill and the segment hover
+     * fills still show. For a toggle set into a toolbar. An error still draws the red hairline.
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the control, rendered through `Field`. For a description or a horizontal layout, wrap the control in `Field` instead. */
     label?: string;
-    /** Adds an info icon beside the label with this content on hover. */
-    labelTooltip?: string | React.ReactNode;
-    /** Controlled state. The switch holds none of its own. */
-    value: boolean;
-    onChange: (value: boolean) => void;
+    /** Message from the app, shown under the control through `Field`. It also turns the track border red and sets `aria-invalid`. */
+    error?: string;
+    /**
+     * Error border and `aria-invalid` without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * The whole control is disabled: no segment is focusable or selectable. Disable one option with `option.isDisabled`.
+     * @default false
+     */
     isDisabled?: boolean;
-    /** A number is px. Ignored when `fillWidth` is set. */
-    width?: number | string;
-    /** Stretch to the parent's width, pushing the switch to the right edge. */
+    /**
+     * Focusable and announced, but the selection cannot change. No hover change.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`) and `aria-required`. It does no validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Stretch to the parent's width and give every segment an equal share. Long labels truncate.
+     * @default false
+     */
     fillWidth?: boolean;
+    /** Accessible name of the group when there is no visible label (no `label` and no labelled wrapping `Field`). */
+    ariaLabel?: string;
+    /**
+     * DOM id of the radiogroup element. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the radiogroup element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when ToggleInput renders one, otherwise the track. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
 /**
- * An on/off switch. Fully controlled — you own `value`.
- *
- * Use it for settings that apply immediately. For something that only takes
- * effect on submit, a `CheckboxInput` reads more honestly.
+ * The public, generic call signature (`TId` inferred from `options`). Never called: it only types
+ * the default export. An arrow function rather than a type literal, so react-docgen-typescript
+ * reads the props for the Docs tab.
  */
-declare const ToggleInput: ({ variant, size, label, labelTooltip, value, onChange, isDisabled, width, fillWidth, }: ToggleInputProps) => import("react").JSX.Element;
+declare const TOGGLE_INPUT_SIGNATURE: <TId extends string = string>(_props: ToggleInputProps<TId> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+/** A segmented control; the value is the chosen option's id. */
+declare const ToggleInput: typeof TOGGLE_INPUT_SIGNATURE;
 export default ToggleInput;

package/dist/inputs/ToggleInput.js

@@ -1,128 +1,274 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import FlexWrapper, { AlignItems, JustifyContent } from "../containers/FlexWrapper.js";
-import { InputLabel, InputSize, InputVariant, getInputSurfaceColor } from "./Input.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { useOwnField } from "./internal/ownField.js";
 /* empty css                      */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { useCallback } from "react";
+import { forwardRef, useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#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")({
-	name: "ToggleWrapper",
-	class: "t1t8zlu",
-	propsAsIs: false,
-	vars: {
-		"t1t8zlu-0": [_exp()],
-		"t1t8zlu-1": [_exp2()]
-	}
-}));
-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-2": [_exp6()],
-		"t1br7yd-3": [_exp8()]
-	}
-}));
-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": [_exp9()],
-		"t1xwadc7-1": [_exp1()],
-		"t1xwadc7-2": [_exp10()],
-		"t1xwadc7-3": [_exp11()]
-	}
-}));
-var HiddenInput = /*#__PURE__*/ styled("input")({
-	name: "HiddenInput",
-	class: "h1smouvb",
-	propsAsIs: false
-});
 /**
-* An on/off switch. Fully controlled — you own `value`.
+* The segmented control: one choice among two to five short, mutually exclusive options shown
+* side by side (Table / Graph / JSON, Compact / Comfortable). It holds the chosen option's `id`
+* with `value` / `defaultValue` / `onChange(id)`, draws the options as segments in one track with
+* the selected one filled `background.tertiary` (a quick color fade, no slide), and supports text, icon +
+* text and icon-only segments (each icon-only segment shows its `ariaLabel` as a tooltip). To
+* assistive tech and the keyboard it is a radio group: one tab stop, arrows and Home / End move
+* the selection. It renders its own `label` and `error` through `Field`.
 *
-* Use it for settings that apply immediately. For something that only takes
-* effect on submit, a `CheckboxInput` reads more honestly.
+* Not an on/off setting (`SwitchInput`), not actions (`ButtonGroup`), not a long or dynamic list
+* (`SelectInput`), not a tabbed panel set (`Tabs`). Renamed from 1.x `SwitcherInput`
+* (Constitution XII.4): `items` → `options`, `selectedId` → `value`, per-item `onClick` → one
+* `onChange(id)`, `InputSize` / `InputVariant` → `ToggleInputSize` / `ToggleInputVariant`.
 */
-var ToggleInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, label, labelTooltip, value, onChange, isDisabled = false, width, fillWidth }) => {
-	const handleClick = useCallback(() => {
-		if (!isDisabled) onChange(!value);
-	}, [
-		isDisabled,
+/** Canonical rungs; ToggleInput supports all five. */
+var ToggleInputSize = /* @__PURE__ */ function(ToggleInputSize) {
+	/** 20px track, 16px segments, caption text, 12px icons. */
+	ToggleInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px track, 20px segments, body_sm text, 12px icons. */
+	ToggleInputSize["SMALL"] = "SMALL";
+	/** 32px track, 28px segments, body_md text, 14px icons. The default (1.x MEDIUM was 28px). */
+	ToggleInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px track, 32px segments, body_lg text, 14px icons. */
+	ToggleInputSize["LARGE"] = "LARGE";
+	/** 40px track, 36px segments, body_lg text, 16px icons. */
+	ToggleInputSize["X_LARGE"] = "X_LARGE";
+	return ToggleInputSize;
+}({});
+/** Track fill (Constitution V-A surface set; the 1.x InputVariant members, unchanged). */
+var ToggleInputVariant = /* @__PURE__ */ function(ToggleInputVariant) {
+	/** `background.base`. */
+	ToggleInputVariant["BASE"] = "BASE";
+	/** `background.primary`. */
+	ToggleInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary`. The default. */
+	ToggleInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary`. */
+	ToggleInputVariant["TERTIARY"] = "TERTIARY";
+	return ToggleInputVariant;
+}({});
+/** The radiogroup. With the 0.5px border and 1.5px padding, segments start 2px inside the outer edge. */
+var Track = /*#__PURE__*/ styled("div")({
+	name: "Track",
+	class: "gx-ToggleInput-Track-t1t8zlu",
+	propsAsIs: false
+});
+/** One option: a `button role="radio"`, content width (or an equal share under `fillWidth`). */
+var Segment = /*#__PURE__*/ styled("button")({
+	name: "Segment",
+	class: "gx-ToggleInput-Segment-s1br7yd",
+	propsAsIs: false
+});
+/** Track rest look per surface (Input's rest table, restated). */
+var TOGGLE_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-ToggleInput-BASE-b1xwadc7",
+	["PRIMARY"]: "gx-ToggleInput-PRIMARY-p1smouvb",
+	["SECONDARY"]: "gx-ToggleInput-SECONDARY-s169kxy0",
+	["TERTIARY"]: "gx-ToggleInput-TERTIARY-t1cbak55"
+};
+/** `isGhost`: no track fill and no hairline. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-ToggleInput-GHOST_CSS-gl8s2yr";
+/** Height, segment padding and icon-label gap per rung. Padding = the rung's control padding − the 2px track inset. */
+var TOGGLE_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-ToggleInput-X_SMALL-xgugjmx",
+	["SMALL"]: "gx-ToggleInput-SMALL-szayufa",
+	["MEDIUM"]: "gx-ToggleInput-MEDIUM-m1ky6cjz",
+	["LARGE"]: "gx-ToggleInput-LARGE-l13egyp4",
+	["X_LARGE"]: "gx-ToggleInput-X_LARGE-x1yty5bv"
+};
+/** Red hairline on every variant, from `error`, `isError` or the Field's error. */
+var ERROR_CSS = "gx-ToggleInput-ERROR_CSS-e6je9tz";
+/** Group disabled: the selected segment takes the disabled fill; the track keeps its resting hairline (field-frame note). */
+var DISABLED_CSS = "gx-ToggleInput-DISABLED_CSS-d8pd3s2";
+/** Equal shares: the track fills its parent and every segment (icon-only too) takes `1 1 0`. */
+var FILL_WIDTH_CSS = "gx-ToggleInput-FILL_WIDTH_CSS-fc2kmgg";
+/** The selected segment's text. */
+var SEGMENT_SELECTED_CSS = "gx-ToggleInput-SEGMENT_SELECTED_CSS-s1d7otlt";
+/** The selected segment's fill and hairline; it fades in with the segment's color transition. */
+var SEGMENT_SELECTED_FILL_CSS = "gx-ToggleInput-SEGMENT_SELECTED_FILL_CSS-s1wijxdi";
+/** Hover and press on an unselected, enabled segment of an editable group: the neutral ramp. */
+var SEGMENT_INTERACTIVE_CSS = "gx-ToggleInput-SEGMENT_INTERACTIVE_CSS-s169tnuo";
+/** A disabled option, or every segment of a disabled group. */
+var SEGMENT_DISABLED_CSS = "gx-ToggleInput-SEGMENT_DISABLED_CSS-svloi0q";
+/** A read-only group: no hover, no pointer. */
+var SEGMENT_READ_ONLY_CSS = "gx-ToggleInput-SEGMENT_READ_ONLY_CSS-scgck5z";
+/** No label: a square segment with the icon centered (an equal share under `fillWidth`). */
+var SEGMENT_ICON_ONLY_CSS = "gx-ToggleInput-SEGMENT_ICON_ONLY_CSS-snqdq0p";
+/** The Field ToggleInput renders for its own `label` / `error` uses the same rung. */
+var TOGGLE_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** Segment label step per rung (the canonical control text). */
+var TOGGLE_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** Segment icon px per rung: one step below the rung's III-A.4 icon (Mitch, 2026-10-04). */
+var TOGGLE_INPUT_SIZE_TO_ICON_PX_MAP = {
+	["X_SMALL"]: 12,
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14,
+	["X_LARGE"]: 16
+};
+/** The radiogroup and its segments, wired to the nearest Field (its own or the app's). */
+function TrackBody({ trackProps, forwardedRef, isRoot }) {
+	const { options, value, defaultValue, onChange, size = "MEDIUM", variant = "SECONDARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = trackProps;
+	const { field, controlId: trackId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const firstEnabledId = options.find((option) => option.isDisabled !== true)?.id ?? null;
+	const handleChange = useCallback((next) => {
+		if (next !== null) onChange?.(next);
+	}, [onChange]);
+	const [selected, setSelected] = useControlledState({
 		value,
-		onChange
-	]);
-	const handleKeyDown = useCallback((e) => {
-		if (!isDisabled && (e.key === "Enter" || e.key === " ")) {
-			e.preventDefault();
-			onChange(!value);
+		defaultValue: defaultValue === void 0 ? firstEnabledId : defaultValue,
+		onChange: handleChange
+	});
+	const selectedIndex = options.findIndex((option) => option.id === selected);
+	const isOptionEnabled = (index) => !isDisabled && options[index] !== void 0 && options[index].isDisabled !== true;
+	const enabledIndexes = options.flatMap((_, index) => isOptionEnabled(index) ? [index] : []);
+	const tabStopIndex = selectedIndex >= 0 && isOptionEnabled(selectedIndex) ? selectedIndex : enabledIndexes[0] ?? -1;
+	useDevWarning(!hasName, "[@galaxy-io/dls] ToggleInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	const segmentRefs = useRef(/* @__PURE__ */ new Map());
+	const select = (index) => {
+		const option = options[index];
+		if (option === void 0 || !isOptionEnabled(index) || isReadOnly) return;
+		if (option.id !== selected) setSelected(option.id);
+	};
+	/** Roving focus: arrows wrap over enabled segments, Home / End jump; the move selects unless read-only. */
+	const handleKeyDown = (event, index) => {
+		if (enabledIndexes.length === 0) return;
+		const position = enabledIndexes.indexOf(index);
+		let target;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				target = position === -1 ? enabledIndexes.find((candidate) => candidate > index) ?? enabledIndexes[0] : enabledIndexes[(position + 1) % enabledIndexes.length];
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				target = position === -1 ? [...enabledIndexes].reverse().find((candidate) => candidate < index) ?? enabledIndexes[enabledIndexes.length - 1] : enabledIndexes[(position - 1 + enabledIndexes.length) % enabledIndexes.length];
+				break;
+			case "Home":
+				target = enabledIndexes[0];
+				break;
+			case "End":
+				target = enabledIndexes[enabledIndexes.length - 1];
+				break;
+			default: return;
 		}
-	}, [
-		isDisabled,
-		value,
-		onChange
-	]);
-	return /* @__PURE__ */ jsxs(FlexWrapper, {
-		width,
-		fillWidth,
-		alignItems: AlignItems.CENTER,
-		justifyContent: fillWidth ? JustifyContent.SPACE_BETWEEN : JustifyContent.START,
-		gap: fillWidth ? 0 : 6,
-		children: [label && /* @__PURE__ */ jsx(InputLabel, {
-			label,
-			labelTooltip
-		}), /* @__PURE__ */ jsxs(ToggleWrapper, {
-			$isDisabled: isDisabled,
-			onClick: handleClick,
-			onKeyDown: handleKeyDown,
-			role: "switch",
-			"aria-checked": value,
-			"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
-				})
-			}), /* @__PURE__ */ jsx(HiddenInput, {
-				type: "checkbox",
-				checked: value,
-				onChange: () => {},
+		event.preventDefault();
+		const option = target === void 0 ? void 0 : options[target];
+		if (target === void 0 || option === void 0) return;
+		segmentRefs.current.get(option.id)?.focus();
+		select(target);
+	};
+	return /* @__PURE__ */ jsx(Track, {
+		ref: forwardedRef,
+		role: "radiogroup",
+		id: trackId,
+		"aria-labelledby": field?.labelId,
+		"aria-label": ariaLabel,
+		"aria-describedby": describedBy,
+		"aria-invalid": isInvalid ? true : void 0,
+		"aria-required": isRequiredState ? true : void 0,
+		"aria-disabled": isDisabled ? true : void 0,
+		"aria-readonly": isReadOnly ? true : void 0,
+		...rest,
+		className: cx(TOGGLE_INPUT_SIZE_TO_CSS_MAP[size], isGhost ? GHOST_CSS : TOGGLE_INPUT_VARIANT_TO_CSS_MAP[variant], isInvalid && ERROR_CSS, isDisabled && DISABLED_CSS, fillWidth && FILL_WIDTH_CSS, isRoot && className),
+		style: isRoot ? style : void 0,
+		children: options.map((option, index) => {
+			const isSelected = index === selectedIndex;
+			const isEnabled = isOptionEnabled(index);
+			const isIconOnly = option.label === void 0;
+			const segment = /* @__PURE__ */ jsxs(Segment, {
+				ref: (element) => {
+					if (element === null) segmentRefs.current.delete(option.id);
+					else segmentRefs.current.set(option.id, element);
+				},
+				type: "button",
+				role: "radio",
+				"aria-checked": isSelected,
+				"aria-label": option.ariaLabel,
+				"aria-disabled": !isDisabled && option.isDisabled === true ? true : void 0,
 				disabled: isDisabled,
-				"aria-label": label || "Toggle"
-			})]
-		})]
+				tabIndex: index === tabStopIndex ? 0 : -1,
+				onClick: () => select(index),
+				onKeyDown: (event) => handleKeyDown(event, index),
+				className: cx(isSelected && SEGMENT_SELECTED_CSS, isSelected && SEGMENT_SELECTED_FILL_CSS, !isSelected && isEnabled && !isReadOnly && SEGMENT_INTERACTIVE_CSS, !isEnabled && SEGMENT_DISABLED_CSS, isEnabled && isReadOnly && SEGMENT_READ_ONLY_CSS, isIconOnly && SEGMENT_ICON_ONLY_CSS),
+				children: [option.icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+					component: option.icon,
+					size: TOGGLE_INPUT_SIZE_TO_ICON_PX_MAP[size],
+					variant: IconVariant.INHERIT
+				}), option.label !== void 0 && /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: TOGGLE_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+					weight: TextWeight.MEDIUM,
+					variant: TextVariant.INHERIT,
+					lineClamp: 1,
+					children: option.label
+				})]
+			}, option.id);
+			if (option.tooltip === void 0 && !isIconOnly) return segment;
+			return /* @__PURE__ */ jsx(Tooltip, {
+				body: option.tooltip ?? (isIconOnly ? option.ariaLabel : ""),
+				children: segment
+			}, option.id);
+		})
 	});
-};
+}
+/** A segmented control; the value is the chosen option's id. */
+var ToggleInputBase = forwardRef(function ToggleInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "ToggleInput",
+		label,
+		error,
+		isRequired,
+		size: TOGGLE_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		fillWidth
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(TrackBody, {
+			trackProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(TrackBody, {
+		trackProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+ToggleInputBase.displayName = "ToggleInput";
+/** A segmented control; the value is the chosen option's id. */
+var ToggleInput = ToggleInputBase;
 //#endregion
-export { ToggleInput as default };
+export { ToggleInputSize, ToggleInputVariant, ToggleInput as default };

package/dist/inputs/internal/bareField.d.ts

@@ -0,0 +1,18 @@
+/** @internal `true` inside a host that renders its editors bare. */
+export declare const BareFieldContext: import("react").Context<boolean>;
+/** @internal Whether the field renders bare. */
+export declare function useIsBareField(): boolean;
+/**
+ * @internal A bare field frame (Input's frame, SelectInput's and DateInput's trigger): no border,
+ * fill, focus line or start padding in any state. Tripled class so it beats every state rule of
+ * the frame (error, focus, hover, open) whatever their order.
+ */
+export declare const BARE_FIELD_CSS: import("@linaria/core").LinariaClassName;
+/**
+ * @internal Input's bare frame on top of `BARE_FIELD_CSS`: no end padding either (its clear button
+ * and slots are in the flow), and the value takes the host's `text-align`, so a right-aligned
+ * number cell edits right-aligned.
+ */
+export declare const BARE_INPUT_CSS: import("@linaria/core").LinariaClassName;
+/** @internal A bare switch track: no focus ring (the host's outline shows focus). */
+export declare const BARE_SWITCH_TRACK_CSS: import("@linaria/core").LinariaClassName;

package/dist/inputs/internal/bareField.js

@@ -0,0 +1,38 @@
+/* empty css                    */
+import { createContext, useContext } from "react";
+//#region src/inputs/internal/bareField.ts
+/**
+* @internal The bare field look, for an editor that replaces a piece of read-only text in place
+* (InfiniteSpreadsheet's cell editor). Under `BareFieldContext` set to `true`, TextInput,
+* NumberInput (through Input), SelectInput, DateInput and SwitchInput draw no frame: no border, no
+* fill, no hover, no focus line or ring, and no start padding, so the value's text sits exactly
+* where the read-only text was and the host's own outline is the only focus cue. The caret, the
+* clear button and the panels are unchanged.
+*
+* Private on purpose (an `internal/` module: built, never a package export): it is a host's
+* decision (the host draws the focus cue and owns the padding), not a look an app picks per field;
+* `isGhost` is the public no-fill field. A field that opens a
+* panel resets the context to `false` inside it, so the panel's own fields keep their frames.
+*/
+/** @internal `true` inside a host that renders its editors bare. */
+var BareFieldContext = createContext(false);
+/** @internal Whether the field renders bare. */
+function useIsBareField() {
+	return useContext(BareFieldContext);
+}
+/**
+* @internal A bare field frame (Input's frame, SelectInput's and DateInput's trigger): no border,
+* fill, focus line or start padding in any state. Tripled class so it beats every state rule of
+* the frame (error, focus, hover, open) whatever their order.
+*/
+var BARE_FIELD_CSS = "gx-bareField-BARE_FIELD_CSS-b1memido";
+/**
+* @internal Input's bare frame on top of `BARE_FIELD_CSS`: no end padding either (its clear button
+* and slots are in the flow), and the value takes the host's `text-align`, so a right-aligned
+* number cell edits right-aligned.
+*/
+var BARE_INPUT_CSS = "gx-bareField-BARE_INPUT_CSS-bq8fkxg";
+/** @internal A bare switch track: no focus ring (the host's outline shows focus). */
+var BARE_SWITCH_TRACK_CSS = "gx-bareField-BARE_SWITCH_TRACK_CSS-b1rpy78w";
+//#endregion
+export { BARE_FIELD_CSS, BARE_INPUT_CSS, BARE_SWITCH_TRACK_CSS, BareFieldContext, useIsBareField };

package/dist/inputs/internal/devWarn.d.ts

@@ -0,0 +1,7 @@
+/** @internal True outside production builds (read through `process.env.NODE_ENV`). */
+export declare function isDevelopment(): boolean;
+/**
+ * @internal Logs `message` with `console.warn` the first time `condition` is true, in development
+ * only, at most once per mounted component. Runs after render, like the warnings it replaces.
+ */
+export declare function useDevWarning(condition: boolean, message: string): void;

package/dist/inputs/internal/devWarn.js

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+//#region src/inputs/internal/devWarn.ts
+/**
+* @internal Development-only warnings for the inputs: the environment check and a hook that warns
+* once per mounted component while a condition holds (a control with no accessible name, a `label`
+* ignored inside an app's `Field`). Production builds (`NODE_ENV === "production"`) never warn.
+* Private on purpose (an `internal/` module: built, never a package export).
+*/
+/** @internal True outside production builds (read through `process.env.NODE_ENV`). */
+function isDevelopment() {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return false;
+	}
+}
+/**
+* @internal Logs `message` with `console.warn` the first time `condition` is true, in development
+* only, at most once per mounted component. Runs after render, like the warnings it replaces.
+*/
+function useDevWarning(condition, message) {
+	const hasWarnedRef = useRef(false);
+	useEffect(() => {
+		if (!condition || hasWarnedRef.current || !isDevelopment()) return;
+		hasWarnedRef.current = true;
+		console.warn(message);
+	}, [condition, message]);
+}
+//#endregion
+export { isDevelopment, useDevWarning };