@mt-gloss/ui 0.0.2

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

@@ -0,0 +1,109 @@
+import { ReactNode, CSSProperties, RefObject } from 'react';
+/** Value formatting options. */
+export interface ValueFormat {
+    prefix?: string;
+    suffix?: string;
+    abbreviated?: boolean;
+}
+/** Trend indicator data for Zone C display. */
+export interface TrendData {
+    value: number;
+    direction: 'up' | 'down' | 'flat';
+    label?: string;
+}
+/** A single segment entry for donut/segmented cards. */
+export interface SegmentEntry {
+    value: number;
+    color: string;
+    label?: string;
+}
+/** Versus comparison data for side-by-side period cards. */
+export interface VersusData {
+    current: number | string;
+    prior: number | string;
+    currentLabel?: string;
+    priorLabel?: string;
+}
+/** Base props shared by all MetricCard variants. */
+export interface BaseMetricCardProps {
+    label: string;
+    value?: number | string | null;
+    valueFormat?: ValueFormat;
+    trend?: TrendData | null;
+    subtitle?: string;
+    colSpan?: 1 | 2;
+    isStale?: boolean;
+    isLoading?: boolean;
+    isError?: boolean;
+    isEmpty?: boolean;
+}
+export interface StandardVariant extends BaseMetricCardProps {
+    variant: 'standard';
+}
+export interface SparklineVariant extends BaseMetricCardProps {
+    variant: 'sparkline';
+    sparklineData: number[];
+    accentColor?: string;
+}
+export interface BarsVariant extends BaseMetricCardProps {
+    variant: 'bars';
+    barData: number[];
+    accentColor?: string;
+}
+export interface DonutVariant extends BaseMetricCardProps {
+    variant: 'donut';
+    donutValue: number;
+    donutMax?: number;
+    accentColor?: string;
+}
+export interface HighlightVariant extends BaseMetricCardProps {
+    variant: 'highlight';
+    highlightColor: string;
+}
+export interface ArrowVariant extends BaseMetricCardProps {
+    variant: 'arrow';
+    arrowDirection: 'up' | 'down';
+    arrowShape?: 'chevron' | 'triple' | 'bars';
+}
+export interface ObjectArrowVariant extends BaseMetricCardProps {
+    variant: 'object-arrow';
+    objectArrowValue: number;
+    objectArrowMax: number;
+}
+export interface VersusVariant extends BaseMetricCardProps {
+    variant: 'versus';
+    versusData: VersusData;
+}
+export interface SegmentedVariant extends BaseMetricCardProps {
+    variant: 'segmented';
+    segments: SegmentEntry[];
+}
+/** Discriminated union of all MetricCard variant props. */
+export type MetricCardProps = StandardVariant | SparklineVariant | BarsVariant | DonutVariant | HighlightVariant | ArrowVariant | ObjectArrowVariant | VersusVariant | SegmentedVariant;
+/** Props for the CardShell wrapper component. */
+export interface CardShellProps {
+    children: ReactNode;
+    colSpan?: 1 | 2;
+    isStale?: boolean;
+    isRetrying?: boolean;
+    beta?: boolean;
+    disabled?: boolean;
+    style?: CSSProperties;
+    onGraph?: () => void;
+    onDetails?: () => void;
+    onCustomize?: ((ref: RefObject<HTMLDivElement | null>) => void) | (() => void);
+    onRemove?: () => void;
+    onExpand?: () => void;
+    onShrink?: () => void;
+    onMove?: () => void;
+    onReplace?: () => void;
+    onNavigate?: () => void;
+    onRetry?: () => void;
+    onRefresh?: () => void;
+    onWhatsThis?: () => void;
+    isGraphActive?: boolean;
+    isTableActive?: boolean;
+    isGraphCard?: boolean;
+    canExpand?: boolean;
+    cardRef?: RefObject<HTMLDivElement | null>;
+}

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

@@ -0,0 +1,42 @@
+type SlideDirection = 'down' | 'left';
+type AnimationPhase = 'hidden' | 'entering-behind' | 'entering-front' | 'visible' | 'exiting-front' | 'exiting-behind';
+export interface SlideOutRevealConfig {
+    slideDirection?: SlideDirection;
+    behindDuration?: number;
+    frontDuration?: number;
+    easing?: string;
+    behindEasing?: string;
+    zBehind?: number;
+    zFront?: number;
+}
+export interface SlideOutRevealStyle {
+    transform: string;
+    zIndex: number;
+    transition: string;
+    pointerEvents: 'auto' | 'none';
+}
+export interface SlideOutRevealReturn {
+    phase: AnimationPhase;
+    handleTransitionEnd: () => void;
+    style: SlideOutRevealStyle;
+}
+/**
+ * useSlideOutReveal -- 6-state slide-out animation hook.
+ *
+ * Two-phase reveal: element slides from behind a parent surface (z-index behind),
+ * then once it emerges, z-index switches to front and it settles at resting position.
+ * Exit is the reverse sequence.
+ *
+ * @example
+ * ```ts
+ * import { useSlideOutReveal } from '@mt-gloss/ui';
+ *
+ * const { phase, handleTransitionEnd, style } = useSlideOutReveal(isVisible, {
+ *   slideDirection: 'down',
+ *   zBehind: 1,
+ *   zFront: 16,
+ * });
+ * ```
+ */
+export declare function useSlideOutReveal(visible: boolean, config?: SlideOutRevealConfig): SlideOutRevealReturn;
+export {};

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

@@ -0,0 +1,2 @@
+export { formatTrend } from '@mt-gloss/utils';
+export type { TrendDirection, FormattedTrend } from '@mt-gloss/utils';

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

@@ -0,0 +1,2 @@
+export { formatValue, getValueFontSize } from '@mt-gloss/utils';
+export type { FormatValueOptions, FormattedValue } from '@mt-gloss/utils';

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

@@ -0,0 +1,25 @@
+interface BarsBgProps {
+    data?: number[];
+    color?: string;
+    /** When true, bars animate to flat via scaleY(0.05). */
+    isStale?: boolean;
+}
+/**
+ * BarsBg -- Full-width background bar chart SVG for bars variant cards.
+ *
+ * Renders vertical bars where the last bar is more prominent (14% opacity)
+ * and all others are subtle (6% opacity). Max bar height is 82% of viewBox.
+ * Positioned absolutely at the bottom of the card (z-index 1).
+ *
+ * @example
+ * ```tsx
+ * import { BarsBg } from '@mt-gloss/ui';
+ *
+ * <BarsBg data={[65, 72, 58, 80, 91, 85]} color="#8b5cf6" />
+ * ```
+ */
+export declare const BarsBg: {
+    ({ data, color, isStale }: BarsBgProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,26 @@
+interface DonutChartProps {
+    value?: number;
+    max?: number;
+    color?: string;
+    colSpan?: number;
+    /** When true, progress arc animates to 0 (empty ring). */
+    isStale?: boolean;
+}
+/**
+ * DonutChart -- Circular SVG progress ring positioned inline left of value in Zone B.
+ *
+ * Renders a track circle at 6% opacity with a progress arc on top.
+ * Size adapts based on column span: 34px at span 1, 40px at span 2.
+ *
+ * @example
+ * ```tsx
+ * import { DonutChart } from '@mt-gloss/ui';
+ *
+ * <DonutChart value={78} max={100} color="#10b981" />
+ * ```
+ */
+export declare const DonutChart: {
+    ({ value, max, color, colSpan, isStale }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,28 @@
+interface ObjectArrowProps {
+    value?: number;
+    max?: number;
+    trendValue?: number;
+    color?: string;
+    colSpan?: number;
+    /** When true, progress arc animates to 0 (empty ring). */
+    isStale?: boolean;
+}
+/**
+ * ObjectArrow -- Circular SVG progress ring with a center percentage label.
+ *
+ * Similar to DonutChart but larger, with a centered percentage text inside the ring.
+ * Color follows the trend direction (positive=#10b981, negative=#ef4444, neutral=#6b7280).
+ * Size adapts based on column span: 36px at span 1, 44px at span 2.
+ *
+ * @example
+ * ```tsx
+ * import { ObjectArrow } from '@mt-gloss/ui';
+ *
+ * <ObjectArrow value={85} max={100} trendValue={5.2} color="#10b981" />
+ * ```
+ */
+export declare const ObjectArrow: {
+    ({ value, max, trendValue, color, colSpan, isStale }: ObjectArrowProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,24 @@
+interface SparklineBgProps {
+    data?: number[];
+    color?: string;
+    /** When true, sparkline animates to flat via scaleY(0.05). */
+    isStale?: boolean;
+}
+/**
+ * SparklineBg -- Full-width background sparkline SVG for sparkline variant cards.
+ *
+ * Renders an area chart with gradient fill and a thin stroke line.
+ * Positioned absolutely at the bottom of the card (z-index 1).
+ *
+ * @example
+ * ```tsx
+ * import { SparklineBg } from '@mt-gloss/ui';
+ *
+ * <SparklineBg data={[42, 38, 51, 47, 55]} color="#6366f1" />
+ * ```
+ */
+export declare const SparklineBg: {
+    ({ data, color, isStale }: SparklineBgProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/lib/dashboard/MetricCardGrid/MetricCardGrid.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { MetricCardGridProps } from './types';
+/**
+ * MetricCardGrid - CSS grid layout with @dnd-kit drag-and-drop reordering.
+ *
+ * Renders cards in a paginated grid with sortable slots. Card rendering is fully
+ * delegated to the `renderCard` render prop. Empty slots can be customized via
+ * `renderEmptySlot`. The grid manages DnD interaction internally and reports
+ * order changes via `onReorder`.
+ *
+ * @example
+ * ```tsx
+ * import { MetricCardGrid } from '@mt-gloss/ui';
+ * import type { GridCardData, GridLayout } from '@mt-gloss/ui';
+ *
+ * const layout: GridLayout = { columns: 6, rowHeight: 120, gap: 15, maxRows: 3, currentPage: 0, totalPages: 1 };
+ *
+ * <MetricCardGrid
+ *   cards={cards}
+ *   cardOrder={cardOrder}
+ *   layout={layout}
+ *   onReorder={setCardOrder}
+ *   onPageChange={setPage}
+ *   renderCard={(card) => <MyCard data={card} />}
+ * />
+ * ```
+ */
+export declare const MetricCardGrid: React.NamedExoticComponent<MetricCardGridProps>;

package/lib/dashboard/MetricCardGrid/fixtures/gridCards.d.ts

@@ -0,0 +1,3 @@
+import { GridCardData } from '../types';
+/** 10 sample cards with varying colSpan for explorer demos. */
+export declare const gridCards: GridCardData[];

package/lib/dashboard/MetricCardGrid/fixtures/layouts.d.ts

@@ -0,0 +1,7 @@
+import { GridLayout } from '../types';
+/** Compact layout: 6 columns, 3 rows, fits ~18 single-span cards. */
+export declare const compactLayout: GridLayout;
+/** Standard layout: 9 columns, 3 rows, fits ~27 single-span cards. */
+export declare const standardLayout: GridLayout;
+/** Full-width layout: 12 columns, 3 rows, fits ~36 single-span cards. */
+export declare const fullLayout: GridLayout;

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

@@ -0,0 +1,4 @@
+export { MetricCardGrid } from './MetricCardGrid';
+export type { MetricCardGridProps, GridCardData, GridLayout } from './types';
+export { gridCards } from './fixtures/gridCards';
+export { compactLayout, standardLayout, fullLayout } from './fixtures/layouts';

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

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+/** Data for a single card slot in the grid. */
+export interface GridCardData {
+    id: string;
+    colSpan: 1 | 2;
+    content: ReactNode;
+}
+/** Grid layout configuration. */
+export interface GridLayout {
+    columns: number;
+    rowHeight: number;
+    gap: number;
+    maxRows: number;
+    currentPage: number;
+    totalPages: number;
+}
+/** Props for the presentational MetricCardGrid component. */
+export interface MetricCardGridProps {
+    cards: GridCardData[];
+    cardOrder: string[];
+    layout: GridLayout;
+    onReorder: (newOrder: string[]) => void;
+    onPageChange: (page: number) => void;
+    onExpand?: (cardId: string) => void;
+    onShrink?: (cardId: string) => void;
+    renderCard: (card: GridCardData) => ReactNode;
+    renderEmptySlot?: (index: number) => ReactNode;
+}

package/lib/dashboard/Skeleton/Skeleton.d.ts

@@ -0,0 +1,25 @@
+import { SkeletonProps } from './types';
+/**
+ * Skeleton - merged primitive skeleton with block, text, and circle variants.
+ *
+ * Uses a discriminated union on the `variant` prop. Renders shimmer-animated
+ * placeholder shapes for loading states. Pure functional component with no state.
+ *
+ * @example
+ * ```tsx
+ * import { Skeleton } from '@mt-gloss/ui';
+ *
+ * // Block variant
+ * <Skeleton variant="block" width="100%" height={16} />
+ *
+ * // Text variant (3 lines)
+ * <Skeleton variant="text" lines={3} lineHeight={14} gap={8} />
+ *
+ * // Circle variant
+ * <Skeleton variant="circle" size={40} />
+ * ```
+ */
+export declare const Skeleton: {
+    (props: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/dashboard/Skeleton/SkeletonCard.d.ts

@@ -0,0 +1,20 @@
+import { SkeletonCardProps } from './types';
+/**
+ * SkeletonCard - metric card skeleton matching the MetricCard layout.
+ *
+ * Supports value, trend, and target variants with corresponding skeleton shapes.
+ * The hero value block width scales with `colSpan`.
+ *
+ * @example
+ * ```tsx
+ * import { SkeletonCard } from '@mt-gloss/ui';
+ *
+ * <SkeletonCard variant="value" colSpan={1} />
+ * <SkeletonCard variant="trend" colSpan={2} />
+ * <SkeletonCard variant="target" colSpan={1} />
+ * ```
+ */
+export declare const SkeletonCard: {
+    ({ variant, colSpan, }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/dashboard/Skeleton/SkeletonChart.d.ts

@@ -0,0 +1,18 @@
+import { SkeletonChartProps } from './types';
+/**
+ * SkeletonChart - bar chart silhouette skeleton with varying-height bars.
+ *
+ * Renders a configurable number of bars (max 10) with static height percentages
+ * that create a natural varying-height silhouette.
+ *
+ * @example
+ * ```tsx
+ * import { SkeletonChart } from '@mt-gloss/ui';
+ *
+ * <SkeletonChart bars={10} maxHeight={120} />
+ * ```
+ */
+export declare const SkeletonChart: {
+    ({ bars, maxHeight, }: SkeletonChartProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/dashboard/Skeleton/SkeletonTable.d.ts

@@ -0,0 +1,18 @@
+import { SkeletonTableProps } from './types';
+/**
+ * SkeletonTable - table skeleton with header row and configurable body rows.
+ *
+ * Renders a header block and body rows with optional checkbox column.
+ * Supports configurable row count, column count, and row height.
+ *
+ * @example
+ * ```tsx
+ * import { SkeletonTable } from '@mt-gloss/ui';
+ *
+ * <SkeletonTable rows={5} columns={3} hasCheckbox={false} rowHeight={44} />
+ * ```
+ */
+export declare const SkeletonTable: {
+    ({ rows, columns, hasCheckbox, rowHeight, }: SkeletonTableProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/dashboard/Skeleton/fixtures/skeletonSamples.d.ts

@@ -0,0 +1,7 @@
+import { SkeletonProps, SkeletonChartProps, SkeletonTableProps, SkeletonCardProps } from '../types';
+export declare const blockSamples: SkeletonProps[];
+export declare const textSamples: SkeletonProps[];
+export declare const circleSamples: SkeletonProps[];
+export declare const chartSamples: SkeletonChartProps[];
+export declare const tableSamples: SkeletonTableProps[];
+export declare const cardSamples: SkeletonCardProps[];

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

@@ -0,0 +1,6 @@
+export { Skeleton } from './Skeleton';
+export { SkeletonChart } from './SkeletonChart';
+export { SkeletonTable } from './SkeletonTable';
+export { SkeletonCard } from './SkeletonCard';
+export type { SkeletonProps, SkeletonChartProps, SkeletonTableProps, SkeletonCardProps, } from './types';
+export { blockSamples, textSamples, circleSamples, chartSamples, tableSamples, cardSamples, } from './fixtures/skeletonSamples';

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

@@ -0,0 +1,55 @@
+/**
+ * GlossUI Skeleton Type Definitions
+ *
+ * Unified type contracts for the Skeleton component family.
+ * Primitive Skeleton uses a discriminated union on `variant`.
+ * Composites (Chart, Table, Card) have independent prop interfaces.
+ */
+interface SkeletonBlockVariant {
+    variant: 'block';
+    /** Width in px (number) or CSS string */
+    width?: number | string;
+    /** Height in px (number) or CSS string */
+    height?: number | string;
+    /** Border radius in px (number) or CSS string */
+    borderRadius?: number | string;
+}
+interface SkeletonTextVariant {
+    variant: 'text';
+    /** Number of text lines */
+    lines?: number;
+    /** Height of each line in px */
+    lineHeight?: number;
+    /** Gap between lines in px */
+    gap?: number;
+}
+interface SkeletonCircleVariant {
+    variant: 'circle';
+    /** Circle diameter in px */
+    size?: number;
+}
+/** Discriminated union for the merged Skeleton primitive */
+export type SkeletonProps = SkeletonBlockVariant | SkeletonTextVariant | SkeletonCircleVariant;
+export interface SkeletonChartProps {
+    /** Number of bars to render (max 10) */
+    bars?: number;
+    /** Maximum height in px */
+    maxHeight?: number;
+}
+export interface SkeletonTableProps {
+    /** Number of body rows */
+    rows?: number;
+    /** Number of columns */
+    columns?: number;
+    /** Show checkbox column */
+    hasCheckbox?: boolean;
+    /** Row height in px */
+    rowHeight?: number;
+}
+export interface SkeletonCardProps {
+    /** Card variant: value (default), trend, or target */
+    variant?: 'value' | 'trend' | 'target';
+    /** Column span (1 = standard, 2+ = wide) */
+    colSpan?: number;
+}
+export {};

package/lib/dashboard/TabGroup/TabGroup.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { TabGroupProps } from './types';
+/**
+ * TabGroup - pill-style segmented control with sliding active indicator.
+ *
+ * Renders a group of tabs as inline pill buttons with an animated sliding highlight
+ * that tracks the active tab. Supports hover ghost effect and ResizeObserver-based
+ * re-measurement. Fully controlled via `activeId` and `onSelect`.
+ *
+ * @example
+ * ```tsx
+ * import { TabGroup } from '@mt-gloss/ui';
+ * import type { GroupDef } from '@mt-gloss/ui';
+ *
+ * const group: GroupDef = {
+ *   id: 'period',
+ *   tabs: [
+ *     { id: 'MTD', label: 'MTD' },
+ *     { id: 'QTD', label: 'QTD' },
+ *     { id: 'YTD', label: 'YTD' },
+ *   ],
+ * };
+ *
+ * <TabGroup group={group} activeId="MTD" onSelect={(id) => setActive(id)} />
+ * ```
+ */
+export declare const TabGroup: React.MemoExoticComponent<({ group, activeId, onSelect, onToggle, groupRef, exposeTabRefs, connectorActive, }: TabGroupProps) => import("react/jsx-runtime").JSX.Element>;

package/lib/dashboard/TabGroup/fixtures/tabGroups.d.ts

@@ -0,0 +1,7 @@
+import { GroupDef } from '../types';
+/** Metric toggle group: dollar vs count. */
+export declare const metricTabGroup: GroupDef;
+/** Entity breakdown group: order types by data dimension. */
+export declare const entityTabGroup: GroupDef;
+/** Time frame period group. */
+export declare const timeFrameTabGroup: GroupDef;

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

@@ -0,0 +1,3 @@
+export { TabGroup } from './TabGroup';
+export type { TabGroupProps, TabDef, GroupDef } from './types';
+export { metricTabGroup, entityTabGroup, timeFrameTabGroup } from './fixtures/tabGroups';

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

@@ -0,0 +1,22 @@
+import { MutableRefObject } from 'react';
+/** Single tab definition. */
+export interface TabDef {
+    id: string;
+    label: string;
+    mono?: boolean;
+}
+/** A group of related tabs with a unique group identifier. */
+export interface GroupDef {
+    id: string;
+    tabs: TabDef[];
+}
+/** Props for the presentational TabGroup component. */
+export interface TabGroupProps {
+    group: GroupDef;
+    activeId: string;
+    onSelect: (tabId: string) => void;
+    onToggle?: () => void;
+    groupRef?: MutableRefObject<HTMLDivElement | null>;
+    exposeTabRefs?: MutableRefObject<Record<string, HTMLElement>>;
+    connectorActive?: boolean;
+}

package/lib/dashboard/TabbedDataView/TabbedDataView.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { TabbedDataViewProps } from './types';
+/**
+ * TabbedDataView - controlled MUI Tabs shell with render prop content delegation.
+ *
+ * Renders a scrollable tab bar from `TabConfig[]` with optional close buttons,
+ * add-tab action, and an actions slot. Tab content is fully delegated to the
+ * `renderTabContent` render prop. No internal data fetching or state management.
+ *
+ * @example
+ * ```tsx
+ * import { TabbedDataView } from '@mt-gloss/ui';
+ * import type { TabConfig } from '@mt-gloss/ui';
+ *
+ * const tabs: TabConfig[] = [
+ *   { id: 'all', type: 'orders', name: 'All Orders', closable: false },
+ *   { id: 'open', type: 'orders', name: 'Open Orders', closable: true },
+ * ];
+ *
+ * <TabbedDataView
+ *   tabs={tabs}
+ *   activeTabId="all"
+ *   onTabChange={setActiveTab}
+ *   onTabClose={removeTab}
+ *   renderTabContent={(tab) => <DataGrid tabType={tab.type} />}
+ * />
+ * ```
+ */
+export declare const TabbedDataView: React.NamedExoticComponent<TabbedDataViewProps>;

package/lib/dashboard/TabbedDataView/fixtures/tabConfigs.d.ts

@@ -0,0 +1,9 @@
+import { TabConfig } from '../types';
+/** Typical orders tab configuration. */
+export declare const ordersTabs: TabConfig[];
+/** Mixed tab types demonstrating variety. */
+export declare const mixedTabs: TabConfig[];
+/** Single tab for minimal rendering tests. */
+export declare const singleTab: TabConfig[];
+/** 10 tabs to demonstrate MUI scroll behavior. */
+export declare const manyTabs: TabConfig[];

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

@@ -0,0 +1,3 @@
+export { TabbedDataView } from './TabbedDataView';
+export type { TabbedDataViewProps, TabConfig } from './types';
+export { ordersTabs, mixedTabs, singleTab, manyTabs } from './fixtures/tabConfigs';

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+/** Configuration for a single tab in the tab bar. */
+export interface TabConfig {
+    id: string;
+    type: string;
+    name: string;
+    icon?: ReactNode;
+    closable?: boolean;
+    autoCreated?: boolean;
+}
+/** Props for the presentational TabbedDataView shell component. */
+export interface TabbedDataViewProps {
+    tabs: TabConfig[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+    onTabClose: (tabId: string) => void;
+    onTabAdd?: () => void;
+    renderTabContent: (tab: TabConfig) => ReactNode;
+    actions?: ReactNode;
+}

package/lib/dashboard/TimeFrame/ExpandableChip.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { ExpandableChipProps } from './types';
+/**
+ * ExpandableChip - Hover-expand preset group with pinning functionality.
+ *
+ * Shows a chip with the pinned/default preset label. On hover, expands to show
+ * all options in a dropdown menu. Each option can be pinned as the default.
+ *
+ * @example
+ * ```tsx
+ * <ExpandableChip
+ *   groupId="rolling"
+ *   options={ROLLING_OPTIONS}
+ *   selectedId="30d"
+ *   defaultId="mtd"
+ *   onSelect={(id) => setSelected(id)}
+ *   pinnedId="mtd"
+ *   onPin={(id) => setPinned(id)}
+ * />
+ * ```
+ */
+export declare const ExpandableChip: React.FC<ExpandableChipProps>;