@sampleapp.ai/sdk 1.0.25 → 1.0.27

package/dist/components/ui/button.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from "react";
+// Import your scoped styles
 // Base button styles
 const baseButtonStyles = {
     display: "inline-flex",
@@ -17,52 +18,53 @@ const baseButtonStyles = {
     justifyContent: "center",
     gap: "0.5rem",
     whiteSpace: "nowrap",
-    borderRadius: "6px",
+    borderRadius: "15px",
     fontSize: "14px",
     fontWeight: "500",
-    transition: "colors 0.15s ease-in-out",
+    transition: "all 0.15s ease-in-out",
     outline: "none",
     border: "none",
     cursor: "pointer",
     fontFamily: "inherit",
+    flexShrink: 0,
 };
-// Variant styles
+// Variant styles using prefixed CSS variables with fallbacks
 const variantStyles = {
     default: {
-        backgroundColor: "#0f172a",
-        color: "#f8fafc",
+        backgroundColor: "hsl(var(--sdk-primary, 240 5.9% 10%))",
+        color: "hsl(var(--sdk-primary-foreground, 0 0% 98%))",
         boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
     },
     destructive: {
-        backgroundColor: "#dc2626",
-        color: "#fef2f2",
+        backgroundColor: "hsl(var(--sdk-destructive, 0 84.2% 60.2%))",
+        color: "hsl(var(--sdk-destructive-foreground, 0 0% 98%))",
         boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
     },
     outline: {
-        border: "1px solid #e2e8f0",
-        backgroundColor: "transparent",
-        color: "#0f172a",
+        border: "1px solid hsl(var(--sdk-border, 240 3.7% 25%))",
+        backgroundColor: "hsl(var(--sdk-secondary, 240 3.7% 15.9%))",
+        color: "hsl(var(--sdk-secondary-foreground, 0 0% 98%))",
         boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
     },
     secondary: {
-        backgroundColor: "#f1f5f9",
-        color: "#0f172a",
+        backgroundColor: "hsl(var(--sdk-secondary, 240 4.8% 95.9%))",
+        color: "hsl(var(--sdk-secondary-foreground, 240 5.9% 10%))",
         boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
     },
     ghost: {
         backgroundColor: "transparent",
-        color: "#0f172a",
+        color: "hsl(var(--sdk-foreground, 240 10% 3.9%))",
     },
     link: {
         backgroundColor: "transparent",
-        color: "#0f172a",
+        color: "hsl(var(--sdk-primary, 240 5.9% 10%))",
         textDecoration: "underline",
         textUnderlineOffset: "4px",
     },
     ghostOutline: {
-        border: "1px solid #f1f5f9",
+        border: "1px solid hsl(var(--sdk-secondary, 240 4.8% 95.9%))",
         backgroundColor: "transparent",
-        color: "#64748b",
+        color: "hsl(var(--sdk-muted-foreground, 240 3.8% 46.1%))",
         boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
     },
 };
@@ -80,11 +82,13 @@ const sizeStyles = {
         paddingLeft: "12px",
         paddingRight: "12px",
         fontSize: "12px",
+        borderRadius: "6px",
     },
     lg: {
         height: "40px",
         paddingLeft: "32px",
         paddingRight: "32px",
+        borderRadius: "6px",
     },
     icon: {
         height: "32px",
@@ -92,35 +96,64 @@ const sizeStyles = {
         padding: "0",
     },
 };
-// Hover styles
+// Hover styles with CSS variables and fallbacks
 const getHoverStyles = (variant) => {
     switch (variant) {
         case "default":
-            return { backgroundColor: "#1e293b" };
+            return { backgroundColor: "hsl(var(--sdk-primary, 240 5.9% 10%) / 0.9)" };
         case "destructive":
-            return { backgroundColor: "#b91c1c" };
+            return {
+                backgroundColor: "hsl(var(--sdk-destructive, 0 84.2% 60.2%) / 0.9)",
+            };
         case "outline":
-            return { backgroundColor: "#f1f5f9", color: "#0f172a" };
+            return {
+                backgroundColor: "hsl(var(--sdk-secondary, 240 3.7% 15.9%) / 0.8)",
+                color: "hsl(var(--sdk-secondary-foreground, 0 0% 98%))",
+            };
         case "secondary":
-            return { backgroundColor: "#e2e8f0" };
+            return {
+                backgroundColor: "hsl(var(--sdk-secondary, 240 4.8% 95.9%) / 0.7)",
+            };
         case "ghost":
-            return { backgroundColor: "#f1f5f9", color: "#0f172a" };
+            return {
+                backgroundColor: "hsl(var(--sdk-accent, 240 4.8% 95.9%))",
+                color: "hsl(var(--sdk-accent-foreground, 240 5.9% 10%))",
+            };
         case "link":
-            return {};
+            return { textDecoration: "underline" };
         case "ghostOutline":
-            return { backgroundColor: "#f1f5f9", color: "#0f172a" };
+            return {
+                backgroundColor: "hsl(var(--sdk-accent, 240 4.8% 95.9%))",
+                color: "hsl(var(--sdk-foreground, 240 10% 3.9%))",
+            };
         default:
             return {};
     }
 };
+// Focus styles
+const getFocusStyles = (variant) => {
+    const baseStyles = {
+        outline: "1px solid hsl(var(--sdk-ring, 240 10% 3.9%))",
+        outlineOffset: "1px",
+    };
+    // Preserve variant colors on focus
+    switch (variant) {
+        case "outline":
+            return Object.assign(Object.assign({}, baseStyles), { backgroundColor: "hsl(var(--sdk-secondary, 240 3.7% 15.9%))", color: "hsl(var(--sdk-secondary-foreground, 0 0% 98%))" });
+        default:
+            return baseStyles;
+    }
+};
 const Button = React.forwardRef((_a, ref) => {
-    var { variant = "default", size = "default", asChild = false, style, onMouseEnter, onMouseLeave } = _a, props = __rest(_a, ["variant", "size", "asChild", "style", "onMouseEnter", "onMouseLeave"]);
+    var { variant = "default", size = "default", asChild = false, style, onMouseEnter, onMouseLeave, onFocus, onBlur, onClick } = _a, props = __rest(_a, ["variant", "size", "asChild", "style", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onClick"]);
     const [isHovered, setIsHovered] = React.useState(false);
-    const buttonStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseButtonStyles), variantStyles[variant]), sizeStyles[size]), (isHovered ? getHoverStyles(variant) : {})), style);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const buttonStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseButtonStyles), variantStyles[variant]), sizeStyles[size]), (isHovered ? getHoverStyles(variant) : {})), (isFocused ? getFocusStyles(variant) : {})), style);
     // Handle disabled state
     if (props.disabled) {
         buttonStyle.pointerEvents = "none";
         buttonStyle.opacity = 0.5;
+        buttonStyle.cursor = "not-allowed";
     }
     const handleMouseEnter = (e) => {
         setIsHovered(true);
@@ -130,12 +163,27 @@ const Button = React.forwardRef((_a, ref) => {
         setIsHovered(false);
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
     };
-    // Note: asChild functionality removed for pure inline CSS approach
-    // If you need slot-like behavior, consider implementing it separately
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    };
+    const handleClick = (e) => {
+        // Auto-blur after click to prevent stuck focus state
+        setTimeout(() => {
+            if (e.currentTarget) {
+                e.currentTarget.blur();
+            }
+        }, 150);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
     if (asChild) {
-        console.warn("asChild prop is not supported in the inline CSS version of Button. Consider using a wrapper component instead.");
+        console.warn("asChild prop is not supported in the inline CSS version of Button.");
     }
-    return (React.createElement("button", Object.assign({ style: buttonStyle, ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, props)));
+    return (React.createElement("button", Object.assign({ style: buttonStyle, ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick }, props)));
 });
 Button.displayName = "Button";
 export { Button };

package/dist/index.d.ts

@@ -13,18 +13,13 @@ export declare interface BaseSettings {
     [key: string]: any;
 }
 
-export declare const ChatBar: ({ query, placeholder, setQuery, onSubmit, isStreaming, height, hasPendingEnv, playgroundUid, hasTypingAnimation, isSubmitting, onCancel, typingTexts, shouldFocusOnMount, showModelSelector, projectUid, theme, }: ChatBarProps) => default_2.JSX.Element;
+export declare const ChatBar: ({ placeholder, onSubmit, playgroundUid, isSubmitting, typingTexts, shouldFocusOnMount, showModelSelector, projectUid, theme, height, deepgramApiKey, }: ChatBarProps) => default_2.JSX.Element;
 
 export declare interface ChatBarProps {
-    query: string;
+    playgroundUid: string;
     placeholder?: string;
-    setQuery: (query: string) => void;
-    onSubmit: (e: default_2.FormEvent) => void;
-    isStreaming: boolean;
+    onSubmit?: (e: default_2.FormEvent) => void;
     height: string;
-    hasPendingEnv?: boolean;
-    playgroundUid?: string;
-    hasTypingAnimation?: boolean;
     onCancel?: () => void;
     isSubmitting?: boolean;
     typingTexts?: string[];
@@ -32,6 +27,8 @@ export declare interface ChatBarProps {
     showModelSelector?: boolean;
     projectUid?: string | null | undefined;
     theme?: ThemeName;
+    deepgramApiKey?: string;
+    apiBaseUrl?: string;
 }
 
 export declare const ChatButton: default_2.FC<ChatButtonProps>;