@plitzi/sdk-style 0.30.19

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

@@ -0,0 +1,39 @@
+import e from "../../../../components/CategoryOption/index.mjs";
+import t from "../../../../components/CategorySection/index.mjs";
+import { useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/components/BackgroundPosition/BackgroundPosition.tsx
+var a = [
+	"center",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"auto"
+], o = ({ layer: o, onChange: s }) => {
+	let c = n((e) => s?.({
+		...o,
+		positionX: String(e)
+	}), [o, s]), l = n((e) => s?.({
+		...o,
+		positionY: String(e)
+	}), [o, s]);
+	return /* @__PURE__ */ i(t, {
+		label: "Position",
+		children: [/* @__PURE__ */ r(e, {
+			label: "X",
+			type: "metric",
+			value: o.positionX,
+			allowedWords: a,
+			onChange: c
+		}), /* @__PURE__ */ r(e, {
+			label: "Y",
+			type: "metric",
+			value: o.positionY,
+			allowedWords: a,
+			onChange: l
+		})]
+	});
+};
+//#endregion
+export { o as default };

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

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

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

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

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

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

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

@@ -0,0 +1,86 @@
+import e from "../../../../components/CategoryOption/index.mjs";
+import t from "../../../../components/CategorySection/index.mjs";
+import { useCallback as n, useMemo as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/components/BackgroundSize/BackgroundSize.tsx
+var s = ({ layer: s, onChange: c }) => {
+	let l = s.size === "auto" || s.size.includes(" ") || /^\d/.test(s.size), u = r(() => s.size.includes(" ") ? s.size.split(" ") : ["auto", "auto"], [s.size]), d = n((e) => {
+		let t = String(e);
+		if (t === "cover" || t === "contain") c?.({
+			...s,
+			size: t
+		});
+		else {
+			let e = s.size;
+			c?.({
+				...s,
+				size: e === "cover" || e === "contain" ? "auto auto" : e
+			});
+		}
+	}, [s, c]), f = s.size === "cover" ? "cover" : s.size === "contain" ? "contain" : "auto", p = n((e) => c?.({
+		...s,
+		size: `${String(e)} ${u[1] ?? "auto"}`
+	}), [
+		s,
+		c,
+		u
+	]), m = n((e) => c?.({
+		...s,
+		size: `${u[0] ?? "auto"} ${String(e)}`
+	}), [
+		s,
+		c,
+		u
+	]);
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(t, {
+		label: "Size",
+		children: /* @__PURE__ */ a(e, {
+			type: "iconGroup",
+			items: r(() => [
+				{
+					value: "auto",
+					icon: /* @__PURE__ */ a("div", {
+						className: "px-1 text-xs select-none",
+						children: "Custom"
+					}),
+					description: "Custom dimensions",
+					active: f === "auto",
+					size: "custom"
+				},
+				{
+					value: "cover",
+					icon: /* @__PURE__ */ a("div", {
+						className: "px-1 text-xs select-none",
+						children: "Cover"
+					}),
+					description: "Cover the element",
+					active: f === "cover",
+					size: "custom"
+				},
+				{
+					value: "contain",
+					icon: /* @__PURE__ */ a("div", {
+						className: "px-1 text-xs select-none",
+						children: "Contain"
+					}),
+					description: "Fit inside the element",
+					active: f === "contain",
+					size: "custom"
+				}
+			], [f]),
+			onChange: d
+		})
+	}), l && /* @__PURE__ */ o(t, { children: [/* @__PURE__ */ a(e, {
+		label: "W",
+		type: "metric",
+		value: u[0],
+		onChange: p
+	}), /* @__PURE__ */ a(e, {
+		label: "H",
+		type: "metric",
+		value: u[1],
+		onChange: m
+	})] })] });
+};
+//#endregion
+export { s as default };

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+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 } from "react/jsx-runtime";
+import a from "@plitzi/plitzi-ui/icons/BackgroundTileX";
+import o from "@plitzi/plitzi-ui/icons/BackgroundTileXY";
+import s from "@plitzi/plitzi-ui/icons/BackgroundTileY";
+import c from "@plitzi/plitzi-ui/icons/XMark";
+//#region src/components/StyleInspector/categories/Background/components/BackgroundTile/BackgroundTile.tsx
+var l = ({ layer: l, onChange: u }) => /* @__PURE__ */ i(t, {
+	label: "Tile",
+	children: /* @__PURE__ */ i(e, {
+		type: "iconGroup",
+		items: r(() => [
+			{
+				value: "repeat",
+				icon: /* @__PURE__ */ i(o, {}),
+				description: "Horizontally and Vertically",
+				active: l.repeat === "repeat"
+			},
+			{
+				value: "repeat-x",
+				icon: /* @__PURE__ */ i(a, {}),
+				description: "Horizontally",
+				active: l.repeat === "repeat-x"
+			},
+			{
+				value: "repeat-y",
+				icon: /* @__PURE__ */ i(s, {}),
+				description: "Vertically",
+				active: l.repeat === "repeat-y"
+			},
+			{
+				value: "no-repeat",
+				icon: /* @__PURE__ */ i(c, {}),
+				description: "Don't tile",
+				active: l.repeat === "no-repeat"
+			}
+		], [l.repeat]),
+		onChange: n((e) => u?.({
+			...l,
+			repeat: String(e)
+		}), [l, u])
+	})
+});
+//#endregion
+export { l as default };

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { MouseEvent } from 'react';
+type GradientPreviewBarProps = {
+    gradientCSS: string;
+    onClick: (e: MouseEvent<HTMLDivElement>) => void;
+};
+declare const GradientPreviewBar: ({ gradientCSS, onClick }: GradientPreviewBarProps) => import("react/jsx-runtime").JSX.Element;
+export default GradientPreviewBar;

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

@@ -0,0 +1,20 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientPreviewBar.tsx
+var n = ({ gradientCSS: n, onClick: r }) => /* @__PURE__ */ t("div", {
+	className: "relative h-6 w-full cursor-crosshair overflow-hidden rounded-sm border border-gray-300 dark:border-zinc-600",
+	onClick: r,
+	title: "Click to add a color stop",
+	children: [/* @__PURE__ */ e("div", {
+		className: "absolute inset-0",
+		style: {
+			backgroundImage: "linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%)",
+			backgroundSize: "10px 10px",
+			backgroundPosition: "0 0,0 5px,5px -5px,-5px 0"
+		}
+	}), /* @__PURE__ */ e("div", {
+		className: "absolute inset-0",
+		style: { background: n }
+	})]
+});
+//#endregion
+export { n as default };

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

@@ -0,0 +1,7 @@
+import { GradientStop } from '../../helpers/backgroundParser';
+export type GradientStopBarProps = {
+    stops: GradientStop[];
+    onChange?: (stops: GradientStop[]) => void;
+};
+declare const GradientStopBar: ({ stops, onChange }: GradientStopBarProps) => import("react/jsx-runtime").JSX.Element;
+export default GradientStopBar;

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

@@ -0,0 +1,94 @@
+import { newStopId as e } from "../../helpers/backgroundParser.mjs";
+import t from "./GradientPreviewBar.mjs";
+import n from "./GradientStopEditor.mjs";
+import r from "./GradientStopTrack.mjs";
+import i from "clsx";
+import { useCallback as a, useMemo 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/Icon";
+//#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopBar.tsx
+function f(e) {
+	let t = parseFloat(e);
+	return isNaN(t) ? 0 : Math.max(0, Math.min(100, t));
+}
+var p = ({ stops: p, onChange: m }) => {
+	let h = s(p);
+	h.current = p;
+	let [g, _] = c(p[0]?.id ?? ""), v = o(() => [...p].sort((e, t) => f(e.position) - f(t.position)), [p]), y = o(() => `linear-gradient(90deg, ${v.map((e) => e.position ? `${e.color} ${e.position}` : e.color).join(", ")})`, [v]), b = p.find((e) => e.id === g) ?? p[0], x = a((t) => {
+		let { left: n, width: r } = t.currentTarget.getBoundingClientRect(), i = Math.round(Math.max(0, Math.min(100, (t.clientX - n) / r * 100))), a = h.current, o = [...a].sort((e, t) => Math.abs(f(e.position) - i) - Math.abs(f(t.position) - i)).at(0), s = {
+			id: e(),
+			color: o?.color ?? "#808080",
+			position: `${i}%`
+		}, c = [...a, s].sort((e, t) => f(e.position) - f(t.position));
+		m?.(c), _(s.id);
+	}, [m]), S = a((e) => {
+		b && m?.(h.current.map((t) => t.id === b.id ? {
+			...t,
+			color: e
+		} : t));
+	}, [m, b]), C = a((e) => {
+		m?.(e.sort((e, t) => f(e.position) - f(t.position)));
+	}, [m]), w = a((e) => {
+		b && m?.(h.current.map((t) => t.id === b.id ? {
+			...t,
+			position: String(e)
+		} : t).sort((e, t) => f(e.position) - f(t.position)));
+	}, [m, b]), T = a(() => {
+		if (!b || h.current.length <= 2) return;
+		let e = h.current.filter((e) => e.id !== b.id);
+		m?.(e), _(e[0]?.id ?? "");
+	}, [m, b]), E = a(() => {
+		let t = {
+			id: e(),
+			color: "#808080",
+			position: "50%"
+		}, n = [...h.current, t].sort((e, t) => f(e.position) - f(t.position));
+		m?.(n), _(t.id);
+	}, [m]);
+	return /* @__PURE__ */ u("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ l(t, {
+				gradientCSS: y,
+				onClick: x
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex px-2",
+				children: /* @__PURE__ */ l(r, {
+					stops: p,
+					selectedId: g,
+					onChange: C,
+					onSelect: _
+				})
+			}),
+			b && /* @__PURE__ */ l(n, {
+				stop: b,
+				showRemove: p.length > 2,
+				onColorChange: S,
+				onPositionChange: w,
+				onRemove: T
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex flex-wrap gap-1",
+				children: [v.map((e) => /* @__PURE__ */ l("button", {
+					type: "button",
+					className: i("h-5 w-5 cursor-pointer rounded-sm border shadow-sm", g === e.id ? "border-blue-500 ring-1 ring-blue-300 dark:ring-blue-700" : "border-gray-300 hover:border-gray-400 dark:border-zinc-600"),
+					style: { backgroundColor: e.color },
+					onClick: () => _(e.id),
+					title: `${e.color} • ${e.position}`
+				}, e.id)), /* @__PURE__ */ l("button", {
+					type: "button",
+					className: "flex h-5 w-5 cursor-pointer items-center justify-center rounded-sm border border-dashed border-gray-300 text-gray-400 hover:border-blue-400 hover:text-blue-500 dark:border-zinc-600 dark:text-zinc-500",
+					title: "Add stop at 50%",
+					onClick: E,
+					children: /* @__PURE__ */ l(d, {
+						icon: "fas fa-plus",
+						size: "xs"
+					})
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { p as default };

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

@@ -0,0 +1,10 @@
+import { GradientStop } from '../../helpers/backgroundParser';
+type GradientStopEditorProps = {
+    stop: GradientStop;
+    showRemove: boolean;
+    onColorChange: (color: string) => void;
+    onPositionChange: (value: unknown) => void;
+    onRemove: () => void;
+};
+declare const GradientStopEditor: ({ stop, showRemove, onColorChange, onPositionChange, onRemove }: GradientStopEditorProps) => import("react/jsx-runtime").JSX.Element;
+export default GradientStopEditor;

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

@@ -0,0 +1,48 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import n from "@plitzi/plitzi-ui/Icon";
+import r from "@plitzi/plitzi-ui/ColorPicker";
+import i from "@plitzi/plitzi-ui/MetricInput";
+//#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopEditor.tsx
+var a = ({ stop: a, showRemove: o, onColorChange: s, onPositionChange: c, onRemove: l }) => /* @__PURE__ */ t("div", {
+	className: "flex items-center gap-1.5 rounded border border-gray-200 bg-gray-50 p-1.5 dark:border-zinc-700 dark:bg-zinc-800/50",
+	children: [
+		/* @__PURE__ */ e("div", {
+			className: "min-w-0 flex-1",
+			children: /* @__PURE__ */ e(r, {
+				size: "xs",
+				className: { root: "w-full min-w-0" },
+				value: a.color,
+				allowVariables: !0,
+				showAlpha: !0,
+				onChange: s
+			})
+		}),
+		/* @__PURE__ */ e(i, {
+			size: "xs",
+			className: "w-20 shrink-0",
+			value: a.position,
+			units: [{
+				label: "%",
+				value: "%"
+			}, {
+				label: "PX",
+				value: "px"
+			}],
+			allowedWords: [],
+			min: Infinity,
+			onChange: c
+		}),
+		o && /* @__PURE__ */ e("button", {
+			type: "button",
+			className: "shrink-0 cursor-pointer rounded p-0.5 text-gray-400 hover:text-red-500 dark:text-zinc-500 dark:hover:text-red-400",
+			title: "Remove stop",
+			onClick: l,
+			children: /* @__PURE__ */ e(n, {
+				icon: "fas fa-times",
+				size: "xs"
+			})
+		})
+	]
+});
+//#endregion
+export { a as default };

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

@@ -0,0 +1,11 @@
+import { GradientStop } from '../../helpers/backgroundParser';
+import { RefObject } from 'react';
+type GradientStopHandleProps = {
+    stop: GradientStop;
+    selected: boolean;
+    trackRef: RefObject<HTMLDivElement | null>;
+    onPositionChange: (stopId: string, pct: number) => void;
+    onSelect: (stopId: string) => void;
+};
+declare const GradientStopHandle: ({ stop, selected, trackRef, onPositionChange, onSelect }: GradientStopHandleProps) => import("react/jsx-runtime").JSX.Element;
+export default GradientStopHandle;

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

@@ -0,0 +1,44 @@
+import e from "../../helpers/normalizeLeft.mjs";
+import t from "clsx";
+import { useCallback as n, useLayoutEffect as r, useMemo as i, useRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopHandle.tsx
+var s = ({ stop: s, selected: c, trackRef: l, onPositionChange: u, onSelect: d }) => {
+	let f = a(null), p = a(!1), m = a(!1), h = i(() => e(s.position, (f.current?.parentNode)?.getBoundingClientRect().width ?? Infinity), [s.position]), g = n((e) => {
+		let t = l.current;
+		if (!t) return 0;
+		let { left: n, width: r } = t.getBoundingClientRect();
+		return Math.round(Math.max(0, Math.min(100, (e - n) / r * 100)));
+	}, [l]);
+	r(() => {
+		!p.current && f.current && (f.current.style.left = h);
+	}, [h]);
+	let _ = n((e) => {
+		e.preventDefault(), m.current = !1, p.current = !0, f.current?.setPointerCapture(e.pointerId), d(s.id);
+	}, [d, s.id]), v = n((e) => {
+		!p.current || !f.current || (m.current = !0, f.current.style.left = `${g(e.clientX)}%`);
+	}, [g]), y = n((e) => {
+		if (p.current && (p.current = !1, m.current && f.current)) {
+			let t = g(e.clientX);
+			f.current.style.left = `${t}%`, u(s.id, t);
+		}
+	}, [
+		g,
+		u,
+		s.id
+	]);
+	return /* @__PURE__ */ o("div", {
+		ref: f,
+		className: t("absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-grab rounded-full border-2 shadow-sm", c ? "z-10 border-blue-500 ring-1 ring-blue-300 dark:ring-blue-700" : "z-0 border-white hover:border-gray-300 dark:border-zinc-500"),
+		style: {
+			left: h,
+			backgroundColor: s.color
+		},
+		onPointerDown: _,
+		onPointerMove: v,
+		onPointerUp: y,
+		title: `${s.color} • ${s.position}`
+	});
+};
+//#endregion
+export { s as default };

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

@@ -0,0 +1,9 @@
+import { GradientStop } from '../../helpers/backgroundParser';
+type GradientStopTrackProps = {
+    stops: GradientStop[];
+    selectedId: string;
+    onChange?: (stops: GradientStop[]) => void;
+    onSelect: (id: string) => void;
+};
+declare const GradientStopTrack: ({ stops, selectedId, onChange, onSelect }: GradientStopTrackProps) => import("react/jsx-runtime").JSX.Element;
+export default GradientStopTrack;

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

@@ -0,0 +1,27 @@
+import e from "./GradientStopHandle.mjs";
+import { useCallback as t, useRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/components/GradientStopBar/GradientStopTrack.tsx
+var a = ({ stops: a, selectedId: o, onChange: s, onSelect: c }) => {
+	let l = n(null), u = n(a);
+	u.current = a;
+	let d = t((e, t) => {
+		s?.(u.current.map((n) => n.id === e ? {
+			...n,
+			position: `${t}%`
+		} : n));
+	}, [s]);
+	return /* @__PURE__ */ i("div", {
+		ref: l,
+		className: "relative h-5 w-full select-none",
+		children: [/* @__PURE__ */ r("div", { className: "absolute top-1/2 right-0 left-0 h-px -translate-y-1/2 bg-gray-300 dark:bg-zinc-600" }), a.map((t) => /* @__PURE__ */ r(e, {
+			trackRef: l,
+			stop: t,
+			selected: o === t.id,
+			onPositionChange: d,
+			onSelect: c
+		}, t.id))]
+	});
+};
+//#endregion
+export { a as default };

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

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

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

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

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

@@ -0,0 +1,56 @@
+export type GradientStop = {
+    id: string;
+    color: string;
+    position: string;
+};
+export type BackgroundLayerType = 'none' | 'url' | 'linear-gradient' | 'radial-gradient' | 'conic-gradient';
+export type BackgroundLayer = {
+    id: string;
+    type: BackgroundLayerType;
+    url: string;
+    angle: string;
+    radialShape: 'circle' | 'ellipse';
+    radialExtent: string;
+    radialPosition: string;
+    conicAngle: string;
+    conicPosition: string;
+    stops: GradientStop[];
+    size: string;
+    positionX: string;
+    positionY: string;
+    repeat: string;
+    attachment: string;
+    clip: string;
+};
+export declare const DEFAULT_STOPS: GradientStop[];
+export declare const DEFAULT_LAYER_PROPS: {
+    url: string;
+    angle: string;
+    radialShape: "ellipse";
+    radialExtent: string;
+    radialPosition: string;
+    conicAngle: string;
+    conicPosition: string;
+    stops: GradientStop[];
+    size: string;
+    positionX: string;
+    positionY: string;
+    repeat: string;
+    attachment: string;
+    clip: string;
+};
+export declare const newLayerId: () => string;
+export declare const newStopId: () => string;
+export declare function splitTopLevelCommas(str: string): string[];
+export type BackgroundCSSValues = {
+    'background-image'?: string;
+    'background-size'?: string;
+    'background-position'?: string;
+    'background-repeat'?: string;
+    'background-attachment'?: string;
+    'background-clip'?: string;
+};
+export declare function parseBackgroundLayers(values: BackgroundCSSValues): BackgroundLayer[];
+export declare function serializeStop(stop: GradientStop): string;
+export declare function serializeLayerImage(layer: BackgroundLayer): string;
+export declare function serializeLayersToCSS(layers: BackgroundLayer[]): BackgroundCSSValues;