sdaia-ui 1.0.1

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,74 @@
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { SIZE_MAP, COLOR_MAP } from './Badge.variants';
+import type { BadgeProps } from './Badge.types';
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  {
+    children,
+    size = 'md',
+    variant = 'soft',
+    color = 'neutral',
+    pill = false,
+    iconOnly = false,
+    leadingIcon,
+    trailingIcon,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const sizeConfig = SIZE_MAP[size];
+  const colorConfig = COLOR_MAP[color];
+
+  const colorClasses = variant === 'soft'
+    ? cn(colorConfig.soft, colorConfig.softDark)
+    : cn(colorConfig.solid, colorConfig.solidDark);
+
+  const radiusClass = pill ? 'rounded-full' : 'rounded-[6px]';
+
+  const containerClasses = iconOnly
+    ? sizeConfig.iconOnlyContainer
+    : sizeConfig.container;
+
+  return (
+    <span
+      ref={ref}
+      data-slot="badge"
+      className={cn(
+        'inline-flex items-center justify-center',
+        containerClasses,
+        radiusClass,
+        colorClasses,
+        className,
+      )}
+      {...rest}
+    >
+      {leadingIcon && (
+        <span
+          data-slot="badge-leading-icon"
+          className="flex-shrink-0 [&>svg]:h-full [&>svg]:w-full"
+          style={{ width: sizeConfig.iconSize, height: sizeConfig.iconSize }}
+        >
+          {leadingIcon}
+        </span>
+      )}
+
+      {!iconOnly && children && (
+        <span data-slot="badge-label" className={sizeConfig.text}>
+          {children}
+        </span>
+      )}
+
+      {trailingIcon && !iconOnly && (
+        <span
+          data-slot="badge-trailing-icon"
+          className="flex-shrink-0 [&>svg]:h-full [&>svg]:w-full"
+          style={{ width: sizeConfig.iconSize, height: sizeConfig.iconSize }}
+        >
+          {trailingIcon}
+        </span>
+      )}
+    </span>
+  );
+});

package/src/components/Badge/Badge.types.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeVariant = 'soft' | 'solid';
+export type BadgeColor =
+  | 'neutral'
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'info'
+  | 'warning'
+  | 'error';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Label text */
+  children?: ReactNode;
+  /** Size of the badge */
+  size?: BadgeSize;
+  /** Visual style */
+  variant?: BadgeVariant;
+  /** Color scheme */
+  color?: BadgeColor;
+  /** Pill shape (rounded-full) */
+  pill?: boolean;
+  /** Icon-only mode (no text) */
+  iconOnly?: boolean;
+  /** Leading icon element */
+  leadingIcon?: ReactNode;
+  /** Trailing icon element */
+  trailingIcon?: ReactNode;
+}

package/src/components/Badge/Badge.variants.ts

@@ -0,0 +1,83 @@
+import type { BadgeSize, BadgeVariant, BadgeColor } from './Badge.types';
+
+/* ── Size configuration ───────────────────────────────────────── */
+export interface BadgeSizeConfig {
+  container: string;
+  iconOnlyContainer: string;
+  text: string;
+  iconSize: number;
+}
+
+export const SIZE_MAP: Record<BadgeSize, BadgeSizeConfig> = {
+  sm: {
+    container: 'h-[22px] px-spacing-sm gap-spacing-xxs',
+    iconOnlyContainer: 'h-[22px] w-[22px]',
+    text: 'text-text-2xs font-[500]',
+    iconSize: 12,
+  },
+  md: {
+    container: 'h-[24px] px-spacing-md gap-spacing-xs',
+    iconOnlyContainer: 'h-[24px] w-[24px]',
+    text: 'text-text-xs font-[500]',
+    iconSize: 14,
+  },
+  lg: {
+    container: 'h-[28px] px-spacing-md gap-spacing-sm',
+    iconOnlyContainer: 'h-[28px] w-[28px]',
+    text: 'text-text-sm font-[500]',
+    iconSize: 16,
+  },
+};
+
+/* ── Color × Variant styles ───────────────────────────────────── */
+export interface ColorConfig {
+  soft: string;
+  solid: string;
+  softDark: string;
+  solidDark: string;
+}
+
+export const COLOR_MAP: Record<BadgeColor, ColorConfig> = {
+  neutral: {
+    soft: 'bg-transparent border border-[rgba(210,214,219,1)] text-[rgba(52,64,84,1)]',
+    solid: 'bg-[rgba(243,244,246,1)] border border-transparent text-[rgba(52,64,84,1)]',
+    softDark: 'dark:bg-transparent dark:border-[rgba(55,65,81,1)] dark:text-[rgba(209,213,219,1)]',
+    solidDark: 'dark:bg-[rgba(31,42,55,1)] dark:border-transparent dark:text-[rgba(209,213,219,1)]',
+  },
+  primary: {
+    soft: 'bg-transparent border border-[rgba(84,192,138,1)] text-[rgba(27,131,84,1)]',
+    solid: 'bg-[rgba(27,131,84,1)] border border-transparent text-white',
+    softDark: 'dark:bg-transparent dark:border-[rgba(84,192,138,1)] dark:text-[rgba(84,192,138,1)]',
+    solidDark: 'dark:bg-[rgba(27,131,84,1)] dark:border-transparent dark:text-white',
+  },
+  secondary: {
+    soft: 'bg-[rgba(255,254,242,1)] border border-[rgba(247,213,77,1)] text-[rgba(219,161,2,1)]',
+    solid: 'bg-[rgba(219,161,2,1)] border border-transparent text-white',
+    softDark: 'dark:bg-[rgba(40,35,15,1)] dark:border-[rgba(247,213,77,1)] dark:text-[rgba(247,213,77,1)]',
+    solidDark: 'dark:bg-[rgba(219,161,2,1)] dark:border-transparent dark:text-white',
+  },
+  tertiary: {
+    soft: 'bg-[rgba(249,245,250,1)] border border-[rgba(204,173,217,1)] text-[rgba(128,81,159,1)]',
+    solid: 'bg-[rgba(128,81,159,1)] border border-transparent text-white',
+    softDark: 'dark:bg-[rgba(35,25,40,1)] dark:border-[rgba(204,173,217,1)] dark:text-[rgba(204,173,217,1)]',
+    solidDark: 'dark:bg-[rgba(128,81,159,1)] dark:border-transparent dark:text-white',
+  },
+  info: {
+    soft: 'bg-[rgba(239,248,255,1)] border border-[rgba(83,177,253,1)] text-[rgba(21,112,239,1)]',
+    solid: 'bg-[rgba(21,112,239,1)] border border-transparent text-white',
+    softDark: 'dark:bg-[rgba(15,30,50,1)] dark:border-[rgba(83,177,253,1)] dark:text-[rgba(83,177,253,1)]',
+    solidDark: 'dark:bg-[rgba(21,112,239,1)] dark:border-transparent dark:text-white',
+  },
+  warning: {
+    soft: 'bg-[rgba(255,250,235,1)] border border-[rgba(253,176,34,1)] text-[rgba(220,104,3,1)]',
+    solid: 'bg-[rgba(220,104,3,1)] border border-transparent text-white',
+    softDark: 'dark:bg-[rgba(40,30,10,1)] dark:border-[rgba(253,176,34,1)] dark:text-[rgba(253,176,34,1)]',
+    solidDark: 'dark:bg-[rgba(220,104,3,1)] dark:border-transparent dark:text-white',
+  },
+  error: {
+    soft: 'bg-[rgba(254,243,242,1)] border border-[rgba(249,112,102,1)] text-[rgba(217,45,32,1)]',
+    solid: 'bg-[rgba(217,45,32,1)] border border-transparent text-white',
+    softDark: 'dark:bg-[rgba(45,20,18,1)] dark:border-[rgba(249,112,102,1)] dark:text-[rgba(249,112,102,1)]',
+    solidDark: 'dark:bg-[rgba(217,45,32,1)] dark:border-transparent dark:text-white',
+  },
+};

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeSize, BadgeVariant, BadgeColor } from './Badge.types';

package/src/components/Bar/Bar.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { BarProps } from './Bar.types';
+import {
+  BAR_COLORS,
+  BAR_WIDTH,
+  BAR_DEFAULT_HEIGHT,
+  CONTAINER_BASE,
+  BAR_FILL_BASE,
+} from './Bar.variants';
+
+export const Bar = forwardRef<HTMLDivElement, BarProps>(
+  function Bar(
+    {
+      type = 'Series 1',
+      percentage = 100,
+      dir: dirProp,
+      rtl = false,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+    const pct = Math.min(100, Math.max(0, percentage));
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        className={cn(CONTAINER_BASE, className)}
+        style={{
+          width: `${BAR_WIDTH}px`,
+          maxWidth: `${BAR_WIDTH}px`,
+          height: `${BAR_DEFAULT_HEIGHT}px`,
+          ...style,
+        }}
+        {...props}
+      >
+        <div
+          data-slot="bar-fill"
+          className={BAR_FILL_BASE}
+          style={{
+            height: `${pct}%`,
+            backgroundColor: BAR_COLORS[type],
+          }}
+          aria-hidden="true"
+        />
+      </div>
+    );
+  },
+);
+
+Bar.displayName = 'Bar';

package/src/components/Bar/Bar.types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+
+/** Controls the fill colour via the Chart/chart-series-N design token. */
+export type BarSeriesType = 'Series 1' | 'Series 2' | 'Series 3';
+
+export interface BarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Which series this bar belongs to — controls the fill colour. @default 'Series 1' */
+  type?: BarSeriesType;
+
+  /** Fill height as a percentage (0–100) of the container, anchored to the bottom. @default 100 */
+  percentage?: number;
+
+  /** Reading direction. A symmetric vertical bar has no visual RTL difference; accepted for API parity. */
+  dir?: 'ltr' | 'rtl';
+
+  /** @deprecated Use `dir` instead. */
+  rtl?: boolean;
+}

package/src/components/Bar/Bar.variants.ts

@@ -0,0 +1,20 @@
+import type { BarSeriesType } from './Bar.types';
+
+// Chart/chart-series-N tokens — identical in light and dark mode (data-viz palette).
+export const BAR_COLORS: Record<BarSeriesType, string> = {
+  'Series 1': 'var(--chart/chart-series-1, #1570ef)',
+  'Series 2': 'var(--chart/chart-series-2, #7a5af8)',
+  'Series 3': 'var(--chart/chart-series-3, #dc6803)',
+} as const;
+
+// Fixed 24 px width — matches every symbol in the Figma frame.
+export const BAR_WIDTH = 24;
+
+// Default height matches the 293 px Figma symbol; overridable via style prop.
+export const BAR_DEFAULT_HEIGHT = 293;
+
+// relative + overflow-hidden establishes the positioning context and clips the fill.
+export const CONTAINER_BASE = 'relative overflow-hidden';
+
+// Fill is anchored to the bottom; Radius/radius-2 (2 px) on top corners only.
+export const BAR_FILL_BASE = 'absolute bottom-0 inset-x-0 rounded-tl-[2px] rounded-tr-[2px]';

package/src/components/Bar/index.ts

@@ -0,0 +1,2 @@
+export { Bar } from './Bar';
+export type { BarProps, BarSeriesType } from './Bar.types';

package/src/components/BarChart/BarChart.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { SeriesLabel } from '../SeriesLabel';
+import { XAxis } from '../XAxis';
+import { YAxis } from '../YAxis';
+import { BarGroup } from '../BarGroup';
+import type { BarChartProps } from './BarChart.types';
+import {
+  DEFAULT_HEIGHTS,
+  DEFAULT_Y_AXIS,
+  DEFAULT_FILL,
+  ROOT_BASE,
+  LEGEND_ROW,
+  CHART_BODY,
+  Y_AND_BARS_ROW,
+  BARS_WRAPPER_OUTER,
+  GRID_LINE,
+  BARS_OVERLAY,
+  GRID_LINE_COUNT,
+} from './BarChart.variants';
+
+/**
+ * BarChart
+ *
+ * A full grouped bar chart composed from SeriesLabel, YAxis, XAxis, and
+ * BarGroup. Renders a legend, horizontal grid lines with Y-axis ticks, a
+ * row of evenly-spaced bar groups, and an X-axis label row.
+ *
+ * Traced from Figma node 5489:77559 (frame "Chart").
+ *
+ * ── Structure (top → bottom) ──────────────────────────────────────────────────
+ *   1. Legend row   — SeriesLabel chips, right-aligned (left in RTL)
+ *   2. Chart body
+ *      a. Y-axis    — numeric tick labels, height matches chart area
+ *      b. Bars area — dashed grid lines + absolute bar-group overlay
+ *   3. X-axis row   — date/week/month labels
+ *
+ * ── Composition ───────────────────────────────────────────────────────────────
+ *   SeriesLabel  — legend items
+ *   YAxis        — left-side numeric ticks (right side in RTL)
+ *   BarGroup     — one per x-axis label, height = 100 % of the chart area
+ *   XAxis        — bottom row labels with responsive gap/padding
+ *   Bar          — used internally by BarGroup
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   Set `rtl` prop. `dir="rtl"` is applied to the root element and forwarded
+ *   to all sub-components. The Y-axis moves to the right, bar groups reverse
+ *   order, and X-axis / legend labels flow right-to-left — zero extra config.
+ *
+ * ── Dark mode ─────────────────────────────────────────────────────────────────
+ *   Grid lines invert via `dark:border-[#374151]`.
+ *   All other colours handled by sub-components — zero extra config.
+ *
+ * @example
+ * // Minimal — 3 days, 1 series, default 70 % fill
+ * <BarChart xAxisData="3 Days" seriesCount={1} />
+ *
+ * // 12 months, 3 series, custom data
+ * <BarChart
+ *   xAxisData="12 Months"
+ *   seriesCount={3}
+ *   groups={[
+ *     { series1: 80, series2: 60, series3: 40 },
+ *     { series1: 70, series2: 50, series3: 30 },
+ *     // … 12 entries total
+ *   ]}
+ * />
+ *
+ * // RTL
+ * <BarChart xAxisData="7 Week Days" seriesCount={2} rtl />
+ */
+export const BarChart = forwardRef<HTMLDivElement, BarChartProps>(
+  function BarChart(
+    {
+      xAxisData = '3 Days',
+      seriesCount = 1,
+      groups,
+      yAxisValue,
+      height,
+      rtl = false,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) {
+    // ── Derive values ──────────────────────────────────────────────────────────
+    const resolvedHeight = height ?? DEFAULT_HEIGHTS[xAxisData];
+    const resolvedYAxis  = yAxisValue ?? DEFAULT_Y_AXIS[xAxisData];
+
+    // Number of bar groups = number of x-axis labels
+    const GROUP_COUNTS: Record<typeof xAxisData, number> = {
+      '3 Days':      3,
+      '5 Work Days': 5,
+      '7 Week Days': 7,
+      '12 Months':   12,
+    };
+    const groupCount = GROUP_COUNTS[xAxisData];
+
+    // Build the data array — pad / truncate to match groupCount
+    const resolvedGroups = Array.from({ length: groupCount }, (_, i) => ({
+      series1: groups?.[i]?.series1 ?? DEFAULT_FILL,
+      series2: groups?.[i]?.series2 ?? DEFAULT_FILL,
+      series3: groups?.[i]?.series3 ?? DEFAULT_FILL,
+    }));
+
+    // Number of dashed grid lines = number of Y-axis ticks
+    const gridLineCount = GRID_LINE_COUNT[resolvedYAxis];
+
+    // ── Legend labels ──────────────────────────────────────────────────────────
+    const legendSeries = (
+      ['Series 1', 'Series 2', 'Series 3'] as const
+    ).slice(0, seriesCount);
+
+    return (
+      <div
+        ref={ref}
+        dir={rtl ? 'rtl' : undefined}
+        className={cn(ROOT_BASE, className)}
+        style={{ height: `${resolvedHeight}px`, ...style }}
+        {...props}
+      >
+        {/* ── Legend ──────────────────────────────────────────────────────── */}
+        <div className={LEGEND_ROW}>
+          {legendSeries.map((s) => (
+            <SeriesLabel key={s} type={s} rtl={rtl} />
+          ))}
+        </div>
+
+        {/* ── Chart body ──────────────────────────────────────────────────── */}
+        <div className={CHART_BODY}>
+
+          {/* Y-axis + bars row */}
+          <div className={Y_AND_BARS_ROW}>
+
+            {/* Y-axis — height 100 % of the row */}
+            <YAxis
+              value={resolvedYAxis}
+              rtl={rtl}
+              style={{ height: '100%' }}
+            />
+
+            {/* Bars area: grid lines + bar-group overlay */}
+            <div className={BARS_WRAPPER_OUTER}>
+              {/* Dashed grid lines — evenly spaced via justify-between */}
+              {Array.from({ length: gridLineCount }, (_, i) => (
+                <div key={i} className={GRID_LINE} />
+              ))}
+
+              {/* Bar groups — absolute overlay sharing the same bounding box */}
+              <div className={BARS_OVERLAY}>
+                {resolvedGroups.map((g, i) => (
+                  <BarGroup
+                    key={i}
+                    seriesCount={seriesCount}
+                    series1={g.series1}
+                    series2={g.series2}
+                    series3={g.series3}
+                    rtl={rtl}
+                    // Fill the flex cell completely
+                    className="flex-1 min-w-0"
+                    style={{ height: '100%', width: '100%' }}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* X-axis */}
+          <XAxis data={xAxisData} rtl={rtl} />
+        </div>
+      </div>
+    );
+  },
+);
+
+BarChart.displayName = 'BarChart';

package/src/components/BarChart/BarChart.types.ts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes } from 'react';
+import type { XAxisDataType } from '../XAxis/XAxis.types';
+import type { YAxisTickCount } from '../YAxis/YAxis.types';
+
+/**
+ * Number of data series (colours) to display inside each bar group.
+ *
+ * | Value | Series shown       |
+ * |-------|--------------------|
+ * | 1     | Series 1 (green)   |
+ * | 2     | Series 1 + 2       |
+ * | 3     | Series 1 + 2 + 3   |
+ */
+export type BarChartSeriesCount = 1 | 2 | 3;
+
+/**
+ * Per-column data for one time-period group.
+ * Each value is a fill percentage 0–100 for the corresponding series bar.
+ * Omitted values fall back to the component default (70 %).
+ */
+export interface BarChartDataPoint {
+  series1?: number;
+  series2?: number;
+  series3?: number;
+}
+
+export interface BarChartProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * X-axis preset — controls the x-axis labels and the default number of bar
+   * groups rendered when `groups` is not supplied.
+   * @default '3 Days'
+   */
+  xAxisData?: XAxisDataType;
+
+  /**
+   * How many series bars to render inside every group.
+   * @default 1
+   */
+  seriesCount?: BarChartSeriesCount;
+
+  /**
+   * Per-group bar percentages (one entry per x-axis label).
+   * When omitted, all groups render at 70 % for every active series.
+   */
+  groups?: BarChartDataPoint[];
+
+  /**
+   * Y-axis tick-count preset — also controls the number of horizontal grid
+   * lines in the chart area.
+   * @default '3'
+   */
+  yAxisValue?: YAxisTickCount;
+
+  /**
+   * Total chart height in px (including legend and x-axis).
+   * Defaults by xAxisData: 3 Days=260, 5/7 days=320, 12 Months=390.
+   * Pass an explicit value to adapt to any container.
+   */
+  height?: number;
+
+  /**
+   * Render in right-to-left orientation.
+   * Applies `dir="rtl"` on the root element and passes `rtl` to all
+   * sub-components (XAxis, YAxis, BarGroup, SeriesLabel) so that:
+   *   – the Y-axis moves to the right side
+   *   – bar groups display in RTL order
+   *   – x-axis labels display right-to-left
+   *   – legend labels flow right-to-left
+   * @default false
+   */
+  rtl?: boolean;
+}

package/src/components/BarChart/BarChart.variants.ts

@@ -0,0 +1,134 @@
+/**
+ * BarChart.variants.ts
+ *
+ * All constants for the BarChart component.
+ * Traced from Figma node 5489:77559 (frame "Chart").
+ *
+ * ── Layout structure (top → bottom) ──────────────────────────────────────────
+ *   1. Legend row  (SeriesLabel chips, right-aligned)
+ *   2. Chart body  (Y-axis + gridlines + bar groups, flex-1)
+ *   3. X-axis row  (XAxis labels)
+ *
+ * ── Color tokens (get_variable_defs) ──────────────────────────────────────────
+ *   All bar colours delegated to BarGroup / Bar (data-viz palette).
+ *   All axis label colours delegated to XAxis / YAxis.
+ *   SeriesLabel label colour delegated to SeriesLabel component.
+ *
+ *   Border/border-neutral-primary  →  #d2d6db (light) / #374151 (dark)
+ *     Used for dashed grid lines (confirmed: Divider, ActivityItem variants).
+ *
+ * ── Spacing tokens (responsive via globals.css) ────────────────────────────────
+ *   Global/spacing-lg   →  gap-spacing-lg   (outer col gap + legend gap)
+ *   Global/spacing-md   →  gap-spacing-md   (y-axis ↔ chart area)
+ *   Global/spacing-xs   →  gap-spacing-xs   (chart body items gap)
+ *   Global/spacing-3xl  →  gap-spacing-3xl  (bar-group inter-column gap, in overlay)
+ *   Global/spacing-4xl  →  handled inside XAxis
+ *   Global/spacing-none →  handled inside XAxis
+ *
+ * ── Dimensions (hardcoded — per Figma symbol heights) ─────────────────────────
+ *   '3 Days'      →  260 px
+ *   '5 Work Days' →  320 px
+ *   '7 Week Days' →  320 px
+ *   '12 Months'   →  390 px
+ */
+
+import type { XAxisDataType } from '../XAxis/XAxis.types';
+import type { YAxisTickCount } from '../YAxis/YAxis.types';
+
+// ─── Default chart heights ─────────────────────────────────────────────────────
+// Sourced directly from Figma symbol heights; consumer can override via `height`.
+
+export const DEFAULT_HEIGHTS: Record<XAxisDataType, number> = {
+  '3 Days':      260,
+  '5 Work Days': 320,
+  '7 Week Days': 320,
+  '12 Months':   390,
+} as const;
+
+// ─── Default Y-axis tick count per x-axis type ────────────────────────────────
+// Charts with more vertical space use more ticks for readability.
+
+export const DEFAULT_Y_AXIS: Record<XAxisDataType, YAxisTickCount> = {
+  '3 Days':      '3',
+  '5 Work Days': '3',
+  '7 Week Days': '3',
+  '12 Months':   '6',
+} as const;
+
+// ─── Default fill % when no `groups` data is supplied ─────────────────────────
+export const DEFAULT_FILL = 70;
+
+// ─── Root container ───────────────────────────────────────────────────────────
+/**
+ * flex flex-col      — legend → body → x-axis stacked vertically
+ * gap-spacing-lg     — Global/spacing-lg gap between legend and chart body
+ * items-end          — legend is right-aligned (or left-aligned in RTL)
+ * w-full             — fills the parent container width
+ */
+export const ROOT_BASE = 'flex flex-col gap-spacing-lg items-end w-full';
+
+// ─── Legend row ───────────────────────────────────────────────────────────────
+/**
+ * flex items-start justify-end  — chips sit at the top-right corner
+ * gap-spacing-lg                — Global/spacing-lg gap between SeriesLabel chips
+ * w-full shrink-0               — full width, never shrinks
+ */
+export const LEGEND_ROW = 'flex items-start justify-end gap-spacing-lg w-full shrink-0';
+
+// ─── Chart body (y-axis + bars wrapper + x-axis) ──────────────────────────────
+/**
+ * flex flex-col   — bars area on top, x-axis below
+ * gap-spacing-xs  — Global/spacing-xs gap between bars area and x-axis
+ * flex-1 min-h-0  — fills available height
+ * w-full          — full width
+ */
+export const CHART_BODY = 'flex flex-col gap-spacing-xs flex-1 min-h-0 w-full';
+
+// ─── Y-axis + bars row ────────────────────────────────────────────────────────
+/**
+ * flex             — Y-axis and bars wrapper side by side
+ * gap-spacing-md   — Global/spacing-md gap between Y-axis and bars
+ * flex-1 min-h-0   — fills available height
+ * w-full           — full width
+ */
+export const Y_AND_BARS_ROW = 'flex gap-spacing-md flex-1 min-h-0 w-full';
+
+// ─── Bars wrapper (grid lines + bar groups overlay) ───────────────────────────
+/**
+ * Outer: flex flex-col justify-between
+ *   – the 3 grid-line divs are spaced evenly top-to-bottom
+ *   – py-spacing-md aligns grid lines with the Y-axis row labels
+ *
+ * The bar groups sit in an absolute overlay (inset-0) so they share the same
+ * height as the grid-line container without affecting its layout.
+ */
+export const BARS_WRAPPER_OUTER =
+  'relative flex flex-col justify-between py-spacing-md flex-1 min-h-0 min-w-0';
+
+// ─── Grid line ────────────────────────────────────────────────────────────────
+/**
+ * Border/border-neutral-primary
+ * Light: #d2d6db  Dark: #374151  (confirmed: Divider, ActivityItem)
+ * Dashed 1 px horizontal rule matching the Y-axis tick positions.
+ */
+export const GRID_LINE =
+  'w-full h-0 shrink-0 border-t border-dashed border-[#d2d6db] dark:border-[#374151]';
+
+// ─── Bar groups overlay ───────────────────────────────────────────────────────
+/**
+ * absolute inset-0   — fills the same bounding box as the grid-line container
+ * flex items-center  — centres bar groups vertically within the overlay
+ * py-spacing-md      — matches the grid-line container's block padding
+ * gap-spacing-3xl    — Global/spacing-3xl column gap between bar groups
+ * px-0               — no inline padding (x-axis handles its own start offset)
+ */
+export const BARS_OVERLAY =
+  'absolute inset-0 flex items-center py-spacing-md gap-spacing-3xl px-0';
+
+// ─── Number of grid lines per Y-axis tick preset ──────────────────────────────
+// Matches the number of ticks rendered by YAxis (same positions).
+export const GRID_LINE_COUNT: Record<YAxisTickCount, number> = {
+  '3': 3,
+  '6': 6,
+  '9': 9,
+} as const;