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

package/src/components/ui/themed-select.tsx

@@ -1,141 +0,0 @@
-/**
- * ThemedSelect — custom dropdown with grouped options.
- *
- * A generic, fully-controlled select component that supports grouped option
- * lists and optional hint text per item. Has no dependency on any app-level
- * context; all state is passed in as props.
- */
-
-import { useEffect, useRef, useState } from "react";
-import { Button } from "./button";
-
-export interface ThemedSelectGroup<T extends string = string> {
-  label: string;
-  items: { id: T; text: string; hint?: string }[];
-}
-
-export interface ThemedSelectProps<T extends string = string> {
-  value: T | null;
-  groups: ThemedSelectGroup<T>[];
-  onChange: (id: T) => void;
-  placeholder?: string;
-  menuPlacement?: "top" | "bottom";
-  className?: string;
-  triggerClassName?: string;
-  menuClassName?: string;
-}
-
-export function ThemedSelect<T extends string>({
-  value,
-  groups,
-  onChange,
-  placeholder = "select...",
-  menuPlacement = "bottom",
-  className = "",
-  triggerClassName = "",
-  menuClassName = "",
-}: ThemedSelectProps<T>) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  // Close on outside click
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node))
-        setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-
-  // Close on Escape
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [open]);
-
-  // Find current label
-  let currentLabel = placeholder;
-  for (const g of groups) {
-    const found = g.items.find((i) => i.id === value);
-    if (found) {
-      currentLabel = found.hint ? `${found.text} — ${found.hint}` : found.text;
-      break;
-    }
-  }
-
-  const menuStyle =
-    menuPlacement === "top"
-      ? { bottom: "calc(100% + 0.125rem)" }
-      : { top: "calc(100% + 0.125rem)" };
-
-  return (
-    <div
-      ref={ref}
-      className={`relative min-w-0 w-full ${open ? "z-[100]" : ""} ${className}`}
-    >
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        className={`flex h-12 w-full items-center justify-between border-border bg-card px-2.5 py-1.5 text-left text-xs shadow-sm hover:border-accent focus-visible:ring-1 focus-visible:ring-accent ${triggerClassName}`}
-        onClick={() => setOpen(!open)}
-      >
-        <span className="truncate">{currentLabel}</span>
-        <span
-          className={`ml-2 text-[10px] text-muted transition-transform ${open ? "rotate-180" : ""}`}
-        >
-          &#9660;
-        </span>
-      </Button>
-
-      {open && (
-        <div
-          className={`absolute left-0 right-0 z-50 max-h-[280px] overflow-y-auto rounded-md border border-border bg-card shadow-lg ${menuClassName}`}
-          style={menuStyle}
-        >
-          {groups.map((g) => (
-            <div key={g.label}>
-              <div className="px-2.5 py-1 text-[10px] font-semibold text-muted bg-bg-muted sticky top-0">
-                {g.label}
-              </div>
-              {g.items.map((item) => {
-                const active = item.id === value;
-                return (
-                  <Button
-                    key={item.id}
-                    variant="ghost"
-                    size="sm"
-                    className={`w-full justify-start text-left px-2.5 py-1.5 h-auto text-xs rounded-none ${
-                      active
-                        ? "bg-accent text-accent-foreground"
-                        : "text-txt hover:bg-bg-muted"
-                    }`}
-                    onClick={() => {
-                      onChange(item.id);
-                      setOpen(false);
-                    }}
-                  >
-                    <span className="font-semibold">{item.text}</span>
-                    {item.hint && (
-                      <span
-                        className={`ml-1.5 ${active ? "opacity-70" : "text-muted"}`}
-                      >
-                        {item.hint}
-                      </span>
-                    )}
-                  </Button>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/ui/tooltip-extended.tsx

@@ -1,340 +0,0 @@
-/**
- * Extended tooltip components for contextual help, icon buttons, guided
- * tours, and spotlight onboarding overlays.
- *
- * All exports here are framework-agnostic (no app context dependency).
- *
- * Note: The Radix-based `Tooltip` is exported from `./tooltip`. This file
- * exports a custom CSS-only hover tooltip (`HoverTooltip`), `IconTooltip`,
- * `Spotlight`, and `useGuidedTour`.
- */
-
-import { X } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-
-/* ── HoverTooltip ────────────────────────────────────────────────────── */
-
-/**
- * CSS-only hover tooltip that wraps any element in a `<button>` and shows
- * a floating content panel on hover/focus. Supports controlled `visible`
- * mode and an optional dismiss button.
- *
- * Use `IconTooltip` for a div-based (non-button) variant that is safe to
- * wrap interactive children.
- */
-export interface HoverTooltipProps {
-  children: React.ReactNode;
-  content: React.ReactNode;
-  position?: "top" | "bottom" | "left" | "right";
-  delay?: number;
-  showArrow?: boolean;
-  className?: string;
-  visible?: boolean;
-  onDismiss?: () => void;
-}
-
-export function HoverTooltip({
-  children,
-  content,
-  position = "top",
-  delay = 300,
-  showArrow = true,
-  className = "",
-  visible: controlledVisible,
-  onDismiss,
-}: HoverTooltipProps) {
-  const [isVisible, setIsVisible] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const containerRef = useRef<HTMLButtonElement>(null);
-  const isVisibleState =
-    controlledVisible !== undefined ? controlledVisible : isVisible;
-
-  const show = useCallback(() => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => setIsVisible(true), delay);
-  }, [delay]);
-
-  const hide = useCallback(() => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => setIsVisible(false), 150);
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-
-  const positionClasses = {
-    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-    left: "right-full top-1/2 -translate-y-1/2 mr-2",
-    right: "left-full top-1/2 -translate-y-1/2 ml-2",
-  };
-
-  const arrowClasses = {
-    top: "top-full left-1/2 -translate-x-1/2 border-t-border border-l-transparent border-r-transparent border-b-transparent",
-    bottom:
-      "bottom-full left-1/2 -translate-x-1/2 border-b-border border-l-transparent border-r-transparent border-t-transparent",
-    left: "left-full top-1/2 -translate-y-1/2 border-l-border border-t-transparent border-b-transparent border-r-transparent",
-    right:
-      "right-full top-1/2 -translate-y-1/2 border-r-border border-t-transparent border-b-transparent border-l-transparent",
-  };
-
-  return (
-    <button
-      type="button"
-      ref={containerRef}
-      className="relative inline-flex bg-transparent border-0 p-0 cursor-default"
-      onMouseEnter={show}
-      onMouseLeave={hide}
-      onFocus={show}
-      onBlur={hide}
-    >
-      {children}
-
-      {isVisibleState && (
-        <div
-          className={`absolute z-50 ${positionClasses[position]} ${className}`}
-        >
-          <div className="relative bg-bg-elevated border border-border rounded-lg shadow-xl p-3 max-w-xs">
-            {onDismiss && (
-              <button
-                type="button"
-                onClick={onDismiss}
-                className="absolute top-1 right-1 p-1 text-muted hover:text-txt rounded"
-                aria-label="Dismiss tooltip"
-              >
-                <X className="w-3 h-3" />
-              </button>
-            )}
-            {content}
-
-            {showArrow && (
-              <div
-                className={`absolute w-0 h-0 border-4 ${arrowClasses[position]}`}
-              />
-            )}
-          </div>
-        </div>
-      )}
-    </button>
-  );
-}
-
-/* ── IconTooltip ─────────────────────────────────────────────────────── */
-
-/**
- * Lightweight tooltip for icon buttons.
- *
- * Uses a `<div>` wrapper (not `<button>`) so it can safely wrap interactive
- * elements like icon buttons without nesting buttons.
- */
-export function IconTooltip({
-  children,
-  label,
-  shortcut,
-  position = "top",
-}: {
-  children: React.ReactNode;
-  label: string;
-  shortcut?: string;
-  position?: "top" | "bottom";
-}) {
-  const posClass =
-    position === "top"
-      ? "bottom-full left-1/2 -translate-x-1/2 mb-2"
-      : "top-full left-1/2 -translate-x-1/2 mt-2";
-  const arrowClass =
-    position === "top"
-      ? "top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-bg-elevated"
-      : "bottom-full left-1/2 -translate-x-1/2 -mb-1 border-4 border-transparent border-b-bg-elevated";
-
-  return (
-    <div className="relative group">
-      {children}
-      <div
-        className={`absolute ${posClass} px-2 py-1 bg-bg-elevated border border-border text-[11px] text-txt-strong rounded-md whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 shadow-lg pointer-events-none`}
-        role="tooltip"
-      >
-        <div className="font-medium">{label}</div>
-        {shortcut && <div className="text-muted mt-0.5">{shortcut}</div>}
-        <div className={`absolute ${arrowClass}`} />
-      </div>
-    </div>
-  );
-}
-
-/* ── Spotlight ───────────────────────────────────────────────────────── */
-
-export interface SpotlightProps {
-  target: string;
-  title: string;
-  description: string;
-  step: number;
-  totalSteps: number;
-  onNext: () => void;
-  onPrev: () => void;
-  onSkip: () => void;
-  /** Labels to override defaults. */
-  labels?: {
-    stepOf?: string;
-    skipTour?: string;
-    previous?: string;
-    finish?: string;
-    next?: string;
-  };
-}
-
-export function Spotlight({
-  target,
-  title,
-  description,
-  step,
-  totalSteps,
-  onNext,
-  onPrev,
-  onSkip,
-  labels = {},
-}: SpotlightProps) {
-  const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
-
-  useEffect(() => {
-    const element = document.querySelector(target);
-    if (element) {
-      const rect = element.getBoundingClientRect();
-      setTargetRect(rect);
-    }
-  }, [target]);
-
-  if (!targetRect) return null;
-
-  const padding = 8;
-
-  return (
-    <div className="fixed inset-0 z-[300] pointer-events-none">
-      {/* Backdrop with cutout */}
-      <div
-        className="absolute inset-0 bg-black/60 pointer-events-auto"
-        style={{
-          clipPath: `polygon(
-            0% 0%,
-            0% 100%,
-            ${targetRect.left - padding}px 100%,
-            ${targetRect.left - padding}px ${targetRect.top - padding}px,
-            ${targetRect.right + padding}px ${targetRect.top - padding}px,
-            ${targetRect.right + padding}px ${targetRect.bottom + padding}px,
-            ${targetRect.left - padding}px ${targetRect.bottom + padding}px,
-            ${targetRect.left - padding}px 100%,
-            100% 100%,
-            100% 0%
-          )`,
-        }}
-      />
-
-      {/* Tooltip card */}
-      <div
-        className="absolute bg-card border border-border rounded-xl shadow-2xl p-5 max-w-sm pointer-events-auto"
-        style={{
-          top: targetRect.bottom + padding + 16,
-          left: Math.min(targetRect.left, window.innerWidth - 340),
-        }}
-      >
-        <div className="flex items-center justify-between mb-3">
-          <span className="text-xs text-muted font-medium">
-            {labels.stepOf ?? "Step"} {step} of {totalSteps}
-          </span>
-          <button
-            type="button"
-            onClick={onSkip}
-            className="text-xs text-muted hover:text-txt"
-          >
-            {labels.skipTour ?? "Skip Tour"}
-          </button>
-        </div>
-
-        <h3 className="text-lg font-bold text-txt-strong mb-2">{title}</h3>
-        <p className="text-sm text-muted mb-4">{description}</p>
-
-        <div className="flex items-center justify-between">
-          <button
-            type="button"
-            onClick={onPrev}
-            disabled={step === 1}
-            className="px-4 py-2 text-sm border border-border rounded-lg disabled:opacity-40 disabled:cursor-not-allowed hover:bg-bg-hover transition-colors"
-          >
-            {labels.previous ?? "Previous"}
-          </button>
-
-          <div className="flex gap-1">
-            {Array.from({ length: totalSteps }, (_, idx) => idx).map(
-              (dotIndex) => (
-                <div
-                  key={`step-dot-${dotIndex}`}
-                  className={`w-2 h-2 rounded-full transition-colors ${
-                    dotIndex + 1 === step ? "bg-accent" : "bg-border"
-                  }`}
-                />
-              ),
-            )}
-          </div>
-
-          <button
-            type="button"
-            onClick={onNext}
-            className="px-4 py-2 text-sm bg-accent text-accent-fg rounded-lg hover:opacity-90 transition-opacity"
-          >
-            {step === totalSteps
-              ? (labels.finish ?? "Finish")
-              : (labels.next ?? "Next")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── useGuidedTour ───────────────────────────────────────────────────── */
-
-export interface TourStep {
-  target: string;
-  title: string;
-  description: string;
-}
-
-export function useGuidedTour(steps: TourStep[]) {
-  const [isActive, setIsActive] = useState(false);
-  const [currentStep, setCurrentStep] = useState(0);
-
-  const start = useCallback(() => {
-    setIsActive(true);
-    setCurrentStep(0);
-  }, []);
-
-  const next = useCallback(() => {
-    if (currentStep < steps.length - 1) {
-      setCurrentStep((prev) => prev + 1);
-    } else {
-      setIsActive(false);
-    }
-  }, [currentStep, steps.length]);
-
-  const prev = useCallback(() => {
-    setCurrentStep((prev) => Math.max(0, prev - 1));
-  }, []);
-
-  const skip = useCallback(() => {
-    setIsActive(false);
-  }, []);
-
-  return {
-    isActive,
-    currentStep,
-    step: steps[currentStep],
-    start,
-    next,
-    prev,
-    skip,
-    totalSteps: steps.length,
-  };
-}

package/src/components/ui/tooltip.tsx

@@ -1,28 +0,0 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border border-border bg-card px-3 py-1.5 text-sm text-txt shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/components/ui/typography.tsx

@@ -1,74 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const textVariants = cva("text-txt", {
-  variants: {
-    variant: {
-      default: "text-base",
-      medium: "text-sm",
-      small: "text-xs",
-      muted: "text-sm text-muted",
-      lead: "text-xl text-muted",
-      large: "text-lg font-semibold",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-});
-
-export interface TextProps
-  extends React.HTMLAttributes<HTMLParagraphElement>,
-    VariantProps<typeof textVariants> {
-  asChild?: boolean;
-}
-
-export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
-  ({ className, variant, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? "span" : "p";
-    return (
-      <Comp
-        ref={ref}
-        className={cn(textVariants({ variant }), className)}
-        {...props}
-      />
-    );
-  },
-);
-Text.displayName = "Text";
-
-const headingVariants = cva("text-txt font-semibold tracking-tight", {
-  variants: {
-    level: {
-      h1: "text-4xl font-extrabold lg:text-5xl",
-      h2: "text-3xl",
-      h3: "text-2xl",
-      h4: "text-xl",
-      h5: "text-lg",
-      h6: "text-base",
-    },
-  },
-  defaultVariants: {
-    level: "h1",
-  },
-});
-
-export interface HeadingProps
-  extends React.HTMLAttributes<HTMLHeadingElement>,
-    VariantProps<typeof headingVariants> {}
-
-export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
-  ({ className, level = "h1", ...props }, ref) => {
-    const Comp = level || "h1";
-    return (
-      <Comp
-        ref={ref}
-        className={cn(headingVariants({ level }), className)}
-        {...props}
-      />
-    );
-  },
-);
-Heading.displayName = "Heading";

package/src/lib/button-styles.ts

@@ -1,19 +0,0 @@
-/**
- * Shared button class strings for consistent styling across views.
- *
- * These CSS class strings complement the `Button` component for cases where
- * a plain HTML `button` element is used or Tailwind class composition is
- * preferred over the variant prop.
- */
-
-export const btnPrimary =
-  "px-4 py-2 text-sm font-medium bg-[var(--accent)] text-[var(--accent-foreground,#1a1f26)] border border-[var(--accent)] cursor-pointer hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-default rounded-lg";
-
-export const btnGhost =
-  "px-3 py-1.5 text-xs bg-transparent text-[var(--muted)] border border-[var(--border)] cursor-pointer hover:text-[var(--txt)] hover:border-[var(--txt)] transition-colors disabled:opacity-40 disabled:cursor-default rounded-lg";
-
-export const btnDanger =
-  "px-3 py-1.5 text-xs bg-transparent text-[var(--danger,#e74c3c)] border border-[var(--danger,#e74c3c)] cursor-pointer hover:bg-[var(--danger,#e74c3c)] hover:text-white transition-colors disabled:opacity-40 disabled:cursor-default rounded-lg";
-
-export const inputCls =
-  "flex-1 px-3 py-2 text-sm bg-[var(--card)] border border-[var(--border)] text-[var(--txt)] focus:border-[var(--accent)] focus:outline-none transition-colors rounded-lg";

package/tsconfig.build.json

@@ -1,18 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "declaration": true,
-    "declarationMap": true,
-    "noEmit": false,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "tsBuildInfoFile": "./dist/.tsbuildinfo"
-  },
-  "exclude": [
-    "src/**/*.stories.ts",
-    "src/**/*.stories.tsx",
-    "src/**/*.test.ts",
-    "src/**/*.test.tsx"
-  ],
-  "include": ["src"]
-}

package/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "types": ["node"],
-    "baseUrl": ".",
-    "paths": {
-      "@ui/*": ["./src/*"]
-    }
-  },
-  "exclude": [
-    "src/**/*.stories.ts",
-    "src/**/*.stories.tsx",
-    "src/**/*.test.ts",
-    "src/**/*.test.tsx"
-  ],
-  "include": ["src"],
-  "references": []
-}