@plitzi/sdk-style 0.38.10 → 0.38.11

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

@@ -1,41 +1,24 @@
 import e from "../../StyleInspectorContext.mjs";
 import t from "../../hooks/useInspectorValues.mjs";
-import n from "../../components/CategoryContainer/index.mjs";
-import r from "./DisplayElements.mjs";
-import i from "./DisplayFlex.mjs";
-import a from "./DisplayFlexAlignContent.mjs";
-import o from "./DisplayFlexAlignItems.mjs";
-import s from "./DisplayFlexDirection.mjs";
-import c from "./DisplayFlexJustify.mjs";
-import l from "./DisplayGap.mjs";
-import u from "./DisplayGridGap.mjs";
-import d from "./DisplayGridTemplate.mjs";
-import { memo as f, use as p, useCallback as m } from "react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-//#region src/components/StyleInspector/categories/Display/Display.tsx
-var v = [
-	"flex-direction",
-	"flex-wrap",
-	"align-items",
-	"justify-content",
-	"align-content",
-	"column-gap",
-	"row-gap",
-	"grid-row-gap",
-	"grid-column-gap",
-	"grid-template-areas",
-	"grid-template-columns",
-	"grid-template-rows",
-	"grid-auto-flow",
-	"grid-auto-rows",
-	"grid-auto-columns",
-	"display"
-], y = f(({ replaceTokens: f = !1, isCollapsed: y = !0, onCollapse: b }) => {
-	let { setValue: x } = p(e), { display: S, "flex-direction": C, "flex-wrap": w, "align-items": T, "justify-content": E, "row-gap": D, "column-gap": O, "grid-template-areas": k, "grid-template-columns": A, "grid-template-rows": j, "grid-auto-flow": M, "grid-auto-rows": N, "grid-auto-columns": P, "grid-row-gap": F, "grid-column-gap": I, "align-content": L } = t({
-		keys: v,
+import { DISPLAY_KEYS as n } from "../../categoryKeys.mjs";
+import r from "../../components/CategoryContainer/index.mjs";
+import i from "./DisplayElements.mjs";
+import a from "./DisplayFlex.mjs";
+import o from "./DisplayFlexAlignContent.mjs";
+import s from "./DisplayFlexAlignItems.mjs";
+import c from "./DisplayFlexDirection.mjs";
+import l from "./DisplayFlexJustify.mjs";
+import u from "./DisplayGap.mjs";
+import d from "./DisplayGridGap.mjs";
+import f from "./DisplayGridTemplate.mjs";
+import { memo as p, use as m, useCallback as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+var y = p(({ replaceTokens: p = !1, isCollapsed: y = !0, onCollapse: b }) => {
+	let { setValue: x } = m(e), { display: S, "flex-direction": C, "flex-wrap": w, "align-items": T, "justify-content": E, "row-gap": D, "column-gap": O, "grid-template-areas": k, "grid-template-columns": A, "grid-template-rows": j, "grid-auto-flow": M, "grid-auto-rows": N, "grid-auto-columns": P, "grid-row-gap": F, "grid-column-gap": I, "align-content": L } = t({
+		keys: n.dot,
 		asValue: !0,
-		replaceTokens: f
-	}), R = m((e, t) => {
+		replaceTokens: p
+	}), R = h((e, t) => {
 		e === "display" ? x(void 0, {
 			"flex-direction": void 0,
 			"flex-wrap": void 0,
@@ -54,47 +37,47 @@ var v = [
 			"grid-auto-columns": void 0,
 			display: t
 		}) : x(e, t);
-	}, [x]), z = m((e) => b?.("display", e), [b]), B = typeof C == "string" && C.includes("reverse"), V = typeof C == "string" && C.includes("row"), H = typeof w == "string" && w.includes("reverse");
-	return /* @__PURE__ */ _(n, {
-		title: "Layout",
-		dotKeys: v,
+	}, [x]), z = h((e) => b?.("display", e), [b]), B = typeof C == "string" && C.includes("reverse"), V = typeof C == "string" && C.includes("row"), H = typeof w == "string" && w.includes("reverse");
+	return /* @__PURE__ */ v(r, {
+		title: n.title,
+		dotKeys: n.dot,
 		isCollapsed: y,
 		onCollapse: z,
 		children: [
-			/* @__PURE__ */ g(r, {
+			/* @__PURE__ */ _(i, {
 				value: S,
 				onChange: R
 			}),
-			S === "flex" && /* @__PURE__ */ _(h, { children: [
-				/* @__PURE__ */ g(s, {
+			S === "flex" && /* @__PURE__ */ v(g, { children: [
+				/* @__PURE__ */ _(c, {
 					value: C,
 					onChange: R,
 					isReverse: B
 				}),
-				/* @__PURE__ */ g(o, {
+				/* @__PURE__ */ _(s, {
 					value: T,
 					onChange: R,
 					isReverse: B,
 					isRow: V
 				}),
-				/* @__PURE__ */ g(c, {
+				/* @__PURE__ */ _(l, {
 					value: E,
 					onChange: R,
 					isReverse: B,
 					isRow: V
 				}),
-				/* @__PURE__ */ g(i, {
+				/* @__PURE__ */ _(a, {
 					value: w,
 					onChange: R,
 					isReverse: H
 				}),
-				/* @__PURE__ */ g(l, {
+				/* @__PURE__ */ _(u, {
 					rowGap: D,
 					columnGap: O,
 					onChange: R
 				})
 			] }),
-			S === "grid" && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(d, {
+			S === "grid" && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(f, {
 				templateAreas: k,
 				templateColumns: A,
 				templateRows: j,
@@ -102,12 +85,12 @@ var v = [
 				templateAutoRows: N,
 				templateAutoColumns: P,
 				onChange: R
-			}), /* @__PURE__ */ g(u, {
+			}), /* @__PURE__ */ _(d, {
 				rowGap: F,
 				columnGap: I,
 				onChange: R
 			})] }),
-			S === "flex" && (w === "wrap" || w === "wrap-reverse") && /* @__PURE__ */ g(a, {
+			S === "flex" && (w === "wrap" || w === "wrap-reverse") && /* @__PURE__ */ _(o, {
 				value: L,
 				onChange: R,
 				isReverse: H,

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

@@ -2,39 +2,34 @@ 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/CategoryContainer/index.mjs";
-import a from "./DisplayAlignSelf.mjs";
-import o from "./DisplayOrder.mjs";
-import { memo as s, use as c, useCallback as l, useMemo as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "@plitzi/plitzi-ui/icons/FlexGrowRow";
-import m from "@plitzi/plitzi-ui/icons/FlexNoneRow";
-import h from "@plitzi/plitzi-ui/icons/FlexShrinkRow";
+import { FLEX_CHILD_KEYS as i } from "../../categoryKeys.mjs";
+import a from "../../components/CategoryContainer/index.mjs";
+import o from "./DisplayAlignSelf.mjs";
+import s from "./DisplayOrder.mjs";
+import { memo as c, use as l, useCallback as u, useMemo as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@plitzi/plitzi-ui/icons/FlexGrowRow";
+import h from "@plitzi/plitzi-ui/icons/FlexNoneRow";
+import g from "@plitzi/plitzi-ui/icons/FlexShrinkRow";
 //#region src/components/StyleInspector/categories/DisplayFlexChild/DisplayFlexChild.tsx
-var g = [
-	"align-self",
-	"order",
+var _ = [
 	"flex-grow",
 	"flex-shrink",
 	"flex-basis"
-], _ = [
-	"flex-grow",
-	"flex-shrink",
-	"flex-basis"
-], v = s(({ replaceTokens: s = !1, isCollapsed: v = !0, isFlexVertical: y = !1, onCollapse: b }) => {
-	let { setValue: x } = c(e), { "flex-grow": S, "flex-shrink": C, "flex-basis": w, "align-self": T, order: E } = t({
-		keys: g,
+], v = c(({ replaceTokens: c = !1, isCollapsed: v = !0, isFlexVertical: y = !1, onCollapse: b }) => {
+	let { setValue: x } = l(e), { "flex-grow": S, "flex-shrink": C, "flex-basis": w, "align-self": T, order: E } = t({
+		keys: i.dot,
 		asValue: !0,
-		replaceTokens: s
-	}), D = l((e) => {
+		replaceTokens: c
+	}), D = u((e) => {
 		x(void 0, e);
-	}, [x]), O = l((e) => {
+	}, [x]), O = u((e) => {
 		x("flex-grow", e);
-	}, [x]), k = l((e) => {
+	}, [x]), k = u((e) => {
 		x("flex-shrink", e);
-	}, [x]), A = l((e) => {
+	}, [x]), A = u((e) => {
 		x("flex-basis", e);
-	}, [x]), j = l((e) => b?.("displayFlexChild", e), [b]), M = u(() => {
+	}, [x]), j = u((e) => b?.("displayFlexChild", e), [b]), M = d(() => {
 		let e = (S !== "0" || C !== "1" || w !== "auto") && (S !== "1" || C !== "1" || w !== "0%") && (S !== "0" || C !== "0" || w !== "auto");
 		return [
 			{
@@ -43,7 +38,7 @@ var g = [
 					"flex-shrink": "1",
 					"flex-basis": "auto"
 				},
-				icon: /* @__PURE__ */ d(h, {}),
+				icon: /* @__PURE__ */ f(g, {}),
 				description: "Shrink if needed",
 				active: !e && S === "0" && C === "1" && w === "auto"
 			},
@@ -53,7 +48,7 @@ var g = [
 					"flex-shrink": "1",
 					"flex-basis": "0%"
 				},
-				icon: /* @__PURE__ */ d(p, {}),
+				icon: /* @__PURE__ */ f(m, {}),
 				description: "Grow if possible",
 				active: !e && S === "1" && C === "1" && w === "0%"
 			},
@@ -63,7 +58,7 @@ var g = [
 					"flex-shrink": "0",
 					"flex-basis": "auto"
 				},
-				icon: /* @__PURE__ */ d(m, {}),
+				icon: /* @__PURE__ */ f(h, {}),
 				description: "Don't shrink or grow",
 				active: !e && S === "0" && C === "0" && w === "auto"
 			}
@@ -72,36 +67,36 @@ var g = [
 		S,
 		C,
 		w
-	]), N = l((e, t) => x(e, t), [x]);
-	return /* @__PURE__ */ f(i, {
-		title: "Flex Child",
-		dotKeys: g,
+	]), N = u((e, t) => x(e, t), [x]);
+	return /* @__PURE__ */ p(a, {
+		title: i.title,
+		dotKeys: i.dot,
 		isCollapsed: v,
 		onCollapse: j,
 		children: [
-			/* @__PURE__ */ d(n, {
+			/* @__PURE__ */ f(n, {
 				keys: _,
 				label: "Sizing",
 				onChange: D,
 				type: "iconGroup",
 				items: M
 			}),
-			/* @__PURE__ */ f(r, { children: [
-				/* @__PURE__ */ d(n, {
+			/* @__PURE__ */ p(r, { children: [
+				/* @__PURE__ */ f(n, {
 					keys: ["flex-grow"],
 					label: "Grow",
 					onChange: O,
 					type: "input",
 					value: S
 				}),
-				/* @__PURE__ */ d(n, {
+				/* @__PURE__ */ f(n, {
 					keys: ["flex-shrink"],
 					label: "Shrink",
 					onChange: k,
 					type: "input",
 					value: C
 				}),
-				/* @__PURE__ */ d(n, {
+				/* @__PURE__ */ f(n, {
 					keys: ["flex-basis"],
 					label: "Basis",
 					onChange: A,
@@ -109,12 +104,12 @@ var g = [
 					value: w
 				})
 			] }),
-			/* @__PURE__ */ d(a, {
+			/* @__PURE__ */ f(o, {
 				value: T,
 				isFlexVertical: y,
 				onChange: N
 			}),
-			/* @__PURE__ */ d(o, {
+			/* @__PURE__ */ f(s, {
 				value: E,
 				onChange: N
 			})

package/dist/components/StyleInspector/categories/Effects/BoxShadow/BoxShadow.mjs

@@ -1,38 +1,26 @@
-import e from "../../../components/InspectorLabel/index.mjs";
-import { splitByCommaOutsideParens as t } from "./helpers.mjs";
-import n from "./BoxShadowItem.mjs";
-import { useCallback as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@plitzi/plitzi-ui/Icon";
+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/Effects/BoxShadow/BoxShadow.tsx
-var c = ({ value: c = "", onChange: l }) => {
-	let u = [];
-	c && c !== "" && (u = t(c));
-	let d = (e) => (t) => {
-		t.stopPropagation(), t.preventDefault(), u.splice(e, 1), u.length > 0 ? l?.(u.join(",")) : l?.("");
-	}, f = (e) => (t) => {
-		t !== u[e] && (u[e] = t, l?.(u.join(",")));
-	}, p = r(() => {
-		c ? l?.(`${c},1px 1px 3px 1px black`) : l?.("1px 1px 3px 1px black");
-	}, [c, l]);
-	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
-		className: "flex items-center justify-between",
-		children: [/* @__PURE__ */ a(e, {
-			keyValue: ["box-shadow"],
-			children: "Box Shadow"
-		}), /* @__PURE__ */ a(s, {
-			className: "cursor-pointer",
-			icon: "fas fa-plus",
-			onClick: p
-		})]
-	}), u.length > 0 && /* @__PURE__ */ a("div", {
-		className: "flex flex-col gap-2",
-		children: u.map((e, t) => /* @__PURE__ */ a(n, {
-			value: e.trim(),
-			onChange: f(t),
-			onRemove: d(t)
+var s = ["box-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: "Box Shadow",
+		keys: s,
+		addLabel: "Add box shadow",
+		onAdd: () => d([...u, r(n, { withSpread: !0 })]),
+		children: u.length > 0 && u.map((e, t) => /* @__PURE__ */ o(i, {
+			value: e,
+			withSpread: !0,
+			onChange: p(t),
+			onRemove: f(t)
 		}, t))
-	})] });
+	});
 };
 //#endregion
 export { c as default };