sdaia-ui 1.0.1 → 1.0.2

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

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

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

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

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

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

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

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

package/src/components/ButtonClose/ButtonClose.tsx

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

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

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

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