@plitzi/sdk-style 0.38.9 → 0.38.11

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

@@ -2,189 +2,179 @@ import e from "../../StyleInspectorContext.mjs";
 import t from "../../hooks/useInspectorValues.mjs";
 import n from "../../components/CategoryOption/index.mjs";
 import r from "../../components/CategorySection/index.mjs";
-import i from "../../components/CategoryAdvanced/index.mjs";
-import a from "../../components/CategoryContainer/index.mjs";
-import ee from "./TypographyAlign.mjs";
-import o from "./TypographyBreaking.mjs";
-import s from "./TypographyClamp.mjs";
-import { weights as c } from "./TypographyConstants.mjs";
-import l from "./TypographyFigures.mjs";
-import u from "../../../../hooks/useSpaceFonts.mjs";
-import d from "./TypographyFont.mjs";
-import f from "./TypographyStyle.mjs";
-import p from "./TypographyTextShadow.mjs";
-import m from "./TypographyTransform.mjs";
-import { memo as h, use as g, useCallback as _ } from "react";
-import { primaryFamily as v } from "@plitzi/sdk-shared/style";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { TYPOGRAPHY_KEYS as i } from "../../categoryKeys.mjs";
+import a from "../../components/CategoryAdvanced/index.mjs";
+import o from "../../components/CategoryContainer/index.mjs";
+import s from "./TypographyAlign.mjs";
+import c from "./TypographyBreaking.mjs";
+import ee from "./TypographyClamp.mjs";
+import { weights as l } from "./TypographyConstants.mjs";
+import u from "./TypographyFigures.mjs";
+import d from "../../../../hooks/useSpaceFonts.mjs";
+import f from "./TypographyFont.mjs";
+import p from "./TypographyStyle.mjs";
+import m from "./TypographyTextShadow.mjs";
+import h from "./TypographyTransform.mjs";
+import { memo as g, use as _, useCallback as v } from "react";
+import { primaryFamily as y } from "@plitzi/sdk-shared/style";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Typography/Typography.tsx
-var x = /* @__PURE__ */ "font-family.font-weight.font-size.line-height.color.text-align.font-style.text-decoration.text-decoration-thickness.text-underline-offset.letter-spacing.word-spacing.text-indent.text-transform.direction.text-shadow.white-space.text-wrap.word-break.overflow-wrap.hyphens.vertical-align.text-overflow.line-clamp.font-variant-numeric.font-feature-settings.-webkit-text-fill-color".split("."), S = [
-	"text-decoration-thickness",
-	"text-underline-offset",
-	"word-break",
-	"overflow-wrap",
-	"hyphens",
-	"vertical-align",
-	"text-shadow",
-	"font-variant-numeric",
-	"font-feature-settings",
-	"-webkit-text-fill-color"
-], C = [
+var S = [
 	"letter-spacing",
 	"word-spacing",
 	"text-indent"
-], w = h(({ replaceTokens: h = !1, isCollapsed: w = !0, onCollapse: T }) => {
-	let E = u(), { setValue: D } = g(e), { "font-family": O, "font-weight": k, "font-size": A, "font-style": j, "text-align": M, "text-decoration": N, "text-decoration-thickness": P, "text-underline-offset": te, "text-indent": F, "text-transform": I, "text-shadow": L, "white-space": R, "text-wrap": z, "word-break": B, "overflow-wrap": V, hyphens: H, "vertical-align": U, "text-overflow": W, "line-clamp": G, "line-height": K, color: q, "letter-spacing": J, "word-spacing": Y, direction: X, "font-variant-numeric": Z, "font-feature-settings": Q, "-webkit-text-fill-color": ne } = t({
-		keys: x,
+], C = g(({ replaceTokens: g = !1, isCollapsed: C = !0, onCollapse: w }) => {
+	let T = d(), { setValue: E } = _(e), { "font-family": D, "font-weight": O, "font-size": k, "font-style": A, "text-align": j, "text-decoration": M, "text-decoration-thickness": N, "text-underline-offset": P, "text-indent": te, "text-transform": F, "text-shadow": I, "white-space": L, "text-wrap": R, "word-break": z, "overflow-wrap": B, hyphens: V, "vertical-align": H, "text-overflow": U, "line-clamp": W, "line-height": G, color: K, "letter-spacing": q, "word-spacing": J, direction: Y, "font-variant-numeric": X, "font-feature-settings": Z, "-webkit-text-fill-color": Q } = t({
+		keys: i.dot,
 		asValue: !0,
-		replaceTokens: h
-	}), re = _((e) => T?.("typography", e), [T]), ie = E.find((e) => e.family === v(typeof O == "string" ? O : "")), $ = _((e) => (t) => D(e, t), [D]), ae = _((e) => D(void 0, e), [D]);
-	return /* @__PURE__ */ b(a, {
-		title: "Typography",
-		dotKeys: x,
-		advancedKeys: S,
-		isCollapsed: w,
-		onCollapse: re,
+		replaceTokens: g
+	}), ne = v((e) => w?.("typography", e), [w]), re = T.find((e) => e.family === y(typeof D == "string" ? D : "")), $ = v((e) => (t) => E(e, t), [E]), ie = v((e) => E(void 0, e), [E]);
+	return /* @__PURE__ */ x(o, {
+		title: i.title,
+		dotKeys: i.dot,
+		advancedKeys: i.advanced,
+		isCollapsed: C,
+		onCollapse: ne,
 		children: [
-			/* @__PURE__ */ y(ee, {
-				partialValue: M,
+			/* @__PURE__ */ b(s, {
+				partialValue: j,
 				onChange: $("text-align")
 			}),
-			/* @__PURE__ */ y(d, {
-				partialValue: O,
+			/* @__PURE__ */ b(f, {
+				partialValue: D,
 				onChange: $("font-family")
 			}),
-			/* @__PURE__ */ b(r, {
+			/* @__PURE__ */ x(r, {
 				label: "",
-				children: [/* @__PURE__ */ y(n, {
+				children: [/* @__PURE__ */ b(n, {
 					keys: ["font-weight"],
 					label: "Weight",
-					value: k,
+					value: O,
 					onChange: $("font-weight"),
 					type: "select",
-					children: Object.keys(c).map((e) => /* @__PURE__ */ y("option", {
+					children: Object.keys(l).map((e) => /* @__PURE__ */ b("option", {
 						value: e,
-						disabled: !ie?.weights.includes(Number(e)),
-						children: c[Number(e)]
+						disabled: !re?.weights.includes(Number(e)),
+						children: l[Number(e)]
 					}, e))
-				}), /* @__PURE__ */ y(n, {
+				}), /* @__PURE__ */ b(n, {
 					keys: ["color"],
 					label: "Color",
 					type: "color",
-					value: q,
+					value: K,
 					onChange: $("color")
 				})]
 			}),
-			/* @__PURE__ */ b(r, {
+			/* @__PURE__ */ x(r, {
 				label: "",
-				children: [/* @__PURE__ */ y(n, {
+				children: [/* @__PURE__ */ b(n, {
 					keys: ["font-size"],
 					label: "Size",
-					value: A,
+					value: k,
 					onChange: $("font-size"),
 					type: "metric"
-				}), /* @__PURE__ */ y(n, {
+				}), /* @__PURE__ */ b(n, {
 					keys: ["line-height"],
 					label: "Line Height",
-					value: K,
+					value: G,
 					onChange: $("line-height"),
 					type: "metric"
 				})]
 			}),
-			/* @__PURE__ */ y(f, {
-				fontStyle: j,
-				textDecoration: N,
-				textDecorationThickness: P,
-				textUnderlineOffset: te,
+			/* @__PURE__ */ b(p, {
+				fontStyle: A,
+				textDecoration: M,
+				textDecorationThickness: N,
+				textUnderlineOffset: P,
 				onChange: $
 			}),
-			/* @__PURE__ */ b(r, {
-				label: "Letter",
-				keys: C,
+			/* @__PURE__ */ x(r, {
+				label: "Spacing",
+				keys: S,
 				children: [
-					/* @__PURE__ */ y(n, {
+					/* @__PURE__ */ b(n, {
 						keys: ["letter-spacing"],
-						label: "Spacing",
-						value: J,
+						label: "Letter",
+						value: q,
 						onChange: $("letter-spacing"),
 						type: "metric"
 					}),
-					/* @__PURE__ */ y(n, {
+					/* @__PURE__ */ b(n, {
 						keys: ["word-spacing"],
 						label: "Word",
-						value: Y,
+						value: J,
 						onChange: $("word-spacing"),
 						type: "metric"
 					}),
-					/* @__PURE__ */ y(n, {
+					/* @__PURE__ */ b(n, {
 						keys: ["text-indent"],
 						label: "Indent",
-						value: F,
+						value: te,
 						onChange: $("text-indent"),
 						type: "metric"
 					})
 				]
 			}),
-			/* @__PURE__ */ y(m, {
-				textTransform: I,
-				direction: X,
+			/* @__PURE__ */ b(h, {
+				textTransform: F,
+				direction: Y,
 				onChange: $
 			}),
-			/* @__PURE__ */ y(o, {
-				whiteSpace: R,
-				textWrap: z,
-				wordBreak: B,
-				overflowWrap: V,
-				hyphens: H,
-				verticalAlign: U,
+			/* @__PURE__ */ b(c, {
+				whiteSpace: L,
+				textWrap: R,
+				wordBreak: z,
+				overflowWrap: B,
+				hyphens: V,
+				verticalAlign: H,
 				onChange: $
 			}),
-			/* @__PURE__ */ b(r, {
+			/* @__PURE__ */ x(r, {
 				label: "",
-				children: [/* @__PURE__ */ b(n, {
+				children: [/* @__PURE__ */ x(n, {
 					keys: ["text-overflow"],
 					label: "Overflow",
-					value: W,
+					value: U,
 					onChange: $("text-overflow"),
 					type: "select",
 					children: [
-						/* @__PURE__ */ y("option", {
+						/* @__PURE__ */ b("option", {
 							value: "clip",
 							children: "Clip"
 						}),
-						/* @__PURE__ */ y("option", {
+						/* @__PURE__ */ b("option", {
 							value: "ellipsis",
 							children: "Ellipsis"
 						}),
-						/* @__PURE__ */ y("option", {
+						/* @__PURE__ */ b("option", {
 							value: "string",
 							children: "String"
 						}),
-						/* @__PURE__ */ y("option", {
+						/* @__PURE__ */ b("option", {
 							value: "initial",
 							children: "Initial"
 						}),
-						/* @__PURE__ */ y("option", {
+						/* @__PURE__ */ b("option", {
 							value: "inherit",
 							children: "Inherit"
 						})
 					]
-				}), /* @__PURE__ */ y(s, {
-					value: G,
-					onChange: ae
+				}), /* @__PURE__ */ b(ee, {
+					value: W,
+					onChange: ie
 				})]
 			}),
-			/* @__PURE__ */ b(i, { children: [/* @__PURE__ */ y(p, {
-				value: L,
+			/* @__PURE__ */ x(a, { children: [/* @__PURE__ */ b(m, {
+				value: I,
 				onChange: $("text-shadow")
-			}), /* @__PURE__ */ y(l, {
-				fontVariantNumeric: Z,
-				fontFeatureSettings: Q,
-				textFillColor: ne,
+			}), /* @__PURE__ */ b(u, {
+				fontVariantNumeric: X,
+				fontFeatureSettings: Z,
+				textFillColor: Q,
 				onChange: $
 			})] })
 		]
 	});
 });
 //#endregion
-export { w as default };
+export { C as default };

package/dist/components/StyleInspector/categories/Typography/TypographyFont.mjs

@@ -11,7 +11,7 @@ var s = ({ partialValue: s, onChange: c }) => {
 		c?.(t ? i(t) : e);
 	}, [l, c]);
 	return /* @__PURE__ */ o(t, {
-		label: "F. Family",
+		label: "Font",
 		keys: ["font-family"],
 		children: /* @__PURE__ */ o(e, {
 			value: u,

package/dist/components/StyleInspector/categories/Typography/TypographyStyle.mjs

@@ -47,7 +47,7 @@ var l = ({ fontStyle: l, textDecoration: u, textDecorationThickness: d, textUnde
 		label: "",
 		children: [/* @__PURE__ */ a(e, {
 			keys: ["font-style"],
-			label: "Italicize",
+			label: "Style",
 			onChange: p?.("font-style"),
 			type: "iconGroup",
 			items: m

package/dist/components/StyleInspector/categories/Typography/TypographyTextShadow.mjs

@@ -1,43 +1,30 @@
-import e from "../../components/InspectorLabel/index.mjs";
-import t from "../../components/CategorySection/index.mjs";
-import n from "./TypographyTextShadowItem.mjs";
-import { useCallback as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { splitByCommaOutsideParens as e } from "../../cssValues.mjs";
+import t from "../../components/ValueList/index.mjs";
+import { DEFAULT_SHADOW as n, serializeShadow as r } from "../../shadowValue.mjs";
+import i from "../../components/ShadowItem/index.mjs";
+import { useCallback as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Typography/TypographyTextShadow.tsx
-var o = ({ value: o, onChange: s }) => {
-	let c = r((e) => (t) => {
-		t.stopPropagation(), t.preventDefault();
-		let n = o.split(",").toSpliced(e, 1);
-		s?.(n.length > 0 ? n.join(",") : "");
-	}, [s, o]), l = r((e) => (t) => {
-		let n = o.split(",");
-		n[e] = t, s?.(n.join(","));
-	}, [s, o]), u = r(() => {
-		let e = o === "" ? [] : o.split(",");
-		e.push("2px 2px 5px black"), s?.(e.join(","));
-	}, [s, o]), d = [];
-	return o !== "" && (d = o.split(",")), /* @__PURE__ */ a(t, {
-		direction: "column",
-		children: [/* @__PURE__ */ a("div", {
-			className: "flex w-full justify-between",
-			children: [/* @__PURE__ */ i(e, {
-				keyValue: ["text-shadow"],
-				children: "Text Shadow"
-			}), /* @__PURE__ */ i("button", {
-				className: "cursor-pointer",
-				type: "button",
-				onClick: u,
-				children: /* @__PURE__ */ i("i", { className: "fas fa-plus" })
-			})]
-		}), d.length > 0 && /* @__PURE__ */ i("div", {
-			className: "mt-1",
-			children: d.map((e, t) => /* @__PURE__ */ i(n, {
-				value: e,
-				onChange: l(t),
-				onRemove: c(t)
-			}, t))
-		})]
+var s = ["text-shadow"], c = ({ value: c, onChange: l }) => {
+	let u = typeof c == "string" && c !== "" ? e(c).map((e) => e.trim()) : [], d = a((e) => l?.(e.length > 0 ? e.join(", ") : ""), [l]), f = (e) => () => d(u.filter((t, n) => n !== e)), p = (e) => (t) => {
+		t !== u[e] && d(u.map((n, r) => r === e ? t : n));
+	};
+	return /* @__PURE__ */ o(t, {
+		label: "Text Shadow",
+		keys: s,
+		addLabel: "Add text shadow",
+		onAdd: () => d([...u, r({
+			...n,
+			y: "1px",
+			blur: "2px"
+		}, { withSpread: !1 })]),
+		children: u.length > 0 && u.map((e, t) => /* @__PURE__ */ o(i, {
+			value: e,
+			withSpread: !1,
+			onChange: p(t),
+			onRemove: f(t)
+		}, t))
 	});
 };
 //#endregion
-export { o as default };
+export { c as default };

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

@@ -1,55 +1,56 @@
 import e from "../../StyleInspectorContext.mjs";
-import t from "../../components/CategoryContainer/index.mjs";
-import { use as n, useCallback as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import o, { useModal as s } from "@plitzi/plitzi-ui/Modal";
-import c from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
-import { useToast as l } from "@plitzi/plitzi-ui/Toast";
-import u from "@plitzi/sdk-variables/components/StyleVariables";
+import { VARIABLES_KEYS as t } from "../../categoryKeys.mjs";
+import n from "../../components/CategoryContainer/index.mjs";
+import { use as r, useCallback as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s, { useModal as c } from "@plitzi/plitzi-ui/Modal";
+import l from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+import { useToast as u } from "@plitzi/plitzi-ui/Toast";
+import d from "@plitzi/sdk-variables/components/StyleVariables";
 //#region src/components/StyleInspector/categories/Variables/Variables.tsx
-var d = ({ isCollapsed: d, onCollapse: f }) => {
-	let { displayMode: p, selector: m } = n(e), { builderHandler: h } = n(c), { showDialog: g } = s(), { addToast: _ } = l(), v = r((e) => f?.("variables", e), [f]), y = r((e) => {
-		if (!m) return;
+var f = ({ isCollapsed: f, onCollapse: p }) => {
+	let { displayMode: m, selector: h } = r(e), { builderHandler: g } = r(l), { showDialog: _ } = c(), { addToast: v } = u(), y = i((e) => p?.("variables", e), [p]), b = i((e) => {
+		if (!h) return;
 		let { name: t, category: n, value: r } = e;
-		m.variables?.[n]?.[t] ? _(/* @__PURE__ */ a("span", { children: [
+		h.variables?.[n]?.[t] ? v(/* @__PURE__ */ o("span", { children: [
 			"Variable with the name ",
-			/* @__PURE__ */ i("b", { children: t }),
+			/* @__PURE__ */ a("b", { children: t }),
 			" already exists"
 		] }), {
 			appeareance: "warning",
 			autoDismiss: !0,
 			placement: "top-right"
-		}) : h("styleAddSelectorVariable", p, m.name, n, t, r);
+		}) : g("styleAddSelectorVariable", m, h.name, n, t, r);
 	}, [
-		_,
-		h,
-		p,
-		m
-	]), b = r((e) => {
-		m && h("styleUpdateSelectorVariable", p, m.name, e.category, e.name, e.value);
+		v,
+		g,
+		m,
+		h
+	]), x = i((e) => {
+		h && g("styleUpdateSelectorVariable", m, h.name, e.category, e.name, e.value);
 	}, [
-		h,
-		p,
-		m
-	]), x = r(async (e, t) => {
-		m && await g(/* @__PURE__ */ i(o.Header, { children: /* @__PURE__ */ i("h4", { children: "Remove Style Variable" }) }), /* @__PURE__ */ i(o.Body, { children: /* @__PURE__ */ i("h4", { children: "Do you want to remove this item ?" }) }), void 0, { size: "sm" }, t) && h("styleRemoveSelectorVariable", p, m.name, e, t);
+		g,
+		m,
+		h
+	]), S = i(async (e, t) => {
+		h && await _(/* @__PURE__ */ a(s.Header, { children: /* @__PURE__ */ a("h4", { children: "Remove Style Variable" }) }), /* @__PURE__ */ a(s.Body, { children: /* @__PURE__ */ a("h4", { children: "Do you want to remove this item ?" }) }), void 0, { size: "sm" }, t) && g("styleRemoveSelectorVariable", m, h.name, e, t);
 	}, [
-		h,
-		p,
+		g,
 		m,
-		g
+		h,
+		_
 	]);
-	if (m) return /* @__PURE__ */ i(t, {
-		title: "Variables",
-		isCollapsed: d,
-		onCollapse: v,
-		children: /* @__PURE__ */ i(u, {
-			variables: m.variables,
-			onAdd: y,
-			onUpdate: b,
-			onRemove: x
+	if (h) return /* @__PURE__ */ a(n, {
+		title: t.title,
+		isCollapsed: f,
+		onCollapse: y,
+		children: /* @__PURE__ */ a(d, {
+			variables: h.variables,
+			onAdd: b,
+			onUpdate: x,
+			onRemove: S
 		})
 	});
 };
 //#endregion
-export { d as default };
+export { f as default };

package/dist/components/StyleInspector/categoryKeys.d.ts

@@ -0,0 +1,45 @@
+import { StyleCategory } from '@plitzi/sdk-shared';
+/**
+ * The properties each category of the inspector edits, in one place: the category reads them to tell what is set (the
+ * dots in its header, the hint on its advanced toggle), and the inspector's search reads them to find which category
+ * holds the property a person typed. `advanced` are the ones behind the category's sliders toggle.
+ */
+export type CategoryKeys = {
+    title: string;
+    dot: StyleCategory[];
+    advanced: StyleCategory[];
+};
+export declare const LIST_KEYS: CategoryKeys;
+export declare const LIST_ITEM_KEYS: CategoryKeys;
+export declare const DISPLAY_KEYS: CategoryKeys;
+export declare const FLEX_CHILD_KEYS: CategoryKeys;
+export declare const SPACING_KEYS: CategoryKeys;
+export declare const SIZE_KEYS: CategoryKeys;
+export declare const POSITION_KEYS: CategoryKeys;
+export declare const TYPOGRAPHY_KEYS: CategoryKeys;
+export declare const BACKGROUND_KEYS: CategoryKeys;
+export declare const BORDER_KEYS: CategoryKeys;
+export declare const EFFECTS_KEYS: CategoryKeys;
+export declare const OTHERS_KEYS: CategoryKeys;
+/** The categories with no properties of their own to search by — found by their title alone. */
+export declare const VARIABLES_KEYS: CategoryKeys;
+export declare const RAW_STYLE_KEYS: CategoryKeys;
+/** Every category, by the id its collapsed state is stored under, in the order the inspector draws them. */
+export declare const CATEGORY_KEYS: {
+    readonly list: CategoryKeys;
+    readonly listItem: CategoryKeys;
+    readonly display: CategoryKeys;
+    readonly displayFlexChild: CategoryKeys;
+    readonly spacing: CategoryKeys;
+    readonly size: CategoryKeys;
+    readonly position: CategoryKeys;
+    readonly typography: CategoryKeys;
+    readonly background: CategoryKeys;
+    readonly border: CategoryKeys;
+    readonly effects: CategoryKeys;
+    readonly others: CategoryKeys;
+    readonly variables: CategoryKeys;
+    readonly rawStyle: CategoryKeys;
+};
+export type CategoryId = keyof typeof CATEGORY_KEYS;
+export declare const CATEGORY_IDS: CategoryId[];