@galaxy-io/dls 1.4.10 → 1.4.12

package/dist/inputs/Input.d.ts

@@ -2,10 +2,17 @@ import { type Ref } from "react";
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 export interface InputLabelProps {
     label: string;
+    /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** Appends the red required asterisk. */
     isRequired?: boolean;
 }
+/**
+ * The label row every input renders above itself. Exported for building custom
+ * inputs that should match — the stock inputs render it from their own props.
+ */
 export declare const InputLabel: ({ label, labelTooltip, isRequired }: InputLabelProps) => import("react").JSX.Element;
+/** Field height — 24 / 28 / 32px, matching `ButtonSize` so they line up in a row. */
 export declare enum InputSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
@@ -55,39 +62,69 @@ export declare const StyledInput: import("react").ComponentType<Pick<import("rea
 } & {
     as?: React.ElementType;
 }>, {}>;
+/** What an `Input` can hold. Narrowed by each wrapper — `string`, `number`, … */
 export type InputValue = string | number | readonly string[] | undefined;
+/**
+ * The shared prop surface for every text-like input. The concrete wrappers
+ * (`TextInput`, `PasswordInput`, `NumberInput`, …) are `Omit`s of this, so their
+ * props are documented here.
+ */
 export interface InputProps<T> {
+    /** Coerces the raw string from the DOM into `T` before `onChange`. Wrappers set it. */
     parse: (value: T) => T;
+    /** Called with the parsed value on every keystroke. */
     onChange: (value: T) => void;
+    /** @default InputSize.MEDIUM */
     size?: InputSize;
+    /** The underlying `<input type>`. Wrappers set it. */
     type: HTMLInputElement["type"];
+    /** Controlled value. */
     value?: T;
     placeholder?: string;
+    /** Decorative icon inside the left edge. Give it `onClick` to make it a button. */
     leading?: {
         icon: PhosphorIcon;
         onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     };
+    /** Action button inside the right edge — clear, reveal, copy. */
     trailing?: {
         icon: PhosphorIcon;
         onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
         isDisabled?: boolean;
     };
+    /** Label rendered above the field. */
     label?: string;
+    /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** Message shown under the field; also switches the border to the error color. */
     error?: string;
+    /** Appends the red required asterisk to the label. */
     isRequired?: boolean;
     isDisabled?: boolean;
     autoFocus?: boolean;
+    /** Numeric bounds — only meaningful when `type` is "number". */
     min?: number;
     max?: number;
+    /** Stepper increment. Only meaningful when `type` is "number". */
     step?: number;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** A number is px. Ignored when `fillWidth` is set. */
     width?: number | string;
+    /** Stretch to the parent's width. */
     fillWidth?: boolean;
+    /** Render the value in the mono family — for IDs, keys, and code. */
     isMonospace?: boolean;
 }
+/**
+ * The generic text field every typed input wraps. Renders the label, the field,
+ * the leading/trailing affordances and the error line.
+ *
+ * Prefer a concrete wrapper — `TextInput`, `PasswordInput`, `NumberInput` — which
+ * pin `type` and `parse` for you. Use this directly only for a value type none of
+ * them cover.
+ */
 declare const Input: <T extends InputValue>(props: InputProps<T> & {
     ref?: Ref<HTMLInputElement>;
 }) => React.ReactElement;

package/dist/inputs/Input.js

@@ -13,6 +13,10 @@ import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { InfoIcon } from "@phosphor-icons/react";
 //#region src/inputs/Input.tsx
+/**
+* The label row every input renders above itself. Exported for building custom
+* inputs that should match — the stock inputs render it from their own props.
+*/
 var InputLabel = ({ label, labelTooltip, isRequired }) => {
 	return /* @__PURE__ */ jsxs(FlexWrapper, {
 		alignItems: AlignItems.CENTER,
@@ -38,6 +42,7 @@ var InputLabel = ({ label, labelTooltip, isRequired }) => {
 		]
 	});
 };
+/** Field height — 24 / 28 / 32px, matching `ButtonSize` so they line up in a row. */
 var InputSize = /* @__PURE__ */ function(InputSize) {
 	InputSize["SMALL"] = "SMALL";
 	InputSize["MEDIUM"] = "MEDIUM";
@@ -127,6 +132,14 @@ var INPUT_SIZE_TO_ICON_SIZE_MAP = {
 	["MEDIUM"]: 14,
 	["LARGE"]: 14
 };
+/**
+* The generic text field every typed input wraps. Renders the label, the field,
+* the leading/trailing affordances and the error line.
+*
+* Prefer a concrete wrapper — `TextInput`, `PasswordInput`, `NumberInput` — which
+* pin `type` and `parse` for you. Use this directly only for a value type none of
+* them cover.
+*/
 var Input = forwardRef(({ parse, onChange, size = "MEDIUM", type, value, label, labelTooltip, error, placeholder, leading, trailing, isRequired, isDisabled, autoFocus, min, max, step, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }, ref) => {
 	const handleChange = (e) => {
 		onChange(parse(e.target.value));

package/dist/inputs/MultiSelectInput.d.ts

@@ -6,34 +6,60 @@ import { SelectInputVariant, type SelectInputOption } from "./SelectInput";
 export interface PinnedOptions {
     id: string;
     label: string;
+    /** The `SelectInputOption.id`s this shortcut selects, all at once. */
     optionIds: string[];
 }
 export interface MultiSelectInputProps {
     label?: string;
+    /** Phosphor icon *component* on the trigger. */
     icon?: PhosphorIcon;
+    /** @default SelectInputVariant.PRIMARY */
     variant?: SelectInputVariant;
+    /** @default InputSize.MEDIUM */
     size?: InputSize;
+    /** Every choice. Order is preserved. */
     options: SelectInputOption[];
+    /** Controlled selection. Empty array shows the placeholder. */
     value: SelectInputOption[];
     placeholder?: string;
+    /** Trigger width. A number is px. */
     width?: number | string;
     fillWidth?: boolean;
+    /** Panel width. Defaults to matching the trigger. */
     dropdownWidth?: number | string;
+    /** Where the panel opens relative to the trigger. */
     dropdownPlacement?: DropdownPosition;
+    /** Called with the full next selection, not a delta. */
     onChange?: (value: SelectInputOption[]) => void;
     isDisabled?: boolean;
     isRequired?: boolean;
+    /** Controlled open state. Pair it with `onOpenChange`. */
     isOpen?: boolean;
+    /** Render `icon` after the label instead of before. */
     isIconTrailing?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
+    /** Adds a clear button to the trigger. */
     onReset?: () => void;
+    /** Shortcut rows that select several options at once. */
     pinnedOptions?: PinnedOptions[];
+    /** How many selections to name before collapsing to "+N more". */
     maxDisplayItems?: number;
+    /** Replace the trigger's summary string. */
     renderSelectedText?: (selectedOptions: SelectInputOption[], placeholder: string) => string;
+    /** Replace the trigger's summary entirely — chips, avatars, whatever. */
     renderSelectedContent?: (selectedOptions: SelectInputOption[], placeholder: string) => ReactNode;
+    /** Message under the field; also switches the border to the error color. */
     error?: string;
+    /** Supplying this turns the trigger into a search box. Return the filtered list. */
     onSearch?: (searchTerm: string, options: SelectInputOption[]) => SelectInputOption[];
+    /** Debounce before `onSearch` fires, in ms. @default 300 */
     debounceMs?: number;
 }
+/**
+ * Multi-choice dropdown. Same option shape and search contract as `SelectInput`,
+ * but the panel stays open across picks and the trigger summarizes what's chosen.
+ *
+ * Controlled: `onChange` hands back the complete next selection, not a delta.
+ */
 declare const MultiSelectInput: ({ label, icon, variant, size, options, value, placeholder, onChange, width, fillWidth, dropdownWidth, dropdownPlacement, isDisabled, isRequired, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions, maxDisplayItems, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs, }: MultiSelectInputProps) => import("react").JSX.Element;
 export default MultiSelectInput;

package/dist/inputs/MultiSelectInput.js

@@ -131,6 +131,12 @@ var SELECT_INPUT_VARIANT_TO_CHECKBOX_INPUT_VARIANT = {
 	[SelectInputVariant.SECONDARY]: CheckboxInputVariant.SECONDARY,
 	[SelectInputVariant.TERTIARY]: CheckboxInputVariant.PRIMARY
 };
+/**
+* Multi-choice dropdown. Same option shape and search contract as `SelectInput`,
+* but the panel stays open across picks and the trigger summarizes what's chosen.
+*
+* Controlled: `onChange` hands back the complete next selection, not a delta.
+*/
 var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, size = InputSize.MEDIUM, options, value, placeholder = "Select options...", onChange, width, fillWidth, dropdownWidth, dropdownPlacement = DropdownPosition.BOTTOM_START, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions = [], maxDisplayItems = 3, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs = 300 }) => {
 	const isSearchable = !!onSearch;
 	const [isHovered, setIsHovered] = useState(false);

package/dist/inputs/MultiTextInput.d.ts

@@ -1,27 +1,43 @@
+/** Field height. */
 export declare enum MultiTextInputSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
+/** Color of the chips created from entered values. */
 export declare enum MultiTextInputVariant {
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY"
 }
 export interface MultiTextInputProps {
+    /** Controlled list of entered values, one chip each. */
     value: string[];
+    /** Called with the full next list, not a delta. */
     onChange: (value: string[]) => void;
+    /** @default MultiTextInputVariant.PRIMARY */
     variant?: MultiTextInputVariant;
+    /** @default MultiTextInputSize.MEDIUM */
     size?: MultiTextInputSize;
     placeholder?: string;
     label?: string;
+    /** Message under the field; also switches the border to the error color. */
     error?: string;
     isRequired?: boolean;
     isDisabled?: boolean;
     autoFocus?: boolean;
+    /** A number is px. Ignored when `fillWidth` is set. */
     width?: number | string;
     fillWidth?: boolean;
+    /** Typing this character commits the draft as a chip. @default "," */
     separator?: string;
 }
+/**
+ * A free-text field that turns each entry into a removable chip — tags, emails,
+ * arbitrary lists. Commit with Enter or the `separator` character.
+ *
+ * The in-progress draft is internal state and is *not* part of `value`; it only
+ * lands there once committed.
+ */
 declare const MultiTextInput: import("react").ForwardRefExoticComponent<MultiTextInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default MultiTextInput;

package/dist/inputs/MultiTextInput.js

@@ -10,12 +10,14 @@ import { match } from "ts-pattern";
 import { forwardRef, useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inputs/MultiTextInput.tsx
+/** Field height. */
 var MultiTextInputSize = /* @__PURE__ */ function(MultiTextInputSize) {
 	MultiTextInputSize["SMALL"] = "SMALL";
 	MultiTextInputSize["MEDIUM"] = "MEDIUM";
 	MultiTextInputSize["LARGE"] = "LARGE";
 	return MultiTextInputSize;
 }({});
+/** Color of the chips created from entered values. */
 var MultiTextInputVariant = /* @__PURE__ */ function(MultiTextInputVariant) {
 	MultiTextInputVariant["PRIMARY"] = "PRIMARY";
 	MultiTextInputVariant["SECONDARY"] = "SECONDARY";
@@ -76,6 +78,13 @@ var StyledInput = withTheme(/*#__PURE__*/ styled("input")({
 		"s190irv4-5": [_exp12()]
 	}
 }));
+/**
+* A free-text field that turns each entry into a removable chip — tags, emails,
+* arbitrary lists. Commit with Enter or the `separator` character.
+*
+* The in-progress draft is internal state and is *not* part of `value`; it only
+* lands there once committed.
+*/
 var MultiTextInput = forwardRef(({ value, onChange, variant = "PRIMARY", size = "MEDIUM", placeholder, label, error, isRequired, isDisabled, autoFocus, width, fillWidth, separator = "," }, ref) => {
 	const [inputValue, setInputValue] = useState("");
 	const [isFocused, setIsFocused] = useState(false);

package/dist/inputs/NumberInput.d.ts

@@ -1,4 +1,10 @@
 import { type InputProps } from "./Input";
-type NumberInputProps = Omit<InputProps<number>, "type" | "parse">;
+/** Every `InputProps` field except `type` and `parse`, which are fixed to number. */
+export type NumberInputProps = Omit<InputProps<number>, "type" | "parse">;
+/**
+ * A numeric field. `min`/`max` are a real numeric range here (unlike `TextInput`,
+ * where they bound character count) and values outside it are clamped, not
+ * rejected — `onChange` only ever sees an in-range number.
+ */
 declare const NumberInput: ({ value, placeholder, label, size, leading, trailing, isRequired, isDisabled, min, max, step, onChange, width, fillWidth, }: NumberInputProps) => import("react").JSX.Element;
 export default NumberInput;

package/dist/inputs/NumberInput.js

@@ -2,6 +2,11 @@ import Input from "./Input.js";
 import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/inputs/NumberInput.tsx
+/**
+* A numeric field. `min`/`max` are a real numeric range here (unlike `TextInput`,
+* where they bound character count) and values outside it are clamped, not
+* rejected — `onChange` only ever sees an in-range number.
+*/
 var NumberInput = ({ value, placeholder, label, size, leading, trailing, isRequired, isDisabled, min, max, step, onChange, width, fillWidth }) => {
 	return /* @__PURE__ */ jsx(Input, {
 		type: "number",

package/dist/inputs/PasswordInput.d.ts

@@ -1,4 +1,12 @@
 import { type InputProps } from "./Input";
-type PasswordInputProps = Omit<InputProps<string>, "type" | "parse" | "action">;
+/**
+ * Every `InputProps` field except `type` and `parse`, which are fixed. The
+ * trailing slot is used by the reveal toggle, so passing `trailing` has no effect.
+ */
+export type PasswordInputProps = Omit<InputProps<string>, "type" | "parse" | "action">;
+/**
+ * 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.
+ */
 declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default PasswordInput;

package/dist/inputs/PasswordInput.js

@@ -4,6 +4,10 @@ import { jsx } from "react/jsx-runtime";
 import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 //#region src/inputs/PasswordInput.tsx
 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) => {
 	const [state, setState] = useState(DEFAULT_STATE);
 	return /* @__PURE__ */ jsx(Input, {

package/dist/inputs/RadioInput.d.ts

@@ -1,20 +1,33 @@
+/** 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"
 }
 export interface RadioInputProps {
+    /** @default RadioInputVariant.PRIMARY */
     variant?: RadioInputVariant;
+    /** @default RadioInputSize.MEDIUM */
     size?: RadioInputSize;
+    /** Controlled state. The radio holds none of its own. */
     isSelected: boolean;
+    /** Text beside the circle. */
     label?: string;
+    /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
     isRequired?: boolean;
     isDisabled?: boolean;
     onChange: (selected: boolean) => void;
 }
+/**
+ * A single radio button with an optional label. Fully controlled.
+ *
+ * There is no group component — render several and enforce single-selection in
+ * your own state.
+ */
 declare const RadioInput: ({ variant, size, isSelected, label, labelTooltip, isRequired, isDisabled, onChange, }: RadioInputProps) => import("react").JSX.Element;
 export default RadioInput;

package/dist/inputs/RadioInput.js

@@ -11,11 +11,13 @@ 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";
@@ -68,6 +70,12 @@ var RadioDot = withTheme(/*#__PURE__*/ styled("div")({
 		"r137y8ev-3": [_exp10()]
 	}
 }));
+/**
+* A single radio button with an optional label. Fully controlled.
+*
+* 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 }) => {
 	const handleClick = () => {
 		if (!isDisabled) onChange(!isSelected);

package/dist/inputs/SelectInput.d.ts

@@ -1,47 +1,77 @@
 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"
 }
+/** One choice in a select. */
 export interface SelectInputOption {
+    /** Stable identity — selection is matched on this, not on `value`. */
     id: string;
+    /** What the user reads. */
     label: string;
+    /** Your payload. Never inspected by the component. */
     value: unknown;
+    /** Leading graphic, rendered as-is. */
     icon?: React.ReactNode;
+    /** Color role for the label — for status-coded options. */
     variant?: TextVariant;
 }
+/** A shortcut row pinned above the option list. */
 export interface PinnedOption {
     id: string;
     label: string;
+    /** The `SelectInputOption.id` this shortcut selects. */
     optionId: string;
 }
 export interface SelectInputProps {
     label?: string;
+    /** @default SelectInputVariant.PRIMARY */
     variant?: SelectInputVariant;
+    /** @default InputSize.MEDIUM */
     size?: InputSize;
+    /** Every choice. Order is preserved. */
     options: SelectInputOption[];
+    /** Controlled selection. `null` shows the placeholder. */
     value?: SelectInputOption | null;
+    /** @default "Select an option..." */
     placeholder?: string;
+    /** Called with the whole option, not just its id. */
     onChange?: (value: SelectInputOption) => void;
+    /** Trigger width. A number is px. */
     width?: number | string;
     fillWidth?: boolean;
+    /** Panel width. Defaults to matching the trigger. */
     dropdownWidth?: number | string;
     isDisabled?: boolean;
     isRequired?: boolean;
+    /** Controlled open state. Pair it with `onOpenChange`. */
     isOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
+    /** Adds a clear button to the trigger. Omit and the selection can't be cleared. */
     onReset?: () => void;
+    /** Shortcut rows above the list — "All", "None", a recent choice. */
     pinnedOptions?: PinnedOption[];
+    /** Message under the field; also switches the border to the error color. */
     error?: string;
+    /** Supplying this turns the trigger into a search box. Return the filtered list. */
     onSearch?: (searchTerm: string, options: SelectInputOption[]) => SelectInputOption[];
+    /** 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>;
+/**
+ * Single-choice dropdown with keyboard navigation and optional search.
+ *
+ * Controlled: `value` is the selected option and `onChange` hands you the whole
+ * 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.
+ */
 declare const SelectInput: ({ label, variant, size, options, value, placeholder, onChange, width, fillWidth, dropdownWidth, isDisabled, isRequired, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions, error, onSearch, debounceMs, }: SelectInputProps) => import("react").JSX.Element;
 export default SelectInput;

package/dist/inputs/SelectInput.js

@@ -18,6 +18,7 @@ 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";
@@ -153,6 +154,13 @@ var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
 	[InputSize.MEDIUM]: TextSize.BODY_MD,
 	[InputSize.LARGE]: TextSize.BODY_MD
 };
+/**
+* Single-choice dropdown with keyboard navigation and optional search.
+*
+* Controlled: `value` is the selected option and `onChange` hands you the whole
+* 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 }) => {
 	const isSearchable = !!onSearch;
 	const [isHovered, setIsHovered] = useState(false);

package/dist/inputs/SliderInput.d.ts

@@ -1,16 +1,31 @@
 export interface SliderInputProps {
     label?: string;
+    /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** Controlled value. Clamped into `[min, max]`. */
     value: number;
+    /** Fires continuously while dragging, not just on release. */
     onChange: (value: number) => void;
+    /** Drag started — useful for pausing an expensive live preview. */
     onInteractionStart?: () => void;
+    /** Drag finished — commit the value here if `onChange` is too chatty. */
     onInteractionEnd?: () => void;
+    /** @default 0 */
     min?: number;
+    /** @default 100 */
     max?: number;
+    /** Increment the thumb snaps to. @default 1 */
     step?: number;
     isDisabled?: boolean;
+    /** A number is px. */
     width?: number | string;
     fillWidth?: boolean;
 }
+/**
+ * A drag-to-set numeric slider. Fully controlled.
+ *
+ * `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;
 export default SliderInput;

package/dist/inputs/SliderInput.js

@@ -58,6 +58,12 @@ var HiddenInput = /*#__PURE__*/ styled("input")({
 	class: "h1trli0w",
 	propsAsIs: false
 });
+/**
+* A drag-to-set numeric slider. Fully controlled.
+*
+* `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 }) => {
 	const [isDragging, setIsDragging] = useState(false);
 	const sliderRef = useRef(null);

package/dist/inputs/SwitcherInput.d.ts

@@ -1,13 +1,22 @@
 import { InputSize } from "./Input";
 export interface SwitcherInputItem {
+    /** Matched against `selectedId` to decide which segment is active. */
     id: string;
     label: string;
+    /** Called when this segment is clicked. Update `selectedId` yourself. */
     onClick: () => void;
 }
-interface SwitcherInputProps {
+export interface SwitcherInputProps {
+    /** @default InputSize.MEDIUM */
     size?: InputSize;
+    /** Segments, left to right. */
     items: SwitcherInputItem[];
+    /** The `id` of the active segment. Controlled — nothing moves until this changes. */
     selectedId: string;
 }
+/**
+ * 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;
 export default SwitcherInput;

package/dist/inputs/SwitcherInput.js

@@ -40,6 +40,10 @@ var StyledSwitcherInputItem = withTheme(/*#__PURE__*/ styled("div")({
 		"s1pe4aqp-2": [_exp7()]
 	}
 }));
+/**
+* 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 }) => {
 	return /* @__PURE__ */ jsx(StyledSwitcherInput, {
 		$size: size,

package/dist/inputs/TextAreaInput.d.ts

@@ -1,8 +1,10 @@
+/** 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",
@@ -11,30 +13,52 @@ export declare enum TextAreaVariant {
     TERTIARY = "TERTIARY"
 }
 export interface TextAreaInputProps {
+    /** Controlled value. */
     value?: string;
     onChange: (value: string) => void;
+    /** @default TextAreaVariant.PRIMARY */
     variant?: TextAreaVariant;
+    /** @default TextAreaSize.MEDIUM */
     size?: TextAreaSize;
+    /** Visible rows before scrolling. @default 3 */
     lines?: number;
     placeholder?: string;
     label?: string;
+    /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** Message under the field; also switches the border to the error color. */
     error?: string;
+    /** Appends the red required asterisk. Note: `required`, not `isRequired`. */
     required?: boolean;
+    /** Note: `disabled`, not `isDisabled` — this input predates the `is` convention. */
     disabled?: boolean;
     autoFocus?: boolean;
+    /** Character-count bounds, validated on blur. Not a numeric range. */
     min?: number;
     max?: number;
     onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /** A number is px. */
     width?: number | string;
+    /** A number is px. Overrides the height implied by `lines`. */
     height?: number | string;
     fillWidth?: boolean;
+    /** Grow to the parent's height. Pairs with a flex parent. */
     fillHeight?: boolean;
+    /** Drop the hairline border. */
     noBorder?: boolean;
+    /** Collapse the inset to 0. */
     noPadding?: boolean;
+    /** Swap the field for a shimmer placeholder. */
     isLoading?: boolean;
 }
+/**
+ * A multi-line text field. Not resizable by the user — size it with `lines`,
+ * `height`, or `fillHeight`.
+ *
+ * Note this one takes `required`/`disabled` rather than the `isRequired`/
+ * `isDisabled` the other inputs use.
+ */
 declare const TextAreaInput: import("react").ForwardRefExoticComponent<TextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaInput;