sdaia-ui 1.0.1 → 1.0.2

package/src/components/PieChartPanel/PieChartPanel.types.ts

@@ -1,130 +0,0 @@
-/**
- * PieChartPanel.types.ts
- *
- * Type definitions for the PieChartPanel component.
- * Traced from Figma node 5886:80844 (frame "Pie Chart").
- *
- * ── Variant × RTL matrix ──────────────────────────────────────────────────────
- *   SummaryView     LTR 5886:81039  RTL 5976:82700   271×132
- *   IndicatorView   LTR 5886:81026  RTL 5976:82694   271×252
- *   HeroView        LTR 5886:81012  RTL 5976:82665   271×365
- *   BreakdownPanel  LTR 5886:81299  RTL 5976:82502   271×632
- *   ComparisonView  LTR 5886:81399  RTL 5976:82679   271×377
- *   LegendBlock     LTR 5886:80950  RTL 5976:82603   562×289
- *   LabeledView     LTR 5886:80973  RTL 5976:82626   562×291
- *   AnnotatedView   LTR 5886:80913  RTL 5976:82570   562×436
- *   OverviewPanel   LTR 5886:80870  RTL 5976:82537   562×303
- *   CompactPanel    LTR 5886:80845  RTL 5976:82471   562×578
- */
-
-import type { HTMLAttributes } from 'react';
-
-// ─── Variant ──────────────────────────────────────────────────────────────────
-
-export type PieChartPanelVariant =
-  | 'SummaryView'
-  | 'IndicatorView'
-  | 'HeroView'
-  | 'BreakdownPanel'
-  | 'ComparisonView'
-  | 'LegendBlock'
-  | 'LabeledView'
-  | 'AnnotatedView'
-  | 'OverviewPanel'
-  | 'CompactPanel';
-
-// ─── Badge direction (trend indicator) ────────────────────────────────────────
-
-export type PieBadgeDirection = 'up' | 'down';
-
-// ─── Tab item ─────────────────────────────────────────────────────────────────
-
-export interface PieChartPanelTab {
-  label: string;
-  active?: boolean;
-}
-
-// ─── Data series item ─────────────────────────────────────────────────────────
-/**
- * Represents one pie segment + legend entry.
- *
- * `color`      — data-viz palette color (pie slice + legend square / left border).
- * `percentage` — share expressed as "10%", "20%" etc.
- * `value`      — primary metric value displayed in data rows.
- * `change`     — trend delta displayed in data rows (e.g. "-60%").
- * `label`      — legend / row label text.
- */
-export interface PieChartPanelItem {
-  label?: string;
-  change?: string;
-  value?: string;
-  percentage?: string;
-  color?: string;
-}
-
-// ─── Main props ───────────────────────────────────────────────────────────────
-
-export interface PieChartPanelProps extends HTMLAttributes<HTMLDivElement> {
-  /** Which layout variant to render. @default 'SummaryView' */
-  variant?: PieChartPanelVariant;
-
-  // ── Header ────────────────────────────────────────────────────────────────
-  /** Card title (Display sm / Bold) */
-  title?: string;
-  /** Subtitle / note below the title (Text md / Regular, secondary) */
-  note?: string;
-
-  // ── Indicator block ───────────────────────────────────────────────────────
-  /** Indicator name label */
-  indicatorName?: string;
-  /** Primary metric value e.g. "422.61" */
-  indicatorValue?: string;
-
-  // ── Trend badge ───────────────────────────────────────────────────────────
-  /** Badge percentage e.g. "12%" */
-  badgeValue?: string;
-  /** Arrow direction — 'up' = green positive, 'down' = red negative */
-  badgeDirection?: PieBadgeDirection;
-
-  // ── Date badge (AnnotatedView) ────────────────────────────────────────────
-  /** Date string rendered in a pill e.g. "26/02/2026" */
-  dateBadge?: string;
-
-  // ── Options label (OverviewPanel dropdown button) ─────────────────────────
-  /** Label for the Options dropdown button in OverviewPanel. @default 'Options' */
-  optionsLabel?: string;
-
-  // ── Data series ───────────────────────────────────────────────────────────
-  /**
-   * Series items used to build the pie chart + legend / data rows.
-   * Max 6 items; each has `label`, `value`, `change`, `percentage`, `color`.
-   */
-  series?: PieChartPanelItem[];
-
-  // ── Tab bar ───────────────────────────────────────────────────────────────
-  /** Tab items for LabeledView / AnnotatedView */
-  tabs?: PieChartPanelTab[];
-  /** Fired when a tab is clicked */
-  onTabChange?: (index: number) => void;
-
-  // ── CompactPanel playback scrubber ───────────────────────────────────────
-  /**
-   * Playback progress 0-100 for the CompactPanel scrubber (controlled).
-   * Omit to let the component manage its own scrubber position.
-   */
-  progress?: number;
-  /** Initial scrubber progress when uncontrolled. @default 0 */
-  defaultProgress?: number;
-  /** Current-time display string for CompactPanel, e.g. "0:12". */
-  currentTime?: string;
-  /** Total-duration display string for CompactPanel, e.g. "2:32". */
-  duration?: string;
-  /**
-   * Called when the user scrubs the CompactPanel progress bar.
-   * Receives the new value in the range 0-100.
-   */
-  onProgressChange?: (value: number) => void;
-
-  // ── RTL ───────────────────────────────────────────────────────────────────
-  rtl?: boolean;
-}

package/src/components/PieChartPanel/PieChartPanel.variants.ts

@@ -1,156 +0,0 @@
-/**
- * PieChartPanel.variants.ts
- *
- * All class-name constants and colour palette for PieChartPanel.
- * Traced from Figma node 5886:80844 (frame "Pie Chart").
- *
- * ── Color mapping ─────────────────────────────────────────────────────────────
- *   Text/text-default              #161616  /  dark rgba(229,231,235,1)
- *   Text/text-secondary-paragraph  #6c737f  /  dark #9ca3af
- *   Text/text-primary              #1b8354  (identical light + dark)
- *   Text/text-primary-paragraph    #384250
- *   Text/text-oncolor-primary      #ffffff
- *   Background/background-card     #ffffff  /  dark #141B34
- *   Background/background-menu     #ffffff  /  dark #141B34
- *   Background/background-error-50 #fef3f2
- *   Background/background-neutral-100 #f3f4f6
- *   Border/border-neutral-primary  #d2d6db  /  dark #374151
- *   Button/button-bg-neutral       #f3f4f6  /  dark #374151
- *   Button/button-bg-primary       #1b8354
- *   Colors/Primary-SA-Flag/400     #54c08a  (positive badge border)
- *   Colors/Primary-SA-Flag/50      #f3fcf6  (positive badge bg)
- *   Colors/Red/400                 #f97066  (negative badge border)
- *   Colors/Red/600                 #d92d20  (negative badge text)
- *   Colors/Neutral/100             #f3f4f6  (date badge bg)
- *
- * ── Data-viz palette (pie slice + legend square) ──────────────────────────────
- *   Series 1  Colors/Primary-SA-Flag/600  #1b8354
- *   Series 2  Colors/Tertiary-Lavendar/400 #a57bba
- *   Series 3  Colors/Secondary-Gold/500   #f5bd02
- *   Series 4  Colors/Blue/500             #2e90fa
- *   Series 5  Colors/Yellow/500           #f79009
- *   Series 6  Colors/Red/600              #d92d20
- */
-
-// ─── Data-viz palette ─────────────────────────────────────────────────────────
-/** Six data-viz series colors — identical in light and dark mode. */
-export const PIE_SERIES_COLORS: readonly string[] = [
-  '#1b8354', // Colors/Primary-SA-Flag/600   Series 1 (green)
-  '#a57bba', // Colors/Tertiary-Lavendar/400 Series 2 (lavender)
-  '#f5bd02', // Colors/Secondary-Gold/500    Series 3 (gold)
-  '#2e90fa', // Colors/Blue/500              Series 4 (blue)
-  '#f79009', // Colors/Yellow/500            Series 5 (amber)
-  '#d92d20', // Colors/Red/600               Series 6 (red)
-] as const;
-
-// ─── Root card ────────────────────────────────────────────────────────────────
-/**
- * Background/background-card (#ffffff / dark #141B34)
- * Radius/radius-8 = 8px
- */
-export const PIE_CARD_BASE =
-  'flex flex-col rounded-[8px] bg-white dark:bg-[#141B34] min-w-[239px] w-full';
-
-// ─── Divider ──────────────────────────────────────────────────────────────────
-/** Border/border-neutral-primary hairline rule. */
-export const PIE_DIVIDER = 'w-full h-px shrink-0 bg-[#d2d6db] dark:bg-[#374151]';
-
-// ─── Title ────────────────────────────────────────────────────────────────────
-/** Display sm / Bold — Text/text-default */
-export const PIE_TITLE_CLASS =
-  'text-display-sm font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] flex-1 min-w-0';
-
-// ─── Note ─────────────────────────────────────────────────────────────────────
-/** Text md / Regular — Text/text-secondary-paragraph */
-export const PIE_NOTE_CLASS =
-  'text-text-md font-[400] text-[#6c737f] dark:text-[#9ca3af] w-full';
-
-// ─── Indicator name ───────────────────────────────────────────────────────────
-/** Text xl / Regular — Text/text-secondary-paragraph (LegendBlock, OverviewPanel) */
-export const PIE_INDICATOR_NAME_SECONDARY =
-  'text-text-xl font-[400] text-[#6c737f] dark:text-[#9ca3af] w-full';
-
-/** Text xl / Regular — Text/text-default (IndicatorView, HeroView, BreakdownPanel) */
-export const PIE_INDICATOR_NAME_PRIMARY =
-  'text-text-xl font-[400] text-[#161616] dark:text-[rgba(229,231,235,1)] w-full';
-
-// ─── Indicator value ──────────────────────────────────────────────────────────
-/** Display sm / Bold — Text/text-default (LegendBlock, OverviewPanel) */
-export const PIE_INDICATOR_VALUE_LG =
-  'text-display-sm font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0';
-
-/** Display xs / Bold — Text/text-default (IndicatorView, HeroView, BreakdownPanel) */
-export const PIE_INDICATOR_VALUE_SM =
-  'text-display-xs font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0';
-
-// ─── Summary view text (left column) ─────────────────────────────────────────
-/** Text xl / Regular — secondary (SummaryView helper text) */
-export const PIE_SUMMARY_LABEL =
-  'text-text-xl font-[400] text-[#6c737f] dark:text-[#9ca3af] w-full';
-
-/** Display sm / Bold — default (SummaryView metric value) */
-export const PIE_SUMMARY_VALUE =
-  'text-display-sm font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] w-full';
-
-// ─── Trend badge ──────────────────────────────────────────────────────────────
-// Trend pill constants live in the shared `ChartBadge` component — consumed here
-// via `<ChartBadge type="increase" | "decrease" value={…} />`.
-
-// ─── Icon button (arrow-right) ────────────────────────────────────────────────
-/** Button/button-background-neutral-default, Radius/radius-8 */
-export const PIE_ICON_BUTTON =
-  'flex items-center justify-center p-spacing-sm rounded-[8px] shrink-0 ' +
-  'bg-[#f3f4f6] dark:bg-[#374151]';
-
-// ─── Legend square ────────────────────────────────────────────────────────────
-export const PIE_LEGEND_SQUARE = 'shrink-0 rounded-[2px]';
-
-// ─── Simple legend item (square + label) ─────────────────────────────────────
-export const PIE_LEGEND_ITEM = 'flex items-center gap-spacing-md justify-center shrink-0';
-export const PIE_LEGEND_LABEL =
-  'text-text-md font-[400] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap';
-
-// ─── LabeledView legend item (square + label + % value, inline) ───────────────
-/** Full row: flex justify-center, square+label flex-1, % value */
-export const PIE_LABELED_ROW = 'flex items-center gap-spacing-md justify-center w-full shrink-0';
-export const PIE_LABELED_VALUE =
-  'text-text-xl font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0';
-
-// ─── ComparisonView legend row (square + label text-lg + % value text-xl) ─────
-/** Text lg / Regular — Text/text-default */
-export const PIE_COMPARISON_LABEL =
-  'text-text-lg font-[400] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0';
-
-// ─── Data rows (left-border rows) ─────────────────────────────────────────────
-export const PIE_DATA_ROW_WRAPPER = 'flex flex-col gap-spacing-md items-start w-full';
-
-/** Data row: border-s + ps-md + gap between columns */
-export const PIE_DATA_ROW =
-  'flex items-center ps-spacing-md border-s-[3px] border-solid w-full';
-
-export const PIE_DATA_ROW_LABEL =
-  'text-text-md font-[400] text-[#6c737f] dark:text-[#9ca3af] whitespace-nowrap shrink-0';
-
-/** Change column: Text lg / Medium — secondary */
-export const PIE_DATA_ROW_CHANGE =
-  'text-text-lg font-[500] text-[#6c737f] dark:text-[#9ca3af]';
-
-export const PIE_DATA_ROW_VALUE =
-  'text-text-xl font-[700] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap shrink-0';
-
-// ─── CompactPanel scrubber ───────────────────────────────────────────────────
-/** Time labels for the CompactPanel playback scrubber. */
-export const PIE_PROGRESS_TIME =
-  'text-text-sm font-[400] leading-[20px] text-[#6c737f] dark:text-[#9ca3af] whitespace-nowrap tabular-nums';
-
-/** Full-width scrubber container, matching AudioPlayer detailed progress sizing. */
-export const PIE_PROGRESS_CONTAINER =
-  'relative w-full shrink-0 h-[12px] flex items-center';
-
-/** Scrubber track stripe. */
-export const PIE_PROGRESS_TRACK =
-  'absolute inset-x-0 h-[4px] rounded-[2px] -translate-y-1/2 top-1/2 bg-[rgba(229,231,235,1)] dark:bg-[rgba(75,85,99,1)]';
-
-/** Scrubber filled stripe; width is set from the progress percentage. */
-export const PIE_PROGRESS_FILL =
-  'absolute start-0 h-[4px] rounded-[2px] -translate-y-1/2 top-1/2 bg-[rgba(56,66,80,1)] dark:bg-[rgba(243,244,246,1)]';

package/src/components/PieChartPanel/index.ts

@@ -1,8 +0,0 @@
-export { PieChartPanel } from './PieChartPanel';
-export type {
-  PieChartPanelProps,
-  PieChartPanelVariant,
-  PieChartPanelItem,
-  PieChartPanelTab,
-  PieBadgeDirection,
-} from './PieChartPanel.types';