@plitzi/sdk-style 0.30.19

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

@@ -0,0 +1,129 @@
+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 "./PositionAdvanced.mjs";
+import o from "./PositionAdvancedButtons.mjs";
+import s from "./PositionClear.mjs";
+import c from "./PositionFloat.mjs";
+import { memo as l, use as u, useCallback as d, useMemo as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import h from "@plitzi/plitzi-ui/icons/XMark";
+import g from "@plitzi/plitzi-ui/icons/ListNumbers";
+import _ from "@plitzi/plitzi-ui/icons/PositionAbsolute";
+import v from "@plitzi/plitzi-ui/icons/PositionFixed";
+import y from "@plitzi/plitzi-ui/icons/PositionRelative";
+//#region src/components/StyleInspector/categories/Position/Position.tsx
+var b = [
+	"position",
+	"top",
+	"bottom",
+	"z-index",
+	"float",
+	"clear",
+	"left",
+	"right"
+], x = [
+	"position",
+	"top",
+	"bottom",
+	"left",
+	"right"
+], S = l(({ replaceTokens: l = !1, isCollapsed: S = !0, onCollapse: C }) => {
+	let { setValue: w } = u(e), { position: T, top: E, bottom: D, left: O, right: k, float: A, clear: j, "z-index": M } = t({
+		keys: b,
+		asValue: !0,
+		replaceTokens: l
+	}), N = f(() => ({
+		top: E,
+		bottom: D,
+		left: O,
+		right: k
+	}), [
+		E,
+		D,
+		O,
+		k
+	]), P = d((e) => C?.("position", e), [C]), F = d((e) => (t) => {
+		w(e === "position-path" ? void 0 : e, t);
+	}, [w]), I = f(() => [
+		{
+			value: "static",
+			icon: /* @__PURE__ */ p(h, {}),
+			description: "Static",
+			active: T === "static"
+		},
+		{
+			value: "relative",
+			icon: /* @__PURE__ */ p(y, {}),
+			description: "Relative",
+			active: T === "relative"
+		},
+		{
+			value: "absolute",
+			icon: /* @__PURE__ */ p(_, {}),
+			description: "Absolute",
+			active: T === "absolute"
+		},
+		{
+			value: "fixed",
+			icon: /* @__PURE__ */ p(v, {}),
+			description: "Fixed",
+			active: T === "fixed"
+		},
+		{
+			value: "sticky",
+			icon: /* @__PURE__ */ p(g, {}),
+			description: "Sticky",
+			active: T === "sticky"
+		}
+	], [T]);
+	return /* @__PURE__ */ p(i, {
+		title: "Position",
+		dotKeys: b,
+		isCollapsed: S,
+		onCollapse: P,
+		children: /* @__PURE__ */ m("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				/* @__PURE__ */ p(r, {
+					keys: x,
+					label: "Position",
+					children: /* @__PURE__ */ p(n, {
+						onChange: F("position"),
+						type: "iconGroup",
+						items: I
+					})
+				}),
+				(T === "fixed" || T === "absolute") && /* @__PURE__ */ p(o, {
+					value: N,
+					onChange: F("position-path")
+				}),
+				/* @__PURE__ */ p(a, {
+					value: N,
+					onChange: F
+				}),
+				/* @__PURE__ */ p(c, {
+					value: A,
+					onChange: F("float")
+				}),
+				/* @__PURE__ */ p(s, {
+					value: j,
+					onChange: F("clear")
+				}),
+				/* @__PURE__ */ p(r, {
+					keys: ["z-index"],
+					label: "Z-Index",
+					children: /* @__PURE__ */ p(n, {
+						onChange: F("z-index"),
+						type: "input",
+						value: M
+					})
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { S as default };

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

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

package/dist/components/StyleInspector/categories/Position/PositionAdvanced.mjs

@@ -0,0 +1,88 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Position/PositionAdvanced.tsx
+var i = [{
+	label: "PX",
+	value: "px"
+}, {
+	label: "%",
+	value: "%"
+}], a = ["auto"], o = ({ value: o, onChange: s }) => {
+	let { top: c, bottom: l, left: u, right: d } = o ?? {};
+	return /* @__PURE__ */ n(t, {
+		label: "",
+		keys: [
+			"top",
+			"bottom",
+			"left",
+			"right"
+		],
+		className: "justify-center",
+		children: /* @__PURE__ */ r("div", {
+			className: "grid grid-cols-3 place-items-center items-center justify-center gap-2",
+			children: [
+				/* @__PURE__ */ n("div", {
+					className: "col-start-2 flex max-w-[80px] items-center justify-center",
+					children: /* @__PURE__ */ n(e, {
+						keys: ["top"],
+						value: c,
+						onChange: s?.("top"),
+						type: "metric",
+						units: i,
+						allowedWords: a,
+						className: "text-center"
+					})
+				}),
+				/* @__PURE__ */ n("div", {
+					className: "row-start-2 flex max-w-[80px] items-center justify-self-end",
+					children: /* @__PURE__ */ n(e, {
+						keys: ["left"],
+						value: u,
+						onChange: s?.("left"),
+						type: "metric",
+						units: i,
+						allowedWords: a,
+						className: "text-center"
+					})
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "row-start-2 grid h-24 w-full auto-rows-fr grid-cols-3 place-items-center gap-2",
+					children: [
+						/* @__PURE__ */ n("div", { className: "col-start-2 h-full w-0.5 bg-gray-300 dark:bg-zinc-600" }),
+						/* @__PURE__ */ n("div", { className: "row-start-2 h-0.5 w-full bg-gray-300 dark:bg-zinc-600" }),
+						/* @__PURE__ */ n("div", { className: "row-start-2 h-8 w-8 rounded bg-gray-300 dark:bg-zinc-600" }),
+						/* @__PURE__ */ n("div", { className: "row-start-2 h-0.5 w-full bg-gray-300 dark:bg-zinc-600" }),
+						/* @__PURE__ */ n("div", { className: "col-start-2 row-start-3 h-full w-0.5 bg-gray-300 dark:bg-zinc-600" })
+					]
+				}),
+				/* @__PURE__ */ n("div", {
+					className: "row-start-2 flex max-w-[80px] items-center justify-self-start",
+					children: /* @__PURE__ */ n(e, {
+						keys: ["right"],
+						value: d,
+						onChange: s?.("right"),
+						type: "metric",
+						units: i,
+						allowedWords: a,
+						className: "text-center"
+					})
+				}),
+				/* @__PURE__ */ n("div", {
+					className: "col-start-2 row-start-3 flex max-w-[80px] items-center justify-center",
+					children: /* @__PURE__ */ n(e, {
+						keys: ["bottom"],
+						value: l,
+						onChange: s?.("bottom"),
+						type: "metric",
+						units: i,
+						allowedWords: a,
+						className: "text-center"
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { o as default };

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

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

package/dist/components/StyleInspector/categories/Position/PositionAdvancedButtons.mjs

@@ -0,0 +1,132 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/icons/PositionAll";
+import a from "@plitzi/plitzi-ui/icons/PositionBottom";
+import o from "@plitzi/plitzi-ui/icons/PositionBottomLeft";
+import s from "@plitzi/plitzi-ui/icons/PositionBottomRight";
+import c from "@plitzi/plitzi-ui/icons/PositionLeft";
+import l from "@plitzi/plitzi-ui/icons/PositionRight";
+import u from "@plitzi/plitzi-ui/icons/PositionTop";
+import d from "@plitzi/plitzi-ui/icons/PositionTopLeft";
+import f from "@plitzi/plitzi-ui/icons/PositionTopRight";
+//#region src/components/StyleInspector/categories/Position/PositionAdvancedButtons.tsx
+var p = ({ value: p, onChange: m }) => {
+	let { top: h, bottom: g, left: _, right: v } = p ?? {};
+	return /* @__PURE__ */ r(t, {
+		label: "",
+		children: /* @__PURE__ */ r(e, {
+			onChange: m,
+			type: "iconGroup",
+			items: n(() => [
+				{
+					value: {
+						top: "0%",
+						left: "0%",
+						bottom: "auto",
+						right: "auto"
+					},
+					icon: /* @__PURE__ */ r(d, {}),
+					description: "Top Left",
+					active: h === "0%" && _ === "0%" && g === "auto" && v === "auto"
+				},
+				{
+					value: {
+						top: "0%",
+						left: "auto",
+						bottom: "auto",
+						right: "0%"
+					},
+					icon: /* @__PURE__ */ r(f, {}),
+					description: "Top Right",
+					active: h === "0%" && _ === "auto" && g === "auto" && v === "0%"
+				},
+				{
+					value: {
+						top: "auto",
+						left: "0%",
+						bottom: "0%",
+						right: "auto"
+					},
+					icon: /* @__PURE__ */ r(o, {}),
+					description: "Bottom Left",
+					active: h === "auto" && _ === "0%" && g === "0%" && v === "auto"
+				},
+				{
+					value: {
+						top: "auto",
+						left: "auto",
+						bottom: "0%",
+						right: "0%"
+					},
+					icon: /* @__PURE__ */ r(s, {}),
+					description: "Bottom Right",
+					active: h === "0%" && _ === "0%" && g === "0%" && v === "auto"
+				},
+				{
+					value: {
+						top: "0%",
+						left: "0%",
+						bottom: "0%",
+						right: "auto"
+					},
+					icon: /* @__PURE__ */ r(c, {}),
+					description: "Left",
+					active: h === "0%" && _ === "0%" && g === "0%" && v === "auto"
+				},
+				{
+					value: {
+						top: "0%",
+						left: "auto",
+						bottom: "0%",
+						right: "0%"
+					},
+					icon: /* @__PURE__ */ r(l, {}),
+					description: "Right",
+					active: h === "0%" && _ === "auto" && g === "0%" && v === "0%"
+				},
+				{
+					value: {
+						top: "auto",
+						left: "0%",
+						bottom: "0%",
+						right: "0%"
+					},
+					icon: /* @__PURE__ */ r(a, {}),
+					description: "Bottom",
+					active: h === "auto" && _ === "0%" && g === "0%" && v === "0%"
+				},
+				{
+					value: {
+						top: "0%",
+						left: "0%",
+						bottom: "auto",
+						right: "0%"
+					},
+					icon: /* @__PURE__ */ r(u, {}),
+					description: "Top",
+					active: h === "0%" && _ === "0%" && g === "auto" && v === "0%"
+				},
+				{
+					value: {
+						top: "0%",
+						left: "0%",
+						bottom: "0%",
+						right: "0%"
+					},
+					icon: /* @__PURE__ */ r(i, {}),
+					description: "Full",
+					active: h === "0%" && _ === "0%" && g === "0%" && v === "0%"
+				}
+			], [
+				h,
+				_,
+				g,
+				v
+			])
+		})
+	});
+};
+//#endregion
+export { p as default };

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

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

package/dist/components/StyleInspector/categories/Position/PositionClear.mjs

@@ -0,0 +1,45 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/icons/XMark";
+import a from "@plitzi/plitzi-ui/icons/ClearBoth";
+import o from "@plitzi/plitzi-ui/icons/ClearLeft";
+import s from "@plitzi/plitzi-ui/icons/ClearRight";
+//#region src/components/StyleInspector/categories/Position/PositionClear.tsx
+var c = ({ value: c, onChange: l }) => /* @__PURE__ */ r(t, {
+	label: "Clear",
+	keys: ["clear"],
+	children: /* @__PURE__ */ r(e, {
+		onChange: l,
+		type: "iconGroup",
+		items: n(() => [
+			{
+				value: "none",
+				icon: /* @__PURE__ */ r(i, {}),
+				description: "Static",
+				active: c === "none"
+			},
+			{
+				value: "left",
+				icon: /* @__PURE__ */ r(o, {}),
+				description: "Clear Left",
+				active: c === "left"
+			},
+			{
+				value: "right",
+				icon: /* @__PURE__ */ r(s, {}),
+				description: "Clear Right",
+				active: c === "right"
+			},
+			{
+				value: "both",
+				icon: /* @__PURE__ */ r(a, {}),
+				description: "Clear Both",
+				active: c === "both"
+			}
+		], [c])
+	})
+});
+//#endregion
+export { c as default };

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

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

package/dist/components/StyleInspector/categories/Position/PositionFloat.mjs

@@ -0,0 +1,38 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/icons/XMark";
+import a from "@plitzi/plitzi-ui/icons/FloatLeft";
+import o from "@plitzi/plitzi-ui/icons/FloatRight";
+//#region src/components/StyleInspector/categories/Position/PositionFloat.tsx
+var s = ({ value: s, onChange: c }) => /* @__PURE__ */ r(t, {
+	label: "Float",
+	keys: ["float"],
+	children: /* @__PURE__ */ r(e, {
+		onChange: c,
+		type: "iconGroup",
+		items: n(() => [
+			{
+				value: "none",
+				icon: /* @__PURE__ */ r(i, {}),
+				description: "Static",
+				active: s === "none"
+			},
+			{
+				value: "left",
+				icon: /* @__PURE__ */ r(a, {}),
+				description: "Float Left",
+				active: s === "left"
+			},
+			{
+				value: "right",
+				icon: /* @__PURE__ */ r(o, {}),
+				description: "Float Right",
+				active: s === "right"
+			}
+		], [s])
+	})
+});
+//#endregion
+export { s as default };

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { StyleItem } from '@plitzi/sdk-shared';
+export type VariablesProps = {
+    selectors?: StyleItem[];
+    isCollapsed?: boolean;
+    onCollapse?: (category: string, isCollapsed: boolean) => void;
+};
+declare const RawStyle: ({ selectors, isCollapsed, onCollapse }: VariablesProps) => import("react/jsx-runtime").JSX.Element;
+export default RawStyle;

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

@@ -0,0 +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";
+//#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 }),
+		title: "Raw Style",
+		isCollapsed: u,
+		onCollapse: m,
+		children: /* @__PURE__ */ o(s, {
+			value: p,
+			className: "h-full",
+			theme: f === "dark" ? "dark" : "light",
+			lineWrapping: !0,
+			readOnly: !0
+		})
+	});
+};
+//#endregion
+export { l as default };

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

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

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

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

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

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

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

@@ -0,0 +1,101 @@
+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 "./SizeFit.mjs";
+import o from "./SizeOverflow.mjs";
+import s from "./SizePosition.mjs";
+import { memo as c, use as l, useCallback as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Size/Size.tsx
+var p = [
+	"width",
+	"height",
+	"min-width",
+	"min-height",
+	"max-width",
+	"max-height",
+	"overflow",
+	"object-fit",
+	"object-position"
+], m = ["width", "height"], h = ["min-width", "min-height"], g = ["max-width", "max-height"], _ = c(({ replaceTokens: c = !1, isCollapsed: _ = !0, onCollapse: v }) => {
+	let { setValue: y } = l(e), { width: b, height: x, "min-width": S, "min-height": C, "max-width": w, "max-height": T, overflow: E, "object-position": D, "object-fit": O } = t({
+		keys: p,
+		asValue: !0,
+		replaceTokens: c
+	}), k = u((e) => v?.("size", e), [v]), A = u((e) => (t) => y(e, t), [y]);
+	return /* @__PURE__ */ f(i, {
+		title: "Size",
+		dotKeys: p,
+		isCollapsed: _,
+		onCollapse: k,
+		children: [
+			/* @__PURE__ */ f(r, {
+				label: "Size",
+				keys: m,
+				children: [/* @__PURE__ */ d(n, {
+					keys: ["width"],
+					preffix: "W",
+					value: b,
+					onChange: A("width"),
+					type: "metric"
+				}), /* @__PURE__ */ d(n, {
+					keys: ["height"],
+					preffix: "H",
+					value: x,
+					onChange: A("height"),
+					type: "metric"
+				})]
+			}),
+			/* @__PURE__ */ f(r, {
+				label: "Min Size",
+				keys: h,
+				children: [/* @__PURE__ */ d(n, {
+					keys: ["min-width"],
+					preffix: "W",
+					value: S,
+					onChange: A("min-width"),
+					type: "metric"
+				}), /* @__PURE__ */ d(n, {
+					keys: ["min-height"],
+					preffix: "H",
+					value: C,
+					onChange: A("min-height"),
+					type: "metric"
+				})]
+			}),
+			/* @__PURE__ */ f(r, {
+				label: "Max Size",
+				keys: g,
+				children: [/* @__PURE__ */ d(n, {
+					keys: ["max-width"],
+					preffix: "W",
+					value: w,
+					onChange: A("max-width"),
+					type: "metric"
+				}), /* @__PURE__ */ d(n, {
+					keys: ["max-height"],
+					preffix: "H",
+					value: T,
+					onChange: A("max-height"),
+					type: "metric"
+				})]
+			}),
+			/* @__PURE__ */ d(o, {
+				value: E,
+				onChange: A
+			}),
+			/* @__PURE__ */ d(s, {
+				value: D,
+				onChange: A
+			}),
+			/* @__PURE__ */ d(a, {
+				value: O,
+				onChange: A
+			})
+		]
+	});
+});
+//#endregion
+export { _ as default };

package/dist/components/StyleInspector/categories/Size/SizeFit.d.ts

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