@plitzi/sdk-style 0.38.10 → 0.38.11

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

@@ -1,40 +1,24 @@
 import e from "../../StyleInspectorContext.mjs";
 import t from "../../hooks/useInspectorValues.mjs";
-import n from "../../components/InspectorLabel/index.mjs";
-import r from "../../components/CategoryOption/index.mjs";
-import i from "../../components/CategorySection/index.mjs";
-import { DEFAULT_LAYER_PROPS as a, DEFAULT_STOPS as o, newLayerId as s, newStopId as c, serializeLayersToCSS as l } from "./helpers/backgroundParser.mjs";
-import u from "./components/BackgroundLayer/index.mjs";
+import n from "../../components/CategoryOption/index.mjs";
+import r from "../../components/CategorySection/index.mjs";
+import { DEFAULT_LAYER_PROPS as i, DEFAULT_STOPS as a, newLayerId as o, newStopId as s, serializeLayersToCSS as c } from "./helpers/backgroundParser.mjs";
+import l from "./components/BackgroundLayer/index.mjs";
+import { BACKGROUND_KEYS as u } from "../../categoryKeys.mjs";
 import d from "../../components/CategoryAdvanced/index.mjs";
 import f from "../../components/CategoryContainer/index.mjs";
-import p from "./helpers/parseToBgLayers.mjs";
-import { memo as m, use as h, useCallback as g, useRef as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import x from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
+import { BG_LAYER_KEYS as p, layerValuesKey as m } from "./helpers/layerValues.mjs";
+import h from "./helpers/parseToBgLayers.mjs";
+import g from "../../components/ValueList/index.mjs";
+import { memo as _, use as v, useCallback as y, useRef as b, useState as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import w from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
 //#region src/components/StyleInspector/categories/Background/Background.tsx
-var S = [
-	"background-color",
-	"background-image",
-	"background-attachment",
-	"background-position",
-	"background-repeat",
-	"background-clip",
-	"background-size",
-	"background-blend-mode",
-	"mask-image"
-], C = [
-	"background-image",
-	"background-size",
-	"background-position",
-	"background-repeat",
-	"background-attachment",
-	"background-clip"
-], w = ["background-blend-mode", "mask-image"], T = (e) => C.map((t) => String(e[t])).join("||"), E = m(({ replaceTokens: m = !1, isCollapsed: E = !0, onCollapse: D }) => {
-	let { setValue: O } = h(e), k = t({
-		keys: C,
+var T = ["background-color"], E = _(({ replaceTokens: _ = !1, isCollapsed: E = !0, onCollapse: D }) => {
+	let { setValue: O } = v(e), k = t({
+		keys: p,
 		asValue: !0,
-		strictMode: !0,
-		replaceTokens: m
+		strictMode: !0
 	}), { "background-color": A, "background-blend-mode": j, "mask-image": M } = t({
 		keys: [
 			"background-color",
@@ -42,174 +26,158 @@ var S = [
 			"mask-image"
 		],
 		asValue: !0,
-		replaceTokens: m
-	}), N = T(k), P = _(k);
+		replaceTokens: _
+	}), N = m(k), P = b(k);
 	P.current = k;
-	let F = _(null), [I, L] = v(() => p(k));
-	x(() => {
-		N !== F.current && (L(p(P.current)), F.current = N);
+	let F = b(null), [I, L] = x(() => h(k));
+	w(() => {
+		N !== F.current && (L(h(P.current)), F.current = N);
 	}, [N]);
-	let [R, z] = v(null), B = g((e) => z((t) => t === e ? null : e), []), V = g((e) => {
-		let t = l(e);
-		F.current = T(t), L(e), O(void 0, t);
-	}, [O]), H = g((e, t) => {
+	let [R, z] = x(null), B = y((e) => z((t) => t === e ? null : e), []), V = y((e) => {
+		let t = c(e);
+		F.current = m(t), L(e), O(void 0, t);
+	}, [O]), H = y((e, t) => {
 		if (e === t) return;
 		let n = [...I], [r] = n.splice(e, 1);
 		n.splice(t, 0, r), V(n);
-	}, [I, V]), U = g((e) => (t) => {
+	}, [I, V]), U = y((e) => (t) => {
 		V(I.map((n, r) => r === e ? t : n));
-	}, [I, V]), W = g(() => {
-		let e = s(), t = {
-			...a,
+	}, [I, V]), W = y(() => {
+		let e = o(), t = {
+			...i,
 			id: e,
 			type: "linear-gradient",
 			stops: [{
-				id: c(),
-				color: o[0].color,
+				id: s(),
+				color: a[0].color,
 				position: "0%"
 			}, {
-				id: c(),
-				color: o[1].color,
+				id: s(),
+				color: a[1].color,
 				position: "100%"
 			}]
 		};
 		z(e), V([...I, t]);
-	}, [I, V]), G = g((e) => () => {
+	}, [I, V]), G = y((e) => () => {
 		V(I.filter((t, n) => n !== e));
-	}, [I, V]), K = g((e) => {
+	}, [I, V]), K = y((e) => {
 		O("background-color", e);
-	}, [O]), q = g((e) => {
+	}, [O]), q = y((e) => {
 		O("background-blend-mode", e);
-	}, [O]), J = g((e) => {
+	}, [O]), J = y((e) => {
 		O("mask-image", e);
-	}, [O]), Y = g((e) => D?.("background", e), [D]);
-	return /* @__PURE__ */ y(f, {
-		title: "Background",
-		dotKeys: S,
-		advancedKeys: w,
+	}, [O]), Y = y((e) => D?.("background", e), [D]);
+	return /* @__PURE__ */ S(f, {
+		title: u.title,
+		dotKeys: u.dot,
+		advancedKeys: u.advanced,
 		isCollapsed: E,
 		onCollapse: Y,
-		children: /* @__PURE__ */ b("div", {
+		children: /* @__PURE__ */ C("div", {
 			className: "flex flex-col gap-2",
 			children: [
-				/* @__PURE__ */ b("div", {
-					className: "flex flex-col gap-1",
-					children: [
-						/* @__PURE__ */ b("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ y(n, {
-								keyValue: C,
-								children: "Layers"
-							}), /* @__PURE__ */ b("button", {
-								type: "button",
-								className: "flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-xs text-blue-500 hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-900/30",
-								onClick: W,
-								title: "Add background layer",
-								children: [/* @__PURE__ */ y("i", { className: "fas fa-plus text-[10px]" }), "Add"]
-							})]
-						}),
-						!I.length && /* @__PURE__ */ y("div", {
-							className: "rounded border border-dashed border-gray-300 py-3 text-center text-xs text-gray-400 dark:border-zinc-600 dark:text-zinc-500",
-							children: "No layers — click Add to start"
-						}),
-						I.length > 0 && /* @__PURE__ */ y("div", {
-							className: "flex flex-col gap-1",
-							children: I.map((e, t) => /* @__PURE__ */ y(u, {
-								index: t,
-								layer: e,
-								expanded: R === e.id,
-								onExpand: B,
-								onChange: U(t),
-								onRemove: G(t),
-								onReorder: H
-							}, e.id))
-						})
-					]
+				/* @__PURE__ */ C(g, {
+					label: "Layers",
+					keys: p,
+					addLabel: "Add a layer — the first one is drawn on top",
+					onAdd: W,
+					children: [!I.length && /* @__PURE__ */ S("p", {
+						className: "m-0 rounded-md border border-dashed border-gray-300 px-3 py-2.5 text-center text-xs text-zinc-500 dark:border-zinc-700 dark:text-zinc-400",
+						children: "No layers. Add one for a gradient or an image."
+					}), I.length > 0 && I.map((e, t) => /* @__PURE__ */ S(l, {
+						index: t,
+						layer: e,
+						expanded: R === e.id,
+						onExpand: B,
+						onChange: U(t),
+						onRemove: G(t),
+						onReorder: H
+					}, e.id))]
 				}),
-				/* @__PURE__ */ y(i, {
-					label: "Base Color",
-					keys: ["background-color"],
-					children: /* @__PURE__ */ y(r, {
+				/* @__PURE__ */ S(r, {
+					label: "Color",
+					keys: T,
+					children: /* @__PURE__ */ S(n, {
 						type: "color",
 						value: A,
 						onChange: K
 					})
 				}),
-				/* @__PURE__ */ y(d, { children: /* @__PURE__ */ b(i, {
+				/* @__PURE__ */ S(d, { children: /* @__PURE__ */ C(r, {
 					label: "",
-					children: [/* @__PURE__ */ b(r, {
+					children: [/* @__PURE__ */ C(n, {
 						keys: ["background-blend-mode"],
 						label: "Blend",
 						value: j,
 						onChange: q,
 						type: "select",
 						children: [
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "normal",
 								children: "Normal"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "multiply",
 								children: "Multiply"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "screen",
 								children: "Screen"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "overlay",
 								children: "Overlay"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "darken",
 								children: "Darken"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "lighten",
 								children: "Lighten"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "color-dodge",
 								children: "Color Dodge"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "color-burn",
 								children: "Color Burn"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "hard-light",
 								children: "Hard Light"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "soft-light",
 								children: "Soft Light"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "difference",
 								children: "Difference"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "exclusion",
 								children: "Exclusion"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "hue",
 								children: "Hue"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "saturation",
 								children: "Saturation"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "color",
 								children: "Color"
 							}),
-							/* @__PURE__ */ y("option", {
+							/* @__PURE__ */ S("option", {
 								value: "luminosity",
 								children: "Luminosity"
 							})
 						]
-					}), /* @__PURE__ */ y(r, {
+					}), /* @__PURE__ */ S(n, {
 						keys: ["mask-image"],
 						label: "Mask",
 						value: M,

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

@@ -0,0 +1,8 @@
+import { BackgroundLayer } from '../../helpers/backgroundParser';
+export type BackgroundAttachmentProps = {
+    layer: BackgroundLayer;
+    onChange?: (layer: BackgroundLayer) => void;
+};
+/** Whether the layer scrolls with the element, with its content, or stays put while the page moves under it. */
+declare const BackgroundAttachment: ({ layer, onChange }: BackgroundAttachmentProps) => import('react').JSX.Element;
+export default BackgroundAttachment;

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

@@ -0,0 +1,53 @@
+import { asText as e } from "../../../../cssValues.mjs";
+import t from "../../../../components/CategoryOption/index.mjs";
+import n from "../../../../components/CategorySection/index.mjs";
+import { useCallback as r, useMemo as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/components/BackgroundAttachment/BackgroundAttachment.tsx
+var o = ({ layer: o, onChange: s }) => {
+	let c = i(() => [
+		{
+			value: "scroll",
+			icon: /* @__PURE__ */ a("span", {
+				className: "px-1.5 text-xs select-none",
+				children: "Scroll"
+			}),
+			description: "Scrolls with the element",
+			active: o.attachment === "scroll",
+			size: "custom"
+		},
+		{
+			value: "local",
+			icon: /* @__PURE__ */ a("span", {
+				className: "px-1.5 text-xs select-none",
+				children: "Local"
+			}),
+			description: "Scrolls with the element’s content",
+			active: o.attachment === "local",
+			size: "custom"
+		},
+		{
+			value: "fixed",
+			icon: /* @__PURE__ */ a("span", {
+				className: "px-1.5 text-xs select-none",
+				children: "Fixed"
+			}),
+			description: "Stays put while the page scrolls",
+			active: o.attachment === "fixed",
+			size: "custom"
+		}
+	], [o.attachment]), l = r((t) => s?.({
+		...o,
+		attachment: e(t)
+	}), [o, s]);
+	return /* @__PURE__ */ a(n, {
+		label: "Attachment",
+		children: /* @__PURE__ */ a(t, {
+			type: "iconGroup",
+			items: c,
+			onChange: l
+		})
+	});
+};
+//#endregion
+export { o as default };

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

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

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

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