sdaia-ui 1.0.1

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

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

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

package/src/components/ActionBar/ActionBar.tsx

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

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

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

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