@plitzi/sdk-style 0.30.19

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

@@ -0,0 +1,247 @@
+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 "./BoxShadow/index.mjs";
+import o from "./Filters/Filter.mjs";
+import s from "./Transform/index.mjs";
+import c from "./Transition/index.mjs";
+import { memo as l, use as u, useCallback as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Effects/Effects.tsx
+var m = [
+	"opacity",
+	"cursor",
+	"transition",
+	"box-shadow",
+	"filter",
+	"transform"
+], h = l(({ replaceTokens: l = !1, isCollapsed: h = !0, onCollapse: g }) => {
+	let { setValue: _ } = u(e), { opacity: v, cursor: y, transition: b, "box-shadow": x, filter: S, transform: C } = t({
+		keys: m,
+		asValue: !0,
+		strictMode: !0,
+		defaultValues: {
+			opacity: "1",
+			cursor: "auto",
+			transition: void 0,
+			"box-shadow": void 0,
+			filter: void 0,
+			transform: void 0
+		},
+		replaceTokens: l
+	}), w = d((e) => g?.("effects", e), [g]), T = d((e) => (t) => _(e, t), [_]);
+	return /* @__PURE__ */ f(i, {
+		title: "Effects",
+		dotKeys: m,
+		isCollapsed: h,
+		onCollapse: w,
+		children: /* @__PURE__ */ p("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				/* @__PURE__ */ f(r, {
+					label: "Opacity",
+					keys: ["opacity"],
+					children: /* @__PURE__ */ f(n, {
+						value: v,
+						onChange: T("opacity"),
+						type: "metric"
+					})
+				}),
+				/* @__PURE__ */ f(r, {
+					label: "Cursor",
+					keys: ["cursor"],
+					children: /* @__PURE__ */ p(n, {
+						value: y,
+						onChange: T("cursor"),
+						type: "select",
+						children: [
+							/* @__PURE__ */ p("optgroup", {
+								label: "General",
+								children: [
+									/* @__PURE__ */ f("option", {
+										value: "auto",
+										children: "Auto"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "default",
+										children: "Default"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "none",
+										children: "None"
+									})
+								]
+							}),
+							/* @__PURE__ */ p("optgroup", {
+								label: "Links & Status",
+								children: [
+									/* @__PURE__ */ f("option", {
+										value: "pointer",
+										children: "Pointer"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "not-allowed",
+										children: "Not Allowed"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "wait",
+										children: "Wait"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "progress",
+										children: "Progress"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "help",
+										children: "Help"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "context-menu",
+										children: "Context Menu"
+									})
+								]
+							}),
+							/* @__PURE__ */ p("optgroup", {
+								label: "Selection",
+								children: [
+									/* @__PURE__ */ f("option", {
+										value: "cell",
+										children: "Cell"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "crosshair",
+										children: "Crosshair"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "text",
+										children: "Text"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "vertical-text",
+										children: "Vertical Text"
+									})
+								]
+							}),
+							/* @__PURE__ */ p("optgroup", {
+								label: "Drag & Drop",
+								children: [
+									/* @__PURE__ */ f("option", {
+										value: "grab",
+										children: "Grab"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "grabbing",
+										children: "Grabbing"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "alias",
+										children: "Alias"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "copy",
+										children: "Copy"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "move",
+										children: "Move"
+									})
+								]
+							}),
+							/* @__PURE__ */ p("optgroup", {
+								label: "Zoom",
+								children: [/* @__PURE__ */ f("option", {
+									value: "zoom-in",
+									children: "Zoom In"
+								}), /* @__PURE__ */ f("option", {
+									value: "zoom-out",
+									children: "Zoom Out"
+								})]
+							}),
+							/* @__PURE__ */ p("optgroup", {
+								label: "Resize",
+								children: [
+									/* @__PURE__ */ f("option", {
+										value: "col-resize",
+										children: "Col Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "row-resize",
+										children: "Row Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "nesw-resize",
+										children: "NESW Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "nwse-resize",
+										children: "NWSE Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "ew-resize",
+										children: "EW Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "ns-resize",
+										children: "NS Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "n-resize",
+										children: "N Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "w-resize",
+										children: "W Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "s-resize",
+										children: "S Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "e-resize",
+										children: "E Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "nw-resize",
+										children: "NW Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "ne-resize",
+										children: "NE Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "sw-resize",
+										children: "SW Resize"
+									}),
+									/* @__PURE__ */ f("option", {
+										value: "se-resize",
+										children: "SE Resize"
+									})
+								]
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ f(a, {
+					onChange: T("box-shadow"),
+					value: x
+				}),
+				/* @__PURE__ */ f(s, {
+					onChange: T("transform"),
+					value: C
+				}),
+				/* @__PURE__ */ f(c, {
+					onChange: T("transition"),
+					value: b
+				}),
+				/* @__PURE__ */ f(o, {
+					onChange: T("filter"),
+					value: S
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { h as default };

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

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

package/dist/components/StyleInspector/categories/Effects/Filters/Filter.mjs

@@ -0,0 +1,37 @@
+import e from "../../../components/InspectorLabel/index.mjs";
+import t from "./FilterItem.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/Filters/Filter.tsx
+var s = ({ value: s, onChange: c }) => {
+	let l = [];
+	s && s !== "" && (l = s.split(" "));
+	let u = (e) => (t) => {
+		t.stopPropagation(), t.preventDefault(), l.splice(e, 1), l.length > 0 ? c?.(l.join(" ")) : c?.("");
+	}, d = (e) => (t) => {
+		t !== l[e] && (l[e] = t, c?.(l.join(" ")));
+	}, f = n(() => {
+		s ? c?.(`${s} blur(5px)`) : c?.("blur(5px)");
+	}, [s, c]);
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
+		className: "flex w-full justify-between",
+		children: [/* @__PURE__ */ i(e, {
+			keyValue: ["filter"],
+			children: "Filters"
+		}), /* @__PURE__ */ i(o, {
+			className: "cursor-pointer",
+			icon: "fas fa-plus",
+			onClick: f
+		})]
+	}), l.length > 0 && /* @__PURE__ */ i("div", {
+		className: "flex flex-col",
+		children: l.map((e, n) => /* @__PURE__ */ i(t, {
+			value: e,
+			onChange: d(n),
+			onRemove: u(n)
+		}, n))
+	})] });
+};
+//#endregion
+export { s as default };

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

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

package/dist/components/StyleInspector/categories/Effects/Filters/FilterItem.mjs

@@ -0,0 +1,129 @@
+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/Filters/FilterItem.tsx
+var l = ({ value: l = "blur(5px)", onRemove: u, onChange: d }) => {
+	let f = l.match(/[a-z-]+|[0-9.-]+(px|%|deg|)/gim), { propType: p = "blur", amount: m = "5px" } = {};
+	f?.length === 2 && ([p, m] = f);
+	let h = i({
+		propType: p,
+		amount: m
+	});
+	h.current = {
+		propType: p,
+		amount: m
+	};
+	let g = n((e) => (t) => {
+		let n = { ...h.current };
+		n[e] = t;
+		let { propType: r } = n, { amount: i } = n;
+		e === "propType" && h.current.amount !== t && (i = t === "blur" ? "5px" : t === "hue-rotate" ? "0deg" : "0.5"), d?.(`${r}(${i})`);
+	}, [d]), _ = r(() => p === "hue-rotate" ? { units: [{
+		label: "DEG",
+		value: "deg"
+	}] } : p === "blur" ? { units: [{
+		label: "PX",
+		value: "px"
+	}] } : {
+		units: void 0,
+		max: 1,
+		step: .1
+	}, [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__ */ a("div", {
+				className: "flex items-center",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex",
+					children: l
+				})
+			}), /* @__PURE__ */ a("div", {
+				className: "flex",
+				children: /* @__PURE__ */ a(c, {
+					size: "xs",
+					icon: "fas fa-trash-alt",
+					onClick: u,
+					intent: "danger",
+					title: "Remove"
+				})
+			})]
+		}), /* @__PURE__ */ a(s.Content, {
+			className: "w-[260px]",
+			children: /* @__PURE__ */ a("div", {
+				className: "flex w-full flex-col gap-2 p-2",
+				children: /* @__PURE__ */ o(t, {
+					label: "Type",
+					children: [/* @__PURE__ */ o(e, {
+						label: "Property",
+						onChange: g("propType"),
+						type: "select",
+						value: p,
+						children: [
+							/* @__PURE__ */ a("optgroup", {
+								label: "General",
+								children: /* @__PURE__ */ a("option", {
+									value: "blur",
+									children: "Blur"
+								})
+							}),
+							/* @__PURE__ */ o("optgroup", {
+								label: "Color Adjustments",
+								children: [
+									/* @__PURE__ */ a("option", {
+										value: "brightness",
+										children: "Brightness"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "contrast",
+										children: "Contrast"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "hue-rotate",
+										children: "Hue Rotate"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "saturate",
+										children: "Saturation"
+									})
+								]
+							}),
+							/* @__PURE__ */ o("optgroup", {
+								label: "Color Effects",
+								children: [
+									/* @__PURE__ */ a("option", {
+										value: "grayscale",
+										children: "Grayscale"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "invert",
+										children: "Invert"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "sepia",
+										children: "Sepia"
+									})
+								]
+							})
+						]
+					}), /* @__PURE__ */ a(e, {
+						label: "Amount",
+						value: m,
+						onChange: g("amount"),
+						type: "metric",
+						units: _.units,
+						step: _.step,
+						max: _.max
+					})]
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { l as default };

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+import e from "../../../components/InspectorLabel/index.mjs";
+import t from "./TransformItem.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/Transform/Transform.tsx
+var s = ({ value: s, onChange: c }) => {
+	let l = [];
+	s && s !== "" && (l = s.match(/((translate3d|scale3d|skew)\([0-9a-z-, .%]+\))|(rotateX.*rotateZ\([0-9a-z%]+\))/gim) ?? []);
+	let u = (e) => (t) => {
+		t.stopPropagation(), t.preventDefault(), l.splice(e, 1), l.length > 0 ? c?.(l.join(" ")) : c?.("");
+	}, d = (e) => (t) => {
+		t !== l[e] && (l[e] = t, c?.(l.join(" ")));
+	}, f = n(() => {
+		s ? c?.(`${s} translate3d(0px, 0px, 0px)`) : c?.("translate3d(0px, 0px, 0px)");
+	}, [c, s]);
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
+		className: "flex justify-between",
+		children: [/* @__PURE__ */ i(e, {
+			keyValue: ["transform"],
+			children: "2D & 3D Transforms"
+		}), /* @__PURE__ */ i(o, {
+			className: "cursor-pointer",
+			icon: "fas fa-plus",
+			onClick: f
+		})]
+	}), l.length > 0 && /* @__PURE__ */ i("div", {
+		className: "flex flex-col",
+		children: l.map((e, n) => /* @__PURE__ */ i(t, {
+			value: e,
+			onChange: d(n),
+			onRemove: u(n)
+		}, n))
+	})] });
+};
+//#endregion
+export { s as default };

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

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

package/dist/components/StyleInspector/categories/Effects/Transform/TransformItem.mjs

@@ -0,0 +1,148 @@
+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/Transform/TransformItem.tsx
+var l = ({ value: l = "translate3d(0px, 0px, 0px)", onRemove: u, onChange: d }) => {
+	let f = l.match(/[a-x0-9-.%]+/gim), { type: p = "translate3d", posX: m = "0px", posY: h = "0px", posZ: g = "0px" } = {};
+	f?.length === 6 ? [, m, p, h, , g] = f : f?.length === 4 ? [p, m, h, g] = f : f?.length === 3 && ([p, m, h] = f);
+	let _ = i({
+		type: p,
+		posX: m,
+		posY: h,
+		posZ: g
+	});
+	_.current = {
+		type: p,
+		posX: m,
+		posY: h,
+		posZ: g
+	};
+	let v = n((e) => (t) => {
+		let n = { ..._.current };
+		n[e] = t;
+		let { type: r } = n, { posX: i, posY: a, posZ: o } = n;
+		e === "type" && _.current.type !== t && (t === "rotate" || t === "skew" ? {posX: i, posY: a, posZ: o} = {
+			posX: "0deg",
+			posY: "0deg",
+			posZ: "0deg"
+		} : t === "scale3d" ? {posX: i, posY: a, posZ: o} = {
+			posX: "1",
+			posY: "1",
+			posZ: "1"
+		} : {posX: i, posY: a, posZ: o} = {
+			posX: "0px",
+			posY: "0px",
+			posZ: "0px"
+		}), r === "rotate" ? d?.(`${r}X(${i}) ${r}Y(${a}) ${r}Z(${o})`) : r === "skew" ? d?.(`${r}(${i}, ${a})`) : d?.(`${r}(${i}, ${a}, ${o})`);
+	}, [d]), y = r(() => [
+		{
+			value: "translate3d",
+			icon: /* @__PURE__ */ a("div", {
+				className: "px-1 text-xs select-none",
+				children: "Move"
+			}),
+			description: "",
+			active: p === "translate3d",
+			size: "custom"
+		},
+		{
+			value: "scale3d",
+			icon: /* @__PURE__ */ a("div", {
+				className: "px-1 text-xs select-none",
+				children: "Scale"
+			}),
+			description: "",
+			active: p === "scale3d",
+			size: "custom"
+		},
+		{
+			value: "rotate",
+			icon: /* @__PURE__ */ a("div", {
+				className: "px-1 text-xs select-none",
+				children: "Rotate"
+			}),
+			description: "",
+			active: p === "rotate",
+			size: "custom"
+		},
+		{
+			value: "skew",
+			icon: /* @__PURE__ */ a("div", {
+				className: "px-1 text-xs select-none",
+				children: "Skew"
+			}),
+			description: "",
+			active: p === "skew",
+			size: "custom"
+		}
+	], [p]), b = r(() => p === "rotate" || p === "skew" ? { units: [{
+		label: "DEG",
+		value: "deg"
+	}] } : p === "scale3d" ? { units: void 0 } : { units: [{
+		label: "PX",
+		value: "px"
+	}] }, [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__ */ a("div", {
+				className: "flex items-center",
+				children: l
+			}), /* @__PURE__ */ a("div", {
+				className: "flex",
+				children: /* @__PURE__ */ a(c, {
+					size: "xs",
+					icon: "fas fa-trash-alt",
+					onClick: u,
+					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: v("type"),
+						type: "iconGroup",
+						items: y
+					})
+				}), /* @__PURE__ */ o(t, {
+					label: "Position",
+					children: [
+						/* @__PURE__ */ a(e, {
+							label: "X",
+							value: m,
+							onChange: v("posX"),
+							type: "metric",
+							...b
+						}),
+						/* @__PURE__ */ a(e, {
+							label: "Y",
+							value: m,
+							onChange: v("posY"),
+							type: "metric",
+							...b
+						}),
+						p !== "skew" && /* @__PURE__ */ a(e, {
+							label: "Z",
+							value: m,
+							onChange: v("posZ"),
+							type: "metric",
+							...b
+						})
+					]
+				})]
+			})
+		})]
+	});
+};
+//#endregion
+export { l as default };

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

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

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

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

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

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