kaleido-ui 0.1.46 → 0.1.48

package/dist/native/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,20 +17,39 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/native/index.ts
 var native_exports = {};
 __export(native_exports, {
+  ActionButton: () => ActionButton,
   AlertBanner: () => AlertBanner,
   AmountInput: () => import_wdk_uikit_react_native2.AmountInput,
   AssetSelector: () => import_wdk_uikit_react_native2.AssetSelector,
   Balance: () => import_wdk_uikit_react_native2.Balance,
+  BalanceCard: () => BalanceCard,
   CryptoAddressInput: () => import_wdk_uikit_react_native2.CryptoAddressInput,
+  EmptyState: () => EmptyState,
+  KButton: () => KButton,
+  KCard: () => KCard,
+  KScreen: () => KScreen,
+  KText: () => KText,
   KaleidoThemeProvider: () => KaleidoThemeProvider,
+  KaleidoUIProvider: () => KaleidoUIProvider,
+  ModeToggle: () => ModeToggle,
   NetworkBadge: () => NetworkBadge,
+  NetworkChip: () => NetworkChip,
   NetworkSelector: () => import_wdk_uikit_react_native2.NetworkSelector,
   QRCode: () => import_wdk_uikit_react_native2.QRCode,
+  QrCode: () => QrCode,
   SectionLabel: () => SectionLabel,
   SeedPhrase: () => import_wdk_uikit_react_native2.SeedPhrase,
   StatusBadge: () => StatusBadge,
@@ -40,10 +61,14 @@ __export(native_exports, {
   fontWeight: () => fontWeight,
   kaleidoswapBrandConfig: () => kaleidoswapBrandConfig,
   kaleidoswapTokens: () => kaleidoswapTokens,
+  makeTheme: () => makeTheme,
+  nativeType: () => nativeType,
   radius: () => radius,
   shadow: () => shadow,
+  themes: () => themes,
   transition: () => transition,
   typeScale: () => typeScale,
+  useKaleidoTheme: () => useKaleidoTheme,
   useTheme: () => import_wdk_uikit_react_native2.useTheme
 });
 module.exports = __toCommonJS(native_exports);
@@ -208,9 +233,149 @@ function KaleidoThemeProvider({
 // src/native/index.ts
 var import_wdk_uikit_react_native2 = require("@tetherto/wdk-uikit-react-native");
 
-// src/native/components/status-badge.tsx
+// src/native/components/qr-code.tsx
+var import_react = require("react");
 var import_react_native = require("react-native");
+var import_react_native_svg = __toESM(require("react-native-svg"), 1);
+var import_qr = __toESM(require("qr"), 1);
 var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native_svg.Rect,
+      {
+        x: originX,
+        y: originY,
+        width: moduleSize * 7,
+        height: moduleSize * 7,
+        rx: r * 2.5,
+        ry: r * 2.5,
+        fill: fg
+      },
+      `${key}-o`
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native_svg.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__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native_svg.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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: "M137.306 411.865H0.000244141L68.6795 343.29L137.306 411.865Z", fill: "#6F32FF" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: "M0 0H137.306L68.6267 68.574L0 0Z", fill: "#6F32FF" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: "M137.148 274.559H274.455L411.708 411.866H274.401L137.148 274.559Z", fill: "#17B581" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native_svg.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__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.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 } = (0, import_react.useMemo)(() => {
+    if (!value) return { elements: [], svgSize: 0 };
+    const matrix = (0, import_qr.default)(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__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.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__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.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__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.G, { transform: `translate(${logoX}, ${logoY}) scale(${scale})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LogoPaths, {}) }, "logo")
+    );
+    return { elements: els, svgSize: computedSize };
+  }, [value, color, backgroundColor]);
+  if (!value || svgSize === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: { width: size, height: size } });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: { width: size, height: size }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { width: size, height: size, viewBox: `0 0 ${svgSize} ${svgSize}`, children: elements }) });
+}
+
+// src/native/components/status-badge.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime3 = require("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" },
@@ -220,9 +385,9 @@ var statusConfig = {
 };
 function StatusBadge({ status, style }) {
   const config = statusConfig[status];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: [styles.container, { backgroundColor: config.bg, borderColor: config.borderColor }, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: [styles.label, { color: config.color }], children: config.label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [styles.container, { backgroundColor: config.bg, borderColor: config.borderColor }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: [styles.label, { color: config.color }], children: config.label }) });
 }
-var styles = import_react_native.StyleSheet.create({
+var styles = import_react_native2.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -238,8 +403,8 @@ var styles = import_react_native.StyleSheet.create({
 });
 
 // src/native/components/network-badge.tsx
-var import_react_native2 = require("react-native");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react_native3 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var networkConfig = {
   L1: { color: colors.network.bitcoin, label: "L1" },
   LN: { color: colors.network.lightning, label: "LN" },
@@ -252,9 +417,9 @@ var networkConfig = {
 };
 function NetworkBadge({ network, style }) {
   const config = networkConfig[network];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [styles2.container, { backgroundColor: `${config.color}1A`, borderColor: `${config.color}33` }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: [styles2.label, { color: config.color }], children: config.label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles2.container, { backgroundColor: `${config.color}1A`, borderColor: `${config.color}33` }, style], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.Text, { style: [styles2.label, { color: config.color }], children: config.label }) });
 }
-var styles2 = import_react_native2.StyleSheet.create({
+var styles2 = import_react_native3.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -271,8 +436,8 @@ var styles2 = import_react_native2.StyleSheet.create({
 });
 
 // src/native/components/alert-banner.tsx
-var import_react_native3 = require("react-native");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react_native4 = require("react-native");
+var import_jsx_runtime5 = require("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 },
@@ -281,9 +446,9 @@ var variantConfig = {
 };
 function AlertBanner({ variant = "info", children, style }) {
   const config = variantConfig[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.container, { backgroundColor: config.bg, borderColor: config.borderColor }, style], children: typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.Text, { style: styles3.text, children }) : children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [styles3.container, { backgroundColor: config.bg, borderColor: config.borderColor }, style], children: typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles3.text, children }) : children });
 }
-var styles3 = import_react_native3.StyleSheet.create({
+var styles3 = import_react_native4.StyleSheet.create({
   container: {
     borderRadius: 12,
     borderWidth: 1,
@@ -300,12 +465,12 @@ var styles3 = import_react_native3.StyleSheet.create({
 });
 
 // src/native/components/section-label.tsx
-var import_react_native4 = require("react-native");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react_native5 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function SectionLabel({ children, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: [styles4.label, style], children: typeof children === "string" ? children.toUpperCase() : children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: [styles4.label, style], children: typeof children === "string" ? children.toUpperCase() : children });
 }
-var styles4 = import_react_native4.StyleSheet.create({
+var styles4 = import_react_native5.StyleSheet.create({
   label: {
     fontSize: 10,
     fontWeight: "900",
@@ -314,6 +479,547 @@ var styles4 = import_react_native4.StyleSheet.create({
   }
 });
 
+// src/native/theme-context.tsx
+var import_react2 = require("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
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var KaleidoThemeContext = (0, import_react2.createContext)(null);
+function KaleidoUIProvider({
+  children,
+  mode: controlledMode,
+  defaultMode = "dark",
+  onModeChange,
+  fontFamily: fontFamily2
+}) {
+  const [internalMode, setInternalMode] = (0, import_react2.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 = (0, import_react2.useMemo)(
+    () => ({ theme: makeTheme(activeMode), mode: activeMode, fontFamily: fontFamily2, setMode, toggleMode }),
+    // setMode/toggleMode are stable enough for this context's purpose
+    [activeMode, fontFamily2]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(KaleidoThemeContext.Provider, { value, children });
+}
+function useKaleidoTheme() {
+  const ctx = (0, import_react2.useContext)(KaleidoThemeContext);
+  if (ctx) return ctx;
+  return {
+    theme: makeTheme("dark"),
+    mode: "dark",
+    fontFamily: void 0,
+    setMode: () => {
+    },
+    toggleMode: () => {
+    }
+  };
+}
+
+// src/native/components/k-text.tsx
+var import_react_native6 = require("react-native");
+var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsx)(
+    import_react_native6.Text,
+    {
+      ...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
+var import_react_native7 = require("react-native");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function KScreen({ elevated = false, style, children, ...rest }) {
+  const { theme, mode } = useKaleidoTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_react_native7.View,
+    {
+      ...rest,
+      style: [{ flex: 1, backgroundColor: elevated ? theme.card : theme.background }, style],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react_native7.StatusBar,
+          {
+            barStyle: mode === "dark" ? "light-content" : "dark-content",
+            backgroundColor: "transparent",
+            translucent: true
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/native/components/k-card.tsx
+var import_react_native8 = require("react-native");
+var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_native8.View,
+    {
+      ...rest,
+      style: [
+        {
+          backgroundColor,
+          borderRadius: radius2,
+          padding,
+          borderWidth: bordered ? 1 : 0,
+          borderColor: theme.border.subtle
+        },
+        style
+      ],
+      children
+    }
+  );
+}
+
+// src/native/components/k-button.tsx
+var import_react_native9 = require("react-native");
+var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_native9.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__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.ActivityIndicator, { color: palette(false).fg }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+        leading,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(KText, { variant: s.type, weight: "bold", color: palette(false).fg, children: label })
+      ] })
+    }
+  );
+}
+
+// src/native/components/action-button.tsx
+var import_react_native10 = require("react-native");
+var import_jsx_runtime12 = require("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__ */ (0, import_jsx_runtime12.jsxs)(
+    import_react_native10.Pressable,
+    {
+      onPress,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      style: ({ pressed }) => ({
+        alignItems: "center",
+        gap: 8,
+        opacity: disabled ? 0.4 : pressed ? 0.85 : 1
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_react_native10.View,
+          {
+            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__ */ (0, import_jsx_runtime12.jsx)(KText, { variant: "caption", weight: "medium", tone: "secondary", children: label })
+      ]
+    }
+  );
+}
+
+// src/native/components/balance-card.tsx
+var import_react_native11 = require("react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function BalanceCard({
+  label = "Total Balance",
+  amount,
+  unit,
+  fiat,
+  footer,
+  style,
+  ...rest
+}) {
+  const { theme } = useKaleidoTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { ...rest, style: [{ alignItems: "center", gap: 6 }, style], children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(KText, { variant: "caption", weight: "medium", tone: "muted", eyebrow: true, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: { flexDirection: "row", alignItems: "baseline", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(KText, { variant: "hero", weight: "bold", tone: "primary", children: amount }),
+      !!unit && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(KText, { variant: "title", weight: "medium", tone: "secondary", children: unit })
+    ] }),
+    !!fiat && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(KText, { variant: "body", weight: "medium", color: theme.text.muted, children: fiat }),
+    footer
+  ] });
+}
+
+// src/native/components/network-chip.tsx
+var import_react_native12 = require("react-native");
+var import_jsx_runtime14 = require("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__ */ (0, import_jsx_runtime14.jsxs)(
+    import_react_native12.Pressable,
+    {
+      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__ */ (0, import_jsx_runtime14.jsx)(
+          import_react_native12.View,
+          {
+            style: {
+              width: 30,
+              height: 30,
+              borderRadius: 15,
+              backgroundColor: glyphBg,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: icon(glyph, 16)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: { gap: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(KText, { variant: "caption", weight: "bold", color: selected ? theme.violet : theme.text.primary, children: title }),
+          !!subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(KText, { variant: "mini", weight: "medium", tone: "muted", children: subtitle })
+        ] }),
+        dot && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_react_native12.View,
+          {
+            style: {
+              width: 7,
+              height: 7,
+              borderRadius: 4,
+              backgroundColor: theme.primary,
+              marginLeft: 2
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/native/components/empty-state.tsx
+var import_react_native13 = require("react-native");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function EmptyState({ title, description, icon, action, style, ...rest }) {
+  const { theme } = useKaleidoTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native13.View, { ...rest, style: [{ alignItems: "center", paddingVertical: 36, gap: 12 }, style], children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native13.View,
+      {
+        style: {
+          width: 64,
+          height: 64,
+          borderRadius: 32,
+          backgroundColor: theme.surface.raised,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: icon(theme.text.muted, 28)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native13.View, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(KText, { variant: "subhead", weight: "bold", tone: "primary", center: true, children: title }),
+      !!description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(KText, { variant: "caption", tone: "muted", center: true, children: description })
+    ] }),
+    action
+  ] });
+}
+
+// src/native/components/mode-toggle.tsx
+var import_react_native14 = require("react-native");
+var import_jsx_runtime16 = 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,
+    {
+      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__ */ (0, import_jsx_runtime16.jsx)(import_react_native14.View, { 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",
@@ -382,15 +1088,26 @@ var transition = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionButton,
   AlertBanner,
   AmountInput,
   AssetSelector,
   Balance,
+  BalanceCard,
   CryptoAddressInput,
+  EmptyState,
+  KButton,
+  KCard,
+  KScreen,
+  KText,
   KaleidoThemeProvider,
+  KaleidoUIProvider,
+  ModeToggle,
   NetworkBadge,
+  NetworkChip,
   NetworkSelector,
   QRCode,
+  QrCode,
   SectionLabel,
   SeedPhrase,
   StatusBadge,
@@ -402,9 +1119,13 @@ var transition = {
   fontWeight,
   kaleidoswapBrandConfig,
   kaleidoswapTokens,
+  makeTheme,
+  nativeType,
   radius,
   shadow,
+  themes,
   transition,
   typeScale,
+  useKaleidoTheme,
   useTheme
 });