kaleido-ui 0.1.46 → 0.1.49

package/dist/native/index.js

@@ -170,9 +170,149 @@ import {
   useTheme
 } from "@tetherto/wdk-uikit-react-native";
 
+// src/native/components/qr-code.tsx
+import { useMemo } from "react";
+import { View } from "react-native";
+import Svg, { Rect, Circle, G, Path } from "react-native-svg";
+import encodeQR from "qr";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function isFinderPattern(row, col, size) {
+  if (row < 7 && col < 7) return true;
+  if (row < 7 && col >= size - 7) return true;
+  if (row >= size - 7 && col < 7) return true;
+  return false;
+}
+function isLogoZone(row, col, size, logoModules) {
+  const center = size / 2;
+  const half = logoModules / 2;
+  return row >= center - half && row < center + half && col >= center - half && col < center + half;
+}
+function renderFinderPattern(originX, originY, moduleSize, fg, bg, key) {
+  const r = moduleSize * 0.6;
+  return [
+    /* @__PURE__ */ jsx2(
+      Rect,
+      {
+        x: originX,
+        y: originY,
+        width: moduleSize * 7,
+        height: moduleSize * 7,
+        rx: r * 2.5,
+        ry: r * 2.5,
+        fill: fg
+      },
+      `${key}-o`
+    ),
+    /* @__PURE__ */ jsx2(
+      Rect,
+      {
+        x: originX + moduleSize,
+        y: originY + moduleSize,
+        width: moduleSize * 5,
+        height: moduleSize * 5,
+        rx: r * 1.8,
+        ry: r * 1.8,
+        fill: bg
+      },
+      `${key}-i`
+    ),
+    /* @__PURE__ */ jsx2(
+      Rect,
+      {
+        x: originX + moduleSize * 2,
+        y: originY + moduleSize * 2,
+        width: moduleSize * 3,
+        height: moduleSize * 3,
+        rx: r * 1.2,
+        ry: r * 1.2,
+        fill: fg
+      },
+      `${key}-c`
+    )
+  ];
+}
+var LOGO_VIEWBOX = 412;
+var LogoPaths = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx2(Path, { d: "M137.306 411.865H0.000244141L68.6795 343.29L137.306 411.865Z", fill: "#6F32FF" }),
+  /* @__PURE__ */ jsx2(Path, { d: "M0 0H137.306L68.6267 68.574L0 0Z", fill: "#6F32FF" }),
+  /* @__PURE__ */ jsx2(Path, { d: "M137.148 274.559H274.455L411.708 411.866H274.401L137.148 274.559Z", fill: "#17B581" }),
+  /* @__PURE__ */ jsx2(
+    Path,
+    {
+      d: "M137.149 274.559L68.6274 205.933L137.201 137.306L274.455 137.411L205.776 206.038L274.456 274.559H137.149Z",
+      fill: "#15E99A"
+    }
+  ),
+  /* @__PURE__ */ jsx2(Path, { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
+] });
+function QrCode({
+  value,
+  size = 160,
+  color = "#040404",
+  backgroundColor = "#ffffff"
+}) {
+  const { elements, svgSize } = useMemo(() => {
+    if (!value) return { elements: [], svgSize: 0 };
+    const matrix = encodeQR(value, "raw", { ecc: "medium", border: 0 });
+    const n = matrix.length;
+    const moduleSize = 10;
+    const quietZone = moduleSize * 2;
+    const computedSize = n * moduleSize + quietZone * 2;
+    const fg = color;
+    const bg = backgroundColor;
+    const logoModules = Math.ceil(n * 0.2);
+    const logoZoneSize = logoModules % 2 === 0 ? logoModules + 1 : logoModules;
+    const els = [];
+    const dotRadius = moduleSize * 0.42;
+    for (let row = 0; row < n; row++) {
+      for (let col = 0; col < n; col++) {
+        if (isFinderPattern(row, col, n)) continue;
+        if (isLogoZone(row, col, n, logoZoneSize)) continue;
+        if (!matrix[row][col]) continue;
+        const cx = quietZone + col * moduleSize + moduleSize / 2;
+        const cy = quietZone + row * moduleSize + moduleSize / 2;
+        els.push(/* @__PURE__ */ jsx2(Circle, { cx, cy, r: dotRadius, fill: fg }, `d-${row}-${col}`));
+      }
+    }
+    const finderPositions = [
+      [0, 0],
+      [0, n - 7],
+      [n - 7, 0]
+    ];
+    for (const [r, c] of finderPositions) {
+      els.push(
+        ...renderFinderPattern(
+          quietZone + c * moduleSize,
+          quietZone + r * moduleSize,
+          moduleSize,
+          fg,
+          bg,
+          `fp-${r}-${c}`
+        )
+      );
+    }
+    const centerX = quietZone + n * moduleSize / 2;
+    const centerY = quietZone + n * moduleSize / 2;
+    const logoCircleR = logoZoneSize * moduleSize * 0.52;
+    els.push(/* @__PURE__ */ jsx2(Circle, { cx: centerX, cy: centerY, r: logoCircleR, fill: bg }, "logo-bg"));
+    const logoBox = logoCircleR * 1.35;
+    const logoX = centerX - logoBox / 2;
+    const logoY = centerY - logoBox / 2;
+    const scale = logoBox / LOGO_VIEWBOX;
+    els.push(
+      /* @__PURE__ */ jsx2(G, { transform: `translate(${logoX}, ${logoY}) scale(${scale})`, children: /* @__PURE__ */ jsx2(LogoPaths, {}) }, "logo")
+    );
+    return { elements: els, svgSize: computedSize };
+  }, [value, color, backgroundColor]);
+  if (!value || svgSize === 0) {
+    return /* @__PURE__ */ jsx2(View, { style: { width: size, height: size } });
+  }
+  return /* @__PURE__ */ jsx2(View, { style: { width: size, height: size }, children: /* @__PURE__ */ jsx2(Svg, { width: size, height: size, viewBox: `0 0 ${svgSize} ${svgSize}`, children: elements }) });
+}
+
 // src/native/components/status-badge.tsx
-import { View, Text, StyleSheet } from "react-native";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { View as View2, Text, StyleSheet } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var statusConfig = {
   success: { color: colors.primary, bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, label: "Success" },
   completed: { color: colors.primary, bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, label: "Completed" },
@@ -182,7 +322,7 @@ var statusConfig = {
 };
 function StatusBadge({ status, style }) {
   const config = statusConfig[status];
-  return /* @__PURE__ */ jsx2(View, { style: [styles.container, { backgroundColor: config.bg, borderColor: config.borderColor }, style], children: /* @__PURE__ */ jsx2(Text, { style: [styles.label, { color: config.color }], children: config.label }) });
+  return /* @__PURE__ */ jsx3(View2, { style: [styles.container, { backgroundColor: config.bg, borderColor: config.borderColor }, style], children: /* @__PURE__ */ jsx3(Text, { style: [styles.label, { color: config.color }], children: config.label }) });
 }
 var styles = StyleSheet.create({
   container: {
@@ -200,8 +340,8 @@ var styles = StyleSheet.create({
 });
 
 // src/native/components/network-badge.tsx
-import { View as View2, Text as Text2, StyleSheet as StyleSheet2 } from "react-native";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { View as View3, Text as Text2, StyleSheet as StyleSheet2 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var networkConfig = {
   L1: { color: colors.network.bitcoin, label: "L1" },
   LN: { color: colors.network.lightning, label: "LN" },
@@ -214,7 +354,7 @@ var networkConfig = {
 };
 function NetworkBadge({ network, style }) {
   const config = networkConfig[network];
-  return /* @__PURE__ */ jsx3(View2, { style: [styles2.container, { backgroundColor: `${config.color}1A`, borderColor: `${config.color}33` }, style], children: /* @__PURE__ */ jsx3(Text2, { style: [styles2.label, { color: config.color }], children: config.label }) });
+  return /* @__PURE__ */ jsx4(View3, { style: [styles2.container, { backgroundColor: `${config.color}1A`, borderColor: `${config.color}33` }, style], children: /* @__PURE__ */ jsx4(Text2, { style: [styles2.label, { color: config.color }], children: config.label }) });
 }
 var styles2 = StyleSheet2.create({
   container: {
@@ -233,8 +373,8 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/native/components/alert-banner.tsx
-import { View as View3, Text as Text3, StyleSheet as StyleSheet3 } from "react-native";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { View as View4, Text as Text3, StyleSheet as StyleSheet3 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var variantConfig = {
   error: { bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, iconColor: colors.danger },
   warning: { bg: `${colors.warning}1A`, borderColor: `${colors.warning}33`, iconColor: colors.warning },
@@ -243,7 +383,7 @@ var variantConfig = {
 };
 function AlertBanner({ variant = "info", children, style }) {
   const config = variantConfig[variant];
-  return /* @__PURE__ */ jsx4(View3, { style: [styles3.container, { backgroundColor: config.bg, borderColor: config.borderColor }, style], children: typeof children === "string" ? /* @__PURE__ */ jsx4(Text3, { style: styles3.text, children }) : children });
+  return /* @__PURE__ */ jsx5(View4, { style: [styles3.container, { backgroundColor: config.bg, borderColor: config.borderColor }, style], children: typeof children === "string" ? /* @__PURE__ */ jsx5(Text3, { style: styles3.text, children }) : children });
 }
 var styles3 = StyleSheet3.create({
   container: {
@@ -263,9 +403,9 @@ var styles3 = StyleSheet3.create({
 
 // src/native/components/section-label.tsx
 import { Text as Text4, StyleSheet as StyleSheet4 } from "react-native";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function SectionLabel({ children, style }) {
-  return /* @__PURE__ */ jsx5(Text4, { style: [styles4.label, style], children: typeof children === "string" ? children.toUpperCase() : children });
+  return /* @__PURE__ */ jsx6(Text4, { style: [styles4.label, style], children: typeof children === "string" ? children.toUpperCase() : children });
 }
 var styles4 = StyleSheet4.create({
   label: {
@@ -276,6 +416,551 @@ var styles4 = StyleSheet4.create({
   }
 });
 
+// src/native/theme-context.tsx
+import { createContext, useContext, useMemo as useMemo2, useState } from "react";
+
+// src/tokens/theme.ts
+var nativeType = {
+  mini: { size: 9, line: 12 },
+  xxs: { size: 10, line: 14 },
+  tiny: { size: 11, line: 16 },
+  caption: { size: 13, line: 18 },
+  body: { size: 15, line: 22 },
+  subhead: { size: 17, line: 24 },
+  title: { size: 20, line: 28 },
+  headline: { size: 28, line: 34 },
+  display: { size: 36, line: 40 },
+  hero: { size: 44, line: 48 }
+};
+var NETWORK_GLYPH = {
+  bitcoin: "#F7931A",
+  lightning: "#F6C343",
+  spark: "#FF6D00",
+  rgb: "#DD352E",
+  arkade: "#7C3AED",
+  liquid: "#22E1C9"
+};
+var dark = {
+  mode: "dark",
+  background: "#0D1813",
+  card: "#121C16",
+  cardElevated: "#17231C",
+  primary: "#15E99A",
+  primaryFg: "#062318",
+  violet: "#8B5CFF",
+  violetSurface: "rgba(111, 50, 255, 0.18)",
+  success: "#2BEE79",
+  warning: "#FACC15",
+  danger: "#F94040",
+  info: "#4290FF",
+  successSurface: "rgba(43, 238, 121, 0.14)",
+  warningSurface: "rgba(250, 204, 21, 0.14)",
+  dangerSurface: "rgba(249, 64, 64, 0.14)",
+  infoSurface: "rgba(66, 144, 255, 0.14)",
+  text: {
+    primary: "#FFFFFF",
+    secondary: "rgba(255, 255, 255, 0.64)",
+    muted: "rgba(255, 255, 255, 0.42)",
+    disabled: "rgba(255, 255, 255, 0.26)",
+    onAccent: "#062318",
+    onFill: "#FFFFFF"
+  },
+  border: {
+    subtle: "rgba(255, 255, 255, 0.06)",
+    default: "rgba(255, 255, 255, 0.10)",
+    strong: "rgba(255, 255, 255, 0.16)"
+  },
+  surface: {
+    base: "rgba(255, 255, 255, 0.03)",
+    raised: "rgba(255, 255, 255, 0.06)",
+    sunken: "rgba(0, 0, 0, 0.22)",
+    overlay: "rgba(0, 0, 0, 0.55)",
+    scrim: "rgba(0, 0, 0, 0.70)"
+  },
+  network: NETWORK_GLYPH,
+  networkSurface: {
+    bitcoin: "#3A2D18",
+    lightning: "#39351A",
+    spark: "#3A2A1C",
+    rgb: "#3C2422",
+    arkade: "#2E2548",
+    liquid: "#0E2A2C"
+  },
+  tx: { sent: "#F94040", receive: "#2BEE79", swap: "#4290FF" },
+  gradientBrand: ["#15E99A", "#6F32FF"]
+};
+var light = {
+  mode: "light",
+  background: "#F4F5F2",
+  card: "#FFFFFF",
+  cardElevated: "#FFFFFF",
+  primary: "#13D88E",
+  primaryFg: "#04231A",
+  violet: "#6F32FF",
+  violetSurface: "rgba(111, 50, 255, 0.12)",
+  success: "#0FB67C",
+  warning: "#C8881A",
+  danger: "#E2403B",
+  info: "#2F73E0",
+  successSurface: "rgba(15, 182, 124, 0.12)",
+  warningSurface: "rgba(200, 136, 26, 0.12)",
+  dangerSurface: "rgba(226, 64, 59, 0.12)",
+  infoSurface: "rgba(47, 115, 224, 0.12)",
+  text: {
+    primary: "#0D1813",
+    secondary: "rgba(13, 24, 19, 0.62)",
+    muted: "rgba(13, 24, 19, 0.44)",
+    disabled: "rgba(13, 24, 19, 0.26)",
+    onAccent: "#04231A",
+    onFill: "#FFFFFF"
+  },
+  border: {
+    subtle: "rgba(13, 24, 19, 0.06)",
+    default: "rgba(13, 24, 19, 0.10)",
+    strong: "rgba(13, 24, 19, 0.16)"
+  },
+  surface: {
+    base: "rgba(13, 24, 19, 0.02)",
+    raised: "rgba(13, 24, 19, 0.04)",
+    sunken: "rgba(13, 24, 19, 0.04)",
+    overlay: "rgba(13, 24, 19, 0.40)",
+    scrim: "rgba(13, 24, 19, 0.55)"
+  },
+  network: NETWORK_GLYPH,
+  networkSurface: {
+    bitcoin: "#FBEFD9",
+    lightning: "#FCF6D6",
+    spark: "#FFE7D6",
+    rgb: "#FBE3E1",
+    arkade: "#ECE4FF",
+    liquid: "#D8F5F1"
+  },
+  tx: { sent: "#E2403B", receive: "#0FB67C", swap: "#2F73E0" },
+  gradientBrand: ["#15E99A", "#6F32FF"]
+};
+var themes = { light, dark };
+function makeTheme(mode) {
+  return themes[mode];
+}
+
+// src/native/theme-context.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var KaleidoThemeContext = createContext(null);
+function KaleidoUIProvider({
+  children,
+  mode: controlledMode,
+  defaultMode = "dark",
+  onModeChange,
+  fontFamily: fontFamily2
+}) {
+  const [internalMode, setInternalMode] = useState(defaultMode);
+  const activeMode = controlledMode ?? internalMode;
+  const setMode = (next) => {
+    if (controlledMode === void 0) setInternalMode(next);
+    onModeChange?.(next);
+  };
+  const toggleMode = () => setMode(activeMode === "dark" ? "light" : "dark");
+  const value = useMemo2(
+    () => ({ theme: makeTheme(activeMode), mode: activeMode, fontFamily: fontFamily2, setMode, toggleMode }),
+    // setMode/toggleMode are stable enough for this context's purpose
+    [activeMode, fontFamily2]
+  );
+  return /* @__PURE__ */ jsx7(KaleidoThemeContext.Provider, { value, children });
+}
+function useKaleidoTheme() {
+  const ctx = useContext(KaleidoThemeContext);
+  if (ctx) return ctx;
+  return {
+    theme: makeTheme("dark"),
+    mode: "dark",
+    fontFamily: void 0,
+    setMode: () => {
+    },
+    toggleMode: () => {
+    }
+  };
+}
+
+// src/native/components/k-text.tsx
+import { Text as Text5 } from "react-native";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var WEIGHT_MAP = {
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+function KText({
+  variant = "body",
+  weight = "normal",
+  tone = "primary",
+  color,
+  eyebrow = false,
+  center = false,
+  style,
+  children,
+  ...rest
+}) {
+  const { theme, fontFamily: fontFamily2 } = useKaleidoTheme();
+  const scale = nativeType[variant];
+  const toneColor = color ?? (tone === "accent" ? theme.primary : tone === "violet" ? theme.violet : tone === "success" ? theme.success : tone === "warning" ? theme.warning : tone === "danger" ? theme.danger : theme.text[tone]);
+  const tracking = eyebrow ? 1.2 : scale.size >= 28 ? -0.5 : 0;
+  return /* @__PURE__ */ jsx8(
+    Text5,
+    {
+      ...rest,
+      style: [
+        {
+          fontFamily: fontFamily2,
+          fontSize: scale.size,
+          lineHeight: scale.line,
+          fontWeight: WEIGHT_MAP[weight],
+          color: toneColor,
+          letterSpacing: tracking,
+          textAlign: center ? "center" : void 0,
+          textTransform: eyebrow ? "uppercase" : void 0
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+
+// src/native/components/k-screen.tsx
+import { StatusBar, View as View5 } from "react-native";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+function KScreen({ elevated = false, style, children, ...rest }) {
+  const { theme, mode } = useKaleidoTheme();
+  return /* @__PURE__ */ jsxs2(
+    View5,
+    {
+      ...rest,
+      style: [{ flex: 1, backgroundColor: elevated ? theme.card : theme.background }, style],
+      children: [
+        /* @__PURE__ */ jsx9(
+          StatusBar,
+          {
+            barStyle: mode === "dark" ? "light-content" : "dark-content",
+            backgroundColor: "transparent",
+            translucent: true
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/native/components/k-card.tsx
+import { View as View6 } from "react-native";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function KCard({
+  variant = "default",
+  padding = 16,
+  radius: radius2 = 16,
+  bordered = true,
+  style,
+  children,
+  ...rest
+}) {
+  const { theme } = useKaleidoTheme();
+  const backgroundColor = variant === "elevated" ? theme.cardElevated : variant === "inset" ? theme.surface.base : variant === "outline" ? "transparent" : theme.card;
+  return /* @__PURE__ */ jsx10(
+    View6,
+    {
+      ...rest,
+      style: [
+        {
+          backgroundColor,
+          borderRadius: radius2,
+          padding,
+          borderWidth: bordered ? 1 : 0,
+          borderColor: theme.border.subtle
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+
+// src/native/components/k-button.tsx
+import {
+  ActivityIndicator,
+  Pressable,
+  View as View7
+} from "react-native";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var SIZE = {
+  sm: { h: 40, px: 16, type: "caption" },
+  md: { h: 52, px: 20, type: "body" },
+  lg: { h: 58, px: 24, type: "subhead" }
+};
+function KButton({
+  label,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  fullWidth = false,
+  leading,
+  disabled,
+  style,
+  ...rest
+}) {
+  const { theme } = useKaleidoTheme();
+  const s = SIZE[size];
+  const isDisabled = disabled || loading;
+  const palette = (pressed) => {
+    switch (variant) {
+      case "secondary":
+        return { bg: pressed ? theme.surface.raised : "transparent", border: theme.border.strong, fg: theme.text.primary };
+      case "violet":
+        return { bg: theme.violet, border: theme.violet, fg: theme.text.onFill };
+      case "ghost":
+        return { bg: pressed ? theme.surface.base : "transparent", border: "transparent", fg: theme.primary };
+      case "danger":
+        return { bg: theme.danger, border: theme.danger, fg: theme.text.onFill };
+      case "primary":
+      default:
+        return { bg: theme.primary, border: theme.primary, fg: theme.primaryFg };
+    }
+  };
+  return /* @__PURE__ */ jsx11(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { disabled: !!isDisabled, busy: loading },
+      disabled: isDisabled,
+      style: ({ pressed }) => {
+        const p = palette(pressed);
+        return {
+          height: s.h,
+          paddingHorizontal: s.px,
+          borderRadius: 14,
+          borderWidth: 1,
+          borderColor: p.border,
+          backgroundColor: p.bg,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          alignSelf: fullWidth ? "stretch" : "flex-start",
+          opacity: isDisabled ? 0.45 : pressed ? 0.92 : 1,
+          ...style
+        };
+      },
+      ...rest,
+      children: loading ? /* @__PURE__ */ jsx11(ActivityIndicator, { color: palette(false).fg }) : /* @__PURE__ */ jsxs3(View7, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+        leading,
+        /* @__PURE__ */ jsx11(KText, { variant: s.type, weight: "bold", color: palette(false).fg, children: label })
+      ] })
+    }
+  );
+}
+
+// src/native/components/action-button.tsx
+import { Pressable as Pressable2, View as View8 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+function ActionButton({
+  label,
+  icon,
+  onPress,
+  tone = "neutral",
+  filled = false,
+  disabled = false,
+  size = 56
+}) {
+  const { theme } = useKaleidoTheme();
+  const accent = tone === "violet" ? theme.violet : tone === "primary" ? theme.primary : theme.text.primary;
+  const tileBg = filled ? accent : theme.surface.raised;
+  const glyphColor = filled ? tone === "violet" ? theme.text.onFill : theme.primaryFg : accent;
+  return /* @__PURE__ */ jsxs4(
+    Pressable2,
+    {
+      onPress,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      style: ({ pressed }) => ({
+        alignItems: "center",
+        gap: 8,
+        opacity: disabled ? 0.4 : pressed ? 0.85 : 1
+      }),
+      children: [
+        /* @__PURE__ */ jsx12(
+          View8,
+          {
+            style: {
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              backgroundColor: tileBg,
+              borderWidth: filled ? 0 : 1,
+              borderColor: theme.border.subtle,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: icon(glyphColor, Math.round(size * 0.42))
+          }
+        ),
+        /* @__PURE__ */ jsx12(KText, { variant: "caption", weight: "medium", tone: "secondary", children: label })
+      ]
+    }
+  );
+}
+
+// src/native/components/balance-card.tsx
+import { View as View9 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function BalanceCard({
+  label = "Total Balance",
+  amount,
+  unit,
+  fiat,
+  footer,
+  style,
+  ...rest
+}) {
+  const { theme } = useKaleidoTheme();
+  return /* @__PURE__ */ jsxs5(View9, { ...rest, style: [{ alignItems: "center", gap: 6 }, style], children: [
+    !!label && /* @__PURE__ */ jsx13(KText, { variant: "caption", weight: "medium", tone: "muted", eyebrow: true, children: label }),
+    /* @__PURE__ */ jsxs5(View9, { style: { flexDirection: "row", alignItems: "baseline", gap: 8 }, children: [
+      /* @__PURE__ */ jsx13(KText, { variant: "hero", weight: "bold", tone: "primary", children: amount }),
+      !!unit && /* @__PURE__ */ jsx13(KText, { variant: "title", weight: "medium", tone: "secondary", children: unit })
+    ] }),
+    !!fiat && /* @__PURE__ */ jsx13(KText, { variant: "body", weight: "medium", color: theme.text.muted, children: fiat }),
+    footer
+  ] });
+}
+
+// src/native/components/network-chip.tsx
+import { Pressable as Pressable3, View as View10 } from "react-native";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+function NetworkChip({
+  network,
+  title,
+  subtitle,
+  selected = false,
+  onPress,
+  icon,
+  dot = false
+}) {
+  const { theme } = useKaleidoTheme();
+  const glyph = network ? theme.network[network] : theme.text.secondary;
+  const glyphBg = network ? theme.networkSurface[network] : theme.surface.raised;
+  return /* @__PURE__ */ jsxs6(
+    Pressable3,
+    {
+      onPress,
+      accessibilityRole: "button",
+      accessibilityState: { selected },
+      style: ({ pressed }) => ({
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        borderRadius: 14,
+        backgroundColor: selected ? theme.violetSurface : theme.surface.base,
+        borderWidth: 1.5,
+        borderColor: selected ? theme.violet : theme.border.subtle,
+        opacity: pressed ? 0.9 : 1
+      }),
+      children: [
+        icon && /* @__PURE__ */ jsx14(
+          View10,
+          {
+            style: {
+              width: 30,
+              height: 30,
+              borderRadius: 15,
+              backgroundColor: glyphBg,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: icon(glyph, 16)
+          }
+        ),
+        /* @__PURE__ */ jsxs6(View10, { style: { gap: 1 }, children: [
+          /* @__PURE__ */ jsx14(KText, { variant: "caption", weight: "bold", color: selected ? theme.violet : theme.text.primary, children: title }),
+          !!subtitle && /* @__PURE__ */ jsx14(KText, { variant: "mini", weight: "medium", tone: "muted", children: subtitle })
+        ] }),
+        dot && /* @__PURE__ */ jsx14(
+          View10,
+          {
+            style: {
+              width: 7,
+              height: 7,
+              borderRadius: 4,
+              backgroundColor: theme.primary,
+              marginLeft: 2
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/native/components/empty-state.tsx
+import { View as View11 } from "react-native";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+function EmptyState({ title, description, icon, action, style, ...rest }) {
+  const { theme } = useKaleidoTheme();
+  return /* @__PURE__ */ jsxs7(View11, { ...rest, style: [{ alignItems: "center", paddingVertical: 36, gap: 12 }, style], children: [
+    icon && /* @__PURE__ */ jsx15(
+      View11,
+      {
+        style: {
+          width: 64,
+          height: 64,
+          borderRadius: 32,
+          backgroundColor: theme.surface.raised,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: icon(theme.text.muted, 28)
+      }
+    ),
+    /* @__PURE__ */ jsxs7(View11, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx15(KText, { variant: "subhead", weight: "bold", tone: "primary", center: true, children: title }),
+      !!description && /* @__PURE__ */ jsx15(KText, { variant: "caption", tone: "muted", center: true, children: description })
+    ] }),
+    action
+  ] });
+}
+
+// src/native/components/mode-toggle.tsx
+import { Pressable as Pressable4, View as View12 } from "react-native";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function ModeToggle({ icon, size = 40, onToggle }) {
+  const { theme, mode, toggleMode } = useKaleidoTheme();
+  return /* @__PURE__ */ jsx16(
+    Pressable4,
+    {
+      accessibilityRole: "switch",
+      accessibilityState: { checked: mode === "dark" },
+      accessibilityLabel: mode === "dark" ? "Switch to light mode" : "Switch to dark mode",
+      onPress: () => {
+        toggleMode();
+        onToggle?.(mode === "dark" ? "light" : "dark");
+      },
+      style: ({ pressed }) => ({
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: theme.surface.raised,
+        borderWidth: 1,
+        borderColor: theme.border.subtle,
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: pressed ? 0.85 : 1
+      }),
+      children: /* @__PURE__ */ jsx16(View12, { children: icon(mode, theme.text.primary, Math.round(size * 0.5)) })
+    }
+  );
+}
+
 // src/tokens/typography.ts
 var fontFamily = {
   display: "'Satoshi', system-ui, -apple-system, sans-serif",
@@ -343,15 +1028,26 @@ var transition = {
   slow: "300ms ease-out"
 };
 export {
+  ActionButton,
   AlertBanner,
   AmountInput,
   AssetSelector,
   Balance,
+  BalanceCard,
   CryptoAddressInput,
+  EmptyState,
+  KButton,
+  KCard,
+  KScreen,
+  KText,
   KaleidoThemeProvider,
+  KaleidoUIProvider,
+  ModeToggle,
   NetworkBadge,
+  NetworkChip,
   NetworkSelector,
   QRCode,
+  QrCode,
   SectionLabel,
   SeedPhrase,
   StatusBadge,
@@ -363,9 +1059,13 @@ export {
   fontWeight,
   kaleidoswapBrandConfig,
   kaleidoswapTokens,
+  makeTheme,
+  nativeType,
   radius,
   shadow,
+  themes,
   transition,
   typeScale,
+  useKaleidoTheme,
   useTheme
 };