@plitzi/sdk-style 0.30.19

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

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

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

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

package/dist/components/StyleInspector/categories/DisplayFlexChild/DisplayAlignSelf.d.ts

@@ -0,0 +1,8 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type DisplayAlignSelfProps = {
+    value?: StyleValue;
+    isFlexVertical?: boolean;
+    onChange?: (type: StyleCategory, value: StyleValue) => void;
+};
+declare const DisplayAlignSelf: ({ value, isFlexVertical, onChange }: DisplayAlignSelfProps) => import("react/jsx-runtime").JSX.Element;
+export default DisplayAlignSelf;

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

@@ -0,0 +1,60 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import n from "clsx";
+import { useCallback as r, useMemo as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/icons/XMark";
+import s from "@plitzi/plitzi-ui/icons/AlignSelfBaselineRow";
+import c from "@plitzi/plitzi-ui/icons/AlignSelfCenterRow";
+import l from "@plitzi/plitzi-ui/icons/AlignSelfEndRow";
+import u from "@plitzi/plitzi-ui/icons/AlignSelfStartRow";
+import d from "@plitzi/plitzi-ui/icons/AlignSelfStretchRow";
+//#region src/components/StyleInspector/categories/DisplayFlexChild/DisplayAlignSelf.tsx
+var f = ["align-self"], p = ({ value: p, isFlexVertical: m = !1, onChange: h }) => /* @__PURE__ */ a(t, {
+	label: "Align",
+	keys: f,
+	children: /* @__PURE__ */ a(e, {
+		onChange: r((e) => h?.("align-self", e), [h]),
+		type: "iconGroup",
+		items: i(() => [
+			{
+				value: "auto",
+				icon: /* @__PURE__ */ a(o, {}),
+				description: "Align Auto",
+				active: p === "auto"
+			},
+			{
+				value: "flex-start",
+				icon: /* @__PURE__ */ a(u, { className: n({ "-rotate-90": m }) }),
+				description: "Align Start",
+				active: p === "flex-start"
+			},
+			{
+				value: "center",
+				icon: /* @__PURE__ */ a(c, { className: n({ "-rotate-90": m }) }),
+				description: "Align Center",
+				active: p === "center"
+			},
+			{
+				value: "flex-end",
+				icon: /* @__PURE__ */ a(l, { className: n({ "-rotate-90": m }) }),
+				description: "Align End",
+				active: p === "flex-end"
+			},
+			{
+				value: "stretch",
+				icon: /* @__PURE__ */ a(d, { className: n({ "-rotate-90": m }) }),
+				description: "Align Stretch",
+				active: p === "stretch"
+			},
+			{
+				value: "baseline",
+				icon: /* @__PURE__ */ a(s, {}),
+				description: "Align Baseline",
+				active: p === "baseline"
+			}
+		], [m, p])
+	})
+});
+//#endregion
+export { p as default };

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

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

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

@@ -0,0 +1,125 @@
+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";
+//#region src/components/StyleInspector/categories/DisplayFlexChild/DisplayFlexChild.tsx
+var g = [
+	"align-self",
+	"order",
+	"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,
+		asValue: !0,
+		replaceTokens: s
+	}), D = l((e) => {
+		x(void 0, e);
+	}, [x]), O = l((e) => {
+		x("flex-grow", e);
+	}, [x]), k = l((e) => {
+		x("flex-shrink", e);
+	}, [x]), A = l((e) => {
+		x("flex-basis", e);
+	}, [x]), j = l((e) => b?.("displayFlexChild", e), [b]), M = u(() => {
+		let e = !(S === "0" && C === "1" && w === "auto") && !(S === "1" && C === "1" && w === "0%") && !(S === "0" && C === "0" && w === "auto");
+		return [
+			{
+				value: {
+					"flex-grow": "0",
+					"flex-shrink": "1",
+					"flex-basis": "auto"
+				},
+				icon: /* @__PURE__ */ d(h, {}),
+				description: "Shrink if needed",
+				active: !e && S === "0" && C === "1" && w === "auto"
+			},
+			{
+				value: {
+					"flex-grow": "1",
+					"flex-shrink": "1",
+					"flex-basis": "0%"
+				},
+				icon: /* @__PURE__ */ d(p, {}),
+				description: "Grow if possible",
+				active: !e && S === "1" && C === "1" && w === "0%"
+			},
+			{
+				value: {
+					"flex-grow": "0",
+					"flex-shrink": "0",
+					"flex-basis": "auto"
+				},
+				icon: /* @__PURE__ */ d(m, {}),
+				description: "Don't shrink or grow",
+				active: !e && S === "0" && C === "0" && w === "auto"
+			}
+		];
+	}, [
+		S,
+		C,
+		w
+	]), N = l((e, t) => x(e, t), [x]);
+	return /* @__PURE__ */ f(i, {
+		title: "Flex Child",
+		dotKeys: g,
+		isCollapsed: v,
+		onCollapse: j,
+		children: [
+			/* @__PURE__ */ d(n, {
+				keys: _,
+				label: "Sizing",
+				onChange: D,
+				type: "iconGroup",
+				items: M
+			}),
+			/* @__PURE__ */ f(r, { children: [
+				/* @__PURE__ */ d(n, {
+					keys: ["flex-grow"],
+					label: "Grow",
+					onChange: O,
+					type: "input",
+					value: S
+				}),
+				/* @__PURE__ */ d(n, {
+					keys: ["flex-shrink"],
+					label: "Shrink",
+					onChange: k,
+					type: "input",
+					value: C
+				}),
+				/* @__PURE__ */ d(n, {
+					keys: ["flex-basis"],
+					label: "Basis",
+					onChange: A,
+					type: "metric",
+					value: w
+				})
+			] }),
+			/* @__PURE__ */ d(a, {
+				value: T,
+				isFlexVertical: y,
+				onChange: N
+			}),
+			/* @__PURE__ */ d(o, {
+				value: E,
+				onChange: N
+			})
+		]
+	});
+});
+//#endregion
+export { v as default };

package/dist/components/StyleInspector/categories/DisplayFlexChild/DisplayOrder.d.ts

@@ -0,0 +1,7 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type DisplayOrderProps = {
+    value?: StyleValue;
+    onChange?: (type: StyleCategory, value: StyleValue) => void;
+};
+declare const DisplayOrder: ({ value, onChange }: DisplayOrderProps) => import("react/jsx-runtime").JSX.Element;
+export default DisplayOrder;

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

@@ -0,0 +1,51 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useCallback as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/icons/XMark";
+//#region src/components/StyleInspector/categories/DisplayFlexChild/DisplayOrder.tsx
+var s = ["order"], c = ({ value: c, onChange: l }) => {
+	let u = n((e) => l?.("order", e), [l]);
+	return /* @__PURE__ */ a(t, {
+		label: "Align",
+		keys: s,
+		children: [/* @__PURE__ */ i(e, {
+			onChange: u,
+			type: "iconGroup",
+			items: r(() => [
+				{
+					value: "0",
+					icon: /* @__PURE__ */ i(o, {}),
+					description: "Order Auto",
+					active: c === "0"
+				},
+				{
+					value: "-1",
+					icon: /* @__PURE__ */ i("div", {
+						className: "text-xs select-none",
+						children: "First"
+					}),
+					description: "Order First",
+					active: c === "-1",
+					size: "custom"
+				},
+				{
+					value: "1",
+					icon: /* @__PURE__ */ i("div", {
+						className: "text-xs select-none",
+						children: "Last"
+					}),
+					description: "Order Last",
+					active: c === "1",
+					size: "custom"
+				}
+			], [c])
+		}), /* @__PURE__ */ i(e, {
+			onChange: u,
+			type: "input",
+			value: c
+		})]
+	});
+};
+//#endregion
+export { c as default };

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type BoxShadowProps = {
+    value?: StyleValue;
+    onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const BoxShadow: ({ value, onChange }: BoxShadowProps) => import("react/jsx-runtime").JSX.Element;
+export default BoxShadow;

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

@@ -0,0 +1,37 @@
+import e from "../../../components/InspectorLabel/index.mjs";
+import t from "./BoxShadowItem.mjs";
+import { useCallback as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/Icon";
+//#region src/components/StyleInspector/categories/Effects/BoxShadow/BoxShadow.tsx
+var s = ({ value: s = "", onChange: c }) => {
+	let l = /,(?![^(]*\))/gim, u = [];
+	s && s !== "" && (u = s.split(l));
+	let d = (e) => (t) => {
+		t.stopPropagation(), t.preventDefault(), u.splice(e, 1), u.length > 0 ? c?.(u.join(",")) : c?.("");
+	}, f = (e) => (t) => {
+		t !== u[e] && (u[e] = t, c?.(u.join(",")));
+	}, p = n(() => {
+		s ? c?.(`${s},1px 1px 3px 1px black`) : c?.("1px 1px 3px 1px black");
+	}, [s, c]);
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
+		className: "flex items-center justify-between",
+		children: [/* @__PURE__ */ i(e, {
+			keyValue: ["box-shadow"],
+			children: "Box Shadow"
+		}), /* @__PURE__ */ i(o, {
+			className: "cursor-pointer",
+			icon: "fas fa-plus",
+			onClick: p
+		})]
+	}), u.length > 0 && /* @__PURE__ */ i("div", {
+		className: "flex flex-col",
+		children: u.map((e, n) => /* @__PURE__ */ i(t, {
+			value: e.trim(),
+			onChange: f(n),
+			onRemove: d(n)
+		}, n))
+	})] });
+};
+//#endregion
+export { s as default };

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

@@ -0,0 +1,8 @@
+import { MouseEvent } from 'react';
+export type BoxShadowItemProps = {
+    value?: string;
+    onChange?: (value: string) => void;
+    onRemove?: (e: MouseEvent) => void;
+};
+declare const BoxShadowItem: ({ value, onChange, onRemove }: BoxShadowItemProps) => import("react/jsx-runtime").JSX.Element;
+export default BoxShadowItem;

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

@@ -0,0 +1,130 @@
+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";
+//#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
+	});
+	y.current = {
+		type: p,
+		posX: m,
+		posY: h,
+		blur: g,
+		size: _,
+		color: v
+	};
+	let b = n((e) => (t) => {
+		let n = { ...y.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(() => [{
+		value: "",
+		icon: /* @__PURE__ */ a("div", {
+			className: "px-1 text-xs select-none",
+			children: "Outside"
+		}),
+		description: "",
+		active: p === "",
+		size: "custom"
+	}, {
+		value: "inset",
+		icon: /* @__PURE__ */ a("div", {
+			className: "px-1 text-xs select-none",
+			children: "Inside"
+		}),
+		description: "",
+		active: p === "inset",
+		size: "custom"
+	}], [p]);
+	return /* @__PURE__ */ o(s, {
+		className: "w-full",
+		closeOnClick: !1,
+		children: [/* @__PURE__ */ o(s.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", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ a("div", {
+					className: "mr-1 h-5 w-5 rounded-sm",
+					style: { backgroundColor: v }
+				}), /* @__PURE__ */ a("div", {
+					className: "flex",
+					children: l
+				})]
+			}), /* @__PURE__ */ a("div", {
+				className: "flex",
+				children: /* @__PURE__ */ a(c, {
+					size: "xs",
+					icon: "fas fa-trash-alt",
+					onClick: d,
+					intent: "danger",
+					title: "Remove"
+				})
+			})]
+		}), /* @__PURE__ */ a(s.Content, {
+			className: "w-[260px]",
+			children: /* @__PURE__ */ o("div", {
+				className: "flex w-full flex-col gap-2 p-2",
+				children: [
+					/* @__PURE__ */ a(t, {
+						label: "Type",
+						children: /* @__PURE__ */ a(e, {
+							onChange: b("type"),
+							type: "iconGroup",
+							items: x
+						})
+					}),
+					/* @__PURE__ */ o(t, {
+						label: "Position",
+						children: [/* @__PURE__ */ a(e, {
+							label: "Pos X",
+							value: m,
+							onChange: b("posX"),
+							type: "metric"
+						}), /* @__PURE__ */ a(e, {
+							label: "Pos Y",
+							value: h,
+							onChange: b("posY"),
+							type: "metric"
+						})]
+					}),
+					/* @__PURE__ */ o(t, {
+						label: "Style",
+						children: [/* @__PURE__ */ a(e, {
+							label: "Blur",
+							value: g,
+							onChange: b("blur"),
+							type: "metric"
+						}), /* @__PURE__ */ a(e, {
+							label: "Size",
+							value: _,
+							onChange: b("size"),
+							type: "metric"
+						})]
+					}),
+					/* @__PURE__ */ a(t, {
+						label: "Color",
+						children: /* @__PURE__ */ a(e, {
+							value: v,
+							onChange: b("color"),
+							type: "color"
+						})
+					})
+				]
+			})
+		})]
+	});
+};
+//#endregion
+export { l as default };

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

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

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

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

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

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