kaleido-ui 0.1.51 → 0.1.53

package/dist/native/index.cjs

@@ -56,6 +56,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,
@@ -515,9 +516,11 @@ var dark = {
   background: "#0D1813",
   card: "#121C16",
   cardElevated: "#17231C",
-  primary: "#15E99A",
-  primaryFg: "#062318",
-  violet: "#8B5CFF",
+  // Brand primary CTA green — per DESIGN.md `brand.primary`, identical to web.
+  // (#15E99A is the decorative logo brandmark, kept only in gradientBrand / QR.)
+  primary: "#2BEE79",
+  primaryFg: "#051B10",
+  violet: "#6F32FF",
   violetSurface: "rgba(111, 50, 255, 0.18)",
   success: "#2BEE79",
   warning: "#FACC15",
@@ -532,7 +535,8 @@ var dark = {
     secondary: "rgba(255, 255, 255, 0.64)",
     muted: "rgba(255, 255, 255, 0.42)",
     disabled: "rgba(255, 255, 255, 0.26)",
-    onAccent: "#062318",
+    onAccent: "#051B10",
+    // text on brand green — DESIGN.md `text.on-primary`
     onFill: "#FFFFFF"
   },
   border: {
@@ -996,13 +1000,64 @@ 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/mode-toggle.tsx
+var import_react_native15 = require("react-native");
+var import_jsx_runtime17 = 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_runtime17.jsx)(
+    import_react_native15.Pressable,
     {
       accessibilityRole: "switch",
       accessibilityState: { checked: mode === "dark" },
@@ -1022,7 +1077,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_runtime17.jsx)(import_react_native15.View, { children: icon(mode, theme.text.primary, Math.round(size * 0.5)) })
     }
   );
 }
@@ -1121,6 +1176,7 @@ var transition = {
   ThemeProvider,
   TransactionItem,
   TransactionList,
+  TypingDots,
   colors,
   fontFamily,
   fontWeight,

package/dist/native/index.d.cts

@@ -370,6 +370,15 @@ 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;
+
 interface ModeToggleProps {
     icon: (mode: ThemeMode, color: string, size: number) => React.ReactNode;
     size?: number;
@@ -563,4 +572,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, 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,15 @@ 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;
+
 interface ModeToggleProps {
     icon: (mode: ThemeMode, color: string, size: number) => React.ReactNode;
     size?: number;
@@ -563,4 +572,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, 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

@@ -452,9 +452,11 @@ var dark = {
   background: "#0D1813",
   card: "#121C16",
   cardElevated: "#17231C",
-  primary: "#15E99A",
-  primaryFg: "#062318",
-  violet: "#8B5CFF",
+  // Brand primary CTA green — per DESIGN.md `brand.primary`, identical to web.
+  // (#15E99A is the decorative logo brandmark, kept only in gradientBrand / QR.)
+  primary: "#2BEE79",
+  primaryFg: "#051B10",
+  violet: "#6F32FF",
   violetSurface: "rgba(111, 50, 255, 0.18)",
   success: "#2BEE79",
   warning: "#FACC15",
@@ -469,7 +471,8 @@ var dark = {
     secondary: "rgba(255, 255, 255, 0.64)",
     muted: "rgba(255, 255, 255, 0.42)",
     disabled: "rgba(255, 255, 255, 0.26)",
-    onAccent: "#062318",
+    onAccent: "#051B10",
+    // text on brand green — DESIGN.md `text.on-primary`
     onFill: "#FFFFFF"
   },
   border: {
@@ -937,12 +940,63 @@ 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/mode-toggle.tsx
-import { Pressable as Pressable4, View as View12 } from "react-native";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { Pressable as Pressable4, View as View13 } from "react-native";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function ModeToggle({ icon, size = 40, onToggle }) {
   const { theme, mode, toggleMode } = useKaleidoTheme();
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Pressable4,
     {
       accessibilityRole: "switch",
@@ -963,7 +1017,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__ */ jsx17(View13, { children: icon(mode, theme.text.primary, Math.round(size * 0.5)) })
     }
   );
 }
@@ -1061,6 +1115,7 @@ export {
   ThemeProvider2 as ThemeProvider,
   TransactionItem,
   TransactionList,
+  TypingDots,
   colors,
   fontFamily,
   fontWeight,

package/dist/tokens/index.cjs

@@ -379,9 +379,11 @@ var dark = {
   background: "#0D1813",
   card: "#121C16",
   cardElevated: "#17231C",
-  primary: "#15E99A",
-  primaryFg: "#062318",
-  violet: "#8B5CFF",
+  // Brand primary CTA green — per DESIGN.md `brand.primary`, identical to web.
+  // (#15E99A is the decorative logo brandmark, kept only in gradientBrand / QR.)
+  primary: "#2BEE79",
+  primaryFg: "#051B10",
+  violet: "#6F32FF",
   violetSurface: "rgba(111, 50, 255, 0.18)",
   success: "#2BEE79",
   warning: "#FACC15",
@@ -396,7 +398,8 @@ var dark = {
     secondary: "rgba(255, 255, 255, 0.64)",
     muted: "rgba(255, 255, 255, 0.42)",
     disabled: "rgba(255, 255, 255, 0.26)",
-    onAccent: "#062318",
+    onAccent: "#051B10",
+    // text on brand green — DESIGN.md `text.on-primary`
     onFill: "#FFFFFF"
   },
   border: {

package/dist/tokens/index.js

@@ -335,9 +335,11 @@ var dark = {
   background: "#0D1813",
   card: "#121C16",
   cardElevated: "#17231C",
-  primary: "#15E99A",
-  primaryFg: "#062318",
-  violet: "#8B5CFF",
+  // Brand primary CTA green — per DESIGN.md `brand.primary`, identical to web.
+  // (#15E99A is the decorative logo brandmark, kept only in gradientBrand / QR.)
+  primary: "#2BEE79",
+  primaryFg: "#051B10",
+  violet: "#6F32FF",
   violetSurface: "rgba(111, 50, 255, 0.18)",
   success: "#2BEE79",
   warning: "#FACC15",
@@ -352,7 +354,8 @@ var dark = {
     secondary: "rgba(255, 255, 255, 0.64)",
     muted: "rgba(255, 255, 255, 0.42)",
     disabled: "rgba(255, 255, 255, 0.26)",
-    onAccent: "#062318",
+    onAccent: "#051B10",
+    // text on brand green — DESIGN.md `text.on-primary`
     onFill: "#FFFFFF"
   },
   border: {

package/package.json

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