kaleido-ui 0.1.0

package/dist/tailwind/index.js

@@ -0,0 +1,212 @@
+// 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/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"]
+};
+
+// 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/tailwind/index.ts
+var preset = {
+  darkMode: ["class"],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: colors.primary,
+          foreground: colors.primaryFg,
+          dark: colors.primaryDark
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))"
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))"
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))"
+        },
+        network: colors.network,
+        tx: colors.tx,
+        "background-light": colors.bgLight,
+        "background-dark": colors.bgDark,
+        "surface-dark": colors.surfaceDark,
+        "surface-light": colors.surfaceLight,
+        "surface-highlight": colors.surfaceHighlight,
+        "surface-border": colors.surfaceBorder,
+        "surface-darker": colors.surfaceDarker
+      },
+      fontFamily: {
+        display: fontFamily.display.split(", "),
+        mono: fontFamily.mono.split(", ")
+      },
+      fontSize: Object.fromEntries(
+        Object.entries(typeScale).map(([key, [size, lh]]) => [
+          key,
+          [size, { lineHeight: lh }]
+        ])
+      ),
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+        xl: "0.75rem",
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+        card: radius.card,
+        panel: radius.panel,
+        pill: radius.pill,
+        nav: radius.nav
+      },
+      boxShadow: {
+        glow: shadow.glow,
+        "glow-strong": shadow.glowStrong,
+        "glow-subtle": shadow.glowSubtle
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" }
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" }
+        },
+        "pulse-glow": {
+          "0%, 100%": { boxShadow: "0 0 20px rgba(43, 238, 121, 0.2)" },
+          "50%": { boxShadow: "0 0 30px rgba(43, 238, 121, 0.4)" }
+        },
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" }
+        },
+        "slide-up": {
+          from: { opacity: "0", transform: "translateY(10px)" },
+          to: { opacity: "1", transform: "translateY(0)" }
+        },
+        "slide-in-from-bottom": {
+          from: { opacity: "0", transform: "translateY(20px)" },
+          to: { opacity: "1", transform: "translateY(0)" }
+        },
+        shimmer: {
+          "0%": { backgroundPosition: "-200% 0" },
+          "100%": { backgroundPosition: "200% 0" }
+        },
+        "stagger-up": {
+          "0%": { opacity: "0", transform: "translateY(15px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" }
+        },
+        "bounce-slight": {
+          "0%, 100%": { transform: "translateY(-5%)" },
+          "50%": { transform: "translateY(0)" }
+        }
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "pulse-glow": "pulse-glow 2s ease-in-out infinite",
+        "fade-in": "fade-in 0.3s ease-out",
+        "slide-up": "slide-up 0.3s ease-out",
+        "slide-in-from-bottom": "slide-in-from-bottom 0.4s ease-out",
+        "stagger-up": "stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards",
+        shimmer: "shimmer 2s linear infinite",
+        "bounce-slight": "bounce-slight 2s infinite"
+      }
+    }
+  },
+  plugins: []
+};
+var tailwind_default = preset;
+export {
+  tailwind_default as default
+};

package/dist/tokens/index.cjs

@@ -0,0 +1,132 @@
+"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/tokens/index.ts
+var tokens_exports = {};
+__export(tokens_exports, {
+  colors: () => colors,
+  fontFamily: () => fontFamily,
+  fontWeight: () => fontWeight,
+  radius: () => radius,
+  shadow: () => shadow,
+  transition: () => transition,
+  typeScale: () => typeScale
+});
+module.exports = __toCommonJS(tokens_exports);
+
+// 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/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 = {
+  colors,
+  fontFamily,
+  fontWeight,
+  radius,
+  shadow,
+  transition,
+  typeScale
+});

package/dist/tokens/index.d.cts

@@ -0,0 +1,107 @@
+/**
+ * KaleidoSwap Color Tokens
+ *
+ * Single source of truth for all color constants across web and native.
+ */
+declare const colors: {
+    /** Brand */
+    readonly primary: "#2BEE79";
+    readonly primaryDark: "#1FA855";
+    readonly primaryFg: "#102217";
+    /** Surfaces (dark theme — the default) */
+    readonly bgDark: "#102217";
+    readonly surfaceDark: "#162E21";
+    readonly surfaceHighlight: "#243E30";
+    readonly surfaceBorder: "#244A35";
+    readonly surfaceDarker: "#0B1810";
+    /** Surfaces (light theme) */
+    readonly bgLight: "#F6F8F7";
+    readonly surfaceLight: "#FFFFFF";
+    /** Text */
+    readonly textPrimary: "#FFFFFF";
+    readonly textSecondary: "#92C9A8";
+    readonly textMuted: "rgba(255,255,255,0.5)";
+    readonly textDimmed: "rgba(255,255,255,0.35)";
+    /** Semantic */
+    readonly success: "#2BEE79";
+    readonly warning: "#F59E0B";
+    readonly error: "#F94040";
+    readonly info: "#4290FF";
+    /** Network / Layer */
+    readonly network: {
+        readonly bitcoin: "#F7931A";
+        readonly rgb: "#DD352E";
+        readonly arkade: "#7C3AED";
+        readonly spark: "#FF6D00";
+        readonly lightning: "#F6C343";
+    };
+    /** Transaction direction */
+    readonly tx: {
+        readonly sent: "#F94040";
+        readonly receive: "#2BEE79";
+        readonly swap: "#4290FF";
+    };
+};
+
+/**
+ * KaleidoSwap Typography Tokens
+ */
+declare const fontFamily: {
+    readonly display: "'Geist Sans', system-ui, -apple-system, sans-serif";
+    readonly mono: "'Geist Mono', monospace";
+};
+/**
+ * Type scale — [fontSize, lineHeight]
+ */
+declare const typeScale: {
+    readonly xxs: readonly ["10px", "14px"];
+    readonly tiny: readonly ["11px", "16px"];
+    readonly caption: readonly ["13px", "18px"];
+    readonly body: readonly ["15px", "22px"];
+    readonly subhead: readonly ["17px", "24px"];
+    readonly title: readonly ["20px", "28px"];
+    readonly headline: readonly ["28px", "34px"];
+    readonly display: readonly ["36px", "40px"];
+};
+declare const fontWeight: {
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+
+/**
+ * KaleidoSwap Border Radius Tokens
+ */
+declare const radius: {
+    readonly sm: "8px";
+    readonly md: "12px";
+    readonly lg: "16px";
+    readonly xl: "20px";
+    readonly card: "20px";
+    readonly panel: "22px";
+    readonly pill: "24px";
+    readonly nav: "14px";
+    readonly full: "9999px";
+};
+
+/**
+ * KaleidoSwap Shadow Tokens
+ */
+declare const shadow: {
+    readonly glow: "0 0 20px rgba(43, 238, 121, 0.15)";
+    readonly glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)";
+    readonly glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)";
+    readonly glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)";
+};
+
+/**
+ * KaleidoSwap Transition Tokens
+ */
+declare const transition: {
+    readonly fast: "150ms ease-out";
+    readonly default: "200ms ease-out";
+    readonly slow: "300ms ease-out";
+};
+
+export { colors, fontFamily, fontWeight, radius, shadow, transition, typeScale };

package/dist/tokens/index.d.ts

@@ -0,0 +1,107 @@
+/**
+ * KaleidoSwap Color Tokens
+ *
+ * Single source of truth for all color constants across web and native.
+ */
+declare const colors: {
+    /** Brand */
+    readonly primary: "#2BEE79";
+    readonly primaryDark: "#1FA855";
+    readonly primaryFg: "#102217";
+    /** Surfaces (dark theme — the default) */
+    readonly bgDark: "#102217";
+    readonly surfaceDark: "#162E21";
+    readonly surfaceHighlight: "#243E30";
+    readonly surfaceBorder: "#244A35";
+    readonly surfaceDarker: "#0B1810";
+    /** Surfaces (light theme) */
+    readonly bgLight: "#F6F8F7";
+    readonly surfaceLight: "#FFFFFF";
+    /** Text */
+    readonly textPrimary: "#FFFFFF";
+    readonly textSecondary: "#92C9A8";
+    readonly textMuted: "rgba(255,255,255,0.5)";
+    readonly textDimmed: "rgba(255,255,255,0.35)";
+    /** Semantic */
+    readonly success: "#2BEE79";
+    readonly warning: "#F59E0B";
+    readonly error: "#F94040";
+    readonly info: "#4290FF";
+    /** Network / Layer */
+    readonly network: {
+        readonly bitcoin: "#F7931A";
+        readonly rgb: "#DD352E";
+        readonly arkade: "#7C3AED";
+        readonly spark: "#FF6D00";
+        readonly lightning: "#F6C343";
+    };
+    /** Transaction direction */
+    readonly tx: {
+        readonly sent: "#F94040";
+        readonly receive: "#2BEE79";
+        readonly swap: "#4290FF";
+    };
+};
+
+/**
+ * KaleidoSwap Typography Tokens
+ */
+declare const fontFamily: {
+    readonly display: "'Geist Sans', system-ui, -apple-system, sans-serif";
+    readonly mono: "'Geist Mono', monospace";
+};
+/**
+ * Type scale — [fontSize, lineHeight]
+ */
+declare const typeScale: {
+    readonly xxs: readonly ["10px", "14px"];
+    readonly tiny: readonly ["11px", "16px"];
+    readonly caption: readonly ["13px", "18px"];
+    readonly body: readonly ["15px", "22px"];
+    readonly subhead: readonly ["17px", "24px"];
+    readonly title: readonly ["20px", "28px"];
+    readonly headline: readonly ["28px", "34px"];
+    readonly display: readonly ["36px", "40px"];
+};
+declare const fontWeight: {
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+
+/**
+ * KaleidoSwap Border Radius Tokens
+ */
+declare const radius: {
+    readonly sm: "8px";
+    readonly md: "12px";
+    readonly lg: "16px";
+    readonly xl: "20px";
+    readonly card: "20px";
+    readonly panel: "22px";
+    readonly pill: "24px";
+    readonly nav: "14px";
+    readonly full: "9999px";
+};
+
+/**
+ * KaleidoSwap Shadow Tokens
+ */
+declare const shadow: {
+    readonly glow: "0 0 20px rgba(43, 238, 121, 0.15)";
+    readonly glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)";
+    readonly glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)";
+    readonly glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)";
+};
+
+/**
+ * KaleidoSwap Transition Tokens
+ */
+declare const transition: {
+    readonly fast: "150ms ease-out";
+    readonly default: "200ms ease-out";
+    readonly slow: "300ms ease-out";
+};
+
+export { colors, fontFamily, fontWeight, radius, shadow, transition, typeScale };

package/dist/tokens/index.js

@@ -0,0 +1,99 @@
+// 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/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"
+};
+export {
+  colors,
+  fontFamily,
+  fontWeight,
+  radius,
+  shadow,
+  transition,
+  typeScale
+};