sdaia-ui 1.0.1

package/src/components/AudioPlayer/AudioPlayer.variants.ts

@@ -0,0 +1,225 @@
+/* ─────────────────────────────────────────────────────────────────
+   AudioPlayer.variants.ts
+   Class-name constants for the AudioPlayer component.
+   Derived from Figma node 6664:95003 (Audio Player frame).
+   No JSX / React imports — pure strings.
+──────────────────────────────────────────────────────────────────── */
+
+import type { AudioPlayerStyle } from './AudioPlayer.types';
+
+/* ── Container backgrounds ───────────────────────────────────────── */
+
+/**
+ * Outer shell per style — Figma exact values:
+ *
+ * transparent → Colors/Alpha/alpha-black-50 = rgba(22,22,22,0.5)  (dark pill, same as VideoPlayer controls)
+ * neutral     → Background/background-white = white + border-neutral-primary = #d2d6db
+ * brand       → Background/background-primary = rgba(27,131,84,1)  (green)
+ *
+ * dark-mode:
+ * transparent → stays dark (already dark bg — no override needed)
+ * neutral     → dark surface bg + dark border
+ * brand       → stays green
+ *
+ * radius: Radius/radius-8 = 8px  (no dedicated token)
+ */
+export const CONTAINER_BG: Record<AudioPlayerStyle, string> = {
+  transparent: 'bg-[rgba(22,22,22,0.5)]',
+  neutral:
+    'bg-white dark:bg-[rgba(17,24,39,1)] border border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)]',
+  brand: 'bg-[rgba(27,131,84,1)]',
+};
+
+/* ── Icon / button color per style ───────────────────────────────── */
+
+/**
+ * transparent → Text/text-oncolor-primary = white (#F3F4F6 in Figma assets)
+ * neutral     → dark icons (Text/text-primary-paragraph = #384250)
+ * brand       → white
+ *
+ * IMPORTANT: uses [color:...] arbitrary-property syntax (NOT text-[...]) so that
+ * tailwind-merge does NOT remove text-text-sm / text-text-md when these are merged
+ * via cn(). tailwind-merge v3 groups any `text-[...]` value together with font-size
+ * utilities like `text-text-sm`, causing them to conflict and be dropped.
+ */
+export const ICON_COLOR: Record<AudioPlayerStyle, string> = {
+  transparent: '[color:rgba(243,244,246,1)]',
+  neutral:     '[color:rgba(56,66,80,1)] dark:[color:rgba(243,244,246,1)]',
+  brand:       '[color:rgba(243,244,246,1)]',
+};
+
+/* ── Button hover / active ───────────────────────────────────────── */
+
+/** Matches VideoPlayer CTRL_BTN opacity convention. */
+export const BTN_HOVER = 'hover:opacity-70 active:opacity-50 transition-opacity';
+
+/* ── Focus ring per style ─────────────────────────────────────────── */
+
+export const FOCUS_RING: Record<AudioPlayerStyle, string> = {
+  transparent: 'focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2',
+  neutral:
+    'focus-visible:outline-2 focus-visible:outline-[rgba(56,66,80,1)] focus-visible:outline-offset-2 dark:focus-visible:outline-white',
+  brand: 'focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2',
+};
+
+/* ── Progress track (background stripe) per style ────────────────── */
+
+/**
+ * transparent → Background/background-neutral-100 = #f3f4f6
+ * neutral     → Background/background-neutral-200 = #e5e7eb
+ * brand       → Background/background-neutral-400 = #9da4ae
+ */
+export const TRACK_BG: Record<AudioPlayerStyle, string> = {
+  transparent: 'bg-[rgba(243,244,246,1)]',
+  neutral:     'bg-[rgba(229,231,235,1)] dark:bg-[rgba(75,85,99,1)]',
+  brand:       'bg-[rgba(157,164,174,1)]',
+};
+
+/* ── Progress fill per style ─────────────────────────────────────── */
+
+/**
+ * transparent → Background/background-primary = rgba(27,131,84,1)  green
+ * neutral     → Button/button-background-black-selected = #384250   dark charcoal (NOT green)
+ * brand       → Background/background-white = white
+ */
+export const FILL_BG: Record<AudioPlayerStyle, string> = {
+  transparent: 'bg-[rgba(27,131,84,1)]',
+  neutral:     'bg-[rgba(56,66,80,1)] dark:bg-[rgba(243,244,246,1)]',
+  brand:       'bg-white',
+};
+
+/* ── Time text color per style ───────────────────────────────────── */
+
+/**
+ * transparent → Text/text-oncolor-secondary = rgba(255,255,255,0.8)
+ * neutral     → Text/text-secondary-paragraph = #6c737f
+ * brand       → Text/text-oncolor-secondary = rgba(255,255,255,0.8)
+ */
+/* [color:...] avoids tailwind-merge conflict with text-text-sm — see ICON_COLOR note above */
+export const TIME_TEXT_COLOR: Record<AudioPlayerStyle, string> = {
+  transparent: '[color:rgba(255,255,255,0.8)]',
+  neutral:     '[color:rgba(108,115,127,1)] dark:[color:rgba(156,163,175,1)]',
+  brand:       '[color:rgba(255,255,255,0.8)]',
+};
+
+/* ── Audio name text color (detailed only) ────────────────────────── */
+
+/**
+ * transparent → Text/text-oncolor-primary = white
+ * neutral     → Text/text-primary-paragraph = #384250
+ * brand       → white
+ */
+/* [color:...] avoids tailwind-merge conflict with text-text-md — see ICON_COLOR note above */
+export const NAME_TEXT_COLOR: Record<AudioPlayerStyle, string> = {
+  transparent: '[color:white]',
+  neutral:     '[color:rgba(56,66,80,1)] dark:[color:rgba(243,244,246,1)]',
+  brand:       '[color:white]',
+};
+
+/* ── Shared class blocks ─────────────────────────────────────────── */
+
+/**
+ * Outer container — shared geometry.
+ * radius: 8px (no token) | px: spacing-lg=12px | py: spacing-md=8px
+ */
+export const CONTAINER_BASE =
+  'rounded-[8px] px-spacing-lg py-spacing-md';
+
+/**
+ * Compact variant — single row: controls + time + progress (flex-1)
+ * gap: spacing-lg = 12px between all direct children
+ */
+export const CONTAINER_COMPACT =
+  CONTAINER_BASE + ' flex items-center w-full gap-spacing-lg';
+
+/**
+ * Detailed variant — two rows stacked:
+ *   Row 1: play-group | time | audio-name(flex-1) | right-group
+ *   Row 2: full-width progress bar
+ * gap: spacing-xs = 4px between rows
+ */
+export const CONTAINER_DETAILED =
+  CONTAINER_BASE + ' flex flex-col items-start w-full gap-spacing-xs ';
+
+/**
+ * Controls row (detailed only).
+ * flex-wrap allows wrapping on narrow screens (Figma uses flex-wrap on the detailed row).
+ * gap: spacing-lg = 12px between groups/items.
+ */
+export const CONTROLS_ROW = 'flex flex-wrap items-center w-full gap-spacing-lg ';
+
+/**
+ * Left play-buttons group: skip-back | play-pause | skip-forward
+ * gap: spacing-md = 8px (Figma "Play Buttons" group)
+ */
+export const PLAY_BUTTONS_GROUP = 'flex items-center shrink-0 gap-spacing-md';
+
+/**
+ * Right buttons group: volume | settings
+ * gap: spacing-md = 8px (Figma "Play Buttons" group on right)
+ */
+export const RIGHT_BUTTONS_GROUP = 'flex items-center shrink-0 gap-spacing-md';
+
+/**
+ * Audio name (detailed variant, inline in controls row, flex-1).
+ * Figma: text-md / semibold / line-height-text-md
+ * flex-1 min-w-px fills remaining space between time and right buttons.
+ * truncate prevents overflow.
+ */
+export const AUDIO_NAME =
+  'flex-1 min-w-px truncate text-text-md font-[600] leading-[24px]';
+
+/**
+ * Base for all icon buttons.
+ * rounded-[2px] for focus ring shape.
+ * flex-shrink-0 prevents buttons from collapsing.
+ */
+export const CTRL_BTN =
+  'inline-flex items-center justify-center flex-shrink-0 cursor-pointer rounded-[2px]';
+
+/** Play/Pause button — 40×40px */
+export const PLAY_BTN_SIZE = 'size-icon-xxl';
+
+/** Skip back/forward + volume/settings — fixed 20×20px per Figma */
+export const ICON_BTN_SIZE = 'size-[20px]';
+
+/**
+ * Time display.
+ * text-text-sm = 14px | font-[400] | leading-[20px]
+ * tabular-nums: keeps digits steady width
+ * whitespace-nowrap: prevent wrapping
+ */
+export const TIME_TEXT =
+  'shrink-0 text-text-sm font-[400] leading-[20px] whitespace-nowrap tabular-nums';
+
+/* ── Progress bar ────────────────────────────────────────────────── */
+
+/**
+ * Compact: flex-1 min-w-px — fills remaining space inline.
+ * h-[12px] contains the 4px track centred vertically.
+ */
+export const PROGRESS_CONTAINER_COMPACT =
+  'relative flex-1 min-w-px h-[12px] flex items-center';
+
+/**
+ * Detailed: full-width on its own row, shrink-0 so it never collapses.
+ */
+export const PROGRESS_CONTAINER_DETAILED =
+  'relative w-full shrink-0 h-[12px] flex items-center';
+
+/**
+ * Track background stripe — centered vertically.
+ * h-[4px] | rounded-[2px] — Figma fixed values.
+ * -translate-y-1/2 top-1/2 centres the stripe in the 12px container.
+ */
+export const PROGRESS_TRACK =
+  'absolute inset-x-0 h-[4px] rounded-[2px] -translate-y-1/2 top-1/2';
+
+/**
+ * Filled portion — same vertical centering.
+ * left-0 (physical, not logical) ensures fill always grows left→right
+ * regardless of any inherited RTL direction.
+ * Width set via inline style: `{ width: \`${progress}%\` }`.
+ */
+export const PROGRESS_FILL =
+  'absolute left-0 h-[4px] rounded-[2px] -translate-y-1/2 top-1/2';

package/src/components/AudioPlayer/index.ts

@@ -0,0 +1,2 @@
+export { AudioPlayer } from './AudioPlayer';
+export type { AudioPlayerProps, AudioPlayerStyle, AudioPlayerType } from './AudioPlayer.types';

package/src/components/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,353 @@
+'use client';
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/cn';
+import {
+  CLEAR_BUTTON,
+  CLEAR_BUTTON_DISABLED,
+  DROPDOWN_PANEL,
+  HELPER_DEFAULT,
+  HELPER_DISABLED,
+  HELPER_TEXT,
+  HELPER_WRAP,
+  ICON_DEFAULT,
+  ICON_DISABLED,
+  INPUT_BG_DEFAULT,
+  INPUT_BG_DISABLED,
+  INPUT_BORDER_DEFAULT,
+  INPUT_BORDER_FOCUSED,
+  INPUT_CONTAINER_BASE,
+  INPUT_PADDING,
+  INPUT_PLACEHOLDER_COLOR,
+  INPUT_TEXT,
+  INPUT_TEXT_DISABLED,
+  INPUT_TEXT_FILLED,
+  INPUT_TEXT_PLACEHOLDER,
+  ITEM_CONTENT,
+  ITEM_ICON,
+  ITEM_MATCH,
+  ITEM_TEXT,
+  ITEM_WRAPPER,
+  LABEL_DEFAULT,
+  LABEL_DISABLED,
+  LABEL_REQUIRED,
+  LABEL_WRAP,
+  SECTION_CONTENT,
+  SECTION_TEXT,
+  SECTION_WRAPPER,
+  WRAPPER,
+} from './Autocomplete.variants';
+import { ClearIcon, ClockIcon, HelpCircleIcon, SearchIcon } from '../../icons/IconFactory';
+import type { AutocompleteItem, AutocompleteProps } from './Autocomplete.types';
+
+/* ── Highlighted text helper ───────────────────────────────── */
+/**
+ * Renders `text` with the first occurrence of `query` highlighted in green.
+ * Matching is case-insensitive.
+ */
+function HighlightedText({ text, query }: { text: string; query: string }) {
+  if (!query) return <>{text}</>;
+  const lower = text.toLowerCase();
+  const idx = lower.indexOf(query.toLowerCase());
+  if (idx === -1) return <>{text}</>;
+  return (
+    <>
+      {text.slice(0, idx)}
+      <span className={ITEM_MATCH}>{text.slice(idx, idx + query.length)}</span>
+      {text.slice(idx + query.length)}
+    </>
+  );
+}
+
+/**
+ * Autocomplete — a search input with a type-ahead dropdown.
+ *
+ * ### Features
+ * - Controlled: `value` + `onChange` for the text input
+ * - Dropdown: `suggestions` (filtered by parent) + `recents` (recent searches)
+ * - Highlighted matched portion of suggestion labels (green, case-insensitive)
+ * - Suggestions use a search icon; Recents use a clock icon
+ * - Clear (×) button appears when the input has a value
+ * - Two sizes: `large` (40 px) and `medium` (36 px)
+ * - Label, required marker, helper text, disabled state
+ * - RTL: works automatically when `dir="rtl"` is set on any ancestor
+ * - Dark mode: works by toggling `html.dark` — no extra props needed
+ *
+ * Figma source: node 6183:86207
+ */
+export const Autocomplete = forwardRef<HTMLDivElement, AutocompleteProps>(
+  function Autocomplete(
+    {
+      size = 'large',
+      value = '',
+      onChange,
+      onSelect,
+      suggestions = [],
+      suggestionsLabel = 'Suggestions',
+      recents = [],
+      recentsLabel = 'Recents',
+      placeholder = 'Search',
+      label,
+      required = false,
+      helperText,
+      helperIcon = true,
+      disabled = false,
+      leadingIcon = true,
+      id,
+      className,
+      ...props
+    },
+    forwardedRef,
+  ) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const hasItems = suggestions.length > 0 || recents.length > 0;
+
+    /* ── Ref merging ─────────────────────────────────────────── */
+    const setContainerRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        if (typeof forwardedRef === 'function') forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef],
+    );
+
+    /* ── Auto-open when items appear while input is focused ──── */
+    useEffect(() => {
+      if (isFocused && !disabled && hasItems) setIsOpen(true);
+    }, [suggestions, recents]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    /* ── Auto-close when no items remain ────────────────────── */
+    useEffect(() => {
+      if (!hasItems) setIsOpen(false);
+    }, [hasItems]);
+
+    /* ── Handlers ────────────────────────────────────────────── */
+    function handleFocus() {
+      if (disabled) return;
+      setIsFocused(true);
+      if (hasItems) setIsOpen(true);
+    }
+
+    /**
+     * Close dropdown when focus leaves the container entirely.
+     * Using `relatedTarget` check: if focus moves to something inside
+     * the container (e.g. the clear button), we keep the dropdown open.
+     */
+    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
+      if (containerRef.current?.contains(e.relatedTarget as Node)) return;
+      setIsFocused(false);
+      setIsOpen(false);
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+      }
+    }
+
+    function handleSelect(item: AutocompleteItem) {
+      onSelect?.(item);
+      setIsOpen(false);
+      // Input retains focus (mousedown was prevented on items)
+    }
+
+    function handleClear() {
+      onChange?.('');
+      inputRef.current?.focus();
+    }
+
+    const showDropdown = isOpen && !disabled && hasItems;
+    const showFocusedBorder = isFocused || showDropdown;
+
+    return (
+      <div
+        ref={setContainerRef}
+        data-slot="autocomplete"
+        data-disabled={disabled || undefined}
+        data-open={showDropdown || undefined}
+        className={cn(WRAPPER, className)}
+        {...props}
+      >
+        {/* ── Label ──────────────────────────────────────────── */}
+        {label && (
+          <label
+            htmlFor={id}
+            data-slot="autocomplete-label"
+            className={cn(LABEL_WRAP, disabled ? LABEL_DISABLED : LABEL_DEFAULT)}
+          >
+            {label}
+            {required && <span className={LABEL_REQUIRED}>*</span>}
+          </label>
+        )}
+
+        {/* ── Input + Dropdown container ──────────────────────── */}
+        <div className="relative">
+          {/* Input row */}
+          <div
+            data-slot="autocomplete-input-wrap"
+            className={cn(
+              INPUT_CONTAINER_BASE,
+              INPUT_PADDING[size],
+              disabled ? INPUT_BG_DISABLED : INPUT_BG_DEFAULT,
+              showFocusedBorder ? INPUT_BORDER_FOCUSED : INPUT_BORDER_DEFAULT,
+              disabled && 'cursor-not-allowed',
+            )}
+          >
+            {/* Leading search icon */}
+            {leadingIcon && (
+              <span
+                aria-hidden="true"
+                className={cn(disabled ? ICON_DISABLED : ICON_DEFAULT)}
+              >
+                <SearchIcon className="size-full" />
+              </span>
+            )}
+
+            {/* Text input */}
+            <input
+              ref={inputRef}
+              id={id}
+              type="text"
+              role="combobox"
+              aria-expanded={showDropdown}
+              aria-haspopup="listbox"
+              aria-autocomplete="list"
+              autoComplete="off"
+              disabled={disabled}
+              value={value}
+              placeholder={placeholder}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onKeyDown={handleKeyDown}
+              onChange={(e) => !disabled && onChange?.(e.target.value)}
+              data-slot="autocomplete-input"
+              className={cn(
+                'flex-1 min-w-0 bg-transparent border-none outline-none',
+                INPUT_TEXT[size],
+                INPUT_PLACEHOLDER_COLOR,
+                disabled
+                  ? INPUT_TEXT_DISABLED
+                  : value
+                    ? INPUT_TEXT_FILLED
+                    : INPUT_TEXT_PLACEHOLDER,
+                disabled && 'cursor-not-allowed',
+              )}
+            />
+
+            {/* Trailing clear button — only when there is a value */}
+            {value && (
+              <button
+                type="button"
+                aria-label="Clear search"
+                disabled={disabled}
+                tabIndex={disabled ? -1 : 0}
+                onMouseDown={(e) => {
+                  // Prevent the input from blurring when the clear button is clicked,
+                  // so the dropdown stays open and focus stays in the field.
+                  e.preventDefault();
+                }}
+                onClick={handleClear}
+                data-slot="autocomplete-clear"
+                className={cn(disabled ? CLEAR_BUTTON_DISABLED : CLEAR_BUTTON)}
+              >
+                <ClearIcon className="size-icon-sm" />
+              </button>
+            )}
+          </div>
+
+          {/* ── Dropdown panel ───────────────────────────────── */}
+          {showDropdown && (
+            <div
+              role="listbox"
+              aria-label={label ?? placeholder}
+              data-slot="autocomplete-dropdown"
+              className={DROPDOWN_PANEL}
+            >
+              {/* Suggestions section */}
+              {suggestions.length > 0 && (
+                <>
+                  <div className={SECTION_WRAPPER}>
+                    <div className={SECTION_CONTENT}>
+                      <span className={SECTION_TEXT}>{suggestionsLabel}</span>
+                    </div>
+                  </div>
+
+                  {suggestions.map((item) => (
+                    <div key={item.value} className={ITEM_WRAPPER}>
+                      <div
+                        role="option"
+                        aria-selected={false}
+                        tabIndex={-1}
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => handleSelect(item)}
+                        className={ITEM_CONTENT}
+                      >
+                        <span aria-hidden="true" className={ITEM_ICON}>
+                          <SearchIcon className="size-full" />
+                        </span>
+                        <span className={ITEM_TEXT}>
+                          <HighlightedText text={item.label} query={value} />
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </>
+              )}
+
+              {/* Recents section */}
+              {recents.length > 0 && (
+                <>
+                  <div className={SECTION_WRAPPER}>
+                    <div className={SECTION_CONTENT}>
+                      <span className={SECTION_TEXT}>{recentsLabel}</span>
+                    </div>
+                  </div>
+
+                  {recents.map((item) => (
+                    <div key={item.value} className={ITEM_WRAPPER}>
+                      <div
+                        role="option"
+                        aria-selected={false}
+                        tabIndex={-1}
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => handleSelect(item)}
+                        className={ITEM_CONTENT}
+                      >
+                        <span aria-hidden="true" className={ITEM_ICON}>
+                          <ClockIcon className="size-full" />
+                        </span>
+                        <span className={ITEM_TEXT}>
+                          <HighlightedText text={item.label} query={value} />
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* ── Helper text ─────────────────────────────────────── */}
+        {helperText && (
+          <p
+            data-slot="autocomplete-helper"
+            className={cn(
+              HELPER_WRAP,
+              HELPER_TEXT,
+              disabled ? HELPER_DISABLED : HELPER_DEFAULT,
+            )}
+          >
+            {helperIcon && <HelpCircleIcon className="shrink-0 size-icon-sm" />}
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/Autocomplete/Autocomplete.types.ts

@@ -0,0 +1,93 @@
+import type { HTMLAttributes } from 'react';
+
+/** Size of the Autocomplete input field */
+export type AutocompleteSize = 'large' | 'medium';
+
+/**
+ * A single item that appears in the dropdown.
+ * Used for both `suggestions` (filtered search results) and `recents` (recent searches).
+ */
+export interface AutocompleteItem {
+  /** Unique value for the item (used as React key and for selection callbacks) */
+  value: string;
+  /** Display text shown in the dropdown row */
+  label: string;
+}
+
+export interface AutocompleteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSelect'> {
+  /**
+   * Size variant.
+   * - `large` (default) — 40 px input height, text-text-md
+   * - `medium` — 36 px input height, text-text-sm
+   */
+  size?: AutocompleteSize;
+
+  /**
+   * Current text value of the input (controlled).
+   * The parent is responsible for filtering `suggestions` based on this value.
+   */
+  value?: string;
+
+  /** Called on every keystroke with the new input text. */
+  onChange?: (value: string) => void;
+
+  /**
+   * Called when the user selects a suggestion or recent item from the dropdown.
+   * The parent can then decide whether to update `value` to `item.label`.
+   */
+  onSelect?: (item: AutocompleteItem) => void;
+
+  /**
+   * Suggestion items to display in the dropdown (typically filtered by the parent
+   * based on the current `value`). When empty, the Suggestions section is hidden.
+   */
+  suggestions?: AutocompleteItem[];
+
+  /**
+   * Label shown above the Suggestions section in the dropdown.
+   * @default 'Suggestions'
+   */
+  suggestionsLabel?: string;
+
+  /**
+   * Recent search items to display in the dropdown.
+   * When empty, the Recents section is hidden.
+   */
+  recents?: AutocompleteItem[];
+
+  /**
+   * Label shown above the Recents section in the dropdown.
+   * @default 'Recents'
+   */
+  recentsLabel?: string;
+
+  /** Placeholder text shown when the input is empty. */
+  placeholder?: string;
+
+  /** Field label rendered above the input. */
+  label?: string;
+
+  /** Adds a required asterisk (*) after the label. */
+  required?: boolean;
+
+  /** Helper text rendered below the input. */
+  helperText?: string;
+
+  /**
+   * Whether to render the help-circle icon next to helper text.
+   * @default true
+   */
+  helperIcon?: boolean;
+
+  /** Disables the input and prevents all interaction. */
+  disabled?: boolean;
+
+  /**
+   * Whether to show the leading search icon inside the input.
+   * @default true
+   */
+  leadingIcon?: boolean;
+
+  /** `id` for the `<input>` element — also used for `htmlFor` on the label. */
+  id?: string;
+}