@sero-ai/ui 0.3.0 → 0.3.2

package/dist/lib/utils.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _clsx = require('clsx');
+var _tailwindmerge = require('tailwind-merge');
+function cn(...inputs) {
+  return _tailwindmerge.twMerge.call(void 0, _clsx.clsx.call(void 0, inputs));
+}
+
+
+exports.cn = cn;

package/dist/lib/utils.d.cts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/utils.js

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};

package/dist/styles/globals.css

@@ -0,0 +1,438 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+/* Ensure monorepo consumers that @import this file also scan @sero-ai/ui
+   component sources for Tailwind utility classes. Without this, complex
+   classes like has-[>[data-align=block-end]]:flex-col won't be generated. */
+@source "../components";
+
+@custom-variant dark (&:is(.dark *));
+
+/* ── Sero Design System ──────────────────────────────────────── */
+
+:root {
+  /* Surface colors (light) */
+  --bg-base: #ffffff;
+  --bg-surface: #f4f5f7;
+  --bg-elevated: #eaecf0;
+  --bg-overlay: #dde0e6;
+  --bg-muted: #c8ccd4;
+
+  /* Border (light) */
+  --border-subtle: #d4d8e0;
+  --border-default: #bcc1cc;
+  --border-focus: #059669;
+
+  /* Text (light) */
+  --text-primary: #0f1117;
+  --text-secondary: #3b4252;
+  --text-muted: #6b7280;
+  --text-inverse: #fafafa;
+
+  /* Brand colours — product identity, actions, active UI */
+  --brand-primary: #059669;
+  --brand-primary-hover: #047857;
+  --brand-primary-foreground: #ffffff;
+  --brand-primary-muted: color-mix(in srgb, var(--brand-primary) 10%, transparent);
+  --brand-primary-subtle: color-mix(in srgb, var(--brand-primary) 15%, transparent);
+  --brand-primary-faint: color-mix(in srgb, var(--brand-primary) 3%, transparent);
+  --brand-primary-border: color-mix(in srgb, var(--brand-primary) 20%, transparent);
+  --brand-secondary: #7c3aed;
+  --brand-secondary-hover: #6d28d9;
+  --brand-secondary-foreground: #ffffff;
+  --brand-secondary-muted: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
+  --brand-secondary-subtle: color-mix(in srgb, var(--brand-secondary) 15%, transparent);
+  --brand-secondary-faint: color-mix(in srgb, var(--brand-secondary) 3%, transparent);
+  --brand-secondary-border: color-mix(in srgb, var(--brand-secondary) 20%, transparent);
+
+  /* Legacy accent / syntax accent */
+  --accent-primary: var(--brand-secondary);
+  --accent-hover: var(--brand-secondary-hover);
+  --accent-muted: var(--brand-secondary-muted);
+  --accent-code: #7c3aed;
+
+  /* Status — solid */
+  --status-success: #16a34a;
+  --status-warning: #d97706;
+  --status-error: #dc2626;
+  --status-info: #2563eb;
+
+  /* Status — muted backgrounds (low-opacity tints) */
+  --status-success-muted: rgba(22, 163, 74, 0.10);
+  --status-warning-muted: rgba(217, 119, 6, 0.10);
+  --status-error-muted: rgba(220, 38, 38, 0.10);
+  --status-info-muted: rgba(37, 99, 235, 0.10);
+
+  /* Status — subtle (slightly stronger tint for borders, badges) */
+  --status-success-subtle: rgba(22, 163, 74, 0.15);
+  --status-warning-subtle: rgba(217, 119, 6, 0.15);
+  --status-error-subtle: rgba(220, 38, 38, 0.15);
+  --status-info-subtle: rgba(37, 99, 235, 0.15);
+
+  /* Status — faint (near-invisible tint for full-area backgrounds) */
+  --status-success-faint: rgba(22, 163, 74, 0.03);
+  --status-warning-faint: rgba(217, 119, 6, 0.03);
+  --status-error-faint: rgba(220, 38, 38, 0.03);
+  --status-info-faint: rgba(37, 99, 235, 0.03);
+
+  /* Status — border (20% opacity for bordered containers) */
+  --status-success-border: rgba(22, 163, 74, 0.20);
+  --status-warning-border: rgba(217, 119, 6, 0.20);
+  --status-error-border: rgba(220, 38, 38, 0.20);
+  --status-info-border: rgba(37, 99, 235, 0.20);
+
+  /* Semantic colours — collaboration / special modes */
+  --collab-primary: #7c3aed;
+  --collab-primary-muted: rgba(124, 58, 237, 0.10);
+  --collab-primary-subtle: rgba(124, 58, 237, 0.15);
+  --collab-primary-border: rgba(124, 58, 237, 0.20);
+
+  /* Semantic colours — voice / recording */
+  --voice-recording: #f43f5e;
+  --voice-recording-muted: rgba(244, 63, 94, 0.20);
+  --voice-processing: #06b6d4;
+  --voice-processing-muted: rgba(6, 182, 212, 0.15);
+
+  /* Semantic colours — indigo accent for notifications/banners */
+  --banner-primary: var(--brand-secondary);
+  --banner-primary-muted: color-mix(in srgb, var(--banner-primary) 10%, transparent);
+  --banner-primary-subtle: color-mix(in srgb, var(--banner-primary) 15%, transparent);
+  --banner-primary-border: color-mix(in srgb, var(--banner-primary) 20%, transparent);
+
+  /* Thinking / reasoning gradients */
+  --gradient-thinking-high: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(239, 68, 68, 0.20));
+  --gradient-thinking-low: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(139, 92, 246, 0.20));
+
+  /* File type icon colours */
+  --file-icon-ts: #3b82f6;
+  --file-icon-js: #eab308;
+  --file-icon-json: #22c55e;
+  --file-icon-css: #6366f1;
+  --file-icon-rust: #f97316;
+  --file-icon-markdown: #6366f1;
+  --file-icon-default: var(--text-muted);
+
+  /* Typography (themeable) */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
+  --font-size-base: 14px;
+
+  /* Spacing */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 12px;
+  --space-lg: 16px;
+  --space-xl: 24px;
+
+  /* Sero radius (legacy — use Tailwind rounded-* for new components) */
+  --sero-radius-sm: 4px;
+  --sero-radius-md: 8px;
+  --sero-radius-lg: 12px;
+
+  /* Sero font sizes (legacy — use Tailwind text-* for new components) */
+  --sero-text-xs: 12px;
+  --sero-text-sm: 13px;
+  --sero-text-base: 14px;
+  --sero-text-lg: 15px;
+  --sero-text-xl: 16px;
+
+  /* Transition */
+  --transition-fast: 120ms ease;
+  --transition-normal: 200ms ease;
+  --radius: 0.625rem;
+
+  /* ── shadcn bridge ────────────────────────────────────────
+     Derive shadcn/ui tokens from Sero design tokens so every
+     shadcn component (Dialog, Command, Dropdown, Tooltip, …)
+     automatically follows theme changes.
+     NOTE: --accent here is the shadcn "hover/selection bg",
+     NOT a brand colour (use --brand-primary/secondary). */
+  --background: var(--bg-base);
+  --foreground: var(--text-primary);
+  --card: var(--bg-surface);
+  --card-foreground: var(--text-primary);
+  --popover: var(--bg-elevated);
+  --popover-foreground: var(--text-primary);
+  --primary: var(--brand-primary);
+  --primary-foreground: var(--brand-primary-foreground);
+  --secondary: var(--bg-surface);
+  --secondary-foreground: var(--text-primary);
+  --muted: var(--bg-muted);
+  --muted-foreground: var(--text-muted);
+  --accent: var(--bg-overlay);
+  --accent-foreground: var(--text-primary);
+  --destructive: var(--status-error);
+  --border: var(--border-default);
+  --input: var(--border-subtle);
+  --ring: var(--border-focus);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: var(--bg-surface);
+  --sidebar-foreground: var(--text-primary);
+  --sidebar-primary: var(--brand-primary);
+  --sidebar-primary-foreground: var(--brand-primary-foreground);
+  --sidebar-accent: var(--bg-elevated);
+  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-border: var(--border-subtle);
+  --sidebar-ring: var(--border-focus);
+}
+
+/* ── Scrollbars ─────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-default);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* ── Selection ──────────────────────────────────────────────── */
+::selection {
+  background: var(--accent-muted);
+  color: var(--text-primary);
+}
+
+/* ── Focus ──────────────────────────────────────────────────── */
+/* Scoped to avoid conflicting with shadcn/Radix components which
+   manage their own focus rings via Tailwind ring utilities. */
+:focus-visible:not([data-slot]) {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-brand-primary: var(--brand-primary);
+  --color-brand-primary-foreground: var(--brand-primary-foreground);
+  --color-brand-primary-muted: var(--brand-primary-muted);
+  --color-brand-primary-subtle: var(--brand-primary-subtle);
+  --color-brand-primary-faint: var(--brand-primary-faint);
+  --color-brand-primary-border: var(--brand-primary-border);
+  --color-brand-secondary: var(--brand-secondary);
+  --color-brand-secondary-foreground: var(--brand-secondary-foreground);
+  --color-brand-secondary-muted: var(--brand-secondary-muted);
+  --color-brand-secondary-subtle: var(--brand-secondary-subtle);
+  --color-brand-secondary-faint: var(--brand-secondary-faint);
+  --color-brand-secondary-border: var(--brand-secondary-border);
+  --color-status-success: var(--status-success);
+  --color-status-success-muted: var(--status-success-muted);
+  --color-status-success-subtle: var(--status-success-subtle);
+  --color-status-success-faint: var(--status-success-faint);
+  --color-status-success-border: var(--status-success-border);
+  --color-status-warning: var(--status-warning);
+  --color-status-warning-muted: var(--status-warning-muted);
+  --color-status-warning-subtle: var(--status-warning-subtle);
+  --color-status-warning-faint: var(--status-warning-faint);
+  --color-status-warning-border: var(--status-warning-border);
+  --color-status-error: var(--status-error);
+  --color-status-error-muted: var(--status-error-muted);
+  --color-status-error-subtle: var(--status-error-subtle);
+  --color-status-error-faint: var(--status-error-faint);
+  --color-status-error-border: var(--status-error-border);
+  --color-status-info: var(--status-info);
+  --color-status-info-muted: var(--status-info-muted);
+  --color-status-info-subtle: var(--status-info-subtle);
+  --color-status-info-faint: var(--status-info-faint);
+  --color-status-info-border: var(--status-info-border);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.dark {
+  /* Surface colors (dark) */
+  --bg-base: #0a0a0b;
+  --bg-surface: #111113;
+  --bg-elevated: #18181b;
+  --bg-overlay: #1f1f23;
+  --bg-muted: #27272a;
+
+  /* Border (dark) */
+  --border-subtle: #27272a;
+  --border-default: #3f3f46;
+  --border-focus: #34d399;
+
+  /* Text (dark) */
+  --text-primary: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-muted: #71717a;
+  --text-inverse: #09090b;
+
+  /* Brand colours (dark) */
+  --brand-primary: #34d399;
+  --brand-primary-hover: #6ee7b7;
+  --brand-primary-foreground: #052e1c;
+  --brand-primary-muted: color-mix(in srgb, var(--brand-primary) 10%, transparent);
+  --brand-primary-subtle: color-mix(in srgb, var(--brand-primary) 15%, transparent);
+  --brand-primary-faint: color-mix(in srgb, var(--brand-primary) 3%, transparent);
+  --brand-primary-border: color-mix(in srgb, var(--brand-primary) 20%, transparent);
+  --brand-secondary: #c4b5fd;
+  --brand-secondary-hover: #ddd6fe;
+  --brand-secondary-foreground: #1e1038;
+  --brand-secondary-muted: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
+  --brand-secondary-subtle: color-mix(in srgb, var(--brand-secondary) 15%, transparent);
+  --brand-secondary-faint: color-mix(in srgb, var(--brand-secondary) 3%, transparent);
+  --brand-secondary-border: color-mix(in srgb, var(--brand-secondary) 20%, transparent);
+
+  /* Legacy accent / syntax accent (dark) */
+  --accent-primary: var(--brand-secondary);
+  --accent-hover: var(--brand-secondary-hover);
+  --accent-muted: var(--brand-secondary-muted);
+  --accent-code: #c4b5fd;
+
+  /* Status — solid (dark) */
+  --status-success: #22c55e;
+  --status-warning: #f59e0b;
+  --status-error: #ef4444;
+  --status-info: #3b82f6;
+
+  /* Status — muted backgrounds (dark) */
+  --status-success-muted: rgba(34, 197, 94, 0.10);
+  --status-warning-muted: rgba(245, 158, 11, 0.10);
+  --status-error-muted: rgba(239, 68, 68, 0.10);
+  --status-info-muted: rgba(59, 130, 246, 0.10);
+
+  /* Status — subtle (dark) */
+  --status-success-subtle: rgba(34, 197, 94, 0.15);
+  --status-warning-subtle: rgba(245, 158, 11, 0.15);
+  --status-error-subtle: rgba(239, 68, 68, 0.15);
+  --status-info-subtle: rgba(59, 130, 246, 0.15);
+
+  /* Status — faint (dark) */
+  --status-success-faint: rgba(34, 197, 94, 0.03);
+  --status-warning-faint: rgba(245, 158, 11, 0.03);
+  --status-error-faint: rgba(239, 68, 68, 0.03);
+  --status-info-faint: rgba(59, 130, 246, 0.03);
+
+  /* Status — border (dark) */
+  --status-success-border: rgba(34, 197, 94, 0.20);
+  --status-warning-border: rgba(245, 158, 11, 0.20);
+  --status-error-border: rgba(239, 68, 68, 0.20);
+  --status-info-border: rgba(59, 130, 246, 0.20);
+
+  /* Collaboration (dark) */
+  --collab-primary: #a78bfa;
+  --collab-primary-muted: rgba(167, 139, 250, 0.10);
+  --collab-primary-subtle: rgba(167, 139, 250, 0.15);
+  --collab-primary-border: rgba(167, 139, 250, 0.20);
+
+  /* Voice (dark) */
+  --voice-recording: #fb7185;
+  --voice-recording-muted: rgba(251, 113, 133, 0.20);
+  --voice-processing: #22d3ee;
+  --voice-processing-muted: rgba(34, 211, 238, 0.15);
+
+  /* Banner / notifications (dark) */
+  --banner-primary: var(--brand-secondary);
+  --banner-primary-muted: color-mix(in srgb, var(--banner-primary) 10%, transparent);
+  --banner-primary-subtle: color-mix(in srgb, var(--banner-primary) 15%, transparent);
+  --banner-primary-border: color-mix(in srgb, var(--banner-primary) 20%, transparent);
+
+  /* Thinking gradients (dark) */
+  --gradient-thinking-high: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(239, 68, 68, 0.20));
+  --gradient-thinking-low: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(139, 92, 246, 0.20));
+
+  /* File type icons (dark — brighter variants) */
+  --file-icon-ts: #60a5fa;
+  --file-icon-js: #facc15;
+  --file-icon-json: #4ade80;
+  --file-icon-css: #818cf8;
+  --file-icon-rust: #fb923c;
+  --file-icon-markdown: #818cf8;
+
+  /* ── shadcn bridge (identical structure to :root — resolves
+       to dark Sero tokens defined above in this block) ────── */
+  --background: var(--bg-base);
+  --foreground: var(--text-primary);
+  --card: var(--bg-surface);
+  --card-foreground: var(--text-primary);
+  --popover: var(--bg-elevated);
+  --popover-foreground: var(--text-primary);
+  --primary: var(--brand-primary);
+  --primary-foreground: var(--brand-primary-foreground);
+  --secondary: var(--bg-surface);
+  --secondary-foreground: var(--text-primary);
+  --muted: var(--bg-muted);
+  --muted-foreground: var(--text-muted);
+  --accent: var(--bg-overlay);
+  --accent-foreground: var(--text-primary);
+  --destructive: var(--status-error);
+  --border: var(--border-default);
+  --input: var(--border-subtle);
+  --ring: var(--border-focus);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: var(--bg-surface);
+  --sidebar-foreground: var(--text-primary);
+  --sidebar-primary: var(--brand-primary);
+  --sidebar-primary-foreground: var(--brand-primary-foreground);
+  --sidebar-accent: var(--bg-elevated);
+  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-border: var(--border-subtle);
+  --sidebar-ring: var(--border-focus);
+}
+
+html {
+  font-size: var(--font-size-base, 14px);
+  font-family: var(--font-sans);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/styles/plugin.css

@@ -0,0 +1,4 @@
+@import "./globals.css";
+
+/* Federated Sero plugins should import this file, then add plugin-local
+   @source directives. It keeps Tailwind 4 token names aligned with the shell. */