@plitzi/sdk-style 0.30.19

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

@@ -0,0 +1,41 @@
+import e from "../../../components/InspectorLabel/index.mjs";
+import t from "./TransitionItem.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/Transition/Transition.tsx
+var s = ({ value: s, onChange: c }) => {
+	let l = [];
+	s && s !== "" && (l = s.split(/,(?![^()]*\))/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(() => {
+		l.length > 0 ? c?.(`${s},opacity 200ms ease 0ms`) : c?.("opacity 200ms ease 0ms");
+	}, [
+		c,
+		l.length,
+		s
+	]);
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
+		className: "flex justify-between",
+		children: [/* @__PURE__ */ i(e, {
+			keyValue: ["transition"],
+			children: "Transitions"
+		}), /* @__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/Transition/TransitionItem.d.ts

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

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

@@ -0,0 +1,365 @@
+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 { 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";
+import f from "@plitzi/plitzi-ui/Icon";
+import p from "@plitzi/plitzi-ui/Input";
+import m from "@plitzi/plitzi-ui/icons/EffectsTransitionEase";
+//#region src/components/StyleInspector/categories/Effects/Transition/TransitionItem.tsx
+var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
+	let [v, y] = c(0), [b, x] = c(void 0), S = () => {
+		if (b) {
+			clearInterval(b), x(void 0), y(0);
+			return;
+		}
+		x(setInterval(() => {
+			y((e) => (e + .005 <= 1 ? e += .005 : e = 0, e));
+		}, 10));
+	}, C = h.split(/ (?![^()]*\))/gim), { property: w = "opacity", duration: T = "0ms", easing: E = "ease", delay: D = "0ms" } = {};
+	C.length === 4 && ([w, T, E, D] = C);
+	let O = s({
+		property: w,
+		duration: T,
+		easing: E,
+		delay: D
+	});
+	O.current = {
+		property: w,
+		duration: T,
+		easing: E,
+		delay: D
+	};
+	let k = o((e) => (t) => {
+		let n = { ...O.current };
+		if (e === "easing" && t.includes(",")) {
+			let r = t.split(",");
+			n[e] = `cubic-bezier(${r[0]}, ${r[1]}, ${r[2]}, ${r[3]})`;
+		} else e === "easing" && Array.isArray(t) ? n[e] = `cubic-bezier(${t[0]}, ${t[1]}, ${t[2]}, ${t[3]})` : n[e] = t;
+		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, {
+		className: "w-full",
+		closeOnClick: !1,
+		children: [/* @__PURE__ */ u(d.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__ */ l("div", {
+				className: "flex items-center",
+				children: `${w} ${T} after ${D}`
+			}), /* @__PURE__ */ l("div", {
+				className: "flex",
+				children: /* @__PURE__ */ l(f, {
+					size: "xs",
+					icon: "fas fa-trash-alt",
+					onClick: g,
+					intent: "danger",
+					title: "Remove"
+				})
+			})]
+		}), /* @__PURE__ */ l(d.Content, {
+			className: "w-[260px]",
+			children: /* @__PURE__ */ u("div", {
+				className: "flex w-full flex-col gap-2 p-2",
+				children: [
+					/* @__PURE__ */ l(r, {
+						label: "Property",
+						children: /* @__PURE__ */ u(n, {
+							onChange: k("property"),
+							type: "select",
+							value: w,
+							children: [
+								/* @__PURE__ */ u("optgroup", {
+									label: "Common",
+									children: [
+										/* @__PURE__ */ l("option", {
+											value: "opacity",
+											children: "Opacity"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "margin",
+											children: "Margin"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "padding",
+											children: "Padding"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "border",
+											children: "Border"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "transform",
+											children: "Transform"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "filter",
+											children: "Filter"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "flex",
+											children: "Flex"
+										})
+									]
+								}),
+								/* @__PURE__ */ u("optgroup", {
+									label: "Background",
+									children: [
+										/* @__PURE__ */ l("option", {
+											value: "background-color",
+											children: "Background Color"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "background-position",
+											children: "Background Position"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "text-shadow",
+											children: "Text Shadow"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "box-shadow",
+											children: "Box Shadow"
+										})
+									]
+								}),
+								/* @__PURE__ */ u("optgroup", {
+									label: "Size",
+									children: [
+										/* @__PURE__ */ l("option", {
+											value: "width",
+											children: "Width"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "height",
+											children: "Height"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "max-width",
+											children: "Max Width"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "max-height",
+											children: "Max Height"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "min-width",
+											children: "Min Width"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "min-height",
+											children: "Min Height"
+										})
+									]
+								}),
+								/* @__PURE__ */ u("optgroup", {
+									label: "Borders",
+									children: [
+										/* @__PURE__ */ l("option", {
+											value: "border-radius",
+											children: "Border Radius"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "border-color",
+											children: "Border Color"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "border-width",
+											children: "Border Width"
+										})
+									]
+								}),
+								/* @__PURE__ */ u("optgroup", {
+									label: "Typography",
+									children: [
+										/* @__PURE__ */ l("option", {
+											value: "font-color",
+											children: "Font Color"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "font-size",
+											children: "Font Size"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "line-height",
+											children: "Line Height"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "letter-spacing",
+											children: "Letter Spacing"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "text-indent",
+											children: "Text Indent"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "word-spacing",
+											children: "Word Spacing"
+										})
+									]
+								}),
+								/* @__PURE__ */ u("optgroup", {
+									label: "Position",
+									children: [
+										/* @__PURE__ */ l("option", {
+											value: "top",
+											children: "Top"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "left",
+											children: "Left"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "bottom",
+											children: "Bottom"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "right",
+											children: "Right"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "z-index",
+											children: "Z Index"
+										})
+									]
+								}),
+								/* @__PURE__ */ u("optgroup", {
+									label: "Margin",
+									children: [
+										/* @__PURE__ */ l("option", {
+											value: "margin-bottom",
+											children: "Margin Bottom"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "margin-left",
+											children: "Margin Left"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "margin-right",
+											children: "Margin RIght"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "margin-top",
+											children: "Margin Top"
+										})
+									]
+								}),
+								/* @__PURE__ */ u("optgroup", {
+									label: "Padding",
+									children: [
+										/* @__PURE__ */ l("option", {
+											value: "padding-bottom",
+											children: "Padding Bottom"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "padding-left",
+											children: "Padding Left"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "padding-right",
+											children: "Padding Right"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "padding-top",
+											children: "Padding Top"
+										})
+									]
+								}),
+								/* @__PURE__ */ u("optgroup", {
+									label: "Flex",
+									children: [
+										/* @__PURE__ */ l("option", {
+											value: "flex-grow",
+											children: "Flex Grow"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "flex-shrink",
+											children: "Flex Shrink"
+										}),
+										/* @__PURE__ */ l("option", {
+											value: "flex-basis",
+											children: "Flex Basis"
+										})
+									]
+								}),
+								/* @__PURE__ */ l("optgroup", {
+									label: "Advanced",
+									children: /* @__PURE__ */ l("option", {
+										value: "all",
+										children: "All Properties"
+									})
+								})
+							]
+						})
+					}),
+					/* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(n, {
+						label: "Duration",
+						value: T,
+						onChange: k("duration"),
+						type: "metric",
+						units: [{
+							label: "MS",
+							value: "ms"
+						}],
+						min: 0
+					}), /* @__PURE__ */ l(n, {
+						label: "Delay",
+						value: D,
+						onChange: k("delay"),
+						type: "metric",
+						units: [{
+							label: "MS",
+							value: "ms"
+						}],
+						min: 0
+					})] }),
+					/* @__PURE__ */ u(r, {
+						label: "Easing",
+						children: [/* @__PURE__ */ u(d, {
+							containerLeftOffset: -92,
+							containerTopOffset: 154,
+							closeOnClick: !1,
+							children: [/* @__PURE__ */ l(d.Trigger, { children: /* @__PURE__ */ l(f, {
+								className: "rounded-sm border border-gray-300 p-0.5 dark:border-zinc-600",
+								size: "xl",
+								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, {
+									className: "w-[260px]",
+									onChange: k("easing")
+								}), /* @__PURE__ */ u("div", {
+									className: "m-2 flex flex-col",
+									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, {
+										value: j,
+										progress: v,
+										height: 200,
+										width: 200,
+										handleRadius: 6
+									})]
+								})]
+							})]
+						}), /* @__PURE__ */ l(p, {
+							className: "w-full grow",
+							type: "text",
+							size: "xs",
+							value: j.toString(),
+							readOnly: !0,
+							onChange: A
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+//#endregion
+export { h as default };

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,82 @@
+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 { memo as a, use as o, useCallback as s, useMemo as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import u from "@plitzi/plitzi-ui/icons/XMark";
+import d from "@plitzi/plitzi-ui/icons/ListCircles";
+import f from "@plitzi/plitzi-ui/icons/ListDots";
+import p from "@plitzi/plitzi-ui/icons/ListLetters";
+import m from "@plitzi/plitzi-ui/icons/ListNumbers";
+import h from "@plitzi/plitzi-ui/icons/ListRoman";
+import g from "@plitzi/plitzi-ui/icons/ListSquares";
+//#region src/components/StyleInspector/categories/List/List.tsx
+var _ = "none", v = "circle", y = "decimal", b = "disc", x = "square", S = "lower-alpha", C = "lower-roman", w = ["list-style"], T = a(({ replaceTokens: a = !1, isCollapsed: T = !0, onCollapse: E }) => {
+	let { setValue: D } = o(e), { "list-style": O } = t({
+		keys: w,
+		asValue: !0,
+		replaceTokens: a
+	});
+	return /* @__PURE__ */ l(i, {
+		title: "List",
+		dotKeys: w,
+		isCollapsed: T,
+		onCollapse: s((e) => E?.("list", e), [E]),
+		children: /* @__PURE__ */ l(r, {
+			keys: w,
+			label: "Style",
+			children: /* @__PURE__ */ l(n, {
+				onChange: s((e) => D("list-style", e), [D]),
+				type: "iconGroup",
+				items: c(() => [
+					{
+						value: _,
+						icon: /* @__PURE__ */ l(u, {}),
+						description: "",
+						active: O === _
+					},
+					{
+						value: b,
+						icon: /* @__PURE__ */ l(f, {}),
+						description: "",
+						active: O === b
+					},
+					{
+						value: v,
+						icon: /* @__PURE__ */ l(d, {}),
+						description: "",
+						active: O === v
+					},
+					{
+						value: x,
+						icon: /* @__PURE__ */ l(g, {}),
+						description: "",
+						active: O === x
+					},
+					{
+						value: y,
+						icon: /* @__PURE__ */ l(m, {}),
+						description: "",
+						active: O === y
+					},
+					{
+						value: S,
+						icon: /* @__PURE__ */ l(p, {}),
+						description: "",
+						active: O === S
+					},
+					{
+						value: C,
+						icon: /* @__PURE__ */ l(h, {}),
+						description: "",
+						active: O === C
+					}
+				], [O])
+			})
+		})
+	});
+});
+//#endregion
+export { T as default };

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

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

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

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

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

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

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

@@ -0,0 +1,82 @@
+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 { memo as a, use as o, useCallback as s, useMemo as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import u from "@plitzi/plitzi-ui/icons/XMark";
+import d from "@plitzi/plitzi-ui/icons/ListCircles";
+import f from "@plitzi/plitzi-ui/icons/ListDots";
+import p from "@plitzi/plitzi-ui/icons/ListLetters";
+import m from "@plitzi/plitzi-ui/icons/ListNumbers";
+import h from "@plitzi/plitzi-ui/icons/ListRoman";
+import g from "@plitzi/plitzi-ui/icons/ListSquares";
+//#region src/components/StyleInspector/categories/ListItem/ListItem.tsx
+var _ = ["list-style-type"], v = a(({ replaceTokens: a = !1, isCollapsed: v = !0, onCollapse: y }) => {
+	let { setValue: b } = o(e), { "list-style-type": x } = t({
+		keys: _,
+		asValue: !0,
+		replaceTokens: a
+	});
+	return /* @__PURE__ */ l(i, {
+		title: "List Item",
+		dotKeys: _,
+		isCollapsed: v,
+		onCollapse: s((e) => y?.("listItem", e), [y]),
+		children: /* @__PURE__ */ l(r, {
+			keys: _,
+			label: "Style",
+			children: /* @__PURE__ */ l(n, {
+				onChange: s((e) => b("list-style-type", e), [b]),
+				type: "iconGroup",
+				items: c(() => [
+					{
+						value: "none",
+						icon: /* @__PURE__ */ l(u, {}),
+						description: "",
+						active: x === "none"
+					},
+					{
+						value: "disc",
+						icon: /* @__PURE__ */ l(f, {}),
+						description: "",
+						active: x === "disc"
+					},
+					{
+						value: "circle",
+						icon: /* @__PURE__ */ l(d, {}),
+						description: "",
+						active: x === "circle"
+					},
+					{
+						value: "square",
+						icon: /* @__PURE__ */ l(g, {}),
+						description: "",
+						active: x === "square"
+					},
+					{
+						value: "decimal",
+						icon: /* @__PURE__ */ l(m, {}),
+						description: "",
+						active: x === "decimal"
+					},
+					{
+						value: "lower-alpha",
+						icon: /* @__PURE__ */ l(p, {}),
+						description: "",
+						active: x === "lower-alpha"
+					},
+					{
+						value: "lower-roman",
+						icon: /* @__PURE__ */ l(h, {}),
+						description: "",
+						active: x === "lower-roman"
+					}
+				], [x])
+			})
+		})
+	});
+});
+//#endregion
+export { v as default };

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

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

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

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

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

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