sdaia-ui 1.0.1 → 1.0.2

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

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

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

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

package/src/components/SelectMenuItem/SelectMenuItem.tsx

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

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

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

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

package/src/components/SeriesLabel/SeriesLabel.tsx

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

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

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

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