@annondeveloper/ui-kit 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 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 React, { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode, HTMLAttributes, ElementType } from 'react';
 import { LucideIcon } from 'lucide-react';
-export { a as Select, S as SelectOption, b as SelectProps } from './select-nnBJUO8U.js';
+export { a as Select, S as SelectOption, b as SelectProps } from './select-B2wXqqSM.js';
 import { ColumnDef } from '@tanstack/react-table';
 export { toast } from 'sonner';
 
@@ -67,7 +65,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * @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>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 type BadgeColor = 'brand' | 'blue' | 'green' | 'yellow' | 'red' | 'orange' | 'purple' | 'pink' | 'teal' | 'gray';
 interface BadgeProps {
@@ -84,7 +82,7 @@ interface BadgeProps {
  * @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;
+declare function Badge({ children, color, icon: Icon, size, className, }: BadgeProps): React.JSX.Element;
 interface BadgeVariantConfig<T extends string> {
     /** Map from value to BadgeColor. */
     colorMap: Partial<Record<T, BadgeColor>>;
@@ -108,10 +106,10 @@ interface BadgeVariantConfig<T extends string> {
  * // Usage: <SeverityBadge value="critical" />
  * ```
  */
-declare function createBadgeVariant<T extends string>(config: BadgeVariantConfig<T>): ({ value, className }: {
+declare function createBadgeVariant<T extends string>(config: BadgeVariantConfig<T>): (props: {
     value: T;
     className?: string;
-}) => react_jsx_runtime.JSX.Element;
+}) => React.JSX.Element;
 
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
     /** Show an indeterminate (minus) indicator instead of a checkmark. */
@@ -123,7 +121,7 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'typ
  * @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>>;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
 interface ToggleSwitchProps {
     /** Whether the toggle is on. */
@@ -142,7 +140,7 @@ interface ToggleSwitchProps {
  * @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 function ToggleSwitch({ enabled, onChange, size, disabled, label, className, }: ToggleSwitchProps): React.JSX.Element;
 
 declare const INPUT_CLS: string;
 declare const LABEL_CLS: string;
@@ -172,7 +170,7 @@ interface FormInputProps {
  * @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;
+declare function FormInput({ label, value, onChange, type, placeholder, required, disabled, hint, className, autoComplete, }: FormInputProps): React.JSX.Element;
 
 interface FilterPillProps {
     /** Label text for the pill. */
@@ -189,7 +187,7 @@ interface FilterPillProps {
  * @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;
+declare function FilterPill({ label, count, active, onClick, className }: FilterPillProps): React.JSX.Element;
 
 interface EmptyStateProps {
     /** Icon component displayed in the center. */
@@ -206,13 +204,13 @@ interface EmptyStateProps {
  * @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;
+declare function EmptyState({ icon: Icon, title, description, actions, className }: EmptyStateProps): React.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;
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 interface SkeletonTextProps {
     /** Number of text lines to render. */
     lines?: number;
@@ -222,13 +220,13 @@ interface SkeletonTextProps {
  * @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;
+declare function SkeletonText({ lines, className }: SkeletonTextProps): React.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;
+}): React.JSX.Element;
 
 interface TruncatedTextProps {
     /** The full text to display (truncated if it overflows). */
@@ -241,7 +239,7 @@ interface TruncatedTextProps {
  * @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;
+declare function TruncatedText({ text, maxWidth, className }: TruncatedTextProps): React.JSX.Element;
 
 interface ConfirmDialogProps {
     /** Whether the dialog is open. */
@@ -267,7 +265,7 @@ interface ConfirmDialogProps {
  * @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;
+declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, loading, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
 
 interface AnimatedCounterProps {
     /** The target numeric value to animate to. */
@@ -282,7 +280,7 @@ interface AnimatedCounterProps {
  * @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;
+declare function AnimatedCounter({ value, duration, className, format, }: AnimatedCounterProps): React.JSX.Element;
 
 interface SuccessCheckmarkProps {
     /** Size of the SVG in pixels. */
@@ -293,7 +291,7 @@ interface SuccessCheckmarkProps {
  * @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;
+declare function SuccessCheckmark({ size, className }: SuccessCheckmarkProps): React.JSX.Element;
 
 /** Configuration for a single status entry in a StatusBadge. */
 interface StatusConfig {
@@ -326,7 +324,7 @@ interface StatusBadgeProps {
  * 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;
+declare function StatusBadge({ status, label, size, pulse, statusMap, className, }: StatusBadgeProps): React.JSX.Element;
 
 /** Configuration for a single status in StatusPulse. */
 interface PulseConfig {
@@ -354,7 +352,7 @@ interface StatusPulseProps {
  * @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;
+declare function StatusPulse({ status, label, configMap, className }: StatusPulseProps): React.JSX.Element;
 
 interface ToasterProps {
     /** Theme mode. Controls Sonner's internal theming. */
@@ -369,7 +367,7 @@ interface ToasterProps {
  * 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;
+declare function Toaster({ theme, position, duration }: ToasterProps): React.JSX.Element;
 
 type Density = 'compact' | 'comfortable' | 'spacious';
 interface DataTableProps<T> {
@@ -408,7 +406,7 @@ interface DataTableProps<T> {
  * 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;
+declare function DataTable<T>({ columns, data, isLoading, emptyState: emptyStateProps, searchPlaceholder, onRowClick, defaultSort, defaultPageSize, exportFilename, stickyFirstColumn, density: densityProp, }: DataTableProps<T>): React.JSX.Element;
 
 /** A single tab definition. */
 interface Tab {
@@ -440,7 +438,7 @@ interface TabsProps {
  * 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;
+declare function Tabs({ tabs, value, onChange, variant, size, className, }: TabsProps): React.JSX.Element;
 
 /** A single menu item definition. */
 interface MenuItem {
@@ -470,7 +468,7 @@ interface DropdownMenuProps {
  * 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;
+declare function DropdownMenu({ trigger, items, align, className }: DropdownMenuProps): React.JSX.Element;
 
 interface SheetProps {
     /** Whether the sheet is open. */
@@ -495,7 +493,7 @@ interface SheetProps {
  * 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;
+declare function Sheet({ open, onClose, side, title, description, width, children, className, }: SheetProps): React.JSX.Element;
 
 interface ProgressProps {
     /** Current progress value (0-100 by default). */
@@ -521,7 +519,7 @@ interface ProgressProps {
  * @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;
+declare function Progress({ value, max, label, showValue, variant, size, animated, indeterminate, className, }: ProgressProps): React.JSX.Element;
 
 interface AvatarProps {
     /** Image source URL. */
@@ -541,7 +539,7 @@ interface AvatarProps {
  * @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;
+declare function Avatar({ src, alt, fallback, size, status, className, }: AvatarProps): React.JSX.Element;
 
 interface PopoverProps {
     /** Trigger element that opens the popover. */
@@ -559,7 +557,7 @@ interface PopoverProps {
  * @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;
+declare function Popover({ trigger, children, side, align, className }: PopoverProps): React.JSX.Element;
 
 interface SliderProps {
     /** Current value. */
@@ -584,7 +582,7 @@ interface SliderProps {
  * 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 function Slider({ value, onChange, min, max, step, label, showValue, className, }: SliderProps): React.JSX.Element;
 
 declare const variantClasses: {
     readonly default: "bg-[hsl(var(--bg-surface))] border border-[hsl(var(--border-subtle))] shadow-sm";
@@ -611,24 +609,24 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
  * Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
  * subcomponents for semantic structure.
  */
-declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+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>>;
+declare const CardHeader: React.ForwardRefExoticComponent<CardSubProps & React.RefAttributes<HTMLDivElement>>;
 /** Title within a CardHeader. */
-declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+declare const CardTitle: React.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
     children: ReactNode;
-} & react.RefAttributes<HTMLHeadingElement>>;
+} & React.RefAttributes<HTMLHeadingElement>>;
 /** Description text within a CardHeader. */
-declare const CardDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
+declare const CardDescription: React.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
     children: ReactNode;
-} & react.RefAttributes<HTMLParagraphElement>>;
+} & React.RefAttributes<HTMLParagraphElement>>;
 /** Main content area of a Card. */
-declare const CardContent: react.ForwardRefExoticComponent<CardSubProps & react.RefAttributes<HTMLDivElement>>;
+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>>;
+declare const CardFooter: React.ForwardRefExoticComponent<CardSubProps & React.RefAttributes<HTMLDivElement>>;
 
 /** A single radio option definition. */
 interface RadioOption {
@@ -657,7 +655,7 @@ interface RadioGroupProps {
  * @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;
+declare function RadioGroup({ options, value, onChange, orientation, className, }: RadioGroupProps): React.JSX.Element;
 
 interface TooltipProps {
     /** Tooltip content (can be text or ReactNode). */
@@ -676,7 +674,7 @@ interface TooltipProps {
  * 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;
+declare function Tooltip({ content, children, side, delay, className, }: TooltipProps): React.JSX.Element;
 
 interface MetricCardProps {
     /** Metric display label. */
@@ -702,7 +700,7 @@ interface MetricCardProps {
  * 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;
+declare function MetricCard({ label, value, format, previousValue, trendDirection, icon: Icon, status, sparklineData, className, }: MetricCardProps): React.JSX.Element;
 
 interface UtilizationBarProps {
     /** Utilization value from 0 to 100. */
@@ -726,7 +724,7 @@ interface UtilizationBarProps {
  * @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;
+declare function UtilizationBar({ value: rawValue, thresholds, label, showValue, size, animated, className, }: UtilizationBarProps): React.JSX.Element;
 
 interface SparklineProps {
     /** Array of numeric values to plot. */
@@ -747,7 +745,7 @@ interface SparklineProps {
  * @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;
+declare function Sparkline({ data, width, height, color, fillOpacity, showDots, className, }: SparklineProps): React.JSX.Element | null;
 
 interface ThresholdGaugeProps {
     /** Gauge value from 0 to 100. */
@@ -771,7 +769,7 @@ interface ThresholdGaugeProps {
  * @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;
+declare function ThresholdGauge({ value: rawValue, label, thresholds, size, showValue, format, className, }: ThresholdGaugeProps): React.JSX.Element;
 
 interface TimelineEvent {
     /** ISO 8601 timestamp. */
@@ -797,7 +795,7 @@ interface SeverityTimelineProps {
  * 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;
+declare function SeverityTimeline({ events, maxVisible, onEventClick, className, }: SeverityTimelineProps): React.JSX.Element | null;
 
 interface LogEntry {
     /** ISO 8601 timestamp. */
@@ -829,7 +827,7 @@ interface LogViewerProps {
  * 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;
+declare function LogViewer({ entries, maxHeight, autoScroll, showTimestamps, showLevel, onEntryClick, className, }: LogViewerProps): React.JSX.Element;
 
 interface PortStatus {
     /** Unique port identifier. */
@@ -859,7 +857,7 @@ interface PortStatusGridProps {
  * 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;
+declare function PortStatusGrid({ ports, columns, size, onPortClick, className, }: PortStatusGridProps): React.JSX.Element;
 
 interface TimeRange {
     /** Display label (e.g. "1h", "24h"). */
@@ -883,7 +881,7 @@ interface TimeRangeSelectorProps {
  * 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;
+declare function TimeRangeSelector({ value, onChange, ranges, className, }: TimeRangeSelectorProps): React.JSX.Element;
 
 interface StageInfo {
     /** Stage display name. */
@@ -910,7 +908,7 @@ interface PipelineStageProps {
  * 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;
+declare function PipelineStage({ stages, onStageClick, className, }: PipelineStageProps): React.JSX.Element;
 
 interface DayStatus {
     /** Date in YYYY-MM-DD format. */
@@ -937,6 +935,464 @@ interface UptimeTrackerProps {
  * 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;
+declare function UptimeTracker({ days, showPercentage, label, onDayClick, className, }: UptimeTrackerProps): React.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 };
+interface StreamingTextProps {
+    /** The text content — grows as tokens arrive. */
+    text: string;
+    /** Whether tokens are still arriving. */
+    isStreaming: boolean;
+    /** Cursor blink speed in ms. */
+    speed?: number;
+    /** Show a blinking cursor at the end while streaming. */
+    showCursor?: boolean;
+    /** Called when isStreaming transitions from true to false. */
+    onComplete?: () => void;
+    className?: string;
+}
+/**
+ * @description Displays AI/LLM streaming text responses with a blinking cursor,
+ * markdown-like formatting (bold, code), copy button on completion, and auto-scroll.
+ */
+declare function StreamingText({ text, isStreaming, speed, showCursor, onComplete, className, }: StreamingTextProps): React.JSX.Element;
+
+interface TypingIndicatorProps {
+    /** Label text, e.g. "AI is thinking" or "3 users typing". */
+    label?: string;
+    /** Animation variant. */
+    variant?: 'dots' | 'pulse' | 'text';
+    /** Size preset. */
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * @description A "someone is typing" indicator with three variants:
+ * bouncing dots, pulsing ring, or animated ellipsis text. Respects reduced motion.
+ */
+declare function TypingIndicator({ label, variant, size, className, }: TypingIndicatorProps): React.JSX.Element;
+
+interface ConfidenceBarProps {
+    /** Confidence value between 0 and 1 (probability). */
+    value: number;
+    /** Optional label displayed before the bar. */
+    label?: string;
+    /** Show percentage text beside the bar. */
+    showPercentage?: boolean;
+    /** Thresholds for color zones. */
+    thresholds?: {
+        low: number;
+        medium: number;
+    };
+    /** Size preset. */
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * @description A horizontal confidence/probability bar colored by threshold zones:
+ * red (<low), yellow (low-medium), green (>medium). Animates fill on mount.
+ */
+declare function ConfidenceBar({ value, label, showPercentage, thresholds, size, className, }: ConfidenceBarProps): React.JSX.Element;
+
+interface FeedItem {
+    id: string;
+    content: React.ReactNode;
+    timestamp: string | Date;
+    type?: 'info' | 'success' | 'warning' | 'error';
+}
+interface LiveFeedProps {
+    /** Array of feed items, newest first. */
+    items: FeedItem[];
+    /** Maximum visible items before oldest are faded out. */
+    maxVisible?: number;
+    /** Show relative timestamps beside each item. */
+    showTimestamps?: boolean;
+    /** Auto-scroll to newest items. */
+    autoScroll?: boolean;
+    /** Callback when an item is clicked. */
+    onItemClick?: (item: FeedItem) => void;
+    /** Message shown when items array is empty. */
+    emptyMessage?: string;
+    className?: string;
+}
+/**
+ * @description A real-time event feed with animated item entry, auto-scroll,
+ * pause/resume controls, type-colored borders, and relative timestamps.
+ */
+declare function LiveFeed({ items, maxVisible, showTimestamps, autoScroll: autoScrollProp, onItemClick, emptyMessage, className, }: LiveFeedProps): React.JSX.Element;
+
+interface DiffViewerProps {
+    /** The original text. */
+    oldValue: string;
+    /** The modified text. */
+    newValue: string;
+    /** Display mode. */
+    mode?: 'inline' | 'side-by-side';
+    /** Language hint for potential styling. */
+    language?: string;
+    /** Show line numbers in the gutter. */
+    showLineNumbers?: boolean;
+    className?: string;
+}
+/**
+ * @description A diff viewer showing line-by-line differences between two text values.
+ * Supports inline and side-by-side modes, collapsible unchanged sections, and line numbers.
+ */
+declare function DiffViewer({ oldValue, newValue, mode, language, showLineNumbers, className, }: DiffViewerProps): React.JSX.Element;
+
+interface DayValue {
+    /** Date in YYYY-MM-DD format. */
+    date: string;
+    /** Numeric value for this day. */
+    value: number;
+}
+interface HeatmapCalendarProps {
+    /** Array of day values. */
+    data: DayValue[];
+    /** Start date (YYYY-MM-DD). Defaults to 365 days ago. */
+    startDate?: string;
+    /** End date (YYYY-MM-DD). Defaults to today. */
+    endDate?: string;
+    /** 5 colors from lightest to darkest. Defaults to green scale. */
+    colorScale?: string[];
+    /** Callback when a day cell is clicked. */
+    onDayClick?: (day: DayValue) => void;
+    /** Show month labels at top. */
+    showMonthLabels?: boolean;
+    /** Show day-of-week labels (Mon, Wed, Fri) on the left. */
+    showDayLabels?: boolean;
+    /** Custom tooltip format function. */
+    tooltipFormat?: (day: DayValue) => string;
+    className?: string;
+}
+/**
+ * @description A GitHub-style contribution heatmap calendar with configurable color scale,
+ * hover tooltips, month/day labels, and click handlers.
+ */
+declare function HeatmapCalendar({ data, startDate, endDate, colorScale, onDayClick, showMonthLabels, showDayLabels, tooltipFormat, className, }: HeatmapCalendarProps): React.JSX.Element;
+
+interface Notification {
+    id: string;
+    title: string;
+    message?: string;
+    type: 'info' | 'success' | 'warning' | 'error';
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Whether the notification can be dismissed. */
+    dismissible?: boolean;
+    /** Auto-dismiss after this many ms. 0 = persistent. */
+    duration?: number;
+    timestamp?: Date;
+}
+interface NotificationStackProps {
+    notifications: Notification[];
+    /** Callback to dismiss a notification by id. */
+    onDismiss: (id: string) => void;
+    /** Screen corner positioning. */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /** Max visible cards before stacking remainder. */
+    maxVisible?: number;
+    className?: string;
+}
+/**
+ * @description A fixed-position notification stack with auto-dismiss progress bars,
+ * type-specific icons and colors, action buttons, and stacking overflow.
+ */
+declare function NotificationStack({ notifications, onDismiss, position, maxVisible, className, }: NotificationStackProps): React.JSX.Element;
+
+type KanbanBadgeColor = 'brand' | 'blue' | 'green' | 'yellow' | 'red' | 'orange' | 'purple' | 'pink' | 'teal' | 'gray';
+interface KanbanItem {
+    id: string;
+    title: string;
+    description?: string;
+    tags?: {
+        label: string;
+        color: KanbanBadgeColor;
+    }[];
+    assignee?: {
+        name: string;
+        avatar?: string;
+    };
+}
+interface KanbanColumnProps {
+    /** Column title. */
+    title: string;
+    /** Items to display in this column. */
+    items: KanbanItem[];
+    /** Optional override for the count badge. */
+    count?: number;
+    /** Column header accent color (CSS value or token). */
+    color?: string;
+    /** Callback when a card is clicked. */
+    onItemClick?: (item: KanbanItem) => void;
+    /** Callback when the add button is clicked. */
+    onAddItem?: () => void;
+    className?: string;
+}
+/**
+ * @description A kanban board column with title, count badge, scrollable card list,
+ * hover states, staggered Framer Motion entrance, and empty state.
+ */
+declare function KanbanColumn({ title, items, count, color, onItemClick, onAddItem, className, }: KanbanColumnProps): React.JSX.Element;
+
+/** Describes an auto-detected filter suggestion for a data column. */
+interface FilterSuggestion {
+    /** Column accessor key. */
+    column: string;
+    /** Type of insight: outlier, top-n, pattern, or threshold. */
+    type: 'outlier' | 'top-n' | 'pattern' | 'threshold';
+    /** Human-readable label for the suggestion pill. */
+    label: string;
+    /** Apply this filter to the data. */
+    filter: () => void;
+}
+/** Props for the SmartTable component. */
+interface SmartTableProps<T> extends DataTableProps<T> {
+    /** Callback fired when a filter suggestion is generated or clicked. */
+    onFilterSuggestion?: (suggestion: FilterSuggestion) => void;
+    /** Maximum number of suggestions to show. */
+    maxSuggestions?: number;
+}
+/**
+ * @description An enhanced DataTable that analyzes column data on mount and auto-generates
+ * smart filter suggestions such as outlier detection, top-N values, dominant patterns,
+ * and threshold-based highlights. Click a suggestion to apply it as a filter.
+ * Wraps the existing DataTable via composition.
+ */
+declare function SmartTable<T>({ columns, data, onFilterSuggestion, maxSuggestions, ...tableProps }: SmartTableProps<T>): React.JSX.Element;
+
+/** Props for the RealtimeValue component. */
+interface RealtimeValueProps {
+    /** The current value to display. */
+    value: number | string;
+    /** Optional label displayed above or beside the value. */
+    label?: string;
+    /** Custom formatter for numeric values. */
+    format?: (v: number) => string;
+    /** ISO timestamp or Date of the last data update. */
+    lastUpdated?: string | Date;
+    /** Milliseconds after which the value is considered stale. Default 30000. */
+    staleAfterMs?: number;
+    /** Connection state to the data source. */
+    connectionState?: 'connected' | 'reconnecting' | 'disconnected';
+    /** Previous numeric value for delta/change display. */
+    previousValue?: number;
+    /** Whether to animate value changes. Default true. */
+    animate?: boolean;
+    /** Display size variant. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Additional class name for the root element. */
+    className?: string;
+}
+/**
+ * @description A live data display component with built-in freshness tracking,
+ * connection state indicators, animated value transitions, delta display,
+ * and auto-updating relative timestamps. Designed for real-time monitoring dashboards.
+ */
+declare function RealtimeValue({ value, label, format, lastUpdated, staleAfterMs, connectionState, previousValue, animate, size, className, }: RealtimeValueProps): React.JSX.Element;
+
+/** A single command item in the palette. */
+interface CommandItem {
+    /** Unique identifier. */
+    id: string;
+    /** Display label. */
+    label: string;
+    /** Optional description shown below the label. */
+    description?: string;
+    /** Optional icon component. */
+    icon?: LucideIcon;
+    /** Keyboard shortcut display string (e.g. "Cmd+K"). */
+    shortcut?: string;
+    /** Group name for sectioning items. */
+    group?: string;
+    /** Callback when item is selected. */
+    onSelect: () => void;
+    /** Additional search terms that match this item. */
+    keywords?: string[];
+}
+/** Props for the CommandBar component. */
+interface CommandBarProps {
+    /** Array of command items to display and search. */
+    items: CommandItem[];
+    /** Placeholder text for the search input. */
+    placeholder?: string;
+    /** Hotkey letter (combined with Cmd/Ctrl). Default "k". */
+    hotkey?: string;
+    /** Async search function for remote results. */
+    onSearch?: (query: string) => Promise<CommandItem[]>;
+    /** localStorage key for persisting recent selections. */
+    recentKey?: string;
+    /** Maximum number of recent items to store. Default 5. */
+    maxRecent?: number;
+    /** Additional class name for the dialog. */
+    className?: string;
+}
+/**
+ * @description A universal command palette activated by Cmd+K (Mac) or Ctrl+K (Win).
+ * Features fuzzy search, grouped items, recent selections (localStorage),
+ * async search support, keyboard navigation, and Framer Motion animations.
+ * Fully configurable and not hardcoded to any app.
+ */
+declare function CommandBar({ items, placeholder, hotkey, onSearch, recentKey, maxRecent, className, }: CommandBarProps): React.JSX.Element;
+
+/** A sortable item must have a string id. */
+interface SortableItem {
+    id: string;
+    [key: string]: unknown;
+}
+/** Props passed to the drag handle in the render function. */
+interface DragHandleProps {
+    /** Attach to the drag handle element. */
+    onPointerDown: (e: React.PointerEvent) => void;
+    /** Whether this item is currently being dragged. */
+    isDragging: boolean;
+    /** Keyboard handler for accessible reordering. */
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    /** The drag handle should be focusable. */
+    tabIndex: number;
+    /** ARIA role for the drag handle. */
+    role: string;
+    /** ARIA description for keyboard reordering. */
+    'aria-roledescription': string;
+}
+/** Props for the SortableList component. */
+interface SortableListProps<T extends SortableItem> {
+    /** Array of items to display. Each must have a unique `id`. */
+    items: T[];
+    /** Callback when items are reordered. Receives the new array. */
+    onReorder: (items: T[]) => void;
+    /** Render function for each item. Receives the item, its index, and drag handle props. */
+    renderItem: (item: T, index: number, dragHandleProps: DragHandleProps) => React.JSX.Element;
+    /** Layout direction. Default "vertical". */
+    direction?: 'vertical' | 'horizontal';
+    /** Additional class name for the list container. */
+    className?: string;
+}
+/**
+ * @description A drag-and-drop reorderable list with smooth Framer Motion layout animations.
+ * Pure React implementation using pointer events (no external DnD library).
+ * Supports keyboard reordering (Space to pick up, arrows to move, Enter/Space to drop).
+ * Touch-friendly and accessible.
+ */
+declare function SortableList<T extends SortableItem>({ items, onReorder, renderItem, direction, className, }: SortableListProps<T>): React.JSX.Element;
+/**
+ * @description Default drag handle component. Renders a GripVertical icon
+ * with proper pointer/keyboard event handlers from DragHandleProps.
+ */
+declare function DragHandle(props: DragHandleProps): React.JSX.Element;
+
+/** Props for the InfiniteScroll component. */
+interface InfiniteScrollProps<T> {
+    /** Array of loaded items. */
+    items: T[];
+    /** Render function for each item. */
+    renderItem: (item: T, index: number) => React.JSX.Element;
+    /** Called when more items should be loaded. */
+    loadMore: () => void | Promise<void>;
+    /** Whether more items are available. */
+    hasMore: boolean;
+    /** Whether a load operation is in progress. */
+    isLoading?: boolean;
+    /** Pixels from bottom to trigger loadMore. Default 200. */
+    threshold?: number;
+    /** Fixed item height for virtualization. If omitted, all items render (no virtualization). */
+    itemHeight?: number;
+    /** Content to display when items array is empty. */
+    emptyState?: React.ReactNode;
+    /** Additional class name for the scroll container. */
+    className?: string;
+}
+/**
+ * @description A virtualized infinite-scroll list using IntersectionObserver.
+ * Supports optional height-based virtualization, loading indicators, scroll-to-top,
+ * empty states, and skeleton placeholders. No scroll event listeners used.
+ */
+declare function InfiniteScroll<T>({ items, renderItem, loadMore, hasMore, isLoading, threshold, itemHeight, emptyState, className, }: InfiniteScrollProps<T>): React.JSX.Element;
+
+/** Props for the ColorInput component. */
+interface ColorInputProps {
+    /** Current color value as hex string (e.g. "#ff0000"). */
+    value: string;
+    /** Called when the color changes. */
+    onChange: (color: string) => void;
+    /** Optional label. */
+    label?: string;
+    /** Preset color swatches. */
+    presets?: string[];
+    /** Show alpha/opacity slider. */
+    showAlpha?: boolean;
+    /** Display format for the text input. Default "hex". */
+    format?: 'hex' | 'rgb' | 'hsl';
+    /** Additional class name. */
+    className?: string;
+}
+/**
+ * @description A compact color picker input with swatch preview, expandable picker panel
+ * featuring hue/saturation area, lightness slider, optional alpha slider, preset swatches,
+ * format switching (hex/rgb/hsl), clipboard copy, and recent color history.
+ */
+declare function ColorInput({ value, onChange, label, presets, showAlpha, format, className, }: ColorInputProps): React.JSX.Element;
+
+/** Definition of a single wizard step. */
+interface WizardStep {
+    /** Unique step identifier. */
+    id: string;
+    /** Step title displayed in the step indicator. */
+    title: string;
+    /** Optional description below the title. */
+    description?: string;
+    /** Optional icon for the step indicator. */
+    icon?: LucideIcon;
+    /** Step content to render. */
+    content: React.ReactNode;
+    /** Validation function called before advancing. Return true to allow, false to block. */
+    validate?: () => boolean | Promise<boolean>;
+}
+/** Props for the StepWizard component. */
+interface StepWizardProps {
+    /** Array of steps in order. */
+    steps: WizardStep[];
+    /** Called when the final step is completed. */
+    onComplete: () => void;
+    /** Called whenever the active step changes. */
+    onStepChange?: (step: number) => void;
+    /** Step indicator layout. Default "horizontal". */
+    orientation?: 'horizontal' | 'vertical';
+    /** Allow skipping forward to any uncompleted step. Default false. */
+    allowSkip?: boolean;
+    /** Show a summary/completion state after the last step. Default false. */
+    showSummary?: boolean;
+    /** Additional class name for the root container. */
+    className?: string;
+}
+/**
+ * @description A multi-step form wizard with animated slide transitions, per-step validation,
+ * step indicator bar (horizontal or vertical), keyboard navigation, progress percentage,
+ * and auto-save to sessionStorage for resilience to page refresh.
+ */
+declare function StepWizard({ steps, onComplete, onStepChange, orientation, allowSkip, showSummary, className, }: StepWizardProps): React.JSX.Element;
+
+/** Props for the CopyBlock component. */
+interface CopyBlockProps {
+    /** The text content to display and copy. */
+    content: string;
+    /** Language hint for styling/accessibility (e.g. "json", "bash", "sql"). */
+    language?: string;
+    /** Show line numbers in the gutter. Default false. */
+    showLineNumbers?: boolean;
+    /** Max height in pixels before collapsing with a "Show more" toggle. */
+    maxHeight?: number;
+    /** Optional label displayed above the code block. */
+    label?: string;
+    /** Additional class name for the root container. */
+    className?: string;
+}
+/**
+ * @description A monospace code/text display block with one-click copy, animated feedback,
+ * optional line numbers, collapsible overflow (show more/less), and dark-mode optimized styling.
+ * Designed for displaying code snippets, CLI commands, config blocks, and JSON payloads.
+ */
+declare function CopyBlock({ content, language, showLineNumbers, maxHeight, label, className, }: CopyBlockProps): React.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, ColorInput, type ColorInputProps, CommandBar, type CommandBarProps, type CommandItem, ConfidenceBar, type ConfidenceBarProps, ConfirmDialog, type ConfirmDialogProps, CopyBlock, type CopyBlockProps, DataTable, type DataTableProps, type DayStatus, type DayValue, type Density, DiffViewer, type DiffViewerProps, DragHandle, type DragHandleProps, DropdownMenu, type DropdownMenuProps, EmptyState, type EmptyStateProps, type FeedItem, FilterPill, type FilterPillProps, type FilterSuggestion, FormInput, type FormInputProps, HeatmapCalendar, type HeatmapCalendarProps, INPUT_CLS, InfiniteScroll, type InfiniteScrollProps, type KanbanBadgeColor, KanbanColumn, type KanbanColumnProps, type KanbanItem, LABEL_CLS, LiveFeed, type LiveFeedProps, type LogEntry, LogViewer, type LogViewerProps, type MenuItem, MetricCard, type MetricCardProps, type Notification, NotificationStack, type NotificationStackProps, PipelineStage, type PipelineStageProps, Popover, type PopoverProps, type PortStatus, PortStatusGrid, type PortStatusGridProps, Progress, type ProgressProps, type PulseConfig, RadioGroup, type RadioGroupProps, type RadioOption, RealtimeValue, type RealtimeValueProps, SeverityTimeline, type SeverityTimelineProps, Sheet, type SheetProps, Skeleton, SkeletonCard, SkeletonText, type SkeletonTextProps, Slider, type SliderProps, SmartTable, type SmartTableProps, type SortableItem, SortableList, type SortableListProps, Sparkline, type SparklineProps, type StageInfo, StatusBadge, type StatusBadgeProps, type StatusConfig, StatusPulse, type StatusPulseProps, StepWizard, type StepWizardProps, StreamingText, type StreamingTextProps, 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, TypingIndicator, type TypingIndicatorProps, UptimeTracker, type UptimeTrackerProps, type UtilColorMap, UtilizationBar, type UtilizationBarProps, type WizardStep, clamp, cn, createBadgeVariant, defaultPulseConfigMap, defaultStatusMap, defaultUtilColorMap, fmtBps, fmtBytes, fmtCompact, fmtDuration, fmtPct, fmtRelative, fmtSpeed, fmtUptime, fmtUtil, stripCidr, utilColor };