@vsreact/core 0.0.10 → 0.0.12

package/src/theme.ts

@@ -1,159 +1,159 @@
-export type ThemeColors = Record<string, string>;
-
-// The full Tailwind v3 color palette.
-const palettes: Record<string, Record<string, string>> = {
-  slate: {
-    "50": "#f8fafc", "100": "#f1f5f9", "200": "#e2e8f0", "300": "#cbd5e1",
-    "400": "#94a3b8", "500": "#64748b", "600": "#475569", "700": "#334155",
-    "800": "#1e293b", "900": "#0f172a", "950": "#020617",
-  },
-  gray: {
-    "50": "#f9fafb", "100": "#f3f4f6", "200": "#e5e7eb", "300": "#d1d5db",
-    "400": "#9ca3af", "500": "#6b7280", "600": "#4b5563", "700": "#374151",
-    "800": "#1f2937", "900": "#111827", "950": "#030712",
-  },
-  stone: {
-    "50": "#fafaf9", "100": "#f5f5f4", "200": "#e7e5e4", "300": "#d6d3d1",
-    "400": "#a8a29e", "500": "#78716c", "600": "#57534e", "700": "#44403c",
-    "800": "#292524", "900": "#1c1917", "950": "#0c0a09",
-  },
-  orange: {
-    "50": "#fff7ed", "100": "#ffedd5", "200": "#fed7aa", "300": "#fdba74",
-    "400": "#fb923c", "500": "#f97316", "600": "#ea580c", "700": "#c2410c",
-    "800": "#9a3412", "900": "#7c2d12", "950": "#431407",
-  },
-  yellow: {
-    "50": "#fefce8", "100": "#fef9c3", "200": "#fef08a", "300": "#fde047",
-    "400": "#facc15", "500": "#eab308", "600": "#ca8a04", "700": "#a16207",
-    "800": "#854d0e", "900": "#713f12", "950": "#422006",
-  },
-  green: {
-    "50": "#f0fdf4", "100": "#dcfce7", "200": "#bbf7d0", "300": "#86efac",
-    "400": "#4ade80", "500": "#22c55e", "600": "#16a34a", "700": "#15803d",
-    "800": "#166534", "900": "#14532d", "950": "#052e16",
-  },
-  teal: {
-    "50": "#f0fdfa", "100": "#ccfbf1", "200": "#99f6e4", "300": "#5eead4",
-    "400": "#2dd4bf", "500": "#14b8a6", "600": "#0d9488", "700": "#0f766e",
-    "800": "#115e59", "900": "#134e4a", "950": "#042f2e",
-  },
-  cyan: {
-    "50": "#ecfeff", "100": "#cffafe", "200": "#a5f3fc", "300": "#67e8f9",
-    "400": "#22d3ee", "500": "#06b6d4", "600": "#0891b2", "700": "#0e7490",
-    "800": "#155e75", "900": "#164e63", "950": "#083344",
-  },
-  blue: {
-    "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd",
-    "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8",
-    "800": "#1e40af", "900": "#1e3a8a", "950": "#172554",
-  },
-  indigo: {
-    "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc",
-    "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca",
-    "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b",
-  },
-  violet: {
-    "50": "#f5f3ff", "100": "#ede9fe", "200": "#ddd6fe", "300": "#c4b5fd",
-    "400": "#a78bfa", "500": "#8b5cf6", "600": "#7c3aed", "700": "#6d28d9",
-    "800": "#5b21b6", "900": "#4c1d95", "950": "#2e1065",
-  },
-  purple: {
-    "50": "#faf5ff", "100": "#f3e8ff", "200": "#e9d5ff", "300": "#d8b4fe",
-    "400": "#c084fc", "500": "#a855f7", "600": "#9333ea", "700": "#7e22ce",
-    "800": "#6b21a8", "900": "#581c87", "950": "#3b0764",
-  },
-  fuchsia: {
-    "50": "#fdf4ff", "100": "#fae8ff", "200": "#f5d0fe", "300": "#f0abfc",
-    "400": "#e879f9", "500": "#d946ef", "600": "#c026d3", "700": "#a21caf",
-    "800": "#86198f", "900": "#701a75", "950": "#4a044e",
-  },
-  pink: {
-    "50": "#fdf2f8", "100": "#fce7f3", "200": "#fbcfe8", "300": "#f9a8d4",
-    "400": "#f472b6", "500": "#ec4899", "600": "#db2777", "700": "#be185d",
-    "800": "#9d174d", "900": "#831843", "950": "#500724",
-  },
-  rose: {
-    "50": "#fff1f2", "100": "#ffe4e6", "200": "#fecdd3", "300": "#fda4af",
-    "400": "#fb7185", "500": "#f43f5e", "600": "#e11d48", "700": "#be123c",
-    "800": "#9f1239", "900": "#881337", "950": "#4c0519",
-  },
-  zinc: {
-    "50": "#fafafa", "100": "#f4f4f5", "200": "#e4e4e7", "300": "#d4d4d8",
-    "400": "#a1a1aa", "500": "#71717a", "600": "#52525b", "700": "#3f3f46",
-    "800": "#27272a", "900": "#18181b", "950": "#09090b",
-  },
-  neutral: {
-    "50": "#fafafa", "100": "#f5f5f5", "200": "#e5e5e5", "300": "#d4d4d4",
-    "400": "#a3a3a3", "500": "#737373", "600": "#525252", "700": "#404040",
-    "800": "#262626", "900": "#171717", "950": "#0a0a0a",
-  },
-  lime: {
-    "50": "#f7fee7", "100": "#ecfccb", "200": "#d9f99d", "300": "#bef264",
-    "400": "#a3e635", "500": "#84cc16", "600": "#65a30d", "700": "#4d7c0f",
-    "800": "#3f6212", "900": "#365314", "950": "#1a2e05",
-  },
-  red: {
-    "50": "#fef2f2", "100": "#fee2e2", "200": "#fecaca", "300": "#fca5a5",
-    "400": "#f87171", "500": "#ef4444", "600": "#dc2626", "700": "#b91c1c",
-    "800": "#991b1b", "900": "#7f1d1d", "950": "#450a0a",
-  },
-  amber: {
-    "50": "#fffbeb", "100": "#fef3c7", "200": "#fde68a", "300": "#fcd34d",
-    "400": "#fbbf24", "500": "#f59e0b", "600": "#d97706", "700": "#b45309",
-    "800": "#92400e", "900": "#78350f", "950": "#451a03",
-  },
-  emerald: {
-    "50": "#ecfdf5", "100": "#d1fae5", "200": "#a7f3d0", "300": "#6ee7b7",
-    "400": "#34d399", "500": "#10b981", "600": "#059669", "700": "#047857",
-    "800": "#065f46", "900": "#064e3b", "950": "#022c22",
-  },
-  sky: {
-    "50": "#f0f9ff", "100": "#e0f2fe", "200": "#bae6fd", "300": "#7dd3fc",
-    "400": "#38bdf8", "500": "#0ea5e9", "600": "#0284c7", "700": "#0369a1",
-    "800": "#075985", "900": "#0c4a6e", "950": "#082f49",
-  },
-};
-
-let themeColors: ThemeColors = {};
-
-export function setThemeColors(colors: ThemeColors): void {
-  themeColors = { ...themeColors };
-  for (const [name, value] of Object.entries(colors))
-    themeColors[name] = value.toLowerCase();
-}
-
-/** Resolves a color name ("zinc-900", "white", "accent", "lime-400/20",
-    "[#c6f135]") to "#rrggbb"/"#rrggbbaa", or undefined if unknown. */
-export function resolveColor(name: string): string | undefined {
-  let base = name;
-  let alpha: string | undefined;
-
-  const slash = name.lastIndexOf("/");
-  if (slash > 0) {
-    const pct = Number(name.slice(slash + 1));
-    if (Number.isFinite(pct)) {
-      base = name.slice(0, slash);
-      alpha = Math.round((pct / 100) * 255)
-        .toString(16)
-        .padStart(2, "0");
-    }
-  }
-
-  let hex: string | undefined;
-
-  if (base.startsWith("[#") && base.endsWith("]")) hex = base.slice(1, -1).toLowerCase();
-  else if (base === "white") hex = "#ffffff";
-  else if (base === "black") hex = "#000000";
-  else if (base === "transparent") hex = "#00000000";
-  else if (themeColors[base]) hex = themeColors[base];
-  else {
-    const dash = base.lastIndexOf("-");
-    if (dash > 0) {
-      const palette = palettes[base.slice(0, dash)];
-      hex = palette?.[base.slice(dash + 1)];
-    }
-  }
-
-  if (hex === undefined) return undefined;
-  return alpha !== undefined && hex.length === 7 ? hex + alpha : hex;
-}
+export type ThemeColors = Record<string, string>;
+
+// The full Tailwind v3 color palette.
+const palettes: Record<string, Record<string, string>> = {
+  slate: {
+    "50": "#f8fafc", "100": "#f1f5f9", "200": "#e2e8f0", "300": "#cbd5e1",
+    "400": "#94a3b8", "500": "#64748b", "600": "#475569", "700": "#334155",
+    "800": "#1e293b", "900": "#0f172a", "950": "#020617",
+  },
+  gray: {
+    "50": "#f9fafb", "100": "#f3f4f6", "200": "#e5e7eb", "300": "#d1d5db",
+    "400": "#9ca3af", "500": "#6b7280", "600": "#4b5563", "700": "#374151",
+    "800": "#1f2937", "900": "#111827", "950": "#030712",
+  },
+  stone: {
+    "50": "#fafaf9", "100": "#f5f5f4", "200": "#e7e5e4", "300": "#d6d3d1",
+    "400": "#a8a29e", "500": "#78716c", "600": "#57534e", "700": "#44403c",
+    "800": "#292524", "900": "#1c1917", "950": "#0c0a09",
+  },
+  orange: {
+    "50": "#fff7ed", "100": "#ffedd5", "200": "#fed7aa", "300": "#fdba74",
+    "400": "#fb923c", "500": "#f97316", "600": "#ea580c", "700": "#c2410c",
+    "800": "#9a3412", "900": "#7c2d12", "950": "#431407",
+  },
+  yellow: {
+    "50": "#fefce8", "100": "#fef9c3", "200": "#fef08a", "300": "#fde047",
+    "400": "#facc15", "500": "#eab308", "600": "#ca8a04", "700": "#a16207",
+    "800": "#854d0e", "900": "#713f12", "950": "#422006",
+  },
+  green: {
+    "50": "#f0fdf4", "100": "#dcfce7", "200": "#bbf7d0", "300": "#86efac",
+    "400": "#4ade80", "500": "#22c55e", "600": "#16a34a", "700": "#15803d",
+    "800": "#166534", "900": "#14532d", "950": "#052e16",
+  },
+  teal: {
+    "50": "#f0fdfa", "100": "#ccfbf1", "200": "#99f6e4", "300": "#5eead4",
+    "400": "#2dd4bf", "500": "#14b8a6", "600": "#0d9488", "700": "#0f766e",
+    "800": "#115e59", "900": "#134e4a", "950": "#042f2e",
+  },
+  cyan: {
+    "50": "#ecfeff", "100": "#cffafe", "200": "#a5f3fc", "300": "#67e8f9",
+    "400": "#22d3ee", "500": "#06b6d4", "600": "#0891b2", "700": "#0e7490",
+    "800": "#155e75", "900": "#164e63", "950": "#083344",
+  },
+  blue: {
+    "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd",
+    "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8",
+    "800": "#1e40af", "900": "#1e3a8a", "950": "#172554",
+  },
+  indigo: {
+    "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc",
+    "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca",
+    "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b",
+  },
+  violet: {
+    "50": "#f5f3ff", "100": "#ede9fe", "200": "#ddd6fe", "300": "#c4b5fd",
+    "400": "#a78bfa", "500": "#8b5cf6", "600": "#7c3aed", "700": "#6d28d9",
+    "800": "#5b21b6", "900": "#4c1d95", "950": "#2e1065",
+  },
+  purple: {
+    "50": "#faf5ff", "100": "#f3e8ff", "200": "#e9d5ff", "300": "#d8b4fe",
+    "400": "#c084fc", "500": "#a855f7", "600": "#9333ea", "700": "#7e22ce",
+    "800": "#6b21a8", "900": "#581c87", "950": "#3b0764",
+  },
+  fuchsia: {
+    "50": "#fdf4ff", "100": "#fae8ff", "200": "#f5d0fe", "300": "#f0abfc",
+    "400": "#e879f9", "500": "#d946ef", "600": "#c026d3", "700": "#a21caf",
+    "800": "#86198f", "900": "#701a75", "950": "#4a044e",
+  },
+  pink: {
+    "50": "#fdf2f8", "100": "#fce7f3", "200": "#fbcfe8", "300": "#f9a8d4",
+    "400": "#f472b6", "500": "#ec4899", "600": "#db2777", "700": "#be185d",
+    "800": "#9d174d", "900": "#831843", "950": "#500724",
+  },
+  rose: {
+    "50": "#fff1f2", "100": "#ffe4e6", "200": "#fecdd3", "300": "#fda4af",
+    "400": "#fb7185", "500": "#f43f5e", "600": "#e11d48", "700": "#be123c",
+    "800": "#9f1239", "900": "#881337", "950": "#4c0519",
+  },
+  zinc: {
+    "50": "#fafafa", "100": "#f4f4f5", "200": "#e4e4e7", "300": "#d4d4d8",
+    "400": "#a1a1aa", "500": "#71717a", "600": "#52525b", "700": "#3f3f46",
+    "800": "#27272a", "900": "#18181b", "950": "#09090b",
+  },
+  neutral: {
+    "50": "#fafafa", "100": "#f5f5f5", "200": "#e5e5e5", "300": "#d4d4d4",
+    "400": "#a3a3a3", "500": "#737373", "600": "#525252", "700": "#404040",
+    "800": "#262626", "900": "#171717", "950": "#0a0a0a",
+  },
+  lime: {
+    "50": "#f7fee7", "100": "#ecfccb", "200": "#d9f99d", "300": "#bef264",
+    "400": "#a3e635", "500": "#84cc16", "600": "#65a30d", "700": "#4d7c0f",
+    "800": "#3f6212", "900": "#365314", "950": "#1a2e05",
+  },
+  red: {
+    "50": "#fef2f2", "100": "#fee2e2", "200": "#fecaca", "300": "#fca5a5",
+    "400": "#f87171", "500": "#ef4444", "600": "#dc2626", "700": "#b91c1c",
+    "800": "#991b1b", "900": "#7f1d1d", "950": "#450a0a",
+  },
+  amber: {
+    "50": "#fffbeb", "100": "#fef3c7", "200": "#fde68a", "300": "#fcd34d",
+    "400": "#fbbf24", "500": "#f59e0b", "600": "#d97706", "700": "#b45309",
+    "800": "#92400e", "900": "#78350f", "950": "#451a03",
+  },
+  emerald: {
+    "50": "#ecfdf5", "100": "#d1fae5", "200": "#a7f3d0", "300": "#6ee7b7",
+    "400": "#34d399", "500": "#10b981", "600": "#059669", "700": "#047857",
+    "800": "#065f46", "900": "#064e3b", "950": "#022c22",
+  },
+  sky: {
+    "50": "#f0f9ff", "100": "#e0f2fe", "200": "#bae6fd", "300": "#7dd3fc",
+    "400": "#38bdf8", "500": "#0ea5e9", "600": "#0284c7", "700": "#0369a1",
+    "800": "#075985", "900": "#0c4a6e", "950": "#082f49",
+  },
+};
+
+let themeColors: ThemeColors = {};
+
+export function setThemeColors(colors: ThemeColors): void {
+  themeColors = { ...themeColors };
+  for (const [name, value] of Object.entries(colors))
+    themeColors[name] = value.toLowerCase();
+}
+
+/** Resolves a color name ("zinc-900", "white", "accent", "lime-400/20",
+    "[#c6f135]") to "#rrggbb"/"#rrggbbaa", or undefined if unknown. */
+export function resolveColor(name: string): string | undefined {
+  let base = name;
+  let alpha: string | undefined;
+
+  const slash = name.lastIndexOf("/");
+  if (slash > 0) {
+    const pct = Number(name.slice(slash + 1));
+    if (Number.isFinite(pct)) {
+      base = name.slice(0, slash);
+      alpha = Math.round((pct / 100) * 255)
+        .toString(16)
+        .padStart(2, "0");
+    }
+  }
+
+  let hex: string | undefined;
+
+  if (base.startsWith("[#") && base.endsWith("]")) hex = base.slice(1, -1).toLowerCase();
+  else if (base === "white") hex = "#ffffff";
+  else if (base === "black") hex = "#000000";
+  else if (base === "transparent") hex = "#00000000";
+  else if (themeColors[base]) hex = themeColors[base];
+  else {
+    const dash = base.lastIndexOf("-");
+    if (dash > 0) {
+      const palette = palettes[base.slice(0, dash)];
+      hex = palette?.[base.slice(dash + 1)];
+    }
+  }
+
+  if (hex === undefined) return undefined;
+  return alpha !== undefined && hex.length === 7 ? hex + alpha : hex;
+}

package/src/tw.test.ts

@@ -1,116 +1,122 @@
-import { describe, expect, test } from "bun:test";
-import { configureTheme, tw } from "./tw";
-
-describe("tw resolver", () => {
-  test("layout, palette color, radius, border with opacity suffix", () => {
-    const r = tw("flex-1 flex-row bg-zinc-950 rounded-xl border border-lime-400/20 p-4");
-    expect(r.style).toEqual({
-      flex: 1,
-      flexDirection: "row",
-      backgroundColor: "#09090b",
-      borderRadius: 12,
-      borderWidth: 1,
-      borderColor: "#a3e63533",
-      padding: 16,
-    });
-    expect(r.hoverStyle).toBeUndefined();
-  });
-
-  test("hover variant routes to hoverStyle", () => {
-    const r = tw("bg-zinc-900 hover:bg-lime-300 active:bg-lime-500 focus:border-lime-400");
-    expect(r.style).toEqual({ backgroundColor: "#18181b" });
-    expect(r.hoverStyle).toEqual({ backgroundColor: "#bef264" });
-    expect(r.activeStyle).toEqual({ backgroundColor: "#84cc16" });
-    expect(r.focusStyle).toEqual({ borderColor: "#a3e635" });
-  });
-
-  test("theme tokens", () => {
-    configureTheme({ colors: { accent: "#C6F135", well: "#0C0E0C" } });
-    const r = tw("bg-well text-accent border-accent/35");
-    expect(r.style.backgroundColor).toBe("#0c0e0c");
-    expect(r.style.color).toBe("#c6f135");
-    expect(r.style.borderColor).toBe("#c6f13559");
-  });
-
-  test("arbitrary values", () => {
-    const r = tw("w-[123] h-[45%] bg-[#C6F135] p-[7]");
-    expect(r.style).toEqual({
-      width: 123,
-      height: "45%",
-      backgroundColor: "#c6f135",
-      padding: 7,
-    });
-  });
-
-  test("spacing scale, fractions, full, directional padding/margin", () => {
-    const r = tw("w-full h-1/2 px-3 py-1.5 mt-2 -mb-1 gap-2 gap-x-4");
-    expect(r.style).toEqual({
-      width: "100%",
-      height: "50%",
-      paddingLeft: 12,
-      paddingRight: 12,
-      paddingTop: 6,
-      paddingBottom: 6,
-      marginTop: 8,
-      marginBottom: -4,
-      gap: 8,
-      columnGap: 16,
-    });
-  });
-
-  test("text utilities", () => {
-    const r = tw("text-sm font-bold text-center text-zinc-400 leading-5 tracking-wide");
-    expect(r.style).toEqual({
-      fontSize: 14,
-      fontWeight: 700,
-      textAlign: "center",
-      color: "#a1a1aa",
-      lineHeight: 20,
-      letterSpacing: 0.4,
-    });
-    expect(tw("font-mono").style).toEqual({ fontFamily: "monospace" });
-  });
-
-  test("alignment, position, shadow, opacity, overflow, cursor", () => {
-    const r = tw(
-      "items-center justify-between absolute inset-0 top-2 shadow-lg opacity-50 overflow-hidden cursor-pointer",
-    );
-    expect(r.style).toEqual({
-      alignItems: "center",
-      justifyContent: "space-between",
-      position: "absolute",
-      left: 0,
-      right: 0,
-      bottom: 0,
-      top: 8,
-      shadowColor: "#00000066",
-      shadowRadius: 12,
-      shadowOffsetY: 4,
-      opacity: 0.5,
-      overflow: "hidden",
-      cursor: "pointer",
-    });
-  });
-
-  test("per-corner radius", () => {
-    const r = tw("rounded-t-lg rounded-br-full");
-    expect(r.style).toEqual({
-      borderTopLeftRadius: 8,
-      borderTopRightRadius: 8,
-      borderBottomRightRadius: 9999,
-    });
-  });
-
-  test("unknown classes are ignored", () => {
-    const r = tw("bg-zinc-900 not-a-real-class");
-    expect(r.style).toEqual({ backgroundColor: "#18181b" });
-  });
-
-  test("later classes win", () => {
-    const r = tw("bg-zinc-900 bg-zinc-800");
-    expect(r.style.backgroundColor).toBe("#27272a");
-  });
-});
+import { describe, expect, test } from "bun:test";
+import { configureTheme, tw } from "./tw";
+
+describe("tw resolver", () => {
+  test("layout, palette color, radius, border with opacity suffix", () => {
+    const r = tw("flex-1 flex-row bg-zinc-950 rounded-xl border border-lime-400/20 p-4");
+    expect(r.style).toEqual({
+      flex: 1,
+      flexDirection: "row",
+      backgroundColor: "#09090b",
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: "#a3e63533",
+      padding: 16,
+    });
+    expect(r.hoverStyle).toBeUndefined();
+  });
+
+  test("hover variant routes to hoverStyle", () => {
+    const r = tw("bg-zinc-900 hover:bg-lime-300 active:bg-lime-500 focus:border-lime-400");
+    expect(r.style).toEqual({ backgroundColor: "#18181b" });
+    expect(r.hoverStyle).toEqual({ backgroundColor: "#bef264" });
+    expect(r.activeStyle).toEqual({ backgroundColor: "#84cc16" });
+    expect(r.focusStyle).toEqual({ borderColor: "#a3e635" });
+  });
+
+  test("theme tokens", () => {
+    configureTheme({ colors: { accent: "#C6F135", well: "#0C0E0C" } });
+    const r = tw("bg-well text-accent border-accent/35");
+    expect(r.style.backgroundColor).toBe("#0c0e0c");
+    expect(r.style.color).toBe("#c6f135");
+    expect(r.style.borderColor).toBe("#c6f13559");
+  });
+
+  test("arbitrary values", () => {
+    const r = tw("w-[123] h-[45%] bg-[#C6F135] p-[7]");
+    expect(r.style).toEqual({
+      width: 123,
+      height: "45%",
+      backgroundColor: "#c6f135",
+      padding: 7,
+    });
+  });
+
+  test("spacing scale, fractions, full, directional padding/margin", () => {
+    const r = tw("w-full h-1/2 px-3 py-1.5 mt-2 -mb-1 gap-2 gap-x-4");
+    expect(r.style).toEqual({
+      width: "100%",
+      height: "50%",
+      paddingLeft: 12,
+      paddingRight: 12,
+      paddingTop: 6,
+      paddingBottom: 6,
+      marginTop: 8,
+      marginBottom: -4,
+      gap: 8,
+      columnGap: 16,
+    });
+  });
+
+  test("text utilities", () => {
+    const r = tw("text-sm font-bold text-center text-zinc-400 leading-5 tracking-wide");
+    expect(r.style).toEqual({
+      fontSize: 14,
+      fontWeight: 700,
+      textAlign: "center",
+      color: "#a1a1aa",
+      lineHeight: 20,
+      letterSpacing: 0.4,
+    });
+    expect(tw("font-mono").style).toEqual({ fontFamily: "monospace" });
+  });
+
+  test("arbitrary text sizes resolve; bracket hex stays a color", () => {
+    expect(tw("text-[13]").style).toEqual({ fontSize: 13 });
+    expect(tw("text-[8]").style).toEqual({ fontSize: 8 });
+    expect(tw("text-[#ff4a38]").style).toEqual({ color: "#ff4a38" });
+  });
+
+  test("alignment, position, shadow, opacity, overflow, cursor", () => {
+    const r = tw(
+      "items-center justify-between absolute inset-0 top-2 shadow-lg opacity-50 overflow-hidden cursor-pointer",
+    );
+    expect(r.style).toEqual({
+      alignItems: "center",
+      justifyContent: "space-between",
+      position: "absolute",
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 8,
+      shadowColor: "#00000066",
+      shadowRadius: 12,
+      shadowOffsetY: 4,
+      opacity: 0.5,
+      overflow: "hidden",
+      cursor: "pointer",
+    });
+  });
+
+  test("per-corner radius", () => {
+    const r = tw("rounded-t-lg rounded-br-full");
+    expect(r.style).toEqual({
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      borderBottomRightRadius: 9999,
+    });
+  });
+
+  test("unknown classes are ignored", () => {
+    const r = tw("bg-zinc-900 not-a-real-class");
+    expect(r.style).toEqual({ backgroundColor: "#18181b" });
+  });
+
+  test("later classes win", () => {
+    const r = tw("bg-zinc-900 bg-zinc-800");
+    expect(r.style.backgroundColor).toBe("#27272a");
+  });
+});
 
 describe("tw 0.0.3 additions", () => {
   test("full Tailwind palette resolves", () => {