@plitzi/sdk-style 0.30.19

package/dist/components/StyleInspector/categories/Display/DisplayElements.mjs

@@ -0,0 +1,64 @@
+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/DisplayBlock";
+import o from "@plitzi/plitzi-ui/icons/DisplayFlex";
+import s from "@plitzi/plitzi-ui/icons/DisplayGrid";
+import c from "@plitzi/plitzi-ui/icons/DisplayInline";
+import l from "@plitzi/plitzi-ui/icons/DisplayInlineBlock";
+//#region src/components/StyleInspector/categories/Display/DisplayElements.tsx
+var u = [
+	"display",
+	"flex-direction",
+	"align-items",
+	"justify-content",
+	"flex-wrap"
+], d = ({ value: d = "block", onChange: f }) => /* @__PURE__ */ i(t, {
+	keys: u,
+	label: "Display",
+	children: /* @__PURE__ */ i(e, {
+		onChange: n((e) => f?.("display", e), [f]),
+		type: "iconGroup",
+		items: r(() => [
+			{
+				value: "block",
+				icon: /* @__PURE__ */ i(a, {}),
+				description: "Block elements start on a new line and take up the full available width.",
+				active: d === "block"
+			},
+			{
+				value: "flex",
+				icon: /* @__PURE__ */ i(o, {}),
+				description: "Flex lays out its child elements on a horizontal or vertical axis.",
+				active: d === "flex"
+			},
+			{
+				value: "grid",
+				icon: /* @__PURE__ */ i(s, {}),
+				description: "Grid lets place you items within rows and columns.",
+				active: d === "grid"
+			},
+			{
+				value: "inline-block",
+				icon: /* @__PURE__ */ i(l, {}),
+				description: "Inline-block behaves like inline, but accepts width and height properties.",
+				active: d === "inline-block"
+			},
+			{
+				value: "inline",
+				icon: /* @__PURE__ */ i(c, {}),
+				description: "Inline is the default for text content. The text's font size and line height determine its size",
+				active: d === "inline"
+			},
+			{
+				value: "none",
+				icon: "fa-solid fa-eye-slash",
+				description: "None hides elements.",
+				active: d === "none"
+			}
+		], [d])
+	})
+});
+//#endregion
+export { d as default };

package/dist/components/StyleInspector/categories/Display/DisplayFlex.d.ts

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

package/dist/components/StyleInspector/categories/Display/DisplayFlex.mjs

@@ -0,0 +1,46 @@
+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/ArrowReverse";
+//#region src/components/StyleInspector/categories/Display/DisplayFlex.tsx
+var o = ["flex-wrap"], s = ({ value: s, isReverse: c = !1, onChange: l }) => /* @__PURE__ */ i(t, {
+	label: "Children",
+	keys: o,
+	children: /* @__PURE__ */ i(e, {
+		onChange: n((e) => {
+			typeof e == "boolean" ? e ? l?.("flex-wrap", `${s}-reverse`) : l?.("flex-wrap", s.replace("-reverse", "")) : l?.("flex-wrap", e);
+		}, [l, s]),
+		type: "iconGroup",
+		items: r(() => [
+			{
+				value: c ? "nowrap-reverse" : "nowrap",
+				icon: /* @__PURE__ */ i("div", {
+					className: "px-1 text-xs whitespace-nowrap select-none",
+					children: "Don't Wrap"
+				}),
+				description: "",
+				active: s === "nowrap" || s === "nowrap-reverse",
+				size: "custom"
+			},
+			{
+				value: c ? "wrap-reverse" : "wrap",
+				icon: /* @__PURE__ */ i("div", {
+					className: "px-1 text-xs select-none",
+					children: "Wrap"
+				}),
+				description: "",
+				active: s === "wrap" || s === "wrap-reverse",
+				size: "custom"
+			},
+			{
+				value: !c,
+				icon: /* @__PURE__ */ i(a, {}),
+				description: "Reverse Wrap",
+				active: c
+			}
+		], [s, c])
+	})
+});
+//#endregion
+export { s as default };

package/dist/components/StyleInspector/categories/Display/DisplayFlexAlignContent.d.ts

@@ -0,0 +1,9 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type DisplayFlexAlignContentProps = {
+    value?: StyleValue;
+    isReverse?: boolean;
+    isRow?: boolean;
+    onChange?: (type: StyleCategory, value: StyleValue) => void;
+};
+declare const DisplayFlexAlignContent: ({ value, isReverse, isRow, onChange }: DisplayFlexAlignContentProps) => import("react/jsx-runtime").JSX.Element;
+export default DisplayFlexAlignContent;

package/dist/components/StyleInspector/categories/Display/DisplayFlexAlignContent.mjs

@@ -0,0 +1,97 @@
+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/AlignContentCenterColumn";
+import o from "@plitzi/plitzi-ui/icons/AlignContentCenterRow";
+import s from "@plitzi/plitzi-ui/icons/AlignContentEndColumn";
+import c from "@plitzi/plitzi-ui/icons/AlignContentEndReverseColumn";
+import l from "@plitzi/plitzi-ui/icons/AlignContentEndReverseRow";
+import u from "@plitzi/plitzi-ui/icons/AlignContentEndRow";
+import d from "@plitzi/plitzi-ui/icons/AlignContentSpaceAroundColumn";
+import f from "@plitzi/plitzi-ui/icons/AlignContentSpaceAroundRow";
+import p from "@plitzi/plitzi-ui/icons/AlignContentSpaceBetweenColumn";
+import m from "@plitzi/plitzi-ui/icons/AlignContentSpaceBetweenRow";
+import h from "@plitzi/plitzi-ui/icons/AlignContentStartColumn";
+import g from "@plitzi/plitzi-ui/icons/AlignContentStartReverseColumn";
+import _ from "@plitzi/plitzi-ui/icons/AlignContentStartReverseRow";
+import v from "@plitzi/plitzi-ui/icons/AlignContentStartRow";
+import y from "@plitzi/plitzi-ui/icons/AlignContentStretchColumn";
+import b from "@plitzi/plitzi-ui/icons/AlignContentStretchRow";
+//#region src/components/StyleInspector/categories/Display/DisplayFlexAlignContent.tsx
+var x = ["align-content"], S = ({ value: S, isReverse: C = !1, isRow: w = !1, onChange: T }) => {
+	let E = n((e) => T?.("align-content", e), [T]), D = n((e, t, n) => {
+		switch (e) {
+			case "flex-start":
+				if (t && !n) return /* @__PURE__ */ i(v, {});
+				if (t && n) return /* @__PURE__ */ i(_, {});
+				if (!t && !n) return /* @__PURE__ */ i(h, {});
+				if (!t && n) return /* @__PURE__ */ i(g, {});
+				break;
+			case "center": return i(t ? o : a, {});
+			case "flex-end":
+				if (t && !n) return /* @__PURE__ */ i(u, {});
+				if (t && n) return /* @__PURE__ */ i(l, {});
+				if (!t && !n) return /* @__PURE__ */ i(s, {});
+				if (!t && n) return /* @__PURE__ */ i(c, {});
+				break;
+			case "stretch": return i(t ? b : y, {});
+			case "space-between": return i(t ? m : p, {});
+			case "space-around": return i(t ? f : d, {});
+			default: return;
+		}
+	}, []);
+	return /* @__PURE__ */ i(t, {
+		keys: x,
+		label: "Align",
+		children: /* @__PURE__ */ i(e, {
+			onChange: E,
+			type: "iconGroup",
+			items: r(() => [
+				{
+					value: "flex-start",
+					icon: D("flex-start", w, C),
+					description: "Align Rows: Start",
+					active: S === "flex-start"
+				},
+				{
+					value: "center",
+					icon: D("center", w, C),
+					description: "Align Rows: Center",
+					active: S === "center"
+				},
+				{
+					value: "flex-end",
+					icon: D("flex-end", w, C),
+					description: "Align Rows: End",
+					active: S === "flex-end"
+				},
+				{
+					value: "stretch",
+					icon: D("stretch", w, C),
+					description: "Align Rows: Stretch",
+					active: S === "stretch"
+				},
+				{
+					value: "space-between",
+					icon: D("space-between", w, C),
+					description: "Align Rows: Space Between",
+					active: S === "space-between"
+				},
+				{
+					value: "space-around",
+					icon: D("space-around", w, C),
+					description: "Align Rows: Space Around",
+					active: S === "space-around"
+				}
+			], [
+				D,
+				w,
+				C,
+				S
+			])
+		})
+	});
+};
+//#endregion
+export { S as default };

package/dist/components/StyleInspector/categories/Display/DisplayFlexAlignItems.d.ts

@@ -0,0 +1,9 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type DisplayFlexAlignItemsProps = {
+    value?: StyleValue;
+    isReverse: boolean;
+    isRow: boolean;
+    onChange?: (type: StyleCategory, value: StyleValue) => void;
+};
+declare const DisplayFlexAlignItems: ({ value, isReverse, isRow, onChange }: DisplayFlexAlignItemsProps) => import("react/jsx-runtime").JSX.Element;
+export default DisplayFlexAlignItems;

package/dist/components/StyleInspector/categories/Display/DisplayFlexAlignItems.mjs

@@ -0,0 +1,102 @@
+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/AlignItemsBaselineColumn";
+import o from "@plitzi/plitzi-ui/icons/AlignItemsBaselineColumnReverse";
+import s from "@plitzi/plitzi-ui/icons/AlignItemsBaselineRow";
+import c from "@plitzi/plitzi-ui/icons/AlignItemsBaselineRowReverse";
+import l from "@plitzi/plitzi-ui/icons/AlignItemsCenterColumn";
+import u from "@plitzi/plitzi-ui/icons/AlignItemsCenterColumnReverse";
+import d from "@plitzi/plitzi-ui/icons/AlignItemsCenterRow";
+import f from "@plitzi/plitzi-ui/icons/AlignItemsCenterRowReverse";
+import p from "@plitzi/plitzi-ui/icons/AlignItemsEndColumn";
+import m from "@plitzi/plitzi-ui/icons/AlignItemsEndColumnReverse";
+import h from "@plitzi/plitzi-ui/icons/AlignItemsEndRow";
+import g from "@plitzi/plitzi-ui/icons/AlignItemsEndRowReverse";
+import _ from "@plitzi/plitzi-ui/icons/AlignItemsStartColumn";
+import v from "@plitzi/plitzi-ui/icons/AlignItemsStartColumnReverse";
+import y from "@plitzi/plitzi-ui/icons/AlignItemsStartRow";
+import b from "@plitzi/plitzi-ui/icons/AlignItemsStartRowReverse";
+import x from "@plitzi/plitzi-ui/icons/AlignItemsStretchColumn";
+import S from "@plitzi/plitzi-ui/icons/AlignItemsStretchRow";
+//#region src/components/StyleInspector/categories/Display/DisplayFlexAlignItems.tsx
+var C = ["align-items"], w = ({ value: w, isReverse: T = !1, isRow: E = !1, onChange: D }) => {
+	let O = n((e) => D?.("align-items", e), [D]), k = n((e, t, n) => {
+		switch (e) {
+			case "flex-start":
+				if (t && !n) return /* @__PURE__ */ i(y, {});
+				if (t && n) return /* @__PURE__ */ i(b, {});
+				if (!t && !n) return /* @__PURE__ */ i(_, {});
+				if (!t && n) return /* @__PURE__ */ i(v, {});
+				break;
+			case "center":
+				if (t && !n) return /* @__PURE__ */ i(d, {});
+				if (t && n) return /* @__PURE__ */ i(f, {});
+				if (!t && !n) return /* @__PURE__ */ i(l, {});
+				if (!t && n) return /* @__PURE__ */ i(u, {});
+				break;
+			case "flex-end":
+				if (t && !n) return /* @__PURE__ */ i(h, {});
+				if (t && n) return /* @__PURE__ */ i(g, {});
+				if (!t && !n) return /* @__PURE__ */ i(p, {});
+				if (!t && n) return /* @__PURE__ */ i(m, {});
+				break;
+			case "stretch": return i(t ? S : x, {});
+			case "baseline":
+				if (t && !n) return /* @__PURE__ */ i(s, {});
+				if (t && n) return /* @__PURE__ */ i(c, {});
+				if (!t && !n) return /* @__PURE__ */ i(a, {});
+				if (!t && n) return /* @__PURE__ */ i(o, {});
+				break;
+			default: return;
+		}
+	}, []);
+	return /* @__PURE__ */ i(t, {
+		keys: C,
+		label: "Align",
+		children: /* @__PURE__ */ i(e, {
+			onChange: O,
+			type: "iconGroup",
+			items: r(() => [
+				{
+					value: "flex-start",
+					icon: k("flex-start", E, T),
+					description: "Align Start",
+					active: w === "flex-start"
+				},
+				{
+					value: "center",
+					icon: k("center", E, T),
+					description: "Align Center",
+					active: w === "center"
+				},
+				{
+					value: "flex-end",
+					icon: k("flex-end", E, T),
+					description: "Align End",
+					active: w === "flex-end"
+				},
+				{
+					value: "stretch",
+					icon: k("stretch", E, T),
+					description: "Align Stretch",
+					active: w === "stretch"
+				},
+				{
+					value: "baseline",
+					icon: k("baseline", E, T),
+					description: "Align Baseline",
+					active: w === "space-between"
+				}
+			], [
+				w,
+				T,
+				E,
+				k
+			])
+		})
+	});
+};
+//#endregion
+export { w as default };

package/dist/components/StyleInspector/categories/Display/DisplayFlexDirection.d.ts

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

package/dist/components/StyleInspector/categories/Display/DisplayFlexDirection.mjs

@@ -0,0 +1,46 @@
+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/ArrowReverse";
+//#region src/components/StyleInspector/categories/Display/DisplayFlexDirection.tsx
+var o = ["flex-direction"], s = ({ value: s = "row", isReverse: c = !1, onChange: l }) => /* @__PURE__ */ i(t, {
+	keys: o,
+	label: "Direction",
+	children: /* @__PURE__ */ i(e, {
+		onChange: n((e) => {
+			typeof e == "boolean" ? e ? l?.("flex-direction", `${s}-reverse`) : l?.("flex-direction", s.replace("-reverse", "")) : l?.("flex-direction", e);
+		}, [l, s]),
+		type: "iconGroup",
+		items: r(() => [
+			{
+				value: c ? "row-reverse" : "row",
+				icon: /* @__PURE__ */ i("div", {
+					className: "px-1 text-xs select-none",
+					children: "Horizontal"
+				}),
+				description: "",
+				active: s === "row" || s === "row-reverse",
+				size: "custom"
+			},
+			{
+				value: c ? "column-reverse" : "column",
+				icon: /* @__PURE__ */ i("div", {
+					className: "px-1 text-xs select-none",
+					children: "Vertical"
+				}),
+				description: "",
+				active: s === "column" || s === "column-reverse",
+				size: "custom"
+			},
+			{
+				value: !c,
+				icon: /* @__PURE__ */ i(a, {}),
+				description: "Reverse Direction",
+				active: c
+			}
+		], [s, c])
+	})
+});
+//#endregion
+export { s as default };

package/dist/components/StyleInspector/categories/Display/DisplayFlexJustify.d.ts

@@ -0,0 +1,9 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type DisplayFlexJustifyProps = {
+    value?: StyleValue;
+    isReverse: boolean;
+    isRow: boolean;
+    onChange?: (type: StyleCategory, value: StyleValue) => void;
+};
+declare const DisplayFlexJustify: ({ value, isReverse, isRow, onChange }: DisplayFlexJustifyProps) => import("react/jsx-runtime").JSX.Element;
+export default DisplayFlexJustify;

package/dist/components/StyleInspector/categories/Display/DisplayFlexJustify.mjs

@@ -0,0 +1,88 @@
+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/JustifyContentCenterColumn";
+import o from "@plitzi/plitzi-ui/icons/JustifyContentCenterRow";
+import s from "@plitzi/plitzi-ui/icons/JustifyContentEndColumn";
+import c from "@plitzi/plitzi-ui/icons/JustifyContentEndColumnReverse";
+import l from "@plitzi/plitzi-ui/icons/JustifyContentEndRow";
+import u from "@plitzi/plitzi-ui/icons/JustifyContentEndRowReverse";
+import d from "@plitzi/plitzi-ui/icons/JustifyContentSpaceAroundColumn";
+import f from "@plitzi/plitzi-ui/icons/JustifyContentSpaceAroundRow";
+import p from "@plitzi/plitzi-ui/icons/JustifyContentSpaceBetweenColumn";
+import m from "@plitzi/plitzi-ui/icons/JustifyContentSpaceBetweenRow";
+import h from "@plitzi/plitzi-ui/icons/JustifyContentStartColumn";
+import g from "@plitzi/plitzi-ui/icons/JustifyContentStartColumnReverse";
+import _ from "@plitzi/plitzi-ui/icons/JustifyContentStartRow";
+import v from "@plitzi/plitzi-ui/icons/JustifyContentStartRowReverse";
+//#region src/components/StyleInspector/categories/Display/DisplayFlexJustify.tsx
+var y = ["justify-content"], b = ({ value: b, isReverse: x = !1, isRow: S = !1, onChange: C }) => {
+	let w = n((e) => C?.("justify-content", e), [C]), T = n((e, t, n) => {
+		switch (e) {
+			case "flex-start":
+				if (t && !n) return /* @__PURE__ */ i(_, {});
+				if (t && n) return /* @__PURE__ */ i(v, {});
+				if (!t && !n) return /* @__PURE__ */ i(h, {});
+				if (!t && n) return /* @__PURE__ */ i(g, {});
+				break;
+			case "center": return i(t ? o : a, {});
+			case "flex-end":
+				if (t && !n) return /* @__PURE__ */ i(l, {});
+				if (t && n) return /* @__PURE__ */ i(u, {});
+				if (!t && !n) return /* @__PURE__ */ i(s, {});
+				if (!t && n) return /* @__PURE__ */ i(c, {});
+				break;
+			case "space-between": return i(t ? m : p, {});
+			case "space-around": return i(t ? f : d, {});
+			default: return;
+		}
+	}, []);
+	return /* @__PURE__ */ i(t, {
+		label: "Justify",
+		keys: y,
+		children: /* @__PURE__ */ i(e, {
+			onChange: w,
+			type: "iconGroup",
+			items: r(() => [
+				{
+					value: "flex-start",
+					icon: T("flex-start", S, x),
+					description: "Justify Start",
+					active: b === "flex-start"
+				},
+				{
+					value: "center",
+					icon: T("center", S, x),
+					description: "Justify Center",
+					active: b === "center"
+				},
+				{
+					value: "flex-end",
+					icon: T("flex-end", S, x),
+					description: "Justify End",
+					active: b === "flex-end"
+				},
+				{
+					value: "space-between",
+					icon: T("space-between", S, x),
+					description: "Justify Space Between - distribute evenly from start to end",
+					active: b === "space-between"
+				},
+				{
+					value: "space-around",
+					icon: T("space-around", S, x),
+					description: "Justify Space Around - distribute evenly, why space around all children",
+					active: b === "space-around"
+				}
+			], [
+				T,
+				S,
+				x,
+				b
+			])
+		})
+	});
+};
+//#endregion
+export { b as default };

package/dist/components/StyleInspector/categories/Display/DisplayGap.d.ts

@@ -0,0 +1,8 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type DisplayGapProps = {
+    rowGap?: StyleValue;
+    columnGap?: StyleValue;
+    onChange?: (type: StyleCategory, value: StyleValue) => void;
+};
+declare const DisplayGap: ({ rowGap, columnGap, onChange }: DisplayGapProps) => import("react/jsx-runtime").JSX.Element;
+export default DisplayGap;

package/dist/components/StyleInspector/categories/Display/DisplayGap.mjs

@@ -0,0 +1,27 @@
+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/Display/DisplayGap.tsx
+var a = ["row-gap", "column-gap"], o = ["row-gap"], s = ["column-gap"], c = ({ rowGap: c = "0px", columnGap: l = "0px", onChange: u }) => {
+	let d = n((e) => u?.("row-gap", e), [u]), f = n((e) => u?.("column-gap", e), [u]);
+	return /* @__PURE__ */ i(t, {
+		label: "Gap",
+		keys: a,
+		children: [/* @__PURE__ */ r(e, {
+			keys: o,
+			label: "Row",
+			value: c,
+			onChange: d,
+			type: "metric"
+		}), /* @__PURE__ */ r(e, {
+			keys: s,
+			label: "Column",
+			value: l,
+			onChange: f,
+			type: "metric"
+		})]
+	});
+};
+//#endregion
+export { c as default };

package/dist/components/StyleInspector/categories/Display/DisplayGridGap.d.ts

@@ -0,0 +1,8 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type DisplayGridGapProps = {
+    rowGap?: StyleValue;
+    columnGap?: StyleValue;
+    onChange?: (type: StyleCategory, value: StyleValue) => void;
+};
+declare const DisplayGridGap: ({ rowGap, columnGap, onChange }: DisplayGridGapProps) => import("react/jsx-runtime").JSX.Element;
+export default DisplayGridGap;

package/dist/components/StyleInspector/categories/Display/DisplayGridGap.mjs

@@ -0,0 +1,27 @@
+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/Display/DisplayGridGap.tsx
+var a = ["grid-row-gap", "grid-column-gap"], o = ["grid-row-gap"], s = ["grid-column-gap"], c = ({ rowGap: c = "0px", columnGap: l = "0px", onChange: u }) => {
+	let d = n((e) => u?.("grid-row-gap", e), [u]), f = n((e) => u?.("grid-column-gap", e), [u]);
+	return /* @__PURE__ */ i(t, {
+		label: "Gap",
+		keys: a,
+		children: [/* @__PURE__ */ r(e, {
+			keys: o,
+			label: "Row",
+			value: c,
+			onChange: d,
+			type: "metric"
+		}), /* @__PURE__ */ r(e, {
+			keys: s,
+			label: "Column",
+			value: l,
+			onChange: f,
+			type: "metric"
+		})]
+	});
+};
+//#endregion
+export { c as default };

package/dist/components/StyleInspector/categories/Display/DisplayGridTemplate.d.ts

@@ -0,0 +1,12 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type DisplayGridTemplateProps = {
+    templateAreas?: StyleValue;
+    templateColumns?: StyleValue;
+    templateRows?: StyleValue;
+    templateAutoFlow?: StyleValue;
+    templateAutoRows?: StyleValue;
+    templateAutoColumns?: StyleValue;
+    onChange?: (type: StyleCategory, value: StyleValue) => void;
+};
+declare const DisplayGridTemplate: ({ templateAreas, templateColumns, templateRows, templateAutoFlow, templateAutoRows, templateAutoColumns, onChange }: DisplayGridTemplateProps) => import("react/jsx-runtime").JSX.Element;
+export default DisplayGridTemplate;

package/dist/components/StyleInspector/categories/Display/DisplayGridTemplate.mjs

@@ -0,0 +1,83 @@
+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/Display/DisplayGridTemplate.tsx
+var s = ["grid-auto-flow"], c = ["grid-template-columns", "grid-template-rows"], l = ["grid-auto-columns", "grid-auto-rows"], u = ({ templateAreas: u = "none", templateColumns: d = "none", templateRows: f = "none", templateAutoFlow: p = "row", templateAutoRows: m = "none", templateAutoColumns: h = "none", onChange: g }) => {
+	let _ = n((e) => g?.("grid-template-areas", e), [g]), v = n((e) => g?.("grid-template-rows", e), [g]), y = n((e) => g?.("grid-template-columns", e), [g]), b = n((e) => g?.("grid-auto-rows", e), [g]), x = n((e) => g?.("grid-auto-columns", e), [g]), S = n((e) => g?.("grid-auto-flow", e), [g]);
+	return /* @__PURE__ */ o(i, { children: [
+		/* @__PURE__ */ a(t, {
+			label: "Direction",
+			keys: s,
+			children: /* @__PURE__ */ a(e, {
+				type: "iconGroup",
+				items: r(() => [{
+					value: "row",
+					icon: /* @__PURE__ */ a("div", {
+						className: "px-1 text-xs whitespace-nowrap select-none",
+						children: "Row"
+					}),
+					description: "",
+					active: p === "row",
+					size: "custom"
+				}, {
+					value: "column",
+					icon: /* @__PURE__ */ a("div", {
+						className: "px-1 text-xs select-none",
+						children: "Column"
+					}),
+					description: "",
+					active: p === "column",
+					size: "custom"
+				}], [p]),
+				onChange: S
+			})
+		}),
+		/* @__PURE__ */ o(t, {
+			label: "Template",
+			keys: c,
+			children: [
+				/* @__PURE__ */ a(e, {
+					keys: ["grid-template-areas"],
+					label: "Area",
+					value: u,
+					onChange: _,
+					type: "metric"
+				}),
+				/* @__PURE__ */ a(e, {
+					keys: ["grid-template-rows"],
+					label: "Row",
+					value: f,
+					onChange: v,
+					type: "input"
+				}),
+				/* @__PURE__ */ a(e, {
+					keys: ["grid-template-columns"],
+					label: "Column",
+					value: d,
+					onChange: y,
+					type: "input"
+				})
+			]
+		}),
+		/* @__PURE__ */ o(t, {
+			label: "Default",
+			keys: l,
+			children: [/* @__PURE__ */ a(e, {
+				keys: ["grid-auto-rows"],
+				label: "Row",
+				value: m,
+				onChange: b,
+				type: "metric"
+			}), /* @__PURE__ */ a(e, {
+				keys: ["grid-auto-columns"],
+				label: "Column",
+				value: h,
+				onChange: x,
+				type: "metric"
+			})]
+		})
+	] });
+};
+//#endregion
+export { u as default };