@plitzi/sdk-style 0.38.10 → 0.38.11

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

@@ -1,76 +1,33 @@
-import e from "../../../components/CategoryOption/index.mjs";
-import t from "../../../components/CategorySection/index.mjs";
-import n from "../components/BackgroundPosition/index.mjs";
-import r from "../components/BackgroundSize/index.mjs";
-import i from "../components/BackgroundTile/index.mjs";
+import { asText as e } from "../../../cssValues.mjs";
+import t from "../../../components/CategoryOption/index.mjs";
+import n from "../../../components/CategorySection/index.mjs";
+import { ANGLE_UNITS as r, LINEAR_DIRECTIONS as i } from "./helpers.mjs";
 import a from "../components/GradientStopBar/index.mjs";
 import { useCallback as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Background/modes/LinearGradientMode.tsx
 var u = ({ layer: u, onChange: d }) => {
-	let f = o((e) => d?.({
+	let f = o((t) => d?.({
 		...u,
-		angle: String(e)
+		angle: e(t)
 	}), [u, d]), p = o((e) => d?.({
 		...u,
 		stops: e
 	}), [u, d]);
-	return /* @__PURE__ */ l(s, { children: [
-		/* @__PURE__ */ c(t, {
-			label: "Angle",
-			children: /* @__PURE__ */ c(e, {
-				type: "metric",
-				value: u.angle,
-				units: [
-					{
-						label: "deg",
-						value: "deg"
-					},
-					{
-						label: "rad",
-						value: "rad"
-					},
-					{
-						label: "turn",
-						value: "turn"
-					}
-				],
-				allowedWords: [
-					"to top",
-					"to right",
-					"to bottom",
-					"to left",
-					"to top right",
-					"to bottom right",
-					"to bottom left",
-					"to top left"
-				],
-				min: 0,
-				max: 360,
-				onChange: f
-			})
-		}),
-		/* @__PURE__ */ c(t, {
-			label: "Gradient",
-			direction: "column",
-			children: /* @__PURE__ */ c(a, {
-				stops: u.stops,
-				onChange: p
-			})
-		}),
-		/* @__PURE__ */ c(r, {
-			layer: u,
-			onChange: d
-		}),
-		/* @__PURE__ */ c(n, {
-			layer: u,
-			onChange: d
-		}),
-		/* @__PURE__ */ c(i, {
-			layer: u,
-			onChange: d
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n, {
+		label: "Direction",
+		children: /* @__PURE__ */ c(t, {
+			type: "metric",
+			value: u.angle || "to bottom",
+			units: r,
+			allowedWords: i,
+			min: -Infinity,
+			onChange: f
 		})
-	] });
+	}), /* @__PURE__ */ c(a, {
+		stops: u.stops,
+		onChange: p
+	})] });
 };
 //#endregion
 export { u as default };

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

@@ -1,120 +1,102 @@
-import e from "../../../components/CategoryOption/index.mjs";
-import t from "../../../components/CategorySection/index.mjs";
-import n from "../components/BackgroundPosition/index.mjs";
-import r from "../components/BackgroundSize/index.mjs";
-import i from "../components/BackgroundTile/index.mjs";
-import a from "../components/GradientStopBar/index.mjs";
-import { useCallback as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { asText as e } from "../../../cssValues.mjs";
+import t from "../../../components/CategoryOption/index.mjs";
+import n from "../../../components/CategorySection/index.mjs";
+import { CENTER_X_WORDS as r, CENTER_Y_WORDS as i, RADIAL_EXTENTS as a, centerParts as o, customExtentFor as s, isExtentKeyword as c, joinCenter as l } from "./helpers.mjs";
+import u from "../components/GradientStopBar/index.mjs";
+import { useCallback as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Background/modes/RadialGradientMode.tsx
-var u = ({ layer: u, onChange: d }) => {
-	let f = o((e) => d?.({
-		...u,
-		radialShape: e
-	}), [u, d]), p = o((e) => d?.({
-		...u,
-		radialExtent: String(e)
-	}), [u, d]), m = o((e) => {
-		let t = u.radialPosition.split(" ");
-		d?.({
-			...u,
-			radialPosition: `${String(e)} ${t[1] ?? "50%"}`
+var h = "custom", g = ({ layer: g, onChange: _ }) => {
+	let [v, y] = o(g.radialPosition), b = !c(g.radialExtent), x = d((t) => _?.({
+		...g,
+		radialShape: e(t) === "circle" ? "circle" : "ellipse"
+	}), [g, _]), S = d((t) => {
+		let n = e(t);
+		_?.({
+			...g,
+			radialExtent: n === h ? s(g.radialShape) : n
 		});
-	}, [u, d]), h = o((e) => {
-		let t = u.radialPosition.split(" ");
-		d?.({
-			...u,
-			radialPosition: `${t[0] ?? "50%"} ${String(e)}`
-		});
-	}, [u, d]), g = o((e) => d?.({
-		...u,
+	}, [g, _]), C = d((t) => _?.({
+		...g,
+		radialExtent: e(t)
+	}), [g, _]), w = d((t) => _?.({
+		...g,
+		radialPosition: l(e(t), y)
+	}), [
+		y,
+		g,
+		_
+	]), T = d((t) => _?.({
+		...g,
+		radialPosition: l(v, e(t))
+	}), [
+		v,
+		g,
+		_
+	]), E = d((e) => _?.({
+		...g,
 		stops: e
-	}), [u, d]);
-	return /* @__PURE__ */ l(s, { children: [
-		/* @__PURE__ */ c(t, {
+	}), [g, _]);
+	return /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ p(n, {
 			label: "Shape",
-			children: /* @__PURE__ */ l(e, {
+			children: /* @__PURE__ */ m(t, {
 				type: "select",
-				value: u.radialShape,
-				onChange: f,
-				children: [/* @__PURE__ */ c("option", {
+				value: g.radialShape,
+				onChange: x,
+				children: [/* @__PURE__ */ p("option", {
 					value: "ellipse",
 					children: "Ellipse"
-				}), /* @__PURE__ */ c("option", {
+				}), /* @__PURE__ */ p("option", {
 					value: "circle",
 					children: "Circle"
 				})]
 			})
 		}),
-		/* @__PURE__ */ c(t, {
-			label: "Size",
-			children: /* @__PURE__ */ l(e, {
+		/* @__PURE__ */ p(n, {
+			label: "Extent",
+			children: /* @__PURE__ */ m(t, {
 				type: "select",
-				value: u.radialExtent,
-				onChange: p,
-				children: [
-					/* @__PURE__ */ c("option", {
-						value: "farthest-corner",
-						children: "Farthest Corner"
-					}),
-					/* @__PURE__ */ c("option", {
-						value: "farthest-side",
-						children: "Farthest Side"
-					}),
-					/* @__PURE__ */ c("option", {
-						value: "closest-corner",
-						children: "Closest Corner"
-					}),
-					/* @__PURE__ */ c("option", {
-						value: "closest-side",
-						children: "Closest Side"
-					})
-				]
+				value: b ? h : g.radialExtent,
+				onChange: S,
+				children: [a.map((e) => /* @__PURE__ */ p("option", {
+					value: e.value,
+					children: e.label
+				}, e.value)), /* @__PURE__ */ p("option", {
+					value: h,
+					children: "Custom size"
+				})]
+			})
+		}),
+		b && /* @__PURE__ */ p(n, {
+			label: "Radius",
+			children: /* @__PURE__ */ p(t, {
+				type: "input",
+				value: g.radialExtent,
+				onChange: C
 			})
 		}),
-		/* @__PURE__ */ l(t, {
-			label: "Position",
-			children: [/* @__PURE__ */ c(e, {
+		/* @__PURE__ */ m(n, {
+			label: "Center",
+			children: [/* @__PURE__ */ p(t, {
 				type: "metric",
-				value: u.radialPosition.split(" ")[0] ?? "50%",
-				allowedWords: [
-					"center",
-					"left",
-					"right"
-				],
-				onChange: m
-			}), /* @__PURE__ */ c(e, {
+				value: v,
+				allowedWords: r,
+				min: -Infinity,
+				onChange: w
+			}), /* @__PURE__ */ p(t, {
 				type: "metric",
-				value: u.radialPosition.split(" ")[1] ?? "50%",
-				allowedWords: [
-					"center",
-					"top",
-					"bottom"
-				],
-				onChange: h
+				value: y,
+				allowedWords: i,
+				min: -Infinity,
+				onChange: T
 			})]
 		}),
-		/* @__PURE__ */ c(t, {
-			label: "Gradient",
-			direction: "column",
-			children: /* @__PURE__ */ c(a, {
-				stops: u.stops,
-				onChange: g
-			})
-		}),
-		/* @__PURE__ */ c(r, {
-			layer: u,
-			onChange: d
-		}),
-		/* @__PURE__ */ c(n, {
-			layer: u,
-			onChange: d
-		}),
-		/* @__PURE__ */ c(i, {
-			layer: u,
-			onChange: d
+		/* @__PURE__ */ p(u, {
+			stops: g.stops,
+			onChange: E
 		})
 	] });
 };
 //#endregion
-export { u as default };
+export { g as default };

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

@@ -0,0 +1,8 @@
+import { BackgroundLayer } from '../helpers/backgroundParser';
+export type RawModeProps = {
+    layer: BackgroundLayer;
+    onChange?: (layer: BackgroundLayer) => void;
+};
+/** A layer the editor has no controls for — a token, `image-set()` — written as the CSS it is. */
+declare const RawMode: ({ layer, onChange }: RawModeProps) => import('react').JSX.Element;
+export default RawMode;

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

@@ -0,0 +1,22 @@
+import { asText as e } from "../../../cssValues.mjs";
+import t from "../../../components/CategoryOption/index.mjs";
+import { useCallback as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Background/modes/RawMode.tsx
+var o = ({ layer: o, onChange: s }) => {
+	let c = n((t) => s?.({
+		...o,
+		raw: e(t)
+	}), [o, s]);
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(t, {
+		label: "CSS",
+		type: "input",
+		value: o.raw,
+		onChange: c
+	}), /* @__PURE__ */ i("p", {
+		className: "m-0 text-[11px] text-zinc-500 dark:text-zinc-400",
+		children: "Any image CSS accepts: a token such as var(--hero-bg), image-set(…), cross-fade(…)."
+	})] });
+};
+//#endregion
+export { o as default };

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

@@ -0,0 +1,19 @@
+export declare const ANGLE_UNITS: {
+    label: string;
+    value: string;
+}[];
+export declare const LINEAR_DIRECTIONS: string[];
+export declare const CENTER_X_WORDS: string[];
+export declare const CENTER_Y_WORDS: string[];
+/** The keywords a radial gradient's size can be; anything else is a size of its own (`100px`, `40% 20%`). */
+export declare const RADIAL_EXTENTS: {
+    value: string;
+    label: string;
+}[];
+export declare const isExtentKeyword: (extent: string) => boolean;
+/** A size a circle takes as one length; an ellipse needs two. */
+export declare const customExtentFor: (shape: "circle" | "ellipse") => string;
+/** A gradient's center as its two axes — CSS's default (the middle) when it names none. */
+export declare const centerParts: (position: string) => [string, string];
+/** Back to the one value, left out when it is the default — so a gradient that never named a center still names none. */
+export declare const joinCenter: (x: string, y: string) => string;

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

@@ -0,0 +1,54 @@
+//#region src/components/StyleInspector/categories/Background/modes/helpers.ts
+var e = [
+	{
+		label: "DEG",
+		value: "deg"
+	},
+	{
+		label: "TURN",
+		value: "turn"
+	},
+	{
+		label: "RAD",
+		value: "rad"
+	}
+], t = [
+	"to top",
+	"to right",
+	"to bottom",
+	"to left",
+	"to top right",
+	"to bottom right",
+	"to bottom left",
+	"to top left"
+], n = [
+	"center",
+	"left",
+	"right"
+], r = [
+	"center",
+	"top",
+	"bottom"
+], i = [
+	{
+		value: "farthest-corner",
+		label: "Farthest corner"
+	},
+	{
+		value: "farthest-side",
+		label: "Farthest side"
+	},
+	{
+		value: "closest-corner",
+		label: "Closest corner"
+	},
+	{
+		value: "closest-side",
+		label: "Closest side"
+	}
+], a = (e) => i.some((t) => t.value === e), o = (e) => e === "circle" ? "100px" : "50% 50%", s = (e) => {
+	let [t = "center", n = "center"] = e.split(" ").filter(Boolean);
+	return [t, n];
+}, c = (e, t) => e === "center" && t === "center" ? "" : `${e} ${t}`;
+//#endregion
+export { e as ANGLE_UNITS, n as CENTER_X_WORDS, r as CENTER_Y_WORDS, t as LINEAR_DIRECTIONS, i as RADIAL_EXTENTS, s as centerParts, o as customExtentFor, a as isExtentKeyword, c as joinCenter };

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

@@ -1,37 +1,20 @@
 import e from "../../StyleInspectorContext.mjs";
 import t from "../../hooks/useInspectorValues.mjs";
-import n from "../../components/CategoryContainer/index.mjs";
-import r from "./BorderColor.mjs";
-import i from "./BorderPlacements.mjs";
-import a from "./BorderRadius.mjs";
-import o from "./BorderStyle.mjs";
-import s from "./BorderWidth.mjs";
-import { memo as c, use as l, useCallback as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-//#region src/components/StyleInspector/categories/Border/Border.tsx
-var m = [
-	"border-top-style",
-	"border-top-width",
-	"border-top-color",
-	"border-bottom-style",
-	"border-bottom-width",
-	"border-bottom-color",
-	"border-left-style",
-	"border-left-width",
-	"border-left-color",
-	"border-right-style",
-	"border-right-width",
-	"border-right-color",
-	"border-top-left-radius",
-	"border-top-right-radius",
-	"border-bottom-left-radius",
-	"border-bottom-right-radius"
-], h = c(({ replaceTokens: c = !1, isCollapsed: h = !0, onCollapse: g }) => {
-	let [_, v] = d("all"), { setValue: y } = l(e), b = t({
-		keys: m,
+import { BORDER_KEYS as n } from "../../categoryKeys.mjs";
+import r from "../../components/CategoryContainer/index.mjs";
+import i from "./BorderColor.mjs";
+import a from "./BorderPlacements.mjs";
+import o from "./BorderRadius.mjs";
+import s from "./BorderStyle.mjs";
+import c from "./BorderWidth.mjs";
+import { memo as l, use as u, useCallback as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+var h = l(({ replaceTokens: l = !1, isCollapsed: h = !0, onCollapse: g }) => {
+	let [_, v] = f("all"), { setValue: y } = u(e), b = t({
+		keys: n.dot,
 		asValue: !0,
-		replaceTokens: c
-	}), x = u((e) => (t) => {
+		replaceTokens: l
+	}), x = d((e) => (t) => {
 		switch (e) {
 			case "radius":
 				y(void 0, {
@@ -80,37 +63,37 @@ var m = [
 		_,
 		b,
 		y
-	]), S = u((e) => g?.("border", e), [g]);
-	return /* @__PURE__ */ f(n, {
-		title: "Border",
-		dotKeys: m,
+	]), S = d((e) => g?.("border", e), [g]);
+	return /* @__PURE__ */ p(r, {
+		title: n.title,
+		dotKeys: n.dot,
 		isCollapsed: h,
 		onCollapse: S,
-		children: /* @__PURE__ */ p("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "flex flex-col gap-2",
-			children: [/* @__PURE__ */ f(a, {
+			children: [/* @__PURE__ */ p(o, {
 				values: b,
 				onChange: x("radius"),
 				onChangeSegment: x
-			}), /* @__PURE__ */ p("div", {
+			}), /* @__PURE__ */ m("div", {
 				className: "flex w-full flex-col gap-2",
-				children: [/* @__PURE__ */ f(i, {
+				children: [/* @__PURE__ */ p(a, {
 					currentPlacement: _,
 					setCurrentPlacement: v
-				}), /* @__PURE__ */ p("div", {
+				}), /* @__PURE__ */ m("div", {
 					className: "flex w-full flex-col gap-2",
 					children: [
-						/* @__PURE__ */ f(o, {
+						/* @__PURE__ */ p(s, {
 							values: b,
 							currentPlacement: _,
 							onChange: x("style")
 						}),
-						/* @__PURE__ */ f(s, {
+						/* @__PURE__ */ p(c, {
 							values: b,
 							currentPlacement: _,
 							onChange: x("width")
 						}),
-						/* @__PURE__ */ f(r, {
+						/* @__PURE__ */ p(i, {
 							values: b,
 							currentPlacement: _,
 							onChange: x("color")

package/dist/components/StyleInspector/categories/Border/BorderPlacements.mjs

@@ -1,55 +1,64 @@
-import { useCallback as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "clsx";
-import i from "@plitzi/plitzi-ui/Icon";
-import a from "@plitzi/plitzi-ui/icons/BorderPlacementBottom";
-import o from "@plitzi/plitzi-ui/icons/BorderPlacementCenter";
-import s from "@plitzi/plitzi-ui/icons/BorderPlacementLeft";
-import c from "@plitzi/plitzi-ui/icons/BorderPlacementRight";
-import l from "@plitzi/plitzi-ui/icons/BorderPlacementTop";
+import e from "../../components/CategorySection/index.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "clsx";
+import a from "@plitzi/plitzi-ui/Icon";
+import o from "@plitzi/plitzi-ui/icons/BorderPlacementBottom";
+import s from "@plitzi/plitzi-ui/icons/BorderPlacementCenter";
+import c from "@plitzi/plitzi-ui/icons/BorderPlacementLeft";
+import l from "@plitzi/plitzi-ui/icons/BorderPlacementRight";
+import u from "@plitzi/plitzi-ui/icons/BorderPlacementTop";
 //#region src/components/StyleInspector/categories/Border/BorderPlacements.tsx
-var u = ({ currentPlacement: u, setCurrentPlacement: d }) => {
-	let f = e((e) => () => d(e), [d]);
-	return /* @__PURE__ */ n("div", {
-		className: "mx-auto grid grid-cols-3 grid-rows-3 place-items-center gap-2",
-		children: [
-			/* @__PURE__ */ t(i, {
-				size: "2xl",
-				className: r("col-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "top" }),
-				onClick: f("top"),
-				active: u === "top",
-				children: /* @__PURE__ */ t(l, {})
-			}),
-			/* @__PURE__ */ t(i, {
-				size: "2xl",
-				className: r("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "left" }),
-				onClick: f("left"),
-				active: u === "left",
-				children: /* @__PURE__ */ t(s, {})
-			}),
-			/* @__PURE__ */ t(i, {
-				size: "2xl",
-				className: r("row-start-2 grid cursor-pointer grid-cols-3 rounded p-0.5", { "bg-primary-100": u === "all" }),
-				onClick: f("all"),
-				active: u === "all",
-				children: /* @__PURE__ */ t(o, {})
-			}),
-			/* @__PURE__ */ t(i, {
-				size: "2xl",
-				className: r("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "right" }),
-				onClick: f("right"),
-				active: u === "right",
-				children: /* @__PURE__ */ t(c, {})
-			}),
-			/* @__PURE__ */ t(i, {
-				size: "2xl",
-				className: r("col-start-2 row-start-3 cursor-pointer rounded p-0.5", { "bg-primary-100": u === "bottom" }),
-				onClick: f("bottom"),
-				active: u === "bottom",
-				children: /* @__PURE__ */ t(a, {})
-			})
-		]
+var d = ({ currentPlacement: d, setCurrentPlacement: f }) => {
+	let p = t((e) => () => f(e), [f]);
+	return /* @__PURE__ */ n(e, {
+		label: "Side",
+		children: /* @__PURE__ */ r("div", {
+			className: "mx-auto grid grid-cols-3 grid-rows-3 place-items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ n(a, {
+					size: "2xl",
+					className: i("col-start-2 cursor-pointer rounded p-0.5", { "bg-primary-500/15 dark:bg-primary-400/20": d === "top" }),
+					title: "Top border",
+					onClick: p("top"),
+					active: d === "top",
+					children: /* @__PURE__ */ n(u, {})
+				}),
+				/* @__PURE__ */ n(a, {
+					size: "2xl",
+					className: i("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-500/15 dark:bg-primary-400/20": d === "left" }),
+					title: "Left border",
+					onClick: p("left"),
+					active: d === "left",
+					children: /* @__PURE__ */ n(c, {})
+				}),
+				/* @__PURE__ */ n(a, {
+					size: "2xl",
+					className: i("row-start-2 grid cursor-pointer grid-cols-3 rounded p-0.5", { "bg-primary-500/15 dark:bg-primary-400/20": d === "all" }),
+					title: "All four sides",
+					onClick: p("all"),
+					active: d === "all",
+					children: /* @__PURE__ */ n(s, {})
+				}),
+				/* @__PURE__ */ n(a, {
+					size: "2xl",
+					className: i("row-start-2 cursor-pointer rounded p-0.5", { "bg-primary-500/15 dark:bg-primary-400/20": d === "right" }),
+					title: "Right border",
+					onClick: p("right"),
+					active: d === "right",
+					children: /* @__PURE__ */ n(l, {})
+				}),
+				/* @__PURE__ */ n(a, {
+					size: "2xl",
+					className: i("col-start-2 row-start-3 cursor-pointer rounded p-0.5", { "bg-primary-500/15 dark:bg-primary-400/20": d === "bottom" }),
+					title: "Bottom border",
+					onClick: p("bottom"),
+					active: d === "bottom",
+					children: /* @__PURE__ */ n(o, {})
+				})
+			]
+		})
 	});
 };
 //#endregion
-export { u as default };
+export { d as default };