@elizaos/ui 2.0.0-alpha.73 → 2.0.0-alpha.76

package/src/components/ui/confirm-dialog.tsx

@@ -1,142 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-/* ── ConfirmDialog ───────────────────────────────────────────────────── */
-
-export type ConfirmTone = "danger" | "warn" | "default";
-
-export interface ConfirmDialogProps {
-  open: boolean;
-  title?: string;
-  message: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  tone?: ConfirmTone;
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-const TONE_STYLES: Record<ConfirmTone, string> = {
-  danger: "bg-destructive text-destructive-fg hover:opacity-90",
-  warn: "bg-warn text-white hover:opacity-90",
-  default: "bg-primary text-primary-fg hover:opacity-90",
-};
-
-export function ConfirmDialog({
-  open,
-  title = "Confirm",
-  message,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  tone = "default",
-  onConfirm,
-  onCancel,
-}: ConfirmDialogProps) {
-  const confirmRef = React.useRef<HTMLButtonElement>(null);
-
-  React.useEffect(() => {
-    if (open) {
-      const t = setTimeout(() => confirmRef.current?.focus(), 50);
-      return () => clearTimeout(t);
-    }
-  }, [open]);
-
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onCancel();
-      }
-    },
-    [onCancel],
-  );
-
-  if (!open) return null;
-
-  return (
-    <div
-      className="fixed inset-0 flex items-center justify-center bg-black/40"
-      style={{ zIndex: 10001 }}
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onCancel();
-      }}
-      onKeyDown={handleKeyDown}
-      role="dialog"
-      aria-modal="true"
-      aria-label={title}
-      tabIndex={-1}
-    >
-      <div className="mx-4 w-full max-w-md rounded-lg border border-border bg-bg p-6 shadow-2xl">
-        <h2 className="mb-3 text-base font-bold">{title}</h2>
-        <p className="mb-6 whitespace-pre-line text-sm text-muted">{message}</p>
-        <div className="flex items-center justify-end gap-3">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-border px-4 py-2 text-sm transition-colors hover:bg-bg-hover"
-          >
-            {cancelLabel}
-          </button>
-          <button
-            ref={confirmRef}
-            type="button"
-            onClick={onConfirm}
-            className={cn(
-              "rounded-md px-4 py-2 text-sm font-medium transition-opacity",
-              TONE_STYLES[tone],
-            )}
-          >
-            {confirmLabel}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── useConfirm hook ─────────────────────────────────────────────────── */
-
-export interface ConfirmOptions {
-  title?: string;
-  message: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  tone?: ConfirmTone;
-}
-
-export function useConfirm() {
-  const [state, setState] = React.useState<{
-    opts: ConfirmOptions;
-    resolve: (v: boolean) => void;
-  } | null>(null);
-
-  const confirm = React.useCallback(
-    (opts: ConfirmOptions): Promise<boolean> =>
-      new Promise((resolve) => {
-        setState({ opts, resolve });
-      }),
-    [],
-  );
-
-  const modalProps: ConfirmDialogProps = state
-    ? {
-        open: true,
-        ...state.opts,
-        onConfirm: () => {
-          state.resolve(true);
-          setState(null);
-        },
-        onCancel: () => {
-          state.resolve(false);
-          setState(null);
-        },
-      }
-    : {
-        open: false,
-        message: "",
-        onConfirm: () => {},
-        onCancel: () => {},
-      };
-
-  return { confirm, modalProps };
-}

package/src/components/ui/connection-status.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-export type ConnectionState = "connected" | "disconnected" | "error";
-
-const STATE_STYLES: Record<
-  ConnectionState,
-  { dot: string; text: string; label: string }
-> = {
-  connected: {
-    dot: "bg-ok",
-    text: "text-txt",
-    label: "Connected",
-  },
-  disconnected: {
-    dot: "bg-muted",
-    text: "text-muted",
-    label: "Disconnected",
-  },
-  error: {
-    dot: "bg-destructive",
-    text: "text-destructive",
-    label: "Error",
-  },
-};
-
-export interface ConnectionStatusProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  state: ConnectionState;
-  /** Custom label — overrides the default state label */
-  label?: string;
-}
-
-export const ConnectionStatus = React.forwardRef<
-  HTMLDivElement,
-  ConnectionStatusProps
->(({ state, label, className, ...props }, ref) => {
-  const styles = STATE_STYLES[state];
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "inline-flex items-center gap-2 rounded-md border border-border bg-bg-accent px-3 py-1.5 text-xs",
-        styles.text,
-        className,
-      )}
-      {...props}
-    >
-      <span className={cn("h-2 w-2 rounded-full", styles.dot)} />
-      {label ?? styles.label}
-    </div>
-  );
-});
-ConnectionStatus.displayName = "ConnectionStatus";

package/src/components/ui/copy-button.tsx

@@ -1,60 +0,0 @@
-import { Check, Copy } from "lucide-react";
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-export interface CopyButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
-  /** Text to copy to clipboard */
-  value: string;
-  /** Duration of the "copied" feedback in ms */
-  feedbackDuration?: number;
-  /** Aria-label for default state */
-  copyLabel?: string;
-  /** Aria-label for copied state */
-  copiedLabel?: string;
-}
-
-export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
-  (
-    {
-      value,
-      feedbackDuration = 2000,
-      copyLabel = "Copy",
-      copiedLabel = "Copied",
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [copied, setCopied] = React.useState(false);
-
-    const handleCopy = React.useCallback(() => {
-      void navigator.clipboard.writeText(value);
-      setCopied(true);
-      setTimeout(() => setCopied(false), feedbackDuration);
-    }, [value, feedbackDuration]);
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        onClick={handleCopy}
-        className={cn(
-          "inline-flex items-center gap-1 rounded-md p-1.5 text-muted transition-colors hover:bg-bg-hover hover:text-txt",
-          className,
-        )}
-        aria-label={copied ? copiedLabel : copyLabel}
-        {...props}
-      >
-        {copied ? (
-          <Check className="h-3.5 w-3.5 text-ok" />
-        ) : (
-          <Copy className="h-3.5 w-3.5" />
-        )}
-        {children}
-      </button>
-    );
-  },
-);
-CopyButton.displayName = "CopyButton";

package/src/components/ui/dialog.tsx

@@ -1,120 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-bg p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-bg transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};

package/src/components/ui/dropdown-menu.tsx

@@ -1,198 +0,0 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 text-txt shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 text-txt shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-};

package/src/components/ui/empty-state.tsx

@@ -1,42 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Icon element rendered above the title */
-  icon?: React.ReactNode;
-  /** Main heading */
-  title: string;
-  /** Supporting description text */
-  description?: string;
-  /** Primary action button or element */
-  action?: React.ReactNode;
-}
-
-export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
-  (
-    { icon, title, description, action, className, children, ...props },
-    ref,
-  ) => (
-    <div
-      ref={ref}
-      className={cn(
-        "flex flex-1 flex-col items-center justify-center p-6 text-center",
-        className,
-      )}
-      {...props}
-    >
-      {icon && (
-        <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-accent/10 text-accent">
-          {icon}
-        </div>
-      )}
-      <h3 className="mb-2 text-lg font-semibold">{title}</h3>
-      {description && (
-        <p className="mb-6 max-w-sm text-sm text-muted">{description}</p>
-      )}
-      {action}
-      {children}
-    </div>
-  ),
-);
-EmptyState.displayName = "EmptyState";

package/src/components/ui/error-boundary.tsx

@@ -1,63 +0,0 @@
-import * as React from "react";
-import { Button } from "./button";
-
-export interface ErrorBoundaryProps {
-  children: React.ReactNode;
-  /** Custom fallback UI — receives the error and a reset callback */
-  fallback?: (error: Error, resetErrorBoundary: () => void) => React.ReactNode;
-}
-
-interface ErrorBoundaryState {
-  error: Error | null;
-}
-
-export class ErrorBoundary extends React.Component<
-  ErrorBoundaryProps,
-  ErrorBoundaryState
-> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error("[ErrorBoundary]", error, errorInfo);
-  }
-
-  resetErrorBoundary = () => {
-    this.setState({ error: null });
-  };
-
-  render() {
-    if (this.state.error) {
-      if (this.props.fallback) {
-        return this.props.fallback(this.state.error, this.resetErrorBoundary);
-      }
-      return (
-        <div className="flex flex-col items-center justify-center gap-3 p-6 text-center border border-destructive/30 bg-destructive/5 rounded-md">
-          <p className="text-sm font-semibold text-destructive">
-            Something went wrong
-          </p>
-          <p className="text-xs text-muted max-w-sm">
-            {this.state.error.message}
-          </p>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="rounded-md text-xs"
-            onClick={this.resetErrorBoundary}
-          >
-            Try Again
-          </Button>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}