@lastbrain/ai-ui-react 1.0.67 → 1.0.69

package/src/examples/AiUiPremiumShowcase.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Sparkles } from "lucide-react";
+import { AiProvider } from "../context/AiProvider";
+import { AiInput } from "../components/AiInput";
+import { AiTextarea } from "../components/AiTextarea";
+import { AiChipLabel } from "../components/AiChipLabel";
+
+function ShowcasePanel({
+  title,
+  theme,
+}: {
+  title: string;
+  theme: "light" | "dark";
+}) {
+  return (
+    <section
+      data-theme={theme}
+      className={`rounded-2xl border p-6 ${
+        theme === "dark"
+          ? "bg-slate-950 border-slate-800 text-slate-100"
+          : "bg-white border-slate-200 text-slate-900"
+      }`}
+    >
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-base font-semibold">{title}</h3>
+        <span className="text-xs opacity-70">{theme}</span>
+      </div>
+
+      <AiProvider baseUrl="/api/ai" apiKeyId="demo-key">
+        <div className="space-y-4">
+          <AiInput
+            value=""
+            onChange={() => {}}
+            placeholder="Ask anything..."
+            data-testid={`showcase-input-${theme}`}
+          />
+
+          <AiTextarea
+            value=""
+            onChange={() => {}}
+            placeholder="Generate a concise product description..."
+            data-testid={`showcase-textarea-${theme}`}
+          />
+
+          <div className="flex flex-wrap gap-2">
+            <AiChipLabel>Default</AiChipLabel>
+            <AiChipLabel variant="selected">Selected</AiChipLabel>
+            <AiChipLabel variant="success">Success</AiChipLabel>
+            <AiChipLabel variant="danger">Danger</AiChipLabel>
+          </div>
+
+          <div className="ai-surface p-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Static control states</span>
+              <Sparkles size={14} className="text-[var(--ai-primary)]" />
+            </div>
+            <div className="mt-3 space-y-2">
+              <input className="ai-control ai-control-input" placeholder="Default state" />
+              <input
+                className="ai-control ai-control-input ai-control--focused"
+                placeholder="Focused style"
+                readOnly
+              />
+              <input
+                className="ai-control ai-control-input ai-control--error"
+                aria-invalid="true"
+                placeholder="Error style"
+                readOnly
+              />
+              <input
+                className="ai-control ai-control-input ai-control--disabled"
+                placeholder="Disabled style"
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+      </AiProvider>
+    </section>
+  );
+}
+
+export function AiUiPremiumShowcase() {
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      <ShowcasePanel title="Premium UI Showcase" theme="dark" />
+      <ShowcasePanel title="Premium UI Showcase" theme="light" />
+    </div>
+  );
+}

package/src/index.ts

@@ -1,3 +1,5 @@
+import "./styles.css";
+
 // Types
 export * from "./types";
 
@@ -45,3 +47,4 @@ export * from "./examples/AiPromptPanelAdvanced";
 export * from "./examples/AiChipInputExample";
 export * from "./examples/AiImageButtonExample";
 export * from "./examples/AiContextButtonExample";
+export * from "./examples/AiUiPremiumShowcase";

package/src/styles/inline.ts

@@ -3,6 +3,8 @@
  * Theme: Purple/Violet primary color with light/dark mode support
  */
 
+import type React from "react";
+
 // Theme colors
 const colors = {
   // Purple/Violet theme
@@ -18,114 +20,23 @@ const colors = {
   warningLight: "#fbbf24",
   danger: "#ef4444",
   dangerLight: "#f87171",
-
-  // Neutral colors - Light mode
-  light: {
-    bg: "#ffffff",
-    bgSecondary: "#f9fafb",
-    bgTertiary: "#f3f4f6",
-    border: "#e2e8f0",
-    borderLight: "#f1f5f9",
-    text: "#111827",
-    textSecondary: "#6b7280",
-    textTertiary: "#9ca3af",
-    shadow: "rgba(0, 0, 0, 0.1)",
-    shadowMd:
-      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
-    shadowLg:
-      "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
-    shadowXl:
-      "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
-  },
-
-  // Neutral colors - Dark mode
-  dark: {
-    bg: "#1f2937",
-    bgSecondary: "#111827",
-    bgTertiary: "#0f172a",
-    border: "#374151",
-    borderLight: "#4b5563",
-    text: "#f9fafb",
-    textSecondary: "#d1d5db",
-    textTertiary: "#9ca3af",
-    shadow: "rgba(0, 0, 0, 0.3)",
-    shadowMd:
-      "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",
-    shadowLg:
-      "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)",
-    shadowXl:
-      "0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
-  },
-};
-
-// Use light mode by default (can be made dynamic later)
-const getIsDark = () => {
-  if (typeof document !== "undefined") {
-    const root = document.documentElement;
-    if (root.classList.contains("dark")) {
-      return true;
-    }
-    if (root.classList.contains("light")) {
-      return false;
-    }
-  }
-
-  return (
-    typeof window !== "undefined" &&
-    window.matchMedia?.("(prefers-color-scheme: dark)").matches
-  );
 };
 
 const themeVars = {
   bg: "var(--ai-bg)",
-  bgSecondary: "var(--ai-bg-secondary)",
-  bgTertiary: "var(--ai-bg-tertiary)",
+  bgSecondary: "var(--ai-bg2)",
+  bgTertiary: "var(--ai-bg3)",
   border: "var(--ai-border)",
-  borderLight: "var(--ai-border-light)",
-  text: "var(--ai-text)",
-  textSecondary: "var(--ai-text-secondary)",
-  textTertiary: "var(--ai-text-tertiary)",
-  shadow: "var(--ai-shadow)",
-  shadowMd: "var(--ai-shadow-md)",
+  borderLight: "color-mix(in srgb, var(--ai-border) 70%, transparent)",
+  text: "var(--ai-foreground)",
+  textSecondary: "var(--ai-secondary)",
+  textTertiary: "var(--ai-tertiary)",
+  shadow: "var(--ai-shadow-sm)",
+  shadowMd: "var(--ai-shadow-sm)",
   shadowLg: "var(--ai-shadow-lg)",
   shadowXl: "var(--ai-shadow-xl)",
 } as const;
 
-const applyThemeVariables = () => {
-  if (typeof document === "undefined") {
-    return;
-  }
-
-  const nextTheme = getIsDark() ? colors.dark : colors.light;
-  const root = document.documentElement;
-
-  root.style.setProperty("--ai-bg", nextTheme.bg);
-  root.style.setProperty("--ai-bg-secondary", nextTheme.bgSecondary);
-  root.style.setProperty("--ai-bg-tertiary", nextTheme.bgTertiary);
-  root.style.setProperty("--ai-border", nextTheme.border);
-  root.style.setProperty("--ai-border-light", nextTheme.borderLight);
-  root.style.setProperty("--ai-text", nextTheme.text);
-  root.style.setProperty("--ai-text-secondary", nextTheme.textSecondary);
-  root.style.setProperty("--ai-text-tertiary", nextTheme.textTertiary);
-  root.style.setProperty("--ai-shadow", nextTheme.shadow);
-  root.style.setProperty("--ai-shadow-md", nextTheme.shadowMd);
-  root.style.setProperty("--ai-shadow-lg", nextTheme.shadowLg);
-  root.style.setProperty("--ai-shadow-xl", nextTheme.shadowXl);
-};
-
-if (typeof window !== "undefined") {
-  applyThemeVariables();
-
-  const media = window.matchMedia?.("(prefers-color-scheme: dark)");
-  media?.addEventListener?.("change", applyThemeVariables);
-
-  const observer = new MutationObserver(() => applyThemeVariables());
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["class"],
-  });
-}
-
 export const aiStyles = {
   // Input field
   input: {
@@ -134,7 +45,7 @@ export const aiStyles = {
     fontSize: "14px",
     lineHeight: "1.5",
     color: themeVars.text,
-    background: themeVars.bg,
+    background: "var(--ai-glass-strong)",
     border: `1px solid ${themeVars.border}`,
     borderColor: themeVars.border,
     borderRadius: "8px",
@@ -192,7 +103,7 @@ export const aiStyles = {
     fontSize: "14px",
     lineHeight: "1.5",
     color: themeVars.text,
-    background: themeVars.bg,
+    background: "var(--ai-glass-strong)",
     border: `1px solid ${themeVars.border}`,
     borderColor: themeVars.border,
     borderRadius: "8px",
@@ -277,7 +188,7 @@ export const aiStyles = {
     fontSize: "14px",
     lineHeight: "1.5",
     color: themeVars.text,
-    background: themeVars.bg,
+    background: "var(--ai-glass-strong)",
     borderWidth: "1px",
     borderStyle: "solid",
     borderColor: themeVars.border,
@@ -311,7 +222,7 @@ export const aiStyles = {
     height: "40px",
     border: `1px solid ${themeVars.border}`,
     borderRadius: "8px",
-    background: themeVars.bg,
+    background: "var(--ai-glass, rgba(255,255,255,0.7))",
     color: themeVars.text,
     cursor: "pointer" as const,
     transition: "all 0.2s",
@@ -319,7 +230,7 @@ export const aiStyles = {
   } as React.CSSProperties,
 
   statusButtonHover: {
-    background: themeVars.bgSecondary,
+    background: "var(--ai-glass-strong, rgba(255,255,255,0.82))",
     boxShadow: themeVars.shadowLg,
     transform: "scale(1.05)",
   } as React.CSSProperties,
@@ -336,7 +247,7 @@ export const aiStyles = {
     minWidth: "320px",
     maxWidth: "400px",
     padding: "16px",
-    background: themeVars.bg,
+    background: "var(--ai-bg2)",
     border: `1px solid ${themeVars.border}`,
     borderRadius: "12px",
     boxShadow: themeVars.shadowXl,
@@ -428,13 +339,13 @@ export const aiStyles = {
     transition: "all 0.2s",
     fontSize: "11px",
     fontWeight: 500,
-    background: `${colors.primary}10`,
-    border: `1px solid ${colors.primary}30`,
+    background: "color-mix(in srgb, var(--ai-primary) 10%, transparent)",
+    border: "1px solid color-mix(in srgb, var(--ai-primary) 30%, transparent)",
   } as React.CSSProperties,
 
   tooltipLinkHover: {
-    background: `${colors.primary}20`,
-    borderColor: colors.primary,
+    background: "color-mix(in srgb, var(--ai-primary) 20%, transparent)",
+    borderColor: "var(--ai-primary)",
   } as React.CSSProperties,
 
   // Chip/Label
@@ -446,9 +357,9 @@ export const aiStyles = {
     fontSize: "12px",
     fontWeight: 500,
     borderRadius: "6px",
-    background: `${colors.primary}10`,
-    color: colors.primary,
-    border: `1px solid ${colors.primary}30`,
+    background: "color-mix(in srgb, var(--ai-primary) 10%, transparent)",
+    color: "var(--ai-primary)",
+    border: "1px solid color-mix(in srgb, var(--ai-primary) 30%, transparent)",
   } as React.CSSProperties,
 
   // Modal (basic styles)
@@ -458,7 +369,7 @@ export const aiStyles = {
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: 9999,
+    zIndex: 2147483645,
     display: "flex" as const,
     alignItems: "center" as const,
     justifyContent: "center" as const,
@@ -472,7 +383,7 @@ export const aiStyles = {
     left: 0,
     right: 0,
     bottom: 0,
-    background: "rgba(0, 0, 0, 0.5)",
+    background: "var(--ai-overlay, rgba(0, 0, 0, 0.5))",
     backdropFilter: "blur(4px)",
     WebkitBackdropFilter: "blur(4px)",
   } as React.CSSProperties,
@@ -483,7 +394,8 @@ export const aiStyles = {
     maxWidth: "600px",
     maxHeight: "90vh",
     overflow: "auto" as const,
-    background: themeVars.bg,
+    background: "var(--ai-bg2)",
+    border: "1px solid var(--ai-border)",
     borderRadius: "12px",
     boxShadow: themeVars.shadowXl,
     padding: "0",
@@ -578,39 +490,6 @@ export const aiStyles = {
   } as React.CSSProperties,
 };
 
-// Inject keyframes animation for spinner
-if (typeof document !== "undefined") {
-  const styleSheet = document.createElement("style");
-  styleSheet.textContent = `
-    @keyframes ai-spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-    
-    @keyframes ai-fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-    
-    @keyframes ai-slideUp {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-    
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.6; }
-    }
-  `;
-  document.head.appendChild(styleSheet);
-}
-
 // Helper function to calculate tooltip position
 export function calculateTooltipPosition(
   buttonRect: DOMRect,