kaleido-ui 0.1.0

package/README.md

@@ -0,0 +1,188 @@
+# kaleido-ui
+
+Shared UI library for KaleidoSwap — design tokens, web components (Tailwind + Radix), and React Native components extending [WDK UI Kit](https://docs.wdk.tether.io/ui-kits/react-native-ui-kit).
+
+## Installation
+
+```bash
+npm install kaleido-ui
+```
+
+## Entry Points
+
+| Import | Description |
+|--------|-------------|
+| `kaleido-ui` | Web components (Tailwind CSS + Radix UI) |
+| `kaleido-ui/tokens` | Platform-agnostic design tokens (zero deps) |
+| `kaleido-ui/native` | React Native components (WDK + custom) |
+| `kaleido-ui/tailwind` | Tailwind CSS preset |
+| `kaleido-ui/css` | CSS custom properties, glass effects, animations |
+
+## Quick Start — Web
+
+### 1. Configure Tailwind
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/kaleido-ui/dist/web/*.js',
+  ],
+  presets: [require('kaleido-ui/tailwind')],
+}
+```
+
+### 2. Import CSS
+
+```ts
+// main.tsx
+import 'kaleido-ui/css'
+```
+
+### 3. Use Components
+
+```tsx
+import { Button, Card, CardContent, StatusBadge, AssetCard } from 'kaleido-ui'
+
+function App() {
+  return (
+    <Card>
+      <CardContent>
+        <AssetCard
+          ticker="BTC"
+          name="Bitcoin"
+          displayBalance="0.00142000"
+          networks={['L1', 'LN', 'Spark']}
+        />
+        <StatusBadge status="completed" />
+        <Button variant="cta" size="cta">Swap Now</Button>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+## Quick Start — React Native
+
+### 1. Install peer dependencies
+
+```bash
+npm install @tetherto/wdk-uikit-react-native react-native
+```
+
+### 2. Wrap with theme provider
+
+```tsx
+import { KaleidoThemeProvider } from 'kaleido-ui/native'
+
+export default function App() {
+  return (
+    <KaleidoThemeProvider>
+      {/* Your app */}
+    </KaleidoThemeProvider>
+  )
+}
+```
+
+### 3. Use Components
+
+```tsx
+import {
+  Balance,
+  AmountInput,
+  AssetSelector,
+  StatusBadge,
+  NetworkBadge,
+} from 'kaleido-ui/native'
+```
+
+## Quick Start — Tokens Only
+
+Works in any JS runtime (Node.js, React Native, web) with zero dependencies.
+
+```ts
+import { colors, typeScale, radius, shadow } from 'kaleido-ui/tokens'
+
+console.log(colors.primary)        // '#2BEE79'
+console.log(colors.network.bitcoin) // '#F7931A'
+console.log(typeScale.body)         // ['15px', '22px']
+```
+
+## Web Components
+
+### Primitives
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | 11 variants (default, destructive, outline, secondary, ghost, link, glow, surface, cta, cta-gradient, danger-subtle), 9 sizes |
+| `Card` | Compositional: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
+| `Input` | Form text input with focus ring |
+| `Dialog` | Modal dialog (Radix): Dialog, DialogContent, DialogHeader, DialogTitle, etc. |
+| `Tabs` | Tab navigation (Radix): Tabs, TabsList, TabsTrigger, TabsContent |
+| `Label` | Form label (Radix) |
+| `Toast` | Toast notifications (Radix): Toast, ToastProvider, Toaster |
+| `Icon` | Material Symbols wrapper with size variants (xs-2xl) |
+| `Icons` | Named icon shortcuts (Icons.Send, Icons.Receive, Icons.Swap, etc.) |
+
+### Shared Components
+
+| Component | Description |
+|-----------|-------------|
+| `StatusBadge` | Status indicator (success, pending, failed, completed, error) |
+| `NetworkBadge` | Network/layer badge (L1, LN, RGB20, RGB21, Spark, Arkade) |
+| `AssetIcon` | Circular asset icon with CDN + fallback chain |
+| `AssetCard` | Asset display with icon, name, networks, balance |
+| `TransactionCard` | Transaction row with direction, status, amount |
+| `PageHeader` | Sticky header with left/center/right slots |
+| `SettingItem` | Settings row with icon, title, description, chevron |
+| `SectionLabel` | Uppercase section heading |
+| `AlertBanner` | Alert box (error, warning, info, success variants) |
+| `ErrorBoundary` | React error boundary with retry UI |
+
+### Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useToast` | Toast state management + `toast()` function |
+| `useAssetIcon` | Resolves asset ticker to CDN icon URL |
+
+### Utilities
+
+| Export | Description |
+|--------|-------------|
+| `cn()` | `clsx` + `tailwind-merge` utility |
+
+## Native Components
+
+### From WDK UI Kit (re-exported, themed)
+
+AmountInput, AssetSelector, NetworkSelector, Balance, CryptoAddressInput, QRCode, TransactionItem, TransactionList, SeedPhrase
+
+### Custom
+
+StatusBadge, NetworkBadge, AlertBanner, SectionLabel
+
+## Design Tokens
+
+| Token | Values |
+|-------|--------|
+| `colors` | primary (#2BEE79), surfaces, text, semantic, network, transaction |
+| `typeScale` | xxs (10px) through display (36px) |
+| `fontFamily` | Geist Sans, Geist Mono |
+| `fontWeight` | normal (400) through bold (700) |
+| `radius` | sm (8px) through full (9999px) |
+| `shadow` | glow, glowStrong, glowSubtle, glowAccent |
+| `transition` | fast (150ms), default (200ms), slow (300ms) |
+
+## Development
+
+```bash
+npm install --legacy-peer-deps
+npm run build    # Build all entry points
+npm run dev      # Watch mode
+```
+
+## License
+
+MIT

package/dist/css/kaleido-ui.css

@@ -0,0 +1,197 @@
+/*
+ * KaleidoSwap UI — CSS Custom Properties, Glass Effects & Animations
+ *
+ * Import in your entry point:
+ *   import 'kaleido-ui/css'
+ *
+ * NOTE: This file does NOT include Tailwind directives (@tailwind base/components/utilities).
+ * Your consumer app must have its own Tailwind setup with the kaleido-ui preset.
+ * Font imports (@fontsource/geist-sans, @fontsource/geist-mono, material-symbols)
+ * must also be done in the consumer app.
+ */
+
+/* ------------------------------------------------------------------ */
+/*  Material Symbols                                                   */
+/* ------------------------------------------------------------------ */
+
+.material-symbols-outlined {
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+.material-symbols-outlined.filled {
+  font-variation-settings:
+    'FILL' 1,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+/* ------------------------------------------------------------------ */
+/*  CSS Custom Properties (Light Theme — :root)                        */
+/* ------------------------------------------------------------------ */
+
+:root {
+  --background: 150 7% 97%;
+  --foreground: 144 53% 8%;
+  --card: 0 0% 100%;
+  --card-foreground: 144 53% 8%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 144 53% 8%;
+  --primary: 151 88% 52%;
+  --primary-foreground: 144 53% 8%;
+  --secondary: 150 10% 90%;
+  --secondary-foreground: 144 53% 8%;
+  --muted: 150 10% 90%;
+  --muted-foreground: 150 10% 40%;
+  --accent: 150 10% 90%;
+  --accent-foreground: 144 53% 8%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 150 10% 85%;
+  --input: 150 10% 85%;
+  --ring: 151 88% 52%;
+  --radius: 0.75rem;
+
+  --surface: 0 0% 100%;
+  --surface-foreground: 144 53% 8%;
+  --text-secondary: 151 30% 68%;
+  --warning: 45 93% 47%;
+  --warning-foreground: 0 0% 0%;
+  --success: 151 88% 52%;
+  --success-foreground: 144 53% 8%;
+}
+
+/* ------------------------------------------------------------------ */
+/*  CSS Custom Properties (Dark Theme)                                 */
+/* ------------------------------------------------------------------ */
+
+.dark {
+  --background: 144 53% 8%;
+  --foreground: 0 0% 100%;
+  --card: 146 36% 13%;
+  --card-foreground: 0 0% 100%;
+  --popover: 146 36% 13%;
+  --popover-foreground: 0 0% 100%;
+  --primary: 151 88% 52%;
+  --primary-foreground: 144 53% 8%;
+  --secondary: 146 30% 18%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 146 30% 18%;
+  --muted-foreground: 150 15% 60%;
+  --accent: 146 30% 20%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 146 25% 20%;
+  --input: 146 30% 15%;
+  --ring: 151 88% 52%;
+
+  --surface: 146 36% 13%;
+  --surface-foreground: 0 0% 100%;
+  --text-secondary: 151 30% 68%;
+  --warning: 45 93% 47%;
+  --warning-foreground: 0 0% 0%;
+  --success: 151 88% 52%;
+  --success-foreground: 144 53% 8%;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Glass Effects                                                      */
+/* ------------------------------------------------------------------ */
+
+.glass-panel {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.glass-panel-heavy {
+  background: rgba(14, 30, 20, 0.78);
+  backdrop-filter: blur(28px);
+  -webkit-backdrop-filter: blur(28px);
+  border: 1px solid rgba(43, 238, 121, 0.12);
+}
+
+.glass-card {
+  background: rgba(26, 46, 33, 0.65);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  transition: all 0.2s ease-out;
+}
+
+.glass-card:active {
+  transform: scale(0.98);
+  background: rgba(26, 46, 33, 0.8);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Glow Utilities                                                     */
+/* ------------------------------------------------------------------ */
+
+.shadow-glow-subtle {
+  box-shadow: 0 0 10px rgba(43, 238, 121, 0.1);
+}
+
+.shadow-glow {
+  box-shadow: 0 0 20px rgba(43, 238, 121, 0.2);
+}
+
+.shadow-glow-strong {
+  box-shadow: 0 0 30px rgba(43, 238, 121, 0.3);
+}
+
+.shadow-glow-accent {
+  box-shadow: 0 4px 30px rgba(43, 238, 121, 0.25);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Utility Classes                                                    */
+/* ------------------------------------------------------------------ */
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.pb-safe {
+  padding-bottom: max(1rem, env(safe-area-inset-bottom));
+}
+
+/* ------------------------------------------------------------------ */
+/*  Animations                                                         */
+/* ------------------------------------------------------------------ */
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 20px rgba(43, 238, 121, 0.2); }
+  50% { box-shadow: 0 0 30px rgba(43, 238, 121, 0.4); }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slide-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slide-in-from-bottom {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
+.animate-fade-in { animation: fade-in 0.3s ease-out; }
+.animate-slide-up { animation: slide-up 0.3s ease-out; }
+.animate-slide-in-from-bottom { animation: slide-in-from-bottom 0.4s ease-out; }

package/dist/native/index.cjs

@@ -0,0 +1,322 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/native/index.ts
+var native_exports = {};
+__export(native_exports, {
+  AlertBanner: () => AlertBanner,
+  AmountInput: () => import_wdk_uikit_react_native2.AmountInput,
+  AssetSelector: () => import_wdk_uikit_react_native2.AssetSelector,
+  Balance: () => import_wdk_uikit_react_native2.Balance,
+  CryptoAddressInput: () => import_wdk_uikit_react_native2.CryptoAddressInput,
+  KaleidoThemeProvider: () => KaleidoThemeProvider,
+  NetworkBadge: () => NetworkBadge,
+  NetworkSelector: () => import_wdk_uikit_react_native2.NetworkSelector,
+  QRCode: () => import_wdk_uikit_react_native2.QRCode,
+  SectionLabel: () => SectionLabel,
+  SeedPhrase: () => import_wdk_uikit_react_native2.SeedPhrase,
+  StatusBadge: () => StatusBadge,
+  ThemeProvider: () => import_wdk_uikit_react_native2.ThemeProvider,
+  TransactionItem: () => import_wdk_uikit_react_native2.TransactionItem,
+  TransactionList: () => import_wdk_uikit_react_native2.TransactionList,
+  colors: () => colors,
+  fontFamily: () => fontFamily,
+  fontWeight: () => fontWeight,
+  kaleidoswapBrandConfig: () => kaleidoswapBrandConfig,
+  kaleidoswapTokens: () => kaleidoswapTokens,
+  radius: () => radius,
+  shadow: () => shadow,
+  transition: () => transition,
+  typeScale: () => typeScale,
+  useTheme: () => import_wdk_uikit_react_native2.useTheme
+});
+module.exports = __toCommonJS(native_exports);
+
+// src/native/provider.tsx
+var import_wdk_uikit_react_native = require("@tetherto/wdk-uikit-react-native");
+
+// src/tokens/colors.ts
+var colors = {
+  /** Brand */
+  primary: "#2BEE79",
+  primaryDark: "#1FA855",
+  primaryFg: "#102217",
+  /** Surfaces (dark theme — the default) */
+  bgDark: "#102217",
+  surfaceDark: "#162E21",
+  surfaceHighlight: "#243E30",
+  surfaceBorder: "#244A35",
+  surfaceDarker: "#0B1810",
+  /** Surfaces (light theme) */
+  bgLight: "#F6F8F7",
+  surfaceLight: "#FFFFFF",
+  /** Text */
+  textPrimary: "#FFFFFF",
+  textSecondary: "#92C9A8",
+  textMuted: "rgba(255,255,255,0.5)",
+  textDimmed: "rgba(255,255,255,0.35)",
+  /** Semantic */
+  success: "#2BEE79",
+  warning: "#F59E0B",
+  error: "#F94040",
+  info: "#4290FF",
+  /** Network / Layer */
+  network: {
+    bitcoin: "#F7931A",
+    rgb: "#DD352E",
+    arkade: "#7C3AED",
+    spark: "#FF6D00",
+    lightning: "#F6C343"
+  },
+  /** Transaction direction */
+  tx: {
+    sent: "#F94040",
+    receive: "#2BEE79",
+    swap: "#4290FF"
+  }
+};
+
+// src/native/theme.ts
+var kaleidoswapBrandConfig = {
+  primaryColor: colors.primary,
+  secondaryColor: colors.primaryDark
+};
+var kaleidoswapTokens = {
+  colors: {
+    primary: colors.primary,
+    primaryDark: colors.primaryDark,
+    primaryFg: colors.primaryFg,
+    background: colors.bgDark,
+    surface: colors.surfaceDark,
+    surfaceHighlight: colors.surfaceHighlight,
+    border: colors.surfaceBorder,
+    textPrimary: colors.textPrimary,
+    textSecondary: colors.textSecondary,
+    success: colors.success,
+    warning: colors.warning,
+    error: colors.error,
+    info: colors.info,
+    network: colors.network,
+    tx: colors.tx
+  }
+};
+
+// src/native/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function KaleidoThemeProvider({
+  children,
+  brandConfig,
+  defaultMode = "dark"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_wdk_uikit_react_native.ThemeProvider,
+    {
+      brandConfig: brandConfig ?? kaleidoswapBrandConfig,
+      defaultMode,
+      children
+    }
+  );
+}
+
+// src/native/index.ts
+var import_wdk_uikit_react_native2 = require("@tetherto/wdk-uikit-react-native");
+
+// src/native/components/status-badge.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime2 = 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" },
+  pending: { color: "#EAB308", bg: "#EAB3081A", borderColor: "#EAB30833", label: "Pending" },
+  failed: { color: "#EF4444", bg: "#EF44441A", borderColor: "#EF444433", label: "Failed" },
+  error: { color: "#EF4444", bg: "#EF44441A", borderColor: "#EF444433", label: "Error" }
+};
+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 }) });
+}
+var styles = import_react_native.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 9999,
+    borderWidth: 1
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: "600"
+  }
+});
+
+// src/native/components/network-badge.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var networkConfig = {
+  L1: { color: colors.network.bitcoin, label: "L1" },
+  LN: { color: colors.network.lightning, label: "LN" },
+  RGB20: { color: colors.network.rgb, label: "RGB" },
+  RGB21: { color: colors.network.rgb, label: "RGB21" },
+  "RGB-L1": { color: colors.network.rgb, label: "RGB L1" },
+  "RGB-LN": { color: colors.network.rgb, label: "RGB LN" },
+  Spark: { color: colors.network.spark, label: "Spark" },
+  Arkade: { color: colors.network.arkade, label: "Arkade" }
+};
+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 }) });
+}
+var styles2 = import_react_native2.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 9999,
+    borderWidth: 1
+  },
+  label: {
+    fontSize: 10,
+    fontWeight: "700"
+  }
+});
+
+// src/native/components/alert-banner.tsx
+var import_react_native3 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var variantConfig = {
+  error: { bg: "#EF44441A", borderColor: "#EF444433", iconColor: "#F87171" },
+  warning: { bg: "#F59E0B1A", borderColor: "#F59E0B33", iconColor: "#FBBF24" },
+  info: { bg: "#3B82F61A", borderColor: "#3B82F633", iconColor: "#60A5FA" },
+  success: { bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, iconColor: colors.primary }
+};
+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 });
+}
+var styles3 = import_react_native3.StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 12,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 8
+  },
+  text: {
+    fontSize: 14,
+    color: "#FFFFFF",
+    flex: 1
+  }
+});
+
+// src/native/components/section-label.tsx
+var import_react_native4 = require("react-native");
+var import_jsx_runtime5 = 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 });
+}
+var styles4 = import_react_native4.StyleSheet.create({
+  label: {
+    fontSize: 10,
+    fontWeight: "900",
+    letterSpacing: 2.2,
+    color: "rgba(255, 255, 255, 0.3)"
+  }
+});
+
+// src/tokens/typography.ts
+var fontFamily = {
+  display: "'Geist Sans', system-ui, -apple-system, sans-serif",
+  mono: "'Geist Mono', monospace"
+};
+var typeScale = {
+  xxs: ["10px", "14px"],
+  tiny: ["11px", "16px"],
+  caption: ["13px", "18px"],
+  body: ["15px", "22px"],
+  subhead: ["17px", "24px"],
+  title: ["20px", "28px"],
+  headline: ["28px", "34px"],
+  display: ["36px", "40px"]
+};
+var fontWeight = {
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+
+// src/tokens/radius.ts
+var radius = {
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "20px",
+  card: "20px",
+  panel: "22px",
+  pill: "24px",
+  nav: "14px",
+  full: "9999px"
+};
+
+// src/tokens/shadows.ts
+var shadow = {
+  glow: "0 0 20px rgba(43, 238, 121, 0.15)",
+  glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)",
+  glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)",
+  glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)"
+};
+
+// src/tokens/transitions.ts
+var transition = {
+  fast: "150ms ease-out",
+  default: "200ms ease-out",
+  slow: "300ms ease-out"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlertBanner,
+  AmountInput,
+  AssetSelector,
+  Balance,
+  CryptoAddressInput,
+  KaleidoThemeProvider,
+  NetworkBadge,
+  NetworkSelector,
+  QRCode,
+  SectionLabel,
+  SeedPhrase,
+  StatusBadge,
+  ThemeProvider,
+  TransactionItem,
+  TransactionList,
+  colors,
+  fontFamily,
+  fontWeight,
+  kaleidoswapBrandConfig,
+  kaleidoswapTokens,
+  radius,
+  shadow,
+  transition,
+  typeScale,
+  useTheme
+});