sdaia-ui 1.0.1

package/src/components/TextInput/TextInput.variants.ts

@@ -0,0 +1,89 @@
+// Variant class constants for TextInput — Figma node 4191:24523
+import type { TextInputSize } from './TextInput.types';
+
+export const SIZE_CLASSES: Record<
+  TextInputSize,
+  { wrapper: string; input: string; inputText: string }
+> = {
+  sm: {
+    wrapper: 'rounded-[8px] gap-spacing-md',
+    input: 'ps-spacing-lg pe-spacing-lg py-spacing-xs',
+    inputText: 'text-text-xs leading-[18px]',
+  },
+  md: {
+    wrapper: 'rounded-[8px] gap-spacing-md',
+    input: 'ps-spacing-lg pe-spacing-lg py-spacing-sm',
+    inputText: 'text-text-sm leading-[20px]',
+  },
+  lg: {
+    // py-spacing-md = 8px — matches Figma var(--global/spacing-md) across all states
+    wrapper: 'rounded-[8px] gap-spacing-md',
+    input: 'ps-spacing-lg pe-spacing-lg py-spacing-md',
+    inputText: 'text-text-md leading-[24px]',
+  },
+};
+
+// Responsive fallback used when no explicit size prop is passed
+export const RESPONSIVE_SIZE_CLASSES = {
+  wrapper: 'rounded-[8px] gap-spacing-md',
+  input: 'ps-spacing-lg pe-spacing-lg py-spacing-sm lg:py-spacing-md',
+  inputText: 'text-text-sm lg:text-text-md leading-[20px] lg:leading-[24px]',
+};
+
+export const BORDER_COLOR = {
+  error:
+    'border-[rgba(180,35,24,1)] focus-within:border-[rgba(180,35,24,1)] dark:border-[rgba(248,113,113,1)] dark:focus-within:border-[rgba(248,113,113,1)]',
+  disabled: 'border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]',
+  // Simulates Figma's 2px focused border via 1px border + 1px inset shadow to avoid layout shift
+  default:
+    'border-[rgba(210,214,219,1)] focus-within:border-[rgba(27,131,84,1)] focus-within:shadow-[inset_0_0_0_1px_rgba(27,131,84,1)] dark:border-[rgba(44,57,79,1)] dark:focus-within:border-[rgba(27,131,84,1)] dark:focus-within:shadow-[inset_0_0_0_1px_rgba(27,131,84,1)]',
+} as const;
+
+export const BG_COLOR = {
+  disabled: 'bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]',
+  default: 'bg-white dark:bg-[rgba(17,25,39,1)]',
+} as const;
+
+export const LABEL_COLOR =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+export const PREFIX_SUFFIX_COLOR = {
+  disabled: 'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]',
+  default: 'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+} as const;
+
+export const INPUT_TEXT_COLOR = {
+  disabled:
+    'text-[rgba(157,164,174,1)] placeholder:text-[rgba(157,164,174,1)] cursor-not-allowed dark:text-[rgba(75,85,99,1)] dark:placeholder:text-[rgba(75,85,99,1)]',
+  default:
+    'text-[rgba(22,22,22,1)] placeholder:text-[rgba(108,115,127,1)] dark:text-[rgba(229,231,235,1)] dark:placeholder:text-[rgba(107,114,128,1)]',
+} as const;
+
+export const HELPER_TEXT_COLOR = {
+  error: 'text-[rgba(180,35,24,1)] dark:text-[rgba(248,113,113,1)]',
+  disabled: 'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]',
+  default: 'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+} as const;
+
+// Separator between attached input panels (Leading/Trailing Dropdown, Leading Text, Trailing Button)
+export const ATTACHED_SEPARATOR =
+  'border-[rgba(229,231,235,1)] dark:border-[rgba(44,57,79,1)]';
+
+// Left panel of a split-layout type (Leading Dropdown label text + arrow)
+export const LEADING_PANEL_CLASSES =
+  'flex flex-shrink-0 items-center gap-spacing-xs ps-spacing-lg pe-spacing-sm py-spacing-md cursor-pointer select-none';
+
+// Right panel of a split-layout type (Trailing Dropdown label text + arrow)
+export const TRAILING_PANEL_CLASSES =
+  'flex flex-shrink-0 items-center gap-spacing-xs ps-spacing-sm pe-spacing-lg py-spacing-md cursor-pointer select-none';
+
+// Leading text panel (static, non-interactive — e.g. "http://")
+export const LEADING_TEXT_PANEL_CLASSES =
+  'flex flex-shrink-0 items-center ps-spacing-lg pe-spacing-lg py-spacing-md text-text-sm leading-[20px] text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)] border-e border-e-[rgba(229,231,235,1)] dark:border-e-[rgba(44,57,79,1)] rounded-ss-[8px] rounded-es-[8px]';
+
+// Trailing button panel (Copy, etc.) — not the detached input-button type
+export const TRAILING_BUTTON_PANEL_CLASSES =
+  'flex flex-shrink-0 items-center gap-spacing-xs ps-spacing-xl pe-spacing-xl py-spacing-md cursor-pointer select-none font-[500] text-text-sm leading-[20px] border-s border-s-[rgba(229,231,235,1)] dark:border-s-[rgba(44,57,79,1)]';
+
+// Dropdown arrow icon size — 16px matches Figma (size-icon-sm resolves to 16px at desktop)
+export const DROPDOWN_ARROW_SIZE = 'size-icon-sm';

package/src/components/TextInput/TextInputTag.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import XIconSVG from '../../icons/XIconSVG';
+import type { TextInputTagProps } from './TextInputTag.types';
+
+const TAG_SIZE_CLASSES: Record<string, string> = {
+  sm: 'text-text-2xs px-spacing-sm py-[1px] gap-spacing-xs',
+  md: 'text-text-xs px-spacing-md py-spacing-xxs gap-spacing-xs',
+  lg: 'text-text-xs px-spacing-md py-spacing-xxs gap-spacing-sm',
+};
+
+export function TextInputTag({
+  label,
+  avatar,
+  onRemove,
+  disabled = false,
+  size = 'md',
+}: TextInputTagProps) {
+  return (
+    <span
+      className={[
+        'inline-flex items-center rounded-[6px] bg-[rgba(243,244,246,1)] text-[rgba(31,42,55,1)] dark:bg-[rgba(29,41,57,1)] dark:text-[rgba(229,231,235,1)]',
+        TAG_SIZE_CLASSES[size],
+        disabled ? 'opacity-50' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {avatar && <span className="flex-shrink-0">{avatar}</span>}
+      <span className="truncate">{label}</span>
+      {onRemove && !disabled && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="flex-shrink-0 text-[rgba(107,114,128,1)] motion-feedback hover:text-[rgba(31,42,55,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(229,231,235,1)]"
+          aria-label={`Remove ${label}`}
+        >
+          <XIconSVG/>
+        </button>
+      )}
+    </span>
+  );
+}

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export interface TextInputTagProps {
+  /** Tag label text */
+  label: string;
+  /** Optional avatar or icon rendered before the label */
+  avatar?: ReactNode;
+  /** Callback fired when the remove button is clicked */
+  onRemove?: () => void;
+  /** Whether the tag is disabled */
+  disabled?: boolean;
+  /** Size inherited from parent TextInput */
+  size?: 'sm' | 'md' | 'lg';
+}

package/src/components/TextInput/index.ts

@@ -0,0 +1,4 @@
+export { TextInput } from './TextInput';
+export { TextInputTag } from './TextInputTag';
+export type { TextInputProps, TextInputSize, TextInputVariant, TagItem } from './TextInput.types';
+export type { TextInputTagProps } from './TextInputTag.types';

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { Link } from '../Link';
+import type { TooltipProps } from './Tooltip.types';
+import {
+  SHADOW,
+  CONTENT_BASE,
+  CONTENT_TYPE,
+  TITLE_TYPE,
+  DESCRIPTION_TYPE,
+  COUNTING_TYPE,
+  PRIMARY_BTN_TYPE,
+  SECONDARY_BTN_TYPE,
+  LINK_TYPE,
+  BEAK_COLOR,
+  BEAK_H_ALIGN,
+  BEAK_V_ALIGN,
+  ICON_TYPE,
+} from './Tooltip.variants';
+import {
+  InfoIcon,
+  QuestionMarkIcon,
+  BeakTop as BeakTopSVG,
+  BeakBottom as BeakBottomSVG,
+  BeakLeft as BeakLeftSVG,
+  BeakRight as BeakRightSVG,
+} from '../../icons/IconFactory';
+
+/**
+ * Tooltip — rich content tooltip with optional beak (arrow), media,
+ * action buttons, link, and counting/pagination.
+ *
+ * Supports two visual types (neutral, brand), five beak placements
+ * (none, top, bottom, left, right), three beak alignments (start,
+ * centre, end), and full RTL support via logical properties.
+ */
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(
+  {
+    type = 'neutral',
+    beakPlacement = 'none',
+    beakAlignment = 'start',
+    title,
+    description,
+    icon,
+    media,
+    primaryAction,
+    secondaryAction,
+    link,
+    counting,
+    className,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const isHorizontalBeak = beakPlacement === 'top' || beakPlacement === 'bottom';
+  const isVerticalBeak = beakPlacement === 'left' || beakPlacement === 'right';
+  const hasBeak = beakPlacement !== 'none';
+  const hasFooter = primaryAction || secondaryAction || link || counting;
+  const resolvedIcon = icon === true
+    ? (type === 'brand' ? <InfoIcon /> : <QuestionMarkIcon />)
+    : icon;
+
+  /* ── Beak element ────────────────────────────────────────── */
+  const beakElement = hasBeak && (
+    <div
+      data-slot="tooltip-beak"
+      className={cn(
+        'flex shrink-0',
+        BEAK_COLOR[type],
+        isHorizontalBeak && [
+          'items-center px-spacing-md w-full',
+          BEAK_H_ALIGN[beakAlignment],
+        ],
+        isVerticalBeak && [
+          'flex-col py-spacing-md self-stretch w-[6px]',
+          BEAK_V_ALIGN[beakAlignment],
+        ],
+      )}
+    >
+      {beakPlacement === 'top' && <BeakTopSVG className="shrink-0" />}
+      {beakPlacement === 'bottom' && <BeakBottomSVG className="shrink-0" />}
+      {beakPlacement === 'left' && <BeakLeftSVG className="shrink-0" />}
+      {beakPlacement === 'right' && <BeakRightSVG className="shrink-0" />}
+    </div>
+  );
+
+  /* ── Content body ────────────────────────────────────────── */
+  const contentBody = (
+    <div
+      data-slot="tooltip-content"
+      className={cn(
+        CONTENT_BASE,
+        CONTENT_TYPE[type],
+        isVerticalBeak && 'flex-[1_0_0] min-h-px min-w-px',
+      )}
+    >
+      {/* Leading icon */}
+      {resolvedIcon && (
+        <span
+          data-slot="tooltip-icon"
+          className={cn(
+            'inline-flex items-center justify-center shrink-0 size-[18px]',
+            ICON_TYPE[type],
+          )}
+          aria-hidden="true"
+        >
+          {resolvedIcon}
+        </span>
+      )}
+
+      {/* Text + media + footer */}
+      <div className="flex flex-[1_0_0] flex-col gap-spacing-md items-start min-h-px min-w-px">
+        {/* Title and description */}
+        {(title || description) && (
+          <div
+            data-slot="tooltip-text"
+            className="flex flex-col gap-spacing-xs items-start w-full text-text-xs"
+          >
+            {title && (
+              <p data-slot="tooltip-title" className={cn('w-full', TITLE_TYPE[type])}>
+                {title}
+              </p>
+            )}
+            {description && (
+              <p data-slot="tooltip-description" className={cn('w-full', DESCRIPTION_TYPE[type])}>
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Media slot */}
+        {media && (
+          <div data-slot="tooltip-media" className="w-full overflow-clip rounded-[4px]">
+            {media}
+          </div>
+        )}
+
+        {/* Children escape hatch */}
+        {children}
+
+        {/* Footer: actions + counting */}
+        {hasFooter && (
+          <div
+            data-slot="tooltip-footer"
+            className="flex gap-spacing-md items-center justify-end w-full"
+          >
+            {/* Actions container */}
+            {(primaryAction || secondaryAction || link) && (
+              <div className="flex flex-[1_0_0] gap-spacing-md items-center min-h-px min-w-px">
+                {primaryAction && (
+                  <Button
+                    variant="neutral"
+                    size="sm"
+                    onClick={primaryAction.onClick}
+                    className={PRIMARY_BTN_TYPE[type] || undefined}
+                  >
+                    {primaryAction.label}
+                  </Button>
+                )}
+                {secondaryAction && (
+                  <Button
+                    variant="transparent"
+                    size="sm"
+                    onClick={secondaryAction.onClick}
+                    className={SECONDARY_BTN_TYPE[type] || undefined}
+                  >
+                    {secondaryAction.label}
+                  </Button>
+                )}
+                {link && (
+                  <Link
+                    variant="primary"
+                    size="sm"
+                    href={link.href}
+                    onClick={link.onClick}
+                    className={LINK_TYPE[type] || undefined}
+                  >
+                    {link.label}
+                  </Link>
+                )}
+              </div>
+            )}
+
+            {/* Counting */}
+            {counting && (
+              <span data-slot="tooltip-counting" className={cn('shrink-0 whitespace-nowrap', COUNTING_TYPE[type])}>
+                {counting}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  /* ── Root layout ─────────────────────────────────────────── */
+  const isCol = beakPlacement === 'top' || beakPlacement === 'bottom' || beakPlacement === 'none';
+
+  return (
+    <div
+      ref={ref}
+      role="tooltip"
+      data-slot="tooltip"
+      data-type={type}
+      data-beak-placement={beakPlacement}
+      data-beak-alignment={beakAlignment}
+      /* Fast fade-in when tooltip mounts — consumer can override via rest */
+      data-motion="fade-in"
+      className={cn(
+        'motion-enter flex items-start',
+        isCol ? 'flex-col' : 'flex-row',
+        SHADOW,
+        className,
+      )}
+      {...rest}
+    >
+      {beakPlacement === 'top' && beakElement}
+      {beakPlacement === 'left' && beakElement}
+      {contentBody}
+      {beakPlacement === 'bottom' && beakElement}
+      {beakPlacement === 'right' && beakElement}
+    </div>
+  );
+});

package/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type TooltipType = 'neutral' | 'brand';
+
+export type TooltipBeakPlacement = 'none' | 'top' | 'bottom' | 'left' | 'right';
+
+export type TooltipBeakAlignment = 'start' | 'centre' | 'end';
+
+export interface TooltipAction {
+  /** Button label. */
+  label: string;
+  /** Click handler. */
+  onClick?: () => void;
+}
+
+export interface TooltipLinkAction {
+  /** Link label. */
+  label: string;
+  /** Link href. */
+  href?: string;
+  /** Click handler. */
+  onClick?: () => void;
+}
+
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Visual type — neutral (white/dark bg) or brand (green bg). */
+  type?: TooltipType;
+  /** Beak (arrow) placement relative to the tooltip body. */
+  beakPlacement?: TooltipBeakPlacement;
+  /** Beak alignment along the placed edge. Only applies when beakPlacement is not 'none'. */
+  beakAlignment?: TooltipBeakAlignment;
+  /** Title text displayed at the top. */
+  title?: ReactNode;
+  /** Description text below the title. */
+  description?: ReactNode;
+  /** Leading icon. Pass `true` for the default info icon, or a custom ReactNode. */
+  icon?: ReactNode | boolean;
+  /** Media content (image, video) displayed between text and footer. */
+  media?: ReactNode;
+  /** Primary action button (e.g. "Next"). */
+  primaryAction?: TooltipAction;
+  /** Secondary action button (e.g. "Skip"). */
+  secondaryAction?: TooltipAction;
+  /** Link action displayed after the buttons. */
+  link?: TooltipLinkAction;
+  /** Counting/pagination text (e.g. "1 of 7"). */
+  counting?: ReactNode;
+}

package/src/components/Tooltip/Tooltip.variants.ts

@@ -0,0 +1,141 @@
+import type { TooltipType, TooltipBeakAlignment } from './Tooltip.types';
+
+/* ── Shadow ──────────────────────────────────────────────────── */
+
+/**
+ * Shadows/shadow-lg from Figma.
+ *
+ * Uses `filter: drop-shadow()` instead of `box-shadow` so the shadow traces the
+ * actual alpha-composited shape — rounded card + beak triangle — rather than the
+ * rectangular bounding box. This makes the white beak visible in light mode because
+ * the shadow outlines the triangle edge.
+ *
+ * The full class string MUST be a single unbroken string literal so Tailwind's
+ * static content scanner includes it in the generated CSS. Do not split it with
+ * array.join() or template literals — the scanner does not evaluate JS expressions.
+ *
+ * drop-shadow() has no spread-radius parameter so the Figma spread values
+ * (-2 px / -4 px) are omitted; the visual difference is imperceptible here.
+ */
+// eslint-disable-next-line max-len
+export const SHADOW = '[filter:drop-shadow(0px_4px_6px_rgba(16,24,40,0.03))_drop-shadow(0px_12px_16px_rgba(16,24,40,0.08))]';
+
+/* ── Content container ───────────────────────────────────────── */
+
+/** Base content classes shared by both types. */
+export const CONTENT_BASE = [
+  'flex gap-spacing-md items-start p-spacing-lg',
+  'rounded-[8px] w-full',
+].join(' ');
+
+/** Type-specific content background and text colors. */
+export const CONTENT_TYPE: Record<TooltipType, string> = {
+  neutral: [
+    'bg-[rgba(255,255,255,1)] dark:bg-[rgba(31,42,55,1)]',
+  ].join(' '),
+  brand: [
+    'bg-[rgba(27,131,84,1)]',
+  ].join(' '),
+};
+
+/* ── Title ───────────────────────────────────────────────────── */
+
+export const TITLE_TYPE: Record<TooltipType, string> = {
+  neutral: [
+    'text-[rgba(31,42,55,1)] font-[600]',
+    'dark:text-[rgba(249,250,251,1)]',
+  ].join(' '),
+  brand: [
+    'text-[rgba(249,250,251,1)] font-[600]',
+  ].join(' '),
+};
+
+/* ── Description ─────────────────────────────────────────────── */
+
+export const DESCRIPTION_TYPE: Record<TooltipType, string> = {
+  neutral: [
+    'text-[rgba(56,66,80,1)]',
+    'dark:text-[rgba(243,244,246,1)]',
+  ].join(' '),
+  brand: [
+    'text-[rgba(243,244,246,1)]',
+  ].join(' '),
+};
+
+/* ── Counting text ───────────────────────────────────────────── */
+
+export const COUNTING_TYPE: Record<TooltipType, string> = {
+  neutral: [
+    'text-text-xs text-[rgba(56,66,80,1)]',
+    'dark:text-[rgba(243,244,246,1)]',
+  ].join(' '),
+  brand: [
+    'text-text-xs !text-[rgba(243,244,246,1)]',
+  ].join(' '),
+};
+
+/* ── Primary button overrides per type ───────────────────────── */
+
+/** Primary button: neutral uses variant="neutral" (black bg),
+ *  brand uses white bg with dark text. */
+export const PRIMARY_BTN_TYPE: Record<TooltipType, string> = {
+  neutral: '!text-[rgba(255,255,255,1)] text-text-sm font-[500]',
+  brand: [
+    'bg-[rgba(255,255,255,1)] !text-[rgba(22,22,22,1)] text-text-sm font-[500]',
+    'hover:bg-[rgba(243,244,246,1)]',
+    'active:bg-[rgba(229,231,235,1)]',
+  ].join(' '),
+};
+
+/** Secondary button: neutral uses transparent with dark text,
+ *  brand uses transparent with white text. */
+export const SECONDARY_BTN_TYPE: Record<TooltipType, string> = {
+  neutral: 'text-text-sm font-[500]',
+  brand: '!text-[rgba(243,244,246,1)] text-text-sm font-[500]',
+};
+
+/* ── Link overrides per type ─────────────────────────────────── */
+
+export const LINK_TYPE: Record<TooltipType, string> = {
+  neutral: 'text-text-sm font-[400]',
+  brand: '!text-[rgba(243,244,246,1)] text-text-sm font-[400]',
+};
+
+/* ── Beak (arrow) ────────────────────────────────────────────── */
+
+/** Beak fill color per type. Uses `text-*` because the SVG uses `currentColor`. */
+export const BEAK_COLOR: Record<TooltipType, string> = {
+  neutral: 'text-[rgba(255,255,255,1)] dark:text-[rgba(31,42,55,1)]',
+  brand: 'text-[rgba(27,131,84,1)]',
+};
+
+/* ── Beak alignment ──────────────────────────────────────────── */
+
+/** Horizontal beak (top/bottom) alignment. */
+export const BEAK_H_ALIGN: Record<TooltipBeakAlignment, string> = {
+  start: 'justify-start',
+  centre: 'justify-center',
+  end: 'justify-end',
+};
+
+/** Vertical beak (left/right) alignment. */
+export const BEAK_V_ALIGN: Record<TooltipBeakAlignment, string> = {
+  start: 'justify-start',
+  centre: 'justify-center',
+  end: 'justify-end',
+};
+
+/* ── Icon wrapper ────────────────────────────────────────────── */
+
+/**
+ * Icon wrapper colour per type.
+ * QuestionMarkIcon uses `currentColor` for its circle fill, so this class
+ * drives the background colour of the dark circle:
+ *   neutral light → rgba(56,66,80,1)   = Icon/icon-neutral   (#384250)
+ *   neutral dark  → rgba(157,164,174,1) = Icon/icon-default-400 (#9DA4AE)
+ *   brand         → white (icon sits on the green tooltip bg)
+ */
+export const ICON_TYPE: Record<TooltipType, string> = {
+  neutral: 'text-[rgba(56,66,80,1)] dark:text-[rgba(157,164,174,1)]',
+  brand: 'text-[rgba(255,255,255,1)]',
+};

package/src/components/Tooltip/index.ts

@@ -0,0 +1,10 @@
+export { Tooltip } from './Tooltip';
+export { PlayVideoIcon as TooltipPlayVideoIcon } from '../../icons/IconFactory';
+export type {
+  TooltipProps,
+  TooltipType,
+  TooltipBeakPlacement,
+  TooltipBeakAlignment,
+  TooltipAction,
+  TooltipLinkAction,
+} from './Tooltip.types';