@mt-gloss/ui 0.0.2

package/lib/dashboard/ChartControlBar/ChartControlBar.d.ts

@@ -0,0 +1,45 @@
+import { default as React, ReactNode } from 'react';
+import { ChartControlBarProps } from './types';
+/**
+ * ChartControlBar - three-layer chart control bar with metric, entity, and dimension toggles.
+ *
+ * Renders a composited control bar with grey track backgrounds (layer 1),
+ * FusedShape SVG connectors (layer 2), and interactive TabGroup controls (layer 3).
+ * Supports filter trays that slide down from active tabs with autocomplete inputs.
+ *
+ * @example
+ * ```tsx
+ * import { ChartControlBar } from '@mt-gloss/ui';
+ *
+ * <ChartControlBar
+ *   vizState={vizState}
+ *   onTypeChange={setType}
+ *   onQuantChange={setQuant}
+ *   onEntityTypeChange={setEntityType}
+ *   onEntitySelect={handleEntitySelect}
+ *   onItemSelect={handleItemSelect}
+ *   onTimeFrameChange={setTimeFrame}
+ *   userType="sales-agency"
+ *   entityFilterOptions={entityOptions}
+ *   itemFilterOptions={itemOptions}
+ *   datePickerSlot={<DatePicker />}
+ * />
+ * ```
+ */
+export declare const ChartControlBar: React.MemoExoticComponent<({ vizState, onTypeChange, onQuantChange, onEntityTypeChange, onEntitySelect, onItemSelect, onTimeFrameChange, userType, entityFilterOptions, itemFilterOptions, datePickerSlot, metricTabs, entityTabs, dimensionTabs, showDimensionGroup, }: ChartControlBarProps & {
+    datePickerSlot?: ReactNode;
+    metricTabs?: {
+        id: string;
+        label: string;
+        mono?: boolean;
+    }[];
+    entityTabs?: {
+        id: string;
+        label: string;
+    }[];
+    dimensionTabs?: {
+        id: string;
+        label: string;
+    }[];
+    showDimensionGroup?: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;

package/lib/dashboard/ChartControlBar/FilterInput.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { FilterOption } from './types';
+interface FilterInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSelect?: (option: FilterOption) => void;
+    onSubmit?: (value: string) => void;
+    onClear: () => void;
+    activeValue?: string | null;
+    fading?: boolean;
+    options?: FilterOption[];
+}
+/**
+ * FilterInput - search input with autocomplete dropdown for chart control bar filters.
+ *
+ * Supports filled state (showing active value with clear button) and empty state
+ * (search input with blinking caret and dropdown suggestions).
+ *
+ * @example
+ * ```tsx
+ * import { FilterInput } from '@mt-gloss/ui';
+ *
+ * <FilterInput
+ *   value={search}
+ *   onChange={setSearch}
+ *   onSubmit={handleSubmit}
+ *   onClear={handleClear}
+ *   activeValue={filterValue}
+ *   options={filterOptions}
+ * />
+ * ```
+ */
+export declare const FilterInput: React.MemoExoticComponent<({ value, onChange, onSelect, onSubmit, onClear, activeValue, fading, options, }: FilterInputProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/dashboard/ChartControlBar/FusedShape.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+interface FusedShapeProps {
+    pillLeft: number;
+    pillWidth: number;
+    pillTop: number;
+    pillHeight: number;
+    filterLeft: number;
+    filterWidth: number;
+    filterTop: number;
+    filterHeight: number;
+    visible: boolean;
+}
+/**
+ * FusedShape - SVG connector shape between a tab pill and its filter tray.
+ *
+ * Renders absolutely-positioned div elements that form a visual connection
+ * between an active tab (pill) and its associated filter input (tray below).
+ * Uses inverted corner masks for smooth rounded connections.
+ *
+ * @example
+ * ```tsx
+ * import { FusedShape } from '@mt-gloss/ui';
+ *
+ * <FusedShape
+ *   pillLeft={100} pillWidth={80} pillTop={0} pillHeight={32}
+ *   filterLeft={80} filterWidth={200} filterTop={40} filterHeight={32}
+ *   visible={isFilterOpen}
+ * />
+ * ```
+ */
+export declare const FusedShape: React.MemoExoticComponent<({ pillLeft, pillWidth, pillTop, pillHeight, filterLeft, filterWidth, filterTop, filterHeight, visible, }: FusedShapeProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/dashboard/ChartControlBar/Row1Controls.d.ts

@@ -0,0 +1,62 @@
+import { default as React, MutableRefObject, ReactNode } from 'react';
+interface TabDef {
+    id: string;
+    label: string;
+    mono?: boolean;
+}
+interface GroupDef {
+    id: string;
+    tabs: TabDef[];
+}
+interface Row1ControlsProps {
+    selections: {
+        metric: string;
+        entity: string;
+        dimension: string;
+    };
+    metricGroup: GroupDef;
+    entityGroup: GroupDef;
+    dimensionGroup: GroupDef;
+    onSelect: (groupId: string, tabId: string) => void;
+    onEntityToggle: () => void;
+    onDimensionToggle: () => void;
+    metricGroupRef: MutableRefObject<HTMLDivElement | null>;
+    entityGroupRef: MutableRefObject<HTMLDivElement | null>;
+    dimensionGroupRef: MutableRefObject<HTMLDivElement | null>;
+    entityTabRefs: MutableRefObject<Record<string, HTMLElement>>;
+    dimensionTabRefs: MutableRefObject<Record<string, HTMLElement>>;
+    showItemFilter: boolean;
+    showEntityFilter: boolean;
+    showDimensionGroup?: boolean;
+    datePickerSlot?: ReactNode;
+}
+/**
+ * Row1Controls - top row of the chart control bar containing metric, entity, and dimension tab groups.
+ *
+ * Renders three TabGroup instances with ref forwarding for geometry measurement.
+ * Includes an optional datePickerSlot pushed to the far right via auto margin.
+ *
+ * @example
+ * ```tsx
+ * import { Row1Controls } from '@mt-gloss/ui';
+ *
+ * <Row1Controls
+ *   selections={{ metric: '$', entity: 'orders', dimension: 'customers' }}
+ *   metricGroup={metricGroup}
+ *   entityGroup={entityGroup}
+ *   dimensionGroup={dimensionGroup}
+ *   onSelect={handleSelect}
+ *   onEntityToggle={handleEntityToggle}
+ *   onDimensionToggle={handleDimensionToggle}
+ *   metricGroupRef={metricGroupRef}
+ *   entityGroupRef={entityGroupRef}
+ *   dimensionGroupRef={dimensionGroupRef}
+ *   entityTabRefs={entityTabRefs}
+ *   dimensionTabRefs={dimensionTabRefs}
+ *   showItemFilter={showItemFilter}
+ *   showEntityFilter={showEntityFilter}
+ * />
+ * ```
+ */
+export declare const Row1Controls: React.MemoExoticComponent<({ selections, metricGroup, entityGroup, dimensionGroup, onSelect, onEntityToggle, onDimensionToggle, metricGroupRef, entityGroupRef, dimensionGroupRef, entityTabRefs, dimensionTabRefs, showItemFilter, showEntityFilter, showDimensionGroup, datePickerSlot, }: Row1ControlsProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/dashboard/ChartControlBar/Row2FilterTray.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+import { FilterOption } from './types';
+interface Row2FilterTrayProps {
+    showRow2: boolean;
+    showItemFilter: boolean;
+    showEntityFilter: boolean;
+    itemFilterLayout: {
+        left: number;
+        width: number;
+    };
+    entityFilterLayout: {
+        left: number;
+        width: number;
+    };
+    itemSearch: string;
+    setItemSearch: (v: string) => void;
+    onItemSubmit: (v: string) => void;
+    onItemSelect?: (option: FilterOption) => void;
+    onItemClear: () => void;
+    itemFilterValue: string | null;
+    itemOptions?: FilterOption[];
+    entitySearch: string;
+    setEntitySearch: (v: string) => void;
+    onEntitySubmit: (v: string) => void;
+    onEntitySelect?: (option: FilterOption) => void;
+    onEntityClear: () => void;
+    entityFilterValue: string | null;
+    entityFading: boolean;
+    entityOptions?: FilterOption[];
+}
+/**
+ * Row2FilterTray - animated filter tray that slides down from the control bar.
+ *
+ * Renders two absolutely-positioned FilterInput instances (item and entity)
+ * with slide and fade transitions driven by visibility flags.
+ *
+ * @example
+ * ```tsx
+ * import { Row2FilterTray } from '@mt-gloss/ui';
+ *
+ * <Row2FilterTray
+ *   showRow2={showRow2}
+ *   showItemFilter={showItemFilter}
+ *   showEntityFilter={showEntityFilter}
+ *   itemFilterLayout={{ left: 100, width: 200 }}
+ *   entityFilterLayout={{ left: 300, width: 200 }}
+ *   itemSearch={itemSearch}
+ *   setItemSearch={setItemSearch}
+ *   onItemSubmit={handleItemSubmit}
+ *   onItemClear={handleItemClear}
+ *   itemFilterValue={itemFilterValue}
+ *   entitySearch={entitySearch}
+ *   setEntitySearch={setEntitySearch}
+ *   onEntitySubmit={handleEntitySubmit}
+ *   onEntityClear={handleEntityClear}
+ *   entityFilterValue={entityFilterValue}
+ *   entityFading={entityFading}
+ * />
+ * ```
+ */
+export declare const Row2FilterTray: React.MemoExoticComponent<({ showRow2, showItemFilter, showEntityFilter, itemFilterLayout, entityFilterLayout, itemSearch, setItemSearch, onItemSubmit, onItemSelect, onItemClear, itemFilterValue, itemOptions, entitySearch, setEntitySearch, onEntitySubmit, onEntitySelect, onEntityClear, entityFilterValue, entityFading, entityOptions, }: Row2FilterTrayProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/lib/dashboard/ChartControlBar/fixtures/controlBarStates.d.ts

@@ -0,0 +1,4 @@
+import { ChartControlBarProps } from '../types';
+export declare const defaultControlBarState: ChartControlBarProps;
+export declare const filteredState: ChartControlBarProps;
+export declare const compactState: ChartControlBarProps;

package/lib/dashboard/ChartControlBar/index.d.ts

@@ -0,0 +1,8 @@
+export { ChartControlBar } from './ChartControlBar';
+export { Row1Controls } from './Row1Controls';
+export { Row2FilterTray } from './Row2FilterTray';
+export { FusedShape } from './FusedShape';
+export { FilterInput } from './FilterInput';
+export { useFilterLayout } from './useFilterLayout';
+export * from './types';
+export { defaultControlBarState, filteredState, compactState } from './fixtures/controlBarStates';

package/lib/dashboard/ChartControlBar/types.d.ts

@@ -0,0 +1,37 @@
+import { TabGroupProps } from '../TabGroup/types';
+/** A selectable filter option for entity/item dropdowns. */
+export interface FilterOption {
+    id: string;
+    label: string;
+    type?: string;
+    group?: string;
+}
+/** The chart visualization state passed as props. */
+export interface VizState {
+    type: string;
+    quant: '$' | '#';
+    entity: {
+        type: string | null;
+        id: string | null;
+        name: string | null;
+    };
+    byItem: {
+        id: string | null;
+        name: string | null;
+    };
+    timeFrame: string;
+}
+/** Props for the presentational ChartControlBar component. */
+export interface ChartControlBarProps {
+    vizState: VizState;
+    onTypeChange: (type: string) => void;
+    onQuantChange: (quant: '$' | '#') => void;
+    onEntityTypeChange: (entityType: string) => void;
+    onEntitySelect: (id: string | null, name: string | null) => void;
+    onItemSelect: (id: string | null, name: string | null) => void;
+    onTimeFrameChange: (timeFrame: string) => void;
+    userType: string;
+    entityFilterOptions: FilterOption[];
+    itemFilterOptions: FilterOption[];
+}
+export type { TabGroupProps };

package/lib/dashboard/ChartControlBar/useFilterLayout.d.ts

@@ -0,0 +1,51 @@
+import { RefObject } from 'react';
+interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    right: number;
+    bottom: number;
+}
+interface PillRect {
+    left: number;
+    width: number;
+    top: number;
+    height: number;
+}
+interface FilterRect {
+    left: number;
+    width: number;
+    top: number;
+    height: number;
+}
+export interface Geometry {
+    itemPill: PillRect;
+    itemFilter: FilterRect;
+    entityPill: PillRect;
+    entityFilter: FilterRect;
+    tracks: Rect[];
+}
+/**
+ * useFilterLayout - measures tab group and tab pill geometry for FusedShape connectors.
+ *
+ * Uses ResizeObserver and window resize to track geometry changes.
+ * Returns pill positions, filter tray positions, and track rectangles.
+ *
+ * @example
+ * ```tsx
+ * import { useFilterLayout } from '@mt-gloss/ui';
+ *
+ * const geo = useFilterLayout(
+ *   rootRef, metricGroupRef, entityGroupRef, dimensionGroupRef,
+ *   entityTabRefs, dimensionTabRefs,
+ *   selections, showRow2, itemFilterValue, entityFilterValue,
+ * );
+ * ```
+ */
+export declare function useFilterLayout(rootRef: RefObject<HTMLDivElement | null>, metricGroupRef: RefObject<HTMLDivElement | null>, entityGroupRef: RefObject<HTMLDivElement | null>, dimensionGroupRef: RefObject<HTMLDivElement | null>, entityTabRefs: RefObject<Record<string, HTMLElement>>, dimensionTabRefs: RefObject<Record<string, HTMLElement>>, selections: {
+    metric: string;
+    entity: string;
+    dimension: string;
+}, showRow2: boolean, itemFilterValue: string | null, entityFilterValue: string | null): Geometry;
+export {};

package/lib/dashboard/FilterChip/FilterChip.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { FilterChipProps } from './types';
+/**
+ * FilterChip - removable MUI Chip wrapper for displaying active filters.
+ *
+ * Wraps MUI's Chip component with CSS variable-based theming for consistent
+ * styling across the dashboard. Supports filled/outlined variants and custom colors.
+ *
+ * The `field` and `value` props are consumer metadata for filter identification --
+ * the component does not use them internally but they are part of the type contract
+ * for filter management systems.
+ *
+ * @example
+ * ```tsx
+ * import { FilterChip } from '@mt-gloss/ui';
+ *
+ * <FilterChip
+ *   id="status-1"
+ *   label="Status: Open"
+ *   field="status"
+ *   value="open"
+ *   onRemove={(id) => removeFilter(id)}
+ * />
+ * ```
+ */
+export declare const FilterChip: React.MemoExoticComponent<({ id, label, onRemove, color, variant, size, }: FilterChipProps) => import("react/jsx-runtime").JSX.Element>;

package/lib/dashboard/FilterChip/fixtures/filterChips.d.ts

@@ -0,0 +1,11 @@
+import { FilterChipProps } from '../types';
+/** Entity filter chip example. */
+export declare const entityChip: FilterChipProps;
+/** Status filter chip example. */
+export declare const statusChip: FilterChipProps;
+/** Date range filter chip example. */
+export declare const dateChip: FilterChipProps;
+/** Manufacturer filter chip example. */
+export declare const manufacturerChip: FilterChipProps;
+/** All fixture chips as an array. */
+export declare const allChips: FilterChipProps[];

package/lib/dashboard/FilterChip/index.d.ts

@@ -0,0 +1,3 @@
+export { FilterChip } from './FilterChip';
+export type { FilterChipProps } from './types';
+export { entityChip, statusChip, dateChip, manufacturerChip, allChips } from './fixtures/filterChips';

package/lib/dashboard/FilterChip/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * GlossUI FilterChip type contracts.
+ *
+ * Removable filter chip props for active filter display.
+ * No context, BFF, or dashboard-specific imports.
+ */
+/** Props for the presentational FilterChip component. */
+export interface FilterChipProps {
+    id: string;
+    label: string;
+    field: string;
+    value: string;
+    onRemove: (id: string) => void;
+    color?: string;
+    variant?: 'filled' | 'outlined';
+    size?: 'small' | 'medium';
+}

package/lib/dashboard/MetricCard/CardShell.d.ts

@@ -0,0 +1,22 @@
+import { CardShellProps } from './types';
+/**
+ * CardShell - Shared card wrapper with hover states, 180ms leave timeout,
+ * and perspective container.
+ *
+ * GlossUI version: accepts `gutterContent` as a ReactNode slot instead of
+ * importing GutterActions directly. This keeps CardShell free of dashboard-
+ * specific UI dependencies.
+ *
+ * @example
+ * ```tsx
+ * import { CardShell, MetricCard } from '@mt-gloss/ui';
+ *
+ * <CardShell colSpan={1}>
+ *   <MetricCard variant="standard" label="Revenue" value={125430} />
+ * </CardShell>
+ * ```
+ */
+export declare const CardShell: {
+    ({ children, colSpan, isStale, isRetrying, beta, disabled, style, onGraph, onDetails, onCustomize, onRemove, onWhatsThis, onExpand, onShrink, onMove, onReplace, onNavigate, onRetry, onRefresh, isGraphActive, isTableActive, isGraphCard, canExpand, cardRef: externalCardRef, }: CardShellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/dashboard/MetricCard/GutterActions.d.ts

@@ -0,0 +1,56 @@
+export interface GutterActionsProps {
+    visible: boolean;
+    menuOpen: boolean;
+    onMenuToggle: (open: boolean) => void;
+    onGraph?: () => void;
+    onDetails?: () => void;
+    onCustomize?: () => void;
+    onRemove?: () => void;
+    onWhatsThis?: () => void;
+    onExpand?: () => void;
+    onShrink?: () => void;
+    onMove?: () => void;
+    onReplace?: () => void;
+    onNavigate?: () => void;
+    onRetry?: () => void;
+    onRefresh?: () => void;
+    onQuickSettings?: () => void;
+    onFlipBack?: () => void;
+    isFlipped?: boolean;
+    onViewAsStack?: () => void;
+    onUnstack?: () => void;
+    canExpand?: boolean;
+    isGraphCard?: boolean;
+    colSpan?: 1 | 2;
+    isGraphActive?: boolean;
+    isTableActive?: boolean;
+    /** Label for graph pill button (injected, no registry dependency). */
+    graphLabel?: string;
+    /** Label for details pill button (injected, no registry dependency). */
+    detailsLabel?: string;
+}
+/**
+ * GutterActions - Pill + overflow menu interaction system.
+ *
+ * Pure presentational version: no context, BFF, or dispatch-actions dependencies.
+ * Action labels are injected via graphLabel/detailsLabel props.
+ *
+ * Two-phase reveal animation via useSlideOutReveal hook (slideDirection: 'down').
+ *
+ * @example
+ * ```tsx
+ * import { GutterActions } from '@mt-gloss/ui';
+ *
+ * <GutterActions
+ *   visible={isHovered}
+ *   menuOpen={menuOpen}
+ *   onMenuToggle={setMenuOpen}
+ *   onGraph={() => {}}
+ *   onDetails={() => {}}
+ * />
+ * ```
+ */
+export declare const GutterActions: {
+    ({ visible, menuOpen, onMenuToggle, onGraph, onDetails, onCustomize, onRemove, onWhatsThis, onExpand, onShrink, onMove, onReplace, onNavigate, onRetry, onRefresh, onQuickSettings, onFlipBack, isFlipped, onViewAsStack, onUnstack, canExpand, isGraphCard, colSpan, isGraphActive, isTableActive, graphLabel, detailsLabel, }: GutterActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/dashboard/MetricCard/MetricCard.d.ts

@@ -0,0 +1,33 @@
+import { MetricCardProps } from './types';
+/**
+ * MetricCard -- Unified display component handling 9 variants via props.
+ *
+ * All variants share a Zone A/B/C layout:
+ *   Zone A (Label): Fixed 28px height, 10.5px uppercase
+ *   Zone B (Value): flex:1, dynamic font size based on formatted string length
+ *   Zone C (Subtitle + Trend): flex row, min-height 18px
+ *
+ * Renders as a fragment -- CardShell provides the outer container with padding,
+ * flex column, and hover states.
+ *
+ * Props use a discriminated union keyed on `variant`. Each variant carries its
+ * own required extra fields (e.g. sparklineData for sparkline, segments for segmented).
+ *
+ * @example
+ * ```tsx
+ * import { MetricCard } from '@mt-gloss/ui';
+ *
+ * <MetricCard
+ *   variant="standard"
+ *   label="Total Revenue"
+ *   value={125430}
+ *   valueFormat={{ prefix: '$', abbreviated: true }}
+ *   trend={{ value: 12.5, direction: 'up' }}
+ *   subtitle="MTD"
+ * />
+ * ```
+ */
+export declare const MetricCard: {
+    (props: MetricCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/dashboard/MetricCard/StackedGroupCard.d.ts

@@ -0,0 +1,43 @@
+import { TrendData } from './types';
+export interface StackedValueEntry {
+    timeframe: string;
+    value: number | null;
+    trend?: TrendData | null;
+}
+export interface StackedGroupCardProps {
+    title: string;
+    prefix?: string;
+    suffix?: string;
+    values?: StackedValueEntry[];
+    timeframes?: string[];
+    sparklineData?: Record<string, number[]>;
+    accentColor?: string;
+    pinnedTimeframe?: string;
+    onPinTimeframe?: (timeframe: string) => void;
+    /** When true, value cells blur and sparkline animates to flat during data refresh. */
+    isStale?: boolean;
+}
+/**
+ * StackedGroupCard -- Renders 3 mini metric values horizontally within a 2-col card.
+ *
+ * Pure presentational version: no context or BFF dependencies.
+ *
+ * @example
+ * ```tsx
+ * import { StackedGroupCard } from '@mt-gloss/ui';
+ *
+ * <StackedGroupCard
+ *   title="Revenue"
+ *   prefix="$"
+ *   values={[
+ *     { timeframe: 'MTD', value: 42000 },
+ *     { timeframe: 'QTD', value: 125000 },
+ *     { timeframe: 'YTD', value: 480000 },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const StackedGroupCard: {
+    ({ title, prefix, suffix, values, timeframes, sparklineData, accentColor, pinnedTimeframe, onPinTimeframe, isStale, }: StackedGroupCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/dashboard/MetricCard/TrendIndicator.d.ts

@@ -0,0 +1,20 @@
+import { TrendDirection } from './utils/formatTrend';
+interface TrendIndicatorProps {
+    value: number | null | undefined;
+    direction?: TrendDirection;
+}
+/**
+ * TrendIndicator - Renders a colored pill with solid triangle arrow and formatted percentage.
+ *
+ * @example
+ * ```tsx
+ * import { TrendIndicator } from '@mt-gloss/ui';
+ *
+ * <TrendIndicator value={12.5} direction="up" />
+ * ```
+ */
+export declare const TrendIndicator: {
+    ({ value, direction }: TrendIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/lib/dashboard/MetricCard/fixtures/allVariants.d.ts

@@ -0,0 +1,6 @@
+import { MetricCardProps } from '../types';
+/**
+ * One fixture per MetricCard variant -- covers all 9 discriminated union cases.
+ * Uses realistic B2B wholesale data shapes.
+ */
+export declare const allVariantFixtures: MetricCardProps[];

package/lib/dashboard/MetricCard/fixtures/sparklineCard.d.ts

@@ -0,0 +1,5 @@
+import { SparklineVariant } from '../types';
+/** Sparkline card fixture -- Daily Orders with 14-day trend line. */
+export declare const sparklineFixture: SparklineVariant;
+/** Sparkline card with upward trend. */
+export declare const sparklineUpFixture: SparklineVariant;

package/lib/dashboard/MetricCard/fixtures/standardCard.d.ts

@@ -0,0 +1,7 @@
+import { StandardVariant } from '../types';
+/** Standard metric card fixture -- Total Revenue with trend. */
+export declare const standardFixture: StandardVariant;
+/** Standard card with negative trend. */
+export declare const standardNegativeFixture: StandardVariant;
+/** Standard card with flat trend. */
+export declare const standardFlatFixture: StandardVariant;

package/lib/dashboard/MetricCard/fixtures/states.d.ts

@@ -0,0 +1,19 @@
+import { MetricCardProps, SparklineVariant } from '../types';
+/**
+ * Transient state fixtures -- test loading, error, empty, and stale states
+ * across different card variants.
+ */
+/** Loading state: minimal props, isLoading true. */
+export declare const loadingFixture: MetricCardProps;
+/** Error state: isError true, value present from last successful fetch. */
+export declare const errorFixture: MetricCardProps;
+/** Empty state: isEmpty true, value null (no data available). */
+export declare const emptyFixture: MetricCardProps;
+/** Stale state: complete card data with isStale true (triggers blur transition). */
+export declare const staleFixture: MetricCardProps;
+/** Stale sparkline: tests flatten animation on background viz. */
+export declare const staleSparklineFixture: SparklineVariant;
+/** Stale donut: tests progress arc collapse to 0. */
+export declare const staleDonutFixture: MetricCardProps;
+/** All state fixtures as an array for iteration in explorer. */
+export declare const allStateFixtures: MetricCardProps[];

package/lib/dashboard/MetricCard/index.d.ts

@@ -0,0 +1,20 @@
+export { MetricCard } from './MetricCard';
+export { CardShell } from './CardShell';
+export { TrendIndicator } from './TrendIndicator';
+export { GutterActions } from './GutterActions';
+export { StackedGroupCard } from './StackedGroupCard';
+export { useSlideOutReveal } from './useSlideOutReveal';
+export * from './types';
+export type { GutterActionsProps } from './GutterActions';
+export type { StackedGroupCardProps, StackedValueEntry } from './StackedGroupCard';
+export type { SlideOutRevealConfig, SlideOutRevealReturn } from './useSlideOutReveal';
+export { SparklineBg } from './visualizations/SparklineBg';
+export { BarsBg } from './visualizations/BarsBg';
+export { DonutChart } from './visualizations/DonutChart';
+export { ObjectArrow } from './visualizations/ObjectArrow';
+export { formatValue } from './utils/formatValue';
+export { formatTrend } from './utils/formatTrend';
+export { allVariantFixtures } from './fixtures/allVariants';
+export { loadingFixture, errorFixture, emptyFixture, staleFixture, staleSparklineFixture, staleDonutFixture, allStateFixtures, } from './fixtures/states';
+export { sparklineFixture, sparklineUpFixture } from './fixtures/sparklineCard';
+export { standardFixture, standardNegativeFixture, standardFlatFixture } from './fixtures/standardCard';