@vsreact/core 0.0.1 → 0.0.3

package/src/controls.tsx

@@ -1,13 +1,17 @@
-// Knob and Slider — the classic VST controls, drawn by the VSReacT painter
-// (arc styles) and driven by drag gestures.
+// The built-in VST controls — knobs, sliders, toggles, XY pads, segmented
+// switches — drawn by the VSReacT painter and driven by drag gestures.
+// Each has a Param* variant bound to an APVTS parameter.
 
 import { useRef } from "react";
 import { View, Text } from "./primitives";
 import { useParameter } from "./parameters";
+import { useSpring } from "./animation";
+
+const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
 
 /** Vertical-drag-to-value mapping shared by Knob (and tested in isolation). */
 export function dragToValue(startValue: number, dy: number, sensitivity = 0.005): number {
-  return Math.min(1, Math.max(0, startValue - dy * sensitivity));
+  return clamp01(startValue - dy * sensitivity);
 }
 
 const ARC_START = -135;
@@ -110,7 +114,12 @@ export function ParamKnob({ paramId, label, size, trackColor, valueColor }: Para
 
 export interface SliderProps {
   value: number; // normalized 0..1
+  /** Track length when horizontal (default 160). */
   width?: number;
+  /** Track length when vertical (default 160). */
+  height?: number;
+  /** Vertical fader — drag up for more, fill rises from the bottom. */
+  vertical?: boolean;
   label?: string;
   disabled?: boolean;
   trackColor?: string;
@@ -123,6 +132,8 @@ export interface SliderProps {
 export function Slider({
   value,
   width = 160,
+  height = 160,
+  vertical,
   label,
   disabled,
   trackColor = "#2A2F27",
@@ -132,27 +143,54 @@ export function Slider({
   onEnd,
 }: SliderProps) {
   const startValue = useRef(0);
-  const clamped = Math.min(1, Math.max(0, value));
+  const clamped = clamp01(value);
+
+  const onDragStart = disabled
+    ? undefined
+    : () => {
+        startValue.current = clamped;
+        onBegin?.();
+      };
+  const onDragEnd = disabled ? undefined : () => onEnd?.();
+
+  if (vertical) {
+    return (
+      <View className="items-center gap-2">
+        <View
+          className={`w-[18] relative ${disabled ? "opacity-40" : "cursor-pointer"}`}
+          style={{ height }}
+          onDragStart={onDragStart}
+          onDrag={disabled ? undefined : (e) => onChange(clamp01(startValue.current - e.dy / height))}
+          onDragEnd={onDragEnd}
+        >
+          <View
+            className="absolute w-[4] rounded-full left-[7] top-0 bottom-0"
+            style={{ backgroundColor: trackColor }}
+          />
+          <View
+            className="absolute w-[4] rounded-full left-[7] bottom-0"
+            style={{ height: clamped * height, backgroundColor: valueColor }}
+          />
+          <View
+            className="absolute w-[12] h-[12] rounded-full left-[3]"
+            style={{ top: (1 - clamped) * (height - 12), backgroundColor: valueColor }}
+          />
+        </View>
+        {label !== undefined ? (
+          <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+        ) : null}
+      </View>
+    );
+  }
 
   return (
     <View className="gap-2">
       <View
         className={`h-[18] justify-center relative ${disabled ? "opacity-40" : "cursor-pointer"}`}
         style={{ width }}
-        onDragStart={
-          disabled
-            ? undefined
-            : () => {
-                startValue.current = clamped;
-                onBegin?.();
-              }
-        }
-        onDrag={
-          disabled
-            ? undefined
-            : (e) => onChange(Math.min(1, Math.max(0, startValue.current + e.dx / width)))
-        }
-        onDragEnd={disabled ? undefined : () => onEnd?.()}
+        onDragStart={onDragStart}
+        onDrag={disabled ? undefined : (e) => onChange(clamp01(startValue.current + e.dx / width))}
+        onDragEnd={onDragEnd}
       >
         <View className="h-[4] rounded-full" style={{ backgroundColor: trackColor }} />
         <View
@@ -175,10 +213,12 @@ export interface ParamSliderProps {
   paramId: string;
   label?: string;
   width?: number;
+  height?: number;
+  vertical?: boolean;
 }
 
 /** A Slider bound to an APVTS parameter (via ParameterBridge). */
-export function ParamSlider({ paramId, label, width }: ParamSliderProps) {
+export function ParamSlider({ paramId, label, width, height, vertical }: ParamSliderProps) {
   const param = useParameter(paramId);
 
   return (
@@ -186,9 +226,302 @@ export function ParamSlider({ paramId, label, width }: ParamSliderProps) {
       value={param.value}
       label={label ?? param.name.toUpperCase()}
       width={width}
+      height={height}
+      vertical={vertical}
       onChange={param.set}
       onBegin={param.begin}
       onEnd={param.end}
     />
   );
 }
+
+// ── Toggle ─────────────────────────────────────────────────────────────
+
+export interface ToggleProps {
+  on: boolean;
+  label?: string;
+  /** Track height; width is 1.8×. Default 22. */
+  size?: number;
+  disabled?: boolean;
+  trackColor?: string;
+  onColor?: string;
+  thumbColor?: string;
+  onChange: (on: boolean) => void;
+}
+
+/** A switch with a spring-animated thumb — bypass, on/off, A/B. */
+export function Toggle({
+  on,
+  label,
+  size = 22,
+  disabled,
+  trackColor = "#2A2F27",
+  onColor = "#C6F135",
+  thumbColor = "#F4F4F5",
+  onChange,
+}: ToggleProps) {
+  const t = useSpring(on ? 1 : 0, { stiffness: 300, damping: 28 });
+  const trackWidth = Math.round(size * 1.8);
+  const thumb = size - 6;
+  const travel = trackWidth - thumb - 6;
+
+  return (
+    <View className="items-center gap-2">
+      <View
+        className={`relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`}
+        style={{ width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }}
+        onClick={disabled ? undefined : () => onChange(!on)}
+      >
+        <View
+          className="absolute rounded-full"
+          style={{
+            width: thumb,
+            height: thumb,
+            top: 3,
+            left: 3 + clamp01(t) * travel,
+            backgroundColor: thumbColor,
+          }}
+        />
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamToggleProps {
+  paramId: string;
+  label?: string;
+  size?: number;
+  trackColor?: string;
+  onColor?: string;
+  thumbColor?: string;
+}
+
+/** A Toggle bound to a bool-style APVTS parameter (on = value ≥ 0.5). */
+export function ParamToggle({ paramId, label, ...rest }: ParamToggleProps) {
+  const param = useParameter(paramId);
+
+  return (
+    <Toggle
+      on={param.value >= 0.5}
+      label={label ?? param.name.toUpperCase()}
+      onChange={(next) => {
+        param.begin();
+        param.set(next ? 1 : 0);
+        param.end();
+      }}
+      {...rest}
+    />
+  );
+}
+
+// ── XYPad ──────────────────────────────────────────────────────────────
+
+export interface XYPadProps {
+  /** Normalized 0..1. */
+  x: number;
+  /** Normalized 0..1 — 1 is the TOP of the pad (drag up for more). */
+  y: number;
+  width?: number;
+  height?: number;
+  label?: string;
+  disabled?: boolean;
+  trackColor?: string;
+  valueColor?: string;
+  onChange: (x: number, y: number) => void;
+  onBegin?: () => void;
+  onEnd?: () => void;
+}
+
+/** A 2D drag pad with crosshair — filter cutoff/resonance, pan/depth… */
+export function XYPad({
+  x,
+  y,
+  width = 160,
+  height = 160,
+  label,
+  disabled,
+  trackColor = "#161B17",
+  valueColor = "#C6F135",
+  onChange,
+  onBegin,
+  onEnd,
+}: XYPadProps) {
+  const start = useRef({ x: 0, y: 0 });
+  const cxv = clamp01(x);
+  const cyv = clamp01(y);
+  const thumb = 14;
+  const tx = cxv * (width - thumb);
+  const ty = (1 - cyv) * (height - thumb);
+
+  return (
+    <View className="items-center gap-2">
+      <View
+        className={`relative rounded-lg overflow-hidden border ${disabled ? "opacity-40" : "cursor-pointer"}`}
+        style={{ width, height, backgroundColor: trackColor, borderColor: "#00000055" }}
+        onDragStart={
+          disabled
+            ? undefined
+            : () => {
+                start.current = { x: cxv, y: cyv };
+                onBegin?.();
+              }
+        }
+        onDrag={
+          disabled
+            ? undefined
+            : (e) =>
+                onChange(
+                  clamp01(start.current.x + e.dx / width),
+                  clamp01(start.current.y - e.dy / height),
+                )
+        }
+        onDragEnd={disabled ? undefined : () => onEnd?.()}
+      >
+        <View
+          className="absolute left-0 right-0 h-[1]"
+          style={{ top: ty + thumb / 2, backgroundColor: valueColor, opacity: 0.35 }}
+        />
+        <View
+          className="absolute top-0 bottom-0 w-[1]"
+          style={{ left: tx + thumb / 2, backgroundColor: valueColor, opacity: 0.35 }}
+        />
+        <View
+          className="absolute rounded-full"
+          style={{ width: thumb, height: thumb, left: tx, top: ty, backgroundColor: valueColor }}
+        />
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamXYPadProps {
+  paramX: string;
+  paramY: string;
+  width?: number;
+  height?: number;
+  label?: string;
+  trackColor?: string;
+  valueColor?: string;
+}
+
+/** An XYPad driving two APVTS parameters at once. */
+export function ParamXYPad({ paramX, paramY, label, ...rest }: ParamXYPadProps) {
+  const px = useParameter(paramX);
+  const py = useParameter(paramY);
+
+  return (
+    <XYPad
+      x={px.value}
+      y={py.value}
+      label={label ?? `${px.name} / ${py.name}`.toUpperCase()}
+      onChange={(nx, ny) => {
+        px.set(nx);
+        py.set(ny);
+      }}
+      onBegin={() => {
+        px.begin();
+        py.begin();
+      }}
+      onEnd={() => {
+        px.end();
+        py.end();
+      }}
+      {...rest}
+    />
+  );
+}
+
+// ── Segmented ──────────────────────────────────────────────────────────
+
+export interface SegmentedProps {
+  options: string[];
+  index: number;
+  label?: string;
+  disabled?: boolean;
+  trackColor?: string;
+  activeColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+  onChange: (index: number) => void;
+}
+
+/** A row of exclusive options — oscillator shapes, filter modes, A/B/C. */
+export function Segmented({
+  options,
+  index,
+  label,
+  disabled,
+  trackColor = "#2A2F27",
+  activeColor = "#C6F135",
+  textColor = "#a1a1aa",
+  activeTextColor = "#09090b",
+  onChange,
+}: SegmentedProps) {
+  const current = Math.min(options.length - 1, Math.max(0, index));
+
+  return (
+    <View className="items-center gap-2">
+      <View
+        className={`flex-row rounded-lg p-[3] gap-[3] ${disabled ? "opacity-40" : ""}`}
+        style={{ backgroundColor: trackColor }}
+      >
+        {options.map((option, i) => (
+          <View
+            key={`${option}-${i}`}
+            className={`px-3 py-[6] rounded-md ${disabled ? "" : "cursor-pointer"}`}
+            style={{ backgroundColor: i === current ? activeColor : "#00000000" }}
+            onClick={disabled ? undefined : () => onChange(i)}
+          >
+            <Text
+              className="text-[11] font-bold tracking-wide"
+              style={{ color: i === current ? activeTextColor : textColor }}
+            >
+              {option}
+            </Text>
+          </View>
+        ))}
+      </View>
+      {label !== undefined ? (
+        <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface ParamSegmentedProps {
+  paramId: string;
+  options: string[];
+  label?: string;
+  trackColor?: string;
+  activeColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+}
+
+/** A Segmented bound to a choice-style APVTS parameter: the normalized
+    value maps to an option index (index / (count − 1)). */
+export function ParamSegmented({ paramId, options, label, ...rest }: ParamSegmentedProps) {
+  const param = useParameter(paramId);
+  const count = Math.max(1, options.length);
+  const index = Math.round(param.value * (count - 1));
+
+  return (
+    <Segmented
+      options={options}
+      index={index}
+      label={label ?? param.name.toUpperCase()}
+      onChange={(i) => {
+        param.begin();
+        param.set(count <= 1 ? 0 : i / (count - 1));
+        param.end();
+      }}
+      {...rest}
+    />
+  );
+}

package/src/cx.ts

@@ -0,0 +1,33 @@
+// cx — compose conditional className strings (a tiny clsx).
+
+export type ClassValue =
+  | string
+  | number
+  | null
+  | false
+  | undefined
+  | ClassValue[]
+  | Record<string, unknown>;
+
+/**
+ * `cx("flex", active && "bg-red-500", { "opacity-40": disabled })`
+ * → `"flex bg-red-500 opacity-40"`.
+ */
+export function cx(...inputs: ClassValue[]): string {
+  const out: string[] = [];
+
+  for (const input of inputs) {
+    if (!input && input !== 0) continue;
+
+    if (typeof input === "string" || typeof input === "number") {
+      out.push(String(input));
+    } else if (Array.isArray(input)) {
+      const nested = cx(...input);
+      if (nested) out.push(nested);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) if (value) out.push(key);
+    }
+  }
+
+  return out.join(" ");
+}

package/src/hooks.ts

@@ -0,0 +1,18 @@
+// Convenience hooks over the native bridge.
+
+import { useEffect, useRef } from "react";
+import { native } from "./native";
+
+/**
+ * Subscribes to a C++ event (RootView::sendNativeEvent) for the lifetime
+ * of the component. The handler can close over fresh state — it is kept
+ * current without resubscribing.
+ *
+ *   useNativeEvent("download:progress", (p) => setProgress(p.ratio));
+ */
+export function useNativeEvent(name: string, handler: (payload: any) => void): void {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  useEffect(() => native.on(name, (payload) => handlerRef.current(payload)), [name]);
+}

package/src/index.ts

@@ -1,24 +1,50 @@
-// vsreact public API. runtime must load first — it installs the
-// timer/console/microtask shims react depends on inside QuickJS.
-import "./runtime";
-import "./bridge";
-
-export { View, Text, Image, TextInput, NativeView } from "./primitives";
-export type {
-  CommonProps,
-  TextProps,
-  ImageProps,
-  TextInputProps,
-  NativeViewProps,
-} from "./primitives";
-export { render, unmount } from "./render";
-export { native } from "./native";
-export { configureTheme, tw } from "./tw";
-export type { Style, ResolvedClasses } from "./tw";
-export { useTween, lerp, Easing } from "./animation";
-export type { TweenOptions, EasingFn } from "./animation";
-export { useParameter } from "./parameters";
-export type { ParameterState, ParameterHandle } from "./parameters";
-export { Knob, Slider, ParamKnob, ParamSlider, dragToValue } from "./controls";
-export type { KnobProps, SliderProps, ParamKnobProps, ParamSliderProps } from "./controls";
-export type { DragEventPayload } from "./primitives";
+// @vsreact/core public API. runtime must load first — it installs the
+// timer/console/microtask shims react depends on inside QuickJS.
+import "./runtime";
+import "./bridge";
+
+export { View, Text, Image, TextInput, NativeView } from "./primitives";
+export type {
+  CommonProps,
+  TextProps,
+  ImageProps,
+  TextInputProps,
+  NativeViewProps,
+} from "./primitives";
+export { render, unmount } from "./render";
+export { native } from "./native";
+export { useNativeEvent } from "./hooks";
+export { configureTheme, tw } from "./tw";
+export type { Style, ResolvedClasses } from "./tw";
+export { cx } from "./cx";
+export type { ClassValue } from "./cx";
+export { useTween, useSpring, springStep, lerp, Easing } from "./animation";
+export type { TweenOptions, SpringOptions, EasingFn } from "./animation";
+export { useParameter } from "./parameters";
+export type { ParameterState, ParameterHandle } from "./parameters";
+export {
+  Knob,
+  Slider,
+  Toggle,
+  XYPad,
+  Segmented,
+  ParamKnob,
+  ParamSlider,
+  ParamToggle,
+  ParamXYPad,
+  ParamSegmented,
+  dragToValue,
+} from "./controls";
+export type {
+  KnobProps,
+  SliderProps,
+  ToggleProps,
+  XYPadProps,
+  SegmentedProps,
+  ParamKnobProps,
+  ParamSliderProps,
+  ParamToggleProps,
+  ParamXYPadProps,
+  ParamSegmentedProps,
+} from "./controls";
+export type { DragEventPayload } from "./primitives";

package/src/runtime.ts

@@ -83,7 +83,10 @@ if (isHosted) {
   };
 
   g.performance ??= { now: () => Date.now() } as Performance;
-  g.process ??= { env: { NODE_ENV: "production" } } as unknown as typeof process;
+  // Typed loosely on purpose: the dist build has no Node/Bun types, and the
+  // shim only exists for libraries that probe NODE_ENV.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  g.process ??= { env: { NODE_ENV: "production" } } as any;
   g.self ??= g as unknown as Window & typeof globalThis;
   g.global ??= g;
 }

package/src/theme.ts

@@ -1,7 +1,82 @@
 export type ThemeColors = Record<string, string>;
 
-// Tailwind v3 palettes (the curated subset VSReacT ships with).
+// 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",

package/src/tw.test.ts

@@ -111,3 +111,29 @@ describe("tw resolver", () => {
     expect(r.style.backgroundColor).toBe("#27272a");
   });
 });
+
+describe("tw 0.0.3 additions", () => {
+  test("full Tailwind palette resolves", () => {
+    expect(tw("bg-blue-500").style.backgroundColor).toBe("#3b82f6");
+    expect(tw("text-rose-400").style.color).toBe("#fb7185");
+    expect(tw("border-slate-700").style.borderColor).toBe("#334155");
+    expect(tw("bg-violet-950").style.backgroundColor).toBe("#2e1065");
+    expect(tw("bg-teal-500/50").style.backgroundColor).toBe("#14b8a680");
+  });
+
+  test("size-* sets width and height together", () => {
+    expect(tw("size-10").style).toEqual({ width: 40, height: 40 });
+    expect(tw("size-[13]").style).toEqual({ width: 13, height: 13 });
+    expect(tw("size-full").style).toEqual({ width: "100%", height: "100%" });
+  });
+
+  test("inset-x / inset-y", () => {
+    expect(tw("inset-x-2").style).toEqual({ left: 8, right: 8 });
+    expect(tw("inset-y-0").style).toEqual({ top: 0, bottom: 0 });
+  });
+
+  test("larger text sizes", () => {
+    expect(tw("text-5xl").style.fontSize).toBe(48);
+    expect(tw("text-6xl").style.fontSize).toBe(60);
+  });
+});