@annondeveloper/ui-kit 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,942 @@
+import { ClassValue } from 'clsx';
+import * as react from 'react';
+import { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode, HTMLAttributes, ElementType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+export { a as Select, S as SelectOption, b as SelectProps } from './select-nnBJUO8U.js';
+import { ColumnDef } from '@tanstack/react-table';
+export { toast } from 'sonner';
+
+/** Merge Tailwind CSS class names with conflict resolution. */
+declare function cn(...inputs: ClassValue[]): string;
+/** Format bits/sec into human-readable string (clamps negative to 0). */
+declare function fmtBps(bps: number): string;
+/** Format link speed for interface display (e.g. 1000000000 -> "1G"). */
+declare function fmtSpeed(bps: number): string;
+/** Format utilization as percentage of link speed. */
+declare function fmtUtil(bps: number, speedBps: number): string;
+/** Format bytes into human-readable string. */
+declare function fmtBytes(bytes: number): string;
+/** Format percent. */
+declare function fmtPct(v: number, decimals?: number): string;
+/** Format duration in seconds to human-readable uptime string. */
+declare function fmtUptime(secs: number): string;
+/** Format ISO timestamp to relative time ("3m ago"). */
+declare function fmtRelative(isoStr: string): string;
+/** Format large numbers compactly (e.g. 480933305 -> "480.9M", 1234 -> "1.2K"). */
+declare function fmtCompact(n: number): string;
+/** Format seconds duration compactly (e.g. for replication lag display). */
+declare function fmtDuration(secs: number): string;
+/** Strip CIDR suffix from IP address (e.g. "10.0.0.1/32" -> "10.0.0.1"). */
+declare function stripCidr(ip: string): string;
+/** Clamp a number between min and max. */
+declare function clamp(v: number, min: number, max: number): number;
+/** Color thresholds for utilization percentage mapping. */
+interface UtilColorMap {
+    high: {
+        threshold: number;
+        className: string;
+    };
+    medium: {
+        threshold: number;
+        className: string;
+    };
+    low: {
+        className: string;
+    };
+}
+/** Default utilization color map using CSS custom property token classes. */
+declare const defaultUtilColorMap: UtilColorMap;
+/**
+ * Get utilization color class from value 0-100.
+ * Accepts an optional color map to override the default thresholds and classes.
+ */
+declare function utilColor(pct: number, colorMap?: UtilColorMap): string;
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'outline' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual variant of the button. */
+    variant?: ButtonVariant;
+    /** Size preset. */
+    size?: ButtonSize;
+    /** Show a loading spinner and disable interaction. */
+    loading?: boolean;
+}
+/**
+ * @description A themed button with variant, size, and loading support.
+ * Uses CSS custom property tokens for dark/light mode compatibility.
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type BadgeColor = 'brand' | 'blue' | 'green' | 'yellow' | 'red' | 'orange' | 'purple' | 'pink' | 'teal' | 'gray';
+interface BadgeProps {
+    children: React.ReactNode;
+    /** Color preset for the badge. */
+    color?: BadgeColor;
+    /** Optional icon displayed before the label. */
+    icon?: LucideIcon;
+    /** Size variant. */
+    size?: 'xs' | 'sm' | 'md';
+    className?: string;
+}
+/**
+ * @description A themed pill badge with color presets and optional icon.
+ * Supports xs, sm, and md sizes with dark/light mode via CSS tokens.
+ */
+declare function Badge({ children, color, icon: Icon, size, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
+interface BadgeVariantConfig<T extends string> {
+    /** Map from value to BadgeColor. */
+    colorMap: Partial<Record<T, BadgeColor>>;
+    /** Map from value to display label. Falls back to the value itself. */
+    labelMap?: Partial<Record<T, string>>;
+    /** Default color when value is not found in colorMap. */
+    defaultColor?: BadgeColor;
+    /** Default size for the badge. */
+    defaultSize?: 'xs' | 'sm' | 'md';
+}
+/**
+ * @description Factory function to create domain-specific badge components.
+ * Accepts a color map and optional label map, returns a typed Badge component.
+ *
+ * @example
+ * ```tsx
+ * const SeverityBadge = createBadgeVariant({
+ *   colorMap: { critical: 'red', warning: 'yellow', info: 'blue' },
+ *   labelMap: { critical: 'Critical', warning: 'Warning', info: 'Info' },
+ * })
+ * // Usage: <SeverityBadge value="critical" />
+ * ```
+ */
+declare function createBadgeVariant<T extends string>(config: BadgeVariantConfig<T>): ({ value, className }: {
+    value: T;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Show an indeterminate (minus) indicator instead of a checkmark. */
+    indeterminate?: boolean;
+    /** Size variant. */
+    size?: 'sm' | 'md';
+}
+/**
+ * @description A themed checkbox with indeterminate state support.
+ * Uses CSS custom property tokens for dark/light mode compatibility.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ToggleSwitchProps {
+    /** Whether the toggle is on. */
+    enabled: boolean;
+    /** Callback when toggled. */
+    onChange: (enabled: boolean) => void;
+    /** Size variant. */
+    size?: 'sm' | 'md';
+    /** Disable the toggle. */
+    disabled?: boolean;
+    /** Accessible label. */
+    label?: string;
+    className?: string;
+}
+/**
+ * @description A themed toggle switch using lucide icons for on/off states.
+ * Supports dark/light mode via CSS custom property tokens.
+ */
+declare function ToggleSwitch({ enabled, onChange, size, disabled, label, className, }: ToggleSwitchProps): react_jsx_runtime.JSX.Element;
+
+declare const INPUT_CLS: string;
+declare const LABEL_CLS: string;
+declare const TEXTAREA_CLS: string;
+interface FormInputProps {
+    /** Label text displayed above the input. */
+    label: string;
+    /** Current input value. */
+    value: string;
+    /** Callback when value changes. */
+    onChange: (value: string) => void;
+    /** HTML input type. */
+    type?: string;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Mark the field as required. */
+    required?: boolean;
+    /** Disable the input. */
+    disabled?: boolean;
+    /** Help text shown below the input. */
+    hint?: string;
+    className?: string;
+    /** HTML autocomplete attribute. */
+    autoComplete?: string;
+}
+/**
+ * @description A themed form input with label, validation indicator, and optional hint text.
+ * Uses CSS custom property tokens for dark/light mode compatibility.
+ */
+declare function FormInput({ label, value, onChange, type, placeholder, required, disabled, hint, className, autoComplete, }: FormInputProps): react_jsx_runtime.JSX.Element;
+
+interface FilterPillProps {
+    /** Label text for the pill. */
+    label: string;
+    /** Optional count displayed after the label. */
+    count?: number;
+    /** Whether this pill is currently active/selected. */
+    active: boolean;
+    /** Click handler. */
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * @description A rounded pill-style filter toggle with active state and optional count.
+ * Uses CSS custom property tokens for dark/light mode compatibility.
+ */
+declare function FilterPill({ label, count, active, onClick, className }: FilterPillProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    /** Icon component displayed in the center. */
+    icon: LucideIcon;
+    /** Title text. */
+    title: string;
+    /** Description text. */
+    description: string;
+    /** Optional action buttons rendered below the description. */
+    actions?: React.ReactNode;
+    className?: string;
+}
+/**
+ * @description A decorative empty state placeholder with icon, title, description, and optional actions.
+ * Features a subtle gradient background and glass-morphism styling.
+ */
+declare function EmptyState({ icon: Icon, title, description, actions, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @description A shimmer skeleton loader block. Requires the `skeleton-shimmer` CSS class
+ * from theme.css to animate.
+ */
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface SkeletonTextProps {
+    /** Number of text lines to render. */
+    lines?: number;
+    className?: string;
+}
+/**
+ * @description A multi-line skeleton text placeholder. The last line renders shorter
+ * for a natural paragraph appearance.
+ */
+declare function SkeletonText({ lines, className }: SkeletonTextProps): react_jsx_runtime.JSX.Element;
+/**
+ * @description A card-shaped skeleton placeholder with header area and content bars.
+ */
+declare function SkeletonCard({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface TruncatedTextProps {
+    /** The full text to display (truncated if it overflows). */
+    text: string;
+    /** Max width constraint for truncation. */
+    maxWidth?: string | number;
+    className?: string;
+}
+/**
+ * @description A text element that truncates with ellipsis and shows a tooltip with the
+ * full text on hover when truncated. Includes a copy-to-clipboard button in the tooltip.
+ */
+declare function TruncatedText({ text, maxWidth, className }: TruncatedTextProps): react_jsx_runtime.JSX.Element;
+
+interface ConfirmDialogProps {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Callback to control open state. */
+    onOpenChange: (open: boolean) => void;
+    /** Dialog title. */
+    title: string;
+    /** Dialog description text. */
+    description: string;
+    /** Label for the confirm button. */
+    confirmLabel?: string;
+    /** Label for the cancel button. */
+    cancelLabel?: string;
+    /** Visual variant affecting the icon and confirm button color. */
+    variant?: 'danger' | 'warning' | 'default';
+    /** Show a loading spinner on the confirm button. */
+    loading?: boolean;
+    /** Callback when confirmed. */
+    onConfirm: () => void;
+}
+/**
+ * @description A confirmation dialog built on Radix AlertDialog with Framer Motion animations.
+ * Supports danger, warning, and default variants with loading state.
+ */
+declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, loading, onConfirm, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+
+interface AnimatedCounterProps {
+    /** The target numeric value to animate to. */
+    value: number;
+    /** Animation duration in milliseconds. */
+    duration?: number;
+    className?: string;
+    /** Custom formatting function for the displayed number. */
+    format?: (n: number) => string;
+}
+/**
+ * @description An animated number counter that transitions smoothly between values
+ * using requestAnimationFrame. Respects prefers-reduced-motion.
+ */
+declare function AnimatedCounter({ value, duration, className, format, }: AnimatedCounterProps): react_jsx_runtime.JSX.Element;
+
+interface SuccessCheckmarkProps {
+    /** Size of the SVG in pixels. */
+    size?: number;
+    className?: string;
+}
+/**
+ * @description An animated success checkmark SVG with circle and path draw animations.
+ * Uses Framer Motion spring physics. Respects prefers-reduced-motion.
+ */
+declare function SuccessCheckmark({ size, className }: SuccessCheckmarkProps): react_jsx_runtime.JSX.Element;
+
+/** Configuration for a single status entry in a StatusBadge. */
+interface StatusConfig {
+    /** Display label. */
+    label: string;
+    /** CSS class for the status dot. */
+    dot: string;
+    /** CSS class for the text color. */
+    text: string;
+    /** CSS class for the background color. */
+    bg: string;
+}
+/** A sensible default status map covering common statuses. */
+declare const defaultStatusMap: Record<string, StatusConfig>;
+interface StatusBadgeProps {
+    /** Status key to look up in the status map. */
+    status: string;
+    /** Override display label. */
+    label?: string;
+    /** Size variant. */
+    size?: 'sm' | 'md';
+    /** Show a CSS pulse animation on the dot. */
+    pulse?: boolean;
+    /** Custom status map. Falls back to defaultStatusMap. */
+    statusMap?: Record<string, StatusConfig>;
+    className?: string;
+}
+/**
+ * @description A status badge with colored dot indicator and label.
+ * Accepts a configurable statusMap to define custom status values and their appearance.
+ * Falls back to a built-in default map if none is provided.
+ */
+declare function StatusBadge({ status, label, size, pulse, statusMap, className, }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
+
+/** Configuration for a single status in StatusPulse. */
+interface PulseConfig {
+    /** CSS class for the solid dot. */
+    dot: string;
+    /** CSS class for the pulse ring. */
+    ring: string;
+    /** Whether to show the pulse ring animation. */
+    pulse: boolean;
+    /** Use faster animation (e.g. for degraded states). */
+    fast: boolean;
+}
+/** Default pulse configuration map for common statuses. */
+declare const defaultPulseConfigMap: Record<string, PulseConfig>;
+interface StatusPulseProps {
+    /** Status key to look up in the config map. */
+    status: string;
+    /** Whether to show the status label text. */
+    label?: boolean;
+    /** Custom pulse configuration map. Falls back to defaultPulseConfigMap. */
+    configMap?: Record<string, PulseConfig>;
+    className?: string;
+}
+/**
+ * @description An animated status indicator dot with optional pulse ring and label.
+ * Accepts a configurable map to define custom statuses. Respects prefers-reduced-motion.
+ */
+declare function StatusPulse({ status, label, configMap, className }: StatusPulseProps): react_jsx_runtime.JSX.Element;
+
+interface ToasterProps {
+    /** Theme mode. Controls Sonner's internal theming. */
+    theme?: 'dark' | 'light';
+    /** Toast position on screen. */
+    position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+    /** Auto-dismiss duration in milliseconds. */
+    duration?: number;
+}
+/**
+ * @description A pre-themed Sonner toast container. Accepts theme as a prop
+ * instead of reading from a hook, making it portable across applications.
+ * Import this Toaster once in your app layout, then use `toast()` from sonner anywhere.
+ */
+declare function Toaster({ theme, position, duration }: ToasterProps): react_jsx_runtime.JSX.Element;
+
+type Density = 'compact' | 'comfortable' | 'spacious';
+interface DataTableProps<T> {
+    /** Column definitions from @tanstack/react-table. */
+    columns: ColumnDef<T, unknown>[];
+    /** Row data array. */
+    data: T[];
+    /** Show loading skeleton. */
+    isLoading?: boolean;
+    /** Custom empty state configuration. */
+    emptyState?: {
+        icon: LucideIcon;
+        title: string;
+        description: string;
+    };
+    /** Placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /** Callback when a row is clicked. */
+    onRowClick?: (row: T) => void;
+    /** Default sorting configuration. */
+    defaultSort?: {
+        id: string;
+        desc: boolean;
+    };
+    /** Default number of rows per page. */
+    defaultPageSize?: number;
+    /** Filename for CSV export (enables export button when set). */
+    exportFilename?: string;
+    /** Make the first column sticky on horizontal scroll. */
+    stickyFirstColumn?: boolean;
+    /** Override the density setting. */
+    density?: Density;
+}
+/**
+ * @description A full-featured data table with search, column filters, sorting, pagination,
+ * density control, column visibility/reorder, CSV export, and Framer Motion row animations.
+ * Built on @tanstack/react-table v8.
+ */
+declare function DataTable<T>({ columns, data, isLoading, emptyState: emptyStateProps, searchPlaceholder, onRowClick, defaultSort, defaultPageSize, exportFilename, stickyFirstColumn, density: densityProp, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+/** A single tab definition. */
+interface Tab {
+    /** Unique value for this tab. */
+    value: string;
+    /** Display label. */
+    label: string;
+    /** Optional icon component. */
+    icon?: LucideIcon;
+    /** Whether this tab is disabled. */
+    disabled?: boolean;
+}
+interface TabsProps {
+    /** Array of tab definitions. */
+    tabs: Tab[];
+    /** Currently selected tab value. */
+    value: string;
+    /** Callback when a tab is selected. */
+    onChange: (value: string) => void;
+    /** Visual variant. */
+    variant?: 'underline' | 'pills' | 'enclosed';
+    /** Size preset. */
+    size?: 'sm' | 'md';
+    /** Additional class name for the root element. */
+    className?: string;
+}
+/**
+ * @description Accessible tabbed interface with three visual variants.
+ * Uses Framer Motion layoutId for animated indicator sliding between tabs.
+ * Supports keyboard navigation (arrow keys) and ARIA roles.
+ */
+declare function Tabs({ tabs, value, onChange, variant, size, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+/** A single menu item definition. */
+interface MenuItem {
+    /** Display label. */
+    label: string;
+    /** Optional icon component. */
+    icon?: LucideIcon;
+    /** Callback when item is clicked. */
+    onClick: () => void;
+    /** Visual variant — danger for destructive actions. */
+    variant?: 'default' | 'danger';
+    /** Whether this item is disabled. */
+    disabled?: boolean;
+}
+interface DropdownMenuProps {
+    /** Trigger element that opens the menu. */
+    trigger: ReactNode;
+    /** Array of menu item definitions. */
+    items: MenuItem[];
+    /** Alignment of the menu relative to the trigger. */
+    align?: 'start' | 'center' | 'end';
+    /** Additional class name for the content container. */
+    className?: string;
+}
+/**
+ * @description A context/action dropdown menu built on Radix DropdownMenu.
+ * Features Framer Motion entry/exit animations, keyboard accessibility,
+ * and a danger variant for destructive actions.
+ */
+declare function DropdownMenu({ trigger, items, align, className }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+
+interface SheetProps {
+    /** Whether the sheet is open. */
+    open: boolean;
+    /** Callback to close the sheet. */
+    onClose: () => void;
+    /** Edge from which the sheet slides in. */
+    side?: 'right' | 'left' | 'top' | 'bottom';
+    /** Title displayed in the sheet header. */
+    title?: string;
+    /** Description text below the title. */
+    description?: string;
+    /** Width class for left/right sheets, height class for top/bottom. */
+    width?: string;
+    /** Sheet content. */
+    children: ReactNode;
+    /** Additional class name for the panel. */
+    className?: string;
+}
+/**
+ * @description A slide-over panel (drawer) from any edge of the screen.
+ * Features backdrop overlay, spring animation, Escape to close, backdrop click to close,
+ * and focus trapping within the panel.
+ */
+declare function Sheet({ open, onClose, side, title, description, width, children, className, }: SheetProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressProps {
+    /** Current progress value (0-100 by default). */
+    value: number;
+    /** Maximum value. */
+    max?: number;
+    /** Optional label displayed above the bar. */
+    label?: string;
+    /** Show the current percentage value. */
+    showValue?: boolean;
+    /** Color variant. */
+    variant?: 'default' | 'success' | 'warning' | 'danger';
+    /** Height preset. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Animate the fill width on value changes. */
+    animated?: boolean;
+    /** Show an indeterminate shimmer animation (ignores value). */
+    indeterminate?: boolean;
+    /** Additional class name for the root element. */
+    className?: string;
+}
+/**
+ * @description A progress bar with optional label, animated fill, and indeterminate mode.
+ * Supports multiple color variants and size presets.
+ */
+declare function Progress({ value, max, label, showValue, variant, size, animated, indeterminate, className, }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+interface AvatarProps {
+    /** Image source URL. */
+    src?: string;
+    /** Alt text for the image; used for accessibility. */
+    alt: string;
+    /** Initials fallback (e.g. "JD"). Derived from alt if not provided. */
+    fallback?: string;
+    /** Size preset. */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Optional status dot overlay. */
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    /** Additional class name for the root element. */
+    className?: string;
+}
+/**
+ * @description User/entity avatar with image support and initials fallback.
+ * Optional status dot overlay for presence indication.
+ */
+declare function Avatar({ src, alt, fallback, size, status, className, }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+interface PopoverProps {
+    /** Trigger element that opens the popover. */
+    trigger: ReactNode;
+    /** Popover content. */
+    children: ReactNode;
+    /** Side of the trigger to display the popover. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment of the popover relative to the trigger. */
+    align?: 'start' | 'center' | 'end';
+    /** Additional class name for the content container. */
+    className?: string;
+}
+/**
+ * @description A popover wrapper built on Radix Popover with Framer Motion entry animation.
+ * Closes on outside click. Includes an arrow pointer.
+ */
+declare function Popover({ trigger, children, side, align, className }: PopoverProps): react_jsx_runtime.JSX.Element;
+
+interface SliderProps {
+    /** Current value. */
+    value: number;
+    /** Callback when value changes. */
+    onChange: (value: number) => void;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Step increment. */
+    step?: number;
+    /** Optional label displayed above the slider. */
+    label?: string;
+    /** Show the current value. */
+    showValue?: boolean;
+    /** Additional class name for the root element. */
+    className?: string;
+}
+/**
+ * @description A custom-styled range slider with keyboard accessibility.
+ * Features a styled track, filled portion, and draggable thumb.
+ * Shows current value on hover/drag via a tooltip above the thumb.
+ */
+declare function Slider({ value, onChange, min, max, step, label, showValue, className, }: SliderProps): react_jsx_runtime.JSX.Element;
+
+declare const variantClasses: {
+    readonly default: "bg-[hsl(var(--bg-surface))] border border-[hsl(var(--border-subtle))] shadow-sm";
+    readonly elevated: "bg-[hsl(var(--bg-elevated))] border border-[hsl(var(--border-default))] shadow-lg";
+    readonly outlined: "bg-transparent border border-[hsl(var(--border-default))]";
+    readonly interactive: "bg-[hsl(var(--bg-surface))] border border-[hsl(var(--border-subtle))] shadow-sm hover:bg-[hsl(var(--bg-elevated))] hover:border-[hsl(var(--border-default))] hover:shadow-md transition-all duration-150 cursor-pointer";
+};
+declare const paddingClasses: {
+    readonly none: "";
+    readonly sm: "p-3";
+    readonly md: "p-5";
+    readonly lg: "p-6";
+};
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual variant. */
+    variant?: keyof typeof variantClasses;
+    /** Padding preset. */
+    padding?: keyof typeof paddingClasses;
+    /** Card content. */
+    children: ReactNode;
+}
+/**
+ * @description A styled card container with variant and padding presets.
+ * Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
+ * subcomponents for semantic structure.
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+interface CardSubProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Header section of a Card (flex row for title + actions). */
+declare const CardHeader: react.ForwardRefExoticComponent<CardSubProps & react.RefAttributes<HTMLDivElement>>;
+/** Title within a CardHeader. */
+declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+    children: ReactNode;
+} & react.RefAttributes<HTMLHeadingElement>>;
+/** Description text within a CardHeader. */
+declare const CardDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
+    children: ReactNode;
+} & react.RefAttributes<HTMLParagraphElement>>;
+/** Main content area of a Card. */
+declare const CardContent: react.ForwardRefExoticComponent<CardSubProps & react.RefAttributes<HTMLDivElement>>;
+/** Footer section of a Card (typically for actions). */
+declare const CardFooter: react.ForwardRefExoticComponent<CardSubProps & react.RefAttributes<HTMLDivElement>>;
+
+/** A single radio option definition. */
+interface RadioOption {
+    /** Unique value. */
+    value: string;
+    /** Display label. */
+    label: string;
+    /** Optional description text below the label. */
+    description?: string;
+    /** Whether this option is disabled. */
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    /** Array of radio option definitions. */
+    options: RadioOption[];
+    /** Currently selected value. */
+    value: string;
+    /** Callback when selection changes. */
+    onChange: (value: string) => void;
+    /** Layout direction. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional class name for the root element. */
+    className?: string;
+}
+/**
+ * @description A custom-styled radio button group with Framer Motion selection indicator.
+ * Supports keyboard navigation (arrow keys, Home, End) and ARIA roles.
+ */
+declare function RadioGroup({ options, value, onChange, orientation, className, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+interface TooltipProps {
+    /** Tooltip content (can be text or ReactNode). */
+    content: ReactNode;
+    /** Trigger element. */
+    children: ReactNode;
+    /** Side of the trigger to display the tooltip. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Delay in milliseconds before the tooltip appears. */
+    delay?: number;
+    /** Additional class name for the tooltip content. */
+    className?: string;
+}
+/**
+ * @description A simple tooltip wrapper built on Radix Tooltip.
+ * Theme-styled content with arrow pointer and configurable delay.
+ * Requires a TooltipProvider ancestor (included by default).
+ */
+declare function Tooltip({ content, children, side, delay, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface MetricCardProps {
+    /** Metric display label. */
+    label: string;
+    /** Current numeric value. */
+    value: number;
+    /** Custom formatter for the displayed value (e.g. fmtBytes, fmtBps). */
+    format?: (n: number) => string;
+    /** Previous value for trend calculation. */
+    previousValue?: number;
+    /** Interpret trend direction for coloring. */
+    trendDirection?: 'up-good' | 'up-bad' | 'down-good' | 'down-bad';
+    /** Lucide icon component to display. */
+    icon?: ElementType;
+    /** Status determines left border accent color. */
+    status?: 'ok' | 'warning' | 'critical';
+    /** Recent values to render an inline sparkline. */
+    sparklineData?: number[];
+    className?: string;
+}
+/**
+ * @description A dashboard stat tile showing a metric value with animated counter,
+ * trend indicator, optional sparkline, and status-colored left border.
+ * Designed for monitoring dashboards and overview panels.
+ */
+declare function MetricCard({ label, value, format, previousValue, trendDirection, icon: Icon, status, sparklineData, className, }: MetricCardProps): react_jsx_runtime.JSX.Element;
+
+interface UtilizationBarProps {
+    /** Utilization value from 0 to 100. */
+    value: number;
+    /** Warning and critical thresholds. */
+    thresholds?: {
+        warning: number;
+        critical: number;
+    };
+    /** Optional label displayed to the left. */
+    label?: string;
+    /** Show percentage value text to the right. */
+    showValue?: boolean;
+    /** Bar height size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Animate the fill width on mount. */
+    animated?: boolean;
+    className?: string;
+}
+/**
+ * @description A segmented horizontal bar showing resource utilization with
+ * color-coded thresholds (green/yellow/red). Supports animated fill on mount.
+ */
+declare function UtilizationBar({ value: rawValue, thresholds, label, showValue, size, animated, className, }: UtilizationBarProps): react_jsx_runtime.JSX.Element;
+
+interface SparklineProps {
+    /** Array of numeric values to plot. */
+    data: number[];
+    /** SVG width in pixels. */
+    width?: number;
+    /** SVG height in pixels. */
+    height?: number;
+    /** Line color — must use hsl(var(--token)) format. */
+    color?: string;
+    /** Opacity for the gradient fill below the line (0 to disable). */
+    fillOpacity?: number;
+    /** Show dots on first and last data points. */
+    showDots?: boolean;
+    className?: string;
+}
+/**
+ * @description A tiny inline SVG sparkline chart for embedding in tables, cards,
+ * and metric tiles. Pure SVG with no external dependencies.
+ */
+declare function Sparkline({ data, width, height, color, fillOpacity, showDots, className, }: SparklineProps): react_jsx_runtime.JSX.Element | null;
+
+interface ThresholdGaugeProps {
+    /** Gauge value from 0 to 100. */
+    value: number;
+    /** Label displayed below the gauge. */
+    label?: string;
+    /** Warning and critical thresholds. */
+    thresholds?: {
+        warning: number;
+        critical: number;
+    };
+    /** Gauge diameter in pixels. */
+    size?: number;
+    /** Show the numeric value in the center. */
+    showValue?: boolean;
+    /** Custom formatter for the center value. */
+    format?: (n: number) => string;
+    className?: string;
+}
+/**
+ * @description A semicircular SVG gauge with color-coded threshold zones
+ * (green/yellow/red). Animates the arc on mount. Displays value in center.
+ */
+declare function ThresholdGauge({ value: rawValue, label, thresholds, size, showValue, format, className, }: ThresholdGaugeProps): react_jsx_runtime.JSX.Element;
+
+interface TimelineEvent {
+    /** ISO 8601 timestamp. */
+    time: string;
+    /** Short event label. */
+    label: string;
+    /** Severity determines dot color. */
+    severity: 'critical' | 'warning' | 'info' | 'ok';
+    /** Optional detail text shown on click/hover. */
+    detail?: string;
+}
+interface SeverityTimelineProps {
+    /** Events to display (most recent should be first). */
+    events: TimelineEvent[];
+    /** Maximum number of visible events. */
+    maxVisible?: number;
+    /** Callback when an event dot/label is clicked. */
+    onEventClick?: (event: TimelineEvent) => void;
+    className?: string;
+}
+/**
+ * @description A horizontal scrollable timeline showing events with severity-colored
+ * dots. Most recent events appear on the left. Click events for detail callbacks.
+ * Designed for alert timelines and incident history strips.
+ */
+declare function SeverityTimeline({ events, maxVisible, onEventClick, className, }: SeverityTimelineProps): react_jsx_runtime.JSX.Element | null;
+
+interface LogEntry {
+    /** ISO 8601 timestamp. */
+    time: string;
+    /** Log level. */
+    level: 'error' | 'warn' | 'info' | 'debug' | 'trace';
+    /** Log message content. */
+    message: string;
+    /** Optional source identifier. */
+    source?: string;
+}
+interface LogViewerProps {
+    /** Log entries to display. */
+    entries: LogEntry[];
+    /** Maximum container height in pixels. */
+    maxHeight?: number;
+    /** Auto-scroll to bottom on new entries. */
+    autoScroll?: boolean;
+    /** Show timestamps column. */
+    showTimestamps?: boolean;
+    /** Show level badge. */
+    showLevel?: boolean;
+    /** Callback when a log entry is clicked. */
+    onEntryClick?: (entry: LogEntry) => void;
+    className?: string;
+}
+/**
+ * @description A log stream viewer with severity-colored borders, auto-scroll,
+ * search filtering, and a "new entries" indicator when scrolled up.
+ * Designed for real-time log tailing in monitoring dashboards.
+ */
+declare function LogViewer({ entries, maxHeight, autoScroll, showTimestamps, showLevel, onEntryClick, className, }: LogViewerProps): react_jsx_runtime.JSX.Element;
+
+interface PortStatus {
+    /** Unique port identifier. */
+    id: string;
+    /** Display label (e.g. "Gi1/0/1"). */
+    label: string;
+    /** Port operational status. */
+    status: 'up' | 'down' | 'disabled' | 'error';
+    /** Link speed display string (e.g. "10G", "1G"). */
+    speed?: string;
+    /** Port utilization 0-100 percentage. */
+    utilization?: number;
+}
+interface PortStatusGridProps {
+    /** Array of port status objects. */
+    ports: PortStatus[];
+    /** Number of columns. Defaults to auto-fit. */
+    columns?: number;
+    /** Dot/rectangle size. */
+    size?: 'sm' | 'md';
+    /** Callback when a port is clicked. */
+    onPortClick?: (port: PortStatus) => void;
+    className?: string;
+}
+/**
+ * @description A grid of small colored indicators representing network ports or
+ * interfaces. Each port is colored by operational status with hover tooltips showing
+ * label, speed, and utilization. Designed for switch/router faceplate visualizations.
+ */
+declare function PortStatusGrid({ ports, columns, size, onPortClick, className, }: PortStatusGridProps): react_jsx_runtime.JSX.Element;
+
+interface TimeRange {
+    /** Display label (e.g. "1h", "24h"). */
+    label: string;
+    /** Unique value identifier. */
+    value: string;
+    /** Duration in seconds represented by this range. */
+    seconds: number;
+}
+interface TimeRangeSelectorProps {
+    /** Currently selected range value. */
+    value: string;
+    /** Callback when a range is selected. */
+    onChange: (value: string, range: TimeRange) => void;
+    /** Custom range options. Defaults to 1h, 6h, 24h, 7d, 30d. */
+    ranges?: TimeRange[];
+    className?: string;
+}
+/**
+ * @description A compact horizontal pill-group time range selector for dashboards.
+ * Active selection is highlighted with a sliding indicator using the brand color.
+ * Common in monitoring dashboards for controlling chart time windows.
+ */
+declare function TimeRangeSelector({ value, onChange, ranges, className, }: TimeRangeSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface StageInfo {
+    /** Stage display name. */
+    name: string;
+    /** Current stage status. */
+    status: 'active' | 'idle' | 'error' | 'disabled';
+    /** Optional metric to display inside the stage box. */
+    metric?: {
+        label: string;
+        value: string;
+    };
+    /** Lucide icon component for the stage. */
+    icon?: ElementType;
+}
+interface PipelineStageProps {
+    /** Ordered array of processing stages. */
+    stages: StageInfo[];
+    /** Callback when a stage is clicked. */
+    onStageClick?: (stage: StageInfo, index: number) => void;
+    className?: string;
+}
+/**
+ * @description A horizontal data pipeline visualization showing processing stages
+ * connected by animated chevron arrows. Each stage displays name, status dot,
+ * optional icon, and optional metric. Designed for data pipeline monitoring views.
+ */
+declare function PipelineStage({ stages, onStageClick, className, }: PipelineStageProps): react_jsx_runtime.JSX.Element;
+
+interface DayStatus {
+    /** Date in YYYY-MM-DD format. */
+    date: string;
+    /** Operational status for that day. */
+    status: 'ok' | 'degraded' | 'outage' | 'no-data';
+    /** Uptime percentage for that day (0-100). */
+    uptime?: number;
+}
+interface UptimeTrackerProps {
+    /** Array of day-status entries (oldest first). */
+    days: DayStatus[];
+    /** Show overall uptime percentage. */
+    showPercentage?: boolean;
+    /** Optional label displayed above the bar. */
+    label?: string;
+    /** Callback when a day bar is clicked. */
+    onDayClick?: (day: DayStatus) => void;
+    className?: string;
+}
+/**
+ * @description A row of thin vertical bars representing daily uptime status,
+ * inspired by GitHub/Statuspage uptime indicators. Each bar is colored by
+ * operational status (ok/degraded/outage/no-data). Hover shows date and uptime
+ * percentage. Designed for SLA and availability tracking displays.
+ */
+declare function UptimeTracker({ days, showPercentage, label, onDayClick, className, }: UptimeTrackerProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedCounter, type AnimatedCounterProps, Avatar, type AvatarProps, Badge, type BadgeColor, type BadgeProps, type BadgeVariantConfig, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSubProps, CardTitle, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableProps, type DayStatus, type Density, DropdownMenu, type DropdownMenuProps, EmptyState, type EmptyStateProps, FilterPill, type FilterPillProps, FormInput, type FormInputProps, INPUT_CLS, LABEL_CLS, type LogEntry, LogViewer, type LogViewerProps, type MenuItem, MetricCard, type MetricCardProps, PipelineStage, type PipelineStageProps, Popover, type PopoverProps, type PortStatus, PortStatusGrid, type PortStatusGridProps, Progress, type ProgressProps, type PulseConfig, RadioGroup, type RadioGroupProps, type RadioOption, SeverityTimeline, type SeverityTimelineProps, Sheet, type SheetProps, Skeleton, SkeletonCard, SkeletonText, type SkeletonTextProps, Slider, type SliderProps, Sparkline, type SparklineProps, type StageInfo, StatusBadge, type StatusBadgeProps, type StatusConfig, StatusPulse, type StatusPulseProps, SuccessCheckmark, type SuccessCheckmarkProps, TEXTAREA_CLS, type Tab, Tabs, type TabsProps, ThresholdGauge, type ThresholdGaugeProps, type TimeRange, TimeRangeSelector, type TimeRangeSelectorProps, type TimelineEvent, Toaster, type ToasterProps, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps, TruncatedText, type TruncatedTextProps, UptimeTracker, type UptimeTrackerProps, type UtilColorMap, UtilizationBar, type UtilizationBarProps, clamp, cn, createBadgeVariant, defaultPulseConfigMap, defaultStatusMap, defaultUtilColorMap, fmtBps, fmtBytes, fmtCompact, fmtDuration, fmtPct, fmtRelative, fmtSpeed, fmtUptime, fmtUtil, stripCidr, utilColor };