kaleido-ui 0.1.54 → 0.1.56

package/dist/native/index.cjs

@@ -54,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,
@@ -514,9 +515,10 @@ var NETWORK_GLYPH = {
 };
 var dark = {
   mode: "dark",
-  background: "#0D1813",
-  card: "#121C16",
-  cardElevated: "#17231C",
+  // Dark-blue surface family (navy derived from the brand info blue #4290FF).
+  background: "#0A1326",
+  card: "#0F1C33",
+  cardElevated: "#16273F",
   // 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",
@@ -1139,13 +1141,66 @@ var styles6 = import_react_native15.StyleSheet.create({
   time: { fontSize: 12, marginTop: 8, fontWeight: "500" }
 });
 
-// src/native/components/mode-toggle.tsx
+// 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_runtime18.jsx)(
-    import_react_native16.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_react_native17.Pressable,
     {
       accessibilityRole: "switch",
       accessibilityState: { checked: mode === "dark" },
@@ -1165,7 +1220,7 @@ function ModeToggle({ icon, size = 40, onToggle }) {
         justifyContent: "center",
         opacity: pressed ? 0.85 : 1
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native16.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)) })
     }
   );
 }
@@ -1262,6 +1317,7 @@ var transition = {
   SectionLabel,
   SeedPhrase,
   StatusBadge,
+  SuggestionTile,
   ThemeProvider,
   TransactionItem,
   TransactionList,

package/dist/native/index.d.cts

@@ -398,6 +398,18 @@ interface ChatBubbleProps {
 }
 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;
@@ -591,4 +603,4 @@ declare const transition: {
     readonly slow: "300ms ease-out";
 };
 
-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 };
+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

@@ -398,6 +398,18 @@ interface ChatBubbleProps {
 }
 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;
@@ -591,4 +603,4 @@ declare const transition: {
     readonly slow: "300ms ease-out";
 };
 
-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 };
+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

@@ -449,9 +449,10 @@ var NETWORK_GLYPH = {
 };
 var dark = {
   mode: "dark",
-  background: "#0D1813",
-  card: "#121C16",
-  cardElevated: "#17231C",
+  // Dark-blue surface family (navy derived from the brand info blue #4290FF).
+  background: "#0A1326",
+  card: "#0F1C33",
+  cardElevated: "#16273F",
   // 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",
@@ -1078,13 +1079,66 @@ var styles6 = StyleSheet6.create({
   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 Pressable5, View as View14 } from "react-native";
-import { jsx as jsx18 } 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__ */ jsx18(
-    Pressable5,
+  return /* @__PURE__ */ jsx19(
+    Pressable6,
     {
       accessibilityRole: "switch",
       accessibilityState: { checked: mode === "dark" },
@@ -1104,7 +1158,7 @@ function ModeToggle({ icon, size = 40, onToggle }) {
         justifyContent: "center",
         opacity: pressed ? 0.85 : 1
       }),
-      children: /* @__PURE__ */ jsx18(View14, { 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)) })
     }
   );
 }
@@ -1200,6 +1254,7 @@ export {
   SectionLabel,
   SeedPhrase,
   StatusBadge,
+  SuggestionTile,
   ThemeProvider2 as ThemeProvider,
   TransactionItem,
   TransactionList,

package/dist/tokens/index.cjs

@@ -376,9 +376,10 @@ var NETWORK_GLYPH = {
 };
 var dark = {
   mode: "dark",
-  background: "#0D1813",
-  card: "#121C16",
-  cardElevated: "#17231C",
+  // Dark-blue surface family (navy derived from the brand info blue #4290FF).
+  background: "#0A1326",
+  card: "#0F1C33",
+  cardElevated: "#16273F",
   // 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",

package/dist/tokens/index.js

@@ -332,9 +332,10 @@ var NETWORK_GLYPH = {
 };
 var dark = {
   mode: "dark",
-  background: "#0D1813",
-  card: "#121C16",
-  cardElevated: "#17231C",
+  // Dark-blue surface family (navy derived from the brand info blue #4290FF).
+  background: "#0A1326",
+  card: "#0F1C33",
+  cardElevated: "#16273F",
   // 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",

package/package.json

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