@plitzi/sdk-style 0.30.19

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

@@ -0,0 +1,39 @@
+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/Size/SizeFit.tsx
+var i = ["object-fit"], a = ({ value: a, onChange: o }) => /* @__PURE__ */ n(t, {
+	label: "Object Fit",
+	keys: i,
+	children: /* @__PURE__ */ r(e, {
+		keys: i,
+		label: "",
+		value: a,
+		onChange: o?.("object-fit"),
+		type: "select",
+		children: [
+			/* @__PURE__ */ n("option", {
+				value: "fill",
+				children: "Fill"
+			}),
+			/* @__PURE__ */ n("option", {
+				value: "contain",
+				children: "Contain"
+			}),
+			/* @__PURE__ */ n("option", {
+				value: "cover",
+				children: "Cover"
+			}),
+			/* @__PURE__ */ n("option", {
+				value: "none",
+				children: "None"
+			}),
+			/* @__PURE__ */ n("option", {
+				value: "scale-down",
+				children: "Scale Down"
+			})
+		]
+	})
+});
+//#endregion
+export { a as default };

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

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

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

@@ -0,0 +1,49 @@
+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 { SizeOverflowScroll as i } from "@plitzi/plitzi-ui/icons";
+//#region src/components/StyleInspector/categories/Size/SizeOverflow.tsx
+var a = ({ value: a, onChange: o }) => {
+	let s = n(() => [
+		{
+			value: "visible",
+			icon: "fa-solid fa-eye",
+			description: "Visible",
+			active: a === "visible"
+		},
+		{
+			value: "hidden",
+			icon: "fa-solid fa-eye-slash",
+			description: "Hidden",
+			active: a === "hidden"
+		},
+		{
+			value: "scroll",
+			icon: /* @__PURE__ */ r(i, {}),
+			description: "Scroll",
+			active: a === "scroll"
+		},
+		{
+			value: "auto",
+			icon: /* @__PURE__ */ r("div", {
+				className: "px-1 text-xs select-none",
+				children: "Auto"
+			}),
+			description: "",
+			active: a === "auto",
+			size: "custom"
+		}
+	], [a]);
+	return /* @__PURE__ */ r(t, {
+		label: "Overflow",
+		keys: ["overflow"],
+		children: /* @__PURE__ */ r(e, {
+			onChange: o?.("overflow"),
+			type: "iconGroup",
+			items: s
+		})
+	});
+};
+//#endregion
+export { a as default };

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

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

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

@@ -0,0 +1,30 @@
+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/Size/SizePosition.tsx
+var a = ({ value: a, onChange: o }) => {
+	let s = a.split(" "), c = n((e) => (t) => {
+		let n = [...s];
+		e === "left" ? n[0] = t : e === "top" && (n[1] = t), o?.("object-position")(n.join(" "));
+	}, [o, s]);
+	return /* @__PURE__ */ i(t, {
+		label: "Object Pos",
+		keys: ["object-position"],
+		children: [/* @__PURE__ */ r(e, {
+			label: "Left",
+			direction: "column",
+			value: s[0],
+			onChange: c("left"),
+			type: "metric"
+		}), /* @__PURE__ */ r(e, {
+			label: "Top",
+			direction: "column",
+			value: s[1],
+			onChange: c("top"),
+			type: "metric"
+		})]
+	});
+};
+//#endregion
+export { a as default };

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

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+import e from "../../StyleInspectorContext.mjs";
+import t from "../../hooks/useInspectorValues.mjs";
+import n from "../../components/CategoryContainer/index.mjs";
+import r from "./SpacingEditor.mjs";
+import i from "./SpacingMargin.mjs";
+import { memo as a, use as o, useCallback as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Spacing/Spacing.tsx
+var d = [
+	"margin-top",
+	"margin-bottom",
+	"margin-left",
+	"margin-right",
+	"padding-top",
+	"padding-bottom",
+	"padding-left",
+	"padding-right"
+], f = a(({ replaceTokens: a = !1, isCollapsed: f = !0, onCollapse: p }) => {
+	let [m, h] = c(!1), { setValue: g } = o(e), _ = t({
+		keys: d,
+		asValue: !0,
+		replaceTokens: a
+	}), [v, y] = c(), b = s((e) => p?.("spacing", e), [p]), x = s(() => h((e) => !e), [h]), S = s((e, t) => {
+		if (!m) {
+			g(e, t);
+			return;
+		}
+		[
+			"margin-top",
+			"margin-bottom",
+			"margin-left",
+			"margin-right"
+		].includes(e) && g(void 0, {
+			"margin-top": t,
+			"margin-bottom": t,
+			"margin-left": t,
+			"margin-right": t
+		}), [
+			"padding-top",
+			"padding-bottom",
+			"padding-left",
+			"padding-right"
+		].includes(e) && g(void 0, {
+			"padding-top": t,
+			"padding-bottom": t,
+			"padding-left": t,
+			"padding-right": t
+		});
+	}, [m, g]);
+	return /* @__PURE__ */ l(n, {
+		title: "Spacing",
+		dotKeys: d,
+		isCollapsed: f,
+		onCollapse: b,
+		children: /* @__PURE__ */ u("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ l(i, {
+				values: _,
+				fragmentSelected: v,
+				onSelectFragment: s((e) => y(e), [y]),
+				isLinked: m,
+				onLinkSelected: x
+			}), v && /* @__PURE__ */ l(r, {
+				fragmentSelected: v,
+				onChange: S,
+				value: _[v]
+			})]
+		})
+	});
+});
+//#endregion
+export { f as default };

package/dist/components/StyleInspector/categories/Spacing/SpacingEditor.d.ts

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

package/dist/components/StyleInspector/categories/Spacing/SpacingEditor.mjs

@@ -0,0 +1,155 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import n from "@plitzi/plitzi-ui/Icon";
+import r from "@plitzi/plitzi-ui/Button";
+import i from "@plitzi/plitzi-ui/MetricInput";
+import a from "@plitzi/plitzi-ui/icons/MarginBottom";
+import o from "@plitzi/plitzi-ui/icons/MarginLeft";
+import s from "@plitzi/plitzi-ui/icons/MarginRight";
+import c from "@plitzi/plitzi-ui/icons/MarginTop";
+import l from "@plitzi/plitzi-ui/icons/PaddingBottom";
+import u from "@plitzi/plitzi-ui/icons/PaddingLeft";
+import d from "@plitzi/plitzi-ui/icons/PaddingRight";
+import f from "@plitzi/plitzi-ui/icons/PaddingTop";
+//#region src/components/StyleInspector/categories/Spacing/SpacingEditor.tsx
+var p = {
+	"margin-top": /* @__PURE__ */ e(c, {}),
+	"margin-bottom": /* @__PURE__ */ e(a, {}),
+	"margin-left": /* @__PURE__ */ e(o, {}),
+	"margin-right": /* @__PURE__ */ e(s, {}),
+	"padding-top": /* @__PURE__ */ e(f, {}),
+	"padding-bottom": /* @__PURE__ */ e(l, {}),
+	"padding-left": /* @__PURE__ */ e(u, {}),
+	"padding-right": /* @__PURE__ */ e(d, {})
+}, m = ({ fragmentSelected: a, value: o, onChange: s }) => {
+	let c = (e) => () => {
+		s?.(a, e);
+	}, l = (e) => {
+		s?.(a, e);
+	}, u = a.split("-")[0];
+	return /* @__PURE__ */ t("div", {
+		className: "mt-2 rounded-sm border border-gray-300 bg-white select-none dark:border-zinc-600 dark:bg-zinc-800",
+		children: [/* @__PURE__ */ t("div", {
+			className: "grid grid-cols-2 items-center gap-2 px-1 pt-1",
+			children: [/* @__PURE__ */ t("div", {
+				className: "mr-1 flex items-center capitalize",
+				children: [/* @__PURE__ */ e(n, {
+					className: "mr-1",
+					children: p[a]
+				}), /* @__PURE__ */ e("div", {
+					className: "truncate text-xs",
+					children: a.split("-").join(" ")
+				})]
+			}), /* @__PURE__ */ e(i, {
+				value: o,
+				size: "xs",
+				onChange: l,
+				units: [
+					{
+						label: "PX",
+						value: "px"
+					},
+					{
+						label: "VW",
+						value: "vw"
+					},
+					{
+						label: "VH",
+						value: "vh"
+					},
+					{
+						label: "%",
+						value: "%"
+					},
+					{
+						label: "EM",
+						value: "em"
+					},
+					{
+						label: "REM",
+						value: "rem"
+					},
+					{
+						label: "DVH",
+						value: "dvh"
+					},
+					{
+						label: "DVW",
+						value: "dvw"
+					},
+					{
+						label: "LVH",
+						value: "lvh"
+					},
+					{
+						label: "LVW",
+						value: "lvw"
+					}
+				],
+				className: "rounded-sm"
+			})]
+		}), /* @__PURE__ */ t("div", {
+			className: "flex",
+			children: [u === "margin" && /* @__PURE__ */ e(r, {
+				intent: "secondary",
+				size: "xs",
+				className: "m-1 w-14 grow",
+				onClick: c("auto"),
+				children: "Auto"
+			}), /* @__PURE__ */ t("div", {
+				className: "m-1 grid w-full grid-cols-4 grid-rows-2 gap-2",
+				children: [
+					/* @__PURE__ */ e(r, {
+						intent: "secondary",
+						size: "xs",
+						onClick: c("0px"),
+						children: "0"
+					}),
+					/* @__PURE__ */ e(r, {
+						intent: "secondary",
+						size: "xs",
+						onClick: c("10px"),
+						children: "10"
+					}),
+					/* @__PURE__ */ e(r, {
+						intent: "secondary",
+						size: "xs",
+						onClick: c("20px"),
+						children: "20"
+					}),
+					/* @__PURE__ */ e(r, {
+						intent: "secondary",
+						size: "xs",
+						onClick: c("40px"),
+						children: "40"
+					}),
+					/* @__PURE__ */ e(r, {
+						intent: "secondary",
+						size: "xs",
+						onClick: c("60px"),
+						children: "60"
+					}),
+					/* @__PURE__ */ e(r, {
+						intent: "secondary",
+						size: "xs",
+						onClick: c("100px"),
+						children: "100"
+					}),
+					/* @__PURE__ */ e(r, {
+						intent: "secondary",
+						size: "xs",
+						onClick: c("140px"),
+						children: "140"
+					}),
+					/* @__PURE__ */ e(r, {
+						intent: "secondary",
+						size: "xs",
+						onClick: c("220px"),
+						children: "220"
+					})
+				]
+			})]
+		})]
+	});
+};
+//#endregion
+export { m as default };

package/dist/components/StyleInspector/categories/Spacing/SpacingMargin.d.ts

@@ -0,0 +1,19 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type SpacingMarginProps = {
+    fragmentSelected?: StyleCategory;
+    values?: {
+        'margin-top'?: StyleValue;
+        'margin-bottom'?: StyleValue;
+        'margin-left'?: StyleValue;
+        'margin-right'?: StyleValue;
+        'padding-top'?: StyleValue;
+        'padding-bottom'?: StyleValue;
+        'padding-right'?: StyleValue;
+        'padding-left'?: StyleValue;
+    };
+    isLinked?: boolean;
+    onLinkSelected?: () => void;
+    onSelectFragment?: (fragment?: StyleCategory) => void;
+};
+declare const SpacingMargin: ({ fragmentSelected, values, isLinked, onLinkSelected, onSelectFragment }: SpacingMarginProps) => import("react/jsx-runtime").JSX.Element;
+export default SpacingMargin;

package/dist/components/StyleInspector/categories/Spacing/SpacingMargin.mjs

@@ -0,0 +1,72 @@
+import e from "../../components/InspectorLabel/index.mjs";
+import t from "./SpacingNumber.mjs";
+import n from "./SpacingPadding.mjs";
+import { useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Spacing/SpacingMargin.tsx
+var o = [
+	"margin-top",
+	"margin-left",
+	"margin-right",
+	"margin-bottom"
+], s = ({ fragmentSelected: s, values: c, isLinked: l = !1, onLinkSelected: u, onSelectFragment: d }) => {
+	let f = r((e) => () => {
+		e === s ? d?.(void 0) : d?.(e);
+	}, [s, d]), { "margin-top": p, "margin-bottom": m, "margin-left": h, "margin-right": g } = c ?? {};
+	return /* @__PURE__ */ a("div", {
+		className: "relative flex cursor-pointer flex-col rounded-md border border-gray-300 bg-white select-none dark:border-zinc-600 dark:bg-zinc-800",
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "flex items-center justify-center py-0.5",
+				children: [/* @__PURE__ */ i(e, {
+					className: "absolute top-0 left-0 overflow-hidden rounded-br-md !p-0 text-[10px]",
+					size: "custom",
+					keyValue: o,
+					children: "MARGIN"
+				}), /* @__PURE__ */ i(t, {
+					value: p,
+					active: s === "margin-top",
+					onClick: f("margin-top")
+				})]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex items-center justify-center",
+				children: [
+					/* @__PURE__ */ i("div", {
+						className: "flex items-center justify-center px-0.5",
+						children: /* @__PURE__ */ i(t, {
+							value: h,
+							active: s === "margin-left",
+							onClick: f("margin-left")
+						})
+					}),
+					/* @__PURE__ */ i(n, {
+						values: c,
+						fragmentSelected: s,
+						onSelectFragment: d,
+						isLinked: l,
+						onLinkSelected: u
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "flex items-center justify-center px-0.5",
+						children: /* @__PURE__ */ i(t, {
+							value: g,
+							active: s === "margin-right",
+							onClick: f("margin-right")
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex items-center justify-center py-0.5",
+				children: /* @__PURE__ */ i(t, {
+					value: m,
+					active: s === "margin-bottom",
+					onClick: f("margin-bottom")
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/StyleInspector/categories/Spacing/SpacingNumber.d.ts

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

package/dist/components/StyleInspector/categories/Spacing/SpacingNumber.mjs

@@ -0,0 +1,17 @@
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Spacing/SpacingNumber.tsx
+var n = ({ value: n = "", active: r = !1, onClick: i }) => /* @__PURE__ */ t("div", {
+	className: e("mx-0.5 flex w-[30px] items-center justify-center rounded-md border px-0.5 text-xs", {
+		"border-transparent hover:border-blue-300 hover:bg-blue-100 hover:text-blue-400 dark:hover:bg-blue-900/50 dark:hover:text-blue-400": !r,
+		"border-blue-300 bg-blue-100 text-blue-400 dark:bg-blue-900/50": r
+	}),
+	title: n,
+	onClick: i,
+	children: /* @__PURE__ */ t("div", {
+		className: "truncate",
+		children: n.replace("px", "")
+	})
+});
+//#endregion
+export { n as default };

package/dist/components/StyleInspector/categories/Spacing/SpacingPadding.d.ts

@@ -0,0 +1,15 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type SpacingPaddingProps = {
+    fragmentSelected?: StyleCategory;
+    values?: {
+        'padding-top'?: StyleValue;
+        'padding-bottom'?: StyleValue;
+        'padding-left'?: StyleValue;
+        'padding-right'?: StyleValue;
+    };
+    isLinked?: boolean;
+    onLinkSelected?: () => void;
+    onSelectFragment?: (fragment?: StyleCategory) => void;
+};
+declare const SpacingPadding: ({ fragmentSelected, values, isLinked, onLinkSelected, onSelectFragment }: SpacingPaddingProps) => import("react/jsx-runtime").JSX.Element;
+export default SpacingPadding;

package/dist/components/StyleInspector/categories/Spacing/SpacingPadding.mjs

@@ -0,0 +1,69 @@
+import e from "../../components/InspectorLabel/index.mjs";
+import t from "./SpacingNumber.mjs";
+import { useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Spacing/SpacingPadding.tsx
+var a = [
+	"padding-top",
+	"padding-left",
+	"padding-right",
+	"padding-bottom"
+], o = ({ fragmentSelected: o, values: s, isLinked: c = !1, onLinkSelected: l, onSelectFragment: u }) => {
+	let d = n((e) => () => {
+		e === o ? u?.(void 0) : u?.(e);
+	}, [u, o]), { "padding-top": f, "padding-bottom": p, "padding-left": m, "padding-right": h } = s ?? {};
+	return /* @__PURE__ */ i("div", {
+		className: "relative grow rounded-md border border-gray-300 dark:border-zinc-600",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex items-center justify-center py-0.5",
+				children: [/* @__PURE__ */ r(e, {
+					keyValue: a,
+					className: "absolute top-0 left-0 overflow-hidden rounded-br-md !p-0 text-[10px]",
+					size: "custom",
+					children: "PADDING"
+				}), /* @__PURE__ */ r(t, {
+					value: f,
+					active: o === "padding-top",
+					onClick: d("padding-top")
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex items-center justify-center",
+				children: [
+					/* @__PURE__ */ r("div", {
+						className: "flex items-center justify-center px-0.5",
+						children: /* @__PURE__ */ r(t, {
+							value: m,
+							active: o === "padding-left",
+							onClick: d("padding-left")
+						})
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "flex grow items-center justify-center rounded-md border border-gray-300 bg-slate-100 py-1 dark:border-zinc-600 dark:bg-zinc-700/50",
+						onClick: l,
+						children: [c && /* @__PURE__ */ r("i", { className: "fa-solid fa-link text-sm" }), !c && /* @__PURE__ */ r("i", { className: "fa-solid fa-link-slash text-sm" })]
+					}),
+					/* @__PURE__ */ r("div", {
+						className: "flex items-center justify-center px-0.5",
+						children: /* @__PURE__ */ r(t, {
+							value: h,
+							active: o === "padding-right",
+							onClick: d("padding-right")
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "flex items-center justify-center py-0.5",
+				children: /* @__PURE__ */ r(t, {
+					value: p,
+					active: o === "padding-bottom",
+					onClick: d("padding-bottom")
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { o as default };

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

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

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

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

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

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