@elizaos/ui 2.0.0-alpha.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shaw Walters and elizaOS Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,6 @@
+# @elizaos/ui
+
+Reusable React UI primitives for ElizaOS applications.
+
+This package contains shared buttons, inputs, dialogs, badges, layout helpers,
+and related component utilities used by app shells built on top of ElizaOS.

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@elizaos/ui",
+  "version": "2.0.0-alpha.10",
+  "description": "Reusable UI primitives and components for elizaOS applications.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "homepage": "https://elizaos.ai",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elizaos/eliza.git",
+    "directory": "packages/ui"
+  },
+  "keywords": [
+    "elizaos",
+    "ui",
+    "react",
+    "components"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist && find src -type f \\( -name '*.js' -o -name '*.d.ts' -o -name '*.d.ts.map' -o -name '*.js.map' \\) -delete",
+    "build": "bun run build:dist",
+    "build:dist": "find src -type f \\( -name '*.js' -o -name '*.d.ts' -o -name '*.d.ts.map' -o -name '*.js.map' \\) -delete && rm -rf dist && tsc -p tsconfig.build.json && find src -type f \\( -name '*.js' -o -name '*.d.ts' -o -name '*.d.ts.map' -o -name '*.js.map' \\) -delete && node ../../scripts/copy-package-assets.mjs packages/ui src/styles && node ../../scripts/prepare-package-dist.mjs packages/ui",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "lint": "bunx @biomejs/biome check --write ./src/index.ts ./src/lib ./src/components ./src/stories",
+    "lint:check": "bunx @biomejs/biome check ./src/index.ts ./src/lib ./src/components ./src/stories",
+    "pack:dry-run": "cd dist && npm pack --dry-run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
+    "./styles/theme.css": "./src/styles/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/styles/theme.css",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "next-themes": "^0.4.6",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^2.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/blocks": "8.6.14",
+    "@storybook/react": "8.6.14",
+    "@storybook/react-vite": "8.6.14",
+    "@storybook/test": "8.6.14",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "storybook": "8.6.17",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "author": "elizaOS Team",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "gitHead": "f77b9c9a2906a357415ad9d687ebc75bcf93926d"
+}

package/src/styles/theme.css

@@ -0,0 +1,193 @@
+@theme default {
+  --color-bg: var(--bg);
+  --color-bg-accent: var(--bg-accent);
+  --color-bg-elevated: var(--bg-elevated);
+  --color-bg-hover: var(--bg-hover);
+  --color-bg-muted: var(--bg-muted);
+
+  --color-card: var(--card);
+  --color-card-fg: var(--card-foreground);
+  --color-surface: var(--surface);
+
+  --color-txt: var(--text);
+  --color-txt-strong: var(--text-strong);
+  --color-txt-chat: var(--chat-text);
+  --color-muted: var(--muted);
+  --color-muted-strong: var(--muted-strong);
+
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-border-hover: var(--border-hover);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-muted: var(--accent-muted);
+  --color-accent-subtle: var(--accent-subtle);
+  --color-accent-fg: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-fg: var(--primary-foreground);
+
+  --color-ok: var(--ok);
+  --color-ok-muted: var(--ok-muted);
+  --color-ok-subtle: var(--ok-subtle);
+  --color-warn: var(--warn);
+  --color-warn-muted: var(--warn-muted);
+  --color-warn-subtle: var(--warn-subtle);
+  --color-danger: var(--danger);
+  --color-destructive: var(--destructive);
+  --color-destructive-fg: var(--destructive-foreground);
+  --color-destructive-subtle: var(--destructive-subtle);
+
+  --color-header-bg: var(--header-bar-bg);
+  --color-header-fg: var(--header-bar-fg);
+
+  --font-body: var(--font-body);
+  --font-mono: var(--mono);
+  --font-display: var(--font-display);
+
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+}
+
+@layer base {
+  :root {
+    --bg: #ffffff;
+    --bg-accent: #faf7ec;
+    --bg-elevated: #fffdf6;
+    --bg-hover: #f8f1d7;
+    --bg-muted: #fcf9ef;
+
+    --card: #fffdf6;
+    --card-foreground: #1e2329;
+    --surface: #ffffff;
+
+    --text: #1e2329;
+    --text-strong: #11161c;
+    --chat-text: #1e2329;
+    --muted: #6d737a;
+    --muted-strong: #4d535a;
+
+    --border: #d6d3c6;
+    --border-strong: #b8b29f;
+    --border-hover: #f0b90b;
+    --input: #d6d3c6;
+    --ring: #f0b90b;
+
+    --accent: #f0b90b;
+    --accent-hover: #d8a108;
+    --accent-muted: #d8a108;
+    --accent-subtle: rgba(240, 185, 11, 0.12);
+    --accent-foreground: #1a1f26;
+    --primary: #f0b90b;
+    --primary-foreground: #1a1f26;
+
+    --ok: #02c076;
+    --ok-muted: rgba(2, 192, 118, 0.7);
+    --ok-subtle: rgba(2, 192, 118, 0.12);
+    --destructive: #f6465d;
+    --destructive-foreground: #ffffff;
+    --destructive-subtle: rgba(246, 70, 93, 0.12);
+    --warn: #f0b90b;
+    --warn-muted: rgba(240, 185, 11, 0.7);
+    --warn-subtle: rgba(240, 185, 11, 0.12);
+    --danger: #f6465d;
+
+    --focus: rgba(240, 185, 11, 0.18);
+    --focus-ring: 0 0 0 2px #f0b90b;
+
+    --header-bar-bg: #fff8dc;
+    --header-bar-fg: #1e2329;
+
+    --mono: "Courier New", Courier, monospace;
+    --font-body:
+      "Hiragino Kaku Gothic Pro", Osaka, Meiryo, "MS PGothic", arial, helvetica,
+      clean, sans-serif;
+    --font-display:
+      "Hiragino Kaku Gothic Pro", Osaka, Meiryo, "MS PGothic", arial, helvetica,
+      clean, sans-serif;
+
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md:
+      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg:
+      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-full: 9999px;
+    --radius: 0.5rem;
+
+    --duration-fast: 100ms;
+    --duration-normal: 150ms;
+    --duration-slow: 250ms;
+
+    color-scheme: light;
+  }
+
+  .dark {
+    --bg: hsl(220 16% 12%);
+    --bg-accent: hsl(220 14% 16%);
+    --bg-elevated: hsl(220 14% 10%);
+    --bg-hover: hsl(220 12% 20%);
+    --bg-muted: hsl(220 12% 20%);
+
+    --card: hsl(220 14% 14%);
+    --card-foreground: hsl(40 10% 94%);
+    --surface: hsl(220 14% 14%);
+
+    --text: hsl(40 10% 84%);
+    --text-strong: hsl(40 10% 96%);
+    --chat-text: hsl(40 10% 84%);
+    --muted: hsl(220 8% 56%);
+    --muted-strong: hsl(220 6% 68%);
+
+    --border: hsl(220 12% 22%);
+    --border-strong: hsl(220 10% 30%);
+    --border-hover: #f0b90b;
+    --input: hsl(220 12% 22%);
+    --ring: #f0b90b;
+
+    --accent: #f0b90b;
+    --accent-hover: #d8a108;
+    --accent-muted: #d8a108;
+    --accent-subtle: rgba(240, 185, 11, 0.12);
+    --accent-foreground: #1a1f26;
+    --primary: #f0b90b;
+    --primary-foreground: #1a1f26;
+
+    --ok: hsl(142 76% 36%);
+    --ok-muted: hsla(142 76% 36% / 0.7);
+    --ok-subtle: hsla(142 76% 36% / 0.1);
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 100%);
+    --destructive-subtle: hsla(0 84% 60% / 0.1);
+    --warn: #f0b90b;
+    --warn-muted: rgba(240, 185, 11, 0.7);
+    --warn-subtle: rgba(240, 185, 11, 0.12);
+    --danger: hsl(0 84.2% 60.2%);
+
+    --focus: rgba(240, 185, 11, 0.2);
+    --focus-ring: 0 0 0 2px rgba(240, 185, 11, 0.5);
+
+    --header-bar-bg: hsl(220 16% 12%);
+    --header-bar-fg: hsl(40 10% 96%);
+
+    --mono: "Courier New", Courier, monospace;
+    --font-body:
+      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
+    --font-display:
+      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
+
+    color-scheme: dark;
+  }
+}