@plitzi/sdk-style 0.32.20 → 0.32.22

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

@@ -2,100 +2,130 @@ 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 "./SizeFit.mjs";
-import o from "./SizeOverflow.mjs";
-import s from "./SizePosition.mjs";
-import { memo as c, use as l, useCallback as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import i from "../../components/CategoryAdvanced/index.mjs";
+import a from "../../components/CategoryContainer/index.mjs";
+import o from "./SizeFit.mjs";
+import s from "./SizeOverflow.mjs";
+import c from "./SizePosition.mjs";
+import { memo as l, use as u, useCallback as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Size/Size.tsx
-var p = [
+var m = [
 	"width",
 	"height",
 	"min-width",
 	"min-height",
 	"max-width",
 	"max-height",
+	"aspect-ratio",
+	"box-sizing",
 	"overflow",
 	"object-fit",
 	"object-position"
-], m = ["width", "height"], h = ["min-width", "min-height"], g = ["max-width", "max-height"], _ = c(({ replaceTokens: c = !1, isCollapsed: _ = !0, onCollapse: v }) => {
-	let { setValue: y } = l(e), { width: b, height: x, "min-width": S, "min-height": C, "max-width": w, "max-height": T, overflow: E, "object-position": D, "object-fit": O } = t({
-		keys: p,
+], h = [
+	"aspect-ratio",
+	"box-sizing",
+	"object-position",
+	"object-fit"
+], g = ["width", "height"], _ = ["min-width", "min-height"], v = ["max-width", "max-height"], y = l(({ replaceTokens: l = !1, isCollapsed: y = !0, onCollapse: b }) => {
+	let { setValue: x } = u(e), { width: S, height: C, "min-width": w, "min-height": T, "max-width": E, "max-height": D, "aspect-ratio": O, "box-sizing": k, overflow: A, "object-position": j, "object-fit": M } = t({
+		keys: m,
 		asValue: !0,
-		replaceTokens: c
-	}), k = u((e) => v?.("size", e), [v]), A = u((e) => (t) => y(e, t), [y]);
-	return /* @__PURE__ */ f(i, {
+		replaceTokens: l
+	}), N = d((e) => b?.("size", e), [b]), P = d((e) => (t) => x(e, t), [x]);
+	return /* @__PURE__ */ p(a, {
 		title: "Size",
-		dotKeys: p,
-		isCollapsed: _,
-		onCollapse: k,
+		dotKeys: m,
+		advancedKeys: h,
+		isCollapsed: y,
+		onCollapse: N,
 		children: [
-			/* @__PURE__ */ f(r, {
+			/* @__PURE__ */ p(r, {
 				label: "Size",
-				keys: m,
-				children: [/* @__PURE__ */ d(n, {
+				keys: g,
+				children: [/* @__PURE__ */ f(n, {
 					keys: ["width"],
 					preffix: "W",
-					value: b,
-					onChange: A("width"),
+					value: S,
+					onChange: P("width"),
 					type: "metric"
-				}), /* @__PURE__ */ d(n, {
+				}), /* @__PURE__ */ f(n, {
 					keys: ["height"],
 					preffix: "H",
-					value: x,
-					onChange: A("height"),
+					value: C,
+					onChange: P("height"),
 					type: "metric"
 				})]
 			}),
-			/* @__PURE__ */ f(r, {
+			/* @__PURE__ */ p(r, {
 				label: "Min Size",
-				keys: h,
-				children: [/* @__PURE__ */ d(n, {
+				keys: _,
+				children: [/* @__PURE__ */ f(n, {
 					keys: ["min-width"],
 					preffix: "W",
-					value: S,
-					onChange: A("min-width"),
+					value: w,
+					onChange: P("min-width"),
 					type: "metric"
-				}), /* @__PURE__ */ d(n, {
+				}), /* @__PURE__ */ f(n, {
 					keys: ["min-height"],
 					preffix: "H",
-					value: C,
-					onChange: A("min-height"),
+					value: T,
+					onChange: P("min-height"),
 					type: "metric"
 				})]
 			}),
-			/* @__PURE__ */ f(r, {
+			/* @__PURE__ */ p(r, {
 				label: "Max Size",
-				keys: g,
-				children: [/* @__PURE__ */ d(n, {
+				keys: v,
+				children: [/* @__PURE__ */ f(n, {
 					keys: ["max-width"],
 					preffix: "W",
-					value: w,
-					onChange: A("max-width"),
+					value: E,
+					onChange: P("max-width"),
 					type: "metric"
-				}), /* @__PURE__ */ d(n, {
+				}), /* @__PURE__ */ f(n, {
 					keys: ["max-height"],
 					preffix: "H",
-					value: T,
-					onChange: A("max-height"),
+					value: D,
+					onChange: P("max-height"),
 					type: "metric"
 				})]
 			}),
-			/* @__PURE__ */ d(o, {
-				value: E,
-				onChange: A
-			}),
-			/* @__PURE__ */ d(s, {
-				value: D,
-				onChange: A
+			/* @__PURE__ */ f(i, { children: /* @__PURE__ */ p(r, {
+				label: "",
+				children: [/* @__PURE__ */ f(n, {
+					keys: ["aspect-ratio"],
+					label: "Ratio",
+					value: O,
+					onChange: P("aspect-ratio")
+				}), /* @__PURE__ */ p(n, {
+					keys: ["box-sizing"],
+					label: "Box Sizing",
+					value: k,
+					onChange: P("box-sizing"),
+					type: "select",
+					children: [/* @__PURE__ */ f("option", {
+						value: "border-box",
+						children: "Border Box"
+					}), /* @__PURE__ */ f("option", {
+						value: "content-box",
+						children: "Content Box"
+					})]
+				})]
+			}) }),
+			/* @__PURE__ */ f(s, {
+				value: A,
+				onChange: P
 			}),
-			/* @__PURE__ */ d(a, {
-				value: O,
-				onChange: A
-			})
+			/* @__PURE__ */ p(i, { children: [/* @__PURE__ */ f(c, {
+				value: j,
+				onChange: P
+			}), /* @__PURE__ */ f(o, {
+				value: M,
+				onChange: P
+			})] })
 		]
 	});
 });
 //#endregion
-export { _ as default };
+export { y as default };

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

@@ -2,17 +2,20 @@ 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 "./TypographyAlign.mjs";
-import { defaultFonts as o, weights as s } from "./TypographyConstants.mjs";
-import c from "./TypographyFont.mjs";
-import l from "./TypographyStyle.mjs";
-import u from "./TypographyTextShadow.mjs";
-import d from "./TypographyTransform.mjs";
-import { memo as f, use as p, useCallback as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import i from "../../components/CategoryAdvanced/index.mjs";
+import a from "../../components/CategoryContainer/index.mjs";
+import o from "./TypographyAlign.mjs";
+import s from "./TypographyBreaking.mjs";
+import c from "./TypographyClamp.mjs";
+import { defaultFonts as l, weights as u } from "./TypographyConstants.mjs";
+import d from "./TypographyFont.mjs";
+import f from "./TypographyStyle.mjs";
+import p from "./TypographyTextShadow.mjs";
+import m from "./TypographyTransform.mjs";
+import { memo as h, use as g, useCallback as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Typography/Typography.tsx
-var _ = [
+var b = [
 	"font-family",
 	"font-weight",
 	"font-size",
@@ -21,204 +24,182 @@ var _ = [
 	"text-align",
 	"font-style",
 	"text-decoration",
+	"text-decoration-thickness",
+	"text-underline-offset",
 	"letter-spacing",
+	"word-spacing",
 	"text-indent",
 	"text-transform",
 	"direction",
 	"text-shadow",
 	"white-space",
 	"text-wrap",
-	"text-overflow"
-], v = ["letter-spacing", "text-indent"], y = f(({ replaceTokens: f = !1, isCollapsed: y = !0, fonts: b, onCollapse: x }) => {
-	let { setValue: S } = p(e), { "font-family": C, "font-weight": w, "font-size": T, "font-style": E, "text-align": D, "text-decoration": O, "text-indent": k, "text-transform": A, "text-shadow": j, "white-space": M, "text-wrap": N, "text-overflow": P, "line-height": F, color: I, "letter-spacing": L, direction: R } = t({
-		keys: _,
+	"word-break",
+	"overflow-wrap",
+	"hyphens",
+	"vertical-align",
+	"text-overflow",
+	"line-clamp"
+], x = [
+	"text-decoration-thickness",
+	"text-underline-offset",
+	"word-break",
+	"overflow-wrap",
+	"hyphens",
+	"vertical-align",
+	"text-shadow"
+], S = [
+	"letter-spacing",
+	"word-spacing",
+	"text-indent"
+], C = h(({ replaceTokens: h = !1, isCollapsed: C = !0, fonts: w, onCollapse: T }) => {
+	let { setValue: E } = g(e), { "font-family": D, "font-weight": O, "font-size": k, "font-style": A, "text-align": j, "text-decoration": M, "text-decoration-thickness": N, "text-underline-offset": ee, "text-indent": P, "text-transform": F, "text-shadow": I, "white-space": L, "text-wrap": R, "word-break": z, "overflow-wrap": B, hyphens: V, "vertical-align": H, "text-overflow": U, "line-clamp": W, "line-height": G, color: K, "letter-spacing": q, "word-spacing": J, direction: Y } = t({
+		keys: b,
 		asValue: !0,
-		replaceTokens: f
-	}), z = m((e) => x?.("typography", e), [x]), B = [...b ?? [], ...o].find((e) => e.name === C), V = m((e) => (t) => S(e, t), [S]);
-	return /* @__PURE__ */ g(i, {
+		replaceTokens: h
+	}), X = _((e) => T?.("typography", e), [T]), Z = [...w ?? [], ...l].find((e) => e.name === D), Q = _((e) => (t) => E(e, t), [E]), $ = _((e) => E(void 0, e), [E]);
+	return /* @__PURE__ */ y(a, {
 		title: "Typography",
-		dotKeys: _,
-		isCollapsed: y,
-		onCollapse: z,
+		dotKeys: b,
+		advancedKeys: x,
+		isCollapsed: C,
+		onCollapse: X,
 		children: [
-			/* @__PURE__ */ h(a, {
-				partialValue: D,
-				onChange: V("text-align")
+			/* @__PURE__ */ v(o, {
+				partialValue: j,
+				onChange: Q("text-align")
 			}),
-			/* @__PURE__ */ h(c, {
-				partialValue: C,
-				fonts: b,
-				onChange: V("font-family")
+			/* @__PURE__ */ v(d, {
+				partialValue: D,
+				fonts: w,
+				onChange: Q("font-family")
 			}),
-			/* @__PURE__ */ h(r, {
-				label: "Weight",
-				keys: ["font-weight"],
-				children: /* @__PURE__ */ h(n, {
-					value: w,
-					onChange: V("font-weight"),
+			/* @__PURE__ */ y(r, {
+				label: "",
+				children: [/* @__PURE__ */ v(n, {
+					keys: ["font-weight"],
+					label: "Weight",
+					value: O,
+					onChange: Q("font-weight"),
 					type: "select",
-					children: Object.keys(s).map((e) => /* @__PURE__ */ h("option", {
+					children: Object.keys(u).map((e) => /* @__PURE__ */ v("option", {
 						value: e,
-						disabled: !B || !B.weights.includes(e),
-						children: s[Number(e)]
+						disabled: !Z || !Z.weights.includes(e),
+						children: u[Number(e)]
 					}, e))
-				})
+				}), /* @__PURE__ */ v(n, {
+					keys: ["color"],
+					label: "Color",
+					type: "color",
+					value: K,
+					onChange: Q("color")
+				})]
 			}),
-			/* @__PURE__ */ g(r, {
+			/* @__PURE__ */ y(r, {
 				label: "",
-				children: [/* @__PURE__ */ h(n, {
+				children: [/* @__PURE__ */ v(n, {
 					keys: ["font-size"],
 					label: "Size",
-					value: T,
-					onChange: V("font-size"),
+					value: k,
+					onChange: Q("font-size"),
 					type: "metric"
-				}), /* @__PURE__ */ h(n, {
+				}), /* @__PURE__ */ v(n, {
 					keys: ["line-height"],
 					label: "Line Height",
-					value: F,
-					onChange: V("line-height"),
+					value: G,
+					onChange: Q("line-height"),
 					type: "metric"
 				})]
 			}),
-			/* @__PURE__ */ h(r, {
-				label: "Color",
-				keys: ["color"],
-				children: /* @__PURE__ */ h(n, {
-					type: "color",
-					value: I,
-					onChange: V("color")
-				})
-			}),
-			/* @__PURE__ */ h(l, {
-				fontStyle: E,
-				textDecoration: O,
-				onChange: V
+			/* @__PURE__ */ v(f, {
+				fontStyle: A,
+				textDecoration: M,
+				textDecorationThickness: N,
+				textUnderlineOffset: ee,
+				onChange: Q
 			}),
-			/* @__PURE__ */ g(r, {
+			/* @__PURE__ */ y(r, {
 				label: "Letter",
-				keys: v,
-				children: [/* @__PURE__ */ h(n, {
-					keys: ["letter-spacing"],
-					label: "Spacing",
-					value: L,
-					onChange: V("letter-spacing"),
-					type: "metric"
-				}), /* @__PURE__ */ h(n, {
-					keys: ["text-indent"],
-					label: "Indent",
-					value: k,
-					onChange: V("text-indent"),
-					type: "metric"
-				})]
+				keys: S,
+				children: [
+					/* @__PURE__ */ v(n, {
+						keys: ["letter-spacing"],
+						label: "Spacing",
+						value: q,
+						onChange: Q("letter-spacing"),
+						type: "metric"
+					}),
+					/* @__PURE__ */ v(n, {
+						keys: ["word-spacing"],
+						label: "Word",
+						value: J,
+						onChange: Q("word-spacing"),
+						type: "metric"
+					}),
+					/* @__PURE__ */ v(n, {
+						keys: ["text-indent"],
+						label: "Indent",
+						value: P,
+						onChange: Q("text-indent"),
+						type: "metric"
+					})
+				]
 			}),
-			/* @__PURE__ */ h(d, {
-				textTransform: A,
-				direction: R,
-				onChange: V
+			/* @__PURE__ */ v(m, {
+				textTransform: F,
+				direction: Y,
+				onChange: Q
 			}),
-			/* @__PURE__ */ h(r, {
-				label: "Breaking",
-				keys: ["white-space"],
-				children: /* @__PURE__ */ g(n, {
-					value: M,
-					onChange: V("white-space"),
-					type: "select",
-					children: [
-						/* @__PURE__ */ h("option", {
-							value: "normal",
-							children: "Normal"
-						}),
-						/* @__PURE__ */ h("option", {
-							value: "nowrap",
-							children: "No Wrap"
-						}),
-						/* @__PURE__ */ h("option", {
-							value: "pre",
-							children: "Pre"
-						}),
-						/* @__PURE__ */ h("option", {
-							value: "pre-wrap",
-							children: "Pre Wrap"
-						}),
-						/* @__PURE__ */ h("option", {
-							value: "pre-line",
-							children: "Pre Line"
-						}),
-						/* @__PURE__ */ h("option", {
-							value: "break-spaces",
-							children: "Break Spaces"
-						})
-					]
-				})
-			}),
-			/* @__PURE__ */ h(r, {
-				label: "Wrap",
-				keys: ["text-wrap"],
-				children: /* @__PURE__ */ g(n, {
-					value: N,
-					onChange: V("text-wrap"),
-					type: "select",
-					children: [
-						/* @__PURE__ */ h("option", {
-							value: "wrap",
-							children: "Wrap"
-						}),
-						/* @__PURE__ */ h("option", {
-							value: "nowrap",
-							children: "No Wrap"
-						}),
-						/* @__PURE__ */ h("option", {
-							value: "balance",
-							children: "Balance"
-						}),
-						/* @__PURE__ */ h("option", {
-							value: "pretty",
-							children: "Pretty"
-						}),
-						/* @__PURE__ */ h("option", {
-							value: "stable",
-							children: "Stable"
-						})
-					]
-				})
+			/* @__PURE__ */ v(s, {
+				whiteSpace: L,
+				textWrap: R,
+				wordBreak: z,
+				overflowWrap: B,
+				hyphens: V,
+				verticalAlign: H,
+				onChange: Q
 			}),
-			/* @__PURE__ */ h(r, {
-				label: "Overflow",
-				keys: ["text-overflow"],
-				children: /* @__PURE__ */ g(n, {
-					value: P,
-					onChange: V("text-overflow"),
+			/* @__PURE__ */ y(r, {
+				label: "",
+				children: [/* @__PURE__ */ y(n, {
+					keys: ["text-overflow"],
+					label: "Overflow",
+					value: U,
+					onChange: Q("text-overflow"),
 					type: "select",
 					children: [
-						/* @__PURE__ */ h("option", {
+						/* @__PURE__ */ v("option", {
 							value: "clip",
 							children: "Clip"
 						}),
-						/* @__PURE__ */ h("option", {
+						/* @__PURE__ */ v("option", {
 							value: "ellipsis",
 							children: "Ellipsis"
 						}),
-						/* @__PURE__ */ h("option", {
+						/* @__PURE__ */ v("option", {
 							value: "string",
 							children: "String"
 						}),
-						/* @__PURE__ */ h("option", {
+						/* @__PURE__ */ v("option", {
 							value: "initial",
 							children: "Initial"
 						}),
-						/* @__PURE__ */ h("option", {
+						/* @__PURE__ */ v("option", {
 							value: "inherit",
 							children: "Inherit"
 						})
 					]
-				})
+				}), /* @__PURE__ */ v(c, {
+					value: W,
+					onChange: $
+				})]
 			}),
-			/* @__PURE__ */ h(u, {
-				value: j,
-				onChange: V("text-shadow")
-			})
+			/* @__PURE__ */ v(i, { children: /* @__PURE__ */ v(p, {
+				value: I,
+				onChange: Q("text-shadow")
+			}) })
 		]
 	});
 });
 //#endregion
-export { y as default };
+export { C as default };

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

@@ -0,0 +1,12 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type TypographyBreakingProps = {
+    whiteSpace?: StyleValue;
+    textWrap?: StyleValue;
+    wordBreak?: StyleValue;
+    overflowWrap?: StyleValue;
+    hyphens?: StyleValue;
+    verticalAlign?: StyleValue;
+    onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const TypographyBreaking: ({ whiteSpace, textWrap, wordBreak, overflowWrap, hyphens, verticalAlign, onChange }: TypographyBreakingProps) => import("react").JSX.Element;
+export default TypographyBreaking;