@palmyit/elements 0.1.7 → 0.1.8

package/dist/templates.d.ts

@@ -6,6 +6,8 @@ export type { ElementAttribute, CssVariables, ElementSpec, ElementSpecOptions, }
 export { escapeHtml, sanitizeRichTextHtml, renderHtml } from './render/renderHtml';
 export { toDom } from './render/toDom';
 export { styleToCssVariables } from './render/styleToVars';
+export { styleToClasses, styleObjectToClasses, unresolvedStyleForVars, pageTokensToVarValues, type DeviceStyleProps, } from './render/styleToClasses';
+export { SPACING_TOKENS, TEXT_SIZE_TOKENS, COLOR_NAMES, OPACITY_STEPS, toSpacingToken, toTextSizeToken, toPaletteColor, isPaletteColor, type SpacingToken, type TextSizeToken, type ColorName, type PaletteColor, type StyleColor, } from './render/styleTokens';
 export { tags, type ShortcodeTag } from './render/tags';
 export { elementSpec, toElementTree, type ShortcodeNode, } from './templates/elementSpec';
-export { spec, linked, hostAttrs, nodeId, cssPrefix } from './templates/helpers';
+export { spec, linked, hostAttrs, withStyle, pageStyleVars, nodeId, cssPrefix } from './templates/helpers';

package/dist/templates.js

@@ -1,5 +1,6 @@
+import { _ as e, c as t, d as n, g as r, h as i, i as a, m as o, n as s, o as ee, p as c, r as l, t as u, u as d } from "./styleToClasses-CZSWp6Ez.js";
 // src/render/renderHtml.ts
-var e = /* @__PURE__ */ new Set([
+var f = /* @__PURE__ */ new Set([
 	"img",
 	"input",
 	"hr",
@@ -7,38 +8,41 @@ var e = /* @__PURE__ */ new Set([
 	"meta",
 	"link"
 ]);
-function t(e) {
+function p(e) {
 	return String(e).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
 }
-function n(e) {
+function m(e) {
 	return e.replaceAll(/<(script|style|iframe|object|embed)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "").replaceAll(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replaceAll(/\s+(href|src)\s*=\s*(["'])\s*javascript:[\s\S]*?\2/gi, "");
 }
-function r(n) {
-	if (typeof n == "string") return t(n);
-	let i = Object.entries(n.attrs).flatMap(([e, n]) => n === void 0 || n === !1 ? [] : n === !0 ? [e] : [`${e}="${t(n)}"`]), a = Object.entries(n.styleVars).flatMap(([e, t]) => t === void 0 ? [] : [`${e}:${t}`]).join(";");
-	a && i.push(`style="${t(a)}"`);
-	let o = `<${n.tag}${i.length ? ` ${i.join(" ")}` : ""}>`;
-	return e.has(n.tag) ? `${o.slice(0, -1)}>` : `${o}${Array.isArray(n.children) ? n.children.map(r).join("") : n.children?.html ?? ""}</${n.tag}>`;
+function h(e) {
+	if (typeof e == "string") return p(e);
+	let t = Object.entries(e.attrs).flatMap(([e, t]) => t === void 0 || t === !1 ? [] : t === !0 ? [e] : [`${e}="${p(t)}"`]), n = Object.entries(e.styleVars).flatMap(([e, t]) => t === void 0 ? [] : [`${e}:${t}`]).join(";");
+	n && t.push(`style="${p(n)}"`);
+	let r = `<${e.tag}${t.length ? ` ${t.join(" ")}` : ""}>`;
+	return f.has(e.tag) ? `${r.slice(0, -1)}>` : `${r}${Array.isArray(e.children) ? e.children.map(h).join("") : e.children?.html ?? ""}</${e.tag}>`;
 }
 // src/render/toDom.ts
-function i(e) {
+function g(e) {
 	if (typeof e == "string") return document.createTextNode(e);
 	let t = document.createElement(e.tag);
 	for (let [n, r] of Object.entries(e.attrs)) r !== void 0 && r !== !1 && (r === !0 ? t.setAttribute(n, "") : t.setAttribute(n, String(r)));
 	let n = Object.entries(e.styleVars).flatMap(([e, t]) => t === void 0 ? [] : [`${e}:${t}`]).join(";");
-	if (n && t.setAttribute("style", n), Array.isArray(e.children)) for (let n of e.children) t.append(i(n));
+	if (n && t.setAttribute("style", n), Array.isArray(e.children)) for (let n of e.children) t.append(g(n));
 	else e.children?.html && (t.innerHTML = e.children.html);
 	return t;
 }
 // src/render/styleToVars.ts
-var a = /^#[0-9A-Fa-f]{6}$/;
-function o(e) {
-	if (!a.test(e.hex) || !Number.isFinite(e.opacity)) return;
-	if (e.opacity === 100) return e.hex.toUpperCase();
-	let t = Math.min(100, Math.max(0, e.opacity)) / 100;
-	return `rgba(${Number.parseInt(e.hex.slice(1, 3), 16)}, ${Number.parseInt(e.hex.slice(3, 5), 16)}, ${Number.parseInt(e.hex.slice(5, 7), 16)}, ${t})`;
-}
-var s = {
+var _ = /^#[0-9A-Fa-f]{6}$/;
+function v(e) {
+	if (c(e)) return o(e);
+	if (!e || typeof e != "object" || !("hex" in e) || !("opacity" in e)) return;
+	let { hex: t, opacity: n } = e;
+	if (!_.test(t) || !Number.isFinite(n)) return;
+	if (n === 100) return t.toUpperCase();
+	let r = Math.min(100, Math.max(0, n)) / 100;
+	return `rgba(${Number.parseInt(t.slice(1, 3), 16)}, ${Number.parseInt(t.slice(3, 5), 16)}, ${Number.parseInt(t.slice(5, 7), 16)}, ${r})`;
+}
+var y = {
 	textFont: "font-family",
 	textColor: "color",
 	textSize: "font-size",
@@ -50,22 +54,22 @@ var s = {
 	borderRadiusBottomLeft: "border-bottom-left-radius",
 	borderRadiusBottomRight: "border-bottom-right-radius",
 	gridColumns: "grid-template-columns"
-}, c = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
-function l(e, t) {
-	return t && typeof t == "object" && "hex" in t && "opacity" in t ? o(t) : e === "backgroundGradient" && t && typeof t == "object" && "kind" in t && "value" in t ? `${String(t.kind)}-gradient(${String(t.value)})` : e === "gridColumns" && typeof t == "number" ? `repeat(${t}, minmax(0, 1fr))` : e === "textSize" && typeof t == "number" ? Number.isFinite(t) && t > 0 ? `${t}px` : void 0 : [
+}, b = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+function x(e, t) {
+	return t && typeof t == "object" && ("hex" in t || "name" in t) && "opacity" in t ? v(t) : e === "backgroundGradient" && t && typeof t == "object" && "kind" in t && "value" in t ? `${String(t.kind)}-gradient(${String(t.value)})` : e === "gridColumns" && typeof t == "number" ? `repeat(${t}, minmax(0, 1fr))` : e === "textSize" && typeof t == "number" ? Number.isFinite(t) && t > 0 ? `${t}px` : void 0 : e === "textSize" && typeof t == "string" && t.endsWith("rem") ? t : [
 		"string",
 		"number",
 		"boolean"
 	].includes(typeof t) ? String(t) : void 0;
 }
-function u(e, t) {
+function S(e, t) {
 	return e ? Object.fromEntries(Object.entries(e).flatMap(([e, n]) => {
-		let r = l(e, n);
-		return r === void 0 ? [] : [[`--palmyit-${t}-${s[e] ?? c(e)}`, r]];
+		let r = x(e, n);
+		return r === void 0 ? [] : [[`--palmyit-${t}-${y[e] ?? b(e)}`, r]];
 	})) : {};
 }
 // src/render/tags.ts
-var d = {
+var C = {
 	PPage: "plmt-page",
 	PSection: "plmt-section",
 	PContainer: "plmt-container",
@@ -85,7 +89,7 @@ var d = {
 	PSelect: "plmt-select"
 };
 // src/templates/helpers.ts
-function f(e, t = {}, n, r = {}) {
+function w(e, t = {}, n, r = {}) {
 	return n === void 0 ? {
 		tag: e,
 		attrs: t,
@@ -97,173 +101,249 @@ function f(e, t = {}, n, r = {}) {
 		children: n
 	};
 }
-function p(e, t) {
+function T(e, t) {
 	let n = String(e.href ?? "");
 	if (!n) return t;
 	let r = String(e.target ?? "_self");
-	return [f("a", {
+	return [w("a", {
 		href: n,
 		target: r,
 		rel: r === "_blank" ? "noopener noreferrer" : void 0,
 		"aria-description": String(e.description ?? "") || void 0
 	}, t)];
 }
-function m(e) {
+function E(e) {
 	return e.slice(1).replaceAll(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-function h(e) {
+function D(e) {
 	return String(e.id ?? e.pageId ?? "");
 }
-function g(e, t) {
-	let n = e.style ?? {}, r = {
-		class: t,
-		"data-plmt-id": h(e)
+function O(e) {
+	return {
+		style: e.style,
+		tabletStyle: e.tabletStyle,
+		mobileStyle: e.mobileStyle,
+		tabletLandscapeStyle: e.tabletLandscapeStyle,
+		mobileLandscapeStyle: e.mobileLandscapeStyle
 	};
-	return typeof n.layout == "string" && (r["data-layout"] = n.layout), typeof n.backgroundType == "string" && (r["data-background"] = n.backgroundType), r;
 }
-// src/templates/elementSpec.ts
-var _ = /* @__PURE__ */ new Set([
-	"PPage",
-	"PSection",
-	"PContainer"
-]);
-function v(e, t = "") {
-	let n = {
-		class: d.PIcon,
-		"data-name": e || void 0
+function k(e, t, n) {
+	let r = e.style ?? {}, i = {
+		class: [t, ...n ? l(n, O(e)) : []].filter(Boolean).join(" "),
+		"data-plmt-id": D(e)
 	};
-	return t.trim() ? (n.role = "img", n["aria-label"] = t) : n["aria-hidden"] = "true", f("span", n);
+	return typeof r.layout == "string" && (i["data-layout"] = r.layout), typeof r.backgroundType == "string" && (i["data-background"] = r.backgroundType), i;
 }
-function y(e, t) {
+function A(e, t) {
 	return {
-		attrs: g(t, d[e]),
-		vars: u(t.style, m(e))
+		attrs: k(t, C[e], e),
+		vars: S(a(e, t.style), E(e))
 	};
 }
-function b(e, t) {
-	let r = e.props, i = y(e.type, r);
-	if (e.type === "PVideo" && !String(r.src ?? "")) return null;
-	if (e.type === "PPage") return f("main", {
-		class: d.PPage,
-		"data-plmt-id": String(r.pageId),
-		title: String(r.title ?? ""),
-		"data-url": String(r.url ?? "")
-	}, t?.children ?? [], u({
-		backgroundColor: r.backgroundColor,
-		textColor: r.textColor,
-		textSize: r.textSize
-	}, "page"));
-	if (e.type === "PSection") return f("section", i.attrs, t?.children ?? [], i.vars);
-	if (e.type === "PContainer") return f("div", i.attrs, t?.children ?? [], i.vars);
-	if (e.type === "PButton") {
-		let e = [];
-		r.startIcon && e.push(v(String(r.startIcon))), e.push(String(r.name ?? "")), r.endIcon && e.push(v(String(r.endIcon)));
-		let t = String(r.href ?? "");
-		if (t) {
-			let n = String(r.target ?? "_self");
-			return f("a", {
-				...i.attrs,
-				href: t,
-				target: n,
-				rel: n === "_blank" ? "noopener noreferrer" : void 0,
-				"aria-description": String(r.description ?? "") || void 0
-			}, e, i.vars);
-		}
-		return f("button", {
-			...i.attrs,
-			type: "button"
-		}, e, i.vars);
-	}
-	if (e.type === "PText") return f("p", i.attrs, p(r, [String(r.text ?? "")]), i.vars);
-	if (e.type === "PRichText") return f("div", i.attrs, { html: n(String(r.text ?? "")) }, i.vars);
-	if (e.type === "PIcon") {
-		let e = String(r.label ?? ""), t = String(r.icon ?? ""), n = e.trim() ? {
-			role: "img",
-			"aria-label": e
-		} : { "aria-hidden": "true" }, a = p(r, []);
-		return f("span", {
-			...i.attrs,
-			"data-name": t || void 0,
-			...n
-		}, a.length ? a : void 0, i.vars);
-	}
-	if (e.type === "PImage") {
-		let e = f("img", {
-			class: String(r.href ?? "") ? void 0 : d.PImage,
-			src: String(r.src),
-			alt: String(r.alt ?? ""),
-			...String(r.href ?? "") ? {} : {
-				"data-plmt-id": i.attrs["data-plmt-id"],
-				"data-background": i.attrs["data-background"]
-			}
-		}, void 0, String(r.href ?? "") ? {} : i.vars), t = String(r.href ?? "");
-		if (!t) return e;
-		let n = String(r.target ?? "_self");
-		return f("a", {
-			class: d.PImage,
-			"data-plmt-id": i.attrs["data-plmt-id"],
-			"data-background": i.attrs["data-background"],
-			href: t,
-			target: n,
-			rel: n === "_blank" ? "noopener noreferrer" : void 0,
-			"aria-description": String(r.description ?? "") || void 0
-		}, [f("img", {
-			src: String(r.src),
-			alt: String(r.alt ?? "")
-		})], i.vars);
+function j(e) {
+	return S(u({
+		backgroundColor: e.backgroundColor,
+		textColor: e.textColor,
+		textSize: e.textSize
+	}), "page");
+}
+// src/elements/page/template.ts
+function M(e, t) {
+	let n = e.props;
+	return w("main", {
+		class: C.PPage,
+		"data-plmt-id": String(n.pageId),
+		title: String(n.title ?? ""),
+		"data-url": String(n.url ?? "")
+	}, t?.children ?? [], j(n));
+}
+// src/elements/section/template.ts
+function N(e, t) {
+	let n = A(e.type, e.props);
+	return w("section", n.attrs, t?.children ?? [], n.vars);
+}
+// src/elements/container/template.ts
+function P(e, t) {
+	let n = A(e.type, e.props);
+	return w("div", n.attrs, t?.children ?? [], n.vars);
+}
+// src/elements/button/template.ts
+function F(e, t = "") {
+	let n = {
+		class: C.PIcon,
+		"data-name": e || void 0
+	};
+	return t.trim() ? (n.role = "img", n["aria-label"] = t) : n["aria-hidden"] = "true", w("span", n);
+}
+function I(e, t) {
+	let n = e.props, r = A(e.type, n), i = [];
+	n.startIcon && i.push(F(String(n.startIcon))), i.push(String(n.name ?? "")), n.endIcon && i.push(F(String(n.endIcon)));
+	let a = String(n.href ?? "");
+	if (a) {
+		let e = String(n.target ?? "_self");
+		return w("a", {
+			...r.attrs,
+			href: a,
+			target: e,
+			rel: e === "_blank" ? "noopener noreferrer" : void 0,
+			"aria-description": String(n.description ?? "") || void 0
+		}, i, r.vars);
 	}
-	if (e.type === "PVideo") return f("video", {
-		...i.attrs,
-		src: String(r.src),
-		title: String(r.title ?? ""),
+	return w("button", {
+		...r.attrs,
+		type: "button"
+	}, i, r.vars);
+}
+// src/elements/text/template.ts
+function L(e, t) {
+	let n = e.props, r = A(e.type, n);
+	return w("p", r.attrs, T(n, [String(n.text ?? "")]), r.vars);
+}
+// src/elements/rich-text/template.ts
+function R(e, t) {
+	let n = e.props, r = A(e.type, n);
+	return w("div", r.attrs, { html: m(String(n.text ?? "")) }, r.vars);
+}
+// src/elements/icon/template.ts
+function z(e, t) {
+	let n = e.props, r = A(e.type, n), i = String(n.label ?? ""), a = String(n.icon ?? ""), o = i.trim() ? {
+		role: "img",
+		"aria-label": i
+	} : { "aria-hidden": "true" }, s = T(n, []);
+	return w("span", {
+		...r.attrs,
+		"data-name": a || void 0,
+		...o
+	}, s.length ? s : void 0, r.vars);
+}
+// src/elements/image/template.ts
+function B(e, t) {
+	let n = e.props, r = A(e.type, n), i = w("img", {
+		class: String(n.href ?? "") ? void 0 : C.PImage,
+		src: String(n.src),
+		alt: String(n.alt ?? ""),
+		...String(n.href ?? "") ? {} : {
+			"data-plmt-id": r.attrs["data-plmt-id"],
+			"data-background": r.attrs["data-background"]
+		}
+	}, void 0, String(n.href ?? "") ? {} : r.vars), a = String(n.href ?? "");
+	if (!a) return i;
+	let o = String(n.target ?? "_self");
+	return w("a", {
+		class: C.PImage,
+		"data-plmt-id": r.attrs["data-plmt-id"],
+		"data-background": r.attrs["data-background"],
+		href: a,
+		target: o,
+		rel: o === "_blank" ? "noopener noreferrer" : void 0,
+		"aria-description": String(n.description ?? "") || void 0
+	}, [w("img", {
+		src: String(n.src),
+		alt: String(n.alt ?? "")
+	})], r.vars);
+}
+// src/elements/video/template.ts
+function V(e, t) {
+	let n = e.props;
+	if (!String(n.src ?? "")) return null;
+	let r = A(e.type, n);
+	return w("video", {
+		...r.attrs,
+		src: String(n.src),
+		title: String(n.title ?? ""),
 		controls: !0
-	}, void 0, i.vars);
-	if (e.type === "PList") {
-		let e = r.items.map((e) => f("li", {}, [e.text]));
-		return f("ul", i.attrs, e, i.vars);
-	}
-	if (e.type === "PDivider") return f("hr", {
-		...i.attrs,
-		"data-size": String(r.size ?? "4")
-	}, void 0, i.vars);
-	if (e.type === "PTable") {
-		let e = r.headers.map((e) => f("th", {}, [e.text])), t = r.rows.map((e) => f("tr", {}, e.cells.map((e) => f("td", {}, [e]))));
-		return f("div", i.attrs, [f("table", {}, [f("thead", {}, [f("tr", {}, e)]), f("tbody", {}, t)])], i.vars);
-	}
-	let a = h(r);
-	if (e.type === "PTextField") return f("div", i.attrs, [f("label", { for: a }, [String(r.label)]), f("input", {
-		id: a,
-		name: a,
-		placeholder: String(r.placeholder ?? "")
-	})], i.vars);
-	if (e.type === "PTextArea") return f("div", i.attrs, [f("label", { for: a }, [String(r.label)]), f("textarea", {
-		id: a,
-		name: a,
-		placeholder: String(r.placeholder ?? "")
-	})], i.vars);
-	if (e.type === "PCheckbox") return f("div", i.attrs, [f("label", {}, [f("input", {
+	}, void 0, r.vars);
+}
+// src/elements/list/template.ts
+function H(e, t) {
+	let n = e.props, r = A(e.type, n), i = n.items.map((e) => w("li", {}, [e.text]));
+	return w("ul", r.attrs, i, r.vars);
+}
+// src/elements/divider/template.ts
+function U(e, t) {
+	let n = e.props, r = A(e.type, n);
+	return w("hr", {
+		...r.attrs,
+		"data-size": String(n.size ?? "4")
+	}, void 0, r.vars);
+}
+// src/elements/table/template.ts
+function W(e, t) {
+	let n = e.props, r = A(e.type, n), i = n.headers.map((e) => w("th", {}, [e.text])), a = n.rows.map((e) => w("tr", {}, e.cells.map((e) => w("td", {}, [e]))));
+	return w("div", r.attrs, [w("table", {}, [w("thead", {}, [w("tr", {}, i)]), w("tbody", {}, a)])], r.vars);
+}
+// src/elements/text-field/template.ts
+function G(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n);
+	return w("div", r.attrs, [w("label", { for: i }, [String(n.label)]), w("input", {
+		id: i,
+		name: i,
+		placeholder: String(n.placeholder ?? "")
+	})], r.vars);
+}
+// src/elements/text-area/template.ts
+function K(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n);
+	return w("div", r.attrs, [w("label", { for: i }, [String(n.label)]), w("textarea", {
+		id: i,
+		name: i,
+		placeholder: String(n.placeholder ?? "")
+	})], r.vars);
+}
+// src/elements/checkbox/template.ts
+function q(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n);
+	return w("div", r.attrs, [w("label", {}, [w("input", {
 		type: "checkbox",
-		name: a,
-		checked: r.checked === !0 || void 0
-	}), String(r.label)])], i.vars);
-	if (e.type === "PRadio") {
-		let e = r.options.map((e) => f("label", {}, [f("input", {
-			type: "radio",
-			name: a,
-			value: e.text
-		}), e.text]));
-		return f("fieldset", i.attrs, [f("legend", {}, [String(r.legend)]), ...e], i.vars);
-	}
-	if (e.type === "PSelect") {
-		let e = r.options.map((e) => f("option", { value: e.text }, [e.text]));
-		return f("div", i.attrs, [f("label", { for: a }, [String(r.label)]), f("select", {
-			id: a,
-			name: a
-		}, e)], i.vars);
-	}
-	return f("div", i.attrs, void 0, i.vars);
+		name: i,
+		checked: n.checked === !0 || void 0
+	}), String(n.label)])], r.vars);
+}
+// src/elements/radio/template.ts
+function J(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n), a = n.options.map((e) => w("label", {}, [w("input", {
+		type: "radio",
+		name: i,
+		value: e.text
+	}), e.text]));
+	return w("fieldset", r.attrs, [w("legend", {}, [String(n.legend)]), ...a], r.vars);
+}
+// src/elements/select/template.ts
+function Y(e, t) {
+	let n = e.props, r = A(e.type, n), i = D(n), a = n.options.map((e) => w("option", { value: e.text }, [e.text]));
+	return w("div", r.attrs, [w("label", { for: i }, [String(n.label)]), w("select", {
+		id: i,
+		name: i
+	}, a)], r.vars);
+}
+// src/templates/elementSpec.ts
+var X = /* @__PURE__ */ new Set([
+	"PPage",
+	"PSection",
+	"PContainer"
+]), Z = {
+	PPage: M,
+	PSection: N,
+	PContainer: P,
+	PButton: I,
+	PText: L,
+	PRichText: R,
+	PImage: B,
+	PVideo: V,
+	PList: H,
+	PIcon: z,
+	PDivider: U,
+	PTable: W,
+	PTextField: G,
+	PTextArea: K,
+	PCheckbox: q,
+	PRadio: J,
+	PSelect: Y
+};
+function Q(e, t) {
+	return Z[e.type](e, t);
 }
-function x(e) {
-	return _.has(e.type) ? b(e, { children: (e.children ?? []).map(x).filter(Boolean) }) : b(e);
+function $(e) {
+	return X.has(e.type) ? Q(e, { children: (e.children ?? []).map($).filter(Boolean) }) : Q(e);
 }
-export { m as cssPrefix, b as elementSpec, t as escapeHtml, g as hostAttrs, p as linked, h as nodeId, r as renderHtml, n as sanitizeRichTextHtml, f as spec, u as styleToCssVariables, d as tags, i as toDom, x as toElementTree };
+export { ee as COLOR_NAMES, t as OPACITY_STEPS, d as SPACING_TOKENS, n as TEXT_SIZE_TOKENS, E as cssPrefix, Q as elementSpec, p as escapeHtml, k as hostAttrs, c as isPaletteColor, T as linked, D as nodeId, j as pageStyleVars, u as pageTokensToVarValues, h as renderHtml, m as sanitizeRichTextHtml, w as spec, s as styleObjectToClasses, l as styleToClasses, S as styleToCssVariables, C as tags, g as toDom, $ as toElementTree, i as toPaletteColor, r as toSpacingToken, e as toTextSizeToken, a as unresolvedStyleForVars, A as withStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@palmyit/elements",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Palmyit element definitions, semantic HTML templates, and CSS for builder and published sites",
   "private": false,
   "repository": {
@@ -56,8 +56,10 @@
     "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/html-vite": "^10.6.0",
+    "@tailwindcss/vite": "^4.3.3",
     "happy-dom": "^20.0.10",
     "storybook": "^10.6.0",
+    "tailwindcss": "^4.3.3",
     "typescript": "~6.0.2",
     "vite": "^8.3.0",
     "vite-plugin-dts": "^5.0.2",

package/dist/schema/PButton/pButton.definition.d.ts

@@ -1,38 +0,0 @@
-import { LinkSettings } from '../linkSettings';
-import { LengthKey } from '../elementStyleDefinitions';
-import { BorderLineStyle } from '../style/elementStyle';
-import { BackgroundStyle } from '../Fields/BackgroundField/backgroundValue';
-import { ColorValue } from '../Fields/ColorField/color-value';
-/** Every key stays unset until the user edits it, so the button keeps its theme look. */
-export type ButtonStyle = Partial<BackgroundStyle & Record<LengthKey, string> & {
-    borderWidth: string;
-    borderStyle: BorderLineStyle;
-    borderColor: ColorValue;
-    textColor: ColorValue;
-    textFont: string;
-    textSize: string;
-    iconGap: string;
-}>;
-export type PButtonDocumentProps = LinkSettings & {
-    id: string;
-    name: string;
-    startIcon: string;
-    endIcon: string;
-    style: ButtonStyle;
-};
-export declare const defaultButtonProps: {
-    style: ButtonStyle;
-    href: string;
-    target: import('../linkSettings').LinkTarget;
-    description: string;
-    name: string;
-    startIcon: string;
-    endIcon: string;
-};
-export declare const pButtonDefinition: import('../elementConfiguration').ElementConfiguration<LinkSettings & {
-    id: string;
-    name: string;
-    startIcon: string;
-    endIcon: string;
-    style: ButtonStyle;
-} & Partial<import('../deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;

package/dist/schema/PCheckbox/pCheckbox.definition.d.ts

@@ -1,10 +0,0 @@
-export type PCheckboxDocumentProps = {
-    id: string;
-    label: string;
-    checked: boolean;
-};
-export declare const defaultCheckboxProps: {
-    label: string;
-    checked: boolean;
-};
-export declare const pCheckboxDefinition: import('../elementConfiguration').ElementConfiguration<PCheckboxDocumentProps & Partial<import('../deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;

package/dist/schema/PContainer/pContainer.definition.d.ts

@@ -1,39 +0,0 @@
-export declare const defaultContainerStyle: {
-    layout: import('../style/elementStyle').ElementLayout;
-    gridColumns?: import('../style/elementStyle').GridColumnCount;
-    flexDirection: import('../style/elementStyle').FlexDirection;
-    flexWrap: import('../style/elementStyle').FlexWrap;
-    justifyContent: import('../style/elementStyle').FlexJustifyContent;
-    alignItems: import('../style/elementStyle').FlexAlignItems;
-    alignContent: import('../style/elementStyle').FlexAlignContent;
-    rowGap: string;
-    columnGap: string;
-    overflow: import('../style/elementStyle').ElementOverflow;
-    overflowVertical: boolean;
-    overflowHorizontal: boolean;
-    width: string;
-    height: string;
-    minWidth: string;
-    minHeight: string;
-    maxWidth: string;
-    maxHeight: string;
-    paddingTop: string;
-    paddingBottom: string;
-    paddingLeft: string;
-    paddingRight: string;
-    marginTop: string;
-    marginBottom: string;
-    marginLeft: string;
-    marginRight: string;
-    borderRadiusTopLeft: string;
-    borderRadiusTopRight: string;
-    borderRadiusBottomRight: string;
-    borderRadiusBottomLeft: string;
-    borderWidth: string;
-    borderStyle: import('../style/elementStyle').BorderLineStyle;
-    borderColor: import('../../definitions').ColorValue;
-    backgroundType: import('../Fields/BackgroundField/backgroundValue').BackgroundType;
-    backgroundColor: import('../../definitions').ColorValue;
-    backgroundGradient: import('../Fields/BackgroundField/backgroundValue').GradientValue;
-};
-export declare const pContainerDefinition: import('../elementConfiguration').ElementConfiguration<import('../layoutElementConfiguration').LayoutElementProps & Partial<import('../deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;

package/dist/schema/PDivider/pDivider.definition.d.ts

@@ -1,10 +0,0 @@
-export declare const dividerSizes: readonly ["1", "2", "3", "4"];
-export type DividerSize = (typeof dividerSizes)[number];
-export type PDividerDocumentProps = {
-    id: string;
-    size: DividerSize;
-};
-export declare const defaultDividerProps: {
-    size: DividerSize;
-};
-export declare const pDividerDefinition: import('../elementConfiguration').ElementConfiguration<PDividerDocumentProps & Partial<import('../deviceVisibility').DeviceVisibility> & Partial<Record<"tabletStyle" | "mobileStyle" | "tabletLandscapeStyle" | "mobileLandscapeStyle", Partial<Record<string, unknown>>>>>;