@elizaos/ui 2.0.0-alpha.81 → 2.0.0-alpha.83

package/components/ui/button.js

@@ -6,11 +6,11 @@ import { cn } from "../../lib/utils";
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium 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 cursor-pointer [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
     variants: {
         variant: {
-            default: "bg-primary text-[var(--primary-foreground,#1a1f26)] border border-transparent hover:border-[var(--accent-hover,#d8a108)] hover:shadow-[0_0_0_1px_var(--accent-hover,#d8a108)]",
+            default: "bg-accent/15 text-txt border border-accent/40 hover:bg-accent/25 hover:border-accent/60",
             destructive: "bg-destructive text-destructive-fg border border-transparent hover:border-destructive/70 hover:shadow-[0_0_0_1px_rgba(239,68,68,0.3)]",
-            outline: "border border-input bg-bg hover:border-[var(--accent,#f0b90b)] hover:shadow-[0_0_0_1px_var(--accent,#f0b90b)]",
-            secondary: "bg-secondary text-secondary-fg border border-transparent hover:border-secondary/70",
-            ghost: "hover:bg-bg-accent hover:text-accent-fg",
+            outline: "border border-border bg-card hover:border-border-strong hover:bg-bg-hover",
+            secondary: "bg-bg-accent text-txt border border-border hover:border-border-strong hover:bg-bg-hover",
+            ghost: "hover:bg-bg-accent hover:text-txt",
             link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
@@ -29,7 +29,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, st
     const Comp = asChild ? Slot : "button";
     const isDefault = variant === "default" || variant === undefined;
     const resolvedStyle = isDefault && !style?.color
-        ? { ...style, color: "var(--primary-foreground, #1a1f26)" }
+        ? { ...style, color: "var(--primary-foreground)" }
         : style;
     return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, style: resolvedStyle, ...props }));
 });

package/components/ui/dialog.js

@@ -9,7 +9,7 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(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(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(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: [children, _jsxs(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", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(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: [children, _jsxs(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-accent-fg", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";

package/components/ui/dropdown-menu.js

@@ -9,7 +9,7 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(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: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(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 focus:text-accent-fg data-[state=open]:bg-accent data-[state=open]:text-accent-fg", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(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 })));

package/components/ui/skeleton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-const Skeleton = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("animate-pulse rounded-md bg-secondary", className), ...props })));
+const Skeleton = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("animate-pulse rounded-md bg-bg-accent", className), ...props })));
 Skeleton.displayName = "Skeleton";
 /* ── Skeleton Variants ───────────────────────────────────────────────── */
 function SkeletonLine({ width = "100%", className = "", }) {

package/components/ui/slider.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), _jsx(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" })] })));
+const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-input", children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), _jsx(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" })] })));
 Slider.displayName = SliderPrimitive.Root.displayName;
 export { Slider };

package/components/ui/sonner.js

@@ -8,7 +8,7 @@ const Toaster = ({ ...props }) => {
                 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",
+                cancelButton: "group-[.toast]:bg-bg-accent group-[.toast]:text-muted",
             },
         }, ...props }));
 };

package/components/ui/tabs.js

@@ -3,7 +3,7 @@ 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(({ className, ...props }, ref) => (_jsx(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 })));
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-10 items-center justify-center rounded-md bg-bg-accent p-1 text-muted", className), ...props })));
 TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(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;

package/components/ui/themed-select.js

@@ -45,11 +45,11 @@ export function ThemedSelect({ value, groups, onChange, placeholder = "select...
     const menuStyle = menuPlacement === "top"
         ? { bottom: "calc(100% + 0.125rem)" }
         : { top: "calc(100% + 0.125rem)" };
-    return (_jsxs("div", { ref: ref, className: `relative min-w-0 w-full ${open ? "z-[100]" : ""} ${className}`, children: [_jsxs(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), children: [_jsx("span", { className: "truncate", children: currentLabel }), _jsx("span", { className: `ml-2 text-[10px] text-muted transition-transform ${open ? "rotate-180" : ""}`, children: "\u25BC" })] }), open && (_jsx("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, children: groups.map((g) => (_jsxs("div", { children: [_jsx("div", { className: "px-2.5 py-1 text-[10px] font-semibold text-muted bg-bg-muted sticky top-0", children: g.label }), g.items.map((item) => {
+    return (_jsxs("div", { ref: ref, className: `relative min-w-0 w-full ${open ? "z-[100]" : ""} ${className}`, children: [_jsxs(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), children: [_jsx("span", { className: "truncate", children: currentLabel }), _jsx("span", { className: `ml-2 text-[10px] text-muted transition-transform ${open ? "rotate-180" : ""}`, children: "\u25BC" })] }), open && (_jsx("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, children: groups.map((g) => (_jsxs("div", { children: [_jsx("div", { className: "px-2.5 py-1 text-[10px] font-semibold text-muted bg-bg-accent sticky top-0", children: g.label }), g.items.map((item) => {
                             const active = item.id === value;
                             return (_jsxs(Button, { 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: () => {
+                                    ? "bg-accent/20 text-accent"
+                                    : "text-txt hover:bg-accent/10 hover:text-txt"}`, onClick: () => {
                                     onChange(item.id);
                                     setOpen(false);
                                 }, children: [_jsx("span", { className: "font-semibold", children: item.text }), item.hint && (_jsx("span", { className: `ml-1.5 ${active ? "opacity-70" : "text-muted"}`, children: item.hint }))] }, item.id));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elizaos/ui",
-  "version": "2.0.0-alpha.81",
+  "version": "2.0.0-alpha.83",
   "description": "Reusable UI primitives and components for Milady applications.",
   "type": "module",
   "main": "./index.js",

package/styles/theme.css

@@ -21,6 +21,10 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
 
+  --color-secondary: var(--bg-accent);
+  --color-secondary-fg: var(--text);
+  --color-muted-fg: var(--muted);
+
   --color-accent: var(--accent);
   --color-accent-hover: var(--accent-hover);
   --color-accent-muted: var(--accent-muted);