sdaia-ui 1.0.1 → 1.0.2

package/src/components/Accordion/Accordion.variants.ts

@@ -1,283 +0,0 @@
-import { ChevronDownIcon } from '../../icons/IconFactory';
-import { cn } from '../../lib/cn';
-import type {
-  AccordionIconAlign,
-  AccordionState,
-  AccordionStyle,
-} from './Accordion.types';
-
-/* ── Types ────────────────────────────────────────────────────── */
-export interface AccordionStyleSet {
-  container: string;
-  trigger: string;
-  divider: string;
-  title: string;
-  icon: string;
-  iconContainer: string;
-  content: string;
-  iconExpanded: string;
-}
-
-type AccordionStateMatrix = Record<
-  AccordionState,
-  Record<AccordionIconAlign, { collapsed: AccordionStyleSet; expanded: AccordionStyleSet }>
->;
-
-/* ── Icon — single rotating chevron (motion-expand-rotate) ───── */
-export const ACCORDION_ICON = ChevronDownIcon;
-
-
-/* ── Style base tokens ────────────────────────────────────────
- * Per Figma node 4231:32037, the title is always `Text md/Semibold`
- * (16/24) and the body is `Text md/Regular` (16/24) regardless of
- * size; only padding changes per size. Block radius is `radius-8`.
- * Light/Light-Compact use 0 horizontal padding (the visual inset
- * comes from the parent surface). Block uses spacing-xl (16 on desktop).
- * ──────────────────────────────────────────────────────────── */
-const STYLE_BASE: Record<
-  AccordionStyle,
-  {
-    container: string;
-    triggerPaddingX: string;
-    contentPaddingX: string;
-    contentPaddingLeadingX: string;
-    contentPaddingY: string;
-    divider: string;
-    expandedDivider: string;
-  }
-> = {
-  light: {
-    container: 'bg-transparent',
-    triggerPaddingX: 'ps-spacing-xl pe-spacing-xl',
-    contentPaddingX: 'ps-spacing-xl pe-spacing-xl',
-    contentPaddingLeadingX:
-      'ps-[calc(var(--ds-spacing-xl)_+_var(--ds-icon-sm)_+_var(--ds-spacing-lg))] pe-spacing-xl',
-    contentPaddingY: 'pt-spacing-lg pb-spacing-5xl',
-    divider: 'h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(56,66,80,1)]',
-    expandedDivider: 'h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(56,66,80,1)]',
-  },
-  'light-compact': {
-    container: 'bg-transparent',
-    triggerPaddingX: 'ps-spacing-none pe-spacing-none',
-    contentPaddingX: 'ps-spacing-none pe-spacing-none',
-    contentPaddingLeadingX:
-      'ps-[calc(var(--ds-icon-sm)_+_var(--ds-spacing-lg))] pe-spacing-none',
-    contentPaddingY: 'pt-spacing-md pb-spacing-xl',
-    divider: 'h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(56,66,80,1)]',
-    expandedDivider: 'h-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(56,66,80,1)]',
-  },
-  block: {
-    container:
-      'bg-transparent border border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)] rounded-[8px] overflow-hidden',
-    triggerPaddingX: 'ps-spacing-xl pe-spacing-xl',
-    contentPaddingX: 'ps-spacing-xl pe-spacing-xl',
-    contentPaddingLeadingX:
-      'ps-[calc(var(--ds-spacing-xl)_+_var(--ds-icon-sm)_+_var(--ds-spacing-lg))] pe-spacing-xl',
-    contentPaddingY: 'pt-spacing-md pb-spacing-3xl',
-    divider: '',
-    expandedDivider: '',
-  },
-};
-
-/* ── State tokens (shared defaults) ──────────────────────────── */
-interface StateTokens {
-  container?: string;
-  trigger: string;
-  divider?: string;
-  title: string;
-  icon: string;
-  content: string;
-}
-
-const DEFAULT_STATE_TOKENS: Record<AccordionState, StateTokens> = {
-  default: {
-    trigger: 'bg-transparent motion-feedback',
-    title: 'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
-    icon: 'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
-    content: 'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
-  },
-  hovered: {
-    trigger: 'bg-transparent motion-feedback',
-    title: 'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]',
-    icon: 'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
-    content: 'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
-  },
-  pressed: {
-    trigger: 'bg-transparent motion-feedback',
-    title: 'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]',
-    icon: 'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
-    content: 'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
-  },
-  focused: {
-    trigger: 'bg-transparent motion-feedback',
-    title: 'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]',
-    icon: 'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
-    content: 'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
-  },
-  disabled: {
-    trigger: 'pointer-events-none cursor-not-allowed bg-transparent',
-    title: 'text-[rgba(157,164,174,1)] dark:text-[rgba(107,114,128,1)]',
-    icon: 'text-[rgba(157,164,174,1)] dark:text-[rgba(107,114,128,1)]',
-    content: 'text-[rgba(157,164,174,1)] dark:text-[rgba(107,114,128,1)]',
-  },
-};
-
-/* ── Style-specific state overrides ──────────────────────────── */
-const STYLE_STATE_OVERRIDES: Partial<
-  Record<AccordionStyle, Partial<Record<AccordionState, Partial<StateTokens>>>>
-> = {
-  light: {
-    hovered: {
-      divider: 'h-[2px] -mb-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(56,66,80,1)]',
-    },
-    focused: {
-      divider: 'h-[2px] -mb-px bg-[rgba(22,22,22,1)] dark:bg-[rgba(229,231,235,1)]',
-    },
-  },
-  'light-compact': {
-    hovered: {
-      divider: 'h-[2px] -mb-px bg-[rgba(210,214,219,1)] dark:bg-[rgba(56,66,80,1)]',
-    },
-    focused: {
-      divider: 'h-[2px] -mb-px bg-[rgba(22,22,22,1)] dark:bg-[rgba(229,231,235,1)]',
-    },
-  },
-  block: {
-    hovered: {
-      container:
-        'border border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)] rounded-[8px] overflow-hidden bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]',
-      trigger: 'motion-feedback',
-    },
-    pressed: {
-      container:
-        'border border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)] rounded-[8px] overflow-hidden bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]',
-      trigger: 'motion-feedback',
-    },
-    focused: {
-      container:
-        'bg-transparent border border-[rgba(22,22,22,1)] dark:border-[rgba(229,231,235,1)] rounded-[8px] overflow-hidden',
-    },
-    disabled: {
-      container:
-        'border border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)] rounded-[8px] overflow-hidden bg-transparent',
-      trigger: 'pointer-events-none cursor-not-allowed',
-      title: 'text-[rgba(157,164,174,1)] dark:text-[rgba(107,114,128,1)]',
-      icon: 'text-[rgba(157,164,174,1)] dark:text-[rgba(107,114,128,1)]',
-    },
-  },
-};
-
-/* ── Resolve state tokens with style overrides ───────────────── */
-function getStateTokens(style: AccordionStyle, state: AccordionState): StateTokens {
-  const base = DEFAULT_STATE_TOKENS[state];
-  const overrides = STYLE_STATE_OVERRIDES[style]?.[state];
-  if (!overrides) return base;
-  return { ...base, ...overrides };
-}
-
-/* ── Alignment layout tokens ─────────────────────────────────── */
-const ALIGNMENT_TOKENS: Record<
-  AccordionIconAlign,
-  { triggerLayout: string; title: string; iconContainer: string }
-> = {
-  trailing: {
-    triggerLayout:
-      'w-full flex items-center justify-between gap-spacing-lg text-start',
-    title: 'flex-1',
-    iconContainer: 'order-2 flex-shrink-0',
-  },
-  leading: {
-    triggerLayout:
-      'w-full flex items-center justify-start gap-spacing-lg text-start',
-    title: 'order-2 flex-1',
-    iconContainer: 'order-1 flex-shrink-0',
-  },
-};
-
-/* ── Build a single style set ────────────────────────────────── */
-function createStyleSet(
-  style: AccordionStyle,
-  state: AccordionState,
-  alignment: AccordionIconAlign,
-  expanded: boolean,
-): AccordionStyleSet {
-  const styleBase = STYLE_BASE[style];
-  const stateTokens = getStateTokens(style, state);
-  const alignmentTokens = ALIGNMENT_TOKENS[alignment];
-
-  const container = stateTokens.container ?? styleBase.container;
-  const contentPaddingX = styleBase.contentPaddingX;
-
-  const divider = stateTokens.divider
-    ? stateTokens.divider
-    : expanded
-      ? styleBase.expandedDivider
-      : styleBase.divider;
-
-  return {
-    container,
-    /* Trigger: layout + horizontal padding (style) + state. Vertical
-     * padding and font-size are owned by SIZE_CLASSES in Accordion.tsx
-     * so there is exactly one source of truth per axis. */
-    trigger: cn(
-      alignmentTokens.triggerLayout,
-      styleBase.triggerPaddingX,
-      stateTokens.trigger,
-    ),
-    divider,
-    title: cn(alignmentTokens.title, stateTokens.title),
-    icon: stateTokens.icon,
-    iconContainer: alignmentTokens.iconContainer,
-    content: cn(
-      contentPaddingX,
-      styleBase.contentPaddingY,
-      stateTokens.content,
-    ),
-    iconExpanded: expanded ? 'rotate-180' : '',
-  };
-}
-
-/* ── Full style matrix: style x state x alignment x expanded ─── */
-const STYLES = ['light', 'light-compact', 'block'] as const;
-const STATES = ['default', 'hovered', 'pressed', 'focused', 'disabled'] as const;
-const ALIGNMENTS = ['trailing', 'leading'] as const;
-
-export const ACCORDION_STYLES: Record<AccordionStyle, AccordionStateMatrix> =
-  STYLES.reduce(
-    (styleAcc, style) => {
-      const stateMap = STATES.reduce((stateAcc, state) => {
-        const alignmentMap = ALIGNMENTS.reduce((alignmentAcc, alignment) => {
-          alignmentAcc[alignment] = {
-            collapsed: createStyleSet(style, state, alignment, false),
-            expanded: createStyleSet(style, state, alignment, true),
-          };
-          return alignmentAcc;
-        }, {} as AccordionStateMatrix[AccordionState]);
-
-        stateAcc[state] = alignmentMap;
-        return stateAcc;
-      }, {} as AccordionStateMatrix);
-
-      styleAcc[style] = stateMap;
-      return styleAcc;
-    },
-    {} as Record<AccordionStyle, AccordionStateMatrix>,
-  );
-
-/* ── Backward compatibility (existing consumers) ─────────────── */
-type LegacyState = Extract<AccordionState, 'default' | 'hovered'>;
-
-export const ACCORDION_STATE_STYLES: Record<
-  LegacyState,
-  Pick<AccordionStyleSet, 'container' | 'trigger' | 'divider' | 'title' | 'icon'>
-> = {
-  default: ACCORDION_STYLES.light.default.trailing.collapsed,
-  hovered: ACCORDION_STYLES.light.hovered.trailing.collapsed,
-};
-
-export const ACCORDION_EXPANDED_STYLES: Pick<
-  AccordionStyleSet,
-  'container' | 'trigger' | 'divider' | 'title' | 'icon' | 'content' | 'iconExpanded'
-> = {
-  ...ACCORDION_STYLES.light.default.trailing.expanded,
-};

package/src/components/Accordion/index.ts

@@ -1,9 +0,0 @@
-export { Accordion } from './Accordion';
-export type {
-  AccordionProps,
-  AccordionDirection,
-  AccordionSize,
-  AccordionStyle,
-  AccordionState,
-  AccordionIconAlign,
-} from './Accordion.types';

package/src/components/ActionBar/ActionBar.tsx

@@ -1,192 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import { Button } from '../Button';
-import type { ActionBarProps, ActionBarGroup, ActionBarSize } from './ActionBar.types';
-import {
-  ACTION_BTN_BASE,
-  TEXT_BTN_START,
-  TEXT_BTN_END,
-  GROUP_GAP,
-  DIVIDER_CLASS,
-  FOCUS_RING,
-  ARROW_RIGHT_PATH,
-  ARROW_RIGHT_VIEWBOX,
-} from './ActionBar.variants';
-
-/* ── Arrow-right-02 icon ─────────────────────────────────────────
- * Figma node 4072:2374 — "arrow-right-02"
- * Path reused from ButtonGroup.variants.ts (same Figma asset).
- * width/height="100%" — size is driven by the wrapping span's size-icon-* class.
- * stroke="currentColor" — colour inherits from parent for dark mode / hover.
- * ─────────────────────────────────────────────────────────────── */
-function ArrowRightIcon() {
-  return (
-    <svg
-      width="100%"
-      height="100%"
-      viewBox={ARROW_RIGHT_VIEWBOX}
-      fill="none"
-      aria-hidden="true"
-    >
-      <path
-        d={ARROW_RIGHT_PATH}
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-/* ── ButtonPair — two text buttons with a 1 px centre divider ─────
- *
- * Each button group in Figma (Pair / Triple) renders as two adjacent
- * buttons separated by a thin vertical line.
- *
- * RTL: rounded-s-[*] and rounded-e-[*] are logical properties — they flip
- * automatically when dir="rtl" is set on html.
- * ─────────────────────────────────────────────────────────────── */
-function ButtonPair({ group, size }: { group: ActionBarGroup; size: ActionBarSize }) {
-  const [btn1, btn2] = group.buttons;
-
-  return (
-    <div
-      data-slot="action-bar-group"
-      className="inline-flex items-center self-stretch shrink-0"
-    >
-      {/* Start button — logical-start radius only */}
-      <button
-        type="button"
-        disabled={btn1.disabled}
-        onClick={btn1.onClick}
-        aria-label={btn1.ariaLabel}
-        className={cn(
-          'inline-flex h-full items-center justify-center font-[500] motion-feedback cursor-pointer whitespace-nowrap',
-          'disabled:pointer-events-none',
-          // Size BEFORE variant — ensures text-white from ACTION_BTN_BASE
-          // wins over text-text-* font-size token in tailwind-merge resolution.
-          TEXT_BTN_START[size],
-          ACTION_BTN_BASE,
-          FOCUS_RING,
-        )}
-      >
-        {btn1.label}
-      </button>
-
-      {/* 1 px vertical divider — Figma: Colors/Neutral/700 = rgba(56,66,80,1) */}
-      <div
-        aria-hidden="true"
-        className={cn('self-stretch w-px shrink-0', DIVIDER_CLASS)}
-      />
-
-      {/* End button — logical-end radius only */}
-      <button
-        type="button"
-        disabled={btn2.disabled}
-        onClick={btn2.onClick}
-        aria-label={btn2.ariaLabel}
-        className={cn(
-          'inline-flex h-full items-center justify-center font-[500] motion-feedback cursor-pointer whitespace-nowrap',
-          'disabled:pointer-events-none',
-          // Size BEFORE variant — same reason as start button above.
-          TEXT_BTN_END[size],
-          ACTION_BTN_BASE,
-          FOCUS_RING,
-        )}
-      >
-        {btn2.label}
-      </button>
-    </div>
-  );
-}
-
-/* ── Fallback group used when consumer omits the prop ──────────── */
-const DEFAULT_GROUP: ActionBarGroup = {
-  buttons: [{ label: 'Button' }, { label: 'Button' }],
-};
-
-/* ── ActionBar ───────────────────────────────────────────────────
- *
- * A horizontal toolbar combining a leading icon-only button with up to
- * two text-button pair groups.
- *
- * Figma: "Action Bar" — node 4101:5816
- *
- * ## Variants (Figma "Group Type" × "Size"):
- *   groupType  single | pair | triple
- *   size       sm | md | lg
- *
- * ## Leading icon button
- *   Reuses the existing Button component (variant="neutral", iconOnly).
- *   Button's ICON_ONLY_SIZE_CLASSES already match ActionBar Figma values
- *   exactly (lg→p-spacing-md, md→p-spacing-sm, sm→p-spacing-xs), so no
- *   padding override is needed.
- *
- * ## RTL
- *   Button handles its own RTL. ButtonPair uses rounded-s-[n] and rounded-e-[n]
- *   logical properties that flip automatically under dir="rtl".
- *   gap-spacing-lg is direction-agnostic.
- *
- * ## Dark mode
- *   ACTION_BTN_BASE (neutral Button variant) carries full dark: classes.
- *   DIVIDER_CLASS has an explicit dark:bg override.
- *   text-white inside buttons remains legible in both modes.
- * ─────────────────────────────────────────────────────────────── */
-export const ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(function ActionBar(
-  {
-    groupType = 'single',
-    size = 'md',
-    icon,
-    onIconClick,
-    iconAriaLabel = 'Action',
-    group1,
-    group2,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const showGroups = groupType === 'pair' || groupType === 'triple';
-  const showSecondGroup = groupType === 'triple';
-
-  const g1 = group1 ?? DEFAULT_GROUP;
-  const g2 = group2 ?? DEFAULT_GROUP;
-
-  return (
-    <div
-      ref={ref}
-      data-slot="action-bar"
-      className={cn(
-        'inline-flex items-center',
-        showGroups && GROUP_GAP,
-        className,
-      )}
-      {...rest}
-    >
-      {/* ── Leading icon-only button ──────────────────────────────
-       * Uses existing Button (variant="neutral", iconOnly) so that
-       * hover, active, focus-ring, and dark-mode behaviour stays in
-       * sync with the rest of the design system automatically.
-       * ─────────────────────────────────────────────────────────── */}
-      <Button
-        variant="neutral"
-        iconOnly
-        size={size}
-        onClick={onIconClick}
-        aria-label={iconAriaLabel}
-        leadingIcon={icon ?? <ArrowRightIcon />}
-        data-slot="action-bar-icon-btn"
-        className="shrink-0"
-      />
-
-      {/* ── First button pair group (pair + triple) ─────────────── */}
-      {showGroups && <ButtonPair group={g1} size={size} />}
-
-      {/* ── Second button pair group (triple only) ──────────────── */}
-      {showSecondGroup && <ButtonPair group={g2} size={size} />}
-    </div>
-  );
-});

package/src/components/ActionBar/ActionBar.types.ts

@@ -1,67 +0,0 @@
-import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
-
-/** How many button groups appear after the leading icon button. */
-export type ActionBarGroupType = 'single' | 'pair' | 'triple';
-
-/** Three size tiers — maps Figma Large→lg, Medium→md, Small→sm */
-export type ActionBarSize = 'sm' | 'md' | 'lg';
-
-/** A single interactive button within an ActionBar button group. */
-export interface ActionBarButtonItem {
-  /** Visible label text. */
-  label: string;
-  /** Click handler for this button. */
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  /** Accessible label override (defaults to `label`). */
-  ariaLabel?: string;
-  /** Disables this individual button. */
-  disabled?: boolean;
-}
-
-/**
- * A pair of buttons forming one segment group.
- * The two buttons are separated by a 1 px vertical divider.
- */
-export interface ActionBarGroup {
-  /** Exactly two buttons in this group. */
-  buttons: [ActionBarButtonItem, ActionBarButtonItem];
-}
-
-export interface ActionBarProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Controls how many button groups appear after the leading icon button.
-   * - `'single'`  → icon button only
-   * - `'pair'`    → icon button + one text-button group (2 buttons)
-   * - `'triple'`  → icon button + two text-button groups (4 buttons total)
-   *
-   * Defaults to `'single'`.
-   */
-  groupType?: ActionBarGroupType;
-
-  /** Size tier. Defaults to `'md'`. */
-  size?: ActionBarSize;
-
-  /**
-   * Custom icon rendered inside the leading icon-only button.
-   * Defaults to the arrow-right-02 icon from Figma.
-   */
-  icon?: ReactNode;
-
-  /** Click handler for the leading icon-only button. */
-  onIconClick?: MouseEventHandler<HTMLButtonElement>;
-
-  /** Accessible label for the leading icon-only button. Defaults to `'Action'`. */
-  iconAriaLabel?: string;
-
-  /**
-   * First button group — rendered when `groupType` is `'pair'` or `'triple'`.
-   * If not provided, falls back to placeholder "Button" labels.
-   */
-  group1?: ActionBarGroup;
-
-  /**
-   * Second button group — rendered only when `groupType` is `'triple'`.
-   * If not provided, falls back to placeholder "Button" labels.
-   */
-  group2?: ActionBarGroup;
-}

package/src/components/ActionBar/ActionBar.variants.ts

@@ -1,95 +0,0 @@
-import type { ActionBarSize } from './ActionBar.types';
-import { VARIANT_CLASSES as BUTTON_VARIANT_CLASSES } from '../Button/Button.variants';
-
-/*
- * ActionBar variant maps — every spacing/colour/typography value is traced to
- * a Figma variable or documented as a hardcode below.
- *
- * Figma source: node 4101:5816 "Action Bar"
- * Variables file: get_variable_defs output dated 2026-04-14
- */
-
-/* ── Shared button colour (neutral: dark bg, white text) ──────────
- * Figma: button/button-background-black-default → rgba(13,18,28,1)
- * We reuse the existing Button neutral VARIANT_CLASSES so hover/active
- * and dark-mode colours stay in sync automatically.
- * ────────────────────────────────────────────────────────────────── */
-export const ACTION_BTN_BASE = BUTTON_VARIANT_CLASSES['neutral'];
-
-/* ── Leading icon-only button — square padding per size ───────────
- * Figma:
- *   lg  → Global/spacing-md (8px)  → p-spacing-md
- *   md  → Global/spacing-sm (6px)  → p-spacing-sm
- *   sm  → Global/spacing-xs (4px)  → p-spacing-xs
- *   Radius/radius-8 (8px)          → rounded-[8px]
- * ────────────────────────────────────────────────────────────────── */
-export const ICON_BTN_SIZE: Record<ActionBarSize, string> = {
-  lg: 'p-spacing-md rounded-[8px]',
-  md: 'p-spacing-sm rounded-[8px]',
-  sm: 'p-spacing-xs rounded-[8px]',
-};
-
-/* ── Icon wrapper size (controls the SVG dimensions) ─────────────
- * Figma:
- *   lg  → icon-xl  = 24px → size-icon-lg
- *   md  → icon-lg  = 20px → size-icon-md
- *   sm  → icon-sm  = 16px → size-icon-sm
- * ────────────────────────────────────────────────────────────────── */
-export const ICON_WRAPPER_SIZE: Record<ActionBarSize, string> = {
-  lg: 'size-icon-lg',
-  md: 'size-icon-md',
-  sm: 'size-icon-sm',
-};
-
-/* ── Text button sizes — start (logical-start radius only) ────────
- * Figma:
- *   lg  → px: Global/spacing-xl (16px) py: Global/spacing-md (8px)
- *         font: typo-size-text-md (16px), line-height-text-md (24px)
- *   md  → px: Global/spacing-lg (12px) py: Global/spacing-sm (6px)
- *         font: typo-size-text-sm (14px), line-height-text-sm (20px)
- *   sm  → p:  Global/spacing-md (8px)
- *         font: typo-size-text-xs (12px), line-height-text-xs (18px)
- *   Radius/radius-8 → rounded-s-[8px] (start side only)
- * ────────────────────────────────────────────────────────────────── */
-export const TEXT_BTN_START: Record<ActionBarSize, string> = {
-  lg: 'px-spacing-xl py-spacing-md text-text-md rounded-s-[8px]',
-  md: 'px-spacing-lg py-spacing-sm text-text-sm rounded-s-[8px]',
-  sm: 'p-spacing-md text-text-xs rounded-s-[8px]',
-};
-
-/* ── Text button sizes — end (logical-end radius only) ────────────
- * Same padding/font values as start; only the radius side differs.
- * ────────────────────────────────────────────────────────────────── */
-export const TEXT_BTN_END: Record<ActionBarSize, string> = {
-  lg: 'px-spacing-xl py-spacing-md text-text-md rounded-e-[8px]',
-  md: 'px-spacing-lg py-spacing-sm text-text-sm rounded-e-[8px]',
-  sm: 'p-spacing-md text-text-xs rounded-e-[8px]',
-};
-
-/* ── Gap between the icon button and each pair group ──────────────
- * Figma: Global/spacing-lg (12px) → gap-spacing-lg
- * ────────────────────────────────────────────────────────────────── */
-export const GROUP_GAP = 'gap-spacing-lg';
-
-/* ── 1 px vertical divider between the two buttons in a group ─────
- * Figma: Colors/Neutral/700 → rgba(56,66,80,1)
- * Hardcoded because there is no semantic token for this specific grey.
- * Dark mode: same neutral/700 reads as lighter on a light surface →
- * mapped to rgba(210,214,219,1) which matches ButtonGroup.variants.ts.
- * ────────────────────────────────────────────────────────────────── */
-export const DIVIDER_CLASS =
-  'bg-[rgba(56,66,80,1)] dark:bg-[rgba(210,214,219,1)]';
-
-/* ── Focus ring (matches the package-wide standard) ──────────────
- * Reuse the exact string from Button.variants to stay in sync.
- * ────────────────────────────────────────────────────────────────── */
-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)]';
-
-/* ── Arrow-right-02 icon paths ────────────────────────────────────
- * Source: Figma node 4072:2374 "Leading Icon" / arrow-right-02
- * Path reused from ButtonGroup.variants.ts (same Figma asset).
- * viewBox 0 0 16 16 — do not change.
- * ────────────────────────────────────────────────────────────────── */
-export const ARROW_RIGHT_PATH = 'M3.333 8h9.334M8.667 4L13 8l-4.333 4' as const;
-export const ARROW_RIGHT_VIEWBOX = '0 0 16 16' as const;

package/src/components/ActionBar/index.ts

@@ -1,8 +0,0 @@
-export { ActionBar } from './ActionBar';
-export type {
-  ActionBarProps,
-  ActionBarGroupType,
-  ActionBarSize,
-  ActionBarButtonItem,
-  ActionBarGroup,
-} from './ActionBar.types';