@usecrow/ui 0.1.2 → 0.1.4

package/dist/index.d.cts

@@ -44,6 +44,12 @@ interface TypographyConfig {
     fontSize?: number;
     /** Header font size in pixels */
     headerFontSize?: number;
+    /** Font weight (400 = normal, 500 = medium, 600 = semi-bold, 700 = bold) */
+    fontWeight?: number;
+    /** Line height multiplier (e.g., 1.5) */
+    lineHeight?: number;
+    /** Letter spacing in pixels */
+    letterSpacing?: number;
 }
 interface AnimationsConfig {
     /** Animation duration in seconds */
@@ -54,7 +60,7 @@ interface AnimationsConfig {
 interface WidgetDimensionsConfig {
     /** Widget width in pixels */
     width?: number;
-    /** Max height for floating widget in pixels */
+    /** Max height for widget in pixels */
     maxHeight?: number;
     /** Border radius in pixels */
     borderRadius?: number;
@@ -62,8 +68,6 @@ interface WidgetDimensionsConfig {
     padding?: number;
     /** Messages container max height in pixels */
     messagesMaxHeight?: number;
-    /** Fixed height for preview/embedded mode in pixels */
-    previewHeight?: number;
 }
 interface WidgetPositionConfig {
     /** Distance from right edge in pixels */

package/dist/index.d.ts

@@ -44,6 +44,12 @@ interface TypographyConfig {
     fontSize?: number;
     /** Header font size in pixels */
     headerFontSize?: number;
+    /** Font weight (400 = normal, 500 = medium, 600 = semi-bold, 700 = bold) */
+    fontWeight?: number;
+    /** Line height multiplier (e.g., 1.5) */
+    lineHeight?: number;
+    /** Letter spacing in pixels */
+    letterSpacing?: number;
 }
 interface AnimationsConfig {
     /** Animation duration in seconds */
@@ -54,7 +60,7 @@ interface AnimationsConfig {
 interface WidgetDimensionsConfig {
     /** Widget width in pixels */
     width?: number;
-    /** Max height for floating widget in pixels */
+    /** Max height for widget in pixels */
     maxHeight?: number;
     /** Border radius in pixels */
     borderRadius?: number;
@@ -62,8 +68,6 @@ interface WidgetDimensionsConfig {
     padding?: number;
     /** Messages container max height in pixels */
     messagesMaxHeight?: number;
-    /** Fixed height for preview/embedded mode in pixels */
-    previewHeight?: number;
 }
 interface WidgetPositionConfig {
     /** Distance from right edge in pixels */

package/dist/index.js

@@ -1,4 +1,4 @@
-import React3, { createContext, forwardRef, useRef, useCallback, useEffect, useContext, useState, useMemo, useLayoutEffect } from 'react';
+import React3, { createContext, forwardRef, useEffect, useRef, useCallback, useContext, useState, useMemo, useLayoutEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Square, ArrowUp, ChevronDown, Check, MessageCircle, Plus, History, ChevronUp, Brain, ChevronRight, Loader2, X } from 'lucide-react';
@@ -661,7 +661,10 @@ var DEFAULT_WIDGET_STYLES = {
   typography: {
     fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     fontSize: 14,
-    headerFontSize: 16
+    headerFontSize: 16,
+    fontWeight: 400,
+    lineHeight: 1.5,
+    letterSpacing: 0
   },
   // ═══════════════════════════════════════════════════════════
   // ANIMATIONS
@@ -676,7 +679,6 @@ var DEFAULT_WIDGET_STYLES = {
   dimensions: {
     width: 400,
     maxHeight: 600,
-    previewHeight: 700,
     messagesMaxHeight: 350,
     borderRadius: 24,
     padding: 20
@@ -739,7 +741,10 @@ var DEFAULT_COPILOT_STYLES = {
   typography: {
     fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     fontSize: 14,
-    headerFontSize: 16
+    headerFontSize: 16,
+    fontWeight: 400,
+    lineHeight: 1.5,
+    letterSpacing: 0
   },
   // ═══════════════════════════════════════════════════════════
   // ANIMATIONS
@@ -859,6 +864,9 @@ function stylesToCSSVariables(styles2) {
     "--crow-font-family": styles2.typography.fontFamily,
     "--crow-font-size": `${styles2.typography.fontSize}px`,
     "--crow-header-font-size": `${styles2.typography.headerFontSize}px`,
+    "--crow-font-weight": `${styles2.typography.fontWeight}`,
+    "--crow-line-height": `${styles2.typography.lineHeight}`,
+    "--crow-letter-spacing": `${styles2.typography.letterSpacing}px`,
     // Animations
     "--crow-animation-duration": `${styles2.animations.duration}s`,
     "--crow-animation-easing": styles2.animations.easing
@@ -1094,9 +1102,27 @@ var GlassCard = forwardRef(
   }
 );
 GlassCard.displayName = "GlassCard";
+var GOOGLE_FONTS_MAP = {
+  '"Inter", sans-serif': "Inter:wght@300;400;500;600;700",
+  '"Roboto", sans-serif': "Roboto:wght@300;400;500;700",
+  '"Open Sans", sans-serif': "Open+Sans:wght@300;400;500;600;700",
+  '"Poppins", sans-serif': "Poppins:wght@300;400;500;600;700",
+  '"Montserrat", sans-serif': "Montserrat:wght@300;400;500;600;700"
+};
 var WidgetShell = forwardRef(
   ({ children, className }, ref) => {
     const { styles: styles2, variant } = useWidgetStyleContext();
+    useEffect(() => {
+      const fontParam = GOOGLE_FONTS_MAP[styles2.typography.fontFamily];
+      if (!fontParam) return;
+      const linkId = `crow-google-font-${fontParam.split(":")[0]}`;
+      if (document.getElementById(linkId)) return;
+      const link = document.createElement("link");
+      link.id = linkId;
+      link.rel = "stylesheet";
+      link.href = `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
+      document.head.appendChild(link);
+    }, [styles2.typography.fontFamily]);
     const baseStyle = {
       borderRadius: styles2.dimensions.borderRadius,
       padding: styles2.dimensions.padding,
@@ -1105,18 +1131,21 @@ var WidgetShell = forwardRef(
       color: styles2.colors.text,
       boxShadow: styles2.shadows.widget,
       fontFamily: styles2.typography.fontFamily,
-      fontSize: styles2.typography.fontSize
+      fontSize: styles2.typography.fontSize,
+      fontWeight: styles2.typography.fontWeight,
+      lineHeight: styles2.typography.lineHeight,
+      letterSpacing: styles2.typography.letterSpacing
     };
     if (variant === "embedded") {
       return /* @__PURE__ */ jsx(
         GlassCard,
         {
           ref,
-          className: `crow-flex crow-flex-col crow-shadow-2xl crow-gap-3 crow-w-full crow-h-full ${className ?? ""}`,
+          className: `crow-flex crow-flex-col crow-shadow-2xl crow-gap-3 ${className ?? ""}`,
           style: {
             ...baseStyle,
-            maxWidth: styles2.dimensions.width,
-            maxHeight: styles2.dimensions.previewHeight
+            width: `min(${styles2.dimensions.width}px, calc(100vw - 32px))`,
+            height: `min(${styles2.dimensions.maxHeight}px, calc(100vh - 120px))`
           },
           children
         }
@@ -1499,7 +1528,7 @@ function MessageBubble({
               border: `1px solid ${styles2.colors.userBorder}`
             },
             children: [
-              /* @__PURE__ */ jsx("div", { className: "crow-text-sm crow-whitespace-pre-wrap", children: message.isBot ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "crow-whitespace-pre-wrap", children: message.isBot ? /* @__PURE__ */ jsx(
                 StreamingText,
                 {
                   content: message.content,
@@ -2230,7 +2259,7 @@ function CrowWidget({
                 onExit: handleExitWorkflow
               }
             ) }),
-            /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, maxHeight: styles2.dimensions.messagesMaxHeight, children: /* @__PURE__ */ jsx(
               MessageList,
               {
                 messages: chat.messages,
@@ -2280,7 +2309,7 @@ function CrowWidget({
               onExit: handleExitWorkflow
             }
           ) }),
-          /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, maxHeight: styles2.dimensions.messagesMaxHeight, children: /* @__PURE__ */ jsx(
             MessageList,
             {
               messages: chat.messages,
@@ -2420,6 +2449,9 @@ function CrowCopilot({
             width: widthStyle,
             fontFamily: styles2.typography.fontFamily,
             fontSize: styles2.typography.fontSize,
+            fontWeight: styles2.typography.fontWeight,
+            lineHeight: styles2.typography.lineHeight,
+            letterSpacing: styles2.typography.letterSpacing,
             background: styles2.colors.background,
             borderColor: styles2.colors.border
           },