sdaia-ui 1.0.1

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,568 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import {
+  ClearIcon,
+  HelpCircleIcon,
+  SearchIcon,
+  MicrophoneIcon,
+  ChevronDownIcon,
+} from '../../icons/IconFactory';
+import { Button } from '../Button';
+import type { TextInputProps } from './TextInput.types';
+import {
+  SIZE_CLASSES,
+  RESPONSIVE_SIZE_CLASSES,
+  BORDER_COLOR,
+  BG_COLOR,
+  LABEL_COLOR,
+  PREFIX_SUFFIX_COLOR,
+  INPUT_TEXT_COLOR,
+  HELPER_TEXT_COLOR,
+  LEADING_PANEL_CLASSES,
+  TRAILING_PANEL_CLASSES,
+  LEADING_TEXT_PANEL_CLASSES,
+  TRAILING_BUTTON_PANEL_CLASSES,
+  DROPDOWN_ARROW_SIZE,
+} from './TextInput.variants';
+import { TextInputTag } from './TextInputTag';
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  function TextInput(
+    {
+      label,
+      helperText,
+      error,
+      size,
+      variant = 'default',
+      prefix,
+      suffix,
+      prefixBordered = false,
+      suffixBordered = false,
+      clearable = false,
+      onClear,
+      tags,
+      onTagRemove,
+      disabled = false,
+      fullWidth = false,
+      value,
+      dir,
+      className,
+      // type-specific
+      leadingDropdownLabel,
+      onLeadingDropdownClick,
+      trailingDropdownLabel,
+      onTrailingDropdownClick,
+      leadingText,
+      trailingButtonLabel,
+      trailingButtonIcon,
+      onTrailingButtonClick,
+      actionButtonLabel,
+      onActionButtonClick,
+      ...rest
+    },
+    ref,
+  ) {
+    const sizeStyles = size ? SIZE_CLASSES[size] : RESPONSIVE_SIZE_CLASSES;
+    const hasError = Boolean(error);
+    const showClear = clearable && value;
+    const hasTags = tags && tags.length > 0;
+
+    const borderColor = hasError
+      ? BORDER_COLOR.error
+      : disabled
+        ? BORDER_COLOR.disabled
+        : BORDER_COLOR.default;
+
+    const bgColor = disabled ? BG_COLOR.disabled : BG_COLOR.default;
+
+    // Shared native input element
+    const nativeInput = (
+      <input
+        ref={ref}
+        value={value}
+        disabled={disabled}
+        data-anatomy="native-input"
+        className={cn(
+          'min-w-0 flex-1 bg-transparent outline-none',
+          sizeStyles.inputText,
+          disabled ? INPUT_TEXT_COLOR.disabled : INPUT_TEXT_COLOR.default,
+          hasTags ? 'min-w-[80px] ps-spacing-xs py-spacing-xxs' : sizeStyles.input,
+        )}
+        {...rest}
+      />
+    );
+
+    // ─── Render the input field area based on type ────────────────────────────
+
+    let inputArea: React.ReactNode;
+
+    if (variant === 'search-box') {
+      // Single wrapper — SearchIcon leading, MicrophoneIcon trailing
+      inputArea = (
+        <div
+          data-slot="input-wrapper"
+          data-anatomy="input"
+          className={cn(
+            'flex items-center border motion-feedback',
+            bgColor,
+            borderColor,
+            sizeStyles.wrapper,
+            disabled && 'cursor-not-allowed',
+          )}
+        >
+          <span
+            data-slot="prefix"
+            data-anatomy="prefix"
+            className={cn(
+              'flex flex-shrink-0 items-center ps-spacing-lg',
+              disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+            )}
+          >
+            <SearchIcon className="size-icon-md" />
+          </span>
+
+          {nativeInput}
+
+          {showClear && (
+            <button
+              type="button"
+              onClick={onClear}
+              disabled={disabled}
+              data-anatomy="clear"
+              className="flex-shrink-0 text-[rgba(108,115,127,1)] motion-feedback hover:text-[rgba(22,22,22,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(229,231,235,1)]"
+              aria-label="Clear input"
+            >
+              <ClearIcon className="size-icon-sm" />
+            </button>
+          )}
+
+          <span
+            data-slot="suffix"
+            data-anatomy="suffix"
+            className={cn(
+              'flex flex-shrink-0 items-center pe-spacing-lg',
+              disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+            )}
+          >
+            <MicrophoneIcon className="size-icon-md" />
+          </span>
+        </div>
+      );
+    } else if (variant === 'leading-dropdown') {
+      // Split layout: [dropdown panel | separator | input]
+      inputArea = (
+        <div
+          data-slot="input-wrapper"
+          data-anatomy="input"
+          className={cn(
+            'flex items-center border motion-feedback overflow-hidden',
+            bgColor,
+            borderColor,
+            sizeStyles.wrapper,
+            disabled && 'cursor-not-allowed',
+          )}
+        >
+          <button
+            type="button"
+            onClick={onLeadingDropdownClick}
+            disabled={disabled}
+            data-anatomy="leading-dropdown"
+            className={cn(
+              LEADING_PANEL_CLASSES,
+              disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+            )}
+          >
+            <span className={cn(sizeStyles.inputText)}>
+              {leadingDropdownLabel}
+            </span>
+            <ChevronDownIcon className={DROPDOWN_ARROW_SIZE} />
+          </button>
+
+          <div
+            data-anatomy="separator"
+            className="self-stretch w-px bg-[rgba(229,231,235,1)] dark:bg-[rgba(44,57,79,1)] flex-shrink-0"
+          />
+
+          {nativeInput}
+
+          {showClear && (
+            <button
+              type="button"
+              onClick={onClear}
+              disabled={disabled}
+              data-anatomy="clear"
+              className="flex-shrink-0 pe-spacing-lg text-[rgba(108,115,127,1)] motion-feedback hover:text-[rgba(22,22,22,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(229,231,235,1)]"
+              aria-label="Clear input"
+            >
+              <ClearIcon className="size-icon-sm" />
+            </button>
+          )}
+
+          {suffix && !showClear && (
+            <span
+              data-slot="suffix"
+              data-anatomy="suffix"
+              className={cn(
+                'flex flex-shrink-0 items-center pe-spacing-lg',
+                disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+              )}
+            >
+              {suffix}
+            </span>
+          )}
+        </div>
+      );
+    } else if (variant === 'trailing-dropdown') {
+      // Split layout: [input | separator | dropdown panel]
+      inputArea = (
+        <div
+          data-slot="input-wrapper"
+          data-anatomy="input"
+          className={cn(
+            'flex items-center border motion-feedback overflow-hidden',
+            bgColor,
+            borderColor,
+            sizeStyles.wrapper,
+            disabled && 'cursor-not-allowed',
+          )}
+        >
+          {prefix && (
+            <span
+              data-slot="prefix"
+              data-anatomy="prefix"
+              className={cn(
+                'flex flex-shrink-0 items-center ps-spacing-lg',
+                disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+                prefixBordered &&
+                  'border-e border-e-[rgba(210,214,219,1)] pe-spacing-lg dark:border-e-[rgba(44,57,79,1)]',
+              )}
+            >
+              {prefix}
+            </span>
+          )}
+
+          {nativeInput}
+
+          {showClear && (
+            <button
+              type="button"
+              onClick={onClear}
+              disabled={disabled}
+              data-anatomy="clear"
+              className="flex-shrink-0 text-[rgba(108,115,127,1)] motion-feedback hover:text-[rgba(22,22,22,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(229,231,235,1)]"
+              aria-label="Clear input"
+            >
+              <ClearIcon className="size-icon-sm" />
+            </button>
+          )}
+
+          <div
+            data-anatomy="separator"
+            className="self-stretch w-px bg-[rgba(229,231,235,1)] dark:bg-[rgba(44,57,79,1)] flex-shrink-0"
+          />
+
+          <button
+            type="button"
+            onClick={onTrailingDropdownClick}
+            disabled={disabled}
+            data-anatomy="trailing-dropdown"
+            className={cn(
+              TRAILING_PANEL_CLASSES,
+              disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+            )}
+          >
+            <span className={cn(sizeStyles.inputText)}>
+              {trailingDropdownLabel}
+            </span>
+            <ChevronDownIcon className={DROPDOWN_ARROW_SIZE} />
+          </button>
+        </div>
+      );
+    } else if (variant === 'leading-text') {
+      // Split layout: [static text panel | input]
+      inputArea = (
+        <div
+          data-slot="input-wrapper"
+          data-anatomy="input"
+          className={cn(
+            'flex items-stretch border motion-feedback overflow-hidden',
+            bgColor,
+            borderColor,
+            sizeStyles.wrapper,
+            disabled && 'cursor-not-allowed',
+          )}
+        >
+          <span
+            data-anatomy="leading-text"
+            className={cn(
+              LEADING_TEXT_PANEL_CLASSES,
+              sizeStyles.inputText,
+              disabled && 'opacity-50',
+            )}
+          >
+            {leadingText}
+          </span>
+
+          {nativeInput}
+
+          {showClear && (
+            <button
+              type="button"
+              onClick={onClear}
+              disabled={disabled}
+              data-anatomy="clear"
+              className="flex-shrink-0 pe-spacing-lg text-[rgba(108,115,127,1)] motion-feedback hover:text-[rgba(22,22,22,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(229,231,235,1)]"
+              aria-label="Clear input"
+            >
+              <ClearIcon className="size-icon-sm" />
+            </button>
+          )}
+        </div>
+      );
+    } else if (variant === 'trailing-button') {
+      // Single wrapper with an attached action panel at the end
+      inputArea = (
+        <div
+          data-slot="input-wrapper"
+          data-anatomy="input"
+          className={cn(
+            'flex items-center border motion-feedback overflow-hidden',
+            bgColor,
+            borderColor,
+            sizeStyles.wrapper,
+            disabled && 'cursor-not-allowed',
+          )}
+        >
+          {prefix && (
+            <span
+              data-slot="prefix"
+              data-anatomy="prefix"
+              className={cn(
+                'flex flex-shrink-0 items-center ps-spacing-lg',
+                disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+                prefixBordered &&
+                  'border-e border-e-[rgba(210,214,219,1)] pe-spacing-lg dark:border-e-[rgba(44,57,79,1)]',
+              )}
+            >
+              {prefix}
+            </span>
+          )}
+
+          {nativeInput}
+
+          {showClear && (
+            <button
+              type="button"
+              onClick={onClear}
+              disabled={disabled}
+              data-anatomy="clear"
+              className="flex-shrink-0 text-[rgba(108,115,127,1)] motion-feedback hover:text-[rgba(22,22,22,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(229,231,235,1)]"
+              aria-label="Clear input"
+            >
+              <ClearIcon className="size-icon-sm" />
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={onTrailingButtonClick}
+            disabled={disabled}
+            data-anatomy="trailing-button"
+            className={cn(
+              TRAILING_BUTTON_PANEL_CLASSES,
+              sizeStyles.inputText,
+              disabled ? INPUT_TEXT_COLOR.disabled : 'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+            )}
+          >
+            {trailingButtonIcon && (
+              <span className={cn('flex-shrink-0', disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default)}>
+                {trailingButtonIcon}
+              </span>
+            )}
+            {trailingButtonLabel}
+          </button>
+        </div>
+      );
+    } else if (variant === 'input-button') {
+      // Detached layout: [input wrapper] [gap] [Button component]
+      inputArea = (
+        <div
+          data-slot="input-button-group"
+          data-anatomy="input-button-group"
+          className="flex items-center gap-spacing-md"
+        >
+          <div
+            data-slot="input-wrapper"
+            data-anatomy="input"
+            className={cn(
+              'flex flex-1 items-center border motion-feedback',
+              bgColor,
+              borderColor,
+              sizeStyles.wrapper,
+              disabled && 'cursor-not-allowed',
+            )}
+          >
+            {prefix && (
+              <span
+                data-slot="prefix"
+                data-anatomy="prefix"
+                className={cn(
+                  'flex flex-shrink-0 items-center ps-spacing-lg',
+                  disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+                  prefixBordered &&
+                    'border-e border-e-[rgba(210,214,219,1)] pe-spacing-lg dark:border-e-[rgba(44,57,79,1)]',
+                )}
+              >
+                {prefix}
+              </span>
+            )}
+
+            {nativeInput}
+
+            {showClear && (
+              <button
+                type="button"
+                onClick={onClear}
+                disabled={disabled}
+                data-anatomy="clear"
+                className="flex-shrink-0 pe-spacing-lg text-[rgba(108,115,127,1)] motion-feedback hover:text-[rgba(22,22,22,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(229,231,235,1)]"
+                aria-label="Clear input"
+              >
+                <ClearIcon className="size-icon-sm" />
+              </button>
+            )}
+          </div>
+
+          <Button
+            variant="primary"
+            size={size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'}
+            disabled={disabled}
+            onClick={onActionButtonClick}
+            data-anatomy="action-button"
+          >
+            {actionButtonLabel}
+          </Button>
+        </div>
+      );
+    } else {
+      // default — original single-wrapper layout
+      inputArea = (
+        <div
+          data-slot="input-wrapper"
+          data-anatomy="input"
+          className={cn(
+            'flex items-center border motion-feedback',
+            bgColor,
+            borderColor,
+            sizeStyles.wrapper,
+            hasTags && 'flex-wrap gap-spacing-sm ps-spacing-md py-spacing-sm',
+            disabled && 'cursor-not-allowed',
+          )}
+        >
+          {prefix && (
+            <span
+              data-slot="prefix"
+              data-anatomy="prefix"
+              className={cn(
+                'flex flex-shrink-0 items-center ps-spacing-lg',
+                disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+                prefixBordered &&
+                  'border-e border-e-[rgba(210,214,219,1)] pe-spacing-lg dark:border-e-[rgba(44,57,79,1)]',
+              )}
+            >
+              {prefix}
+            </span>
+          )}
+
+          {hasTags &&
+            tags.map((tag) => (
+              <TextInputTag
+                key={tag.id}
+                label={tag.label}
+                avatar={tag.avatar}
+                onRemove={onTagRemove ? () => onTagRemove(tag.id) : undefined}
+                disabled={disabled}
+                size={size}
+              />
+            ))}
+
+          {nativeInput}
+
+          {showClear && (
+            <button
+              type="button"
+              onClick={onClear}
+              disabled={disabled}
+              data-anatomy="clear"
+              className="flex-shrink-0 pe-spacing-lg text-[rgba(108,115,127,1)] motion-feedback hover:text-[rgba(22,22,22,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(229,231,235,1)]"
+              aria-label="Clear input"
+            >
+              <ClearIcon className="size-icon-sm" />
+            </button>
+          )}
+
+          {suffix && !showClear && (
+            <span
+              data-slot="suffix"
+              data-anatomy="suffix"
+              className={cn(
+                'flex flex-shrink-0 items-center pe-spacing-lg',
+                disabled ? PREFIX_SUFFIX_COLOR.disabled : PREFIX_SUFFIX_COLOR.default,
+                suffixBordered &&
+                  'border-s border-s-[rgba(210,214,219,1)] ps-spacing-lg dark:border-s-[rgba(44,57,79,1)]',
+              )}
+            >
+              {suffix}
+            </span>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        data-slot="text-input"
+        data-anatomy="root"
+        dir={dir}
+        className={cn('flex flex-col gap-spacing-sm', fullWidth && 'w-full', className)}
+      >
+        {/* Label */}
+        {label && (
+          <label
+            data-slot="label"
+            data-anatomy="label"
+            className={cn('flex items-center gap-spacing-xxs text-text-sm font-[400]', LABEL_COLOR)}
+          >
+            {label}
+            {rest.required && (
+              <span className="text-[rgba(180,35,24,1)] dark:text-[rgba(248,113,113,1)]">*</span>
+            )}
+          </label>
+        )}
+
+        {inputArea}
+
+        {/* Helper / Error text */}
+        {(error || helperText) && (
+          <p
+            data-slot="helper-text"
+            data-anatomy="helper-text"
+            className={cn(
+              'flex items-center gap-spacing-sm text-text-sm',
+              hasError
+                ? HELPER_TEXT_COLOR.error
+                : disabled
+                  ? HELPER_TEXT_COLOR.disabled
+                  : HELPER_TEXT_COLOR.default,
+            )}
+          >
+            <HelpCircleIcon className="flex-shrink-0 size-icon-sm" />
+            {error || helperText}
+          </p>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/TextInput/TextInput.types.ts

@@ -0,0 +1,87 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+export type TextInputSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Structural variant of the input — maps to Figma component set "Type" property.
+ * Named `variant` in code to avoid conflict with the native HTML `type` attribute.
+ * - default: plain input with optional prefix/suffix slots
+ * - search-box: leading search icon + trailing mic icon
+ * - leading-dropdown: attached left panel with a selectable label + chevron
+ * - trailing-dropdown: attached right panel with a selectable label + chevron
+ * - leading-text: attached left static text panel (e.g. "http://")
+ * - trailing-button: attached right action button (e.g. "Copy")
+ * - input-button: standalone input + a separate detached primary action Button
+ */
+export type TextInputVariant =
+  | 'default'
+  | 'search-box'
+  | 'leading-dropdown'
+  | 'trailing-dropdown'
+  | 'leading-text'
+  | 'trailing-button'
+  | 'input-button';
+
+export interface TagItem {
+  /** Unique identifier for the tag */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional avatar or icon rendered before the label */
+  avatar?: ReactNode;
+}
+
+export interface TextInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'dir'> {
+  /** Layout direction — applied to the root wrapper for RTL support */
+  dir?: 'ltr' | 'rtl';
+  /** Label text displayed above the input */
+  label?: string;
+  /** Helper text displayed below the input */
+  helperText?: string;
+  /** Error message — replaces helperText and turns the input red */
+  error?: string;
+  /** Size of the input */
+  size?: TextInputSize;
+  /** Structural variant of the input — determines layout and built-in adornments */
+  variant?: TextInputVariant;
+  /** Content rendered before the input field (icon, text, dropdown) */
+  prefix?: ReactNode;
+  /** Content rendered after the input field (icon, button, text) */
+  suffix?: ReactNode;
+  /** Whether the prefix has a visual separator border on its end edge */
+  prefixBordered?: boolean;
+  /** Whether the suffix has a visual separator border on its start edge */
+  suffixBordered?: boolean;
+  /** Shows a clear button when the input has a value */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked */
+  onClear?: () => void;
+  /** Tag chips rendered inside the input container (for multi-value variant) */
+  tags?: TagItem[];
+  /** Callback fired when a tag's remove button is clicked */
+  onTagRemove?: (id: string) => void;
+  /** Makes the input take the full width of its container */
+  fullWidth?: boolean;
+  // --- Type-specific props ---
+  /** leading-dropdown: label text shown in the left dropdown panel */
+  leadingDropdownLabel?: string;
+  /** leading-dropdown: callback when left dropdown panel is clicked */
+  onLeadingDropdownClick?: () => void;
+  /** trailing-dropdown: label text shown in the right dropdown panel */
+  trailingDropdownLabel?: string;
+  /** trailing-dropdown: callback when right dropdown panel is clicked */
+  onTrailingDropdownClick?: () => void;
+  /** leading-text: static text shown in the left text panel (e.g. "http://") */
+  leadingText?: string;
+  /** trailing-button: label for the attached right action button (e.g. "Copy") */
+  trailingButtonLabel?: string;
+  /** trailing-button: icon rendered inside the attached right action button */
+  trailingButtonIcon?: ReactNode;
+  /** trailing-button: callback when the attached right action button is clicked */
+  onTrailingButtonClick?: () => void;
+  /** input-button: label for the detached primary action button */
+  actionButtonLabel?: string;
+  /** input-button: callback when the detached primary action button is clicked */
+  onActionButtonClick?: () => void;
+}