@formepdf/tailwind 0.7.10

package/dist/colors.d.ts

@@ -0,0 +1 @@
+export declare function resolveColor(name: string): string | undefined;

package/dist/colors.js

@@ -0,0 +1,126 @@
+const palette = {
+    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",
+    },
+    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",
+    },
+    stone: {
+        "50": "#fafaf9", "100": "#f5f5f4", "200": "#e7e5e4", "300": "#d6d3d1",
+        "400": "#a8a29e", "500": "#78716c", "600": "#57534e", "700": "#44403c",
+        "800": "#292524", "900": "#1c1917", "950": "#0c0a09",
+    },
+    red: {
+        "50": "#fef2f2", "100": "#fee2e2", "200": "#fecaca", "300": "#fca5a5",
+        "400": "#f87171", "500": "#ef4444", "600": "#dc2626", "700": "#b91c1c",
+        "800": "#991b1b", "900": "#7f1d1d", "950": "#450a0a",
+    },
+    orange: {
+        "50": "#fff7ed", "100": "#ffedd5", "200": "#fed7aa", "300": "#fdba74",
+        "400": "#fb923c", "500": "#f97316", "600": "#ea580c", "700": "#c2410c",
+        "800": "#9a3412", "900": "#7c2d12", "950": "#431407",
+    },
+    amber: {
+        "50": "#fffbeb", "100": "#fef3c7", "200": "#fde68a", "300": "#fcd34d",
+        "400": "#fbbf24", "500": "#f59e0b", "600": "#d97706", "700": "#b45309",
+        "800": "#92400e", "900": "#78350f", "950": "#451a03",
+    },
+    yellow: {
+        "50": "#fefce8", "100": "#fef9c3", "200": "#fef08a", "300": "#fde047",
+        "400": "#facc15", "500": "#eab308", "600": "#ca8a04", "700": "#a16207",
+        "800": "#854d0e", "900": "#713f12", "950": "#422006",
+    },
+    lime: {
+        "50": "#f7fee7", "100": "#ecfccb", "200": "#d9f99d", "300": "#bef264",
+        "400": "#a3e635", "500": "#84cc16", "600": "#65a30d", "700": "#4d7c0f",
+        "800": "#3f6212", "900": "#365314", "950": "#1a2e05",
+    },
+    green: {
+        "50": "#f0fdf4", "100": "#dcfce7", "200": "#bbf7d0", "300": "#86efac",
+        "400": "#4ade80", "500": "#22c55e", "600": "#16a34a", "700": "#15803d",
+        "800": "#166534", "900": "#14532d", "950": "#052e16",
+    },
+    emerald: {
+        "50": "#ecfdf5", "100": "#d1fae5", "200": "#a7f3d0", "300": "#6ee7b7",
+        "400": "#34d399", "500": "#10b981", "600": "#059669", "700": "#047857",
+        "800": "#065f46", "900": "#064e3b", "950": "#022c22",
+    },
+    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",
+    },
+    sky: {
+        "50": "#f0f9ff", "100": "#e0f2fe", "200": "#bae6fd", "300": "#7dd3fc",
+        "400": "#38bdf8", "500": "#0ea5e9", "600": "#0284c7", "700": "#0369a1",
+        "800": "#075985", "900": "#0c4a6e", "950": "#082f49",
+    },
+    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": "#1e1b4e",
+    },
+    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",
+    },
+};
+export function resolveColor(name) {
+    if (name === "black")
+        return "#000000";
+    if (name === "white")
+        return "#ffffff";
+    if (name === "transparent")
+        return "transparent";
+    const dashIndex = name.lastIndexOf("-");
+    if (dashIndex === -1)
+        return undefined;
+    const colorName = name.substring(0, dashIndex);
+    const shade = name.substring(dashIndex + 1);
+    return palette[colorName]?.[shade];
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import type { FormeStyle } from "./types.js";
+export type { FormeStyle } from "./types.js";
+/**
+ * Convert Tailwind CSS class names to a Forme style object.
+ *
+ * Unknown classes are silently ignored. When classes conflict,
+ * the last one wins (natural Object.assign behavior).
+ */
+export declare function tw(classes: string): FormeStyle;

package/dist/index.js

@@ -0,0 +1,32 @@
+import { parseClass } from "./parsers.js";
+/**
+ * Convert Tailwind CSS class names to a Forme style object.
+ *
+ * Unknown classes are silently ignored. When classes conflict,
+ * the last one wins (natural Object.assign behavior).
+ */
+export function tw(classes) {
+    const result = {};
+    if (!classes)
+        return result;
+    for (const cls of classes.trim().split(/\s+/)) {
+        if (!cls)
+            continue;
+        // Negative values: -mt-4, -top-2, etc.
+        if (cls.startsWith("-") && !cls.startsWith("-[")) {
+            const parsed = parseClass(cls.substring(1));
+            if (parsed) {
+                for (const [k, v] of Object.entries(parsed)) {
+                    if (typeof v === "number")
+                        parsed[k] = -v;
+                }
+                Object.assign(result, parsed);
+                continue;
+            }
+        }
+        const parsed = parseClass(cls);
+        if (parsed)
+            Object.assign(result, parsed);
+    }
+    return result;
+}

package/dist/parsers.d.ts

@@ -0,0 +1,2 @@
+import type { FormeStyle } from "./types.js";
+export declare function parseClass(cls: string): Partial<FormeStyle> | null;

package/dist/parsers.js

@@ -0,0 +1,526 @@
+import { resolveColor } from "./colors.js";
+// ── Spacing ──────────────────────────────────────────────────────────
+function parseSpacingValue(val) {
+    if (val === "px")
+        return 1;
+    const n = parseFloat(val);
+    if (isNaN(n))
+        return undefined;
+    return n * 4;
+}
+const spacingMap = {
+    pt: "paddingTop", pr: "paddingRight", pb: "paddingBottom", pl: "paddingLeft",
+    px: "paddingHorizontal", py: "paddingVertical",
+    mt: "marginTop", mr: "marginRight", mb: "marginBottom", ml: "marginLeft",
+    mx: "marginHorizontal", my: "marginVertical",
+};
+function parseSpacing(cls) {
+    // p-{n} / m-{n}
+    const pMatch = cls.match(/^(p|m)-(.+)$/);
+    if (pMatch) {
+        const prop = pMatch[1] === "p" ? "padding" : "margin";
+        if (pMatch[2] === "auto" && prop === "margin")
+            return { margin: "auto" };
+        const val = parseSpacingValue(pMatch[2]);
+        if (val !== undefined)
+            return { [prop]: val };
+        return null;
+    }
+    // pt-{n}, px-{n}, mx-auto, etc.
+    const sideMatch = cls.match(/^(pt|pr|pb|pl|px|py|mt|mr|mb|ml|mx|my)-(.+)$/);
+    if (sideMatch) {
+        const key = spacingMap[sideMatch[1]];
+        if (!key)
+            return null;
+        // Margin sides and axes support "auto" for centering
+        if (sideMatch[2] === "auto") {
+            if (sideMatch[1].startsWith("m"))
+                return { [key]: "auto" };
+            return null; // padding doesn't support auto
+        }
+        const val = parseSpacingValue(sideMatch[2]);
+        if (val !== undefined)
+            return { [key]: val };
+    }
+    return null;
+}
+// ── Typography ───────────────────────────────────────────────────────
+const textSizes = {
+    xs: 12, sm: 14, base: 16, lg: 18, xl: 20,
+    "2xl": 24, "3xl": 30, "4xl": 36, "5xl": 48, "6xl": 60, "7xl": 72, "8xl": 96, "9xl": 128,
+};
+const fontWeights = {
+    thin: 100, extralight: 200, light: 300, normal: 400, medium: 500,
+    semibold: 600, bold: 700, extrabold: 800, black: 900,
+};
+const namedLeading = {
+    none: 1, tight: 1.25, snug: 1.375, normal: 1.5, relaxed: 1.625, loose: 2,
+};
+const trackingValues = {
+    tighter: -0.05, tight: -0.025, normal: 0, wide: 0.025, wider: 0.05, widest: 0.1,
+};
+function parseTypography(cls) {
+    // text-{size}
+    if (cls.startsWith("text-")) {
+        const rest = cls.substring(5);
+        if (textSizes[rest] !== undefined)
+            return { fontSize: textSizes[rest] };
+        // text-left/center/right/justify
+        if (rest === "left" || rest === "center" || rest === "right" || rest === "justify") {
+            return { textAlign: rest };
+        }
+        // text-{color}-{shade} or text-black/white — handled in parseColor
+        return null;
+    }
+    // font-{weight}
+    if (cls.startsWith("font-")) {
+        const weight = fontWeights[cls.substring(5)];
+        if (weight !== undefined)
+            return { fontWeight: weight };
+        return null;
+    }
+    // italic
+    if (cls === "italic")
+        return { fontStyle: "italic" };
+    // leading-{value}
+    if (cls.startsWith("leading-")) {
+        const rest = cls.substring(8);
+        if (namedLeading[rest] !== undefined)
+            return { lineHeight: namedLeading[rest] };
+        const n = parseFloat(rest);
+        if (!isNaN(n))
+            return { lineHeight: n * 4 };
+        return null;
+    }
+    // tracking-{value}
+    if (cls.startsWith("tracking-")) {
+        const val = trackingValues[cls.substring(9)];
+        if (val !== undefined)
+            return { letterSpacing: val };
+        return null;
+    }
+    // text decorations
+    if (cls === "underline")
+        return { textDecoration: "underline" };
+    if (cls === "line-through")
+        return { textDecoration: "line-through" };
+    if (cls === "no-underline")
+        return { textDecoration: "none" };
+    // text transforms
+    if (cls === "uppercase")
+        return { textTransform: "uppercase" };
+    if (cls === "lowercase")
+        return { textTransform: "lowercase" };
+    if (cls === "capitalize")
+        return { textTransform: "capitalize" };
+    if (cls === "normal-case")
+        return { textTransform: "none" };
+    return null;
+}
+// ── Colors ───────────────────────────────────────────────────────────
+function parseColorClass(cls) {
+    // text-{color}-{shade} or text-black/white/transparent
+    if (cls.startsWith("text-")) {
+        const rest = cls.substring(5);
+        // Skip size and alignment keywords
+        if (textSizes[rest] !== undefined)
+            return null;
+        if (rest === "left" || rest === "center" || rest === "right" || rest === "justify")
+            return null;
+        const color = resolveColor(rest);
+        if (color)
+            return { color };
+        return null;
+    }
+    // bg-{color}-{shade}
+    if (cls.startsWith("bg-")) {
+        const color = resolveColor(cls.substring(3));
+        if (color)
+            return { backgroundColor: color };
+        return null;
+    }
+    // border-{color}-{shade} — only when it looks like a color, not a width or side
+    if (cls.startsWith("border-")) {
+        const rest = cls.substring(7);
+        // Skip width values and sides
+        if (/^\d+$/.test(rest))
+            return null;
+        if (["t", "r", "b", "l"].includes(rest))
+            return null;
+        if (rest.startsWith("t-") || rest.startsWith("r-") || rest.startsWith("b-") || rest.startsWith("l-"))
+            return null;
+        const color = resolveColor(rest);
+        if (color)
+            return { borderColor: color };
+        return null;
+    }
+    return null;
+}
+// ── Layout ───────────────────────────────────────────────────────────
+const alignItemsMap = {
+    start: "flex-start", end: "flex-end", center: "center", stretch: "stretch", baseline: "baseline",
+};
+const justifyContentMap = {
+    start: "flex-start", end: "flex-end", center: "center",
+    between: "space-between", around: "space-around", evenly: "space-evenly",
+};
+function parseDimension(val) {
+    if (val === "full")
+        return "100%";
+    if (val === "auto")
+        return "auto";
+    if (val === "screen")
+        return "100%";
+    // Fractional like 1/2, 1/3, etc. — check before numeric parse since parseFloat("1/2") === 1
+    const fracMatch = val.match(/^(\d+)\/(\d+)$/);
+    if (fracMatch)
+        return `${(parseInt(fracMatch[1]) / parseInt(fracMatch[2]) * 100).toFixed(6)}%`;
+    const n = parseFloat(val);
+    if (!isNaN(n))
+        return n * 4;
+    return undefined;
+}
+function parseLayout(cls) {
+    // flex direction
+    if (cls === "flex")
+        return {}; // no-op, flex is default in Forme
+    if (cls === "flex-row")
+        return { flexDirection: "row" };
+    if (cls === "flex-col")
+        return { flexDirection: "column" };
+    if (cls === "flex-row-reverse")
+        return { flexDirection: "row-reverse" };
+    if (cls === "flex-col-reverse")
+        return { flexDirection: "column-reverse" };
+    // align/justify
+    if (cls.startsWith("items-")) {
+        const val = alignItemsMap[cls.substring(6)];
+        if (val)
+            return { alignItems: val };
+        return null;
+    }
+    if (cls.startsWith("justify-")) {
+        const val = justifyContentMap[cls.substring(8)];
+        if (val)
+            return { justifyContent: val };
+        return null;
+    }
+    // flex shorthand
+    if (cls === "flex-1")
+        return { flex: 1 };
+    if (cls === "flex-auto")
+        return { flexGrow: 1, flexShrink: 1, flexBasis: "auto" };
+    if (cls === "flex-initial")
+        return { flexGrow: 0, flexShrink: 1, flexBasis: "auto" };
+    if (cls === "flex-none")
+        return { flex: 0 };
+    if (cls === "flex-grow")
+        return { flexGrow: 1 };
+    if (cls === "flex-grow-0")
+        return { flexGrow: 0 };
+    if (cls === "flex-shrink")
+        return { flexShrink: 1 };
+    if (cls === "flex-shrink-0")
+        return { flexShrink: 0 };
+    if (cls === "flex-wrap")
+        return { flexWrap: "wrap" };
+    if (cls === "flex-nowrap")
+        return { flexWrap: "nowrap" };
+    // gap
+    if (cls.startsWith("gap-x-")) {
+        const n = parseFloat(cls.substring(6));
+        if (!isNaN(n))
+            return { columnGap: n * 4 };
+        return null;
+    }
+    if (cls.startsWith("gap-y-")) {
+        const n = parseFloat(cls.substring(6));
+        if (!isNaN(n))
+            return { rowGap: n * 4 };
+        return null;
+    }
+    if (cls.startsWith("gap-")) {
+        const n = parseFloat(cls.substring(4));
+        if (!isNaN(n))
+            return { gap: n * 4 };
+        return null;
+    }
+    // dimensions
+    if (cls.startsWith("w-")) {
+        const val = parseDimension(cls.substring(2));
+        if (val !== undefined)
+            return { width: val };
+        return null;
+    }
+    if (cls.startsWith("h-")) {
+        const val = parseDimension(cls.substring(2));
+        if (val !== undefined)
+            return { height: val };
+        return null;
+    }
+    if (cls.startsWith("min-w-")) {
+        const n = parseFloat(cls.substring(6));
+        if (!isNaN(n))
+            return { minWidth: n * 4 };
+        return null;
+    }
+    if (cls.startsWith("max-w-")) {
+        const n = parseFloat(cls.substring(6));
+        if (!isNaN(n))
+            return { maxWidth: n * 4 };
+        return null;
+    }
+    if (cls.startsWith("min-h-")) {
+        const n = parseFloat(cls.substring(6));
+        if (!isNaN(n))
+            return { minHeight: n * 4 };
+        return null;
+    }
+    if (cls.startsWith("max-h-")) {
+        const n = parseFloat(cls.substring(6));
+        if (!isNaN(n))
+            return { maxHeight: n * 4 };
+        return null;
+    }
+    // position
+    if (cls === "relative")
+        return { position: "relative" };
+    if (cls === "absolute")
+        return { position: "absolute" };
+    // positional offsets
+    if (cls.startsWith("top-")) {
+        const n = parseFloat(cls.substring(4));
+        if (!isNaN(n))
+            return { top: n * 4 };
+        return null;
+    }
+    if (cls.startsWith("right-")) {
+        const n = parseFloat(cls.substring(6));
+        if (!isNaN(n))
+            return { right: n * 4 };
+        return null;
+    }
+    if (cls.startsWith("bottom-")) {
+        const n = parseFloat(cls.substring(7));
+        if (!isNaN(n))
+            return { bottom: n * 4 };
+        return null;
+    }
+    if (cls.startsWith("left-")) {
+        const n = parseFloat(cls.substring(5));
+        if (!isNaN(n))
+            return { left: n * 4 };
+        return null;
+    }
+    // overflow
+    if (cls === "overflow-hidden")
+        return { overflow: "hidden" };
+    if (cls === "overflow-visible")
+        return { overflow: "visible" };
+    return null;
+}
+// ── Borders ──────────────────────────────────────────────────────────
+const roundedValues = {
+    "": 4, sm: 2, md: 6, lg: 8, xl: 12, "2xl": 16, "3xl": 24, full: 9999, none: 0,
+};
+function parseBorder(cls) {
+    // border width
+    if (cls === "border")
+        return { borderWidth: 1 };
+    if (cls.match(/^border-[0248]$/)) {
+        return { borderWidth: parseInt(cls.substring(7)) };
+    }
+    // per-side border width
+    const sideMap = {
+        t: "borderTopWidth", r: "borderRightWidth", b: "borderBottomWidth", l: "borderLeftWidth",
+    };
+    if (cls.match(/^border-[trbl]$/)) {
+        return { [sideMap[cls.substring(7)]]: 1 };
+    }
+    const sideWidthMatch = cls.match(/^border-([trbl])-(\d+)$/);
+    if (sideWidthMatch) {
+        return { [sideMap[sideWidthMatch[1]]]: parseInt(sideWidthMatch[2]) };
+    }
+    // rounded
+    if (cls === "rounded")
+        return { borderRadius: roundedValues[""] };
+    if (cls.startsWith("rounded-")) {
+        const val = roundedValues[cls.substring(8)];
+        if (val !== undefined)
+            return { borderRadius: val };
+        // rounded-{n} for arbitrary numeric
+        const n = parseFloat(cls.substring(8));
+        if (!isNaN(n))
+            return { borderRadius: n };
+        return null;
+    }
+    return null;
+}
+// ── Opacity ──────────────────────────────────────────────────────────
+function parseOpacity(cls) {
+    if (cls.startsWith("opacity-")) {
+        const n = parseInt(cls.substring(8));
+        if (!isNaN(n))
+            return { opacity: n / 100 };
+    }
+    return null;
+}
+// ── Grid ────────────────────────────────────────────────────────────
+function parseGrid(cls) {
+    if (cls === "grid")
+        return { display: "grid" };
+    // grid-cols-{n} / grid-cols-none
+    if (cls.startsWith("grid-cols-")) {
+        const rest = cls.substring(10);
+        if (rest === "none")
+            return { gridTemplateColumns: "none" };
+        const n = parseInt(rest);
+        if (!isNaN(n) && n >= 1 && n <= 12)
+            return { gridTemplateColumns: `repeat(${n}, 1fr)` };
+        return null;
+    }
+    // grid-rows-{n} / grid-rows-none
+    if (cls.startsWith("grid-rows-")) {
+        const rest = cls.substring(10);
+        if (rest === "none")
+            return { gridTemplateRows: "none" };
+        const n = parseInt(rest);
+        if (!isNaN(n) && n >= 1 && n <= 6)
+            return { gridTemplateRows: `repeat(${n}, 1fr)` };
+        return null;
+    }
+    // col-span-{n} / col-span-full
+    if (cls.startsWith("col-span-")) {
+        const rest = cls.substring(9);
+        if (rest === "full")
+            return { gridColumnStart: 1, gridColumnEnd: -1 };
+        const n = parseInt(rest);
+        if (!isNaN(n) && n >= 1 && n <= 12)
+            return { gridColumnSpan: n };
+        return null;
+    }
+    // col-start-{n}
+    if (cls.startsWith("col-start-")) {
+        const n = parseInt(cls.substring(10));
+        if (!isNaN(n) && n >= 1 && n <= 13)
+            return { gridColumnStart: n };
+        return null;
+    }
+    // col-end-{n}
+    if (cls.startsWith("col-end-")) {
+        const n = parseInt(cls.substring(8));
+        if (!isNaN(n) && n >= 1 && n <= 13)
+            return { gridColumnEnd: n };
+        return null;
+    }
+    // row-span-{n} / row-span-full
+    if (cls.startsWith("row-span-")) {
+        const rest = cls.substring(9);
+        if (rest === "full")
+            return { gridRowStart: 1, gridRowEnd: -1 };
+        const n = parseInt(rest);
+        if (!isNaN(n) && n >= 1 && n <= 6)
+            return { gridRowSpan: n };
+        return null;
+    }
+    // row-start-{n}
+    if (cls.startsWith("row-start-")) {
+        const n = parseInt(cls.substring(10));
+        if (!isNaN(n) && n >= 1 && n <= 7)
+            return { gridRowStart: n };
+        return null;
+    }
+    // row-end-{n}
+    if (cls.startsWith("row-end-")) {
+        const n = parseInt(cls.substring(8));
+        if (!isNaN(n) && n >= 1 && n <= 7)
+            return { gridRowEnd: n };
+        return null;
+    }
+    return null;
+}
+// ── Self Alignment ──────────────────────────────────────────────────
+const alignSelfMap = {
+    start: "flex-start", end: "flex-end", center: "center", stretch: "stretch", baseline: "baseline",
+};
+function parseSelf(cls) {
+    if (cls.startsWith("self-")) {
+        const val = alignSelfMap[cls.substring(5)];
+        if (val)
+            return { alignSelf: val };
+    }
+    return null;
+}
+// ── Arbitrary Values ────────────────────────────────────────────────
+const arbitraryPrefixMap = {
+    w: "width", h: "height",
+    "min-w": "minWidth", "max-w": "maxWidth", "min-h": "minHeight", "max-h": "maxHeight",
+    p: "padding", px: "paddingHorizontal", py: "paddingVertical",
+    pt: "paddingTop", pr: "paddingRight", pb: "paddingBottom", pl: "paddingLeft",
+    m: "margin", mx: "marginHorizontal", my: "marginVertical",
+    mt: "marginTop", mr: "marginRight", mb: "marginBottom", ml: "marginLeft",
+    gap: "gap", "gap-x": "columnGap", "gap-y": "rowGap",
+    top: "top", right: "right", bottom: "bottom", left: "left",
+    rounded: "borderRadius",
+    opacity: "opacity",
+    leading: "lineHeight",
+    text: "special",
+    bg: "special",
+    border: "special",
+};
+function parseArbitrary(cls) {
+    const bracketIdx = cls.indexOf("[");
+    if (bracketIdx === -1 || !cls.endsWith("]"))
+        return null;
+    const prefix = cls.substring(0, bracketIdx - 1); // strip trailing '-'
+    const raw = cls.substring(bracketIdx + 1, cls.length - 1); // content inside brackets
+    const prop = arbitraryPrefixMap[prefix];
+    if (!prop)
+        return null;
+    if (prop === "special") {
+        // text-[...]: numeric → fontSize, color → color
+        if (prefix === "text") {
+            if (raw.startsWith("#"))
+                return { color: raw };
+            const n = parseFloat(raw.replace(/px$/, ""));
+            if (!isNaN(n))
+                return { fontSize: n };
+            return null;
+        }
+        // bg-[...]: color only
+        if (prefix === "bg") {
+            if (raw.startsWith("#"))
+                return { backgroundColor: raw };
+            return null;
+        }
+        // border-[...]: numeric → borderWidth, color → borderColor
+        if (prefix === "border") {
+            if (raw.startsWith("#"))
+                return { borderColor: raw };
+            const n = parseFloat(raw.replace(/px$/, ""));
+            if (!isNaN(n))
+                return { borderWidth: n };
+            return null;
+        }
+        return null;
+    }
+    // Numeric value (strip px suffix)
+    const n = parseFloat(raw.replace(/px$/, ""));
+    if (!isNaN(n))
+        return { [prop]: n };
+    return null;
+}
+// ── Main dispatcher ──────────────────────────────────────────────────
+export function parseClass(cls) {
+    // Check for arbitrary bracket values first
+    if (cls.includes("["))
+        return parseArbitrary(cls);
+    return (parseSpacing(cls) ??
+        parseTypography(cls) ??
+        parseColorClass(cls) ??
+        parseLayout(cls) ??
+        parseGrid(cls) ??
+        parseSelf(cls) ??
+        parseBorder(cls) ??
+        parseOpacity(cls));
+}

package/dist/types.d.ts

@@ -0,0 +1,71 @@
+export interface FormeStyle {
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    flex?: number;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | string;
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    gap?: number;
+    columnGap?: number;
+    rowGap?: number;
+    position?: "relative" | "absolute";
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+    overflow?: "hidden" | "visible";
+    display?: "flex" | "grid";
+    alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    gridColumnStart?: number;
+    gridColumnEnd?: number;
+    gridRowStart?: number;
+    gridRowEnd?: number;
+    gridColumnSpan?: number;
+    gridRowSpan?: number;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    padding?: number | string;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    margin?: number | string;
+    marginTop?: number | "auto";
+    marginRight?: number | "auto";
+    marginBottom?: number | "auto";
+    marginLeft?: number | "auto";
+    marginHorizontal?: number | "auto";
+    marginVertical?: number | "auto";
+    fontSize?: number;
+    fontWeight?: number | "normal" | "bold";
+    fontStyle?: "normal" | "italic" | "oblique";
+    textAlign?: "left" | "center" | "right" | "justify";
+    lineHeight?: number;
+    letterSpacing?: number;
+    textDecoration?: "none" | "underline" | "line-through";
+    textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
+    color?: string;
+    backgroundColor?: string;
+    borderWidth?: number;
+    borderTopWidth?: number;
+    borderRightWidth?: number;
+    borderBottomWidth?: number;
+    borderLeftWidth?: number;
+    borderColor?: string;
+    borderRadius?: number;
+    borderTopLeftRadius?: number;
+    borderTopRightRadius?: number;
+    borderBottomRightRadius?: number;
+    borderBottomLeftRadius?: number;
+    opacity?: number;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@formepdf/tailwind",
+  "version": "0.7.10",
+  "description": "Tailwind CSS class support for Forme PDF templates",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formepdf/forme",
+    "directory": "packages/tailwind"
+  }
+}