mywhy-ui 0.1.1 → 0.2.0

package/dist/index.d.cts

@@ -338,6 +338,98 @@ interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function Sidebar({ sections, activeItem, onItemClick, collapsible, isCollapsed, onCollapsedChange, width, className, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
 
+interface TableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    render?: (value: any, row: any) => React.ReactNode;
+    align?: 'left' | 'center' | 'right';
+}
+interface TableProps {
+    columns: TableColumn[];
+    data: any[];
+    striped?: boolean;
+    hoverable?: boolean;
+    compact?: boolean;
+    className?: string;
+    emptyMessage?: string;
+}
+declare function Table({ columns, data, striped, hoverable, compact, className, emptyMessage, }: TableProps): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    current: number;
+    total: number;
+    onChange: (page: number) => void;
+    size?: 'sm' | 'md';
+    showInfo?: boolean;
+    maxVisible?: number;
+    className?: string;
+}
+declare function Pagination({ current, total, onChange, size, showInfo, maxVisible, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, action, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+type NumberInputSize = 'sm' | 'md' | 'lg';
+interface NumberInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    step?: number;
+    min?: number;
+    max?: number;
+    size?: NumberInputSize;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}
+declare function NumberInput({ value, onChange, step, min, max, size, disabled, placeholder, className, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+
+type CodeBlockLanguage = 'json' | 'javascript' | 'typescript' | 'python' | 'bash' | 'text';
+interface CodeBlockProps {
+    code: string;
+    language?: CodeBlockLanguage;
+    copyable?: boolean;
+    numbered?: boolean;
+    maxHeight?: string;
+    className?: string;
+}
+declare function CodeBlock({ code, language, copyable, numbered, maxHeight, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+type TimelineStatus = 'completed' | 'pending' | 'error' | 'in-progress';
+interface TimelineItem {
+    id: string | number;
+    label: string;
+    description?: string;
+    status: TimelineStatus;
+    timestamp?: string | Date;
+    icon?: React.ReactNode;
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+}
+declare function Timeline({ items, orientation, className, }: TimelineProps): react_jsx_runtime.JSX.Element;
+
+type KbdSize = 'xs' | 'sm' | 'md';
+type KbdTheme = 'gray' | 'dark' | 'brand';
+interface KbdProps {
+    keys: string | string[];
+    size?: KbdSize;
+    theme?: KbdTheme;
+    className?: string;
+}
+declare function Kbd({ keys, size, theme, className, }: KbdProps): react_jsx_runtime.JSX.Element;
+
 type RobotStatus = 'online' | 'offline' | 'error' | 'warning' | 'connecting' | 'unknown';
 interface StatusBadgeProps {
     status: RobotStatus;
@@ -381,4 +473,4 @@ declare function useToast(): {
     removeToast: (id: string) => void;
 };
 
-export { Alert, type AlertProps, type AlertTheme, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarTheme, Badge, type BadgeProps, type BadgeTheme, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTheme, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, ConnectionIcon, ConnectionIndicator, type ConnectionIndicatorProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Dropdown, type DropdownItem, type DropdownProps, FileUploader, type FileUploaderProps, FormControl, type FormControlProps, Input, type InputProps, type InputSize, Link, type LinkProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, Progress, type ProgressProps, Rating, type RatingProps, type RobotStatus, Select, type SelectOption, type SelectProps, type SelectSize, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, TimePicker, type TimePickerProps, Toast, ToastContainer, type ToastContainerProps, type ToastEntry, type ToastProps, type ToastType, Tooltip, type TooltipPlacement, type TooltipProps, type UseDisclosureReturn, useDisclosure, useToast };
+export { Alert, type AlertProps, type AlertTheme, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarTheme, Badge, type BadgeProps, type BadgeTheme, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTheme, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockLanguage, type CodeBlockProps, ConnectionIcon, ConnectionIndicator, type ConnectionIndicatorProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Dropdown, type DropdownItem, type DropdownProps, EmptyState, type EmptyStateProps, FileUploader, type FileUploaderProps, FormControl, type FormControlProps, Input, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, type KbdTheme, Link, type LinkProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberInput, type NumberInputProps, type NumberInputSize, Pagination, type PaginationProps, Progress, type ProgressProps, Rating, type RatingProps, type RobotStatus, Select, type SelectOption, type SelectProps, type SelectSize, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, Toast, ToastContainer, type ToastContainerProps, type ToastEntry, type ToastProps, type ToastType, Tooltip, type TooltipPlacement, type TooltipProps, type UseDisclosureReturn, useDisclosure, useToast };

package/dist/index.d.ts

@@ -338,6 +338,98 @@ interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function Sidebar({ sections, activeItem, onItemClick, collapsible, isCollapsed, onCollapsedChange, width, className, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
 
+interface TableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    render?: (value: any, row: any) => React.ReactNode;
+    align?: 'left' | 'center' | 'right';
+}
+interface TableProps {
+    columns: TableColumn[];
+    data: any[];
+    striped?: boolean;
+    hoverable?: boolean;
+    compact?: boolean;
+    className?: string;
+    emptyMessage?: string;
+}
+declare function Table({ columns, data, striped, hoverable, compact, className, emptyMessage, }: TableProps): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    current: number;
+    total: number;
+    onChange: (page: number) => void;
+    size?: 'sm' | 'md';
+    showInfo?: boolean;
+    maxVisible?: number;
+    className?: string;
+}
+declare function Pagination({ current, total, onChange, size, showInfo, maxVisible, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, action, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+type NumberInputSize = 'sm' | 'md' | 'lg';
+interface NumberInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    step?: number;
+    min?: number;
+    max?: number;
+    size?: NumberInputSize;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}
+declare function NumberInput({ value, onChange, step, min, max, size, disabled, placeholder, className, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+
+type CodeBlockLanguage = 'json' | 'javascript' | 'typescript' | 'python' | 'bash' | 'text';
+interface CodeBlockProps {
+    code: string;
+    language?: CodeBlockLanguage;
+    copyable?: boolean;
+    numbered?: boolean;
+    maxHeight?: string;
+    className?: string;
+}
+declare function CodeBlock({ code, language, copyable, numbered, maxHeight, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+type TimelineStatus = 'completed' | 'pending' | 'error' | 'in-progress';
+interface TimelineItem {
+    id: string | number;
+    label: string;
+    description?: string;
+    status: TimelineStatus;
+    timestamp?: string | Date;
+    icon?: React.ReactNode;
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+}
+declare function Timeline({ items, orientation, className, }: TimelineProps): react_jsx_runtime.JSX.Element;
+
+type KbdSize = 'xs' | 'sm' | 'md';
+type KbdTheme = 'gray' | 'dark' | 'brand';
+interface KbdProps {
+    keys: string | string[];
+    size?: KbdSize;
+    theme?: KbdTheme;
+    className?: string;
+}
+declare function Kbd({ keys, size, theme, className, }: KbdProps): react_jsx_runtime.JSX.Element;
+
 type RobotStatus = 'online' | 'offline' | 'error' | 'warning' | 'connecting' | 'unknown';
 interface StatusBadgeProps {
     status: RobotStatus;
@@ -381,4 +473,4 @@ declare function useToast(): {
     removeToast: (id: string) => void;
 };
 
-export { Alert, type AlertProps, type AlertTheme, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarTheme, Badge, type BadgeProps, type BadgeTheme, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTheme, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, ConnectionIcon, ConnectionIndicator, type ConnectionIndicatorProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Dropdown, type DropdownItem, type DropdownProps, FileUploader, type FileUploaderProps, FormControl, type FormControlProps, Input, type InputProps, type InputSize, Link, type LinkProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, Progress, type ProgressProps, Rating, type RatingProps, type RobotStatus, Select, type SelectOption, type SelectProps, type SelectSize, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, TimePicker, type TimePickerProps, Toast, ToastContainer, type ToastContainerProps, type ToastEntry, type ToastProps, type ToastType, Tooltip, type TooltipPlacement, type TooltipProps, type UseDisclosureReturn, useDisclosure, useToast };
+export { Alert, type AlertProps, type AlertTheme, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarTheme, Badge, type BadgeProps, type BadgeTheme, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTheme, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockLanguage, type CodeBlockProps, ConnectionIcon, ConnectionIndicator, type ConnectionIndicatorProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Dropdown, type DropdownItem, type DropdownProps, EmptyState, type EmptyStateProps, FileUploader, type FileUploaderProps, FormControl, type FormControlProps, Input, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, type KbdTheme, Link, type LinkProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberInput, type NumberInputProps, type NumberInputSize, Pagination, type PaginationProps, Progress, type ProgressProps, Rating, type RatingProps, type RobotStatus, Select, type SelectOption, type SelectProps, type SelectSize, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, Toast, ToastContainer, type ToastContainerProps, type ToastEntry, type ToastProps, type ToastType, Tooltip, type TooltipPlacement, type TooltipProps, type UseDisclosureReturn, useDisclosure, useToast };

package/dist/index.js

@@ -539,7 +539,7 @@ function MultiSelect({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  const sizeClasses11 = {
+  const sizeClasses13 = {
     sm: "h-7 px-2 text-sm",
     md: "h-8 px-3 text-base",
     lg: "h-9 px-4 text-base"
@@ -557,7 +557,7 @@ function MultiSelect({
             "focus-within:ring-2 focus-within:ring-brand focus-within:ring-offset-1",
             disabled ? "bg-surface-gray opacity-50 cursor-not-allowed" : "bg-white",
             error ? "border-danger-border" : "border-outline",
-            sizeClasses11[size]
+            sizeClasses13[size]
           ].join(" "),
           onClick: () => !disabled && setIsOpen(!isOpen),
           children: [
@@ -1607,6 +1607,412 @@ function Sidebar({
     }
   );
 }
+function Table({
+  columns,
+  data,
+  striped = true,
+  hoverable = true,
+  compact = false,
+  className = "",
+  emptyMessage = "No data"
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-ink-faint text-sm", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `overflow-x-auto border border-outline rounded-lg ${className}`, children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "bg-surface-gray border-b border-outline", children: columns.map((col) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        style: { width: col.width },
+        className: `
+                  ${compact ? "px-3 py-2" : "px-4 py-3"}
+                  text-left text-xs font-semibold text-ink-faint uppercase tracking-wide
+                  ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : "text-left"}
+                `,
+        children: col.label
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: data.map((row, rowIdx) => /* @__PURE__ */ jsx(
+      "tr",
+      {
+        className: `
+                border-b border-outline last:border-b-0
+                ${striped && rowIdx % 2 === 1 ? "bg-surface-gray/50" : ""}
+                ${hoverable ? "hover:bg-surface-overlay transition-colors" : ""}
+              `,
+        children: columns.map((col) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            style: { width: col.width },
+            className: `
+                    ${compact ? "px-3 py-2" : "px-4 py-3"}
+                    text-sm text-ink
+                    ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : "text-left"}
+                  `,
+            children: col.render ? col.render(row[col.key], row) : row[col.key]
+          },
+          `${rowIdx}-${col.key}`
+        ))
+      },
+      rowIdx
+    )) })
+  ] }) });
+}
+var ChevronLeftIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) });
+var ChevronRightIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) });
+function Pagination({
+  current,
+  total,
+  onChange,
+  size = "md",
+  showInfo = true,
+  maxVisible = 5,
+  className = ""
+}) {
+  const sizeClass = size === "sm" ? "text-xs px-2 py-1" : "text-sm px-3 py-2";
+  const getPages = () => {
+    const pages2 = [];
+    const halfVisible = Math.floor(maxVisible / 2);
+    let start = Math.max(1, current - halfVisible);
+    let end = Math.min(total, current + halfVisible);
+    if (start === 1) {
+      end = Math.min(total, maxVisible);
+    } else if (end === total) {
+      start = Math.max(1, total - maxVisible + 1);
+    }
+    if (start > 1) pages2.push(1);
+    if (start > 2) pages2.push("...");
+    for (let i = start; i <= end; i++) {
+      pages2.push(i);
+    }
+    if (end < total - 1) pages2.push("...");
+    if (end < total) pages2.push(total);
+    return pages2;
+  };
+  const pages = getPages();
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    showInfo && /* @__PURE__ */ jsxs("span", { className: "text-xs text-ink-faint", children: [
+      "Page ",
+      current,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onChange(Math.max(1, current - 1)),
+        disabled: current === 1,
+        className: `
+          flex items-center justify-center rounded border border-outline
+          hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed disabled:hover:bg-transparent
+          transition-colors ${sizeClass}
+        `,
+        title: "Previous page",
+        children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: size === "sm" ? 12 : 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: pages.map(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsx("span", { className: "px-2 text-ink-faint", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onChange(page),
+          className: `
+                flex items-center justify-center rounded border
+                transition-colors ${sizeClass}
+                ${current === page ? "bg-brand text-white border-brand" : "border-outline hover:bg-surface-overlay"}
+              `,
+          children: page
+        },
+        page
+      )
+    ) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onChange(Math.min(total, current + 1)),
+        disabled: current === total,
+        className: `
+          flex items-center justify-center rounded border border-outline
+          hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed disabled:hover:bg-transparent
+          transition-colors ${sizeClass}
+        `,
+        title: "Next page",
+        children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: size === "sm" ? 12 : 16 })
+      }
+    )
+  ] });
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center py-12 px-4 ${className}`, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "text-4xl mb-4", children: icon }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-ink mb-2", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-ink-faint mb-6 text-center max-w-sm", children: description }),
+    action && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: action.onClick,
+        className: "px-4 py-2 bg-brand text-white rounded-md hover:bg-brand-600 transition-colors text-sm font-medium",
+        children: action.label
+      }
+    )
+  ] });
+}
+var ChevronUpIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" }) });
+var ChevronDownIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) });
+var sizeClasses10 = {
+  sm: "text-xs px-2 py-1 h-8",
+  md: "text-sm px-3 py-2 h-10",
+  lg: "text-base px-4 py-2.5 h-12"
+};
+function NumberInput({
+  value,
+  onChange,
+  step = 1,
+  min,
+  max,
+  size = "md",
+  disabled = false,
+  placeholder,
+  className = ""
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const handleIncrement = () => {
+    const newValue = value + step;
+    if (max === void 0 || newValue <= max) {
+      onChange(newValue);
+    }
+  };
+  const handleDecrement = () => {
+    const newValue = value - step;
+    if (min === void 0 || newValue >= min) {
+      onChange(newValue);
+    }
+  };
+  const handleInputChange = (e) => {
+    const newValue = parseFloat(e.target.value);
+    if (!isNaN(newValue)) {
+      let val = newValue;
+      if (min !== void 0 && val < min) val = min;
+      if (max !== void 0 && val > max) val = max;
+      onChange(val);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `relative inline-flex items-center border border-outline rounded-md bg-surface ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "number",
+        value,
+        onChange: handleInputChange,
+        onFocus: () => setIsEditing(true),
+        onBlur: () => setIsEditing(false),
+        disabled,
+        placeholder,
+        step,
+        min,
+        max,
+        className: `
+          flex-1 bg-transparent outline-none text-ink disabled:text-ink-faint disabled:cursor-not-allowed
+          ${sizeClasses10[size]}
+        `
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-outline", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleIncrement,
+          disabled: disabled || max !== void 0 && value >= max,
+          className: "flex-1 px-1 hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed transition-colors",
+          title: "Increment",
+          children: /* @__PURE__ */ jsx(ChevronUpIcon, { size: size === "sm" ? 12 : size === "md" ? 14 : 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleDecrement,
+          disabled: disabled || min !== void 0 && value <= min,
+          className: "flex-1 px-1 hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed transition-colors border-t border-outline",
+          title: "Decrement",
+          children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: size === "sm" ? 12 : size === "md" ? 14 : 16 })
+        }
+      )
+    ] })
+  ] });
+}
+var CopyIcon = ({ size }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsx("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" })
+] });
+var CheckIcon = ({ size, className }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+function CodeBlock({
+  code,
+  language = "text",
+  copyable = true,
+  numbered = false,
+  maxHeight = "max-h-96",
+  className = ""
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const lines = code.split("\n");
+  return /* @__PURE__ */ jsxs("div", { className: `relative bg-ink rounded-lg overflow-hidden border border-outline ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between bg-surface-gray px-4 py-2 border-b border-outline", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-ink-faint font-mono uppercase", children: language }),
+      copyable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "p-1 rounded hover:bg-surface-overlay transition-colors text-ink-faint hover:text-ink",
+          title: "Copy to clipboard",
+          children: copied ? /* @__PURE__ */ jsx("span", { style: { color: "currentColor" }, className: "text-status-online", children: /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `overflow-auto ${maxHeight}`, children: /* @__PURE__ */ jsx("pre", { className: "p-4 text-sm font-mono text-sky-100", children: numbered ? /* @__PURE__ */ jsx(Fragment, { children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-ink-faint select-none", children: String(i + 1).padStart(3, " ") }),
+      /* @__PURE__ */ jsx("span", { children: line })
+    ] }, i)) }) : code }) })
+  ] });
+}
+var statusColors = {
+  completed: {
+    dot: "bg-status-online border-status-online",
+    line: "bg-status-online",
+    text: "text-status-online"
+  },
+  pending: {
+    dot: "bg-ink-light border-ink-light",
+    line: "bg-ink-faint",
+    text: "text-ink-faint"
+  },
+  error: {
+    dot: "bg-danger-icon border-danger-icon",
+    line: "bg-danger-icon",
+    text: "text-danger-text"
+  },
+  "in-progress": {
+    dot: "bg-brand border-brand",
+    line: "bg-brand",
+    text: "text-brand"
+  }
+};
+function Timeline({
+  items,
+  orientation = "vertical",
+  className = ""
+}) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx("div", { className: `space-y-4 ${className}`, children: items.map((item, index) => {
+      const colors = statusColors[item.status];
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `
+                    w-4 h-4 rounded-full border-2 flex-shrink-0
+                    flex items-center justify-center bg-white
+                    ${colors.dot}
+                  `,
+              children: item.icon && /* @__PURE__ */ jsx("span", { className: "text-white text-2xs", children: item.icon })
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx("div", { className: `w-0.5 h-12 ${colors.line}` })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 py-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("h4", { className: `font-semibold text-sm ${colors.text}`, children: item.label }),
+            item.timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-ink-faint", children: typeof item.timestamp === "string" ? item.timestamp : new Date(item.timestamp).toLocaleTimeString("en-GB", {
+              hour12: false,
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit"
+            }) })
+          ] }),
+          item.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-ink-faint mt-1", children: item.description })
+        ] })
+      ] }, item.id);
+    }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `flex gap-4 overflow-x-auto pb-2 ${className}`, children: items.map((item, index) => {
+    const colors = statusColors[item.status];
+    index === items.length - 1;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center flex-shrink-0 gap-2 min-w-fit", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        index > 0 && /* @__PURE__ */ jsx("div", { className: `h-0.5 w-6 ${statusColors[items[index - 1].status].line}` }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `
+                  w-5 h-5 rounded-full border-2 flex items-center justify-center bg-white
+                  ${colors.dot}
+                `,
+            children: item.icon && /* @__PURE__ */ jsx("span", { className: "text-white text-2xs", children: item.icon })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: `text-xs font-semibold ${colors.text}`, children: item.label }),
+        item.timestamp && /* @__PURE__ */ jsx("p", { className: "text-2xs text-ink-faint", children: typeof item.timestamp === "string" ? item.timestamp : new Date(item.timestamp).toLocaleTimeString("en-GB", {
+          hour12: false,
+          hour: "2-digit",
+          minute: "2-digit"
+        }) })
+      ] })
+    ] }, item.id);
+  }) });
+}
+var sizeClasses11 = {
+  xs: "text-xs px-1.5 py-0.5 min-w-5 h-5",
+  sm: "text-xs px-2 py-1 min-w-6 h-6",
+  md: "text-sm px-2.5 py-1.5 min-w-8 h-8"
+};
+var themeClasses5 = {
+  gray: "bg-surface-gray border-outline text-ink",
+  dark: "bg-ink text-white border-ink-faint",
+  brand: "bg-brand border-brand text-white"
+};
+function Kbd({
+  keys,
+  size = "sm",
+  theme = "gray",
+  className = ""
+}) {
+  const keyArray = Array.isArray(keys) ? keys : [keys];
+  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center gap-1 ${className}`, children: keyArray.map((key, i) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "kbd",
+      {
+        className: `
+              inline-flex items-center justify-center rounded font-mono font-medium
+              border border-b-2 shadow-sm
+              ${sizeClasses11[size]}
+              ${themeClasses5[theme]}
+            `,
+        children: key
+      }
+    ),
+    i < keyArray.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-ink-faint text-xs", children: "+" })
+  ] }, key)) });
+}
 var statusConfig = {
   online: {
     label: "Online",
@@ -1681,7 +2087,7 @@ function StatusBadge({
     }
   );
 }
-var sizeClasses10 = {
+var sizeClasses12 = {
   sm: "text-xs gap-1.5",
   md: "text-sm gap-2",
   lg: "text-base gap-2"
@@ -1700,7 +2106,7 @@ function ConnectionIndicator({
   className = ""
 }) {
   const status = connected ? "online" : "offline";
-  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center ${sizeClasses10[size]} ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center ${sizeClasses12[size]} ${className}`, children: [
     /* @__PURE__ */ jsx(
       StatusBadge,
       {
@@ -1747,6 +2153,6 @@ function useToast() {
   return { toasts, addToast, removeToast };
 }
 
-export { Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, ConnectionIcon, ConnectionIndicator, DatePicker, Dialog, Dropdown, FileUploader, FormControl, Input, Link, MultiSelect, Progress, Rating, Select, Sidebar, Slider, Spinner, StatusBadge, Switch, Tabs, Textarea, TimePicker, Toast, ToastContainer, Tooltip, useDisclosure, useToast };
+export { Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CodeBlock, ConnectionIcon, ConnectionIndicator, DatePicker, Dialog, Dropdown, EmptyState, FileUploader, FormControl, Input, Kbd, Link, MultiSelect, NumberInput, Pagination, Progress, Rating, Select, Sidebar, Slider, Spinner, StatusBadge, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toast, ToastContainer, Tooltip, useDisclosure, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map