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

package/src/components/ui/slider.tsx

@@ -1,26 +0,0 @@
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className,
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-bg ring-offset-bg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };

package/src/components/ui/sonner.tsx

@@ -1,28 +0,0 @@
-import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-bg group-[.toaster]:text-txt group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-fg",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-fg",
-        },
-      }}
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

package/src/components/ui/spinner.tsx

@@ -1,21 +0,0 @@
-import { Loader2 } from "lucide-react";
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
-  size?: number | string;
-}
-
-export const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
-  ({ className, size = 24, ...props }, ref) => {
-    return (
-      <Loader2
-        ref={ref}
-        size={size}
-        className={cn("animate-spin text-muted", className)}
-        {...props}
-      />
-    );
-  },
-);
-Spinner.displayName = "Spinner";

package/src/components/ui/stack.tsx

@@ -1,55 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-const stackVariants = cva("flex", {
-  variants: {
-    direction: {
-      row: "flex-row",
-      col: "flex-col",
-    },
-    align: {
-      start: "items-start",
-      center: "items-center",
-      end: "items-end",
-      stretch: "items-stretch",
-      baseline: "items-baseline",
-    },
-    justify: {
-      start: "justify-start",
-      center: "justify-center",
-      end: "justify-end",
-      between: "justify-between",
-    },
-    spacing: {
-      none: "gap-0",
-      sm: "gap-2",
-      md: "gap-4",
-      lg: "gap-6",
-    },
-  },
-  defaultVariants: {
-    direction: "col",
-    spacing: "md",
-  },
-});
-
-export interface StackProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof stackVariants> {}
-
-export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
-  ({ className, direction, align, justify, spacing, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          stackVariants({ direction, align, justify, spacing }),
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-Stack.displayName = "Stack";

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

@@ -1,128 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-export type StatusTone = "success" | "warning" | "danger" | "muted";
-
-const STATUS_TONE_STYLES: Record<StatusTone, { badge: string; dot: string }> = {
-  success: {
-    badge: "text-ok border-ok/30 bg-ok/10",
-    dot: "bg-ok",
-  },
-  warning: {
-    badge: "text-warn border-warn/30 bg-warn/10",
-    dot: "bg-warn",
-  },
-  danger: {
-    badge: "text-destructive border-destructive/30 bg-destructive/10",
-    dot: "bg-destructive",
-  },
-  muted: {
-    badge: "text-muted border-border bg-bg",
-    dot: "bg-muted",
-  },
-};
-
-export function statusToneForBoolean(
-  condition: boolean,
-  onTone: StatusTone = "success",
-  offTone: StatusTone = "muted",
-): StatusTone {
-  return condition ? onTone : offTone;
-}
-
-/* ── StatusBadge ─────────────────────────────────────────────────────── */
-
-export interface StatusBadgeProps
-  extends React.HTMLAttributes<HTMLSpanElement> {
-  label: string;
-  tone: StatusTone;
-  withDot?: boolean;
-}
-
-export const StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(
-  ({ label, tone, withDot = false, className, ...props }, ref) => {
-    const styles = STATUS_TONE_STYLES[tone];
-    return (
-      <span
-        ref={ref}
-        className={cn(
-          "inline-flex items-center gap-1 rounded-sm border px-2 py-0.5 text-[10px] font-bold uppercase",
-          styles.badge,
-          className,
-        )}
-        {...props}
-      >
-        {withDot && (
-          <span className={cn("h-1.5 w-1.5 rounded-full", styles.dot)} />
-        )}
-        {label}
-      </span>
-    );
-  },
-);
-StatusBadge.displayName = "StatusBadge";
-
-/* ── StatusDot ───────────────────────────────────────────────────────── */
-
-export interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
-  status: string;
-}
-
-export const StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(
-  ({ status, className, ...props }, ref) => {
-    const tone: StatusTone =
-      status === "success" || status === "completed" || status === "connected"
-        ? "success"
-        : status === "error" || status === "failed" || status === "denied"
-          ? "danger"
-          : "muted";
-
-    const styles = STATUS_TONE_STYLES[tone];
-    return (
-      <span
-        ref={ref}
-        className={cn(
-          "inline-block h-2 w-2 rounded-full",
-          styles.dot,
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-StatusDot.displayName = "StatusDot";
-
-/* ── StatCard ────────────────────────────────────────────────────────── */
-
-export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  label: string;
-  value: React.ReactNode;
-  accent?: boolean;
-}
-
-export const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
-  ({ label, value, accent = false, className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "flex flex-col items-center justify-center border border-border bg-bg p-3 min-w-[80px]",
-        className,
-      )}
-      {...props}
-    >
-      <div
-        className={cn(
-          "text-lg font-bold tabular-nums",
-          accent && "text-accent",
-        )}
-      >
-        {value}
-      </div>
-      <div className="mt-0.5 text-[10px] uppercase tracking-wide text-muted">
-        {label}
-      </div>
-    </div>
-  ),
-);
-StatCard.displayName = "StatCard";

package/src/components/ui/switch.tsx

@@ -1,27 +0,0 @@
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-bg shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };

package/src/components/ui/tabs.tsx

@@ -1,53 +0,0 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-fg",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bg transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bg data-[state=active]:text-txt data-[state=active]:shadow-sm",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/components/ui/tag-editor.tsx

@@ -1,111 +0,0 @@
-/**
- * TagEditor — add/remove string tags with chip display.
- *
- * Fully generic; no app-context dependency. Callers pass translated labels
- * via props (with English defaults so the component works out-of-the-box).
- */
-
-import { useState } from "react";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Input } from "./input";
-
-export interface TagEditorProps {
-  label: string;
-  items: string[];
-  onChange: (items: string[]) => void;
-  placeholder?: string;
-  /** Label for the Add button. Defaults to "Add". */
-  addLabel?: string;
-  /** Label for the remove button. Defaults to "×". */
-  removeLabel?: string;
-  /** Optional class for the root container. */
-  className?: string;
-  /** Optional class for the input row. */
-  inputRowClassName?: string;
-  /** Optional class for the scrollable tag list. */
-  listClassName?: string;
-}
-
-export function TagEditor({
-  label,
-  items,
-  onChange,
-  placeholder = "add item...",
-  addLabel = "+",
-  removeLabel = "×",
-  className,
-  inputRowClassName,
-  listClassName,
-}: TagEditorProps) {
-  const [inputValue, setInputValue] = useState("");
-
-  const addItem = () => {
-    const trimmed = inputValue.trim();
-    if (trimmed && !items.includes(trimmed)) {
-      onChange([...items, trimmed]);
-    }
-    setInputValue("");
-  };
-
-  const removeItem = (index: number) => {
-    const updated = [...items];
-    updated.splice(index, 1);
-    onChange(updated);
-  };
-
-  return (
-    <div className={cn("flex min-h-0 flex-col gap-1.5", className)}>
-      <span className="font-semibold text-xs">{label}</span>
-      <div className={cn("flex items-center gap-1.5", inputRowClassName)}>
-        <Input
-          type="text"
-          value={inputValue}
-          placeholder={placeholder}
-          onChange={(e) => setInputValue(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              addItem();
-            }
-          }}
-          className="h-7 px-2 border-border bg-card text-[11px] focus-visible:ring-1 focus-visible:ring-accent flex-1 min-w-0 shadow-sm"
-        />
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-7 w-7 text-[14px] p-0 text-accent border-none hover:bg-transparent hover:text-accent/80 font-bold"
-          onClick={addItem}
-        >
-          {addLabel}
-        </Button>
-      </div>
-      <div
-        className={cn(
-          "min-h-0 overflow-y-auto rounded-xl border border-border/40 bg-bg/50 p-2 backdrop-blur-sm",
-          "flex flex-wrap content-start items-start gap-x-1.5 gap-y-1",
-          listClassName,
-        )}
-      >
-        {items.map((item, i) => (
-          <span
-            key={item}
-            className="inline-flex items-center justify-between gap-1 px-2 py-0.5 border border-border/50 bg-black/10 rounded text-[11px] h-fit text-txt font-medium"
-          >
-            <span className="truncate max-w-[200px]" title={item}>
-              {item}
-            </span>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-4 w-4 p-0 text-danger/80 hover:text-danger hover:bg-transparent"
-              onClick={() => removeItem(i)}
-            >
-              {removeLabel}
-            </Button>
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/ui/tag-input.tsx

@@ -1,108 +0,0 @@
-import { X } from "lucide-react";
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-export interface TagInputProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
-  /** Label shown above the input */
-  label?: string;
-  /** Current list of tags */
-  items: string[];
-  /** Called with the updated tag list */
-  onChange: (items: string[]) => void;
-  /** Placeholder text for the input */
-  placeholder?: string;
-  /** Maximum number of tags */
-  maxItems?: number;
-  /** Label for the explicit add button */
-  addLabel?: string;
-  /** Aria-label template for the remove button */
-  removeLabel?: string;
-}
-
-export const TagInput = React.forwardRef<HTMLDivElement, TagInputProps>(
-  (
-    {
-      label,
-      items,
-      onChange,
-      placeholder = "Add item…",
-      maxItems,
-      addLabel = "Add",
-      removeLabel = "Remove",
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const [inputValue, setInputValue] = React.useState("");
-
-    const addItem = React.useCallback(() => {
-      const trimmed = inputValue.trim();
-      if (!trimmed || items.includes(trimmed)) return;
-      if (maxItems != null && items.length >= maxItems) return;
-      onChange([...items, trimmed]);
-      setInputValue("");
-    }, [inputValue, items, onChange, maxItems]);
-
-    const removeItem = React.useCallback(
-      (index: number) => {
-        const updated = [...items];
-        updated.splice(index, 1);
-        onChange(updated);
-      },
-      [items, onChange],
-    );
-
-    return (
-      <div
-        ref={ref}
-        className={cn("flex flex-col gap-1.5", className)}
-        {...props}
-      >
-        {label && <span className="text-xs font-semibold">{label}</span>}
-        <div className="flex items-center gap-1.5">
-          <input
-            type="text"
-            value={inputValue}
-            placeholder={placeholder}
-            onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                addItem();
-              }
-            }}
-            className="flex-1 min-w-0 rounded-md border border-input bg-bg px-2 py-1 text-[11px] placeholder:text-muted focus-visible:outline-none focus-visible:border-ring"
-          />
-          <button
-            type="button"
-            className="rounded-md border border-input bg-bg px-1.5 py-0.5 text-[10px] text-muted transition-colors hover:border-accent hover:text-accent"
-            onClick={addItem}
-          >
-            {addLabel}
-          </button>
-        </div>
-        <div className="flex flex-wrap gap-1.5 rounded-md border border-border bg-bg-accent p-1.5 min-h-[60px] content-start">
-          {items.map((item, i) => (
-            <span
-              key={item}
-              className="inline-flex items-center gap-1 rounded-sm border border-border bg-bg px-2 py-0.5 text-[11px]"
-            >
-              {item}
-              <button
-                type="button"
-                className="text-muted hover:text-destructive transition-colors"
-                onClick={() => removeItem(i)}
-                aria-label={`${removeLabel} ${item}`}
-              >
-                <X className="h-3 w-3" />
-              </button>
-            </span>
-          ))}
-        </div>
-      </div>
-    );
-  },
-);
-TagInput.displayName = "TagInput";

package/src/components/ui/textarea.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-bg px-3 py-2 text-sm ring-offset-bg placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Textarea.displayName = "Textarea";
-
-export { Textarea };