@plitzi/sdk-style 0.32.20 → 0.32.22

package/dist/components/StyleInspector/categories/Others/OthersForm.d.ts

@@ -0,0 +1,9 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type OthersFormProps = {
+    accentColor?: StyleValue;
+    caretColor?: StyleValue;
+    colorScheme?: StyleValue;
+    onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const OthersForm: ({ accentColor, caretColor, colorScheme, onChange }: OthersFormProps) => import("react").JSX.Element;
+export default OthersForm;

package/dist/components/StyleInspector/categories/Others/OthersForm.mjs

@@ -0,0 +1,48 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Others/OthersForm.tsx
+var a = ({ accentColor: a, caretColor: o, colorScheme: s, onChange: c }) => /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i(t, {
+	label: "",
+	children: [/* @__PURE__ */ r(e, {
+		keys: ["accent-color"],
+		label: "Accent",
+		type: "color",
+		value: a,
+		onChange: c?.("accent-color")
+	}), /* @__PURE__ */ r(e, {
+		keys: ["caret-color"],
+		label: "Caret",
+		type: "color",
+		value: o,
+		onChange: c?.("caret-color")
+	})]
+}), /* @__PURE__ */ r(t, {
+	label: "Color Scheme",
+	keys: ["color-scheme"],
+	children: /* @__PURE__ */ i(e, {
+		value: s,
+		onChange: c?.("color-scheme"),
+		type: "select",
+		children: [
+			/* @__PURE__ */ r("option", {
+				value: "normal",
+				children: "Normal"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "light",
+				children: "Light"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "dark",
+				children: "Dark"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "light dark",
+				children: "Light Dark"
+			})
+		]
+	})
+})] });
+//#endregion
+export { a as default };

package/dist/components/StyleInspector/categories/Others/OthersInteraction.d.ts

@@ -0,0 +1,13 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type OthersInteractionProps = {
+    pointerEvents?: StyleValue;
+    userSelect?: StyleValue;
+    touchAction?: StyleValue;
+    resize?: StyleValue;
+    appearance?: StyleValue;
+    scrollBehavior?: StyleValue;
+    overscrollBehavior?: StyleValue;
+    onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const OthersInteraction: ({ pointerEvents, userSelect, touchAction, resize, appearance, scrollBehavior, overscrollBehavior, onChange }: OthersInteractionProps) => import("react").JSX.Element;
+export default OthersInteraction;

package/dist/components/StyleInspector/categories/Others/OthersInteraction.mjs

@@ -0,0 +1,162 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import n from "../../components/CategoryAdvanced/index.mjs";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Others/OthersInteraction.tsx
+var o = ({ pointerEvents: o, userSelect: s, touchAction: c, resize: l, appearance: u, scrollBehavior: d, overscrollBehavior: f, onChange: p }) => /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a(t, {
+	label: "",
+	children: [/* @__PURE__ */ a(e, {
+		keys: ["pointer-events"],
+		label: "Pointer",
+		value: o,
+		onChange: p?.("pointer-events"),
+		type: "select",
+		children: [/* @__PURE__ */ i("option", {
+			value: "auto",
+			children: "Auto"
+		}), /* @__PURE__ */ i("option", {
+			value: "none",
+			children: "None"
+		})]
+	}), /* @__PURE__ */ a(e, {
+		keys: ["user-select"],
+		label: "Selection",
+		value: s,
+		onChange: p?.("user-select"),
+		type: "select",
+		children: [
+			/* @__PURE__ */ i("option", {
+				value: "auto",
+				children: "Auto"
+			}),
+			/* @__PURE__ */ i("option", {
+				value: "none",
+				children: "None"
+			}),
+			/* @__PURE__ */ i("option", {
+				value: "text",
+				children: "Text"
+			}),
+			/* @__PURE__ */ i("option", {
+				value: "all",
+				children: "All"
+			}),
+			/* @__PURE__ */ i("option", {
+				value: "contain",
+				children: "Contain"
+			})
+		]
+	})]
+}), /* @__PURE__ */ a(n, { children: [
+	/* @__PURE__ */ a(t, {
+		label: "",
+		children: [/* @__PURE__ */ a(e, {
+			keys: ["touch-action"],
+			label: "Touch",
+			value: c,
+			onChange: p?.("touch-action"),
+			type: "select",
+			children: [
+				/* @__PURE__ */ i("option", {
+					value: "auto",
+					children: "Auto"
+				}),
+				/* @__PURE__ */ i("option", {
+					value: "none",
+					children: "None"
+				}),
+				/* @__PURE__ */ i("option", {
+					value: "pan-x",
+					children: "Pan X"
+				}),
+				/* @__PURE__ */ i("option", {
+					value: "pan-y",
+					children: "Pan Y"
+				}),
+				/* @__PURE__ */ i("option", {
+					value: "manipulation",
+					children: "Manipulation"
+				})
+			]
+		}), /* @__PURE__ */ a(e, {
+			keys: ["resize"],
+			label: "Resize",
+			value: l,
+			onChange: p?.("resize"),
+			type: "select",
+			children: [
+				/* @__PURE__ */ i("option", {
+					value: "none",
+					children: "None"
+				}),
+				/* @__PURE__ */ i("option", {
+					value: "both",
+					children: "Both"
+				}),
+				/* @__PURE__ */ i("option", {
+					value: "horizontal",
+					children: "Horizontal"
+				}),
+				/* @__PURE__ */ i("option", {
+					value: "vertical",
+					children: "Vertical"
+				})
+			]
+		})]
+	}),
+	/* @__PURE__ */ a(t, {
+		label: "",
+		children: [/* @__PURE__ */ a(e, {
+			keys: ["scroll-behavior"],
+			label: "Scroll",
+			value: d,
+			onChange: p?.("scroll-behavior"),
+			type: "select",
+			children: [/* @__PURE__ */ i("option", {
+				value: "auto",
+				children: "Auto"
+			}), /* @__PURE__ */ i("option", {
+				value: "smooth",
+				children: "Smooth"
+			})]
+		}), /* @__PURE__ */ a(e, {
+			keys: ["overscroll-behavior"],
+			label: "Overscroll",
+			value: f,
+			onChange: p?.("overscroll-behavior"),
+			type: "select",
+			children: [
+				/* @__PURE__ */ i("option", {
+					value: "auto",
+					children: "Auto"
+				}),
+				/* @__PURE__ */ i("option", {
+					value: "contain",
+					children: "Contain"
+				}),
+				/* @__PURE__ */ i("option", {
+					value: "none",
+					children: "None"
+				})
+			]
+		})]
+	}),
+	/* @__PURE__ */ i(t, {
+		label: "Appearance",
+		keys: ["appearance"],
+		children: /* @__PURE__ */ a(e, {
+			value: u,
+			onChange: p?.("appearance"),
+			type: "select",
+			children: [/* @__PURE__ */ i("option", {
+				value: "auto",
+				children: "Auto"
+			}), /* @__PURE__ */ i("option", {
+				value: "none",
+				children: "None"
+			})]
+		})
+	})
+] })] });
+//#endregion
+export { o as default };

package/dist/components/StyleInspector/categories/Others/OthersOutline.d.ts

@@ -0,0 +1,10 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type OthersOutlineProps = {
+    outlineWidth?: StyleValue;
+    outlineStyle?: StyleValue;
+    outlineColor?: StyleValue;
+    outlineOffset?: StyleValue;
+    onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const OthersOutline: ({ outlineWidth, outlineStyle, outlineColor, outlineOffset, onChange }: OthersOutlineProps) => import("react").JSX.Element;
+export default OthersOutline;

package/dist/components/StyleInspector/categories/Others/OthersOutline.mjs

@@ -0,0 +1,75 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Others/OthersOutline.tsx
+var a = ({ outlineWidth: a, outlineStyle: o, outlineColor: s, outlineOffset: c, onChange: l }) => /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i(t, {
+	label: "",
+	children: [/* @__PURE__ */ i(e, {
+		keys: ["outline-style"],
+		label: "Outline",
+		value: o,
+		onChange: l?.("outline-style"),
+		type: "select",
+		children: [
+			/* @__PURE__ */ r("option", {
+				value: "none",
+				children: "None"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "solid",
+				children: "Solid"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "dashed",
+				children: "Dashed"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "dotted",
+				children: "Dotted"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "double",
+				children: "Double"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "groove",
+				children: "Groove"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "ridge",
+				children: "Ridge"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "inset",
+				children: "Inset"
+			}),
+			/* @__PURE__ */ r("option", {
+				value: "outset",
+				children: "Outset"
+			})
+		]
+	}), /* @__PURE__ */ r(e, {
+		keys: ["outline-color"],
+		label: "Color",
+		type: "color",
+		value: s,
+		onChange: l?.("outline-color")
+	})]
+}), /* @__PURE__ */ i(t, {
+	label: "",
+	children: [/* @__PURE__ */ r(e, {
+		keys: ["outline-width"],
+		label: "Width",
+		value: a,
+		onChange: l?.("outline-width"),
+		type: "metric"
+	}), /* @__PURE__ */ r(e, {
+		keys: ["outline-offset"],
+		label: "Offset",
+		value: c,
+		onChange: l?.("outline-offset"),
+		type: "metric"
+	})]
+})] });
+//#endregion
+export { a as default };

package/dist/components/StyleInspector/categories/Others/OthersSvg.d.ts

@@ -0,0 +1,9 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type OthersSvgProps = {
+    fill?: StyleValue;
+    stroke?: StyleValue;
+    strokeWidth?: StyleValue;
+    onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const OthersSvg: ({ fill, stroke, strokeWidth, onChange }: OthersSvgProps) => import("react").JSX.Element;
+export default OthersSvg;

package/dist/components/StyleInspector/categories/Others/OthersSvg.mjs

@@ -0,0 +1,31 @@
+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/Others/OthersSvg.tsx
+var i = ({ fill: i, stroke: a, strokeWidth: o, onChange: s }) => /* @__PURE__ */ r(t, {
+	label: "",
+	children: [
+		/* @__PURE__ */ n(e, {
+			keys: ["fill"],
+			label: "Fill",
+			type: "color",
+			value: i,
+			onChange: s?.("fill")
+		}),
+		/* @__PURE__ */ n(e, {
+			keys: ["stroke"],
+			label: "Stroke",
+			type: "color",
+			value: a,
+			onChange: s?.("stroke")
+		}),
+		/* @__PURE__ */ n(e, {
+			keys: ["stroke-width"],
+			label: "Width",
+			value: o,
+			onChange: s?.("stroke-width")
+		})
+	]
+});
+//#endregion
+export { i as default };

package/dist/components/StyleInspector/categories/Others/OthersTable.d.ts

@@ -0,0 +1,9 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type OthersTableProps = {
+    borderCollapse?: StyleValue;
+    borderSpacing?: StyleValue;
+    tableLayout?: StyleValue;
+    onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const OthersTable: ({ borderCollapse, borderSpacing, tableLayout, onChange }: OthersTableProps) => import("react").JSX.Element;
+export default OthersTable;

package/dist/components/StyleInspector/categories/Others/OthersTable.mjs

@@ -0,0 +1,44 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Others/OthersTable.tsx
+var a = ({ borderCollapse: a, borderSpacing: o, tableLayout: s, onChange: c }) => /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i(t, {
+	label: "",
+	children: [/* @__PURE__ */ i(e, {
+		keys: ["border-collapse"],
+		label: "Collapse",
+		value: a,
+		onChange: c?.("border-collapse"),
+		type: "select",
+		children: [/* @__PURE__ */ r("option", {
+			value: "separate",
+			children: "Separate"
+		}), /* @__PURE__ */ r("option", {
+			value: "collapse",
+			children: "Collapse"
+		})]
+	}), /* @__PURE__ */ i(e, {
+		keys: ["table-layout"],
+		label: "Table Layout",
+		value: s,
+		onChange: c?.("table-layout"),
+		type: "select",
+		children: [/* @__PURE__ */ r("option", {
+			value: "auto",
+			children: "Auto"
+		}), /* @__PURE__ */ r("option", {
+			value: "fixed",
+			children: "Fixed"
+		})]
+	})]
+}), /* @__PURE__ */ r(t, {
+	label: "Cell Spacing",
+	keys: ["border-spacing"],
+	children: /* @__PURE__ */ r(e, {
+		value: o,
+		onChange: c?.("border-spacing"),
+		type: "metric"
+	})
+})] });
+//#endregion
+export { a as default };

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

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

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

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

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

@@ -2,20 +2,21 @@ import e from "../../StyleInspectorContext.mjs";
 import t from "../../hooks/useInspectorValues.mjs";
 import n from "../../components/CategoryOption/index.mjs";
 import r from "../../components/CategorySection/index.mjs";
-import i from "../../components/CategoryContainer/index.mjs";
-import a from "./PositionAdvanced.mjs";
-import o from "./PositionAdvancedButtons.mjs";
-import s from "./PositionClear.mjs";
-import c from "./PositionFloat.mjs";
-import { memo as l, use as u, useCallback as d, useMemo as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import h from "@plitzi/plitzi-ui/icons/XMark";
-import g from "@plitzi/plitzi-ui/icons/ListNumbers";
-import _ from "@plitzi/plitzi-ui/icons/PositionAbsolute";
-import v from "@plitzi/plitzi-ui/icons/PositionFixed";
-import y from "@plitzi/plitzi-ui/icons/PositionRelative";
+import i from "../../components/CategoryAdvanced/index.mjs";
+import a from "../../components/CategoryContainer/index.mjs";
+import o from "./PositionAdvanced.mjs";
+import s from "./PositionAdvancedButtons.mjs";
+import c from "./PositionClear.mjs";
+import l from "./PositionFloat.mjs";
+import { memo as u, use as d, useCallback as f, useMemo as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import g from "@plitzi/plitzi-ui/icons/XMark";
+import _ from "@plitzi/plitzi-ui/icons/ListNumbers";
+import v from "@plitzi/plitzi-ui/icons/PositionAbsolute";
+import y from "@plitzi/plitzi-ui/icons/PositionFixed";
+import b from "@plitzi/plitzi-ui/icons/PositionRelative";
 //#region src/components/StyleInspector/categories/Position/Position.tsx
-var b = [
+var x = [
 	"position",
 	"top",
 	"bottom",
@@ -24,101 +25,101 @@ var b = [
 	"clear",
 	"left",
 	"right"
-], x = [
+], S = [
 	"position",
 	"top",
 	"bottom",
 	"left",
 	"right"
-], S = l(({ replaceTokens: l = !1, isCollapsed: S = !0, onCollapse: C }) => {
-	let { setValue: w } = u(e), { position: T, top: E, bottom: D, left: O, right: k, float: A, clear: j, "z-index": M } = t({
-		keys: b,
+], C = ["float", "clear"], w = u(({ replaceTokens: u = !1, isCollapsed: w = !0, onCollapse: T }) => {
+	let { setValue: E } = d(e), { position: D, top: O, bottom: k, left: A, right: j, float: M, clear: N, "z-index": P } = t({
+		keys: x,
 		asValue: !0,
-		replaceTokens: l
-	}), N = f(() => ({
-		top: E,
-		bottom: D,
-		left: O,
-		right: k
+		replaceTokens: u
+	}), F = p(() => ({
+		top: O,
+		bottom: k,
+		left: A,
+		right: j
 	}), [
-		E,
-		D,
 		O,
-		k
-	]), P = d((e) => C?.("position", e), [C]), F = d((e) => (t) => {
-		w(e === "position-path" ? void 0 : e, t);
-	}, [w]), I = f(() => [
+		k,
+		A,
+		j
+	]), I = f((e) => T?.("position", e), [T]), L = f((e) => (t) => {
+		E(e === "position-path" ? void 0 : e, t);
+	}, [E]), R = p(() => [
 		{
 			value: "static",
-			icon: /* @__PURE__ */ p(h, {}),
+			icon: /* @__PURE__ */ m(g, {}),
 			description: "Static",
-			active: T === "static"
+			active: D === "static"
 		},
 		{
 			value: "relative",
-			icon: /* @__PURE__ */ p(y, {}),
+			icon: /* @__PURE__ */ m(b, {}),
 			description: "Relative",
-			active: T === "relative"
+			active: D === "relative"
 		},
 		{
 			value: "absolute",
-			icon: /* @__PURE__ */ p(_, {}),
+			icon: /* @__PURE__ */ m(v, {}),
 			description: "Absolute",
-			active: T === "absolute"
+			active: D === "absolute"
 		},
 		{
 			value: "fixed",
-			icon: /* @__PURE__ */ p(v, {}),
+			icon: /* @__PURE__ */ m(y, {}),
 			description: "Fixed",
-			active: T === "fixed"
+			active: D === "fixed"
 		},
 		{
 			value: "sticky",
-			icon: /* @__PURE__ */ p(g, {}),
+			icon: /* @__PURE__ */ m(_, {}),
 			description: "Sticky",
-			active: T === "sticky"
+			active: D === "sticky"
 		}
-	], [T]);
-	return /* @__PURE__ */ p(i, {
+	], [D]);
+	return /* @__PURE__ */ m(a, {
 		title: "Position",
-		dotKeys: b,
-		isCollapsed: S,
-		onCollapse: P,
-		children: /* @__PURE__ */ m("div", {
+		dotKeys: x,
+		advancedKeys: C,
+		isCollapsed: w,
+		onCollapse: I,
+		children: /* @__PURE__ */ h("div", {
 			className: "flex flex-col gap-2",
 			children: [
-				/* @__PURE__ */ p(r, {
-					keys: x,
+				/* @__PURE__ */ m(r, {
+					keys: S,
 					label: "Position",
-					children: /* @__PURE__ */ p(n, {
-						onChange: F("position"),
+					children: /* @__PURE__ */ m(n, {
+						onChange: L("position"),
 						type: "iconGroup",
-						items: I
+						items: R
 					})
 				}),
-				(T === "fixed" || T === "absolute") && /* @__PURE__ */ p(o, {
-					value: N,
-					onChange: F("position-path")
-				}),
-				/* @__PURE__ */ p(a, {
-					value: N,
-					onChange: F
+				(D === "fixed" || D === "absolute") && /* @__PURE__ */ m(s, {
+					value: F,
+					onChange: L("position-path")
 				}),
-				/* @__PURE__ */ p(c, {
-					value: A,
-					onChange: F("float")
+				/* @__PURE__ */ m(o, {
+					value: F,
+					onChange: L
 				}),
-				/* @__PURE__ */ p(s, {
-					value: j,
-					onChange: F("clear")
-				}),
-				/* @__PURE__ */ p(r, {
+				/* @__PURE__ */ h(i, { children: [/* @__PURE__ */ m(l, {
+					value: M,
+					onChange: L("float")
+				}), /* @__PURE__ */ m(c, {
+					value: N,
+					onChange: L("clear")
+				})] }),
+				/* @__PURE__ */ m(r, {
 					keys: ["z-index"],
 					label: "Z-Index",
-					children: /* @__PURE__ */ p(n, {
-						onChange: F("z-index"),
+					children: /* @__PURE__ */ m(n, {
+						onChange: L("z-index"),
 						type: "input",
-						value: M
+						value: P
 					})
 				})
 			]
@@ -126,4 +127,4 @@ var b = [
 	});
 });
 //#endregion
-export { S as default };
+export { w as default };