@plitzi/sdk-style 0.30.19

package/dist/components/StyleInspector/StyleInspector.mjs

@@ -0,0 +1,201 @@
+import e from "./Inspector.mjs";
+import t from "../Selector/index.mjs";
+import { get as n, pick as r, set as i } from "@plitzi/plitzi-ui/helpers";
+import { clsx as a } from "clsx";
+import { use as o, useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { createStoreHook as p } from "@plitzi/sdk-store/createStore";
+import { produce as m } from "immer";
+import h from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+import g from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
+import _ from "@plitzi/plitzi-ui/Select";
+import v from "@plitzi/plitzi-ui/Select2";
+//#region src/components/StyleInspector/StyleInspector.tsx
+var y = ({ displayMode: y, selectors: b, value: x, element: S, mode: C = "element", componentType: w, styleSelectors: T, styleSelectorsAvailables: E, componentSubTypesAvailables: D, allowStyleSelector: O = !0, allowStyleState: k = !0, allowStyleVariant: A = !0, onChange: j, onRemoveVariant: M }) => {
+	let { useStoreSync: N } = p(), [P, F] = u(void 0), [I, L] = u("base"), [R, z] = u(void 0), [B, V] = u(void 0);
+	N("styleSelector", I, { enabled: C === "element" }), N("styleVariant", R, { enabled: C === "element" }), N("styleState", B, { enabled: C === "element" });
+	let { builderHandler: H } = o(h), U = l(() => n(T, I, ""), [T, I]), W = l(() => Object.values(r(b ?? {}, S ? [S.definition.type, ...U.split(" ")] : U.split(" "))), [
+		b,
+		S,
+		U
+	]), G = l(() => x ? n(b, x) : void 0, [b, x]), K = l(() => Object.keys(G?.attributes[I]?.variants ?? {}).map((e) => ({
+		label: e,
+		value: e
+	})), [G?.attributes, I]);
+	c(() => {
+		if (L("base"), C !== "element") return;
+		let e = n(T, "base", "").split(" "), t = e[e.length - 1];
+		j?.(t || ""), V(void 0), F(void 0);
+	}, [j, T]), g(() => {
+		if (C === "element") {
+			if (x !== S?.definition.type) {
+				let e = n(T, I, "").split(" ");
+				j?.(e[e.length - 1]);
+			}
+			V(void 0), z(void 0), F(void 0);
+		}
+	}, [I]), g(() => {
+		V(void 0), z(void 0), F(void 0);
+	}, [x]);
+	let q = s((e, t, r) => {
+		if (t && !r) return;
+		let { name: i, type: a } = e;
+		!t && i !== "" && !b?.[i] ? H("styleAddSelector", y, i, a, void 0, void 0, {
+			styleSelector: I,
+			componentType: a === "element" ? w : void 0
+		}) : t && r && r.name !== i && b?.[r.name] && !b[i] && H("styleAddSelector", y, i, a, void 0, n(b, `${r.name}.attributes`, {}), {
+			styleSelector: I,
+			componentType: a === "element" ? w : void 0
+		});
+	}, [
+		H,
+		w,
+		y,
+		b,
+		I
+	]), J = s((e) => {
+		if (!e || x && x === e.name) {
+			j?.(void 0);
+			return;
+		}
+		j?.(e.name);
+	}, [j, x]), Y = s((e) => {
+		S && H("schemaUpdateElement", m(S, (t) => {
+			i(t, `definition.styleSelectors.${I}`, e);
+		}));
+	}, [
+		S,
+		H,
+		I
+	]), X = s((e) => {
+		H("styleRemoveSelector", y, e.name);
+	}, [H, y]), Z = s((e) => F(e), []), Q = s((e) => {
+		L(e);
+	}, []), $ = s((e) => V(e?.value), []), ee = s((e) => {
+		z(e?.value);
+	}, []), te = s((e) => {
+		M?.(e.value), B && V(void 0), e.value === R && z(void 0), H("styleUpdateSelector", y, G?.name, void 0, void 0, {
+			styleSelector: I,
+			styleVariant: e.value,
+			styleState: B,
+			componentType: G?.componentType
+		});
+	}, [
+		H,
+		y,
+		M,
+		G?.componentType,
+		G?.name,
+		I,
+		B,
+		R
+	]), ne = O && (A || k || !!E?.length || !!D?.length);
+	return /* @__PURE__ */ f("div", {
+		className: "flex w-full grow flex-col gap-2",
+		children: [/* @__PURE__ */ f("div", {
+			className: "flex w-full flex-col gap-2 px-1",
+			children: [C === "element" && /* @__PURE__ */ d(t, {
+				className: "min-h-0 w-full",
+				value: U,
+				selectors: b,
+				selector: G,
+				componentType: w,
+				onAdd: q,
+				onChange: Y,
+				onRemove: X,
+				onSelectorSelected: J
+			}), ne && /* @__PURE__ */ f("div", {
+				className: a("flex w-full items-center gap-2", { "mt-2": C === "manager" }),
+				children: [
+					!!D?.length && /* @__PURE__ */ d(_, {
+						className: "grow basis-0",
+						size: "xs",
+						value: P,
+						onChange: Z,
+						children: D.map((e) => /* @__PURE__ */ d("option", {
+							value: e,
+							children: e
+						}, e))
+					}),
+					E && E.length > 1 && /* @__PURE__ */ d(_, {
+						className: "grow basis-0",
+						size: "xs",
+						onChange: Q,
+						value: I,
+						children: E.map((e) => /* @__PURE__ */ d("option", {
+							value: e,
+							children: e
+						}, e))
+					}),
+					A && /* @__PURE__ */ d("div", {
+						className: "grow basis-0",
+						children: /* @__PURE__ */ d(v, {
+							className: "grow basis-0",
+							value: R,
+							options: K,
+							placeholder: "Variant",
+							size: "xs",
+							allowCreateOptions: !0,
+							allowRemoveOptions: !0,
+							clearable: !0,
+							onChange: ee,
+							onRemove: te
+						})
+					}),
+					k && /* @__PURE__ */ d("div", {
+						className: "grow basis-0",
+						children: /* @__PURE__ */ d(v, {
+							className: "grow basis-0",
+							value: B,
+							options: [
+								{
+									label: "Hover",
+									value: "hover"
+								},
+								{
+									label: "Focus",
+									value: "focus"
+								},
+								{
+									label: "Active",
+									value: "active"
+								},
+								{
+									label: "Disabled",
+									value: "disabled"
+								},
+								{
+									label: "checked",
+									value: "Checked"
+								},
+								{
+									label: "visited",
+									value: "Visited"
+								}
+							],
+							placeholder: "State",
+							size: "xs",
+							clearable: !0,
+							onChange: $
+						})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ d("div", {
+			className: "flex grow basis-0 flex-col overflow-auto border-t border-gray-300 dark:border-zinc-700",
+			children: /* @__PURE__ */ d(e, {
+				selectors: W,
+				componentType: w,
+				selector: G,
+				styleSelector: I,
+				styleState: B,
+				styleVariant: R,
+				element: S,
+				displayMode: y,
+				mode: C
+			})
+		})]
+	});
+};
+//#endregion
+export { y as default };

package/dist/components/StyleInspector/StyleInspectorContext.d.ts

@@ -0,0 +1,23 @@
+import { InheritData } from '../../helpers';
+import { DisplayMode, StyleCategory, StyleItem, StyleObject, StyleState, StyleValue } from '@plitzi/sdk-shared';
+export type SetValues = {
+    (path?: undefined, values?: StyleObject): void;
+    (path: StyleCategory, values?: StyleValue): void;
+};
+export type StyleInspectorContextValue = {
+    componentType?: string;
+    selector?: StyleItem;
+    styleSelector: string;
+    styleState?: StyleState;
+    styleVariant?: string;
+    displayMode: DisplayMode;
+    variables: Record<string, unknown>;
+    inheritData: InheritData['style'];
+    bindingData: Partial<Record<StyleCategory, StyleValue>>;
+    getValues: () => Partial<Record<StyleCategory, StyleValue>>;
+    setValue: SetValues;
+    resetValue: (keys: StyleCategory | StyleCategory[]) => void;
+    getDefaultValue: (key?: StyleCategory[] | StyleCategory) => StyleValue | Record<StyleCategory, StyleValue>;
+};
+declare const StyleInspectorContext: import('react').Context<StyleInspectorContextValue>;
+export default StyleInspectorContext;

package/dist/components/StyleInspector/StyleInspectorContext.mjs

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+var t = e({});
+t.displayName = "StyleInspectorContext";
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/StyleInspectorProvider.d.ts

@@ -0,0 +1,17 @@
+import { InheritData } from '../../helpers';
+import { DisplayMode, Element, StyleCategory, StyleItem, StyleObject, StyleState, StyleValue } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type StyleInspectorProviderProps = {
+    children: ReactNode;
+    componentType?: string;
+    selector?: StyleItem;
+    styleSelector?: string;
+    styleState?: StyleState;
+    styleVariant?: string;
+    element?: Element;
+    inheritData: InheritData;
+    displayMode: DisplayMode;
+    onChange?: (path?: StyleCategory, values?: StyleObject | StyleValue) => void;
+};
+declare const StyleInspectorProvider: ({ children, componentType, selector, styleSelector, styleState, styleVariant, element, inheritData, displayMode, onChange }: StyleInspectorProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default StyleInspectorProvider;

package/dist/components/StyleInspector/StyleInspectorProvider.mjs

@@ -0,0 +1,86 @@
+import e from "./StyleInspectorContext.mjs";
+import t from "./hooks/useStyleBinding.mjs";
+import { get as n, omit as r } from "@plitzi/plitzi-ui/helpers";
+import { use as i, useCallback as a, useMemo as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { baseDefaultValue as c } from "@plitzi/sdk-shared";
+import l from "@plitzi/sdk-shared/dataSource/DataSourceContext";
+//#region src/components/StyleInspector/StyleInspectorProvider.tsx
+var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base", styleState: m, styleVariant: h, element: g, inheritData: _, displayMode: v, onChange: y }) => {
+	let b = t({ element: g }), { useDataSource: x } = i(l), { variables: S } = x({
+		id: "",
+		mode: "read"
+	}), C = a(() => {
+		let e;
+		if (f && p && f.attributes[p]) {
+			let t = f.attributes[p];
+			e = m && h ? t.variants?.[h].states?.[m] ?? {} : h ? t.variants?.[h]?.default ?? {} : m ? t.states?.[m] ?? {} : t.default ?? {};
+		} else e = {};
+		return e;
+	}, [
+		f,
+		p,
+		m,
+		h
+	]), w = a((e, t) => {
+		if (!(e && typeof t != "string" && typeof t != "number" && t !== void 0 || !e && typeof t != "object" && t !== void 0 || e && n(b, e))) {
+			if (!e && t && typeof t == "object" && (t = r(t, Object.keys(b))), !e && f && typeof t == "object") {
+				let e = {
+					...C(),
+					...t
+				};
+				Object.keys(e).forEach((t) => {
+					e[t] === void 0 && delete e[t];
+				}), t = e;
+			}
+			y?.(e, t);
+		}
+	}, [
+		b,
+		C,
+		y,
+		f
+	]), T = a((e) => Array.isArray(e) ? e.reduce((e, t) => ({
+		...e,
+		[t]: n(c, t)
+	}), {}) : e ? n(c, e) : c, []), E = a((e) => {
+		Array.isArray(e) ? w(void 0, e.reduce((e, t) => ({
+			...e,
+			[t]: void 0
+		}), {})) : w(e);
+	}, [w]);
+	return /* @__PURE__ */ s(e, {
+		value: o(() => ({
+			componentType: d,
+			selector: f,
+			styleSelector: p,
+			styleState: m,
+			styleVariant: h,
+			displayMode: v,
+			variables: S,
+			inheritData: _.style,
+			bindingData: b,
+			getValues: C,
+			setValue: w,
+			resetValue: E,
+			getDefaultValue: T
+		}), [
+			d,
+			f,
+			p,
+			m,
+			h,
+			v,
+			S,
+			_.style,
+			b,
+			C,
+			w,
+			E,
+			T
+		]),
+		children: u
+	});
+};
+//#endregion
+export { u as default };

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

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

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

@@ -0,0 +1,142 @@
+import e from "../../StyleInspectorContext.mjs";
+import t from "../../hooks/useInspectorValues.mjs";
+import n from "../../components/InspectorLabel/index.mjs";
+import r from "../../components/CategoryOption/index.mjs";
+import i from "../../components/CategorySection/index.mjs";
+import { DEFAULT_LAYER_PROPS as a, DEFAULT_STOPS as o, newLayerId as s, newStopId as c, serializeLayersToCSS as l } from "./helpers/backgroundParser.mjs";
+import u from "./components/BackgroundLayer/index.mjs";
+import d from "../../components/CategoryContainer/index.mjs";
+import f from "./helpers/parseToBgLayers.mjs";
+import { memo as p, use as m, useCallback as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import b from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
+//#region src/components/StyleInspector/categories/Background/Background.tsx
+var x = [
+	"background-color",
+	"background-image",
+	"background-attachment",
+	"background-position",
+	"background-repeat",
+	"background-clip",
+	"background-size",
+	"mask-image"
+], S = [
+	"background-image",
+	"background-size",
+	"background-position",
+	"background-repeat",
+	"background-attachment",
+	"background-clip"
+], C = (e) => S.map((t) => String(e[t])).join("||"), w = p(({ replaceTokens: p = !1, isCollapsed: w = !0, onCollapse: T }) => {
+	let { setValue: E } = m(e), D = t({
+		keys: S,
+		asValue: !0,
+		strictMode: !0,
+		replaceTokens: p
+	}), { "background-color": O, "mask-image": k } = t({
+		keys: ["background-color", "mask-image"],
+		asValue: !0,
+		replaceTokens: p
+	}), A = C(D), j = g(D);
+	j.current = D;
+	let M = g(null), [N, P] = _(() => f(D));
+	b(() => {
+		A !== M.current && (P(f(j.current)), M.current = A);
+	}, [A]);
+	let [F, I] = _(null), L = h((e) => I((t) => t === e ? null : e), []), R = h((e) => {
+		let t = l(e);
+		M.current = C(t), P(e), E(void 0, t);
+	}, [E]), z = h((e, t) => {
+		if (e === t) return;
+		let n = [...N], [r] = n.splice(e, 1);
+		n.splice(t, 0, r), R(n);
+	}, [N, R]), B = h((e) => (t) => {
+		R(N.map((n, r) => r === e ? t : n));
+	}, [N, R]), V = h(() => {
+		let e = s(), t = {
+			...a,
+			id: e,
+			type: "linear-gradient",
+			stops: [{
+				id: c(),
+				color: o[0].color,
+				position: "0%"
+			}, {
+				id: c(),
+				color: o[1].color,
+				position: "100%"
+			}]
+		};
+		I(e), R([...N, t]);
+	}, [N, R]), H = h((e) => () => {
+		R(N.filter((t, n) => n !== e));
+	}, [N, R]), U = h((e) => {
+		E("background-color", e);
+	}, [E]), W = h((e) => {
+		E("mask-image", e);
+	}, [E]);
+	return /* @__PURE__ */ v(d, {
+		title: "Background",
+		dotKeys: x,
+		isCollapsed: w,
+		onCollapse: h((e) => T?.("background", e), [T]),
+		children: /* @__PURE__ */ y("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				/* @__PURE__ */ y("div", {
+					className: "flex flex-col gap-1",
+					children: [
+						/* @__PURE__ */ y("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ v(n, {
+								keyValue: S,
+								children: "Layers"
+							}), /* @__PURE__ */ y("button", {
+								type: "button",
+								className: "flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-xs text-blue-500 hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-900/30",
+								onClick: V,
+								title: "Add background layer",
+								children: [/* @__PURE__ */ v("i", { className: "fas fa-plus text-[10px]" }), "Add"]
+							})]
+						}),
+						!N.length && /* @__PURE__ */ v("div", {
+							className: "rounded border border-dashed border-gray-300 py-3 text-center text-xs text-gray-400 dark:border-zinc-600 dark:text-zinc-500",
+							children: "No layers — click Add to start"
+						}),
+						N.length > 0 && /* @__PURE__ */ v("div", {
+							className: "flex flex-col gap-1",
+							children: N.map((e, t) => /* @__PURE__ */ v(u, {
+								index: t,
+								layer: e,
+								expanded: F === e.id,
+								onExpand: L,
+								onChange: B(t),
+								onRemove: H(t),
+								onReorder: z
+							}, e.id))
+						})
+					]
+				}),
+				/* @__PURE__ */ v(i, {
+					label: "Base Color",
+					keys: ["background-color"],
+					children: /* @__PURE__ */ v(r, {
+						type: "color",
+						value: O,
+						onChange: U
+					})
+				}),
+				/* @__PURE__ */ v(i, {
+					label: "Mask",
+					keys: ["mask-image"],
+					children: /* @__PURE__ */ v(r, {
+						value: k,
+						onChange: W
+					})
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { w as default };

package/dist/components/StyleInspector/categories/Background/components/BackgroundLayer/BackgroundLayer.d.ts

@@ -0,0 +1,12 @@
+import { BackgroundLayer as BackgroundLayerType } from '../../helpers/backgroundParser';
+export type BackgroundLayerProps = {
+    layer: BackgroundLayerType;
+    index: number;
+    expanded: boolean;
+    onExpand: (id: string) => void;
+    onChange: (layer: BackgroundLayerType) => void;
+    onRemove: () => void;
+    onReorder: (fromIndex: number, toIndex: number) => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ layer, index, expanded, onExpand, onChange, onRemove, onReorder }: BackgroundLayerProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/StyleInspector/categories/Background/components/BackgroundLayer/BackgroundLayer.mjs

@@ -0,0 +1,171 @@
+import e from "../../../../components/CategoryOption/index.mjs";
+import t from "../../../../components/CategorySection/index.mjs";
+import { serializeLayerImage as n } from "../../helpers/backgroundParser.mjs";
+import r from "../../modes/ConicGradientMode.mjs";
+import i from "../../modes/ImageMode.mjs";
+import a from "../../modes/LinearGradientMode.mjs";
+import o from "../../modes/RadialGradientMode.mjs";
+import s from "clsx";
+import { memo as c, useCallback as l, useMemo as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@plitzi/plitzi-ui/Icon";
+//#region src/components/StyleInspector/categories/Background/components/BackgroundLayer/BackgroundLayer.tsx
+var h = {
+	none: "None",
+	url: "Image",
+	"linear-gradient": "Linear Gradient",
+	"radial-gradient": "Radial Gradient",
+	"conic-gradient": "Conic Gradient"
+}, g = [
+	{
+		value: "border-box",
+		label: "Border Box"
+	},
+	{
+		value: "padding-box",
+		label: "Padding Box"
+	},
+	{
+		value: "content-box",
+		label: "Content Box"
+	}
+], _ = c(({ layer: c, index: _, expanded: v, onExpand: y, onChange: b, onRemove: x, onReorder: S }) => {
+	let [C, w] = d(!1), T = u(() => n(c), [c]), E = l((e) => {
+		let t = String(e);
+		b({
+			...c,
+			type: t
+		});
+	}, [c, b]), D = l(() => y(c.id), [y, c.id]), O = l((e) => b({
+		...c,
+		clip: String(e)
+	}), [c, b]), k = l((e) => {
+		e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(_));
+	}, [_]), A = l(() => {
+		w(!1);
+	}, []), j = l((e) => {
+		e.preventDefault(), w(!0);
+	}, []), M = l((e) => {
+		e.currentTarget.contains(e.relatedTarget) || w(!1);
+	}, []), N = l((e) => {
+		e.preventDefault(), w(!1);
+		let t = parseInt(e.dataTransfer.getData("text/plain"), 10);
+		isNaN(t) || S(t, _);
+	}, [_, S]);
+	return /* @__PURE__ */ p("div", {
+		className: s("rounded-sm border transition-colors", {
+			"border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/20": C,
+			"border-gray-200 dark:border-zinc-700": !C
+		}),
+		onDragOver: j,
+		onDragLeave: M,
+		onDrop: N,
+		children: [/* @__PURE__ */ p("div", {
+			className: "flex h-8 items-center gap-1 px-1",
+			children: [
+				/* @__PURE__ */ f("span", {
+					draggable: !0,
+					className: "cursor-grab px-1 text-gray-400 hover:text-gray-600 active:cursor-grabbing dark:text-zinc-500 dark:hover:text-zinc-300",
+					onDragStart: k,
+					onDragEnd: A,
+					children: /* @__PURE__ */ f(m, {
+						icon: "fa-solid fa-grip-lines",
+						size: "xs"
+					})
+				}),
+				c.type !== "none" && /* @__PURE__ */ f("div", {
+					className: "h-4 w-4 shrink-0 rounded-sm border border-gray-300 dark:border-zinc-600",
+					style: { background: T }
+				}),
+				/* @__PURE__ */ f("span", {
+					className: "flex-1 truncate text-xs text-gray-600 dark:text-zinc-400",
+					children: h[c.type]
+				}),
+				/* @__PURE__ */ f("button", {
+					type: "button",
+					className: "cursor-pointer p-1 text-gray-400 hover:text-gray-600 dark:text-zinc-500 dark:hover:text-zinc-300",
+					onClick: D,
+					title: v ? "Collapse" : "Expand",
+					children: /* @__PURE__ */ f(m, {
+						icon: v ? "fa-solid fa-angle-up" : "fa-solid fa-angle-down",
+						size: "xs"
+					})
+				}),
+				/* @__PURE__ */ f("button", {
+					type: "button",
+					className: "cursor-pointer p-1 text-gray-400 hover:text-red-500 dark:text-zinc-500 dark:hover:text-red-400",
+					onClick: x,
+					title: "Remove layer",
+					children: /* @__PURE__ */ f(m, {
+						icon: "fas fa-times",
+						size: "xs"
+					})
+				})
+			]
+		}), v && /* @__PURE__ */ p("div", {
+			className: "flex flex-col gap-2 border-t border-gray-200 p-2 dark:border-zinc-700",
+			children: [
+				/* @__PURE__ */ f(t, {
+					label: "Type",
+					children: /* @__PURE__ */ p(e, {
+						type: "select",
+						value: c.type,
+						onChange: E,
+						children: [
+							/* @__PURE__ */ f("option", {
+								value: "linear-gradient",
+								children: "Linear Gradient"
+							}),
+							/* @__PURE__ */ f("option", {
+								value: "radial-gradient",
+								children: "Radial Gradient"
+							}),
+							/* @__PURE__ */ f("option", {
+								value: "conic-gradient",
+								children: "Conic Gradient"
+							}),
+							/* @__PURE__ */ f("option", {
+								value: "url",
+								children: "Image URL"
+							}),
+							/* @__PURE__ */ f("option", {
+								value: "none",
+								children: "None"
+							})
+						]
+					})
+				}),
+				c.type === "url" && /* @__PURE__ */ f(i, {
+					layer: c,
+					onChange: b
+				}),
+				c.type === "linear-gradient" && /* @__PURE__ */ f(a, {
+					layer: c,
+					onChange: b
+				}),
+				c.type === "radial-gradient" && /* @__PURE__ */ f(o, {
+					layer: c,
+					onChange: b
+				}),
+				c.type === "conic-gradient" && /* @__PURE__ */ f(r, {
+					layer: c,
+					onChange: b
+				}),
+				c.type !== "none" && /* @__PURE__ */ f(t, {
+					label: "Clip",
+					children: /* @__PURE__ */ f(e, {
+						type: "select",
+						value: c.clip,
+						onChange: O,
+						children: g.map((e) => /* @__PURE__ */ f("option", {
+							value: e.value,
+							children: e.label
+						}, e.value))
+					})
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { _ as default };

package/dist/components/StyleInspector/categories/Background/components/BackgroundLayer/index.d.ts

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

package/dist/components/StyleInspector/categories/Background/components/BackgroundLayer/index.mjs

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

package/dist/components/StyleInspector/categories/Background/components/BackgroundPosition/BackgroundPosition.d.ts

@@ -0,0 +1,7 @@
+import { BackgroundLayer } from '../../helpers/backgroundParser';
+export type BackgroundPositionProps = {
+    layer: BackgroundLayer;
+    onChange?: (layer: BackgroundLayer) => void;
+};
+declare const BackgroundPosition: ({ layer, onChange }: BackgroundPositionProps) => import("react/jsx-runtime").JSX.Element;
+export default BackgroundPosition;