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

package/src/components/ui/grid.tsx

@@ -1,43 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-const gridVariants = cva("grid", {
-  variants: {
-    columns: {
-      1: "grid-cols-1",
-      2: "grid-cols-2",
-      3: "grid-cols-3",
-      4: "grid-cols-4",
-      6: "grid-cols-6",
-      12: "grid-cols-12",
-    },
-    spacing: {
-      none: "gap-0",
-      sm: "gap-2",
-      md: "gap-4",
-      lg: "gap-6",
-    },
-  },
-  defaultVariants: {
-    columns: 1,
-    spacing: "md",
-  },
-});
-
-export interface GridProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof gridVariants> {}
-
-export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
-  ({ className, columns, spacing, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(gridVariants({ columns, spacing }), className)}
-        {...props}
-      />
-    );
-  },
-);
-Grid.displayName = "Grid";

package/src/components/ui/input.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-bg px-3 py-2 text-sm ring-offset-bg file:border-0 file:bg-transparent file:text-sm file:font-medium 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}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };

package/src/components/ui/label.tsx

@@ -1,24 +0,0 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };

package/src/components/ui/popover.tsx

@@ -1,29 +0,0 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border border-border bg-card p-4 text-txt shadow-md outline-none 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}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverContent, PopoverTrigger };

package/src/components/ui/save-footer.tsx

@@ -1,58 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-export interface SaveFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-  dirty: boolean;
-  saving: boolean;
-  saveError: string | null;
-  saveSuccess: boolean;
-  onSave: () => void;
-  saveLabel?: string;
-  savingLabel?: string;
-  savedLabel?: string;
-}
-
-export const SaveFooter = React.forwardRef<HTMLDivElement, SaveFooterProps>(
-  (
-    {
-      dirty,
-      saving,
-      saveError,
-      saveSuccess,
-      onSave,
-      saveLabel = "Save Changes",
-      savingLabel = "Saving…",
-      savedLabel = "Saved",
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    if (!dirty) return null;
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-end gap-3 border-t border-border pt-2",
-          className,
-        )}
-        {...props}
-      >
-        {saveError && (
-          <span className="text-xs text-destructive">{saveError}</span>
-        )}
-        {saveSuccess && <span className="text-xs text-ok">{savedLabel}</span>}
-        <button
-          type="button"
-          className="rounded-md bg-primary px-4 py-1.5 text-xs font-semibold text-primary-fg transition-opacity hover:opacity-90 disabled:opacity-50"
-          disabled={saving}
-          onClick={onSave}
-        >
-          {saving ? savingLabel : saveLabel}
-        </button>
-      </div>
-    );
-  },
-);
-SaveFooter.displayName = "SaveFooter";

package/src/components/ui/search-bar.tsx

@@ -1,61 +0,0 @@
-/**
- * SearchBar — a self-contained search input with submit button.
- *
- * Fully generic; no app-context dependency. Callers pass the placeholder
- * and loading state directly.
- */
-
-import { useCallback, useState } from "react";
-import { Button } from "./button";
-import { Input } from "./input";
-
-export interface SearchBarProps {
-  onSearch: (query: string) => void;
-  searching?: boolean;
-  placeholder?: string;
-  /** Label for the submit button when idle. Defaults to "Search". */
-  searchLabel?: string;
-  /** Label for the submit button when busy. Defaults to "Searching...". */
-  searchingLabel?: string;
-}
-
-export function SearchBar({
-  onSearch,
-  searching,
-  placeholder = "Search...",
-  searchLabel = "Search",
-  searchingLabel = "Searching...",
-}: SearchBarProps) {
-  const [query, setQuery] = useState("");
-
-  const handleSubmit = useCallback(() => {
-    if (query.trim()) {
-      onSearch(query.trim());
-    }
-  }, [query, onSearch]);
-
-  return (
-    <div className="mb-6">
-      <div className="flex gap-2">
-        <Input
-          type="text"
-          placeholder={placeholder}
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-          className="h-9 bg-bg border-border text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-accent"
-          disabled={searching}
-        />
-        <Button
-          variant="default"
-          size="sm"
-          className="h-9 px-4 shadow-sm"
-          onClick={handleSubmit}
-          disabled={!query.trim() || searching}
-        >
-          {searching ? searchingLabel : searchLabel}
-        </Button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,56 +0,0 @@
-import { Search, X } from "lucide-react";
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-export interface SearchInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
-  /** Called when the clear button is clicked */
-  onClear?: () => void;
-  /** Show a loading indicator */
-  loading?: boolean;
-  /** Aria-label for the clear button */
-  clearLabel?: string;
-}
-
-export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
-  (
-    {
-      className,
-      value,
-      onClear,
-      loading,
-      clearLabel = "Clear search",
-      ...props
-    },
-    ref,
-  ) => {
-    const hasValue = typeof value === "string" ? value.length > 0 : !!value;
-
-    return (
-      <div className={cn("relative flex items-center", className)}>
-        <Search className="pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-muted" />
-        <input
-          ref={ref}
-          type="text"
-          value={value}
-          className="h-8 w-full rounded-md border border-input bg-bg pl-8 pr-8 text-xs placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-          {...props}
-        />
-        {hasValue && onClear && (
-          <button
-            type="button"
-            onClick={onClear}
-            className="absolute right-2 rounded-sm p-0.5 text-muted hover:text-txt transition-colors"
-            aria-label={clearLabel}
-          >
-            <X className="h-3 w-3" />
-          </button>
-        )}
-        {loading && (
-          <div className="absolute right-2 h-3 w-3 animate-spin rounded-full border-2 border-muted border-t-accent" />
-        )}
-      </div>
-    );
-  },
-);
-SearchInput.displayName = "SearchInput";

package/src/components/ui/section-card.tsx

@@ -1,85 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-/* ── SectionCard ─────────────────────────────────────────────────────── */
-
-export interface SectionCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Section title shown in the header */
-  title?: string;
-  /** Optional description below the title */
-  description?: string;
-  /** Optional actions (buttons, badges) aligned to the right of the header */
-  actions?: React.ReactNode;
-  /** Whether the section is collapsible */
-  collapsible?: boolean;
-  /** Default collapsed state (only when collapsible) */
-  defaultCollapsed?: boolean;
-}
-
-export const SectionCard = React.forwardRef<HTMLDivElement, SectionCardProps>(
-  (
-    {
-      title,
-      description,
-      actions,
-      collapsible = false,
-      defaultCollapsed = false,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
-
-    return (
-      <div
-        ref={ref}
-        className={cn("border border-border bg-card text-card-fg", className)}
-        {...props}
-      >
-        {(title || actions) && (
-          <div className="flex items-center justify-between border-b border-border px-4 py-4">
-            <div className="flex flex-col gap-1.5">
-              {title && (
-                <button
-                  type="button"
-                  className={cn(
-                    "text-sm font-semibold text-left",
-                    collapsible &&
-                      "cursor-pointer hover:text-accent transition-colors",
-                    !collapsible && "cursor-default",
-                  )}
-                  onClick={
-                    collapsible ? () => setCollapsed((c) => !c) : undefined
-                  }
-                  tabIndex={collapsible ? 0 : -1}
-                >
-                  {collapsible && (
-                    <span
-                      className={cn(
-                        "mr-1.5 inline-block text-[10px] text-muted transition-transform",
-                        !collapsed && "rotate-90",
-                      )}
-                    >
-                      ▶
-                    </span>
-                  )}
-                  {title}
-                </button>
-              )}
-              {description && (
-                <span className="text-[11px] text-muted">{description}</span>
-              )}
-            </div>
-            {actions && (
-              <div className="flex items-center gap-2">{actions}</div>
-            )}
-          </div>
-        )}
-        {(!collapsible || !collapsed) && <div className="p-4">{children}</div>}
-      </div>
-    );
-  },
-);
-SectionCard.displayName = "SectionCard";

package/src/components/ui/select.tsx

@@ -1,158 +0,0 @@
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-bg px-3 py-2 text-sm ring-offset-bg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card 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",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none 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">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-};

package/src/components/ui/separator.tsx

@@ -1,29 +0,0 @@
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };

package/src/components/ui/skeleton.tsx

@@ -1,115 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Skeleton = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("animate-pulse rounded-md bg-secondary", className)}
-    {...props}
-  />
-));
-Skeleton.displayName = "Skeleton";
-
-/* ── Skeleton Variants ───────────────────────────────────────────────── */
-
-function SkeletonLine({
-  width = "100%",
-  className = "",
-}: {
-  width?: string;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn("h-4 animate-pulse rounded bg-bg-accent", className)}
-      style={{ width }}
-    />
-  );
-}
-
-function SkeletonText({ lines = 3 }: { lines?: number }) {
-  return (
-    <div className="space-y-2">
-      {Array.from({ length: lines }, (_, i) => i).map((lineIndex) => (
-        <SkeletonLine
-          key={lineIndex}
-          width={lineIndex === lines - 1 ? "60%" : "100%"}
-        />
-      ))}
-    </div>
-  );
-}
-
-function SkeletonMessage({ isUser = false }: { isUser?: boolean }) {
-  return (
-    <div
-      className={cn(
-        "flex items-start gap-3 mt-4",
-        isUser ? "justify-end" : "justify-start",
-      )}
-    >
-      {!isUser && (
-        <div className="h-8 w-8 shrink-0 animate-pulse rounded-full bg-bg-accent" />
-      )}
-      <div className={cn("max-w-[80%] space-y-2", isUser && "items-end")}>
-        <div className="h-3 w-20 animate-pulse rounded bg-bg-accent" />
-        <div className="min-w-[200px] animate-pulse rounded-2xl bg-bg-accent px-4 py-3">
-          <SkeletonText lines={2} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function SkeletonCard() {
-  return (
-    <div className="space-y-4 rounded-lg border border-border bg-card p-4">
-      <div className="flex items-center gap-3">
-        <div className="h-10 w-10 animate-pulse rounded-lg bg-bg-accent" />
-        <div className="flex-1 space-y-2">
-          <SkeletonLine width="40%" />
-          <SkeletonLine width="60%" />
-        </div>
-      </div>
-      <SkeletonText lines={3} />
-    </div>
-  );
-}
-
-function SkeletonSidebar() {
-  return (
-    <div className="w-64 space-y-2 p-4">
-      <div className="mb-6 h-8 w-32 animate-pulse rounded bg-bg-accent" />
-      {Array.from({ length: 6 }, (_, idx) => idx).map((i) => (
-        <div key={i} className="flex items-center gap-3 p-2">
-          <div className="h-5 w-5 animate-pulse rounded bg-bg-accent" />
-          <div className="h-4 flex-1 animate-pulse rounded bg-bg-accent" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function SkeletonChat() {
-  return (
-    <div className="space-y-2 p-4">
-      <SkeletonMessage />
-      <SkeletonMessage isUser />
-      <SkeletonMessage />
-    </div>
-  );
-}
-
-export {
-  Skeleton,
-  SkeletonCard,
-  SkeletonChat,
-  SkeletonLine,
-  SkeletonMessage,
-  SkeletonSidebar,
-  SkeletonText,
-};