kaleido-ui 0.1.53 → 0.1.54

package/dist/native/index.cjs

@@ -36,6 +36,7 @@ __export(native_exports, {
   AssetSelector: () => import_wdk_uikit_react_native2.AssetSelector,
   Balance: () => import_wdk_uikit_react_native2.Balance,
   BalanceCard: () => BalanceCard,
+  ChatBubble: () => ChatBubble,
   CryptoAddressInput: () => import_wdk_uikit_react_native2.CryptoAddressInput,
   EmptyState: () => EmptyState,
   KButton: () => KButton,
@@ -1051,13 +1052,100 @@ var styles5 = import_react_native14.StyleSheet.create({
   label: { fontSize: 13, marginLeft: 10, fontWeight: "500" }
 });
 
-// src/native/components/mode-toggle.tsx
+// src/native/components/chat-bubble.tsx
+var import_react4 = require("react");
 var import_react_native15 = require("react-native");
 var import_jsx_runtime17 = require("react/jsx-runtime");
+function ChatBubble({
+  role,
+  avatar,
+  time,
+  animateOnMount = true,
+  onLongPress,
+  maxWidth = "78%",
+  style,
+  children
+}) {
+  const { theme, fontFamily: fontFamily2 } = useKaleidoTheme();
+  const isUser = role === "user";
+  const enter = (0, import_react4.useRef)(new import_react_native15.Animated.Value(animateOnMount ? 0 : 1)).current;
+  (0, import_react4.useEffect)(() => {
+    if (!animateOnMount) return;
+    import_react_native15.Animated.spring(enter, { toValue: 1, tension: 120, friction: 9, useNativeDriver: true }).start();
+  }, [enter, animateOnMount]);
+  const bubble = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_react_native15.Pressable,
+    {
+      onLongPress,
+      delayLongPress: 300,
+      style: [
+        styles6.bubble,
+        { maxWidth },
+        isUser ? { backgroundColor: theme.primary } : {
+          backgroundColor: theme.card,
+          shadowColor: theme.background,
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.3,
+          shadowRadius: 6,
+          elevation: 3
+        },
+        style
+      ],
+      children: [
+        children,
+        time ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_react_native15.Text,
+          {
+            style: [
+              styles6.time,
+              {
+                color: isUser ? theme.text.onAccent : theme.text.muted,
+                fontFamily: fontFamily2,
+                textAlign: isUser ? "right" : "left"
+              }
+            ],
+            children: time
+          }
+        ) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_react_native15.Animated.View,
+    {
+      style: [
+        styles6.row,
+        { justifyContent: isUser ? "flex-end" : "flex-start" },
+        {
+          opacity: enter,
+          transform: [
+            { translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [14, 0] }) },
+            { translateX: enter.interpolate({ inputRange: [0, 1], outputRange: [isUser ? 22 : -22, 0] }) },
+            { scale: enter.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) }
+          ]
+        }
+      ],
+      children: [
+        !isUser && avatar,
+        bubble,
+        isUser && avatar
+      ]
+    }
+  );
+}
+var styles6 = import_react_native15.StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "flex-end", width: "100%", marginBottom: 16 },
+  bubble: { borderRadius: 24, padding: 16, overflow: "hidden" },
+  time: { fontSize: 12, marginTop: 8, fontWeight: "500" }
+});
+
+// src/native/components/mode-toggle.tsx
+var import_react_native16 = require("react-native");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ModeToggle({ icon, size = 40, onToggle }) {
   const { theme, mode, toggleMode } = useKaleidoTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_native15.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_native16.Pressable,
     {
       accessibilityRole: "switch",
       accessibilityState: { checked: mode === "dark" },
@@ -1077,7 +1165,7 @@ function ModeToggle({ icon, size = 40, onToggle }) {
         justifyContent: "center",
         opacity: pressed ? 0.85 : 1
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native15.View, { children: icon(mode, theme.text.primary, Math.round(size * 0.5)) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { children: icon(mode, theme.text.primary, Math.round(size * 0.5)) })
     }
   );
 }
@@ -1156,6 +1244,7 @@ var transition = {
   AssetSelector,
   Balance,
   BalanceCard,
+  ChatBubble,
   CryptoAddressInput,
   EmptyState,
   KButton,

package/dist/native/index.d.cts

@@ -379,6 +379,25 @@ interface TypingDotsProps {
 }
 declare function TypingDots({ label, color, style }: TypingDotsProps): react_jsx_runtime.JSX.Element;
 
+type ChatRole = 'user' | 'assistant';
+interface ChatBubbleProps {
+    role: ChatRole;
+    /** Consumer-owned avatar node (icon, gradient, image) rendered beside the bubble. */
+    avatar?: ReactNode;
+    /** Timestamp label rendered at the bubble foot. */
+    time?: string;
+    /** Run the spring entrance animation on mount (default true). */
+    animateOnMount?: boolean;
+    onLongPress?: () => void;
+    /** Max bubble width relative to the row (default '78%'). */
+    maxWidth?: ViewStyle['maxWidth'];
+    /** Style applied to the bubble container. */
+    style?: ViewStyle;
+    /** Message body — consumer renders text / markdown / cards / typing dots. */
+    children: ReactNode;
+}
+declare function ChatBubble({ role, avatar, time, animateOnMount, onLongPress, maxWidth, style, children, }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
+
 interface ModeToggleProps {
     icon: (mode: ThemeMode, color: string, size: number) => React.ReactNode;
     size?: number;
@@ -572,4 +591,4 @@ declare const transition: {
     readonly slow: "300ms ease-out";
 };
 
-export { ActionButton, type ActionButtonProps, AlertBanner, BalanceCard, type BalanceCardProps, EmptyState, type EmptyStateProps, KButton, type KButtonProps, KCard, type KCardProps, KScreen, type KScreenProps, KText, type KTextProps, type KaleidoTheme, KaleidoThemeProvider, KaleidoUIProvider, type KaleidoUIProviderProps, ModeToggle, type ModeToggleProps, type NativeTypeLevel, NetworkBadge, NetworkChip, type NetworkChipProps, type NetworkKey, type NetworkType, QrCode, type QrCodeProps, SectionLabel, StatusBadge, type StatusType, type ThemeMode, TypingDots, type TypingDotsProps, colors, fontFamily, fontWeight, kaleidoswapBrandConfig, kaleidoswapTokens, makeTheme, nativeType, radius, shadow, themes, transition, typeScale, useKaleidoTheme };
+export { ActionButton, type ActionButtonProps, AlertBanner, BalanceCard, type BalanceCardProps, ChatBubble, type ChatBubbleProps, type ChatRole, EmptyState, type EmptyStateProps, KButton, type KButtonProps, KCard, type KCardProps, KScreen, type KScreenProps, KText, type KTextProps, type KaleidoTheme, KaleidoThemeProvider, KaleidoUIProvider, type KaleidoUIProviderProps, ModeToggle, type ModeToggleProps, type NativeTypeLevel, NetworkBadge, NetworkChip, type NetworkChipProps, type NetworkKey, type NetworkType, QrCode, type QrCodeProps, SectionLabel, StatusBadge, type StatusType, type ThemeMode, TypingDots, type TypingDotsProps, colors, fontFamily, fontWeight, kaleidoswapBrandConfig, kaleidoswapTokens, makeTheme, nativeType, radius, shadow, themes, transition, typeScale, useKaleidoTheme };

package/dist/native/index.d.ts

@@ -379,6 +379,25 @@ interface TypingDotsProps {
 }
 declare function TypingDots({ label, color, style }: TypingDotsProps): react_jsx_runtime.JSX.Element;
 
+type ChatRole = 'user' | 'assistant';
+interface ChatBubbleProps {
+    role: ChatRole;
+    /** Consumer-owned avatar node (icon, gradient, image) rendered beside the bubble. */
+    avatar?: ReactNode;
+    /** Timestamp label rendered at the bubble foot. */
+    time?: string;
+    /** Run the spring entrance animation on mount (default true). */
+    animateOnMount?: boolean;
+    onLongPress?: () => void;
+    /** Max bubble width relative to the row (default '78%'). */
+    maxWidth?: ViewStyle['maxWidth'];
+    /** Style applied to the bubble container. */
+    style?: ViewStyle;
+    /** Message body — consumer renders text / markdown / cards / typing dots. */
+    children: ReactNode;
+}
+declare function ChatBubble({ role, avatar, time, animateOnMount, onLongPress, maxWidth, style, children, }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
+
 interface ModeToggleProps {
     icon: (mode: ThemeMode, color: string, size: number) => React.ReactNode;
     size?: number;
@@ -572,4 +591,4 @@ declare const transition: {
     readonly slow: "300ms ease-out";
 };
 
-export { ActionButton, type ActionButtonProps, AlertBanner, BalanceCard, type BalanceCardProps, EmptyState, type EmptyStateProps, KButton, type KButtonProps, KCard, type KCardProps, KScreen, type KScreenProps, KText, type KTextProps, type KaleidoTheme, KaleidoThemeProvider, KaleidoUIProvider, type KaleidoUIProviderProps, ModeToggle, type ModeToggleProps, type NativeTypeLevel, NetworkBadge, NetworkChip, type NetworkChipProps, type NetworkKey, type NetworkType, QrCode, type QrCodeProps, SectionLabel, StatusBadge, type StatusType, type ThemeMode, TypingDots, type TypingDotsProps, colors, fontFamily, fontWeight, kaleidoswapBrandConfig, kaleidoswapTokens, makeTheme, nativeType, radius, shadow, themes, transition, typeScale, useKaleidoTheme };
+export { ActionButton, type ActionButtonProps, AlertBanner, BalanceCard, type BalanceCardProps, ChatBubble, type ChatBubbleProps, type ChatRole, EmptyState, type EmptyStateProps, KButton, type KButtonProps, KCard, type KCardProps, KScreen, type KScreenProps, KText, type KTextProps, type KaleidoTheme, KaleidoThemeProvider, KaleidoUIProvider, type KaleidoUIProviderProps, ModeToggle, type ModeToggleProps, type NativeTypeLevel, NetworkBadge, NetworkChip, type NetworkChipProps, type NetworkKey, type NetworkType, QrCode, type QrCodeProps, SectionLabel, StatusBadge, type StatusType, type ThemeMode, TypingDots, type TypingDotsProps, colors, fontFamily, fontWeight, kaleidoswapBrandConfig, kaleidoswapTokens, makeTheme, nativeType, radius, shadow, themes, transition, typeScale, useKaleidoTheme };

package/dist/native/index.js

@@ -991,13 +991,100 @@ var styles5 = StyleSheet5.create({
   label: { fontSize: 13, marginLeft: 10, fontWeight: "500" }
 });
 
+// src/native/components/chat-bubble.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Text as Text7, StyleSheet as StyleSheet6, Animated as Animated2, Pressable as Pressable4 } from "react-native";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChatBubble({
+  role,
+  avatar,
+  time,
+  animateOnMount = true,
+  onLongPress,
+  maxWidth = "78%",
+  style,
+  children
+}) {
+  const { theme, fontFamily: fontFamily2 } = useKaleidoTheme();
+  const isUser = role === "user";
+  const enter = useRef2(new Animated2.Value(animateOnMount ? 0 : 1)).current;
+  useEffect2(() => {
+    if (!animateOnMount) return;
+    Animated2.spring(enter, { toValue: 1, tension: 120, friction: 9, useNativeDriver: true }).start();
+  }, [enter, animateOnMount]);
+  const bubble = /* @__PURE__ */ jsxs9(
+    Pressable4,
+    {
+      onLongPress,
+      delayLongPress: 300,
+      style: [
+        styles6.bubble,
+        { maxWidth },
+        isUser ? { backgroundColor: theme.primary } : {
+          backgroundColor: theme.card,
+          shadowColor: theme.background,
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.3,
+          shadowRadius: 6,
+          elevation: 3
+        },
+        style
+      ],
+      children: [
+        children,
+        time ? /* @__PURE__ */ jsx17(
+          Text7,
+          {
+            style: [
+              styles6.time,
+              {
+                color: isUser ? theme.text.onAccent : theme.text.muted,
+                fontFamily: fontFamily2,
+                textAlign: isUser ? "right" : "left"
+              }
+            ],
+            children: time
+          }
+        ) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs9(
+    Animated2.View,
+    {
+      style: [
+        styles6.row,
+        { justifyContent: isUser ? "flex-end" : "flex-start" },
+        {
+          opacity: enter,
+          transform: [
+            { translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [14, 0] }) },
+            { translateX: enter.interpolate({ inputRange: [0, 1], outputRange: [isUser ? 22 : -22, 0] }) },
+            { scale: enter.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) }
+          ]
+        }
+      ],
+      children: [
+        !isUser && avatar,
+        bubble,
+        isUser && avatar
+      ]
+    }
+  );
+}
+var styles6 = StyleSheet6.create({
+  row: { flexDirection: "row", alignItems: "flex-end", width: "100%", marginBottom: 16 },
+  bubble: { borderRadius: 24, padding: 16, overflow: "hidden" },
+  time: { fontSize: 12, marginTop: 8, fontWeight: "500" }
+});
+
 // src/native/components/mode-toggle.tsx
-import { Pressable as Pressable4, View as View13 } from "react-native";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { Pressable as Pressable5, View as View14 } from "react-native";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function ModeToggle({ icon, size = 40, onToggle }) {
   const { theme, mode, toggleMode } = useKaleidoTheme();
-  return /* @__PURE__ */ jsx17(
-    Pressable4,
+  return /* @__PURE__ */ jsx18(
+    Pressable5,
     {
       accessibilityRole: "switch",
       accessibilityState: { checked: mode === "dark" },
@@ -1017,7 +1104,7 @@ function ModeToggle({ icon, size = 40, onToggle }) {
         justifyContent: "center",
         opacity: pressed ? 0.85 : 1
       }),
-      children: /* @__PURE__ */ jsx17(View13, { children: icon(mode, theme.text.primary, Math.round(size * 0.5)) })
+      children: /* @__PURE__ */ jsx18(View14, { children: icon(mode, theme.text.primary, Math.round(size * 0.5)) })
     }
   );
 }
@@ -1095,6 +1182,7 @@ export {
   AssetSelector,
   Balance,
   BalanceCard,
+  ChatBubble,
   CryptoAddressInput,
   EmptyState,
   KButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",