@salilvnair/dui 1.0.7 → 1.0.8

package/dist/lib/components/input/MentionInputView.d.ts

@@ -5,6 +5,15 @@ export interface MentionUser {
     label: string;
 }
 export interface MentionInputViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: string;
     onChange: (value: string) => void;
     users: MentionUser[];
@@ -18,4 +27,4 @@ export interface MentionInputViewProps {
     style?: CSSProperties;
 }
 /** @mention autocomplete textarea. */
-export declare function MentionInputView({ value, onChange, users, placeholder, rows, disabled, size, borderRadius, color, className, style, }: MentionInputViewProps): import("react").JSX.Element;
+export declare function MentionInputView({ testId, value, onChange, users, placeholder, rows, disabled, size, borderRadius, color, className, style, }: MentionInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/MergedInputView.d.ts

@@ -33,6 +33,15 @@ export type MergedInputSegment = {
     width?: number;
 };
 export interface MergedInputViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     segments: MergedInputSegment[];
     /** Falls back to DuiProvider size when omitted. */
     size?: DuiSize;
@@ -41,4 +50,4 @@ export interface MergedInputViewProps {
     className?: string;
 }
 export declare function MergeDivider(): import("react").JSX.Element;
-export declare function MergedInputView({ segments, size, accentColor, disabled, className, }: MergedInputViewProps): import("react").JSX.Element;
+export declare function MergedInputView({ testId, segments, size, accentColor, disabled, className, }: MergedInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/NpsSurveyView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface NpsSurveyViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     question?: string;
     score: number | null;
     onScoreChange: (score: number) => void;
@@ -13,4 +22,4 @@ export interface NpsSurveyViewProps {
     style?: CSSProperties;
 }
 /** 0-10 Net Promoter Score picker with an optional follow-up text field. */
-export declare function NpsSurveyView({ question, score, onScoreChange, followUp, onFollowUpChange, onSubmit, size, color, className, style, }: NpsSurveyViewProps): import("react").JSX.Element;
+export declare function NpsSurveyView({ testId, question, score, onScoreChange, followUp, onFollowUpChange, onSubmit, size, color, className, style, }: NpsSurveyViewProps): import("react").JSX.Element;

package/dist/lib/components/input/OtpInputView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize, DuiRadius } from '../../core/DuiTypes';
 export interface OtpInputViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: string;
     onChange: (value: string) => void;
     onComplete?: (value: string) => void;
@@ -14,4 +23,4 @@ export interface OtpInputViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function OtpInputView({ value, onChange, onComplete, length, numeric, disabled, size, borderRadius, color, className, style, }: OtpInputViewProps): import("react").JSX.Element;
+export declare function OtpInputView({ testId, value, onChange, onComplete, length, numeric, disabled, size, borderRadius, color, className, style, }: OtpInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/PhoneInputView.d.ts

@@ -8,6 +8,15 @@ export interface PhoneCountry {
 }
 export declare const DEFAULT_PHONE_COUNTRIES: PhoneCountry[];
 export interface PhoneInputViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     countryCode: string;
     onCountryChange: (code: string) => void;
     number: string;
@@ -22,4 +31,4 @@ export interface PhoneInputViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function PhoneInputView({ countryCode, onCountryChange, number, onNumberChange, countries, placeholder, disabled, size, width, borderRadius, color, className, style, }: PhoneInputViewProps): import("react").JSX.Element;
+export declare function PhoneInputView({ testId, countryCode, onCountryChange, number, onNumberChange, countries, placeholder, disabled, size, width, borderRadius, color, className, style, }: PhoneInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/PickerView.d.ts

@@ -14,6 +14,15 @@ export interface PickerColumn {
     flex?: number;
 }
 export interface PickerViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     /** Single-column mode — mutually exclusive with `columns`. */
     options?: PickerOption[];
     value?: string;
@@ -35,4 +44,4 @@ export interface PickerViewProps {
  * Scrollable wheel picker. Single column via `options`/`value`/`onChange`,
  * or multiple synchronized wheels (hour/min/meridiem-style) via `columns`.
  */
-export declare function PickerView({ options, value, onChange, columns, size, visibleRows, width, borderRadius, color, disabled, className, style, }: PickerViewProps): import("react").JSX.Element;
+export declare function PickerView({ testId, options, value, onChange, columns, size, visibleRows, width, borderRadius, color, disabled, className, style, }: PickerViewProps): import("react").JSX.Element;

package/dist/lib/components/input/PriorityPickerView.d.ts

@@ -2,6 +2,15 @@ import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export type PriorityLevel = 'low' | 'medium' | 'high' | 'urgent';
 export interface PriorityPickerViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: PriorityLevel;
     onChange: (value: PriorityLevel) => void;
     size?: DuiSize;
@@ -10,4 +19,4 @@ export interface PriorityPickerViewProps {
     style?: CSSProperties;
 }
 /** Low/medium/high/urgent selector with color-coded dots — a color-coded priority picker. */
-export declare function PriorityPickerView({ value, onChange, size, disabled, className, style, }: PriorityPickerViewProps): import("react").JSX.Element;
+export declare function PriorityPickerView({ testId, value, onChange, size, disabled, className, style, }: PriorityPickerViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RadioCardView.d.ts

@@ -8,6 +8,15 @@ export interface RadioCardOption {
     disabled?: boolean;
 }
 export interface RadioCardViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     options: RadioCardOption[];
     value: string;
     onChange: (value: string) => void;
@@ -19,4 +28,4 @@ export interface RadioCardViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function RadioCardView({ options, value, onChange, size, borderRadius, accentColor, columns, className, style, }: RadioCardViewProps): import("react").JSX.Element;
+export declare function RadioCardView({ testId, options, value, onChange, size, borderRadius, accentColor, columns, className, style, }: RadioCardViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RadioGroupView.d.ts

@@ -7,6 +7,15 @@ export interface RadioOption {
     disabled?: boolean;
 }
 export interface RadioGroupViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     options: RadioOption[];
     value: string;
     onChange: (value: string) => void;
@@ -18,4 +27,4 @@ export interface RadioGroupViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function RadioGroupView({ options, value, onChange, size, accentColor, disabled, direction, className, style, }: RadioGroupViewProps): import("react").JSX.Element;
+export declare function RadioGroupView({ testId, options, value, onChange, size, accentColor, disabled, direction, className, style, }: RadioGroupViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RangeSliderView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface RangeSliderViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: [number, number];
     onChange: (value: [number, number]) => void;
     min?: number;
@@ -15,4 +24,4 @@ export interface RangeSliderViewProps {
     style?: CSSProperties;
 }
 /** Dual-handle min/max range slider — distinct from the single-handle `SliderView`. */
-export declare function RangeSliderView({ value, onChange, min, max, step, disabled, size, accentColor, width, showValue, className, style, }: RangeSliderViewProps): import("react").JSX.Element;
+export declare function RangeSliderView({ testId, value, onChange, min, max, step, disabled, size, accentColor, width, showValue, className, style, }: RangeSliderViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RatingView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface RatingViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: number;
     onChange?: (value: number) => void;
     max?: number;
@@ -13,4 +22,4 @@ export interface RatingViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function RatingView({ value, onChange, max, allowHalf, readOnly, size, color, icon, className, style, }: RatingViewProps): import("react").JSX.Element;
+export declare function RatingView({ testId, value, onChange, max, allowHalf, readOnly, size, color, icon, className, style, }: RatingViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RichTextToolbarView.d.ts

@@ -2,6 +2,15 @@ import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export type RichTextAction = 'bold' | 'italic' | 'underline' | 'link' | 'list' | 'code';
 export interface RichTextToolbarViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     active?: RichTextAction[];
     onAction: (action: RichTextAction) => void;
     size?: DuiSize;
@@ -10,4 +19,4 @@ export interface RichTextToolbarViewProps {
     style?: CSSProperties;
 }
 /** Formatting toolbar primitive — bold/italic/underline/link/list/code. */
-export declare function RichTextToolbarView({ active, onAction, size, color, className, style, }: RichTextToolbarViewProps): import("react").JSX.Element;
+export declare function RichTextToolbarView({ testId, active, onAction, size, color, className, style, }: RichTextToolbarViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RoleSelectView.d.ts

@@ -6,6 +6,15 @@ export interface RoleOption {
     description?: string;
 }
 export interface RoleSelectViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     options: RoleOption[];
     value: string;
     onChange: (value: string) => void;
@@ -18,4 +27,4 @@ export interface RoleSelectViewProps {
     style?: CSSProperties;
 }
 /** Role dropdown with a per-option description shown beneath the label. */
-export declare function RoleSelectView({ options, value, onChange, disabled, size, width, borderRadius, color, className, style, }: RoleSelectViewProps): import("react").JSX.Element;
+export declare function RoleSelectView({ testId, options, value, onChange, disabled, size, width, borderRadius, color, className, style, }: RoleSelectViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SearchFieldView.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface SearchFieldViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
+    value: string;
+    onChange: (value: string) => void;
+    /** Enter, and the icon's tooltip. Omit for a box that only holds a term. */
+    onSearch?: (value: string) => void;
+    /**
+     * Clearing, when it means more than emptying the box.
+     *
+     * Defaults to `onChange('')`. Pass this where the results have to go too —
+     * a cleared query beside a full result list is a screen describing a search
+     * nobody can see the terms of.
+     */
+    onClear?: () => void;
+    placeholder?: string;
+    size?: DuiSize;
+    width?: string | number;
+    accentColor?: string;
+    /** Sits between the text and the clear button — a count, a spinner. */
+    trailing?: ReactNode;
+    autoFocus?: boolean;
+}
+export declare function SearchFieldView({ testId, value, onChange, onSearch, onClear, placeholder, size, width, accentColor, trailing, autoFocus, }: SearchFieldViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SegmentedControlView.d.ts

@@ -8,6 +8,15 @@ export interface SegmentedControlOption {
     disabled?: boolean;
 }
 export interface SegmentedControlViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     options: SegmentedControlOption[];
     value: string;
     onChange: (value: string) => void;
@@ -23,8 +32,18 @@ export interface SegmentedControlViewProps {
     borderRadius?: DuiRadius | number;
     /** Inactive label text color override. */
     color?: string;
+    /**
+     * How much room the control takes.
+     *
+     * `compact` is for a strip that sits in a dense toolbar beside a filename and
+     * a set of stats — a view switcher rather than a primary choice. It tightens
+     * every metric and, more importantly, recesses the track: a control that is
+     * carved INTO the toolbar reads as navigation, while one raised out of it
+     * competes with the buttons either side.
+     */
+    density?: 'comfortable' | 'compact';
     disabled?: boolean;
     className?: string;
     style?: React.CSSProperties;
 }
-export declare function SegmentedControlView({ options, value, onChange, size, variant, accentColor, fullWidth, width, borderRadius, color, disabled, className, style, }: SegmentedControlViewProps): import("react").JSX.Element;
+export declare function SegmentedControlView({ testId, options, value, onChange, size, variant, accentColor, fullWidth, width, borderRadius, color, density, disabled, className, style, }: SegmentedControlViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SelectInputView.d.ts

@@ -14,10 +14,41 @@ export interface SelectOption {
 /** Backward-compatible size alias — accepts all DuiSize values plus legacy "default" (maps to "md"). */
 export type SelectInputSize = DuiSize | 'default';
 export interface SelectInputViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     options: SelectOption[];
     value: string;
     onChange: (value: string) => void;
     size?: SelectInputSize;
+    /**
+     * A floor for the open menu's width, in px.
+     *
+     * The menu is otherwise as wide as the trigger and as wide as its widest
+     * option — right until the labels are short (`JSON`, `XML`) and the menu
+     * comes out narrower than the list it presents deserves.
+     */
+    menuMinWidth?: number;
+    /**
+     * Label size inside the open menu, in px.
+     *
+     * Defaults to the control's own. A menu of short words reads better a
+     * point larger than the trigger that summarises it.
+     */
+    menuFontSize?: number;
+    /**
+     * Horizontal padding inside the menu's rows, in px.
+     *
+     * Defaults to the control's own — this is for a menu that wants more room
+     * around its labels than its trigger does.
+     */
+    menuPaddingX?: number;
     /** true = size-derived radius (default), false = 0px */
     rounded?: boolean;
     placeholder?: string;
@@ -28,4 +59,4 @@ export interface SelectInputViewProps {
     width?: string | number;
     borderRadius?: DuiRadius | number;
 }
-export declare function SelectInputView({ options, value, onChange, size, rounded, placeholder, accentColor, disabled, className, style, width, borderRadius, }: SelectInputViewProps): import("react").JSX.Element;
+export declare function SelectInputView({ testId, options, value, onChange, size, menuMinWidth, menuPaddingX, menuFontSize, rounded, placeholder, accentColor, disabled, className, style, width, borderRadius, }: SelectInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SelectTextInputView.d.ts

@@ -11,6 +11,17 @@ export interface MockServerSuggestion {
     name: string;
 }
 export interface SelectTextInputViewProps {
+    /**
+     * A stable hook for tests and the demo recorder.
+     *
+     * Lands on the element somebody actually types into — which, for this
+     * component, is a `contenteditable` div whose placeholder is a decorative
+     * `<span>`. Playwright's `getByPlaceholder` therefore never finds it, and a
+     * recorder that assumed it would spent a whole take typing into nothing.
+     * Give it a `testId` and it can be addressed by contract instead of by
+     * guessing at dui's internals.
+     */
+    testId?: string;
     selectValue: string;
     selectOptions: SelectTextOption[];
     onSelectChange: (value: string) => void;
@@ -41,4 +52,4 @@ export interface SelectTextInputViewProps {
     fontStyle?: DuiFontStyle;
     className?: string;
 }
-export declare function SelectTextInputView({ selectValue, selectOptions, onSelectChange, inputValue, onInputChange, placeholder, size, disabled, accentColor, selectWidth, suggestions, mockServers, onMockServerSelect, onKeyDown, suggestionMinWidth, suggestionZIndex, width, borderRadius, color, fontStyle, className, }: SelectTextInputViewProps): import("react").JSX.Element;
+export declare function SelectTextInputView({ testId, selectValue, selectOptions, onSelectChange, inputValue, onInputChange, placeholder, size, disabled, accentColor, selectWidth, suggestions, mockServers, onMockServerSelect, onKeyDown, suggestionMinWidth, suggestionZIndex, width, borderRadius, color, fontStyle, className, }: SelectTextInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/ShortcutRecorderView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize, DuiRadius } from '../../core/DuiTypes';
 export interface ShortcutRecorderViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: string[];
     onChange: (keys: string[]) => void;
     placeholder?: string;
@@ -12,4 +21,4 @@ export interface ShortcutRecorderViewProps {
     style?: CSSProperties;
 }
 /** Captures a keybinding — click to start recording, press keys, click away or Enter to commit. */
-export declare function ShortcutRecorderView({ value, onChange, placeholder, disabled, size, borderRadius, color, className, style, }: ShortcutRecorderViewProps): import("react").JSX.Element;
+export declare function ShortcutRecorderView({ testId, value, onChange, placeholder, disabled, size, borderRadius, color, className, style, }: ShortcutRecorderViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SliderView.d.ts

@@ -1,5 +1,14 @@
 import { DuiSize } from '../../core/DuiTypes';
 export interface SliderViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: number;
     onChange: (value: number) => void;
     min?: number;
@@ -12,4 +21,4 @@ export interface SliderViewProps {
     width?: number | string;
     className?: string;
 }
-export declare function SliderView({ value, onChange, min, max, step, disabled, accentColor, showValue, width, className, }: SliderViewProps): import("react").JSX.Element;
+export declare function SliderView({ testId, value, onChange, min, max, step, disabled, accentColor, showValue, width, className, }: SliderViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SpectrumSliderView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface SpectrumSliderViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: number;
     min?: number;
     max?: number;
@@ -13,4 +22,4 @@ export interface SpectrumSliderViewProps {
     style?: CSSProperties;
 }
 /** The slider track is a live rendered gradient spectrum; the handle shows a magnified live-color preview bubble while dragging. */
-export declare function SpectrumSliderView({ value, min, max, onChange, gradient, width, size, className, style, }: SpectrumSliderViewProps): import("react").JSX.Element;
+export declare function SpectrumSliderView({ testId, value, min, max, onChange, gradient, width, size, className, style, }: SpectrumSliderViewProps): import("react").JSX.Element;

package/dist/lib/components/input/StepperInputView.d.ts

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize, DuiRadius } from '../../core/DuiTypes';
 export interface StepperInputViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     value: number;
     onChange: (value: number) => void;
     min?: number;
@@ -13,4 +22,4 @@ export interface StepperInputViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function StepperInputView({ value, onChange, min, max, step, disabled, size, borderRadius, color, className, style, }: StepperInputViewProps): import("react").JSX.Element;
+export declare function StepperInputView({ testId, value, onChange, min, max, step, disabled, size, borderRadius, color, className, style, }: StepperInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SwatchPickerView.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties } from 'react';
+export interface SwatchOption {
+    id: string;
+    /** Shown as the tooltip and the accessible name — never as visible text. */
+    label: string;
+    /** The one colour that stands for this option. */
+    color: string;
+}
+export interface SwatchPickerViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
+    options: SwatchOption[];
+    value: string;
+    onChange: (id: string) => void;
+    size?: number;
+    /**
+     * Draw each option's first letter inside its swatch.
+     *
+     * Colour alone is enough to CHOOSE by and not enough to NAME by: pointing
+     * someone at "the blue one" fails the moment two palettes are both blue, and
+     * a tooltip only helps a reader who already went looking. The initial makes
+     * the row sayable out loud without turning it back into a list of words.
+     *
+     * Needs room — below about 14px the letter is a smudge — so the swatch is
+     * given a floor when this is on.
+     */
+    initials?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function SwatchPickerView({ testId, options, value, onChange, size, initials, className, style, }: SwatchPickerViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SwitchGroupView.d.ts

@@ -8,6 +8,15 @@ export interface SwitchGroupItem {
     disabled?: boolean;
 }
 export interface SwitchGroupViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     title?: string;
     items: SwitchGroupItem[];
     /** Set of currently-enabled item values. */
@@ -18,4 +27,4 @@ export interface SwitchGroupViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function SwitchGroupView({ title, items, checked, onChange, size, color, className, style, }: SwitchGroupViewProps): import("react").JSX.Element;
+export declare function SwitchGroupView({ testId, title, items, checked, onChange, size, color, className, style, }: SwitchGroupViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TabView.d.ts

@@ -19,6 +19,15 @@ export interface TabItem {
 }
 export type TabVariant = 'pill' | 'underline' | 'chip' | 'picker';
 export interface TabViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     tabs: TabItem[];
     activeTab: string;
     onChange: (id: string) => void;
@@ -35,4 +44,4 @@ export interface TabViewProps {
     activeColor?: string;
     fontStyle?: DuiFontStyle;
 }
-export declare function TabView({ tabs, activeTab, onChange, size, variant, accentColor, className, width, borderRadius, color, activeColor, fontStyle, }: TabViewProps): import("react").JSX.Element;
+export declare function TabView({ testId, tabs, activeTab, onChange, size, variant, accentColor, className, width, borderRadius, color, activeColor, fontStyle, }: TabViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TagInputView.d.ts

@@ -1,4 +1,13 @@
 export interface TagInputViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     tags: string[];
     onChange: (tags: string[]) => void;
     placeholder?: string;
@@ -7,4 +16,4 @@ export interface TagInputViewProps {
     disabled?: boolean;
     className?: string;
 }
-export declare function TagInputView({ tags, onChange, placeholder, accentColor, maxTags, disabled, className, }: TagInputViewProps): import("react").JSX.Element;
+export declare function TagInputView({ testId, tags, onChange, placeholder, accentColor, maxTags, disabled, className, }: TagInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TextInputView.d.ts

@@ -28,6 +28,15 @@ export interface TextInputViewProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /** When true: no border, transparent bg, no focus ring — for embedding inside containers that supply their own chrome */
     naked?: boolean;
     width?: DuiWidth;
+    /**
+     * Styles for the inner `<input>`, where `style` reaches only the box.
+     *
+     * `style` is the container's — its border, height and width — so a caller
+     * setting `fontSize` there was styling the wrapper and watching the text
+     * ignore it. A title being renamed in place wants its own type size while
+     * keeping everything else this control brings.
+     */
+    inputStyle?: React.CSSProperties;
     borderRadius?: DuiRadius | number;
     /** Text color override */
     color?: string;