@vsreact/core 0.0.2 → 0.0.3

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/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);
+  });
+});

package/src/tw.ts

@@ -83,6 +83,7 @@ const staticClasses: Record<string, Style> = {
 
 const textSizes: Record<string, number> = {
   xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30, "4xl": 36,
+  "5xl": 48, "6xl": 60,
 };
 
 const radiusSizes: Record<string, number> = {
@@ -105,6 +106,7 @@ const radiusCorners: Record<string, string[]> = {
 const lengthKeys: Record<string, string[]> = {
   w: ["width"],
   h: ["height"],
+  size: ["width", "height"],
   "min-w": ["minWidth"],
   "min-h": ["minHeight"],
   "max-w": ["maxWidth"],
@@ -131,6 +133,8 @@ const lengthKeys: Record<string, string[]> = {
   bottom: ["bottom"],
   left: ["left"],
   inset: ["left", "right", "top", "bottom"],
+  "inset-x": ["left", "right"],
+  "inset-y": ["top", "bottom"],
   basis: ["flexBasis"],
 };