@amsterdamdatalabs/enact-design-system 0.1.10 → 0.1.19

package/dist/components/data/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface FunnelChartStage {
+    label: string;
+    value: number;
+}
+export interface FunnelChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: FunnelChartStage[];
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function FunnelChart({ data, className, ref, ...rest }: FunnelChartProps): import("react").JSX.Element | null;

package/dist/components/data/FunnelChart/index.d.ts

@@ -0,0 +1 @@
+export { FunnelChart, type FunnelChartProps, type FunnelChartStage, } from "./FunnelChart";

package/dist/components/data/Gauge/Gauge.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export type GaugeTier = "healthy" | "positive" | "neutral" | "at-risk" | string;
+export interface GaugeProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    /** Maximum scale. Default: 100. */
+    max?: number;
+    ref?: Ref<HTMLDivElement>;
+    /** Outer diameter in px. Default: 72. */
+    size?: number;
+    /** Semantic tier — controls arc color via DS tint tokens. */
+    tier?: GaugeTier;
+    /** Optional label beneath the value (e.g. "Platinum"). */
+    tierLabel?: string;
+    /** Current value (0–max). */
+    value: number;
+}
+export declare function Gauge({ value, max, tier, tierLabel, size, className, children, ref, style, ...rest }: GaugeProps): import("react").JSX.Element;

package/dist/components/data/Gauge/index.d.ts

@@ -0,0 +1 @@
+export { Gauge, type GaugeProps, type GaugeTier } from "./Gauge";

package/dist/components/data/HorizontalBarChart/HorizontalBarChart.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface HorizontalBarChartItem {
+    fill?: string;
+    label: string;
+    value: number;
+}
+export interface HorizontalBarChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: HorizontalBarChartItem[];
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function HorizontalBarChart({ data, className, ref, ...rest }: HorizontalBarChartProps): import("react").JSX.Element | null;

package/dist/components/data/HorizontalBarChart/index.d.ts

@@ -0,0 +1 @@
+export { HorizontalBarChart, type HorizontalBarChartItem, type HorizontalBarChartProps, } from "./HorizontalBarChart";

package/dist/components/data/LineChart/LineChart.d.ts

@@ -0,0 +1,32 @@
+import type { Ref, SVGProps } from "react";
+export interface LineChartProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /** Curve interpolation. Default: linear. */
+    curve?: "linear" | "monotone" | "smooth";
+    /** Numeric series — points are normalised to the min/max range. */
+    data: number[];
+    /** Shared upper bound for multi-series charts. Defaults to the data maximum. */
+    domainMax?: number;
+    /** Shared lower bound for multi-series charts. Defaults to the data minimum. */
+    domainMin?: number;
+    /** SVG viewport height in px. Default: 120. */
+    height?: number;
+    /** Inner chart margin in px. Defaults to 4px on each side. */
+    margin?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+    };
+    /** Point marker fill. Default: surface for hollow markers. */
+    pointFill?: "line" | "surface";
+    ref?: Ref<SVGSVGElement>;
+    /** Show the area fill below the line. Default: true. */
+    showArea?: boolean;
+    /** Show point markers at each data point. Default: true. */
+    showPoints?: boolean;
+    /** Line and point opacity. Default: 1. */
+    strokeOpacity?: number;
+    /** Stroke width in px. Default: 2. */
+    strokeWidth?: number;
+}
+export declare function LineChart({ curve, data, domainMax, domainMin, height, margin, pointFill, showArea, showPoints, strokeOpacity, strokeWidth, className, ref, ...rest }: LineChartProps): import("react").JSX.Element | null;

package/dist/components/data/LineChart/MultiLineChart.d.ts

@@ -0,0 +1,27 @@
+import type { Ref, SVGProps } from "react";
+export interface MultiLineChartSeries {
+    className?: string;
+    data: number[];
+    pointFill?: "line" | "surface";
+    showPoints?: boolean;
+    strokeOpacity?: number;
+}
+export interface MultiLineChartProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /** Curve interpolation. Default: monotone (Recharts parity). */
+    curve?: "linear" | "monotone" | "smooth";
+    domainMax?: number;
+    domainMin?: number;
+    height?: number;
+    margin?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+    };
+    ref?: Ref<SVGSVGElement>;
+    series: MultiLineChartSeries[];
+    showGrid?: boolean;
+    strokeWidth?: number;
+    xLabels?: string[];
+}
+export declare function MultiLineChart({ curve, domainMax, domainMin, height, margin, ref, series, showGrid, strokeWidth, xLabels, className, ...rest }: MultiLineChartProps): import("react").JSX.Element | null;

package/dist/components/data/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart, type LineChartProps } from "./LineChart";
+export { MultiLineChart, type MultiLineChartProps, type MultiLineChartSeries, } from "./MultiLineChart";

package/dist/components/data/LineChart/line-chart-paths.d.ts

@@ -0,0 +1,16 @@
+export type ChartPoint = readonly [number, number];
+export declare function createLinearPath(points: readonly ChartPoint[]): string;
+/** Cardinal-style smooth curve (legacy EDS default for stat sparklines). */
+export declare function createSmoothPath(points: readonly ChartPoint[]): string;
+/** Fritsch–Carlson monotone cubic — matches Recharts `type="monotone"`. */
+export declare function createMonotonePath(points: readonly ChartPoint[]): string;
+export declare function createLinePath(points: readonly ChartPoint[], curve: "linear" | "smooth" | "monotone"): string;
+export declare function mapSeriesToPoints(data: readonly number[], options: {
+    domainMax: number;
+    domainMin: number;
+    drawableH: number;
+    drawableW: number;
+    left: number;
+    viewH: number;
+    bottom: number;
+}): ChartPoint[];

package/dist/components/data/List/List.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, LiHTMLAttributes, Ref } from "react";
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /** Render thin dividers between items. */
+    dividers?: boolean;
+    /** Gap between items. Uses the same spacing tokens as Stack. */
+    gap?: "0" | "1" | "2" | "3" | "4";
+    /** Render as an ordered list (`<ol>`). Defaults to false. */
+    ordered?: boolean;
+    ref?: Ref<HTMLUListElement>;
+}
+export declare function List({ ordered, dividers, gap, className, children, ref, ...rest }: ListProps): import("react").JSX.Element;
+export interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    /** Make the item selectable/interactive (adds tabIndex, role, keyboard handling). */
+    interactive?: boolean;
+    /** ARIA role when interactive (default: option for listbox rows; use button for action lists). */
+    interactiveRole?: "button" | "option";
+    ref?: Ref<HTMLLIElement>;
+    /** Marks this item as the current selection. Sets aria-selected. */
+    selected?: boolean;
+    /** Optional status indicator dot. idle=muted, running=brand/info, done=success, failed=danger. */
+    status?: "idle" | "running" | "done" | "failed";
+}
+export declare function ListItem({ interactive, interactiveRole, selected, status, className, children, onClick, ref, ...rest }: ListItemProps): import("react").JSX.Element;

package/dist/components/data/List/index.d.ts

@@ -0,0 +1 @@
+export { List, ListItem, type ListItemProps, type ListProps } from "./List";

package/dist/components/data/MetricCard/MetricCard.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export interface MetricCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Supporting text in the footer (e.g. "Trending up this month"). */
+    caption?: ReactNode;
+    /** Secondary footer slot — description or sparkline placeholder. */
+    children?: ReactNode;
+    /** Delta text shown in the top-right outline badge (e.g. "+12%"). */
+    delta?: ReactNode;
+    /** Semantic direction of the delta — controls the badge icon only. */
+    deltaDirection?: "up" | "down" | "flat";
+    /** Optional icon rendered at the top-right of the card. */
+    icon?: ReactNode;
+    /** Text label for the metric (e.g. "Total Revenue"). */
+    label: string;
+    ref?: Ref<HTMLDivElement>;
+    /** Donor section-cards surface: light primary tint gradient, solid card in dark. */
+    surface?: "default" | "section";
+    /** The primary metric value (e.g. "$1.2M"). */
+    value: ReactNode;
+    /**
+     * `kpi` = dashboard section cards (footer caption, responsive value scale).
+     * `stat` = cards tab stats (header caption as CardDescription, 3xl value, chart in content).
+     */
+    variant?: "kpi" | "stat";
+}
+export declare function MetricCard({ caption, children, className, delta, deltaDirection, icon, label, ref, surface, variant, value, ...rest }: MetricCardProps): import("react").JSX.Element;

package/dist/components/data/MetricCard/index.d.ts

@@ -0,0 +1 @@
+export { MetricCard, type MetricCardProps } from "./MetricCard";

package/dist/components/data/ReorderableList/ReorderableList.d.ts

@@ -0,0 +1,55 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type ReorderableListOrientation = "horizontal" | "vertical";
+export type ReorderableListActivation = {
+    distance: number;
+} | {
+    delay: number;
+    tolerance: number;
+};
+/** Props to spread on a drag-handle element when `useDragHandle` is enabled. */
+export interface ReorderableListDragHandleProps {
+    attributes?: Record<string, unknown>;
+    listeners?: Record<string, unknown>;
+    setActivatorNodeRef?: (node: unknown) => void;
+}
+/** The neutral render contract exposed to application adapters. */
+export interface ReorderableListRenderItemInfo<T> {
+    drag: () => void;
+    dragHandleProps?: ReorderableListDragHandleProps;
+    index: number;
+    isActive: boolean;
+    item: T;
+}
+export interface ReorderableListProps<T> extends Omit<HTMLAttributes<HTMLUListElement>, "children" | "onDragStart"> {
+    /** Pointer-sensor activation constraint. Defaults to an 8px movement distance. */
+    activation?: ReorderableListActivation;
+    /** Current drag id when this list is hosted by an external DndContext. */
+    activeId?: string | null;
+    /** Prevent all drag interactions. */
+    disabled?: boolean;
+    /** Render inside a parent DndContext instead of creating one. */
+    externalDndContext?: boolean;
+    /** Stable id for every item. */
+    getId: (item: T, index: number) => string;
+    /** Optional dnd-kit metadata for integrations that own an outer drag context. */
+    getItemData?: (item: T, index: number) => Record<string, unknown>;
+    /** Items to render. Reordering is reported through `onReorder`; ownership remains with the caller. */
+    items: T[];
+    /** Called after a completed internal reorder. */
+    onReorder?: (items: T[]) => void;
+    /** Called when a drag is cancelled in an internally-owned DndContext. */
+    onReorderCancel?: () => void;
+    /** Called when a drag starts in an internally-owned DndContext. */
+    onReorderStart?: (id: string) => void;
+    /** List direction and matching dnd sorting strategy. */
+    orientation?: ReorderableListOrientation;
+    renderItem: (info: ReorderableListRenderItemInfo<T>) => ReactElement;
+    /** Restrict drag activation to `dragHandleProps` passed to `renderItem`. */
+    useDragHandle?: boolean;
+}
+/**
+ * Browser-native controlled sortable list. It owns dnd-kit wiring, keyboard
+ * reordering, and drag visuals while applications retain data persistence and
+ * any native-platform gesture implementation.
+ */
+export declare function ReorderableList<T>({ activation, activeId: externalActiveId, className, disabled, externalDndContext, getId, getItemData, items, onReorder, onReorderCancel, onReorderStart, orientation, renderItem, useDragHandle, ...rest }: ReorderableListProps<T>): import("react").JSX.Element;

package/dist/components/data/ReorderableList/index.d.ts

@@ -0,0 +1 @@
+export { ReorderableList, type ReorderableListActivation, type ReorderableListDragHandleProps, type ReorderableListOrientation, type ReorderableListProps, type ReorderableListRenderItemInfo, } from "./ReorderableList";

package/dist/components/data/ReorderableList/reorder-drag-handlers.d.ts

@@ -0,0 +1,28 @@
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+export declare function handleReorderDragStart<T>(event: DragStartEvent, items: T[], onReorderStart?: (id: string) => void): {
+    activeId: string;
+    dragItems: T[];
+};
+export declare function handleReorderDragCancel(): {
+    activeId: null;
+    dragItems: null;
+};
+export declare function handleReorderDragEnd<T>(items: T[], dragItems: T[] | null, getId: (item: T, index: number) => string, event: DragEndEvent): {
+    activeId: null;
+    dragItems: null;
+    nextItems: T[] | null;
+};
+export declare function createReorderListHandlers<T>({ dragItems, getId, items, onReorder, onReorderCancel, onReorderStart, setActiveId, setDragItems, }: {
+    dragItems: T[] | null;
+    getId: (item: T, index: number) => string;
+    items: T[];
+    onReorder?: (items: T[]) => void;
+    onReorderCancel?: () => void;
+    onReorderStart?: (id: string) => void;
+    setActiveId: (id: string | null) => void;
+    setDragItems: (items: T[] | null) => void;
+}): {
+    onDragCancel: () => void;
+    onDragEnd: (event: DragEndEvent) => void;
+    onDragStart: (event: DragStartEvent) => void;
+};

package/dist/components/data/ReorderableList/reorder-items.d.ts

@@ -0,0 +1,3 @@
+import type { DragEndEvent } from "@dnd-kit/core";
+export declare function applyDragEnd<T>(items: T[], dragItems: T[] | null, getId: (item: T, index: number) => string, event: DragEndEvent): T[] | null;
+export declare function reorderItems<T>(items: T[], getId: (item: T, index: number) => string, event: DragEndEvent): T[] | null;

package/dist/components/data/ReorderableList/reorder-list-modifiers.d.ts

@@ -0,0 +1,3 @@
+import type { Modifier } from "@dnd-kit/core";
+export declare const restrictToHorizontalAxis: Modifier;
+export declare const restrictToVerticalAxis: Modifier;

package/dist/components/data/ReorderableList/reorderable-item.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement } from "react";
+import type { ReorderableListRenderItemInfo } from "./ReorderableList";
+export interface ReorderableItemProps<T> {
+    activeId: string | null;
+    disabled: boolean;
+    externalDndContext: boolean;
+    id: string;
+    index: number;
+    item: T;
+    itemData?: Record<string, unknown>;
+    renderItem: (info: ReorderableListRenderItemInfo<T>) => ReactElement;
+    useDragHandle: boolean;
+}
+declare function ReorderableItemInner<T>({ activeId, disabled, externalDndContext, id, index, item, itemData, renderItem, useDragHandle, }: ReorderableItemProps<T>): import("react").JSX.Element;
+export declare const ReorderableItem: typeof ReorderableItemInner;
+export {};

package/dist/components/data/ScatterPlot/ScatterPlot.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface ScatterPlotPoint {
+    x: number;
+    y: number;
+}
+export interface ScatterPlotProps extends HTMLAttributes<HTMLDivElement> {
+    data: ScatterPlotPoint[];
+    ref?: Ref<HTMLDivElement>;
+    xLabel?: string;
+    yLabel?: string;
+}
+export declare function ScatterPlot({ data, className, ref, xLabel, yLabel, ...rest }: ScatterPlotProps): import("react").JSX.Element | null;

package/dist/components/data/ScatterPlot/index.d.ts

@@ -0,0 +1 @@
+export { ScatterPlot, type ScatterPlotPoint, type ScatterPlotProps, } from "./ScatterPlot";

package/dist/components/data/ScheduleRow/ScheduleRow.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export interface ScheduleRowAction {
+    destructive?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+    id: string;
+    label: ReactNode;
+    pending?: boolean;
+    separatorBefore?: boolean;
+}
+export interface ScheduleRowStatus {
+    label: ReactNode;
+    tone?: "danger" | "neutral" | "success";
+}
+export interface ScheduleRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect" | "title"> {
+    actions?: ScheduleRowAction[];
+    leading?: ReactNode;
+    meta: ReactNode;
+    onAction?: (id: string) => void;
+    onEdit?: () => void;
+    ref?: Ref<HTMLDivElement>;
+    status?: ScheduleRowStatus;
+    target: ReactNode;
+    testId?: string;
+    title: ReactNode;
+    triggerLabel?: string;
+}
+/**
+ * Controlled schedule-list presentation. Applications format schedule state
+ * and own mutations; the DS owns row, status and action-menu visual states.
+ */
+export declare function ScheduleRow({ actions, className, leading, meta, onAction, onEdit, ref, status, target, testId, title, triggerLabel, ...rest }: ScheduleRowProps): import("react").JSX.Element;

package/dist/components/data/ScheduleRow/index.d.ts

@@ -0,0 +1 @@
+export { ScheduleRow, type ScheduleRowAction, type ScheduleRowProps, type ScheduleRowStatus, } from "./ScheduleRow";

package/dist/components/data/SchedulesTable/SchedulesTable.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+import { type ScheduleRowProps } from "../ScheduleRow";
+export interface SchedulesTableRow extends ScheduleRowProps {
+    id: string;
+}
+interface SchedulesTableBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    empty?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+interface SchedulesTableDescriptorProps extends SchedulesTableBaseProps {
+    /** Existing normalized descriptor mode. */
+    rows: SchedulesTableRow[];
+}
+interface SchedulesTableRenderProps<T> extends SchedulesTableBaseProps {
+    /** Generic item mode for app-owned hook wrappers. */
+    getItemKey: (item: T, index: number) => string | number;
+    items: readonly T[];
+    /** Renders an item inside the DS-owned frame and separator treatment. */
+    renderRow: (item: T, index: number) => ReactNode;
+}
+export type SchedulesTableProps<T = SchedulesTableRow> = SchedulesTableDescriptorProps | SchedulesTableRenderProps<T>;
+/**
+ * Controlled schedule-list framing. Descriptor mode preserves the original
+ * API; generic render mode keeps app-owned hook wrappers outside DS.
+ */
+export declare function SchedulesTable<T>(props: SchedulesTableProps<T>): import("react").JSX.Element | null;
+export {};

package/dist/components/data/SchedulesTable/index.d.ts

@@ -0,0 +1 @@
+export { SchedulesTable, type SchedulesTableProps, type SchedulesTableRow, } from "./SchedulesTable";

package/dist/components/data/Sparkline/Sparkline.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface SparklineProps extends HTMLAttributes<SVGSVGElement> {
+    /** Numeric series — bar heights are normalized to the max value. */
+    data: number[];
+    /** SVG viewport height in px. Default: 48. */
+    height?: number;
+    /** Emphasize the last bar with brand accent. Default: true. */
+    highlightLast?: boolean;
+    /** Minimum bar height as a fraction of drawable area (0–1). Default: 0.18. */
+    minBarRatio?: number;
+    ref?: Ref<SVGSVGElement>;
+}
+export declare function Sparkline({ data, height, highlightLast, minBarRatio, className, ref, ...rest }: SparklineProps): import("react").JSX.Element | null;

package/dist/components/data/Sparkline/index.d.ts

@@ -0,0 +1 @@
+export { Sparkline, type SparklineProps } from "./Sparkline";

package/dist/components/data/SparklineAreaChart/SparklineAreaChart.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "react";
+export interface SparklineAreaChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    data: readonly number[];
+    dataKey?: string;
+    fillOpacity?: number;
+    height?: number;
+    margin?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+    };
+    stroke?: string;
+    width?: number;
+}
+export declare function SparklineAreaChart({ className, data, dataKey, fillOpacity, height, margin, stroke, style, width, ...rest }: SparklineAreaChartProps): import("react").JSX.Element;

package/dist/components/data/SparklineAreaChart/index.d.ts

@@ -0,0 +1 @@
+export { SparklineAreaChart, type SparklineAreaChartProps, } from "./SparklineAreaChart";

package/dist/components/data/SparklineLineChart/SparklineLineChart.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "react";
+export interface SparklineLineChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    data: readonly number[];
+    dataKey?: string;
+    height?: number;
+    margin?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+    };
+    stroke?: string;
+    width?: number;
+}
+export declare function SparklineLineChart({ className, data, dataKey, height, margin, stroke, style, width, ...rest }: SparklineLineChartProps): import("react").JSX.Element;

package/dist/components/data/SparklineLineChart/index.d.ts

@@ -0,0 +1 @@
+export { SparklineLineChart, type SparklineLineChartProps, } from "./SparklineLineChart";

package/dist/components/data/StackedAreaChart/StackedAreaChart.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from "react";
+export interface StackedAreaChartSeries {
+    color: string;
+    dataKey: string;
+    fillOpacityBottom?: number;
+    fillOpacityTop?: number;
+    label: string;
+}
+export interface StackedAreaChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    data: readonly Record<string, string | number>[];
+    dateKey?: string;
+    formatDate?: (value: string) => string;
+    height?: number;
+    series: readonly StackedAreaChartSeries[];
+    width?: number;
+}
+export declare function ChartTooltip(props: {
+    active?: boolean;
+    label?: string | number;
+    payload?: readonly Record<string, unknown>[];
+    series: readonly StackedAreaChartSeries[];
+    formatDate: (value: string) => string;
+}): import("react").JSX.Element | null;
+export declare function StackedAreaChart({ className, data, dateKey, formatDate, height, series, style, width, ...rest }: StackedAreaChartProps): import("react").JSX.Element;

package/dist/components/data/StackedAreaChart/index.d.ts

@@ -0,0 +1 @@
+export { StackedAreaChart, type StackedAreaChartProps, type StackedAreaChartSeries, } from "./StackedAreaChart";

package/dist/components/data/Table/Table.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode, Ref, TdHTMLAttributes, ThHTMLAttributes } from "react";
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /** Accessible table caption. Omit to supply your own <caption> in children. */
+    caption?: string;
+    /** 'sr-only' visually hides the caption but keeps it in the accessibility tree. */
+    captionSide?: "top" | "bottom" | "sr-only";
+    children?: ReactNode;
+    ref?: Ref<HTMLTableElement>;
+    /** Cell padding density. Default: 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Pins the <thead> during scroll. */
+    stickyHeader?: boolean;
+    /** shadcn cards tables — plain headers, muted row hover/selection. */
+    variant?: "default" | "plain";
+    /** Alternating row background (zebra striping). */
+    zebra?: boolean;
+}
+export declare function Table({ caption, captionSide, children, className, ref, size, stickyHeader, variant, zebra, ...rest }: TableProps): import("react").JSX.Element;
+export interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
+    children?: ReactNode;
+    ref?: Ref<HTMLTableSectionElement>;
+}
+export declare function TableHeader({ children, className, ref, ...rest }: TableHeaderProps): import("react").JSX.Element;
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    children?: ReactNode;
+    ref?: Ref<HTMLTableRowElement>;
+    /** Add hover + cursor pointer + keyboard-click affordance. */
+    selectable?: boolean;
+    /** Mark the row as selected — sets aria-selected="true". */
+    selected?: boolean;
+}
+export declare function TableRow({ children, className, onClick, ref, selectable, selected, ...rest }: TableRowProps): import("react").JSX.Element;
+export type SortDir = "asc" | "desc";
+export interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** The currently active sort key (controlled by the parent). */
+    activeSortKey?: string;
+    children?: ReactNode;
+    /** Called when the user clicks to sort. Receives (key, newDir). */
+    onSortChange?: (key: string, dir: SortDir) => void;
+    ref?: Ref<HTMLTableCellElement>;
+    /** The current sort direction (controlled by the parent). */
+    sortDir?: SortDir;
+    /** The sort key this column controls. When set, the column becomes sortable. */
+    sortKey?: string;
+}
+export declare function TableHeaderCell({ activeSortKey, children, className, onSortChange, ref, sortDir, sortKey, ...rest }: TableHeaderCellProps): import("react").JSX.Element;
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    children?: ReactNode;
+    ref?: Ref<HTMLTableCellElement>;
+}
+export declare function TableCell({ children, className, ref, ...rest }: TableCellProps): import("react").JSX.Element;

package/dist/components/data/Table/index.d.ts

@@ -0,0 +1 @@
+export { type SortDir, Table, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, } from "./Table";

package/dist/components/data/UsageBar/UsageBar.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export type UsageBarTone = "danger" | "default" | "ok" | "warning";
+export interface UsageBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Short normalized metric label. */
+    label: ReactNode;
+    /** Percentage consumed. Null hides the progress track. Values are clamped for display. */
+    percent?: number | null;
+    ref?: Ref<HTMLDivElement>;
+    /** Visual status supplied by the consumer's product policy. */
+    tone?: UsageBarTone;
+    /** Optional secondary detail following the main value. */
+    trailing?: ReactNode;
+    /** Formatted primary value, such as `12 GB / 20 GB` or `75%`. */
+    value: ReactNode;
+}
+/**
+ * A normalized horizontal capacity meter. Applications format values and
+ * decide tone; the DS owns the meter layout, progress semantics, and CSS.
+ */
+export declare function UsageBar({ className, label, percent, ref, tone, trailing, value, ...rest }: UsageBarProps): import("react").JSX.Element;

package/dist/components/data/UsageBar/index.d.ts

@@ -0,0 +1 @@
+export { UsageBar, type UsageBarProps, type UsageBarTone, } from "./UsageBar";

package/dist/components/data/UsageRing/UsageRing.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export type UsageRingTone = "auto" | "brand" | "warning" | "danger";
+export interface UsageRingProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Optional accessible or visible description shown by the design-system tooltip. */
+    label?: string;
+    /** Maximum usable capacity. Values less than or equal to zero render only when pending. */
+    max: number | null;
+    /** Reserve the compact footprint with a track-only ring while usage is loading. */
+    pending?: boolean;
+    ref?: Ref<HTMLSpanElement>;
+    /** Show label text beside the compact ring. Defaults to false. */
+    showValue?: boolean;
+    /** Visual status. `auto` maps 70% to warning and over 90% to danger. */
+    tone?: UsageRingTone;
+    /** Optional content displayed in the standard design-system tooltip. */
+    tooltipContent?: ReactNode;
+    /** Current usage. Null renders only when pending. */
+    value: number | null;
+}
+export declare function UsageRing({ value, max, pending, showValue, tone, label, tooltipContent, className, ref, ...rest }: UsageRingProps): import("react").JSX.Element | null;

package/dist/components/data/UsageRing/index.d.ts

@@ -0,0 +1 @@
+export { UsageRing, type UsageRingProps, type UsageRingTone, } from "./UsageRing";

package/dist/components/data/UsageSummaryCard/UsageSummaryCard.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+import { type UsageBarTone } from "../UsageBar";
+export interface UsageSummaryBar {
+    id: string;
+    label: ReactNode;
+    percent?: number | null;
+    tone?: UsageBarTone;
+    trailing?: ReactNode;
+    value: ReactNode;
+}
+export interface UsageSummaryDetail {
+    id: string;
+    label: ReactNode;
+    value: ReactNode;
+}
+export interface UsageSummaryStatus {
+    label: ReactNode;
+    tone?: "danger" | "default" | "ok";
+}
+export interface UsageSummaryCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    bars?: UsageSummaryBar[];
+    /** Compact spacing for small overlay surfaces. */
+    compact?: boolean;
+    details?: UsageSummaryDetail[];
+    error?: ReactNode;
+    footer?: ReactNode;
+    icon?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+    status?: UsageSummaryStatus;
+    title: ReactNode;
+}
+/**
+ * A presentation-only summary of normalized capacity metrics. Consumers own
+ * data queries, formatting and status policy; the DS owns layout and CSS.
+ */
+export declare function UsageSummaryCard({ bars, className, compact, details, error, footer, icon, ref, status, title, ...rest }: UsageSummaryCardProps): import("react").JSX.Element;

package/dist/components/data/UsageSummaryCard/index.d.ts

@@ -0,0 +1 @@
+export { type UsageSummaryBar, UsageSummaryCard, type UsageSummaryCardProps, type UsageSummaryDetail, type UsageSummaryStatus, } from "./UsageSummaryCard";