sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,89 +0,0 @@
-// 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

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

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

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

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

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

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

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