@lastbrain/ai-ui-react 1.0.68 → 1.0.69

package/dist/components/LBSigninModal.js

@@ -1,59 +1,57 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { AlertCircle, Loader2, Lock, Mail, Sparkles, X } from "lucide-react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
-import { Mail, Lock, Sparkles, X, Loader2, AlertCircle } from "lucide-react";
 export function LBSigninModal({ isOpen, onClose }) {
-    // React Hooks doivent être appelés avant toute condition ou return
+    const lbContext = useLB();
+    const [portalRoot, setPortalRoot] = useState(null);
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
     const [showKeySelector, setShowKeySelector] = useState(false);
-    const [currentApiKeys, setCurrentApiKeys] = useState([]); // Stocker les clés API localement
-    // Appeler useLB() inconditionnellement - hook doit toujours être appelé
-    const lbContext = useLB();
-    // Vérifier si le contexte est valide
-    if (!lbContext || !isOpen) {
+    const [currentApiKeys, setCurrentApiKeys] = useState([]);
+    const { login, selectApiKeyWithToken, fetchApiKeys, } = lbContext || {};
+    const canRender = Boolean(isOpen && lbContext && login);
+    const panelTitle = useMemo(() => "Connexion LastBrain", []);
+    useEffect(() => {
+        setPortalRoot(document.body);
+    }, []);
+    if (!canRender || !portalRoot) {
         return null;
     }
-    // Extraire les valeurs du contexte
-    const { login, selectApiKeyWithToken, fetchApiKeys, apiKeys = [], status: lbStatus, } = lbContext;
-    if (!isOpen || !login)
-        return null;
     const handleSubmit = async (e) => {
         e.preventDefault();
+        if (!login) {
+            return;
+        }
         setError("");
         setLoading(true);
         try {
             const result = await login(email, password);
-            if (result.success) {
-                if (result.needsKeySelection) {
-                    // L'utilisateur doit choisir une clé API
-                    // Utiliser l'access token retourné directement par login
-                    if (fetchApiKeys && result.accessToken) {
-                        try {
-                            const keys = await fetchApiKeys(result.accessToken);
-                            setCurrentApiKeys(keys);
-                            setShowKeySelector(true);
-                        }
-                        catch (keyError) {
-                            setError("Erreur lors de la récupération des clés API");
-                            console.error("Failed to fetch API keys:", keyError);
-                        }
-                    }
-                    else {
-                        setError("Token d'accès non disponible");
-                    }
-                }
-                else {
-                    // Connexion réussie, fermer le modal
-                    onClose();
-                }
-            }
-            else {
+            if (!result.success) {
                 setError(result.error || "Échec de la connexion");
+                return;
+            }
+            if (!result.needsKeySelection) {
+                onClose();
+                return;
+            }
+            if (!fetchApiKeys || !result.accessToken) {
+                setError("Token d'accès non disponible");
+                return;
+            }
+            try {
+                const keys = await fetchApiKeys(result.accessToken);
+                setCurrentApiKeys(keys || []);
+                setShowKeySelector(true);
+            }
+            catch (keyError) {
+                console.error("Failed to fetch API keys:", keyError);
+                setError("Erreur lors de la récupération des clés API");
             }
         }
         catch (err) {
@@ -64,8 +62,9 @@ export function LBSigninModal({ isOpen, onClose }) {
         }
     };
     const handleKeySelect = async (apiKeyId) => {
-        if (!selectApiKeyWithToken)
+        if (!selectApiKeyWithToken) {
             return;
+        }
         try {
             await selectApiKeyWithToken(apiKeyId);
             setShowKeySelector(false);
@@ -78,291 +77,14 @@ export function LBSigninModal({ isOpen, onClose }) {
     };
     const handleCancelKeySelection = () => {
         setShowKeySelector(false);
-        // Fermer complètement le modal au lieu de rester dans l'état de sélection
         onClose();
     };
-    // Si on doit afficher le sélecteur de clés
     if (showKeySelector && currentApiKeys.length > 0) {
-        return (_jsx(LBApiKeySelector, { apiKeys: currentApiKeys, onSelect: handleKeySelect, onCancel: handleCancelKeySelection, isOpen: true }));
+        return createPortal(_jsx(LBApiKeySelector, { apiKeys: currentApiKeys, onSelect: handleKeySelect, onCancel: handleCancelKeySelection, isOpen: true }), portalRoot);
     }
-    const handleKeyDown = (e) => {
-        if (e.key === "Escape") {
-            onClose();
-        }
-    };
-    return (_jsxs("div", { style: {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0, 0, 0, 0.75)",
-            backdropFilter: "blur(12px)",
-            WebkitBackdropFilter: "blur(12px)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            zIndex: 9999,
-            padding: "16px",
-            animation: "fadeIn 0.2s ease-out",
-            overflow: "auto",
-        }, onClick: onClose, onKeyDown: handleKeyDown, children: [_jsxs("div", { style: {
-                    backgroundColor: "light-dark(#ffffff, #1e293b)",
-                    borderRadius: "20px",
-                    boxShadow: "0 0 0 1px rgba(139, 92, 246, 0.2), 0 20px 70px rgba(139, 92, 246, 0.25), 0 4px 6px rgba(0, 0, 0, 0.1)",
-                    maxWidth: "440px",
-                    width: "100%",
-                    border: "1px solid light-dark(rgba(226, 232, 240, 0.8), rgba(139, 92, 246, 0.3))",
-                    display: "flex",
-                    flexDirection: "column",
-                    maxHeight: "90vh",
-                    overflow: "hidden",
-                    position: "relative",
-                    animation: "slideUp 0.3s ease-out",
-                }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: {
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            height: "200px",
-                            background: "radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15), transparent 70%)",
-                            pointerEvents: "none",
-                            zIndex: 0,
-                        } }), _jsxs("div", { style: {
-                            padding: "32px 32px 24px",
-                            display: "flex",
-                            flexDirection: "column",
-                            alignItems: "center",
-                            gap: "16px",
-                            position: "relative",
-                            zIndex: 1,
-                        }, children: [_jsx("div", { style: {
-                                    width: "64px",
-                                    height: "64px",
-                                    borderRadius: "16px",
-                                    background: "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    boxShadow: "0 8px 24px rgba(139, 92, 246, 0.3)",
-                                    animation: "pulse 2s ease-in-out infinite",
-                                }, children: _jsx(Sparkles, { size: 32, color: "#ffffff", strokeWidth: 2.5 }) }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("h2", { style: {
-                                            margin: "0 0 8px 0",
-                                            fontSize: "24px",
-                                            fontWeight: 700,
-                                            color: "light-dark(#1e293b, #f8fafc)",
-                                            letterSpacing: "-0.02em",
-                                        }, children: "Connexion LastBrain" }), _jsx("p", { style: {
-                                            margin: 0,
-                                            fontSize: "14px",
-                                            color: "light-dark(#64748b, #94a3b8)",
-                                            fontWeight: 400,
-                                        }, children: "Acc\u00E9dez \u00E0 vos outils d'intelligence artificielle" })] }), _jsx("button", { onClick: onClose, style: {
-                                    position: "absolute",
-                                    top: "24px",
-                                    right: "24px",
-                                    background: "transparent",
-                                    border: "none",
-                                    color: "light-dark(#64748b, #94a3b8)",
-                                    cursor: "pointer",
-                                    padding: "8px",
-                                    borderRadius: "10px",
-                                    transition: "all 0.2s ease",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                }, onMouseEnter: (e) => {
-                                    e.currentTarget.style.background =
-                                        "light-dark(rgba(100, 116, 139, 0.1), rgba(148, 163, 184, 0.15))";
-                                    e.currentTarget.style.color = "light-dark(#1e293b, #f8fafc)";
-                                }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.background = "transparent";
-                                    e.currentTarget.style.color = "light-dark(#64748b, #94a3b8)";
-                                }, "aria-label": "Close", children: _jsx(X, { size: 20, strokeWidth: 2 }) })] }), _jsx("div", { style: {
-                            padding: "0 32px 32px",
-                            overflow: "auto",
-                            flex: 1,
-                            position: "relative",
-                            zIndex: 1,
-                        }, children: _jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [_jsxs("div", { children: [_jsxs("label", { style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "8px",
-                                                fontSize: "13px",
-                                                fontWeight: 600,
-                                                color: "light-dark(#1e293b, #f8fafc)",
-                                                marginBottom: "10px",
-                                                letterSpacing: "0.01em",
-                                            }, children: [_jsx(Mail, { size: 16, strokeWidth: 2.5 }), "Email"] }), _jsx("div", { style: { position: "relative" }, children: _jsx("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, autoFocus: true, autoComplete: "email", placeholder: "votre@email.com", style: {
-                                                    width: "100%",
-                                                    padding: "14px 16px",
-                                                    fontSize: "15px",
-                                                    border: "2px solid light-dark(#e2e8f0, #334155)",
-                                                    borderRadius: "12px",
-                                                    background: "light-dark(#f8fafc, #0f172a)",
-                                                    color: "light-dark(#1e293b, #f8fafc)",
-                                                    outline: "none",
-                                                    transition: "all 0.2s ease",
-                                                    fontWeight: 500,
-                                                }, onFocus: (e) => {
-                                                    e.currentTarget.style.borderColor =
-                                                        "rgba(139, 92, 246, 0.6)";
-                                                    e.currentTarget.style.boxShadow =
-                                                        "0 0 0 4px rgba(139, 92, 246, 0.15)";
-                                                    e.currentTarget.style.background =
-                                                        "light-dark(#ffffff, #1e293b)";
-                                                }, onBlur: (e) => {
-                                                    e.currentTarget.style.borderColor =
-                                                        "light-dark(#e2e8f0, #334155)";
-                                                    e.currentTarget.style.boxShadow = "none";
-                                                    e.currentTarget.style.background =
-                                                        "light-dark(#f8fafc, #0f172a)";
-                                                } }) })] }), _jsxs("div", { children: [_jsxs("label", { style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "8px",
-                                                fontSize: "13px",
-                                                fontWeight: 600,
-                                                color: "light-dark(#1e293b, #f8fafc)",
-                                                marginBottom: "10px",
-                                                letterSpacing: "0.01em",
-                                            }, children: [_jsx(Lock, { size: 16, strokeWidth: 2.5 }), "Mot de passe"] }), _jsx("div", { style: { position: "relative" }, children: _jsx("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), required: true, autoComplete: "current-password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", style: {
-                                                    width: "100%",
-                                                    padding: "14px 16px",
-                                                    fontSize: "15px",
-                                                    border: "2px solid light-dark(#e2e8f0, #334155)",
-                                                    borderRadius: "12px",
-                                                    background: "light-dark(#f8fafc, #0f172a)",
-                                                    color: "light-dark(#1e293b, #f8fafc)",
-                                                    outline: "none",
-                                                    transition: "all 0.2s ease",
-                                                    letterSpacing: "0.15em",
-                                                    fontWeight: 500,
-                                                }, onFocus: (e) => {
-                                                    e.currentTarget.style.borderColor =
-                                                        "rgba(139, 92, 246, 0.6)";
-                                                    e.currentTarget.style.boxShadow =
-                                                        "0 0 0 4px rgba(139, 92, 246, 0.15)";
-                                                    e.currentTarget.style.background =
-                                                        "light-dark(#ffffff, #1e293b)";
-                                                }, onBlur: (e) => {
-                                                    e.currentTarget.style.borderColor =
-                                                        "light-dark(#e2e8f0, #334155)";
-                                                    e.currentTarget.style.boxShadow = "none";
-                                                    e.currentTarget.style.background =
-                                                        "light-dark(#f8fafc, #0f172a)";
-                                                } }) })] }), error && (_jsxs("div", { style: {
-                                        padding: "14px 16px",
-                                        background: "rgba(239, 68, 68, 0.1)",
-                                        border: "2px solid rgba(239, 68, 68, 0.35)",
-                                        borderRadius: "12px",
-                                        color: "light-dark(#dc2626, #fca5a5)",
-                                        fontSize: "14px",
-                                        display: "flex",
-                                        alignItems: "start",
-                                        gap: "12px",
-                                        animation: "shake 0.4s ease",
-                                    }, children: [_jsx(AlertCircle, { size: 20, style: { flexShrink: 0, marginTop: "2px" }, strokeWidth: 2.5 }), _jsx("span", { style: { flex: 1, lineHeight: "1.5", fontWeight: 500 }, children: error })] })), _jsx("button", { type: "submit", disabled: loading, style: {
-                                        width: "100%",
-                                        padding: "16px",
-                                        fontSize: "15px",
-                                        fontWeight: 700,
-                                        color: "#ffffff",
-                                        background: loading
-                                            ? "light-dark(#cbd5e1, #475569)"
-                                            : "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
-                                        border: "none",
-                                        borderRadius: "12px",
-                                        cursor: loading ? "not-allowed" : "pointer",
-                                        transition: "all 0.2s ease",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        gap: "10px",
-                                        letterSpacing: "0.01em",
-                                        opacity: loading ? 0.6 : 1,
-                                        boxShadow: loading
-                                            ? "none"
-                                            : "0 4px 14px rgba(139, 92, 246, 0.4)",
-                                    }, onMouseEnter: (e) => {
-                                        if (!loading) {
-                                            e.currentTarget.style.transform = "translateY(-2px)";
-                                            e.currentTarget.style.boxShadow =
-                                                "0 8px 24px rgba(139, 92, 246, 0.6)";
-                                        }
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.transform = "translateY(0)";
-                                        e.currentTarget.style.boxShadow =
-                                            "0 4px 14px rgba(139, 92, 246, 0.4)";
-                                    }, children: loading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 20, strokeWidth: 2.5, style: { animation: "spin 1s linear infinite" } }), "Connexion en cours..."] })) : (_jsxs(_Fragment, { children: [_jsx(Sparkles, { size: 20, strokeWidth: 2.5 }), "Se connecter"] })) }), _jsxs("div", { style: {
-                                        marginTop: "8px",
-                                        padding: "20px",
-                                        background: "rgba(139, 92, 246, 0.05)",
-                                        border: "1px solid rgba(139, 92, 246, 0.2)",
-                                        borderRadius: "16px",
-                                        textAlign: "center",
-                                    }, children: [_jsx("p", { style: {
-                                                margin: "0 0 14px 0",
-                                                fontSize: "14px",
-                                                color: "light-dark(#64748b, #94a3b8)",
-                                                fontWeight: 500,
-                                            }, children: "Pas encore de compte ?" }), _jsxs("a", { href: "https://prompt.lastbrain.io/signup", target: "_blank", rel: "noopener noreferrer", style: {
-                                                display: "inline-flex",
-                                                alignItems: "center",
-                                                gap: "8px",
-                                                padding: "10px 20px",
-                                                fontSize: "14px",
-                                                fontWeight: 600,
-                                                color: "#8b5cf6",
-                                                textDecoration: "none",
-                                                border: "2px solid rgba(139, 92, 246, 0.3)",
-                                                borderRadius: "10px",
-                                                transition: "all 0.2s ease",
-                                            }, onMouseEnter: (e) => {
-                                                e.currentTarget.style.background = "rgba(139, 92, 246, 0.1)";
-                                                e.currentTarget.style.borderColor = "rgba(139, 92, 246, 0.5)";
-                                                e.currentTarget.style.transform = "translateY(-1px)";
-                                            }, onMouseLeave: (e) => {
-                                                e.currentTarget.style.background = "transparent";
-                                                e.currentTarget.style.borderColor = "rgba(139, 92, 246, 0.3)";
-                                                e.currentTarget.style.transform = "translateY(0)";
-                                            }, children: [_jsx(Sparkles, { size: 16, strokeWidth: 2.5 }), "Cr\u00E9er un compte gratuitement"] })] })] }) })] }), _jsx("style", { children: `
-          @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-          }
-          
-          @keyframes slideUp {
-            from { 
-              opacity: 0;
-              transform: translateY(20px) scale(0.95);
-            }
-            to { 
-              opacity: 1;
-              transform: translateY(0) scale(1);
-            }
-          }
-          
-          @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-          }
-          
-          @keyframes pulse {
-            0%, 100% { 
-              box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
-            }
-            50% { 
-              box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5);
+    return createPortal(_jsx("div", { className: "ai-signin-overlay", onClick: onClose, onKeyDown: (e) => {
+            if (e.key === "Escape") {
+                onClose();
             }
-          }
-          
-          @keyframes shake {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-8px); }
-            75% { transform: translateX(8px); }
-          }
-        ` })] }));
+        }, role: "dialog", "aria-modal": "true", "aria-label": panelTitle, children: _jsxs("div", { className: "ai-signin-panel", onClick: (e) => e.stopPropagation(), children: [_jsx("button", { type: "button", className: "ai-icon-btn ai-signin-close", onClick: onClose, "aria-label": "Fermer", children: _jsx(X, { size: 16 }) }), _jsxs("div", { className: "ai-signin-header", children: [_jsx("div", { className: "ai-center mb-3", children: _jsx("span", { className: "ai-icon-badge", children: _jsx(Sparkles, { size: 22 }) }) }), _jsx("h2", { className: "ai-signin-title", children: panelTitle }), _jsx("p", { className: "ai-signin-subtitle", children: "Connectez-vous pour activer les composants IA dans votre app." })] }), _jsx("div", { className: "ai-signin-content", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "ai-input-row", children: [_jsxs("label", { htmlFor: "lb-signin-email", className: "ai-input-label ai-row", children: [_jsx(Mail, { size: 14, className: "ai-inline-icon" }), "Email"] }), _jsx("div", { className: "ai-control-group ai-glow", children: _jsx("div", { className: "ai-shell ai-size-md ai-radius-full", children: _jsx("input", { id: "lb-signin-email", className: "ai-control ai-control-input ai-size-md ai-radius-full", type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, autoFocus: true, autoComplete: "email", placeholder: "votre@email.com" }) }) })] }), _jsxs("div", { className: "ai-input-row", children: [_jsxs("label", { htmlFor: "lb-signin-password", className: "ai-input-label ai-row", children: [_jsx(Lock, { size: 14, className: "ai-inline-icon" }), "Mot de passe"] }), _jsx("div", { className: "ai-control-group ai-glow", children: _jsx("div", { className: "ai-shell ai-size-md ai-radius-full", children: _jsx("input", { id: "lb-signin-password", className: "ai-control ai-control-input ai-size-md ai-radius-full", type: "password", value: password, onChange: (e) => setPassword(e.target.value), required: true, autoComplete: "current-password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }) }) })] }), error ? (_jsxs("div", { className: "ai-signin-error", role: "alert", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { children: error })] })) : null, _jsxs("div", { className: "ai-signin-actions", children: [_jsx("button", { type: "submit", className: "ai-btn ai-btn--auth", disabled: loading, children: loading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 16, className: "ai-spinner" }), "Connexion..."] })) : (_jsxs(_Fragment, { children: [_jsx(Sparkles, { size: 16 }), "Se connecter"] })) }), _jsx("a", { href: "https://prompt.lastbrain.io/signup", target: "_blank", rel: "noopener noreferrer", className: "ai-btn ai-btn--ghost", children: "Cr\u00E9er un compte" })] })] }) })] }) }), portalRoot);
 }

package/dist/examples/AiUiPremiumShowcase.d.ts

@@ -0,0 +1,2 @@
+export declare function AiUiPremiumShowcase(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AiUiPremiumShowcase.d.ts.map

package/dist/examples/AiUiPremiumShowcase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiUiPremiumShowcase.d.ts","sourceRoot":"","sources":["../../src/examples/AiUiPremiumShowcase.tsx"],"names":[],"mappings":"AAmFA,wBAAgB,mBAAmB,4CAOlC"}

package/dist/examples/AiUiPremiumShowcase.js

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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./styles.css";
 export * from "./types";
 export * from "./context/AiProvider";
 export * from "./context/LBAuthProvider";
@@ -32,4 +33,5 @@ export * from "./examples/AiPromptPanelAdvanced";
 export * from "./examples/AiChipInputExample";
 export * from "./examples/AiImageButtonExample";
 export * from "./examples/AiContextButtonExample";
+export * from "./examples/AiUiPremiumShowcase";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAG9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AAGzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAG9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AAGzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC"}

package/dist/index.js

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

package/dist/styles/inline.d.ts

@@ -2,6 +2,7 @@
  * Inline styles for AI UI components
  * Theme: Purple/Violet primary color with light/dark mode support
  */
+import type React from "react";
 export declare const aiStyles: {
     input: React.CSSProperties;
     inputFocus: React.CSSProperties;

package/dist/styles/inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA6HH,eAAO,MAAM,QAAQ;WAgBd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAmBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YA2BnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AAoCF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkC/B,eAAO,MAAM,QAAQ;WAgBd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAmBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YA2BnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAcnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AAGF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}