kaleido-ui 0.1.52 → 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,
@@ -56,6 +57,7 @@ __export(native_exports, {
   ThemeProvider: () => import_wdk_uikit_react_native2.ThemeProvider,
   TransactionItem: () => import_wdk_uikit_react_native2.TransactionItem,
   TransactionList: () => import_wdk_uikit_react_native2.TransactionList,
+  TypingDots: () => TypingDots,
   colors: () => colors,
   fontFamily: () => fontFamily,
   fontWeight: () => fontWeight,
@@ -999,13 +1001,151 @@ function EmptyState({ title, description, icon, action, style, ...rest }) {
   ] });
 }
 
-// src/native/components/mode-toggle.tsx
+// src/native/components/typing-dots.tsx
+var import_react3 = require("react");
 var import_react_native14 = require("react-native");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+function TypingDots({ label, color, style }) {
+  const { theme, fontFamily: fontFamily2 } = useKaleidoTheme();
+  const dots = (0, import_react3.useRef)([new import_react_native14.Animated.Value(0), new import_react_native14.Animated.Value(0), new import_react_native14.Animated.Value(0)]).current;
+  (0, import_react3.useEffect)(() => {
+    const make = (v) => import_react_native14.Animated.loop(
+      import_react_native14.Animated.sequence([
+        import_react_native14.Animated.timing(v, { toValue: 1, duration: 420, useNativeDriver: true }),
+        import_react_native14.Animated.timing(v, { toValue: 0, duration: 420, useNativeDriver: true }),
+        import_react_native14.Animated.delay(240)
+      ])
+    );
+    const loops = dots.map(make);
+    const timers = dots.map((_, i) => setTimeout(() => loops[i].start(), i * 160));
+    return () => {
+      timers.forEach(clearTimeout);
+      loops.forEach((l) => l.stop());
+    };
+  }, [dots]);
+  const dotColor = color ?? theme.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native14.View, { style: [styles5.row, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.View, { style: styles5.dotsRow, children: dots.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_react_native14.Animated.View,
+      {
+        style: {
+          width: 7,
+          height: 7,
+          borderRadius: 3.5,
+          marginHorizontal: 2.5,
+          backgroundColor: dotColor,
+          opacity: v.interpolate({ inputRange: [0, 1], outputRange: [0.35, 1] }),
+          transform: [
+            { translateY: v.interpolate({ inputRange: [0, 1], outputRange: [0, -5] }) },
+            { scale: v.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1.1] }) }
+          ]
+        }
+      },
+      i
+    )) }),
+    label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.Text, { style: [styles5.label, { color: theme.text.secondary, fontFamily: fontFamily2 }], children: label }) : null
+  ] });
+}
+var styles5 = import_react_native14.StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center" },
+  dotsRow: { flexDirection: "row", alignItems: "center", height: 12 },
+  label: { fontSize: 13, marginLeft: 10, fontWeight: "500" }
+});
+
+// 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_runtime16.jsx)(
-    import_react_native14.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_native16.Pressable,
     {
       accessibilityRole: "switch",
       accessibilityState: { checked: mode === "dark" },
@@ -1025,7 +1165,7 @@ function ModeToggle({ icon, size = 40, onToggle }) {
         justifyContent: "center",
         opacity: pressed ? 0.85 : 1
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.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)) })
     }
   );
 }
@@ -1104,6 +1244,7 @@ var transition = {
   AssetSelector,
   Balance,
   BalanceCard,
+  ChatBubble,
   CryptoAddressInput,
   EmptyState,
   KButton,
@@ -1124,6 +1265,7 @@ var transition = {
   ThemeProvider,
   TransactionItem,
   TransactionList,
+  TypingDots,
   colors,
   fontFamily,
   fontWeight,

package/dist/native/index.d.cts

@@ -370,6 +370,34 @@ interface EmptyStateProps extends ViewProps {
 }
 declare function EmptyState({ title, description, icon, action, style, ...rest }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
+interface TypingDotsProps {
+    /** Optional caption shown next to the dots (e.g. "Thinking on-device…"). */
+    label?: string;
+    /** Dot color override. Defaults to the brand green (`theme.primary`). */
+    color?: string;
+    style?: ViewStyle;
+}
+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;
@@ -563,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, 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

@@ -370,6 +370,34 @@ interface EmptyStateProps extends ViewProps {
 }
 declare function EmptyState({ title, description, icon, action, style, ...rest }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
+interface TypingDotsProps {
+    /** Optional caption shown next to the dots (e.g. "Thinking on-device…"). */
+    label?: string;
+    /** Dot color override. Defaults to the brand green (`theme.primary`). */
+    color?: string;
+    style?: ViewStyle;
+}
+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;
@@ -563,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, 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

@@ -940,13 +940,151 @@ function EmptyState({ title, description, icon, action, style, ...rest }) {
   ] });
 }
 
+// src/native/components/typing-dots.tsx
+import { useEffect, useRef } from "react";
+import { View as View12, Text as Text6, StyleSheet as StyleSheet5, Animated } from "react-native";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function TypingDots({ label, color, style }) {
+  const { theme, fontFamily: fontFamily2 } = useKaleidoTheme();
+  const dots = useRef([new Animated.Value(0), new Animated.Value(0), new Animated.Value(0)]).current;
+  useEffect(() => {
+    const make = (v) => Animated.loop(
+      Animated.sequence([
+        Animated.timing(v, { toValue: 1, duration: 420, useNativeDriver: true }),
+        Animated.timing(v, { toValue: 0, duration: 420, useNativeDriver: true }),
+        Animated.delay(240)
+      ])
+    );
+    const loops = dots.map(make);
+    const timers = dots.map((_, i) => setTimeout(() => loops[i].start(), i * 160));
+    return () => {
+      timers.forEach(clearTimeout);
+      loops.forEach((l) => l.stop());
+    };
+  }, [dots]);
+  const dotColor = color ?? theme.primary;
+  return /* @__PURE__ */ jsxs8(View12, { style: [styles5.row, style], children: [
+    /* @__PURE__ */ jsx16(View12, { style: styles5.dotsRow, children: dots.map((v, i) => /* @__PURE__ */ jsx16(
+      Animated.View,
+      {
+        style: {
+          width: 7,
+          height: 7,
+          borderRadius: 3.5,
+          marginHorizontal: 2.5,
+          backgroundColor: dotColor,
+          opacity: v.interpolate({ inputRange: [0, 1], outputRange: [0.35, 1] }),
+          transform: [
+            { translateY: v.interpolate({ inputRange: [0, 1], outputRange: [0, -5] }) },
+            { scale: v.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1.1] }) }
+          ]
+        }
+      },
+      i
+    )) }),
+    label ? /* @__PURE__ */ jsx16(Text6, { style: [styles5.label, { color: theme.text.secondary, fontFamily: fontFamily2 }], children: label }) : null
+  ] });
+}
+var styles5 = StyleSheet5.create({
+  row: { flexDirection: "row", alignItems: "center" },
+  dotsRow: { flexDirection: "row", alignItems: "center", height: 12 },
+  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 View12 } from "react-native";
-import { jsx as jsx16 } 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__ */ jsx16(
-    Pressable4,
+  return /* @__PURE__ */ jsx18(
+    Pressable5,
     {
       accessibilityRole: "switch",
       accessibilityState: { checked: mode === "dark" },
@@ -966,7 +1104,7 @@ function ModeToggle({ icon, size = 40, onToggle }) {
         justifyContent: "center",
         opacity: pressed ? 0.85 : 1
       }),
-      children: /* @__PURE__ */ jsx16(View12, { 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)) })
     }
   );
 }
@@ -1044,6 +1182,7 @@ export {
   AssetSelector,
   Balance,
   BalanceCard,
+  ChatBubble,
   CryptoAddressInput,
   EmptyState,
   KButton,
@@ -1064,6 +1203,7 @@ export {
   ThemeProvider2 as ThemeProvider,
   TransactionItem,
   TransactionList,
+  TypingDots,
   colors,
   fontFamily,
   fontWeight,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.52",
+  "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",