@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/xlsx/zip.js

@@ -0,0 +1,98 @@
+import { crc32 } from "./crc32.js";
+const LOCAL_SIGNATURE = 67324752;
+const CENTRAL_SIGNATURE = 33639248;
+const END_SIGNATURE = 101010256;
+const VERSION = 20;
+const UTF8_FLAG = 2048;
+function dosDateTime(date) {
+  const year = Math.min(2107, Math.max(1980, date.getFullYear()));
+  return {
+    time: date.getHours() << 11 | date.getMinutes() << 5 | date.getSeconds() >> 1,
+    date: year - 1980 << 9 | date.getMonth() + 1 << 5 | date.getDate()
+  };
+}
+function createZip(entries, options = {}) {
+  if (entries.length > 65535)
+    throw new RangeError("A ZIP without ZIP64 holds at most 65535 entries");
+  const encoder = new TextEncoder();
+  const stamp = dosDateTime(options.date ?? /* @__PURE__ */ new Date());
+  const names = entries.map((entry) => encoder.encode(entry.name));
+  let total = 22;
+  entries.forEach((entry, index) => {
+    const nameLength = names[index].length;
+    total += 30 + nameLength + entry.data.length + 46 + nameLength;
+  });
+  if (total > 4294967295) throw new RangeError("A ZIP without ZIP64 is limited to 4 GiB");
+  const out = new Uint8Array(total);
+  const view = new DataView(out.buffer);
+  let at = 0;
+  const u16 = (value) => {
+    view.setUint16(at, value, true);
+    at += 2;
+  };
+  const u32 = (value) => {
+    view.setUint32(at, value, true);
+    at += 4;
+  };
+  const bytes = (value) => {
+    out.set(value, at);
+    at += value.length;
+  };
+  const offsets = [];
+  const checksums = [];
+  entries.forEach((entry, index) => {
+    const name = names[index];
+    const checksum = crc32(entry.data);
+    offsets.push(at);
+    checksums.push(checksum);
+    u32(LOCAL_SIGNATURE);
+    u16(VERSION);
+    u16(UTF8_FLAG);
+    u16(0);
+    u16(stamp.time);
+    u16(stamp.date);
+    u32(checksum);
+    u32(entry.data.length);
+    u32(entry.data.length);
+    u16(name.length);
+    u16(0);
+    bytes(name);
+    bytes(entry.data);
+  });
+  const centralStart = at;
+  entries.forEach((entry, index) => {
+    const name = names[index];
+    u32(CENTRAL_SIGNATURE);
+    u16(VERSION);
+    u16(VERSION);
+    u16(UTF8_FLAG);
+    u16(0);
+    u16(stamp.time);
+    u16(stamp.date);
+    u32(checksums[index]);
+    u32(entry.data.length);
+    u32(entry.data.length);
+    u16(name.length);
+    u16(0);
+    u16(0);
+    u16(0);
+    u16(0);
+    u32(0);
+    u32(offsets[index]);
+    bytes(name);
+  });
+  const centralSize = at - centralStart;
+  u32(END_SIGNATURE);
+  u16(0);
+  u16(0);
+  u16(entries.length);
+  u16(entries.length);
+  u32(centralSize);
+  u32(centralStart);
+  u16(0);
+  return out;
+}
+export {
+  createZip,
+  dosDateTime
+};

package/package.json

@@ -1,6 +1,118 @@
 {
   "name": "@jcsoftdev/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Token-driven React component library: React 19, Radix, Tailwind v4.",
+  "author": "jcsoftdev",
+  "license": "MIT",
+  "homepage": "https://ui.jcsoftdev.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jcsoftdev/ui.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/jcsoftdev/ui/issues"
+  },
+  "keywords": [
+    "react",
+    "react-19",
+    "ui",
+    "component-library",
+    "design-system",
+    "design-tokens",
+    "radix-ui",
+    "tailwindcss",
+    "tailwind-v4",
+    "charts",
+    "data-grid",
+    "typescript"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "bin": {
+    "ui-theme": "./bin/ui-theme.mjs"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.stories.*",
+    "!src/**/*.test.*",
+    "styles",
+    "tokens",
+    "bin",
+    "scripts/build-theme.mjs",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./styles/*": "./styles/*",
+    "./tokens/*": "./tokens/*",
+    "./package.json": "./package.json",
+    "./rich-text": {
+      "types": "./dist/rich-text/index.d.ts",
+      "source": "./src/rich-text/index.ts",
+      "import": "./dist/rich-text/index.js"
+    },
+    "./*": {
+      "types": "./dist/*/index.d.ts",
+      "source": "./src/*/index.ts",
+      "import": "./dist/*/index.js"
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.47.0",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.2.0",
+    "@storybook/addon-a11y": "10.6.0",
+    "@storybook/addon-docs": "10.6.0",
+    "@storybook/react-vite": "10.6.0",
+    "@tailwindcss/vite": "4.3.3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "esbuild": "^0.28.2",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "storybook": "10.6.0",
+    "tailwindcss": "4.3.3",
+    "tsup": "^8.5.0",
+    "typescript": "^5.5.4",
+    "vite": "7.3.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm build:styles && tsup && tsc -p tsconfig.build.json",
+    "build:styles": "node bin/ui-theme.mjs build tokens/default.json --out styles",
+    "lint": "biome check .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static",
+    "format": "biome check --write .",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test \"test/*.test.mjs\"",
+    "check:treeshake": "node test/treeshake.mjs"
+  }
 }

package/scripts/build-theme.mjs

@@ -0,0 +1,423 @@
+// Token generator: tokens.json -> tokens.css, theme.css, fonts.css, Theme.kt.
+// Pure functions, no dependencies. Used by bin/ui-theme.mjs and the tests.
+
+const PALETTE_ROLES = {
+  fill: "accent",
+  deep: "on-accent",
+  ink: "accent-ink",
+  word: "accent-word",
+  soft: "accent-soft",
+  line: "accent-line",
+  2: "accent-2",
+};
+
+const isThemed = (value) => value !== null && typeof value === "object";
+
+const valueFor = (token, theme, base) => {
+  if (!isThemed(token.value)) return token.value;
+  return token.value[theme] ?? token.value[base];
+};
+
+const themeOf = (tokens) => {
+  const themes = tokens.color?.themes?.map((t) => t.id) ?? ["light", "dark"];
+  return { base: themes[0], others: themes.slice(1) };
+};
+
+const allTokens = (tokens) => [
+  ...(tokens.color?.tokens ?? []),
+  ...(tokens.shadow?.tokens ?? []),
+  ...(tokens.radius?.tokens ?? []),
+  ...(tokens.spacing?.tokens ?? []),
+  ...(tokens.size?.tokens ?? []),
+  ...(tokens.styles?.tokens ?? []),
+  ...(tokens.styles?.density?.tokens ?? []),
+];
+
+const typeStyles = (tokens) =>
+  (tokens.type?.groups ?? []).flatMap((g) =>
+    g.styles.map((s) => ({ ...s, family: s.family ?? g.family ?? "sans" })),
+  );
+
+/** Palettes are derived from color tokens named pal-<id>-<role>. */
+export function palettesOf(tokens) {
+  const out = new Map();
+  for (const t of tokens.color?.tokens ?? []) {
+    const m = /^pal-(.+)-(fill|deep|ink|word|soft|line|2)$/.exec(t.name);
+    if (!m) continue;
+    if (!out.has(m[1])) out.set(m[1], {});
+    out.get(m[1])[m[2]] = t.name;
+  }
+  return out;
+}
+
+const decls = (list) => list.map(([k, v]) => `  --${k}: ${v};`).join("\n");
+
+// ---------------------------------------------------------------- Styles
+//
+// Three orthogonal attributes remap custom properties: data-style (preset), data-density and
+// data-radius. Each block declares every property its group governs, because a custom property
+// that references another one is resolved where it is declared: a nested [data-style] must
+// re-declare the whole set instead of relying on :root's already-computed values.
+//
+// Precedence on one element follows source order at equal specificity (:root[x] on the root,
+// [x] on a nested element): themes < accents < presets < density < radius. A preset's dark
+// values use :root[data-theme] in front of the attribute, so they outrank the theme block.
+// data-radius also wins over a preset declared on a descendant: radius blocks set
+// --<token>-override, and presets read their radius through var(--<token>-override, <own>).
+
+const attrSelector = (attr, id) => `:root[${attr}="${id}"],\n[${attr}="${id}"]`;
+
+const indent = (text) =>
+  text
+    .split("\n")
+    .map((l) => (l ? `  ${l}` : l))
+    .join("\n");
+
+function variantBlocks(attr, id, entries, { base, others }) {
+  const flat = entries.map(([name, v]) => [
+    name,
+    isThemed(v) ? (v[base] ?? Object.values(v)[0]) : v,
+  ]);
+  const out = [`${attrSelector(attr, id)} {\n${decls(flat)}\n}`];
+  for (const theme of others) {
+    const themed = entries
+      .filter(([, v]) => isThemed(v) && theme in v)
+      .map(([n, v]) => [n, v[theme]]);
+    if (!themed.length) continue;
+    const at = (root) => `${root}[${attr}="${id}"],\n${root} [${attr}="${id}"]`;
+    if (theme === "dark") {
+      const sel = at(`:root:not([data-theme="${base}"])`);
+      out.push(
+        `@media (prefers-color-scheme: dark) {\n${indent(`${sel} {\n${decls(themed)}\n}`)}\n}`,
+      );
+    }
+    out.push(`${at(`:root[data-theme="${theme}"]`)} {\n${decls(themed)}\n}`);
+  }
+  return out;
+}
+
+/** Resolved style groups; throws on inconsistent definitions. Empty when the theme has none. */
+export function stylesOf(tokens) {
+  const styles = tokens.styles;
+  if (!styles) return null;
+  const byName = new Map(allTokens(tokens).map((t) => [t.name, t]));
+  const known = (name, where) => {
+    if (!byName.has(name)) throw new Error(`styles: unknown token "${name}" in ${where}`);
+    return name;
+  };
+
+  const density = styles.density ?? { levels: [] };
+  const densityGoverned = new Set(
+    density.levels.length ? ["density", ...(density.scaled ?? [])] : [],
+  );
+  for (const name of densityGoverned) {
+    known(name, "density");
+    if (isThemed(byName.get(name).value))
+      throw new Error(`styles: density token "${name}" is themed`);
+  }
+
+  const radiusLevels = styles.radius?.levels ?? [];
+  const radiusGoverned = new Set(radiusLevels.flatMap((l) => Object.keys(l.values ?? {})));
+  for (const name of radiusGoverned) known(name, "radius levels");
+
+  const presets = styles.presets ?? [];
+  const def = presets.find((p) => p.id === styles.default);
+  if (presets.length && !def) throw new Error(`styles: default preset "${styles.default}" missing`);
+  if (def && Object.keys(def.values ?? {}).length)
+    throw new Error("styles: the default preset is the base tokens and must not override values");
+
+  const presetGoverned = new Set([
+    ...(styles.tokens ?? []).map((t) => t.name),
+    ...(tokens.radius?.tokens ?? []).map((t) => t.name),
+    ...(tokens.shadow?.tokens ?? []).map((t) => t.name),
+  ]);
+  for (const p of presets) {
+    for (const [name, v] of Object.entries(p.values ?? {})) {
+      known(name, `preset "${p.id}"`);
+      if (densityGoverned.has(name))
+        throw new Error(`styles: preset "${p.id}" sets "${name}", which belongs to data-density`);
+      if (radiusGoverned.has(name) && isThemed(v))
+        throw new Error(`styles: preset "${p.id}" themes radius "${name}"`);
+      presetGoverned.add(name);
+    }
+  }
+  const order = [...byName.keys()];
+  const sorted = (set) => order.filter((n) => set.has(n));
+  return {
+    byName,
+    presets,
+    density,
+    radiusLevels,
+    presetGoverned: sorted(presetGoverned),
+    densityGoverned: sorted(densityGoverned),
+    radiusGoverned: sorted(radiusGoverned),
+  };
+}
+
+function buildStyleBlocks(tokens) {
+  const s = stylesOf(tokens);
+  if (!s) return [];
+  const themes = themeOf(tokens);
+  const blocks = [];
+  const radius = new Set(s.radiusGoverned);
+
+  for (const p of s.presets) {
+    const entries = s.presetGoverned.map((name) => {
+      const v = p.values?.[name] ?? s.byName.get(name).value;
+      return [name, radius.has(name) ? `var(--${name}-override, ${v})` : v];
+    });
+    blocks.push(...variantBlocks("data-style", p.id, entries, themes));
+  }
+
+  for (const level of s.density.levels) {
+    const entries = s.densityGoverned.map((name) =>
+      name === "density"
+        ? [name, String(level.density)]
+        : [name, `calc(${s.byName.get(name).value} * var(--density))`],
+    );
+    blocks.push(...variantBlocks("data-density", level.id, entries, themes));
+  }
+
+  for (const level of s.radiusLevels) {
+    const entries = s.radiusGoverned.flatMap((name) => {
+      const v = level.values?.[name] ?? s.byName.get(name).value;
+      return [
+        [`${name}-override`, v],
+        [name, v],
+      ];
+    });
+    blocks.push(...variantBlocks("data-radius", level.id, entries, themes));
+  }
+  return blocks;
+}
+
+const cssRule = (selector, body, depth = 1) => {
+  const pad = "  ".repeat(depth);
+  const lines = Object.entries(body).map(([k, v]) =>
+    typeof v === "object" ? cssRule(k, v, depth + 1) : `${pad}${k}: ${v};`,
+  );
+  return `${"  ".repeat(depth - 1)}${selector} {\n${lines.join("\n")}\n${"  ".repeat(depth - 1)}}`;
+};
+
+export function buildTokensCss(tokens) {
+  const { base, others } = themeOf(tokens);
+  const all = allTokens(tokens);
+  const themedOnly = (theme) => all.filter((t) => isThemed(t.value) && theme in t.value);
+  const blocks = [];
+
+  const root = all.map((t) => [t.name, valueFor(t, base, base)]);
+  for (const [k, v] of Object.entries(tokens.type?.families ?? {})) {
+    root.push([`font-${k}`, v]);
+  }
+  blocks.push(`:root {\n  color-scheme: ${base};\n${decls(root)}\n}`);
+
+  for (const theme of others) {
+    const body = decls(themedOnly(theme).map((t) => [t.name, t.value[theme]]));
+    const scheme = `  color-scheme: ${theme};\n`;
+    if (theme === "dark") {
+      blocks.push(
+        `@media (prefers-color-scheme: dark) {\n  :root:not([data-theme="${base}"]) {\n${scheme
+          .split("\n")
+          .map((l) => (l ? `  ${l}` : l))
+          .join("\n")}${body
+          .split("\n")
+          .map((l) => `  ${l}`)
+          .join("\n")}\n  }\n}`,
+      );
+    }
+    blocks.push(`:root[data-theme="${theme}"] {\n${scheme}${body}\n}`);
+  }
+
+  for (const [id, roles] of palettesOf(tokens)) {
+    const pairs = Object.entries(PALETTE_ROLES)
+      .filter(([role]) => roles[role])
+      .map(([role, target]) => [target, `var(--${roles[role]})`]);
+    // A chart category color that looks like this accent yields to the reserve, so series 1
+    // never repeats series 0 (which wears the accent).
+    const swap = tokens.chartSwaps?.palettes?.[id];
+    if (swap && tokens.chartSwaps.reserve)
+      pairs.push([swap, `var(--${tokens.chartSwaps.reserve})`]);
+    // :root keeps a palette above the light/dark blocks, which are also scoped to :root.
+    blocks.push(`:root[data-accent="${id}"] {\n${decls(pairs)}\n}`);
+  }
+
+  blocks.push(...buildStyleBlocks(tokens));
+
+  return `/* Generated by ui-theme from "${tokens.name}". Do not edit. */\n${blocks.join("\n\n")}\n`;
+}
+
+const stripPrefix = (name, prefix) =>
+  name.startsWith(`${prefix}-`) ? name.slice(prefix.length + 1) : name;
+
+export function buildThemeCss(tokens) {
+  const lines = [];
+  for (const t of tokens.color?.tokens ?? []) {
+    lines.push(`  --color-${t.name}: var(--${t.name});`);
+  }
+  for (const t of tokens.radius?.tokens ?? []) {
+    lines.push(`  --radius-${stripPrefix(t.name, "radius")}: var(--${t.name});`);
+  }
+  for (const t of tokens.shadow?.tokens ?? []) {
+    lines.push(`  --shadow-${stripPrefix(t.name, "shadow")}: var(--${t.name});`);
+  }
+  for (const t of tokens.size?.tokens ?? []) {
+    lines.push(`  --spacing-${t.name}: var(--${t.name});`);
+  }
+  for (const k of Object.keys(tokens.type?.families ?? {})) {
+    lines.push(`  --font-${k}: var(--font-${k});`);
+  }
+  for (const s of typeStyles(tokens)) {
+    lines.push(`  --text-${s.name}: ${s.fontSize};`);
+    if (s.lineHeight !== undefined) {
+      lines.push(`  --text-${s.name}--line-height: ${s.lineHeight};`);
+    }
+    if (s.fontWeight !== undefined) {
+      lines.push(`  --text-${s.name}--font-weight: ${s.fontWeight};`);
+    }
+    if (s.letterSpacing !== undefined) {
+      lines.push(`  --text-${s.name}--letter-spacing: ${s.letterSpacing};`);
+    }
+  }
+  const styles = stylesOf(tokens);
+  for (const [themeVar, name] of Object.entries(tokens.styles?.tailwind ?? {})) {
+    if (!styles.byName.has(name)) throw new Error(`styles.tailwind: unknown token "${name}"`);
+    lines.push(`  ${themeVar}: var(--${name});`);
+  }
+  const utilities = Object.entries(tokens.styles?.utilities ?? {}).map(([name, body]) =>
+    cssRule(`@utility ${name}`, body),
+  );
+  const tail = utilities.length ? `\n${utilities.join("\n\n")}\n` : "";
+  return `/* Generated by ui-theme from "${tokens.name}". Do not edit. */\n@theme inline {\n${lines.join("\n")}\n}\n${tail}`;
+}
+
+export function buildFontsCss(tokens) {
+  const imports = (tokens.type?.fonts ?? [])
+    .filter((f) => f.source === "google")
+    .map((f) => `@import url("https://fonts.googleapis.com/css2?family=${f.spec}&display=swap");`);
+  return `/* Generated by ui-theme. Optional: skip it when the app loads fonts itself (e.g. next/font). */\n${imports.join("\n")}\n`;
+}
+
+// ---------------------------------------------------------------- Kotlin
+
+const camel = (name) =>
+  name.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase()).replace(/^[0-9]/, "_$&");
+const pascal = (name) => {
+  const c = camel(name);
+  return c[0].toUpperCase() + c.slice(1);
+};
+
+export function toKotlinColor(css) {
+  const v = css.trim().toLowerCase();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(v);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) h = [...h].map((c) => c + c).join("");
+    if (h.length === 6) return `Color(0xFF${h.toUpperCase()})`;
+    return `Color(0x${(h.slice(6) + h.slice(0, 6)).toUpperCase()})`;
+  }
+  const rgba = /^rgba?\(([^)]+)\)$/.exec(v);
+  if (rgba) {
+    const [r, g, b, a = "1"] = rgba[1].split(",").map((x) => x.trim());
+    const hx = (n) => Math.round(Number(n)).toString(16).padStart(2, "0");
+    const alpha = Math.round(Number(a) * 255)
+      .toString(16)
+      .padStart(2, "0");
+    return `Color(0x${(alpha + hx(r) + hx(g) + hx(b)).toUpperCase()})`;
+  }
+  throw new Error(`Unsupported color for Kotlin: ${css}`);
+}
+
+const px = (value) => `${Number.parseFloat(value)}.dp`;
+
+export function buildThemeKt(tokens, pkg = "com.jcsoftdev.ui.theme") {
+  const { base, others } = themeOf(tokens);
+  const themes = [base, ...others];
+  const colors = (tokens.color?.tokens ?? []).filter((t) => !t.name.startsWith("pal-"));
+  const out = [
+    `// Generated by ui-theme from "${tokens.name}". Do not edit.`,
+    `package ${pkg}`,
+    "",
+    "import androidx.compose.foundation.shape.RoundedCornerShape",
+    "import androidx.compose.ui.graphics.Color",
+    "import androidx.compose.ui.text.TextStyle",
+    "import androidx.compose.ui.text.font.FontWeight",
+    "import androidx.compose.ui.unit.dp",
+    "import androidx.compose.ui.unit.em",
+    "import androidx.compose.ui.unit.sp",
+    "",
+    "class ThemeColors(",
+    ...colors.map((t) => `    val ${camel(t.name)}: Color,`),
+    ")",
+    "",
+    "object UiColors {",
+  ];
+  for (const theme of themes) {
+    out.push(`    val ${pascal(theme)} = ThemeColors(`);
+    for (const t of colors) {
+      out.push(`        ${camel(t.name)} = ${toKotlinColor(valueFor(t, theme, base))},`);
+    }
+    out.push("    )");
+  }
+  out.push("}", "");
+
+  const palettes = palettesOf(tokens);
+  if (palettes.size) {
+    out.push("class AccentPalette(");
+    for (const target of Object.values(PALETTE_ROLES)) {
+      out.push(`    val ${camel(target)}: Color,`);
+    }
+    out.push(")", "", "object UiPalettes {");
+    for (const theme of themes) {
+      out.push(`    val ${pascal(theme)}: Map<String, AccentPalette> = mapOf(`);
+      for (const [id, roles] of palettes) {
+        const byName = new Map(tokens.color.tokens.map((t) => [t.name, t]));
+        const args = Object.entries(PALETTE_ROLES).map(([role]) => {
+          const tok = byName.get(roles[role]);
+          return tok ? toKotlinColor(valueFor(tok, theme, base)) : "Color.Unspecified";
+        });
+        out.push(`        "${id}" to AccentPalette(${args.join(", ")}),`);
+      }
+      out.push("    )");
+    }
+    out.push("}", "");
+  }
+
+  out.push("object UiShapes {");
+  for (const t of tokens.radius?.tokens ?? []) {
+    const n = camel(stripPrefix(t.name, "radius"));
+    const pill = Number.parseFloat(t.value) >= 999;
+    out.push(`    val ${n} = RoundedCornerShape(${pill ? "50" : px(t.value)})`);
+  }
+  out.push("}", "", "object UiSizes {");
+  for (const t of [...(tokens.spacing?.tokens ?? []), ...(tokens.size?.tokens ?? [])]) {
+    out.push(`    val ${camel(t.name)} = ${px(t.value)}`);
+  }
+  out.push("}", "");
+
+  const family = (tokens.type?.fonts ?? [])[0]?.family ?? "";
+  out.push(`const val UiFontFamilyName = "${family}"`, "", "object UiTypography {");
+  for (const s of typeStyles(tokens)) {
+    const size = Number.parseFloat(s.fontSize);
+    const parts = [`fontSize = ${size}.sp`];
+    if (s.fontWeight !== undefined) parts.push(`fontWeight = FontWeight(${s.fontWeight})`);
+    if (s.lineHeight !== undefined) {
+      const lh = String(s.lineHeight).endsWith("px")
+        ? Number.parseFloat(s.lineHeight)
+        : Number((size * Number(s.lineHeight)).toFixed(2));
+      parts.push(`lineHeight = ${lh}.sp`);
+    }
+    if (s.letterSpacing) parts.push(`letterSpacing = (${Number.parseFloat(s.letterSpacing)}).em`);
+    out.push(`    val ${camel(s.name)} = TextStyle(${parts.join(", ")})`);
+  }
+  out.push("}", "");
+  return out.join("\n");
+}
+
+export function buildTheme(tokens, { kotlinPackage } = {}) {
+  return {
+    "tokens.css": buildTokensCss(tokens),
+    "theme.css": buildThemeCss(tokens),
+    "fonts.css": buildFontsCss(tokens),
+    "Theme.kt": buildThemeKt(tokens, kotlinPackage),
+  };
+}