@plitzi/sdk-style 0.33.1 → 0.34.0

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

@@ -1,124 +1,125 @@
 import e from "../../../components/CategoryOption/index.mjs";
 import t from "../../../components/CategorySection/index.mjs";
-import { useCallback as n, useMemo as r, useRef as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@plitzi/plitzi-ui/ContainerFloating";
-import c from "@plitzi/plitzi-ui/Icon";
+import { splitBySpaceOutsideParens as n } from "./helpers.mjs";
+import { useCallback as r, useMemo as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@plitzi/plitzi-ui/ContainerFloating";
+import l from "@plitzi/plitzi-ui/Icon";
 //#region src/components/StyleInspector/categories/Effects/BoxShadow/BoxShadowItem.tsx
-var l = ({ value: l = "1px 1px 3px 1px black", onChange: u, onRemove: d }) => {
-	let f = l.split(/ (?![^(]*\))/gim), { type: p = "", posX: m = "1px", posY: h = "1px", blur: g = "3px", size: _ = "1px", color: v = "black" } = {};
-	f.length === 6 ? [p, m, h, g, _, v] = f : f.length === 5 && (p = "", [m, h, g, _, v] = f);
-	let y = i({
-		type: p,
-		posX: m,
-		posY: h,
-		blur: g,
-		size: _,
-		color: v
+var u = ({ value: u = "1px 1px 3px 1px black", onChange: d, onRemove: f }) => {
+	let p = n(u), { type: m = "", posX: h = "1px", posY: g = "1px", blur: _ = "3px", size: v = "1px", color: y = "black" } = {};
+	p.length === 6 ? [m, h, g, _, v, y] = p : p.length === 5 && (m = "", [h, g, _, v, y] = p);
+	let b = a({
+		type: m,
+		posX: h,
+		posY: g,
+		blur: _,
+		size: v,
+		color: y
 	});
-	y.current = {
-		type: p,
-		posX: m,
-		posY: h,
-		blur: g,
-		size: _,
-		color: v
+	b.current = {
+		type: m,
+		posX: h,
+		posY: g,
+		blur: _,
+		size: v,
+		color: y
 	};
-	let b = n((e) => (t) => {
-		let n = { ...y.current };
+	let x = r((e) => (t) => {
+		let n = { ...b.current };
 		n[e] = t;
 		let { type: r, posX: i, posY: a, blur: o, size: s, color: c } = n;
-		r ? u?.(`${r} ${i} ${a} ${o} ${s} ${c}`) : u?.(`${i} ${a} ${o} ${s} ${c}`);
-	}, [u]), x = r(() => [{
+		r ? d?.(`${r} ${i} ${a} ${o} ${s} ${c}`) : d?.(`${i} ${a} ${o} ${s} ${c}`);
+	}, [d]), S = i(() => [{
 		value: "",
-		icon: /* @__PURE__ */ a("div", {
+		icon: /* @__PURE__ */ o("div", {
 			className: "px-1 text-xs select-none",
 			children: "Outside"
 		}),
 		description: "",
-		active: p === "",
+		active: m === "",
 		size: "custom"
 	}, {
 		value: "inset",
-		icon: /* @__PURE__ */ a("div", {
+		icon: /* @__PURE__ */ o("div", {
 			className: "px-1 text-xs select-none",
 			children: "Inside"
 		}),
 		description: "",
-		active: p === "inset",
+		active: m === "inset",
 		size: "custom"
-	}], [p]);
-	return /* @__PURE__ */ o(s, {
+	}], [m]);
+	return /* @__PURE__ */ s(c, {
 		className: "w-full",
 		closeOnClick: !1,
 		containerTopOffset: 5,
-		children: [/* @__PURE__ */ o(s.Trigger, {
+		children: [/* @__PURE__ */ s(c.Trigger, {
 			className: "flex w-full cursor-pointer items-center justify-between rounded-sm border border-gray-300 bg-white px-2 py-0.5 select-none hover:bg-gray-100 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:bg-zinc-700/60",
-			children: [/* @__PURE__ */ o("div", {
+			children: [/* @__PURE__ */ s("div", {
 				className: "flex items-center",
-				children: [/* @__PURE__ */ a("div", {
+				children: [/* @__PURE__ */ o("div", {
 					className: "mr-1 h-5 w-5 rounded-sm",
-					style: { backgroundColor: v }
-				}), /* @__PURE__ */ a("div", {
+					style: { backgroundColor: y }
+				}), /* @__PURE__ */ o("div", {
 					className: "flex",
-					children: l
+					children: u
 				})]
-			}), /* @__PURE__ */ a("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: "flex",
-				children: /* @__PURE__ */ a(c, {
+				children: /* @__PURE__ */ o(l, {
 					size: "xs",
 					icon: "fas fa-trash-alt",
-					onClick: d,
+					onClick: f,
 					intent: "danger",
 					title: "Remove"
 				})
 			})]
-		}), /* @__PURE__ */ a(s.Content, {
+		}), /* @__PURE__ */ o(c.Content, {
 			className: "w-[260px]",
-			children: /* @__PURE__ */ o("div", {
+			children: /* @__PURE__ */ s("div", {
 				className: "flex w-full flex-col gap-2 p-2",
 				children: [
-					/* @__PURE__ */ a(t, {
+					/* @__PURE__ */ o(t, {
 						label: "Type",
-						children: /* @__PURE__ */ a(e, {
-							onChange: b("type"),
+						children: /* @__PURE__ */ o(e, {
+							onChange: x("type"),
 							type: "iconGroup",
-							items: x
+							items: S
 						})
 					}),
-					/* @__PURE__ */ o(t, {
+					/* @__PURE__ */ s(t, {
 						label: "Position",
-						children: [/* @__PURE__ */ a(e, {
+						children: [/* @__PURE__ */ o(e, {
 							label: "Pos X",
-							value: m,
-							onChange: b("posX"),
+							value: h,
+							onChange: x("posX"),
 							type: "metric"
-						}), /* @__PURE__ */ a(e, {
+						}), /* @__PURE__ */ o(e, {
 							label: "Pos Y",
-							value: h,
-							onChange: b("posY"),
+							value: g,
+							onChange: x("posY"),
 							type: "metric"
 						})]
 					}),
-					/* @__PURE__ */ o(t, {
+					/* @__PURE__ */ s(t, {
 						label: "Style",
-						children: [/* @__PURE__ */ a(e, {
+						children: [/* @__PURE__ */ o(e, {
 							label: "Blur",
-							value: g,
-							onChange: b("blur"),
+							value: _,
+							onChange: x("blur"),
 							type: "metric"
-						}), /* @__PURE__ */ a(e, {
+						}), /* @__PURE__ */ o(e, {
 							label: "Size",
-							value: _,
-							onChange: b("size"),
+							value: v,
+							onChange: x("size"),
 							type: "metric"
 						})]
 					}),
-					/* @__PURE__ */ a(t, {
+					/* @__PURE__ */ o(t, {
 						label: "Color",
-						children: /* @__PURE__ */ a(e, {
-							value: v,
-							onChange: b("color"),
+						children: /* @__PURE__ */ o(e, {
+							value: y,
+							onChange: x("color"),
 							type: "color"
 						})
 					})
@@ -128,4 +129,4 @@ var l = ({ value: l = "1px 1px 3px 1px black", onChange: u, onRemove: d }) => {
 	});
 };
 //#endregion
-export { l as default };
+export { u as default };

package/dist/components/StyleInspector/categories/Effects/BoxShadow/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const splitByCommaOutsideParens: (value: string) => string[];
+export declare const splitBySpaceOutsideParens: (value: string) => string[];

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

@@ -0,0 +1,18 @@
+//#region src/components/StyleInspector/categories/Effects/BoxShadow/helpers.ts
+var e = (e) => {
+	let t = [], n = "", r = 0;
+	for (let i = 0; i < e.length; i++) {
+		let a = e[i];
+		a === "(" ? (r++, n += a) : a === ")" ? (r--, n += a) : a === "," && r === 0 ? (t.push(n), n = "") : n += a;
+	}
+	return n && t.push(n), t;
+}, t = (e) => {
+	let t = [], n = "", r = 0;
+	for (let i = 0; i < e.length; i++) {
+		let a = e[i];
+		a === "(" ? (r++, n += a) : a === ")" ? (r--, n += a) : a === " " && r === 0 ? (n && t.push(n), n = "") : n += a;
+	}
+	return n && t.push(n), t;
+};
+//#endregion
+export { e as splitByCommaOutsideParens, t as splitBySpaceOutsideParens };

package/dist/components/StyleInspector/categories/Effects/Transition/TransitionItem.mjs

@@ -1,9 +1,9 @@
-import e from "../../../../InputEasing/index.mjs";
-import t from "../../../components/InspectorLabel/index.mjs";
-import n from "../../../components/CategoryOption/index.mjs";
-import r from "../../../components/CategorySection/index.mjs";
-import { easingGenerics as i } from "../../../../InputEasing/InputEasingHelper.mjs";
-import a from "../../../../InputEasing/InputEasingList.mjs";
+import { easingGenerics as e } from "../../../../InputEasing/InputEasingHelper.mjs";
+import t from "../../../../InputEasing/InputEasingList.mjs";
+import n from "../../../../InputEasing/index.mjs";
+import r from "../../../components/InspectorLabel/index.mjs";
+import i from "../../../components/CategoryOption/index.mjs";
+import a from "../../../components/CategorySection/index.mjs";
 import { useCallback as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import d from "@plitzi/plitzi-ui/ContainerFloating";
@@ -43,7 +43,7 @@ var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
 		let { duration: r, delay: i, property: a, easing: o } = n;
 		console.log("called", e, o, t), _?.(`${a} ${r} ${o} ${i}`);
 	}, [_]), A = o((e) => k("easing")(e), [k]), j = [];
-	return j = E in i ? i[E] : E.match(/[0-9.]+/gim), /* @__PURE__ */ u(d, {
+	return j = E in e ? e[E] : E.match(/[0-9.]+/gim), /* @__PURE__ */ u(d, {
 		className: "w-full",
 		closeOnClick: !1,
 		containerTopOffset: 5,
@@ -67,9 +67,9 @@ var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
 			children: /* @__PURE__ */ u("div", {
 				className: "flex w-full flex-col gap-2 p-2",
 				children: [
-					/* @__PURE__ */ l(r, {
+					/* @__PURE__ */ l(a, {
 						label: "Property",
-						children: /* @__PURE__ */ u(n, {
+						children: /* @__PURE__ */ u(i, {
 							onChange: k("property"),
 							type: "select",
 							value: w,
@@ -297,7 +297,7 @@ var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
 							]
 						})
 					}),
-					/* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(n, {
+					/* @__PURE__ */ u(a, { children: [/* @__PURE__ */ l(i, {
 						label: "Duration",
 						value: T,
 						onChange: k("duration"),
@@ -307,7 +307,7 @@ var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
 							value: "ms"
 						}],
 						min: 0
-					}), /* @__PURE__ */ l(n, {
+					}), /* @__PURE__ */ l(i, {
 						label: "Delay",
 						value: D,
 						onChange: k("delay"),
@@ -318,7 +318,7 @@ var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
 						}],
 						min: 0
 					})] }),
-					/* @__PURE__ */ u(r, {
+					/* @__PURE__ */ u(a, {
 						label: "Easing",
 						children: [/* @__PURE__ */ u(d, {
 							containerLeftOffset: -92,
@@ -330,7 +330,7 @@ var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
 								children: /* @__PURE__ */ l(m, {})
 							}) }), /* @__PURE__ */ u(d.Content, {
 								className: "flex h-[456px] w-[260px] flex-col items-center overflow-y-auto",
-								children: [/* @__PURE__ */ l(a, {
+								children: [/* @__PURE__ */ l(t, {
 									className: "w-[260px]",
 									onChange: k("easing")
 								}), /* @__PURE__ */ u("div", {
@@ -338,8 +338,8 @@ var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
 									children: [/* @__PURE__ */ u("div", {
 										className: "flex",
 										onClick: S,
-										children: [/* @__PURE__ */ l(f, { icon: b ? "fas fa-pause" : "fas fa-play" }), /* @__PURE__ */ l(t, { children: b ? "Pause" : "Play" })]
-									}), /* @__PURE__ */ l(e, {
+										children: [/* @__PURE__ */ l(f, { icon: b ? "fas fa-pause" : "fas fa-play" }), /* @__PURE__ */ l(r, { children: b ? "Pause" : "Play" })]
+									}), /* @__PURE__ */ l(n, {
 										value: j,
 										progress: v,
 										height: 200,

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

@@ -1,27 +1,27 @@
 import { processSelectors as e } from "../../../../helpers/processSelector.mjs";
 import t from "../../components/CategoryContainer/index.mjs";
-import n from "clsx";
-import { use as r, useCallback as i, useMemo as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-import s from "@plitzi/plitzi-ui/CodeMirror";
-import { ThemeContext as c } from "@plitzi/sdk-shared/theme/ThemeProvider";
+import { useCallback as n, useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import a from "@plitzi/plitzi-ui/CodeMirror";
+import o from "@plitzi/sdk-shared/theme/useTheme";
+import s from "clsx";
 //#region src/components/StyleInspector/categories/RawStyle/RawStyle.tsx
-var l = ({ selectors: l, isCollapsed: u, onCollapse: d }) => {
-	let { theme: f } = r(c), p = a(() => e(l ?? [], !1).join("\n\n"), [l]), m = i((e) => d?.("rawStyle", e), [d]);
-	return /* @__PURE__ */ o(t, {
-		className: u ? "" : "grow",
-		classNameContent: n("p-0", { grow: !u }),
+var c = ({ selectors: c, isCollapsed: l, onCollapse: u }) => {
+	let { resolvedTheme: d } = o(), f = r(() => e(c ?? [], !1).join("\n\n"), [c]), p = n((e) => u?.("rawStyle", e), [u]);
+	return /* @__PURE__ */ i(t, {
+		className: l ? "" : "grow",
+		classNameContent: s("p-0", { grow: !l }),
 		title: "Raw Style",
-		isCollapsed: u,
-		onCollapse: m,
-		children: /* @__PURE__ */ o(s, {
-			value: p,
+		isCollapsed: l,
+		onCollapse: p,
+		children: /* @__PURE__ */ i(a, {
+			value: f,
 			className: "h-full",
-			theme: f === "dark" ? "dark" : "light",
+			theme: d,
 			lineWrapping: !0,
 			readOnly: !0
 		})
 	});
 };
 //#endregion
-export { l as default };
+export { c as default };

package/dist/components/StyleInspector/categories/Spacing/SpacingEditor.mjs

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import n from "@plitzi/plitzi-ui/Icon";
-import r from "@plitzi/plitzi-ui/Button";
+import n from "@plitzi/plitzi-ui/Button";
+import r from "@plitzi/plitzi-ui/Icon";
 import i from "@plitzi/plitzi-ui/MetricInput";
 import a from "@plitzi/plitzi-ui/icons/MarginBottom";
 import o from "@plitzi/plitzi-ui/icons/MarginLeft";
@@ -32,7 +32,7 @@ var p = {
 			className: "grid grid-cols-2 items-center gap-2 px-1 pt-1",
 			children: [/* @__PURE__ */ t("div", {
 				className: "mr-1 flex items-center capitalize",
-				children: [/* @__PURE__ */ e(n, {
+				children: [/* @__PURE__ */ e(r, {
 					className: "mr-1",
 					children: p[a]
 				}), /* @__PURE__ */ e("div", {
@@ -89,7 +89,7 @@ var p = {
 			})]
 		}), /* @__PURE__ */ t("div", {
 			className: "flex",
-			children: [u === "margin" && /* @__PURE__ */ e(r, {
+			children: [u === "margin" && /* @__PURE__ */ e(n, {
 				intent: "secondary",
 				size: "xs",
 				className: "m-1 w-14 grow",
@@ -98,49 +98,49 @@ var p = {
 			}), /* @__PURE__ */ t("div", {
 				className: "m-1 grid w-full grid-cols-4 grid-rows-2 gap-2",
 				children: [
-					/* @__PURE__ */ e(r, {
+					/* @__PURE__ */ e(n, {
 						intent: "secondary",
 						size: "xs",
 						onClick: c("0px"),
 						children: "0"
 					}),
-					/* @__PURE__ */ e(r, {
+					/* @__PURE__ */ e(n, {
 						intent: "secondary",
 						size: "xs",
 						onClick: c("10px"),
 						children: "10"
 					}),
-					/* @__PURE__ */ e(r, {
+					/* @__PURE__ */ e(n, {
 						intent: "secondary",
 						size: "xs",
 						onClick: c("20px"),
 						children: "20"
 					}),
-					/* @__PURE__ */ e(r, {
+					/* @__PURE__ */ e(n, {
 						intent: "secondary",
 						size: "xs",
 						onClick: c("40px"),
 						children: "40"
 					}),
-					/* @__PURE__ */ e(r, {
+					/* @__PURE__ */ e(n, {
 						intent: "secondary",
 						size: "xs",
 						onClick: c("60px"),
 						children: "60"
 					}),
-					/* @__PURE__ */ e(r, {
+					/* @__PURE__ */ e(n, {
 						intent: "secondary",
 						size: "xs",
 						onClick: c("100px"),
 						children: "100"
 					}),
-					/* @__PURE__ */ e(r, {
+					/* @__PURE__ */ e(n, {
 						intent: "secondary",
 						size: "xs",
 						onClick: c("140px"),
 						children: "140"
 					}),
-					/* @__PURE__ */ e(r, {
+					/* @__PURE__ */ e(n, {
 						intent: "secondary",
 						size: "xs",
 						onClick: c("220px"),

package/dist/components/StyleInspector/categories/Spacing/SpacingNumber.mjs

@@ -1,14 +1,14 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
+import t from "clsx";
 //#region src/components/StyleInspector/categories/Spacing/SpacingNumber.tsx
-var n = ({ value: n = "", active: r = !1, onClick: i }) => /* @__PURE__ */ t("div", {
-	className: e("mx-0.5 flex w-[30px] items-center justify-center rounded-md border px-0.5 text-xs", {
+var n = ({ value: n = "", active: r = !1, onClick: i }) => /* @__PURE__ */ e("div", {
+	className: t("mx-0.5 flex w-[30px] items-center justify-center rounded-md border px-0.5 text-xs", {
 		"border-transparent hover:border-blue-300 hover:bg-blue-100 hover:text-blue-400 dark:hover:bg-blue-900/50 dark:hover:text-blue-400": !r,
 		"border-blue-300 bg-blue-100 text-blue-400 dark:bg-blue-900/50": r
 	}),
 	title: n,
 	onClick: i,
-	children: /* @__PURE__ */ t("div", {
+	children: /* @__PURE__ */ e("div", {
 		className: "truncate",
 		children: n.replace("px", "")
 	})

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

@@ -1,11 +1,7 @@
 export type TypographyProps = {
     replaceTokens?: boolean;
     isCollapsed?: boolean;
-    fonts?: {
-        name: string;
-        weights: string[];
-    }[];
     onCollapse?: (category: string, isCollapsed: boolean) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, fonts, onCollapse }: TypographyProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: TypographyProps) => import("react").JSX.Element>;
 export default _default;