kaleido-ui 0.1.53 → 0.1.55

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,
@@ -53,6 +54,7 @@ __export(native_exports, {
   SectionLabel: () => SectionLabel,
   SeedPhrase: () => import_wdk_uikit_react_native2.SeedPhrase,
   StatusBadge: () => StatusBadge,
+  SuggestionTile: () => SuggestionTile,
   ThemeProvider: () => import_wdk_uikit_react_native2.ThemeProvider,
   TransactionItem: () => import_wdk_uikit_react_native2.TransactionItem,
   TransactionList: () => import_wdk_uikit_react_native2.TransactionList,
@@ -1051,13 +1053,153 @@ 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/suggestion-tile.tsx
+var import_react_native16 = require("react-native");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function SuggestionTile({ title, subtitle, icon, accent, onPress, style }) {
+  const { theme } = useKaleidoTheme();
+  const chipColor = accent ?? theme.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    import_react_native16.Pressable,
+    {
+      onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: title,
+      accessibilityHint: subtitle,
+      style: ({ pressed }) => [
+        styles7.card,
+        {
+          backgroundColor: theme.card,
+          borderColor: theme.border.subtle,
+          opacity: pressed ? 0.85 : 1
+        },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.View, { style: [styles7.chip, { backgroundColor: chipColor }], children: icon(theme.text.onFill, 18) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native16.View, { style: styles7.textArea, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KText, { variant: "caption", weight: "semibold", numberOfLines: 1, children: title }),
+          subtitle ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(KText, { variant: "tiny", tone: "muted", numberOfLines: 2, style: { marginTop: 2 }, children: subtitle }) : null
+        ] })
+      ]
+    }
+  );
+}
+var styles7 = import_react_native16.StyleSheet.create({
+  card: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+    borderWidth: 1
+  },
+  chip: {
+    width: 36,
+    height: 36,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  textArea: { flex: 1 }
+});
+
+// src/native/components/mode-toggle.tsx
+var import_react_native17 = require("react-native");
+var import_jsx_runtime19 = 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_runtime19.jsx)(
+    import_react_native17.Pressable,
     {
       accessibilityRole: "switch",
       accessibilityState: { checked: mode === "dark" },
@@ -1077,7 +1219,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_runtime19.jsx)(import_react_native17.View, { children: icon(mode, theme.text.primary, Math.round(size * 0.5)) })
     }
   );
 }
@@ -1156,6 +1298,7 @@ var transition = {
   AssetSelector,
   Balance,
   BalanceCard,
+  ChatBubble,
   CryptoAddressInput,
   EmptyState,
   KButton,
@@ -1173,6 +1316,7 @@ var transition = {
   SectionLabel,
   SeedPhrase,
   StatusBadge,
+  SuggestionTile,
   ThemeProvider,
   TransactionItem,
   TransactionList,

package/dist/native/index.d.cts

@@ -379,6 +379,37 @@ 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 SuggestionTileProps {
+    title: string;
+    subtitle?: string;
+    /** Glyph renderer — receives the themed glyph color + size. */
+    icon: (color: string, size: number) => ReactNode;
+    /** Icon-chip background. Defaults to the brand green. */
+    accent?: string;
+    onPress?: () => void;
+    style?: ViewStyle;
+}
+declare function SuggestionTile({ title, subtitle, icon, accent, onPress, style }: SuggestionTileProps): react_jsx_runtime.JSX.Element;
+
 interface ModeToggleProps {
     icon: (mode: ThemeMode, color: string, size: number) => React.ReactNode;
     size?: number;
@@ -572,4 +603,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, SuggestionTile, type SuggestionTileProps, 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,37 @@ 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 SuggestionTileProps {
+    title: string;
+    subtitle?: string;
+    /** Glyph renderer — receives the themed glyph color + size. */
+    icon: (color: string, size: number) => ReactNode;
+    /** Icon-chip background. Defaults to the brand green. */
+    accent?: string;
+    onPress?: () => void;
+    style?: ViewStyle;
+}
+declare function SuggestionTile({ title, subtitle, icon, accent, onPress, style }: SuggestionTileProps): react_jsx_runtime.JSX.Element;
+
 interface ModeToggleProps {
     icon: (mode: ThemeMode, color: string, size: number) => React.ReactNode;
     size?: number;
@@ -572,4 +603,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, SuggestionTile, type SuggestionTileProps, 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,153 @@ 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/suggestion-tile.tsx
+import { Pressable as Pressable5, View as View14, StyleSheet as StyleSheet7 } from "react-native";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+function SuggestionTile({ title, subtitle, icon, accent, onPress, style }) {
+  const { theme } = useKaleidoTheme();
+  const chipColor = accent ?? theme.primary;
+  return /* @__PURE__ */ jsxs10(
+    Pressable5,
+    {
+      onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: title,
+      accessibilityHint: subtitle,
+      style: ({ pressed }) => [
+        styles7.card,
+        {
+          backgroundColor: theme.card,
+          borderColor: theme.border.subtle,
+          opacity: pressed ? 0.85 : 1
+        },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx18(View14, { style: [styles7.chip, { backgroundColor: chipColor }], children: icon(theme.text.onFill, 18) }),
+        /* @__PURE__ */ jsxs10(View14, { style: styles7.textArea, children: [
+          /* @__PURE__ */ jsx18(KText, { variant: "caption", weight: "semibold", numberOfLines: 1, children: title }),
+          subtitle ? /* @__PURE__ */ jsx18(KText, { variant: "tiny", tone: "muted", numberOfLines: 2, style: { marginTop: 2 }, children: subtitle }) : null
+        ] })
+      ]
+    }
+  );
+}
+var styles7 = StyleSheet7.create({
+  card: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+    borderWidth: 1
+  },
+  chip: {
+    width: 36,
+    height: 36,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  textArea: { flex: 1 }
+});
+
 // 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 Pressable6, View as View15 } from "react-native";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function ModeToggle({ icon, size = 40, onToggle }) {
   const { theme, mode, toggleMode } = useKaleidoTheme();
-  return /* @__PURE__ */ jsx17(
-    Pressable4,
+  return /* @__PURE__ */ jsx19(
+    Pressable6,
     {
       accessibilityRole: "switch",
       accessibilityState: { checked: mode === "dark" },
@@ -1017,7 +1157,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__ */ jsx19(View15, { children: icon(mode, theme.text.primary, Math.round(size * 0.5)) })
     }
   );
 }
@@ -1095,6 +1235,7 @@ export {
   AssetSelector,
   Balance,
   BalanceCard,
+  ChatBubble,
   CryptoAddressInput,
   EmptyState,
   KButton,
@@ -1112,6 +1253,7 @@ export {
   SectionLabel,
   SeedPhrase,
   StatusBadge,
+  SuggestionTile,
   ThemeProvider2 as ThemeProvider,
   TransactionItem,
   TransactionList,

package/package.json

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