sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,225 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────
-   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

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

package/src/components/Autocomplete/Autocomplete.tsx

@@ -1,353 +0,0 @@
-'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

@@ -1,93 +0,0 @@
-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;
-}