@plitzi/sdk-style 0.30.19

package/dist/components/StyleInspector/categories/Background/helpers/backgroundParser.mjs

@@ -0,0 +1,182 @@
+//#region src/components/StyleInspector/categories/Background/helpers/backgroundParser.ts
+var e = [{
+	id: "stop-default-0",
+	color: "#000000",
+	position: "0%"
+}, {
+	id: "stop-default-1",
+	color: "#ffffff",
+	position: "100%"
+}], t = {
+	url: "",
+	angle: "180deg",
+	radialShape: "ellipse",
+	radialExtent: "farthest-corner",
+	radialPosition: "50% 50%",
+	conicAngle: "0deg",
+	conicPosition: "50% 50%",
+	stops: e,
+	size: "auto",
+	positionX: "0%",
+	positionY: "0%",
+	repeat: "no-repeat",
+	attachment: "scroll",
+	clip: "border-box"
+}, n = 0, r = () => `layer-${++n}`, i = () => `stop-${++n}`;
+function a(e) {
+	let t = [], n = 0, r = "";
+	for (let i of e) i === "(" ? n++ : i === ")" && n--, i === "," && n === 0 ? (t.push(r.trim()), r = "") : r += i;
+	return r.trim() && t.push(r.trim()), t;
+}
+function o(e) {
+	let t = e.trim(), n = 0, r = -1;
+	for (let e = 0; e < t.length; e++) t[e] === "(" ? n++ : t[e] === ")" ? n-- : t[e] === " " && n === 0 && (r = e);
+	if (r !== -1) {
+		let e = t.slice(r + 1).trim();
+		if (/^-?[\d.]/.test(e) || /\d(px|em|rem|%|vw|vh|dvh|dvw|lvh|lvw|fr|ch|ex)$/.test(e)) return {
+			color: t.slice(0, r).trim(),
+			position: e
+		};
+	}
+	return {
+		color: t,
+		position: ""
+	};
+}
+function s(e) {
+	return a(e).map((e) => ({
+		id: i(),
+		...o(e)
+	}));
+}
+function c(e) {
+	let n = a(e), r = (n[0] ?? "").trim(), i = /^\d/.test(r) || r.startsWith("to ");
+	return {
+		angle: i ? r : t.angle,
+		stops: s(n.slice(+!!i).join(", "))
+	};
+}
+function l(e) {
+	let n = a(e), r = (n[0] ?? "").trim(), i = t.radialShape, o = t.radialExtent, c = t.radialPosition, l = 0;
+	if (/circle|ellipse|closest|farthest|at\s/.test(r)) {
+		l = 1, r.includes("circle") && (i = "circle"), r.includes("ellipse") && (i = "ellipse"), r.includes("closest-side") ? o = "closest-side" : r.includes("closest-corner") ? o = "closest-corner" : r.includes("farthest-side") ? o = "farthest-side" : r.includes("farthest-corner") && (o = "farthest-corner");
+		let e = r.match(/at\s+(.+)$/);
+		e && (c = e[1].trim());
+	}
+	let u = n.slice(l).join(", ");
+	return {
+		radialShape: i,
+		radialExtent: o,
+		radialPosition: c,
+		stops: s(u)
+	};
+}
+function u(e) {
+	let n = a(e), r = (n[0] ?? "").trim(), i = t.conicAngle, o = t.conicPosition, c = 0;
+	if (r.startsWith("from ") || r.startsWith("at ")) {
+		c = 1;
+		let e = r.match(/from\s+([\d.]+(?:deg|rad|turn|grad))/);
+		e && (i = e[1]);
+		let t = r.match(/at\s+(.+?)(?:\s+from|$)/);
+		t && (o = t[1].trim());
+	}
+	let l = n.slice(c).join(", ");
+	return {
+		conicAngle: i,
+		conicPosition: o,
+		stops: s(l)
+	};
+}
+function d(e) {
+	let t = e.trim();
+	if (!t || t === "none") return { type: "none" };
+	let n = t.match(/^url\("(.*)"\)$/i);
+	if (n) return {
+		type: "url",
+		url: n[1]
+	};
+	let r = t.match(/^url\('(.*)'\)$/i);
+	if (r) return {
+		type: "url",
+		url: r[1]
+	};
+	let i = t.match(/^url\((.*)\)$/i);
+	if (i) return {
+		type: "url",
+		url: i[1]
+	};
+	let a = t.match(/^linear-gradient\(([\s\S]+)\)$/i);
+	if (a) return {
+		type: "linear-gradient",
+		...c(a[1])
+	};
+	let o = t.match(/^radial-gradient\(([\s\S]+)\)$/i);
+	if (o) return {
+		type: "radial-gradient",
+		...l(o[1])
+	};
+	let s = t.match(/^conic-gradient\(([\s\S]+)\)$/i);
+	return s ? {
+		type: "conic-gradient",
+		...u(s[1])
+	} : { type: "none" };
+}
+function f(e) {
+	let n = (e["background-image"] ?? "").trim();
+	if (!n || n === "none") return [];
+	let i = a(n), o = a(e["background-size"] ?? ""), s = a(e["background-position"] ?? ""), c = a(e["background-repeat"] ?? ""), l = a(e["background-attachment"] ?? ""), u = a(e["background-clip"] ?? "");
+	return i.map((e, n) => {
+		let i = d(e), a = (s[n] ?? "").split(" ").filter(Boolean);
+		return {
+			...t,
+			...i,
+			id: r(),
+			size: o[n] ?? t.size,
+			positionX: a.at(0) ?? t.positionX,
+			positionY: a.at(1) ?? a.at(0) ?? t.positionY,
+			repeat: c[n] ?? t.repeat,
+			attachment: l[n] ?? t.attachment,
+			clip: u[n] ?? t.clip
+		};
+	});
+}
+function p(e) {
+	return e.position ? `${e.color} ${e.position}` : e.color;
+}
+function m(e) {
+	switch (e.type) {
+		case "url": return `url("${e.url}")`;
+		case "linear-gradient": {
+			let t = e.stops.map(p).join(", ");
+			return `linear-gradient(${e.angle}, ${t})`;
+		}
+		case "radial-gradient": {
+			let t = e.stops.map(p).join(", "), n = e.radialShape === "ellipse" ? "" : `${e.radialShape} `, r = e.radialExtent === "farthest-corner" ? "" : `${e.radialExtent} `, i = `at ${e.radialPosition}`;
+			return `radial-gradient(${n || r ? `${n}${r}${i}` : i}, ${t})`;
+		}
+		case "conic-gradient": {
+			let t = e.stops.map(p).join(", ");
+			return `conic-gradient(${e.conicAngle === "0deg" ? "" : `from ${e.conicAngle} `}${`at ${e.conicPosition}`}, ${t})`;
+		}
+		default: return "none";
+	}
+}
+function h(e) {
+	return e.length === 0 ? {
+		"background-image": void 0,
+		"background-size": void 0,
+		"background-position": void 0,
+		"background-repeat": void 0,
+		"background-attachment": void 0,
+		"background-clip": void 0
+	} : {
+		"background-image": e.map(m).join(", "),
+		"background-size": e.map((e) => e.size).join(", "),
+		"background-position": e.map((e) => `${e.positionX} ${e.positionY}`).join(", "),
+		"background-repeat": e.map((e) => e.repeat).join(", "),
+		"background-attachment": e.map((e) => e.attachment).join(", "),
+		"background-clip": e.map((e) => e.clip).join(", ")
+	};
+}
+//#endregion
+export { t as DEFAULT_LAYER_PROPS, e as DEFAULT_STOPS, r as newLayerId, i as newStopId, f as parseBackgroundLayers, m as serializeLayerImage, h as serializeLayersToCSS };

package/dist/components/StyleInspector/categories/Background/helpers/normalizeLeft.d.ts

@@ -0,0 +1,2 @@
+declare const normalizeLeft: (left: string, max?: number) => string;
+export default normalizeLeft;

package/dist/components/StyleInspector/categories/Background/helpers/normalizeLeft.mjs

@@ -0,0 +1,10 @@
+//#region src/components/StyleInspector/categories/Background/helpers/normalizeLeft.ts
+var e = (e, t = Infinity) => {
+	if (!e) return "0";
+	let n = e.trim(), r = n.match(/^(-?\d+(\.\d+)?)(%)?([a-zA-Z]+)?$/);
+	if (!r) return n;
+	let i = Number(r[1]), a = !!r[3], o = r[4] || "";
+	return a ? `${Math.min(100, Math.max(0, i))}%` : `${Math.min(typeof t == "number" ? t : Infinity, Math.max(0, i))}${o}`;
+};
+//#endregion
+export { e as default };

package/dist/components/StyleInspector/categories/Background/helpers/parseToBgLayers.d.ts

@@ -0,0 +1,5 @@
+import { BackgroundLayer } from '../helpers/backgroundParser';
+import { StyleValue } from '@plitzi/sdk-shared';
+export type LayerValues = Record<string, StyleValue | undefined>;
+declare const parseToBgLayers: (values: LayerValues) => BackgroundLayer[];
+export default parseToBgLayers;

package/dist/components/StyleInspector/categories/Background/helpers/parseToBgLayers.mjs

@@ -0,0 +1,19 @@
+import { newLayerId as e, newStopId as t, parseBackgroundLayers as n } from "./backgroundParser.mjs";
+//#region src/components/StyleInspector/categories/Background/helpers/parseToBgLayers.ts
+var r = (r) => n({
+	"background-image": r["background-image"],
+	"background-size": r["background-size"],
+	"background-position": r["background-position"],
+	"background-repeat": r["background-repeat"],
+	"background-attachment": r["background-attachment"],
+	"background-clip": r["background-clip"]
+}).map((n) => ({
+	...n,
+	id: e(),
+	stops: n.stops.map((e) => ({
+		...e,
+		id: t()
+	}))
+}));
+//#endregion
+export { r as default };

package/dist/components/StyleInspector/categories/Background/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Background } from './Background';
+export * from './Background';
+export default Background;

package/dist/components/StyleInspector/categories/Background/index.mjs

@@ -0,0 +1,5 @@
+import e from "./Background.mjs";
+//#region src/components/StyleInspector/categories/Background/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/categories/Background/modes/ConicGradientMode.d.ts

@@ -0,0 +1,7 @@
+import { BackgroundLayer } from '../helpers/backgroundParser';
+export type ConicGradientModeProps = {
+    layer: BackgroundLayer;
+    onChange?: (layer: BackgroundLayer) => void;
+};
+declare const ConicGradientMode: ({ layer, onChange }: ConicGradientModeProps) => import("react/jsx-runtime").JSX.Element;
+export default ConicGradientMode;

package/dist/components/StyleInspector/categories/Background/modes/ConicGradientMode.mjs

@@ -0,0 +1,100 @@
+import e from "../../../components/CategoryOption/index.mjs";
+import t from "../../../components/CategorySection/index.mjs";
+import n from "../components/BackgroundPosition/index.mjs";
+import r from "../components/BackgroundSize/index.mjs";
+import i from "../components/BackgroundTile/index.mjs";
+import a from "../components/GradientStopBar/index.mjs";
+import { useCallback as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/modes/ConicGradientMode.tsx
+var u = ({ layer: u, onChange: d }) => {
+	let f = o((e) => d?.({
+		...u,
+		conicAngle: String(e)
+	}), [u, d]), p = o((e) => {
+		let t = u.conicPosition.split(" ");
+		d?.({
+			...u,
+			conicPosition: `${String(e)} ${t[1] ?? "50%"}`
+		});
+	}, [u, d]), m = o((e) => {
+		let t = u.conicPosition.split(" ");
+		d?.({
+			...u,
+			conicPosition: `${t[0] ?? "50%"} ${String(e)}`
+		});
+	}, [u, d]), h = o((e) => d?.({
+		...u,
+		stops: e
+	}), [u, d]);
+	return /* @__PURE__ */ l(s, { children: [
+		/* @__PURE__ */ c(t, {
+			label: "Start Angle",
+			children: /* @__PURE__ */ c(e, {
+				type: "metric",
+				value: u.conicAngle,
+				units: [
+					{
+						label: "deg",
+						value: "deg"
+					},
+					{
+						label: "rad",
+						value: "rad"
+					},
+					{
+						label: "turn",
+						value: "turn"
+					}
+				],
+				min: 0,
+				max: 360,
+				onChange: f
+			})
+		}),
+		/* @__PURE__ */ l(t, {
+			label: "Position",
+			children: [/* @__PURE__ */ c(e, {
+				type: "metric",
+				value: u.conicPosition.split(" ")[0] ?? "50%",
+				allowedWords: [
+					"center",
+					"left",
+					"right"
+				],
+				onChange: p
+			}), /* @__PURE__ */ c(e, {
+				type: "metric",
+				value: u.conicPosition.split(" ")[1] ?? "50%",
+				allowedWords: [
+					"center",
+					"top",
+					"bottom"
+				],
+				onChange: m
+			})]
+		}),
+		/* @__PURE__ */ c(t, {
+			label: "Gradient",
+			direction: "column",
+			children: /* @__PURE__ */ c(a, {
+				stops: u.stops,
+				onChange: h
+			})
+		}),
+		/* @__PURE__ */ c(r, {
+			layer: u,
+			onChange: d
+		}),
+		/* @__PURE__ */ c(n, {
+			layer: u,
+			onChange: d
+		}),
+		/* @__PURE__ */ c(i, {
+			layer: u,
+			onChange: d
+		})
+	] });
+};
+//#endregion
+export { u as default };

package/dist/components/StyleInspector/categories/Background/modes/ImageMode.d.ts

@@ -0,0 +1,7 @@
+import { BackgroundLayer } from '../helpers/backgroundParser';
+export type ImageModeProps = {
+    layer: BackgroundLayer;
+    onChange?: (layer: BackgroundLayer) => void;
+};
+declare const ImageMode: ({ layer, onChange }: ImageModeProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageMode;

package/dist/components/StyleInspector/categories/Background/modes/ImageMode.mjs

@@ -0,0 +1,80 @@
+import e from "../../../components/CategoryOption/index.mjs";
+import t from "../../../components/CategorySection/index.mjs";
+import n from "../components/BackgroundPosition/index.mjs";
+import r from "../components/BackgroundSize/index.mjs";
+import i from "../components/BackgroundTile/index.mjs";
+import { useCallback as a, useMemo as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/modes/ImageMode.tsx
+var u = ({ layer: u, onChange: d }) => {
+	let f = a((e) => d?.({
+		...u,
+		url: String(e)
+	}), [u, d]), p = a((e) => d?.({
+		...u,
+		attachment: String(e)
+	}), [u, d]), m = o(() => [
+		{
+			value: "fixed",
+			icon: /* @__PURE__ */ c("div", {
+				className: "px-1 text-xs select-none",
+				children: "Fixed"
+			}),
+			description: "Fixed to viewport",
+			active: u.attachment === "fixed",
+			size: "custom"
+		},
+		{
+			value: "local",
+			icon: /* @__PURE__ */ c("div", {
+				className: "px-1 text-xs select-none",
+				children: "Local"
+			}),
+			description: "Scrolls with content",
+			active: u.attachment === "local",
+			size: "custom"
+		},
+		{
+			value: "scroll",
+			icon: /* @__PURE__ */ c("div", {
+				className: "px-1 text-xs select-none",
+				children: "Scroll"
+			}),
+			description: "Scrolls with element",
+			active: u.attachment === "scroll",
+			size: "custom"
+		}
+	], [u.attachment]);
+	return /* @__PURE__ */ l(s, { children: [
+		/* @__PURE__ */ c(t, {
+			label: "URL",
+			children: /* @__PURE__ */ c(e, {
+				type: "input",
+				value: u.url,
+				onChange: f
+			})
+		}),
+		/* @__PURE__ */ c(r, {
+			layer: u,
+			onChange: d
+		}),
+		/* @__PURE__ */ c(n, {
+			layer: u,
+			onChange: d
+		}),
+		/* @__PURE__ */ c(i, {
+			layer: u,
+			onChange: d
+		}),
+		/* @__PURE__ */ c(t, {
+			label: "Attachment",
+			children: /* @__PURE__ */ c(e, {
+				type: "iconGroup",
+				items: m,
+				onChange: p
+			})
+		})
+	] });
+};
+//#endregion
+export { u as default };

package/dist/components/StyleInspector/categories/Background/modes/LinearGradientMode.d.ts

@@ -0,0 +1,7 @@
+import { BackgroundLayer } from '../helpers/backgroundParser';
+export type LinearGradientModeProps = {
+    layer: BackgroundLayer;
+    onChange?: (layer: BackgroundLayer) => void;
+};
+declare const LinearGradientMode: ({ layer, onChange }: LinearGradientModeProps) => import("react/jsx-runtime").JSX.Element;
+export default LinearGradientMode;

package/dist/components/StyleInspector/categories/Background/modes/LinearGradientMode.mjs

@@ -0,0 +1,76 @@
+import e from "../../../components/CategoryOption/index.mjs";
+import t from "../../../components/CategorySection/index.mjs";
+import n from "../components/BackgroundPosition/index.mjs";
+import r from "../components/BackgroundSize/index.mjs";
+import i from "../components/BackgroundTile/index.mjs";
+import a from "../components/GradientStopBar/index.mjs";
+import { useCallback as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/modes/LinearGradientMode.tsx
+var u = ({ layer: u, onChange: d }) => {
+	let f = o((e) => d?.({
+		...u,
+		angle: String(e)
+	}), [u, d]), p = o((e) => d?.({
+		...u,
+		stops: e
+	}), [u, d]);
+	return /* @__PURE__ */ l(s, { children: [
+		/* @__PURE__ */ c(t, {
+			label: "Angle",
+			children: /* @__PURE__ */ c(e, {
+				type: "metric",
+				value: u.angle,
+				units: [
+					{
+						label: "deg",
+						value: "deg"
+					},
+					{
+						label: "rad",
+						value: "rad"
+					},
+					{
+						label: "turn",
+						value: "turn"
+					}
+				],
+				allowedWords: [
+					"to top",
+					"to right",
+					"to bottom",
+					"to left",
+					"to top right",
+					"to bottom right",
+					"to bottom left",
+					"to top left"
+				],
+				min: 0,
+				max: 360,
+				onChange: f
+			})
+		}),
+		/* @__PURE__ */ c(t, {
+			label: "Gradient",
+			direction: "column",
+			children: /* @__PURE__ */ c(a, {
+				stops: u.stops,
+				onChange: p
+			})
+		}),
+		/* @__PURE__ */ c(r, {
+			layer: u,
+			onChange: d
+		}),
+		/* @__PURE__ */ c(n, {
+			layer: u,
+			onChange: d
+		}),
+		/* @__PURE__ */ c(i, {
+			layer: u,
+			onChange: d
+		})
+	] });
+};
+//#endregion
+export { u as default };

package/dist/components/StyleInspector/categories/Background/modes/RadialGradientMode.d.ts

@@ -0,0 +1,7 @@
+import { BackgroundLayer } from '../helpers/backgroundParser';
+export type RadialGradientModeProps = {
+    layer: BackgroundLayer;
+    onChange?: (layer: BackgroundLayer) => void;
+};
+declare const RadialGradientMode: ({ layer, onChange }: RadialGradientModeProps) => import("react/jsx-runtime").JSX.Element;
+export default RadialGradientMode;

package/dist/components/StyleInspector/categories/Background/modes/RadialGradientMode.mjs

@@ -0,0 +1,120 @@
+import e from "../../../components/CategoryOption/index.mjs";
+import t from "../../../components/CategorySection/index.mjs";
+import n from "../components/BackgroundPosition/index.mjs";
+import r from "../components/BackgroundSize/index.mjs";
+import i from "../components/BackgroundTile/index.mjs";
+import a from "../components/GradientStopBar/index.mjs";
+import { useCallback as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/modes/RadialGradientMode.tsx
+var u = ({ layer: u, onChange: d }) => {
+	let f = o((e) => d?.({
+		...u,
+		radialShape: e
+	}), [u, d]), p = o((e) => d?.({
+		...u,
+		radialExtent: String(e)
+	}), [u, d]), m = o((e) => {
+		let t = u.radialPosition.split(" ");
+		d?.({
+			...u,
+			radialPosition: `${String(e)} ${t[1] ?? "50%"}`
+		});
+	}, [u, d]), h = o((e) => {
+		let t = u.radialPosition.split(" ");
+		d?.({
+			...u,
+			radialPosition: `${t[0] ?? "50%"} ${String(e)}`
+		});
+	}, [u, d]), g = o((e) => d?.({
+		...u,
+		stops: e
+	}), [u, d]);
+	return /* @__PURE__ */ l(s, { children: [
+		/* @__PURE__ */ c(t, {
+			label: "Shape",
+			children: /* @__PURE__ */ l(e, {
+				type: "select",
+				value: u.radialShape,
+				onChange: f,
+				children: [/* @__PURE__ */ c("option", {
+					value: "ellipse",
+					children: "Ellipse"
+				}), /* @__PURE__ */ c("option", {
+					value: "circle",
+					children: "Circle"
+				})]
+			})
+		}),
+		/* @__PURE__ */ c(t, {
+			label: "Size",
+			children: /* @__PURE__ */ l(e, {
+				type: "select",
+				value: u.radialExtent,
+				onChange: p,
+				children: [
+					/* @__PURE__ */ c("option", {
+						value: "farthest-corner",
+						children: "Farthest Corner"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "farthest-side",
+						children: "Farthest Side"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "closest-corner",
+						children: "Closest Corner"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "closest-side",
+						children: "Closest Side"
+					})
+				]
+			})
+		}),
+		/* @__PURE__ */ l(t, {
+			label: "Position",
+			children: [/* @__PURE__ */ c(e, {
+				type: "metric",
+				value: u.radialPosition.split(" ")[0] ?? "50%",
+				allowedWords: [
+					"center",
+					"left",
+					"right"
+				],
+				onChange: m
+			}), /* @__PURE__ */ c(e, {
+				type: "metric",
+				value: u.radialPosition.split(" ")[1] ?? "50%",
+				allowedWords: [
+					"center",
+					"top",
+					"bottom"
+				],
+				onChange: h
+			})]
+		}),
+		/* @__PURE__ */ c(t, {
+			label: "Gradient",
+			direction: "column",
+			children: /* @__PURE__ */ c(a, {
+				stops: u.stops,
+				onChange: g
+			})
+		}),
+		/* @__PURE__ */ c(r, {
+			layer: u,
+			onChange: d
+		}),
+		/* @__PURE__ */ c(n, {
+			layer: u,
+			onChange: d
+		}),
+		/* @__PURE__ */ c(i, {
+			layer: u,
+			onChange: d
+		})
+	] });
+};
+//#endregion
+export { u as default };

package/dist/components/StyleInspector/categories/Border/Border.d.ts

@@ -0,0 +1,7 @@
+export type BorderProps = {
+    replaceTokens?: boolean;
+    isCollapsed?: boolean;
+    onCollapse?: (category: string, isCollapsed: boolean) => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: BorderProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;