sdaia-ui 1.0.1

package/src/components/Breadcrumb/BreadcrumbItem.types.ts

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+
+/** Layout type — icon only, text only, or icon + text. */
+export type BreadcrumbItemType = 'icon' | 'text' | 'icon-and-text';
+
+/** A single item shown inside the dropdown panel. */
+export interface BreadcrumbDropdownItem {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface BreadcrumbItemProps {
+  /**
+   * Content type.
+   * - `icon`         — home icon only (default, used for the root/home slot)
+   * - `text`         — text label only
+   * - `icon-and-text`— home icon + text label side by side
+   * @default 'icon'
+   */
+  type?: BreadcrumbItemType;
+
+  /**
+   * Marks this as the active/current page.
+   * Renders with neutral-dark color instead of muted gray; not a link.
+   * @default false
+   */
+  current?: boolean;
+
+  /**
+   * Text label — required for `type="text"` and `type="icon-and-text"`.
+   * @default 'Link'
+   */
+  label?: string;
+
+  /**
+   * Custom icon element. Defaults to the home icon.
+   * Receives `currentColor` via the parent's text color.
+   */
+  icon?: ReactNode;
+
+  /**
+   * URL for navigable (non-current) items.
+   * When provided and `current` is false, renders as an `<a>` element.
+   */
+  href?: string;
+
+  /**
+   * Renders as a `...` trigger that opens a dropdown with overflow links.
+   * Used for the collapsed middle section of a long breadcrumb trail.
+   * @default false
+   */
+  dropdown?: boolean;
+
+  /**
+   * Items to show inside the dropdown panel.
+   * Only relevant when `dropdown` is true.
+   */
+  dropdownItems?: BreadcrumbDropdownItem[];
+
+  /** Click handler (used when the item is not rendered as <a>). */
+  onClick?: () => void;
+
+  /** Additional class names applied to the root element. */
+  className?: string;
+}

package/src/components/Breadcrumb/BreadcrumbItem.variants.ts

@@ -0,0 +1,102 @@
+/**
+ * BreadcrumbItem.variants.ts
+ *
+ * Color and layout tokens mapped from Figma node 4386-31595.
+ *
+ * ── Text colors ───────────────────────────────────────────────────────────────
+ *   Default (not current)   → #9da4ae  (global/text-default-disabled)
+ *   Default (current)       → #384250  (link/link-neutral)
+ *   Hovered                 → #6c737f  (text/text-secondary-paragraph)
+ *   Focused                 → same as default for that current state
+ *
+ * ── States (CSS pseudo-classes) ───────────────────────────────────────────────
+ *   Hover   → text color darkens
+ *   Focus   → 2px green ring rgba(27,131,84,0.7) at inset:-4px, radius-6
+ *   Active  → white bg pill (px-spacing-xs py-spacing-xxs rounded-[6px])
+ *
+ * ── Icon size ─────────────────────────────────────────────────────────────────
+ *   16×16 px — consistent across all types and states
+ *
+ * ── Dropdown panel ────────────────────────────────────────────────────────────
+ *   bg-white border-[#f3f4f6] rounded-[4px] shadow-xl
+ *   px-spacing-lg py-spacing-md gap-spacing-xl
+ */
+
+/* ── Text colors ─────────────────────────────────────────────────────────── */
+
+/** Non-current item color — muted gray */
+export const TEXT_MUTED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(107,114,128,1)]';
+
+/** Current/active page color — neutral dark */
+export const TEXT_CURRENT =
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]';
+
+/* ── Hover (darkens toward secondary-paragraph) ──────────────────────────── */
+export const HOVER_TEXT =
+  'hover:text-[rgba(108,115,127,1)] dark:hover:text-[rgba(156,163,175,1)]';
+
+/* ── Focus-visible ring ──────────────────────────────────────────────────── */
+/**
+ * Matches Figma "Border Element" — 2px green ring inset by 4px on all sides.
+ * `focus-visible:ring-offset-[-4px]` is not available in Tailwind; instead
+ * we use `focus-visible:outline` with a custom offset to replicate `inset:-4px`.
+ */
+export const FOCUS_RING = [
+  'focus-visible:outline-none',
+  'focus-visible:ring-2',
+  'focus-visible:ring-[rgba(27,131,84,0.7)]',
+  'focus-visible:ring-offset-0',
+  'focus-visible:rounded-[6px]',
+].join(' ');
+
+/* ── Active / pressed — white bg pill ────────────────────────────────────── */
+export const ACTIVE_BG =
+  'active:bg-white dark:active:bg-[rgba(31,42,55,1)] active:rounded-[6px]';
+
+/* ── Base item layout ────────────────────────────────────────────────────── */
+/**
+ * Constant `px-spacing-xs py-spacing-xxs` padding prevents layout shift when
+ * the active-state background pill appears.
+ */
+export const ITEM_BASE = [
+  'relative inline-flex items-center gap-spacing-xxs',
+  'px-spacing-xs py-spacing-xxs rounded-[6px]',
+  'text-text-sm font-[400] leading-[20px] whitespace-nowrap',
+  'motion-feedback',
+  'select-none',
+].join(' ');
+
+/* ── Dropdown: "..." trigger ─────────────────────────────────────────────── */
+export const DROPDOWN_TRIGGER = [
+  'relative inline-flex items-center',
+  'px-spacing-xs py-spacing-xxs rounded-[6px]',
+  'text-text-sm font-[400] leading-[20px] whitespace-nowrap',
+  'motion-feedback',
+  'cursor-pointer select-none',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
+  'hover:text-[rgba(108,115,127,1)] dark:hover:text-[rgba(156,163,175,1)]',
+  'active:bg-white dark:active:bg-[rgba(31,42,55,1)] active:rounded-[6px]',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:rounded-[6px]',
+].join(' ');
+
+/* ── Dropdown panel ──────────────────────────────────────────────────────── */
+export const DROPDOWN_PANEL = [
+  'absolute top-full start-0 mt-spacing-xs z-50',
+  'bg-white dark:bg-[rgba(17,24,39,1)]',
+  'border border-[rgba(243,244,246,1)] dark:border-[rgba(55,65,81,1)]',
+  'rounded-[4px]',
+  'shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),0px_8px_8px_-4px_rgba(16,24,40,0.03)]',
+  'flex flex-col',
+  'px-spacing-lg py-spacing-md gap-spacing-xl',
+  'min-w-[160px]',
+].join(' ');
+
+/* ── Dropdown item ───────────────────────────────────────────────────────── */
+export const DROPDOWN_ITEM = [
+  'text-text-sm font-[400] leading-[20px] whitespace-nowrap text-start',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
+  'hover:text-[rgba(108,115,127,1)] dark:hover:text-[rgba(156,163,175,1)]',
+  'motion-feedback',
+  'focus-visible:outline-none focus-visible:underline',
+].join(' ');

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,12 @@
+export { Breadcrumb } from './Breadcrumb';
+export { BreadcrumbItem } from './BreadcrumbItem';
+export type {
+  BreadcrumbProps,
+  BreadcrumbDivider,
+  BreadcrumbItem as BreadcrumbItemData,
+} from './Breadcrumb.types';
+export type {
+  BreadcrumbItemProps,
+  BreadcrumbItemType,
+  BreadcrumbDropdownItem,
+} from './BreadcrumbItem.types';

package/src/components/Button/Button.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { ButtonProps, ButtonSize } from './Button.types';
+import {
+  VARIANT_CLASSES,
+  DESTRUCTIVE_VARIANT_CLASSES,
+  SELECTED_CLASSES,
+  DISABLED_CLASSES,
+  SIZE_CLASSES,
+  ICON_ONLY_SIZE_CLASSES,
+  ICON_SIZE_CLASSES,
+  TRAILING_ICON_SIZE_CLASSES,
+  FOCUS_RING,
+} from './Button.variants';
+
+/* ── Component ────────────────────────────────────────────────── */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    leadingIcon,
+    trailingIcon,
+    leftIcon,
+    rightIcon,
+    iconOnly = false,
+    selected = false,
+    fullWidth = false,
+    destructive = false,
+    as,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const Comp = as ?? 'button';
+  const isDisabled = disabled;
+
+  /* Backward compat: leftIcon → leadingIcon, rightIcon → trailingIcon */
+  const leading = leadingIcon ?? leftIcon;
+  const trailing = trailingIcon ?? rightIcon;
+
+  /*
+   * Determine if destructive styling applies:
+   * - variant="destructive" (legacy API) → always destructive
+   * - destructive={true} prop on any variant → destructive modifier
+   */
+  const isDestructive = destructive || variant === 'destructive';
+
+  /* Resolve style classes based on state priority: disabled > selected > default */
+  let variantClass: string;
+  if (isDisabled) {
+    variantClass = DISABLED_CLASSES[variant];
+  } else if (selected) {
+    variantClass = SELECTED_CLASSES[variant];
+  } else if (isDestructive && variant !== 'destructive') {
+    /* Apply destructive modifier to the base variant */
+    variantClass = DESTRUCTIVE_VARIANT_CLASSES[variant] ?? VARIANT_CLASSES[variant];
+  } else {
+    variantClass = VARIANT_CLASSES[variant];
+  }
+
+  /* Size classes: icon-only uses square padding */
+  const sizeClass = iconOnly ? ICON_ONLY_SIZE_CLASSES[size] : SIZE_CLASSES[size];
+
+  /* Icon size class for consistent icon dimensions */
+  const iconSizeClass = ICON_SIZE_CLASSES[size];
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      data-anatomy="1"
+      disabled={isDisabled}
+      aria-pressed={selected ? true : undefined}
+      className={cn(
+        'inline-flex items-center justify-center font-[500] motion-feedback cursor-pointer',
+        sizeClass,
+        variantClass,
+        !isDisabled && FOCUS_RING,
+        fullWidth && 'w-full',
+        className,
+      )}
+      {...rest}
+    >
+      {leading ? (
+        <span data-slot="leading-icon" data-anatomy="3" className={cn('inline-flex items-center justify-center flex-shrink-0', iconSizeClass)}>{leading}</span>
+      ) : null}
+      {!iconOnly && (
+        <span data-anatomy="2">{children}</span>
+      )}
+      {trailing ? (
+        <span data-slot="trailing-icon" data-anatomy="4" className={cn('inline-flex items-center justify-center flex-shrink-0', TRAILING_ICON_SIZE_CLASSES[size])}>{trailing}</span>
+      ) : null}
+    </Comp>
+  );
+});

package/src/components/Button/Button.types.ts

@@ -0,0 +1,44 @@
+import type { ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+
+export type ButtonVariant =
+  | 'neutral'
+  | 'primary'
+  | 'destructive'
+  | 'secondary-solid'
+  | 'secondary-outline'
+  | 'subtle'
+  | 'transparent';
+
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual style of the button */
+  variant?: ButtonVariant;
+  /** Size of the button */
+  size?: ButtonSize;
+  /** Disables the button and prevents interaction */
+  disabled?: boolean;
+  /** Icon displayed before the button label (direction-aware) */
+  leadingIcon?: ReactNode;
+  /** Icon displayed after the button label (direction-aware) */
+  trailingIcon?: ReactNode;
+  /** @deprecated Use leadingIcon instead */
+  leftIcon?: ReactNode;
+  /** @deprecated Use trailingIcon instead */
+  rightIcon?: ReactNode;
+  /** Renders the button as a square icon-only button */
+  iconOnly?: boolean;
+  /** Marks the button as selected (toggled on) */
+  selected?: boolean;
+  /** Makes the button take the full width of its container */
+  fullWidth?: boolean;
+  /**
+   * Applies destructive (danger) styling to the current variant.
+   * Works with: primary, secondary-solid, secondary-outline, subtle, transparent.
+   * When variant="destructive" is used (legacy API), this is implied.
+   */
+  destructive?: boolean;
+  /** Override the rendered HTML element */
+  as?: ElementType;
+  children?: ReactNode;
+}

package/src/components/Button/Button.variants.ts

@@ -0,0 +1,183 @@
+import type { ButtonVariant, ButtonSize } from './Button.types';
+
+/* ── Focus ring (shared across all variants) ──────────────────── */
+export const FOCUS_RING =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,1)] focus-visible:ring-offset-2 dark:focus-visible:ring-[rgba(210,214,219,1)] dark:focus-visible:ring-offset-[rgba(17,25,39,1)]';
+
+/* ── Variant classes (default + hover + active states) ────────── */
+export const VARIANT_CLASSES: Record<ButtonVariant, string> = {
+  neutral: [
+    'bg-[rgba(13,18,28,1)] text-white cursor-pointer',
+    'hover:bg-[rgba(31,42,55,1)]',
+    'active:bg-[rgba(77,87,97,1)]',
+    'dark:bg-[rgba(243,244,246,1)] dark:text-[rgba(13,18,28,1)]',
+    'dark:hover:bg-[rgba(229,231,235,1)]',
+    'dark:active:bg-[rgba(210,214,219,1)]',
+  ].join(' '),
+
+  primary: [
+    'bg-[rgba(27,131,84,1)] text-white cursor-pointer',
+    'hover:bg-[rgba(22,106,69,1)]',
+    'active:bg-[rgba(16,70,49,1)]',
+    'dark:bg-[rgba(27,131,84,1)] dark:text-white',
+    'dark:hover:bg-[rgba(22,106,69,1)]',
+    'dark:active:bg-[rgba(16,70,49,1)]',
+  ].join(' '),
+
+  /* Legacy standalone destructive variant — maps to primary destructive */
+  destructive: [
+    'bg-[rgba(217,45,32,1)] text-white cursor-pointer',
+    'hover:bg-[rgba(180,35,24,1)]',
+    'active:bg-[rgba(145,28,19,1)]',
+    'dark:bg-[rgba(217,45,32,1)] dark:text-white',
+    'dark:hover:bg-[rgba(180,35,24,1)]',
+    'dark:active:bg-[rgba(145,28,19,1)]',
+  ].join(' '),
+
+  'secondary-solid': [
+    'bg-[rgba(243,244,246,1)] text-[rgba(22,22,22,1)] cursor-pointer',
+    'hover:bg-[rgba(243,244,246,1)]',
+    'active:bg-[rgba(210,214,219,1)]',
+    'dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(243,244,246,1)]',
+    'dark:hover:bg-[rgba(56,66,80,1)]',
+    'dark:active:bg-[rgba(77,87,97,1)]',
+  ].join(' '),
+
+  'secondary-outline': [
+    'border border-[rgba(210,214,219,1)] bg-transparent text-[rgba(22,22,22,1)] cursor-pointer',
+    'hover:bg-[rgba(243,244,246,1)]',
+    'active:bg-[rgba(210,214,219,1)]',
+    'dark:border-[rgba(75,85,99,1)] dark:text-[rgba(243,244,246,1)]',
+    'dark:hover:bg-[rgba(31,42,55,1)]',
+    'dark:active:bg-[rgba(56,66,80,1)]',
+  ].join(' '),
+
+  subtle: [
+    'bg-transparent text-[rgba(22,22,22,1)] cursor-pointer',
+    'hover:bg-[rgba(243,244,246,1)]',
+    'active:bg-[rgba(210,214,219,1)]',
+    'dark:text-[rgba(243,244,246,1)]',
+    'dark:hover:bg-[rgba(31,42,55,1)]',
+    'dark:active:bg-[rgba(56,66,80,1)]',
+  ].join(' '),
+
+  transparent: [
+    'bg-transparent text-[rgba(22,22,22,1)] cursor-pointer',
+    'hover:text-[rgba(22,106,69,1)]',
+    'active:text-[rgba(16,70,49,1)]',
+    'dark:text-[rgba(243,244,246,1)]',
+    'dark:hover:text-[rgba(110,231,160,1)]',
+    'dark:active:text-[rgba(74,206,131,1)]',
+  ].join(' '),
+};
+
+/* ── Destructive modifier classes per variant ────────────────── */
+export const DESTRUCTIVE_VARIANT_CLASSES: Partial<Record<ButtonVariant, string>> = {
+  primary: [
+    'bg-[rgba(217,45,32,1)] text-white cursor-pointer',
+    'hover:bg-[rgba(180,35,24,1)]',
+    'active:bg-[rgba(145,28,19,1)]',
+    'dark:bg-[rgba(217,45,32,1)] dark:text-white',
+    'dark:hover:bg-[rgba(180,35,24,1)]',
+    'dark:active:bg-[rgba(145,28,19,1)]',
+  ].join(' '),
+
+  'secondary-solid': [
+    'bg-[rgba(254,243,242,1)] text-[rgba(180,35,24,1)] cursor-pointer',
+    'hover:bg-[rgba(254,228,226,1)]',
+    'active:bg-[rgba(253,205,202,1)]',
+    'dark:bg-[rgba(60,18,14,1)] dark:text-[rgba(253,205,202,1)]',
+    'dark:hover:bg-[rgba(80,24,18,1)]',
+    'dark:active:bg-[rgba(100,30,22,1)]',
+  ].join(' '),
+
+  'secondary-outline': [
+    'border border-[rgba(254,205,202,1)] bg-transparent text-[rgba(180,35,24,1)] cursor-pointer',
+    'hover:bg-[rgba(254,243,242,1)]',
+    'active:bg-[rgba(254,228,226,1)]',
+    'dark:border-[rgba(145,28,19,1)] dark:text-[rgba(253,205,202,1)]',
+    'dark:hover:bg-[rgba(60,18,14,1)]',
+    'dark:active:bg-[rgba(80,24,18,1)]',
+  ].join(' '),
+
+  subtle: [
+    'bg-transparent text-[rgba(180,35,24,1)] cursor-pointer',
+    'hover:bg-[rgba(254,243,242,1)]',
+    'active:bg-[rgba(254,228,226,1)]',
+    'dark:text-[rgba(253,205,202,1)]',
+    'dark:hover:bg-[rgba(60,18,14,1)]',
+    'dark:active:bg-[rgba(80,24,18,1)]',
+  ].join(' '),
+
+  transparent: [
+    'bg-transparent text-[rgba(217,45,32,1)] cursor-pointer',
+    'hover:text-[rgba(180,35,24,1)]',
+    'active:text-[rgba(145,28,19,1)]',
+    'dark:text-[rgba(253,205,202,1)]',
+    'dark:hover:text-[rgba(254,228,226,1)]',
+    'dark:active:text-[rgba(254,243,242,1)]',
+  ].join(' '),
+};
+
+/* ── Selected state overrides ─────────────────────────────────── */
+export const SELECTED_CLASSES: Record<ButtonVariant, string> = {
+  neutral: 'bg-[rgba(56,66,80,1)] text-white dark:bg-[rgba(210,214,219,1)] dark:text-[rgba(13,18,28,1)]',
+  primary: 'bg-[rgba(20,87,58,1)] text-white dark:bg-[rgba(20,87,58,1)] dark:text-white',
+  destructive: 'bg-[rgba(180,35,24,1)] text-white dark:bg-[rgba(180,35,24,1)] dark:text-white',
+  'secondary-solid': 'bg-[rgba(229,231,235,1)] text-[rgba(22,22,22,1)] dark:bg-[rgba(56,66,80,1)] dark:text-[rgba(243,244,246,1)]',
+  'secondary-outline':
+    'border border-[rgba(210,214,219,1)] bg-[rgba(229,231,235,1)] text-[rgba(22,22,22,1)] dark:border-[rgba(75,85,99,1)] dark:bg-[rgba(56,66,80,1)] dark:text-[rgba(243,244,246,1)]',
+  subtle:
+    'border border-[rgba(210,214,219,1)] bg-[rgba(229,231,235,1)] text-[rgba(22,22,22,1)] dark:border-[rgba(75,85,99,1)] dark:bg-[rgba(56,66,80,1)] dark:text-[rgba(243,244,246,1)]',
+  transparent: 'bg-transparent text-[rgba(20,87,58,1)] dark:text-[rgba(110,231,160,1)]',
+};
+
+/* ── Disabled state overrides ─────────────────────────────────── */
+export const DISABLED_CLASSES: Record<ButtonVariant, string> = {
+  neutral:
+    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
+  primary:
+    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
+  destructive:
+    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
+  'secondary-solid':
+    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
+  'secondary-outline':
+    'border border-[rgba(229,231,235,1)] bg-transparent text-[rgba(157,164,174,1)] pointer-events-none dark:border-[rgba(56,66,80,1)] dark:text-[rgba(75,85,99,1)]',
+  subtle:
+    'bg-transparent text-[rgba(157,164,174,1)] pointer-events-none dark:text-[rgba(75,85,99,1)]',
+  transparent:
+    'bg-transparent text-[rgba(157,164,174,1)] pointer-events-none dark:text-[rgba(75,85,99,1)]',
+};
+
+/* ── Size classes (using global responsive tokens) ───────────── */
+export const SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: 'px-spacing-md py-[3px] text-text-xs rounded-[8px] gap-spacing-xs',
+  md: 'px-spacing-lg py-spacing-sm text-text-sm rounded-[8px] gap-spacing-xs',
+  lg: 'px-spacing-xl py-spacing-md text-text-md rounded-[8px] gap-spacing-xs',
+};
+
+/* ── Icon-only size classes (square padding) ──────────────────── */
+export const ICON_ONLY_SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: 'p-spacing-xs text-text-xs rounded-[8px]',
+  md: 'p-spacing-sm text-text-sm rounded-[8px]',
+  lg: 'p-spacing-md text-text-md rounded-[8px]',
+};
+
+/* ── Icon size classes (responsive) ──────────────────────────── */
+export const ICON_SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: 'size-icon-sm',
+  md: 'size-icon-md',
+  lg: 'size-icon-lg',
+};
+
+/* ── Trailing icon size classes (fixed per Figma spec) ────────
+ *  Figma ButtonMenu trailing icon dimensions are fixed (not
+ *  responsive): sm=12px, md=16px, lg=20px. Using the responsive
+ *  size-icon-* tokens would make them 4px too large on desktop.
+ * ─────────────────────────────────────────────────────────── */
+export const TRAILING_ICON_SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: 'size-icon-xs',
+  md: 'size-[16px]',
+  lg: 'size-[20px]',
+};

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';

package/src/components/ButtonClose/ButtonClose.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { ButtonCloseProps } from './ButtonClose.types';
+import {
+  BASE_CLASSES,
+  INTERACTION_CLASSES,
+  FOCUS_CLASSES,
+  SIZE_CLASSES,
+  ICON_SIZE_CLASSES,
+} from './ButtonClose.variants';
+import { CloseIcon } from '../../icons/IconFactory';
+
+export const ButtonClose = forwardRef<HTMLButtonElement, ButtonCloseProps>(
+  function ButtonClose(
+    {
+      size = 'md',
+      'aria-label': ariaLabel = 'Close',
+      className,
+      type = 'button',
+      ...rest
+    },
+    ref,
+  ) {
+    const sizeClass     = SIZE_CLASSES[size];
+    const iconSizeClass = ICON_SIZE_CLASSES[size];
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        data-slot="button-close"
+        aria-label={ariaLabel}
+        className={cn(
+          'inline-flex items-center justify-center flex-shrink-0',
+          BASE_CLASSES,
+          sizeClass,
+          INTERACTION_CLASSES,
+          FOCUS_CLASSES,
+          className,
+        )}
+        {...rest}
+      >
+        <span
+          data-slot="close-icon"
+          className={cn(
+            'inline-flex items-center justify-center flex-shrink-0',
+            iconSizeClass,
+          )}
+        >
+          <CloseIcon aria-hidden="true" />
+        </span>
+      </button>
+    );
+  },
+);

package/src/components/ButtonClose/ButtonClose.types.ts

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+/** Four size tiers matching Figma — xSmall / Small / Medium / Large */
+export type ButtonCloseSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface ButtonCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Size of the close button.
+   * xs = 16px container, sm = 24px, md = 32px, lg = 40px.
+   * @default 'md'
+   */
+  size?: ButtonCloseSize;
+  /**
+   * Accessible label for screen readers.
+   * Defaults to "Close" when not supplied.
+   */
+  'aria-label'?: string;
+}

package/src/components/ButtonClose/ButtonClose.variants.ts

@@ -0,0 +1,72 @@
+import type { ButtonCloseSize } from './ButtonClose.types';
+
+/* ── Base classes (icon color + cursor + transition) ──────────── */
+export const BASE_CLASSES = [
+  'text-[rgba(22,22,22,1)]',                           // Icon/icon-default light
+  'dark:text-[rgba(229,231,235,1)]',                   // icon color dark
+  'cursor-pointer',
+  'motion-feedback',
+].join(' ');
+
+/* ── Interactive state classes (hover + active) ───────────────── */
+export const INTERACTION_CLASSES = [
+  'hover:bg-[rgba(243,244,246,1)] hover:rounded-[4px]', // Button/button-background-neutral-hovered
+  'active:bg-[rgba(229,231,235,1)] active:rounded-[4px]', // Button/button-background-neutral-pressed
+  'dark:hover:bg-[rgba(31,42,55,1)]',
+  'dark:active:bg-[rgba(56,66,80,1)]',
+].join(' ');
+
+/* ── Focus ring
+     Figma shows a solid border (not offset ring) with width varying by size.
+     Border color: Border/border-black = rgba(22,22,22,1) light.
+     Width is added per-size in SIZE_CLASSES via focus-visible: modifier.
+─────────────────────────────────────────────────────────────────── */
+export const FOCUS_CLASSES = [
+  'focus-visible:outline-none',
+  'focus-visible:border-solid',
+  'focus-visible:border-[rgba(22,22,22,1)]',           // Border/border-black
+  'focus-visible:rounded-[4px]',
+  'dark:focus-visible:border-[rgba(210,214,219,1)]',
+].join(' ');
+
+/* ── Size classes
+     Padding: fixed pixel values matching Figma exactly.
+     spacing-sm scales 6px→8px at desktop, which made Medium 36px instead
+     of the spec's 32px — so Medium uses p-[6px] hardcoded.
+     spacing-none (0px) and spacing-md (always 8px) are stable; only
+     spacing-sm has the responsive drift issue for this component.
+     Focus border-width per Figma (xSmall=1px, Small=1.5px, Medium/Large=2px).
+─────────────────────────────────────────────────────────────────── */
+export const SIZE_CLASSES: Record<ButtonCloseSize, string> = {
+  xs: [
+    'p-spacing-none rounded-[4px]',
+    'focus-visible:border',                            // 1px — Figma xSmall focused
+  ].join(' '),
+
+  sm: [
+    'p-spacing-xxs rounded-[4px]',
+    'focus-visible:border-[1.5px]',                    // 1.5px — Figma Small focused
+  ].join(' '),
+
+  md: [
+    'p-[6px] rounded-[4px]',                          // Figma: spacing-sm=6px (fixed). Our token scales to 8px at desktop → 36px. Hardcode 6px → 32px.
+    'focus-visible:border-2',                          // 2px — Figma Medium focused
+  ].join(' '),
+
+  lg: [
+    'p-spacing-md rounded-[4px]',
+    'focus-visible:border-2',                          // 2px — Figma Large focused
+  ].join(' '),
+};
+
+/* ── Icon size classes — fixed pixel values matching Figma exactly.
+     Figma: xSmall=16px, Small=20px, Medium=20px, Large=24px (all fixed).
+     Responsive tokens (size-icon-sm/md/lg) scale DOWN on tablet/mobile,
+     causing the Large icon to render at 20px instead of the spec's 24px.
+─────────────────────────────────────────────────────────────────── */
+export const ICON_SIZE_CLASSES: Record<ButtonCloseSize, string> = {
+  xs: 'size-[16px]',
+  sm: 'size-[20px]',
+  md: 'size-[20px]',
+  lg: 'size-[24px]',
+};

package/src/components/ButtonClose/index.ts

@@ -0,0 +1,2 @@
+export { ButtonClose } from './ButtonClose';
+export type { ButtonCloseProps, ButtonCloseSize } from './ButtonClose.types';