@palmyit/elements 0.1.7 → 0.1.8

package/dist/styleToClasses-CZSWp6Ez.js

@@ -0,0 +1,683 @@
+// 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 };

package/dist/templates/elementSpec.d.ts

@@ -1,10 +1,5 @@
-import { ElementType } from '../schema/elementConfiguration';
-import { ElementSpec, ElementSpecOptions } from '../render/types';
-export type ShortcodeNode = {
-    type: ElementType;
-    props: Record<string, unknown>;
-    children?: ShortcodeNode[];
-};
+import { ElementSpec, ElementSpecOptions, ShortcodeNode } from '../render/types';
+export type { ShortcodeNode };
 /**
  * Convert one shortcode node into a semantic HTML element spec without recursing
  * into layout children. Pass `options.children` for slots (builder) or let

package/dist/templates/helpers.d.ts

@@ -1,3 +1,4 @@
+import { ElementType } from '../schema/elementConfiguration';
 import { ElementAttribute, CssVariables, ElementSpec } from '../render/types';
 import { tags, ShortcodeTag } from '../render/tags';
 export declare function spec(tag: string, attrs?: Record<string, ElementAttribute>, children?: ElementSpec['children'], styleVars?: CssVariables): ElementSpec;
@@ -5,5 +6,12 @@ export declare function withClass(className: ShortcodeTag, attrs?: Record<string
 export declare function linked(props: Record<string, unknown>, children: Array<ElementSpec | string>): Array<ElementSpec | string>;
 export declare function cssPrefix(type: string): string;
 export declare function nodeId(props: Record<string, unknown>): string;
-export declare function hostAttrs(props: Record<string, unknown>, className: ShortcodeTag): Record<string, ElementAttribute>;
+export declare function hostAttrs(props: Record<string, unknown>, className: ShortcodeTag, type?: ElementType): Record<string, ElementAttribute>;
+/** Host attributes plus CSS variables for style keys that are not Tailwind tokens. */
+export declare function withStyle(type: ElementType, props: Record<string, unknown>): {
+    attrs: Record<string, ElementAttribute>;
+    vars: CssVariables;
+};
+/** Page theme variables (utilities nest under .plmt-page and do not style the root). */
+export declare function pageStyleVars(props: Record<string, unknown>): CssVariables;
 export { tags };