sdaia-ui 1.0.1

package/src/components/Select/Select.types.ts

@@ -0,0 +1,102 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Height / padding variant for the trigger */
+export type SelectSize = 'large' | 'medium';
+
+/**
+ * Leading element type shown in both the trigger and the dropdown items.
+ * - `'none'`     — no leading element
+ * - `'icon'`     — pass a ReactNode via `leadingIcon`
+ * - `'dot'`      — green status dot
+ * - `'checkbox'` — multi-select mode; items render with a Checkbox; trigger shows chips
+ * - `'avatar'`   — image avatar from the selected option or `avatarSrc`
+ */
+export type SelectLeading = 'none' | 'icon' | 'dot' | 'checkbox' | 'avatar';
+
+export interface SelectOption {
+  /** Unique identifier for this option */
+  value: string;
+  /** Display label */
+  label: string;
+  /**
+   * Avatar image URL used when `leading='avatar'`.
+   * Falls back to `/images/avatar.webp`.
+   */
+  avatar?: string;
+  /** Disables just this option */
+  disabled?: boolean;
+}
+
+export interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Trigger size.
+   * - `'large'`  — 40 px inner height, `py-spacing-md` padding
+   * - `'medium'` — 36 px inner height, `py-spacing-sm` padding
+   * @default 'large'
+   */
+  size?: SelectSize;
+
+  /**
+   * Leading element type shown in the trigger and in each dropdown item.
+   * @default 'none'
+   */
+  leading?: SelectLeading;
+
+  /** List of selectable options */
+  options?: SelectOption[];
+
+  /**
+   * Controlled selected value(s).
+   * - Single: `string`
+   * - Multi (`multiple={true}`): `string[]`
+   */
+  value?: string | string[];
+
+  /** Called when the selection changes */
+  onChange?: (value: string | string[]) => void;
+
+  /**
+   * Enable multi-select mode.
+   * When true, `value` should be `string[]`, selected items are shown as Chips
+   * in the trigger, and the dropdown stays open after each selection.
+   * @default false
+   */
+  multiple?: boolean;
+
+  /** Placeholder text shown when nothing is selected */
+  placeholder?: string;
+
+  /** Label rendered above the trigger */
+  label?: string;
+
+  /** Show the required asterisk next to the label */
+  required?: boolean;
+
+  /** Helper text shown below the trigger */
+  helperText?: string;
+
+  /**
+   * Error message — shown in red below the trigger.
+   * Takes precedence over `helperText` and applies a red border.
+   */
+  error?: string;
+
+  /** Disables the entire field */
+  disabled?: boolean;
+
+  /**
+   * Icon node displayed when `leading='icon'`.
+   * Rendered at 20 × 20 px in both the trigger and the dropdown items.
+   */
+  leadingIcon?: ReactNode;
+
+  /**
+   * Default avatar image URL used in the trigger when `leading='avatar'`
+   * and no option is selected (or the selected option has no `avatar`).
+   * @default '/images/avatar.webp'
+   */
+  avatarSrc?: string;
+
+  /** HTML id for the trigger button (used by the label's `htmlFor`) */
+  id?: string;
+}

package/src/components/Select/Select.variants.ts

@@ -0,0 +1,111 @@
+import type { SelectSize } from './Select.types';
+
+/* ── Outer wrapper ───────────────────────────────────────────── */
+export const WRAPPER = 'flex flex-col gap-spacing-sm w-full';
+
+/* ── Label row ───────────────────────────────────────────────── */
+export const LABEL_WRAP =
+  'flex items-center gap-spacing-xxs text-text-sm font-[400] whitespace-nowrap';
+export const LABEL_DEFAULT =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+export const LABEL_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+/** Figma variable: Form/field-border-error #b42318 */
+export const LABEL_REQUIRED =
+  'text-[rgba(180,35,24,1)] dark:text-[rgba(248,113,113,1)]';
+
+/* ── Trigger (the button that opens the dropdown) ────────────── */
+export const TRIGGER_BASE =
+  'flex items-center gap-spacing-md rounded-[8px] border w-full text-start motion-feedback focus:outline-none';
+
+export const TRIGGER_PADDING: Record<SelectSize, string> = {
+  large: 'px-spacing-lg py-spacing-md',
+  medium: 'px-spacing-lg py-spacing-sm',
+};
+
+/** Figma variable: Form/field-background-default #ffffff */
+export const TRIGGER_BG_DEFAULT =
+  'bg-white dark:bg-[rgba(17,25,39,1)]';
+/** Figma variable: Background/background-neutral-50 #f9fafb */
+export const TRIGGER_BG_DISABLED =
+  'bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]';
+
+/** Figma variable: Border/border-neutral-primary #d2d6db */
+export const TRIGGER_BORDER_DEFAULT =
+  'border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]';
+/**
+ * Figma variable: Colors/Alpha/alpha-600-primary-70 rgba(27,131,84,0.7)
+ * Open / Focused state — 2 px border
+ */
+export const TRIGGER_BORDER_OPEN =
+  'border-[rgba(27,131,84,0.7)] shadow-[inset_0_0_0_1px_rgba(27,131,84,0.7)]';
+/** Figma variable: Form/field-border-error #b42318 */
+export const TRIGGER_BORDER_ERROR =
+  'border-[rgba(180,35,24,1)] dark:border-[rgba(248,113,113,1)]';
+
+/* ── Content row (between leading and arrow) ─────────────────── */
+export const CONTENT = 'flex-1 flex items-center gap-spacing-md min-w-0';
+
+/* ── Value text ──────────────────────────────────────────────── */
+export const VALUE_TEXT: Record<SelectSize, string> = {
+  large: 'text-text-md font-[400]',
+  medium: 'text-text-sm font-[400]',
+};
+/** Figma variable: Form/field-text-placeholder #6c737f */
+export const VALUE_PLACEHOLDER =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]';
+/** Figma variable: Form/field-text-filled #161616 */
+export const VALUE_FILLED =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+/** Figma variable: Global/text-default-disabled #9da4ae */
+export const VALUE_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Leading elements ────────────────────────────────────────── */
+/** Figma variable: Icon/icon-default-500 #6c737f */
+export const LEADING_ICON_DEFAULT =
+  'shrink-0 size-icon-md flex items-center justify-center text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+export const LEADING_ICON_DISABLED =
+  'shrink-0 size-icon-md flex items-center justify-center text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+/** Figma variable: Colors/Primary-SA-Flag/500 #25935f */
+export const DOT_DEFAULT =
+  'shrink-0 size-[10px] rounded-full bg-[rgba(37,147,95,1)]';
+export const DOT_DISABLED =
+  'shrink-0 size-[10px] rounded-full bg-[rgba(157,164,174,1)]';
+export const AVATAR_TRIGGER =
+  'shrink-0 size-[20px] rounded-full object-cover overflow-hidden';
+
+/* ── Arrow icon ──────────────────────────────────────────────── */
+export const ARROW_WRAP =
+  'shrink-0 transition-transform duration-150';
+export const ARROW_DEFAULT =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+export const ARROW_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Helper / Error row ──────────────────────────────────────── */
+export const HELPER_WRAP = 'flex items-center gap-spacing-sm';
+export const HELPER_TEXT =
+  'text-text-sm font-[400]';
+/** Figma variable: Form/field-text-helper #6c737f */
+export const HELPER_DEFAULT =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+export const HELPER_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+export const HELPER_ERROR =
+  'text-[rgba(180,35,24,1)] dark:text-[rgba(248,113,113,1)]';
+
+/* ── Dropdown panel ──────────────────────────────────────────── */
+/**
+ * Figma variable: Shadows/shadow-lg
+ *   DROP_SHADOW color #10182808 offset (0,4) radius 6 spread -2
+ *   DROP_SHADOW color #10182814 offset (0,12) radius 16 spread -4
+ * Background: Background/background-menu #ffffff
+ * Border: Border/border-neutral-primary #d2d6db
+ */
+export const PANEL =
+  'absolute start-0 end-0 top-full z-50 mt-1 rounded-[8px] ' +
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  'bg-white dark:bg-[rgba(17,25,39,1)] ' +
+  'py-spacing-xs overflow-y-auto max-h-[248px] ' +
+  'shadow-[0px_4px_6px_-2px_rgba(16,24,40,0.03),0px_12px_16px_-4px_rgba(16,24,40,0.08)]';

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectSize, SelectLeading, SelectOption } from './Select.types';

package/src/components/SelectMenuItem/SelectMenuItem.tsx

@@ -0,0 +1,132 @@
+'use client';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Checkbox } from '../Checkbox';
+import { TickIcon } from '../../icons/IconFactory';
+import {
+  WRAPPER,
+  CONTENT_BASE,
+  CONTENT_PADDING,
+  CONTENT_HOVER,
+  CONTENT_SELECTED,
+  LABEL_BASE,
+  LABEL_DEFAULT,
+  LABEL_DISABLED,
+  DOT_BASE,
+  DOT_DEFAULT,
+  DOT_DISABLED,
+  ICON_WRAPPER,
+  ICON_DEFAULT,
+  ICON_DISABLED,
+  AVATAR_BASE,
+  TICK_BASE,
+  TICK_COLOR,
+} from './SelectMenuItem.variants';
+import type { SelectMenuItemProps } from './SelectMenuItem.types';
+
+const SelectMenuItem = forwardRef<HTMLDivElement, SelectMenuItemProps>(
+  (
+    {
+      size = 'large',
+      leading = 'none',
+      selected = false,
+      disabled = false,
+      label = 'User',
+      icon,
+      avatar = '/images/avatar.webp',
+      className,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const showTrailingTick = selected && leading !== 'checkbox';
+
+    return (
+      <div
+        ref={ref}
+        data-slot="select-menu-item"
+        data-selected={selected}
+        data-disabled={disabled}
+        className={cn(WRAPPER, disabled && 'pointer-events-none', className)}
+        onClick={disabled ? undefined : onClick}
+        {...props}
+      >
+        <div
+          className={cn(
+            CONTENT_BASE,
+            CONTENT_PADDING[size],
+            !disabled && CONTENT_HOVER,
+            selected && CONTENT_SELECTED,
+          )}
+        >
+          {/* ── Leading ─────────────────────────────────────────── */}
+
+          {leading === 'checkbox' && (
+            /* pointer-events-none: the parent row handles clicks, not the checkbox */
+            <span className="pointer-events-none shrink-0 flex items-center">
+              <Checkbox
+                size="sm"
+                variant="primary"
+                checked={selected}
+                disabled={disabled}
+                readOnly
+                tabIndex={-1}
+                aria-hidden="true"
+              />
+            </span>
+          )}
+
+          {leading === 'icon' && icon && (
+            <div
+              className={cn(
+                ICON_WRAPPER,
+                disabled ? ICON_DISABLED : ICON_DEFAULT,
+              )}
+            >
+              {icon}
+            </div>
+          )}
+
+          {leading === 'dot' && (
+            <div
+              className={cn(
+                DOT_BASE,
+                disabled ? DOT_DISABLED : DOT_DEFAULT,
+              )}
+              aria-hidden="true"
+            />
+          )}
+
+          {leading === 'avatar' && (
+            <img
+              src={avatar}
+              alt=""
+              className={AVATAR_BASE}
+              aria-hidden="true"
+            />
+          )}
+
+          {/* ── Label ───────────────────────────────────────────── */}
+          <p
+            className={cn(
+              LABEL_BASE,
+              disabled ? LABEL_DISABLED : LABEL_DEFAULT,
+            )}
+          >
+            {label}
+          </p>
+
+          {/* ── Trailing checkmark (selected, non-checkbox leading) */}
+          {showTrailingTick && (
+            <TickIcon className={cn(TICK_BASE, TICK_COLOR)} />
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+SelectMenuItem.displayName = 'SelectMenuItem';
+
+export { SelectMenuItem };

package/src/components/SelectMenuItem/SelectMenuItem.types.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type SelectMenuItemSize = 'large' | 'medium';
+
+export type SelectMenuItemLeading = 'none' | 'icon' | 'dot' | 'checkbox' | 'avatar';
+
+export interface SelectMenuItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Height / padding variant.
+   * - `large`  — outer 40 px, content `p-spacing-md`
+   * - `medium` — outer 36 px, content `px-spacing-md py-spacing-sm`
+   * @default 'large'
+   */
+  size?: SelectMenuItemSize;
+
+  /**
+   * Leading element type shown before the label.
+   * @default 'none'
+   */
+  leading?: SelectMenuItemLeading;
+
+  /**
+   * Whether this item is currently selected.
+   * When `true` and `leading` is not `'checkbox'`, a trailing green checkmark appears.
+   * When `leading='checkbox'`, the checkbox is shown in checked state instead.
+   * @default false
+   */
+  selected?: boolean;
+
+  /** Disables all interaction and applies muted styles. @default false */
+  disabled?: boolean;
+
+  /** Text label for the item. @default 'User' */
+  label?: string;
+
+  /**
+   * Icon element rendered when `leading='icon'`.
+   * Pass any `ReactNode` (e.g. an SVG icon at 20×20 px).
+   */
+  icon?: ReactNode;
+
+  /**
+   * Image URL/path rendered when `leading='avatar'`.
+   * @default '/images/avatar.webp'
+   */
+  avatar?: string;
+}

package/src/components/SelectMenuItem/SelectMenuItem.variants.ts

@@ -0,0 +1,56 @@
+import type { SelectMenuItemSize } from './SelectMenuItem.types';
+
+// ─── Outer wrapper ────────────────────────────────────────────────────────────
+/** px-spacing-sm py-spacing-xxs — matches Figma outer padding */
+export const WRAPPER = 'flex flex-col items-start w-full px-spacing-sm py-spacing-xxs';
+
+// ─── Content row ─────────────────────────────────────────────────────────────
+/** Shared base for the inner content row */
+export const CONTENT_BASE =
+  'flex items-center gap-spacing-md rounded-[8px] w-full shrink-0 relative';
+
+/** Vertical padding differs between Large and Medium */
+export const CONTENT_PADDING: Record<SelectMenuItemSize, string> = {
+  large:  'p-spacing-md',
+  medium: 'px-spacing-md py-spacing-sm',
+};
+
+/**
+ * Background classes for hover and selected states.
+ * Applied to the content row, not the outer wrapper.
+ * Dark mode: semi-transparent white overlay.
+ */
+export const CONTENT_HOVER =
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(255,255,255,0.1)]';
+
+export const CONTENT_SELECTED =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(255,255,255,0.15)]';
+
+// ─── Label text ──────────────────────────────────────────────────────────────
+export const LABEL_BASE = 'flex-1 min-w-0 text-text-sm font-[400] truncate';
+
+export const LABEL_DEFAULT =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+export const LABEL_DISABLED = 'text-[rgba(157,164,174,1)]';
+
+// ─── Leading elements ─────────────────────────────────────────────────────────
+
+/** Status dot (Leading=Dot) */
+export const DOT_BASE = 'shrink-0 size-[10px] rounded-full';
+export const DOT_DEFAULT = 'bg-[rgba(37,147,95,1)]';
+export const DOT_DISABLED = 'bg-[rgba(157,164,174,1)]';
+
+/** Icon container (Leading=Icon) */
+export const ICON_WRAPPER = 'shrink-0 size-[20px] flex items-center justify-center';
+export const ICON_DEFAULT = 'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+export const ICON_DISABLED = 'text-[rgba(157,164,174,1)]';
+
+/** Avatar image (Leading=Avatar) */
+export const AVATAR_BASE =
+  'shrink-0 size-[24px] rounded-full object-cover overflow-hidden';
+
+// ─── Trailing checkmark (Selected=True, leading ≠ checkbox) ──────────────────
+export const TICK_BASE = 'shrink-0 size-[20px]';
+export const TICK_COLOR =
+  'text-[rgba(27,131,84,1)] dark:text-[rgba(52,211,153,1)]';

package/src/components/SelectMenuItem/index.ts

@@ -0,0 +1,2 @@
+export { SelectMenuItem } from './SelectMenuItem';
+export type { SelectMenuItemProps, SelectMenuItemSize, SelectMenuItemLeading } from './SelectMenuItem.types';

package/src/components/SeriesLabel/SeriesLabel.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { SeriesLabelProps } from './SeriesLabel.types';
+import {
+  DOT_COLORS,
+  DEFAULT_LABELS,
+  DOT_SIZE,
+  CONTAINER_BASE,
+  LABEL_COLOR,
+} from './SeriesLabel.variants';
+
+/**
+ * SeriesLabel
+ *
+ * A chart-legend item: a 12px coloured circle indicator followed by a text
+ * label identifying the data series.
+ *
+ * Traced from Figma node 5481:77363.
+ *
+ * Dot colours (data-viz palette — same in light and dark mode):
+ *   Series 1  →  green    rgba(27,131,84,1)    Colors/Primary-SA-Flag/600-primary
+ *   Series 2  →  lavender rgba(165,123,186,1)  Colors/Tertiary-Lavendar/400
+ *   Series 3  →  gold     rgba(245,189,2,1)    Colors/Secondary-Gold/500
+ *
+ * RTL: set `rtl` prop (or place inside a `dir="rtl"` parent) — CSS flex
+ *   direction automatically moves the dot to the right and text to the left.
+ *   No DOM reordering is performed; the same element order is used in all
+ *   directions.
+ *
+ * Dark mode: zero extra config — text colour swaps via `html.dark`.
+ *
+ * @example
+ * <SeriesLabel type="Series 1" />
+ * <SeriesLabel type="Series 2" label="Revenue" />
+ * <SeriesLabel type="Series 3" rtl />
+ */
+export const SeriesLabel = forwardRef<HTMLDivElement, SeriesLabelProps>(
+  function SeriesLabel(
+    { type = 'Series 1', label, rtl = false, className, ...props },
+    ref,
+  ) {
+    const dotColor = DOT_COLORS[type];
+    const labelText = label ?? DEFAULT_LABELS[type];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(CONTAINER_BASE, className)}
+        dir={rtl ? 'rtl' : undefined}
+        {...props}
+      >
+        {/* Colour indicator dot — 12px solid circle, data-viz colour */}
+        <span
+          className="shrink-0 rounded-full"
+          style={{
+            width: `${DOT_SIZE}px`,
+            height: `${DOT_SIZE}px`,
+            backgroundColor: dotColor,
+          }}
+          aria-hidden="true"
+        />
+
+        {/* Series label text */}
+        <p
+          className={cn('shrink-0 whitespace-nowrap', LABEL_COLOR)}
+        >
+          {labelText}
+        </p>
+      </div>
+    );
+  },
+);
+
+SeriesLabel.displayName = 'SeriesLabel';

package/src/components/SeriesLabel/SeriesLabel.types.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+
+/** Which data series this label represents. */
+export type SeriesLabelType = 'Series 1' | 'Series 2' | 'Series 3';
+
+export interface SeriesLabelProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Which series this label is for. Controls the dot colour and default text.
+   * @default 'Series 1'
+   */
+  type?: SeriesLabelType;
+
+  /**
+   * Override the default label text ("Series 1" / "Series 2" / "Series 3").
+   * Useful for localised or custom series names.
+   */
+  label?: string;
+
+  /**
+   * RTL mode — reverses the layout so the dot appears on the right and the
+   * label text on the left, matching Figma RTL frames exactly.
+   * The component also works without this prop when `dir="rtl"` is set on
+   * a parent or on `<html>`.
+   * @default false
+   */
+  rtl?: boolean;
+}

package/src/components/SeriesLabel/SeriesLabel.variants.ts

@@ -0,0 +1,84 @@
+/**
+ * SeriesLabel.variants.ts
+ *
+ * All constants for SeriesLabel.
+ * Traced from Figma node 5481:77363.
+ *
+ * ── Color tokens (get_variable_defs) ──────────────────────────────────────────
+ *   Colors/Primary-SA-Flag/600-primary  →  rgba(27,131,84,1)   Series 1 (green)
+ *   Colors/Tertiary-Lavendar/400        →  rgba(165,123,186,1) Series 2 (lavender)
+ *   Colors/Secondary-Gold/500           →  rgba(245,189,2,1)   Series 3 (gold)
+ *   Text/text-primary-paragraph         →  rgba(56,66,80,1)    label text (light)
+ *                                       →  rgba(229,231,235,1) label text (dark, project convention)
+ *
+ *   Dot colours are data-viz palette — identical in light and dark mode.
+ *
+ * ── Typography tokens ─────────────────────────────────────────────────────────
+ *   Font family:   Font Family/font-family-text = IBM Plex Sans Arabic (inherited)
+ *   Font weight:   font-weight-regular = 400
+ *   Font size:     Size/Text/typo-size-text-sm = 14px  → inline style (px)
+ *   Line height:   Line Height/Text/line-heights-text-sm = 20px → inline style
+ *
+ *   px values used directly (not rem) — root-font-size-agnostic, matches
+ *   TEXT_TOKENS.textSm exactly (fontSizePx: 14, lineHeightPx: 20).
+ *
+ * ── Spacing tokens ────────────────────────────────────────────────────────────
+ *   Global/spacing-sm = 6px → gap-spacing-sm
+ *
+ * ── Dimensions ────────────────────────────────────────────────────────────────
+ *   Dot size: 12px (fixed — no icon token at this size)
+ */
+
+import type { SeriesLabelType } from './SeriesLabel.types';
+
+// ─── Dot colours ──────────────────────────────────────────────────────────────
+// Data-visualisation palette — same in light and dark mode.
+
+export const DOT_COLORS: Record<SeriesLabelType, string> = {
+  'Series 1': 'rgba(27,131,84,1)',    // Colors/Primary-SA-Flag/600-primary
+  'Series 2': 'rgba(165,123,186,1)',  // Colors/Tertiary-Lavendar/400
+  'Series 3': 'rgba(245,189,2,1)',    // Colors/Secondary-Gold/500
+};
+
+// ─── Default label text ────────────────────────────────────────────────────────
+
+export const DEFAULT_LABELS: Record<SeriesLabelType, string> = {
+  'Series 1': 'Series 1',
+  'Series 2': 'Series 2',
+  'Series 3': 'Series 3',
+};
+
+// ─── Dot dimension ────────────────────────────────────────────────────────────
+
+/** Dot diameter in px — fixed 12px from Figma (no matching icon-size token). */
+export const DOT_SIZE = 12;
+
+// ─── Container ────────────────────────────────────────────────────────────────
+
+/**
+ * Root container.
+ * flex items-center — dot and label are vertically centred.
+ * gap-spacing-sm    — 6px gap (Global/spacing-sm).
+ *
+ * RTL: setting dir="rtl" on this container causes the flex items to flow
+ * right-to-left, placing the dot on the right and the label on the left —
+ * no DOM reordering needed.
+ */
+export const CONTAINER_BASE = 'flex items-center gap-spacing-sm';
+
+// ─── Label typography ─────────────────────────────────────────────────────────
+
+/**
+ * Tailwind classes for the label text colour.
+ * Light: Text/text-primary-paragraph (#384250).
+ * Dark:  project convention for this token → rgba(229,231,235,1).
+ */
+export const LABEL_COLOR =
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)] text-text-sm font-[400]';
+
+/**
+ * Text sm / Regular — responsive via --ds-typo-text-sm CSS var.
+ * Mobile 10px → Tablet 12px → Desktop 14px.
+ * Utility class: text-text-sm (defined in globals.css @utility).
+ */
+export const LABEL_TYPO = 'text-text-sm font-[400]';

package/src/components/SeriesLabel/index.ts

@@ -0,0 +1,2 @@
+export { SeriesLabel } from './SeriesLabel';
+export type { SeriesLabelProps, SeriesLabelType } from './SeriesLabel.types';