@salilvnair/dui 1.0.0 → 1.0.2

package/dist/lib/components/display/MessageBubbleView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface MessageBubbleViewProps {
+    children: ReactNode;
+    variant: 'sent' | 'received';
+    timestamp?: string;
+    avatar?: ReactNode;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Chat message bubble — sent (right-aligned, filled) / received (left-aligned, neutral). */
+export declare function MessageBubbleView({ children, variant, timestamp, avatar, size, color, className, style, }: MessageBubbleViewProps): import("react").JSX.Element;

package/dist/lib/components/display/NetworkGraphView.d.ts

@@ -0,0 +1,59 @@
+export interface NetworkGraphNode {
+    id: string;
+    label: string;
+    /** Community/cluster id — drives default coloring when colorBy is omitted */
+    communityId?: number;
+    /** Explicit color override, takes priority over colorBy/communityId */
+    color?: string;
+}
+export interface NetworkGraphEdge {
+    id?: string | number;
+    source: string;
+    target: string;
+    type?: string;
+}
+export interface NetworkGraphViewProps {
+    nodes: NetworkGraphNode[];
+    edges: NetworkGraphEdge[];
+    onNodeClick?: (node: NetworkGraphNode) => void;
+    selectedId?: string | null;
+    /** Bump this (e.g. a counter incremented on each click) to re-fit the
+     *  camera to show every node — the "reset zoom" affordance a host app
+     *  shows after a selectedId focus has zoomed in. Ignored if unset;
+     *  each change fits once, same one-shot-trigger pattern as selectedId. */
+    fitTrigger?: number;
+    /** Fires once the physics layout has fully settled (including the
+     *  cluster-separation burst when enableClustering finds 2+ communities)
+     *  and the camera has been positioned — the point at which the canvas
+     *  looks intentional rather than mid-reflow. A host app can keep a
+     *  skeleton/loading overlay on top of this component until onReady
+     *  fires, instead of showing nodes and labels visibly settling into
+     *  place. Fires on every mount/rebuild (new nodes/edges), not just once. */
+    onReady?: () => void;
+    /** Overrides the communityId-based default palette */
+    colorBy?: (node: NetworkGraphNode) => string;
+    /** Overrides the degree-based default sizing (10–40px) */
+    sizeBy?: (node: NetworkGraphNode, degree: number, maxDegree: number) => number;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Auto-cluster nodes by communityId on load; double-click a cluster to expand it,
+     *  double-click a leaf node to re-collapse its community. Off by default. */
+    enableClustering?: boolean;
+    /** Dim non-neighbor nodes/edges while hovering a node. Off by default. */
+    enableHoverDim?: boolean;
+    /** Small corner overview canvas with a draggable/clickable viewport rectangle. Off by default. */
+    enableMinimap?: boolean;
+    /** Drives cluster-label color/background so it stays legible in both
+     *  themes — canvas can't resolve CSS variables, so the resolved theme
+     *  name is passed in explicitly. Defaults to 'dark'. */
+    theme?: 'dark' | 'light';
+}
+/**
+ * Force-directed graph (forceAtlas2Based physics, degree-sized nodes,
+ * click-to-select, external-selection focus/pan). Requires the consumer to
+ * install 'vis-network' + 'vis-data' and import '@salilvnair/dui/vis-setup'
+ * once at app startup — see the vis-network peerDependenciesMeta entry.
+ * Renders a static placeholder (NetworkGraphViewFallback) until that setup
+ * import registers the real implementation.
+ */
+export declare function NetworkGraphView(props: NetworkGraphViewProps): import("react").JSX.Element;

package/dist/lib/components/display/NetworkGraphView.fallback.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Static stand-in for NetworkGraphView, shown whenever vis-network isn't
+ * available (not installed, or '@salilvnair/dui/vis-setup' was never
+ * imported). Deliberately minimal — no physics, no interaction. Anything
+ * that needs a real force-directed layout should treat this as a signal to
+ * wire up the vis-setup import, not something to build on top of.
+ */
+export declare function NetworkGraphViewFallback({ className, style }: {
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react").JSX.Element;

package/dist/lib/components/display/NetworkGraphView.vis.d.ts

@@ -0,0 +1,2 @@
+import { NetworkGraphViewProps } from './NetworkGraphView';
+export declare function NetworkGraphViewImpl({ nodes, edges, onNodeClick, selectedId, fitTrigger, onReady, colorBy, sizeBy, className, style, enableClustering, enableHoverDim, enableMinimap, theme, }: NetworkGraphViewProps): import("react").JSX.Element;

package/dist/lib/components/display/NetworkWeatherView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type NetworkWeatherCondition = 'sunny' | 'cloudy' | 'stormy';
+export interface NetworkWeatherViewProps {
+    condition: NetworkWeatherCondition;
+    label?: string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** System health/error-rate expressed as literal weather instead of a status dot. */
+export declare function NetworkWeatherView({ condition, label, size, className, style, }: NetworkWeatherViewProps): import("react").JSX.Element;

package/dist/lib/components/display/NotificationBadgeView.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface NotificationBadgeViewProps {
+    children: ReactNode;
+    /** Omit or 0 for a plain dot badge. */
+    count?: number;
+    /** Hide the badge entirely (e.g. count === 0 and dot not wanted). */
+    hidden?: boolean;
+    /** Show a dot even without a count. */
+    dot?: boolean;
+    max?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function NotificationBadgeView({ children, count, hidden, dot, max, size, color, className, style, }: NotificationBadgeViewProps): import("react").JSX.Element;

package/dist/lib/components/display/ParticleBackgroundView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface ParticleBackgroundViewProps {
+    children?: ReactNode;
+    /** Number of particles. Default 40. */
+    count?: number;
+    color?: string;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Subtle animated particle/dot background. */
+export declare function ParticleBackgroundView({ children, count, color, height, className, style, }: ParticleBackgroundViewProps): import("react").JSX.Element;

package/dist/lib/components/display/PathRevealView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export interface PathRevealViewProps {
+    /** One or more SVG path `d` strings — each draws itself on mount. */
+    d: string | string[];
+    viewBox?: string;
+    width?: number;
+    height?: number;
+    color?: string;
+    strokeWidth?: number;
+    /** Draw duration in ms. Default 1200. */
+    duration?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Generic SVG stroke-draw reveal primitive — any path/diagram/signature "draws itself" on mount. */
+export declare function PathRevealView({ d, viewBox, width, height, color, strokeWidth, duration, className, style, }: PathRevealViewProps): import("react").JSX.Element;

package/dist/lib/components/display/PdfViewerView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+export interface PdfViewerViewProps {
+    /** URL to the PDF file — rendered via the browser's native PDF viewer inside an iframe. */
+    src: string;
+    totalPages?: number;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Paginated PDF preview wrapper. Uses the browser's native PDF renderer via an iframe, with an optional page-number affordance when `totalPages` is known. */
+export declare function PdfViewerView({ src, totalPages, height, className, style, }: PdfViewerViewProps): import("react").JSX.Element;

package/dist/lib/components/display/PermissionMatrixView.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface PermissionMatrixViewProps {
+    roles: string[];
+    permissions: string[];
+    /** `matrix[roleIdx][permissionIdx]` */
+    matrix: boolean[][];
+    onChange: (roleIdx: number, permissionIdx: number, value: boolean) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Role × permission checkbox grid. */
+export declare function PermissionMatrixView({ roles, permissions, matrix, onChange, size, color, className, style, }: PermissionMatrixViewProps): import("react").JSX.Element;

package/dist/lib/components/display/PresenceDotView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type PresenceStatus = 'online' | 'away' | 'busy' | 'offline';
+export interface PresenceDotViewProps {
+    status: PresenceStatus;
+    size?: DuiSize;
+    /** Adds a surface-colored ring, useful when overlapping an avatar image. */
+    ring?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function PresenceDotView({ status, size, ring, className, style, }: PresenceDotViewProps): import("react").JSX.Element;

package/dist/lib/components/display/PricingCardView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface PricingCardViewProps {
+    planName: string;
+    price: string;
+    period?: string;
+    features: string[];
+    popular?: boolean;
+    actions?: ReactNode;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Plan comparison card with a "popular" ribbon. */
+export declare function PricingCardView({ planName, price, period, features, popular, actions, size, color, className, style, }: PricingCardViewProps): import("react").JSX.Element;

package/dist/lib/components/display/ProgressBarView.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiWidth } from '../../core/DuiTypes';
+export interface ProgressBarViewProps {
+    /** 0-100. Omit for indeterminate (striped, animated) mode. */
+    value?: number;
+    /** Secondary "buffered" fill, 0-100 — e.g. video buffering ahead of playback. */
+    buffer?: number;
+    size?: DuiSize;
+    width?: DuiWidth;
+    color?: string;
+    trackColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function ProgressBarView({ value, buffer, size, width, color, trackColor, className, style, }: ProgressBarViewProps): import("react").JSX.Element;

package/dist/lib/components/display/ProgressRingView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ProgressRingViewProps {
+    /** 0-100. Omit for indeterminate (spinning) mode. */
+    value?: number;
+    size?: DuiSize;
+    color?: string;
+    trackColor?: string;
+    showLabel?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function ProgressRingView({ value, size, color, trackColor, showLabel, className, style, }: ProgressRingViewProps): import("react").JSX.Element;

package/dist/lib/components/display/PulseDotView.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface PulseDotViewProps {
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Attention-grabbing pulsing dot primitive — complements StatusIndicatorView. */
+export declare function PulseDotView({ size, color, className, style, }: PulseDotViewProps): import("react").JSX.Element;

package/dist/lib/components/display/QRCodeView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+export interface QRCodeViewProps {
+    value: string;
+    size?: number;
+    color?: string;
+    background?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Barcode's QR-style sibling — canvas/SVG-drawn, no extra runtime dependency. */
+export declare function QRCodeView({ value, size, color, background, className, style, }: QRCodeViewProps): import("react").JSX.Element;

package/dist/lib/components/display/QuoteBlockView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface QuoteBlockViewProps {
+    children: ReactNode;
+    attribution?: string;
+    role?: string;
+    avatar?: ReactNode;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Styled blockquote with an optional avatar + attribution line. */
+export declare function QuoteBlockView({ children, attribution, role, avatar, size, color, className, style, }: QuoteBlockViewProps): import("react").JSX.Element;

package/dist/lib/components/display/RateLimitMeterView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface RateLimitMeterViewProps {
+    remaining: number;
+    limit: number;
+    resetLabel: string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Requests-remaining ring gauge with a reset countdown label. */
+export declare function RateLimitMeterView({ remaining, limit, resetLabel, size, className, style, }: RateLimitMeterViewProps): import("react").JSX.Element;

package/dist/lib/components/display/RatingBreakdownView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface RatingBreakdownViewProps {
+    /** Count per star level, index 0 = 1 star … index 4 = 5 stars. */
+    counts: [number, number, number, number, number];
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** 5-star rating distribution bars — App Store-style rating breakdown. */
+export declare function RatingBreakdownView({ counts, size, color, className, style, }: RatingBreakdownViewProps): import("react").JSX.Element;

package/dist/lib/components/display/RequestFlowView.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface RequestFlowPhase {
+    id: string;
+    label: string;
+    /** Duration of this phase in ms — drives both the segment width and particle speed. */
+    duration: number;
+    color?: string;
+}
+export interface RequestFlowViewProps {
+    phases: RequestFlowPhase[];
+    /** Number of particles in flight at once. Default 3. */
+    particleCount?: number;
+    width?: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Animated network waterfall — particles travel along a DNS→TCP→TLS→Request→Response
+ * pipe, speed/color mapped to actual phase timing. DUI-original, no direct prior art.
+ */
+export declare function RequestFlowView({ phases, particleCount, width, size, className, style, }: RequestFlowViewProps): import("react").JSX.Element;

package/dist/lib/components/display/ResultView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type ResultStatus = 'success' | 'error' | '404' | '403' | 'warning' | 'info';
+export interface ResultViewProps {
+    status: ResultStatus;
+    title: string;
+    subtitle?: string;
+    actions?: ReactNode;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Full-page outcome state — success / error / 404 / 403 / warning / info. */
+export declare function ResultView({ status, title, subtitle, actions, size, className, style, }: ResultViewProps): import("react").JSX.Element;

package/dist/lib/components/display/RevealOnScrollView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface RevealOnScrollViewProps {
+    children: ReactNode;
+    direction?: 'up' | 'down' | 'left' | 'right' | 'fade';
+    /** Transition duration in ms. Default 500. */
+    duration?: number;
+    delay?: number;
+    /** Re-trigger every time it enters the viewport, instead of only once. */
+    repeat?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Fade/slide-in-on-scroll wrapper. */
+export declare function RevealOnScrollView({ children, direction, duration, delay, repeat, className, style, }: RevealOnScrollViewProps): import("react").JSX.Element;

package/dist/lib/components/display/SchemaBlueprintView.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface SchemaBlueprintField {
+    name: string;
+    type: string;
+}
+export interface SchemaBlueprintNode {
+    id: string;
+    title: string;
+    fields: SchemaBlueprintField[];
+    /** IDs of nodes this one references (e.g. a foreign object/ref field). */
+    connectsTo?: string[];
+}
+export interface SchemaBlueprintViewProps {
+    nodes: SchemaBlueprintNode[];
+    width?: number;
+    height?: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** JSON Schema / OpenAPI spec rendered as a literal architectural blueprint — graph-paper + dashed right-angle connectors. */
+export declare function SchemaBlueprintView({ nodes, width, height, size, className, style, }: SchemaBlueprintViewProps): import("react").JSX.Element;

package/dist/lib/components/display/SegmentedProgressBarView.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiWidth } from '../../core/DuiTypes';
+export type SegmentStatus = 'pending' | 'active' | 'done' | 'error';
+export interface ProgressSegment {
+    label?: string;
+    status: SegmentStatus;
+}
+export interface SegmentedProgressBarViewProps {
+    segments: ProgressSegment[];
+    size?: DuiSize;
+    width?: DuiWidth;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Multi-segment progress bar — e.g. upload/pipeline stages, each independently colored. */
+export declare function SegmentedProgressBarView({ segments, size, width, color, className, style, }: SegmentedProgressBarViewProps): import("react").JSX.Element;

package/dist/lib/components/display/ShareSheetView.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ShareTarget {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+}
+export interface ShareSheetViewProps {
+    url: string;
+    targets?: ShareTarget[];
+    onCopy?: () => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Social share row + copy-link field. */
+export declare function ShareSheetView({ url, targets, onCopy, size, color, className, style, }: ShareSheetViewProps): import("react").JSX.Element;

package/dist/lib/components/display/SignaturePadView.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+export interface SignaturePadViewProps {
+    onChange?: (dataUrl: string | null) => void;
+    strokeColor?: string;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Canvas signature capture — draw with mouse/touch/pen, exports a PNG data URL. */
+export declare function SignaturePadView({ onChange, strokeColor, height, className, style, }: SignaturePadViewProps): import("react").JSX.Element;

package/dist/lib/components/display/SkeletonView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type SkeletonVariant = 'text' | 'block' | 'avatar' | 'row';
+export interface SkeletonViewProps {
+    variant?: SkeletonVariant;
+    /** Number of lines for `variant="text"`. Default 1. */
+    lines?: number;
+    width?: number | string;
+    height?: number | string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function SkeletonView({ variant, lines, width, height, size, className, style, }: SkeletonViewProps): import("react").JSX.Element;

package/dist/lib/components/display/SnackbarView.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius, DuiWidth } from '../../core/DuiTypes';
+export interface SnackbarViewProps {
+    open: boolean;
+    message: string;
+    onClose: () => void;
+    actionLabel?: string;
+    onAction?: () => void;
+    /** Auto-dismiss after N ms. 0 disables auto-dismiss. Timer pauses on hover. Default 4000. */
+    duration?: number;
+    size?: DuiSize;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function SnackbarView({ open, message, onClose, actionLabel, onAction, duration, size, width, borderRadius, color, className, style, }: SnackbarViewProps): import("react").JSX.Element | null;

package/dist/lib/components/display/SortableHeaderView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type SortDirection = 'asc' | 'desc' | null;
+export interface SortableHeaderViewProps {
+    label: string;
+    direction: SortDirection;
+    onClick: () => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Clickable table column header with a sort-direction arrow indicator. */
+export declare function SortableHeaderView({ label, direction, onClick, size, color, className, style, }: SortableHeaderViewProps): import("react").JSX.Element;

package/dist/lib/components/display/SparklineView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+export interface SparklineViewProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    /** Fill the area under the line. Default true. */
+    filled?: boolean;
+    strokeWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Tiny inline SVG trend line, no axes — for table cells / stat cards. */
+export declare function SparklineView({ data, width, height, color, filled, strokeWidth, className, style, }: SparklineViewProps): import("react").JSX.Element;

package/dist/lib/components/display/StackedSwipeCardView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface StackedSwipeCardViewProps<T> {
+    items: T[];
+    renderItem: (item: T) => ReactNode;
+    onSwipe: (item: T, direction: 'left' | 'right') => void;
+    width?: number;
+    height?: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Swipeable card stack for one-at-a-time approve/reject flows. */
+export declare function StackedSwipeCardView<T>({ items, renderItem, onSwipe, width, height, size, className, style, }: StackedSwipeCardViewProps<T>): import("react").JSX.Element;

package/dist/lib/components/display/StatTrendCardView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface StatTrendCardViewProps {
+    label: string;
+    value: number;
+    trend: number[];
+    prefix?: string;
+    suffix?: string;
+    precision?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Animated count-up number + sparkline trend — distinct from the static `StatsCardView`. */
+export declare function StatTrendCardView({ label, value, trend, prefix, suffix, precision, size, color, className, style, }: StatTrendCardViewProps): import("react").JSX.Element;

package/dist/lib/components/display/StatisticView.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface StatisticViewProps {
+    label: string;
+    value: number;
+    prefix?: string;
+    suffix?: string;
+    precision?: number;
+    /** Animate count-up from 0 on mount/value change. Default true. */
+    animate?: boolean;
+    /** Animation duration in ms. Default 800. */
+    duration?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function StatisticView({ label, value, prefix, suffix, precision, animate, duration, size, color, className, style, }: StatisticViewProps): import("react").JSX.Element;

package/dist/lib/components/display/StatsCardView.d.ts

@@ -9,7 +9,11 @@ export interface StatsCardViewProps {
     trendValue?: string;
     accentColor?: string;
     compact?: boolean;
+    /** 'label-top' (default): small caps label, then the big value below it.
+     *  'value-top': big value first, small label caption below — for tiles
+     *  where the number/timestamp is the headline (e.g. "2,847 / Nodes"). */
+    layout?: 'label-top' | 'value-top';
     className?: string;
     style?: React.CSSProperties;
 }
-export declare function StatsCardView({ label, value, subValue, icon, unit, trend, trendValue, accentColor, compact, className, style, }: StatsCardViewProps): import("react").JSX.Element;
+export declare function StatsCardView({ label, value, subValue, icon, unit, trend, trendValue, accentColor, compact, layout, className, style, }: StatsCardViewProps): import("react").JSX.Element;

package/dist/lib/components/display/StatusPageRowView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type ServiceStatus = 'operational' | 'degraded' | 'outage' | 'maintenance';
+export interface StatusPageRowViewProps {
+    service: string;
+    status: ServiceStatus;
+    uptime: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Service + uptime% + status-dot row — status page primitive. */
+export declare function StatusPageRowView({ service, status, uptime, size, className, style, }: StatusPageRowViewProps): import("react").JSX.Element;

package/dist/lib/components/display/StickyTableHeaderView.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface StickyTableColumn<T> {
+    key: string;
+    label: string;
+    width?: number | string;
+    render: (row: T) => ReactNode;
+}
+export interface StickyTableHeaderViewProps<T> {
+    columns: StickyTableColumn<T>[];
+    rows: T[];
+    keyField: keyof T;
+    /** Pin the first column while scrolling horizontally. Default true. */
+    freezeFirstColumn?: boolean;
+    maxHeight?: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Data table with a sticky header row and an optional frozen first column, for wide/tall grids. */
+export declare function StickyTableHeaderView<T>({ columns, rows, keyField, freezeFirstColumn, maxHeight, size, className, style, }: StickyTableHeaderViewProps<T>): import("react").JSX.Element;

package/dist/lib/components/display/TablePaginationView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface TablePaginationViewProps {
+    page: number;
+    totalRows: number;
+    rowsPerPage: number;
+    onPageChange: (page: number) => void;
+    onRowsPerPageChange: (rowsPerPage: number) => void;
+    rowsPerPageOptions?: number[];
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Rows-per-page selector + page-number footer for data tables. */
+export declare function TablePaginationView({ page, totalRows, rowsPerPage, onPageChange, onRowsPerPageChange, rowsPerPageOptions, size, color, className, style, }: TablePaginationViewProps): import("react").JSX.Element;