sdaia-ui 1.0.1 → 1.0.2

package/src/components/Badge/Badge.tsx

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

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

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

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

package/src/components/Bar/Bar.tsx

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

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

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

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

package/src/components/BarChart/BarChart.tsx

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

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

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