@palmyit/elements 0.1.8 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@palmyit/elements",
-  "version": "0.1.8",
+  "version": "0.1.20",
   "description": "Palmyit element definitions, semantic HTML templates, and CSS for builder and published sites",
   "private": false,
   "repository": {
@@ -15,9 +15,9 @@
   ],
   "scripts": {
     "build": "tsc -b && vite build && node scripts/write-manifest.mjs",
-    "test": "vitest run --exclude src/manifest.test.ts",
+    "test": "vitest run --exclude 'src/{manifest,cssBudget}.test.ts'",
     "test:watch": "vitest",
-    "test:manifest": "vitest run src/manifest.test.ts",
+    "test:manifest": "vitest run src/manifest.test.ts src/cssBudget.test.ts",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
     "prepublishOnly": "yarn build"

package/dist/styleToClasses-CZSWp6Ez.js

@@ -1,683 +0,0 @@
-// src/render/styleTokens.ts
-var e = /* @__PURE__ */ "0,px,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96,auto".split(","), t = [
-	"0",
-	"1",
-	"2",
-	"4",
-	"8"
-], n = /* @__PURE__ */ "none,sm,md,lg,xl,2xl,3xl,full,0,px,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16".split(","), r = [
-	"xs",
-	"sm",
-	"base",
-	"lg",
-	"xl",
-	"2xl",
-	"3xl",
-	"4xl",
-	"5xl",
-	"6xl"
-], i = [
-	"none",
-	"tight",
-	"snug",
-	"normal",
-	"relaxed",
-	"loose",
-	"3",
-	"4",
-	"5",
-	"6",
-	"7",
-	"8",
-	"9",
-	"10"
-], a = [
-	"tighter",
-	"tight",
-	"normal",
-	"wide",
-	"wider",
-	"widest"
-], o = [
-	"accent",
-	"transparent",
-	"white",
-	"black",
-	"slate-50",
-	"slate-100",
-	"slate-200",
-	"slate-300",
-	"slate-400",
-	"slate-500",
-	"slate-600",
-	"slate-700",
-	"slate-800",
-	"slate-900",
-	"slate-950"
-], s = [
-	0,
-	5,
-	10,
-	15,
-	20,
-	25,
-	30,
-	40,
-	50,
-	60,
-	70,
-	75,
-	80,
-	90,
-	95,
-	100
-], c = new Set(e), l = new Set(t), u = new Set(n), d = new Set(r), f = new Set(i), p = new Set(a), m = new Set(o), ee = new Set(s), te = {
-	0: "0",
-	"0px": "0",
-	"0rem": "0",
-	"0em": "0",
-	"1px": "px",
-	"0.125rem": "0.5",
-	"2px": "0.5",
-	"0.25rem": "1",
-	"4px": "1",
-	"0.375rem": "1.5",
-	"6px": "1.5",
-	"0.5rem": "2",
-	"8px": "2",
-	"0.625rem": "2.5",
-	"10px": "2.5",
-	"0.75rem": "3",
-	"12px": "3",
-	"0.875rem": "3.5",
-	"14px": "3.5",
-	"1rem": "4",
-	"16px": "4",
-	"1.25rem": "5",
-	"20px": "5",
-	"1.5rem": "6",
-	"24px": "6",
-	"1.75rem": "7",
-	"28px": "7",
-	"2rem": "8",
-	"32px": "8",
-	"2.25rem": "9",
-	"36px": "9",
-	"2.5rem": "10",
-	"40px": "10",
-	"2.75rem": "11",
-	"44px": "11",
-	"3rem": "12",
-	"48px": "12",
-	"3.5rem": "14",
-	"56px": "14",
-	"4rem": "16",
-	"64px": "16",
-	"5rem": "20",
-	"80px": "20",
-	"6rem": "24",
-	"96px": "24",
-	"7rem": "28",
-	"112px": "28",
-	"8rem": "32",
-	"128px": "32",
-	"9rem": "36",
-	"144px": "36",
-	"10rem": "40",
-	"160px": "40",
-	"11rem": "44",
-	"176px": "44",
-	"12rem": "48",
-	"192px": "48",
-	"13rem": "52",
-	"208px": "52",
-	"14rem": "56",
-	"224px": "56",
-	"15rem": "60",
-	"240px": "60",
-	"16rem": "64",
-	"256px": "64",
-	"18rem": "72",
-	"288px": "72",
-	"20rem": "80",
-	"320px": "80",
-	"24rem": "96",
-	"384px": "96",
-	auto: "auto"
-}, h = {
-	12: "xs",
-	14: "sm",
-	16: "base",
-	18: "lg",
-	20: "xl",
-	24: "2xl",
-	30: "3xl",
-	36: "4xl",
-	48: "5xl",
-	60: "6xl"
-}, g = {
-	"#0F766E": "accent",
-	"#0F172A": "slate-900",
-	"#1E293B": "slate-800",
-	"#334155": "slate-700",
-	"#475569": "slate-600",
-	"#64748B": "slate-500",
-	"#94A3B8": "slate-400",
-	"#CBD5E1": "slate-300",
-	"#E2E8F0": "slate-200",
-	"#F1F5F9": "slate-100",
-	"#F8FAFC": "slate-50",
-	"#020617": "slate-950",
-	"#FFFFFF": "white",
-	"#000000": "black"
-}, ne = {
-	100: "font-thin",
-	200: "font-extralight",
-	300: "font-light",
-	400: "font-normal",
-	500: "font-medium",
-	600: "font-semibold",
-	700: "font-bold",
-	800: "font-extrabold",
-	900: "font-black",
-	thin: "font-thin",
-	extralight: "font-extralight",
-	light: "font-light",
-	normal: "font-normal",
-	medium: "font-medium",
-	semibold: "font-semibold",
-	bold: "font-bold",
-	extrabold: "font-extrabold",
-	black: "font-black"
-};
-function _(e) {
-	return c.has(e);
-}
-function v(e) {
-	return l.has(e);
-}
-function y(e) {
-	return u.has(e);
-}
-function re(e) {
-	return d.has(e);
-}
-function b(e) {
-	return f.has(e);
-}
-function x(e) {
-	return p.has(e);
-}
-function S(e) {
-	if (!e || typeof e != "object") return !1;
-	let t = e;
-	return typeof t.name == "string" && m.has(t.name) && typeof t.opacity == "number" && ee.has(t.opacity);
-}
-function C(e) {
-	if (!e || typeof e != "object" || !("hex" in e) || !("opacity" in e)) return !1;
-	let t = e;
-	return typeof t.hex == "string" && typeof t.opacity == "number" && !("name" in e);
-}
-function w(e) {
-	if (typeof e != "string") return;
-	let t = e.trim();
-	return _(t) ? t : te[t.toLowerCase()];
-}
-function T(e) {
-	if (typeof e == "number" && l.has(String(e))) return String(e);
-	if (typeof e != "string") return;
-	let t = e.trim();
-	return v(t) ? t : {
-		0: "0",
-		"0px": "0",
-		"1px": "1",
-		"2px": "2",
-		"4px": "4",
-		"8px": "8"
-	}[t.toLowerCase()];
-}
-function E(e) {
-	if (typeof e != "string") return;
-	let t = e.trim();
-	if (y(t)) return t;
-	let n = w(t);
-	return n && y(n) ? n : {
-		"0.125rem": "sm",
-		"2px": "sm",
-		"0.25rem": "md",
-		"4px": "md",
-		"0.375rem": "md",
-		"6px": "md",
-		"0.5rem": "lg",
-		"8px": "lg",
-		"0.75rem": "xl",
-		"12px": "xl",
-		"1rem": "2xl",
-		"16px": "2xl",
-		"1.5rem": "3xl",
-		"24px": "3xl",
-		"9999px": "full"
-	}[t.toLowerCase()];
-}
-function D(e) {
-	if (typeof e == "number") return h[e];
-	if (typeof e != "string") return;
-	let t = e.trim();
-	if (re(t)) return t;
-	let n = /^(\d+(?:\.\d+)?)px$/i.exec(t);
-	if (n) return h[Number(n[1])];
-}
-function O(e) {
-	if (typeof e != "string") return;
-	let t = e.trim();
-	return b(t) ? t : {
-		1: "none",
-		"1.25": "tight",
-		"1.375": "snug",
-		"1.4": "snug",
-		"1.5": "normal",
-		"1.625": "relaxed",
-		2: "loose"
-	}[t.toLowerCase()];
-}
-function k(e) {
-	if (typeof e != "string") return;
-	let t = e.trim();
-	if (x(t)) return t;
-}
-function A(e) {
-	if (S(e)) return e;
-	if (!C(e)) return;
-	let t = g[e.hex.toUpperCase()];
-	if (!t) return;
-	let n = s.reduce((t, n) => Math.abs(n - e.opacity) < Math.abs(t - e.opacity) ? n : t);
-	if (!(Math.abs(n - e.opacity) > 2 && e.opacity !== 100 && ![
-		0,
-		5,
-		10,
-		15,
-		20,
-		25,
-		30,
-		40,
-		50,
-		60,
-		70,
-		75,
-		80,
-		90,
-		95,
-		100
-	].includes(e.opacity) && !s.find((t) => t === e.opacity))) return {
-		name: t,
-		opacity: s.includes(e.opacity) ? e.opacity : n
-	};
-}
-function j(e) {
-	if (typeof e == "string" || typeof e == "number") return ne[String(e)];
-}
-function M(e, t) {
-	return t.name === "transparent" ? `${e}-transparent` : t.opacity === 100 ? `${e}-${t.name}` : `${e}-${t.name}/${t.opacity}`;
-}
-function N(e, t) {
-	return `${e}-${t}`;
-}
-function P(e, t) {
-	return t === "none" ? e === "rounded" ? "rounded-none" : `${e}-none` : t === "md" && e === "rounded" ? "rounded-md" : `${e}-${t}`;
-}
-function F(e) {
-	return e === "1" ? "border" : `border-${e}`;
-}
-function I(e) {
-	return `text-${e}`;
-}
-function L(e) {
-	return `leading-${e}`;
-}
-function R(e) {
-	return `tracking-${e}`;
-}
-function z(e) {
-	return {
-		xs: "0.75rem",
-		sm: "0.875rem",
-		base: "1rem",
-		lg: "1.125rem",
-		xl: "1.25rem",
-		"2xl": "1.5rem",
-		"3xl": "1.875rem",
-		"4xl": "2.25rem",
-		"5xl": "3rem",
-		"6xl": "3.75rem"
-	}[e];
-}
-function B(e) {
-	if (e.name === "transparent") return "transparent";
-	let t = {
-		accent: "#0F766E",
-		white: "#FFFFFF",
-		black: "#000000",
-		"slate-50": "#F8FAFC",
-		"slate-100": "#F1F5F9",
-		"slate-200": "#E2E8F0",
-		"slate-300": "#CBD5E1",
-		"slate-400": "#94A3B8",
-		"slate-500": "#64748B",
-		"slate-600": "#475569",
-		"slate-700": "#334155",
-		"slate-800": "#1E293B",
-		"slate-900": "#0F172A",
-		"slate-950": "#020617"
-	}[e.name];
-	if (e.opacity === 100) return t;
-	let n = e.opacity / 100;
-	return `rgba(${Number.parseInt(t.slice(1, 3), 16)}, ${Number.parseInt(t.slice(3, 5), 16)}, ${Number.parseInt(t.slice(5, 7), 16)}, ${n})`;
-}
-// src/render/styleToClasses.ts
-var V = {
-	tabletStyle: "tablet:",
-	mobileStyle: "mobile:",
-	tabletLandscapeStyle: "tablet-landscape:",
-	mobileLandscapeStyle: "mobile-landscape:"
-}, H = {
-	PButton: [
-		"inline-flex",
-		"items-center",
-		"justify-center",
-		"h-10",
-		"px-3",
-		"rounded-md",
-		"bg-accent/10",
-		"text-accent"
-	],
-	PSection: ["flex", "flex-col"],
-	PContainer: ["flex", "flex-col"],
-	PText: [
-		"text-sm",
-		"leading-snug",
-		"whitespace-pre-wrap",
-		"break-words"
-	],
-	PRichText: ["text-sm", "leading-snug"],
-	PIcon: [
-		"inline-flex",
-		"items-center",
-		"justify-center"
-	],
-	PImage: ["max-w-full"],
-	PVideo: [
-		"block",
-		"w-full",
-		"max-w-full",
-		"h-auto"
-	],
-	PList: ["block"],
-	PDivider: ["block"],
-	PTable: ["block"],
-	PTextField: ["block"],
-	PTextArea: ["block"],
-	PCheckbox: ["block"],
-	PRadio: ["block"],
-	PSelect: ["block"]
-}, ie = {
-	row: "flex-row",
-	column: "flex-col",
-	"row-reverse": "flex-row-reverse",
-	"column-reverse": "flex-col-reverse"
-}, U = {
-	nowrap: "flex-nowrap",
-	wrap: "flex-wrap",
-	"wrap-reverse": "flex-wrap-reverse"
-}, W = {
-	"flex-start": "justify-start",
-	center: "justify-center",
-	"flex-end": "justify-end",
-	"space-between": "justify-between",
-	"space-around": "justify-around",
-	"space-evenly": "justify-evenly"
-}, G = {
-	stretch: "items-stretch",
-	"flex-start": "items-start",
-	center: "items-center",
-	"flex-end": "items-end",
-	baseline: "items-baseline"
-}, K = {
-	stretch: "content-stretch",
-	"flex-start": "content-start",
-	center: "content-center",
-	"flex-end": "content-end",
-	"space-between": "content-between",
-	"space-around": "content-around",
-	"space-evenly": "content-evenly"
-}, q = {
-	none: "no-underline",
-	underline: "underline",
-	overline: "overline",
-	"line-through": "line-through"
-}, J = {
-	left: "text-left",
-	center: "text-center",
-	right: "text-right",
-	justify: "text-justify"
-}, Y = {
-	none: "normal-case",
-	capitalize: "capitalize",
-	uppercase: "uppercase",
-	lowercase: "lowercase"
-}, ae = {
-	none: "border-none",
-	solid: "border-solid",
-	dashed: "border-dashed",
-	dotted: "border-dotted",
-	double: "border-double"
-}, oe = {
-	width: "w",
-	height: "h",
-	minWidth: "min-w",
-	minHeight: "min-h",
-	maxWidth: "max-w",
-	maxHeight: "max-h",
-	paddingTop: "pt",
-	paddingBottom: "pb",
-	paddingLeft: "pl",
-	paddingRight: "pr",
-	marginTop: "mt",
-	marginBottom: "mb",
-	marginLeft: "ml",
-	marginRight: "mr",
-	rowGap: "gap-y",
-	columnGap: "gap-x",
-	iconGap: "gap"
-}, se = {
-	borderRadiusTopLeft: "rounded-tl",
-	borderRadiusTopRight: "rounded-tr",
-	borderRadiusBottomRight: "rounded-br",
-	borderRadiusBottomLeft: "rounded-bl"
-}, ce = /* @__PURE__ */ new Set(["textFont", "wordSpacing"]);
-function le(e, t) {
-	return e ? `${e}${t}` : t;
-}
-function X(e, t, n) {
-	n && e.push(le(t, n));
-}
-function ue(e, t, n, r) {
-	let i = e.layout;
-	if (i === "grid") X(t, n, "grid"), typeof e.gridColumns == "number" && X(t, n, `grid-cols-${e.gridColumns}`);
-	else if (i === "flex") X(t, n, "flex"), X(t, n, ie[String(e.flexDirection ?? "row")]), X(t, n, U[String(e.flexWrap ?? "nowrap")]), X(t, n, W[String(e.justifyContent ?? "flex-start")]), X(t, n, G[String(e.alignItems ?? "stretch")]), X(t, n, K[String(e.alignContent ?? "stretch")]);
-	else if (i === "block") {
-		if (r === "PSection" || r === "PContainer") {
-			if (!n) return;
-			X(t, n, "flex"), X(t, n, "flex-col");
-			return;
-		}
-		X(t, n, "block");
-	}
-}
-function de(e, t, n) {
-	if (e.overflow === "hide") X(t, n, "overflow-hidden");
-	else if (e.overflow === "show") {
-		let r = e.overflowHorizontal === !1 ? "overflow-x-hidden" : "overflow-x-auto", i = e.overflowVertical === !1 ? "overflow-y-hidden" : "overflow-y-auto";
-		X(t, n, r), X(t, n, i);
-	}
-}
-function fe(e, t, n, r) {
-	for (let [i, a] of Object.entries(oe)) {
-		if (e[i] === void 0) continue;
-		let o = w(e[i]);
-		o ? (i === "maxWidth" || i === "maxHeight") && o === "auto" ? X(t, n, `${a}-none`) : X(t, n, N(a, o)) : r[i] = e[i];
-	}
-}
-function pe(e, t, n, r) {
-	for (let [i, a] of Object.entries(se)) {
-		if (e[i] === void 0) continue;
-		let o = E(e[i]);
-		o ? X(t, n, P(a, o)) : r[i] = e[i];
-	}
-}
-function me(e, t, n, r) {
-	if (e.backgroundType === "gradient") r.backgroundType = e.backgroundType, e.backgroundGradient !== void 0 && (r.backgroundGradient = e.backgroundGradient), r.backgroundColor = {
-		hex: "#000000",
-		opacity: 0
-	};
-	else {
-		if (e.backgroundType === "color" || e.backgroundColor !== void 0) {
-			let i = A(e.backgroundColor);
-			i ? X(t, n, M("bg", i)) : e.backgroundColor !== void 0 && (r.backgroundColor = e.backgroundColor, e.backgroundType !== void 0 && (r.backgroundType = e.backgroundType));
-		}
-		if (e.textColor !== void 0) {
-			let i = A(e.textColor);
-			i ? X(t, n, M("text", i)) : r.textColor = e.textColor;
-		}
-		if (e.borderColor !== void 0) {
-			let i = A(e.borderColor);
-			i ? X(t, n, M("border", i)) : r.borderColor = e.borderColor;
-		}
-	}
-}
-function Z(e, t, n, r) {
-	if (e.borderWidth !== void 0) {
-		let i = T(e.borderWidth);
-		i ? X(t, n, F(i)) : r.borderWidth = e.borderWidth;
-	}
-	typeof e.borderStyle == "string" && X(t, n, ae[e.borderStyle]);
-}
-function he(e, t, n, r) {
-	if (e.textSize !== void 0) {
-		let i = D(e.textSize);
-		i ? X(t, n, I(i)) : r.textSize = e.textSize;
-	}
-	if (e.lineHeight !== void 0) {
-		let i = O(e.lineHeight);
-		i ? X(t, n, L(i)) : r.lineHeight = e.lineHeight;
-	}
-	if (e.letterSpacing !== void 0) {
-		let i = k(e.letterSpacing);
-		i ? X(t, n, R(i)) : r.letterSpacing = e.letterSpacing;
-	}
-	e.fontWeight !== void 0 && X(t, n, j(e.fontWeight)), typeof e.fontStyle == "string" && X(t, n, e.fontStyle === "italic" ? "italic" : "not-italic"), typeof e.textDecoration == "string" && X(t, n, q[e.textDecoration]), typeof e.textAlign == "string" && X(t, n, J[e.textAlign]), typeof e.textTransform == "string" && X(t, n, Y[e.textTransform]), e.textFont !== void 0 && (r.textFont = e.textFont), e.wordSpacing !== void 0 && (r.wordSpacing = e.wordSpacing);
-}
-function Q(e, t, n = "") {
-	let r = [], i = {};
-	if (!t) return {
-		classes: r,
-		unresolved: i
-	};
-	ue(t, r, n, e), de(t, r, n), fe(t, r, n, i), pe(t, r, n, i), Z(t, r, n, i), me(t, r, n, i), he(t, r, n, i);
-	for (let e of ce) t[e] !== void 0 && i[e] === void 0 && (i[e] = t[e]);
-	return {
-		classes: r.filter(Boolean),
-		unresolved: i
-	};
-}
-function ge(e, t) {
-	if (e === "PPage") return [];
-	let n = t.style?.layout, r = H[e] ?? [], i = (e === "PSection" || e === "PContainer") && (n === "flex" || n === "grid") ? r.filter((e) => e !== "flex" && e !== "flex-col") : [...r], a = Q(e, t.style, "");
-	i.push(...a.classes);
-	for (let [n, r] of Object.entries(V)) {
-		let a = t[n];
-		if (!a || Object.keys(a).length === 0) continue;
-		let { classes: o } = Q(e, a, r);
-		i.push(...o);
-	}
-	return i;
-}
-function _e(e, t) {
-	return e === "PPage" ? ve(t ?? {}) : Q(e, t).unresolved;
-}
-function ve(e) {
-	let t = {};
-	if (e.backgroundColor !== void 0 || e.backgroundColor === void 0) {
-		let n = e.backgroundColor === void 0 ? void 0 : e.backgroundColor;
-		if (n !== void 0) {
-			let e = A(n);
-			t.backgroundColor = e ? $(e, n) : n;
-		}
-	}
-	if (e.textColor !== void 0) {
-		let n = A(e.textColor);
-		t.textColor = n ? $(n, e.textColor) : e.textColor;
-	}
-	if (e.textSize !== void 0) {
-		let n = D(e.textSize);
-		t.textSize = n ? z(n) : e.textSize;
-	}
-	return t;
-}
-function $(e, t) {
-	let n = B(e);
-	if (n) {
-		if (C(t) && e.opacity === 100) return {
-			hex: n.startsWith("#") ? n : t.hex,
-			opacity: 100
-		};
-		if (n.startsWith("#")) return {
-			hex: n,
-			opacity: 100
-		};
-		if (n.startsWith("rgba")) return t;
-	}
-	return t;
-}
-function ye(e) {
-	let t = {};
-	if (e.backgroundColor !== void 0) {
-		let n = A(e.backgroundColor);
-		if (n) {
-			let r = B(n);
-			if (r?.startsWith("#")) t.backgroundColor = {
-				hex: r,
-				opacity: 100
-			};
-			else if (C(e.backgroundColor)) t.backgroundColor = e.backgroundColor;
-			else if (n.opacity < 100 && r?.startsWith("rgba")) {
-				let r = B({
-					...n,
-					opacity: 100
-				});
-				t.backgroundColor = r?.startsWith("#") ? {
-					hex: r,
-					opacity: n.opacity
-				} : e.backgroundColor;
-			} else t.backgroundColor = e.backgroundColor;
-		} else t.backgroundColor = e.backgroundColor;
-	}
-	if (e.textColor !== void 0) {
-		let n = A(e.textColor);
-		if (n) {
-			let r = B({
-				...n,
-				opacity: 100
-			});
-			t.textColor = r?.startsWith("#") ? {
-				hex: r,
-				opacity: n.opacity
-			} : e.textColor;
-		} else t.textColor = e.textColor;
-	}
-	if (e.textSize !== void 0) {
-		let n = D(e.textSize);
-		t.textSize = n ? z(n) : (e.textSize, e.textSize);
-	}
-	return t;
-}
-export { D as _, t as a, s as c, r as d, a as f, w as g, A as h, _e as i, n as l, B as m, Q as n, o, S as p, ge as r, i as s, ye as t, e as u };