@plitzi/sdk-style 0.33.2 → 0.34.1

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

@@ -7,15 +7,17 @@ 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 { weights as l } from "./TypographyConstants.mjs";
+import u from "../../../../hooks/useSpaceFonts.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";
+import { primaryFamily as b } from "@plitzi/sdk-shared/style";
 //#region src/components/StyleInspector/categories/Typography/Typography.tsx
-var b = [
+var x = [
 	"font-family",
 	"font-weight",
 	"font-size",
@@ -40,7 +42,7 @@ var b = [
 	"vertical-align",
 	"text-overflow",
 	"line-clamp"
-], x = [
+], S = [
 	"text-decoration-thickness",
 	"text-underline-offset",
 	"word-break",
@@ -48,51 +50,50 @@ var b = [
 	"hyphens",
 	"vertical-align",
 	"text-shadow"
-], S = [
+], C = [
 	"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,
+], w = h(({ replaceTokens: h = !1, isCollapsed: w = !0, onCollapse: T }) => {
+	let E = u(), { setValue: D } = g(e), { "font-family": O, "font-weight": k, "font-size": A, "font-style": j, "text-align": M, "text-decoration": N, "text-decoration-thickness": P, "text-underline-offset": F, "text-indent": ee, "text-transform": I, "text-shadow": L, "white-space": R, "text-wrap": z, "word-break": B, "overflow-wrap": V, hyphens: H, "vertical-align": U, "text-overflow": W, "line-clamp": G, "line-height": K, color: q, "letter-spacing": J, "word-spacing": Y, direction: X } = t({
+		keys: x,
 		asValue: !0,
 		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]);
+	}), Z = _((e) => T?.("typography", e), [T]), Q = E.find((e) => e.family === b(typeof O == "string" ? O : "")), $ = _((e) => (t) => D(e, t), [D]), te = _((e) => D(void 0, e), [D]);
 	return /* @__PURE__ */ y(a, {
 		title: "Typography",
-		dotKeys: b,
-		advancedKeys: x,
-		isCollapsed: C,
-		onCollapse: X,
+		dotKeys: x,
+		advancedKeys: S,
+		isCollapsed: w,
+		onCollapse: Z,
 		children: [
 			/* @__PURE__ */ v(o, {
-				partialValue: j,
-				onChange: Q("text-align")
+				partialValue: M,
+				onChange: $("text-align")
 			}),
 			/* @__PURE__ */ v(d, {
-				partialValue: D,
-				fonts: w,
-				onChange: Q("font-family")
+				partialValue: O,
+				onChange: $("font-family")
 			}),
 			/* @__PURE__ */ y(r, {
 				label: "",
 				children: [/* @__PURE__ */ v(n, {
 					keys: ["font-weight"],
 					label: "Weight",
-					value: O,
-					onChange: Q("font-weight"),
+					value: k,
+					onChange: $("font-weight"),
 					type: "select",
-					children: Object.keys(u).map((e) => /* @__PURE__ */ v("option", {
+					children: Object.keys(l).map((e) => /* @__PURE__ */ v("option", {
 						value: e,
-						disabled: !Z || !Z.weights.includes(e),
-						children: u[Number(e)]
+						disabled: !Q?.weights.includes(Number(e)),
+						children: l[Number(e)]
 					}, e))
 				}), /* @__PURE__ */ v(n, {
 					keys: ["color"],
 					label: "Color",
 					type: "color",
-					value: K,
-					onChange: Q("color")
+					value: q,
+					onChange: $("color")
 				})]
 			}),
 			/* @__PURE__ */ y(r, {
@@ -100,72 +101,72 @@ var b = [
 				children: [/* @__PURE__ */ v(n, {
 					keys: ["font-size"],
 					label: "Size",
-					value: k,
-					onChange: Q("font-size"),
+					value: A,
+					onChange: $("font-size"),
 					type: "metric"
 				}), /* @__PURE__ */ v(n, {
 					keys: ["line-height"],
 					label: "Line Height",
-					value: G,
-					onChange: Q("line-height"),
+					value: K,
+					onChange: $("line-height"),
 					type: "metric"
 				})]
 			}),
 			/* @__PURE__ */ v(f, {
-				fontStyle: A,
-				textDecoration: M,
-				textDecorationThickness: N,
-				textUnderlineOffset: ee,
-				onChange: Q
+				fontStyle: j,
+				textDecoration: N,
+				textDecorationThickness: P,
+				textUnderlineOffset: F,
+				onChange: $
 			}),
 			/* @__PURE__ */ y(r, {
 				label: "Letter",
-				keys: S,
+				keys: C,
 				children: [
 					/* @__PURE__ */ v(n, {
 						keys: ["letter-spacing"],
 						label: "Spacing",
-						value: q,
-						onChange: Q("letter-spacing"),
+						value: J,
+						onChange: $("letter-spacing"),
 						type: "metric"
 					}),
 					/* @__PURE__ */ v(n, {
 						keys: ["word-spacing"],
 						label: "Word",
-						value: J,
-						onChange: Q("word-spacing"),
+						value: Y,
+						onChange: $("word-spacing"),
 						type: "metric"
 					}),
 					/* @__PURE__ */ v(n, {
 						keys: ["text-indent"],
 						label: "Indent",
-						value: P,
-						onChange: Q("text-indent"),
+						value: ee,
+						onChange: $("text-indent"),
 						type: "metric"
 					})
 				]
 			}),
 			/* @__PURE__ */ v(m, {
-				textTransform: F,
-				direction: Y,
-				onChange: Q
+				textTransform: I,
+				direction: X,
+				onChange: $
 			}),
 			/* @__PURE__ */ v(s, {
-				whiteSpace: L,
-				textWrap: R,
-				wordBreak: z,
-				overflowWrap: B,
-				hyphens: V,
-				verticalAlign: H,
-				onChange: Q
+				whiteSpace: R,
+				textWrap: z,
+				wordBreak: B,
+				overflowWrap: V,
+				hyphens: H,
+				verticalAlign: U,
+				onChange: $
 			}),
 			/* @__PURE__ */ y(r, {
 				label: "",
 				children: [/* @__PURE__ */ y(n, {
 					keys: ["text-overflow"],
 					label: "Overflow",
-					value: U,
-					onChange: Q("text-overflow"),
+					value: W,
+					onChange: $("text-overflow"),
 					type: "select",
 					children: [
 						/* @__PURE__ */ v("option", {
@@ -190,16 +191,16 @@ var b = [
 						})
 					]
 				}), /* @__PURE__ */ v(c, {
-					value: W,
-					onChange: $
+					value: G,
+					onChange: te
 				})]
 			}),
 			/* @__PURE__ */ v(i, { children: /* @__PURE__ */ v(p, {
-				value: I,
-				onChange: Q("text-shadow")
+				value: L,
+				onChange: $("text-shadow")
 			}) })
 		]
 	});
 });
 //#endregion
-export { C as default };
+export { w as default };

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

@@ -1,5 +1 @@
-export declare const defaultFonts: {
-    name: string;
-    weights: string[];
-}[];
 export declare const weights: Record<number, string>;

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

@@ -1,163 +1,5 @@
 //#region src/components/StyleInspector/categories/Typography/TypographyConstants.ts
-var e = [
-	{
-		name: "Arial",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Bitter",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Changa One",
-		weights: ["400"]
-	},
-	{
-		name: "Droid Sans",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Droid Serif",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Exo",
-		weights: [
-			"100",
-			"200",
-			"300",
-			"400",
-			"500",
-			"600",
-			"700"
-		]
-	},
-	{
-		name: "Georgia",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Great Vibes",
-		weights: ["400"]
-	},
-	{
-		name: "Impact",
-		weights: ["700"]
-	},
-	{
-		name: "Inconsolata",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Lato",
-		weights: [
-			"100",
-			"300",
-			"400",
-			"700",
-			"900"
-		]
-	},
-	{
-		name: "Merriweather",
-		weights: [
-			"300",
-			"400",
-			"700",
-			"900"
-		]
-	},
-	{
-		name: "Montserrat",
-		weights: [
-			"100",
-			"200",
-			"300",
-			"400",
-			"500",
-			"600",
-			"700"
-		]
-	},
-	{
-		name: "Open Sans",
-		weights: [
-			"300",
-			"400",
-			"600",
-			"700",
-			"800"
-		]
-	},
-	{
-		name: "Oswald",
-		weights: [
-			"200",
-			"300",
-			"400",
-			"500",
-			"600",
-			"700"
-		]
-	},
-	{
-		name: "PT Sans",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Palatino Linotype",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Tahoma",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Times New Roman",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Trebuchet MS",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Ubuntu",
-		weights: [
-			"300",
-			"400",
-			"500",
-			"700"
-		]
-	},
-	{
-		name: "Varela",
-		weights: ["400"]
-	},
-	{
-		name: "Varela Round",
-		weights: ["400"]
-	},
-	{
-		name: "Verdana",
-		weights: ["400", "700"]
-	},
-	{
-		name: "Vollkorn",
-		weights: ["400", "700"]
-	},
-	{
-		name: "system-ui",
-		weights: [
-			"100",
-			"200",
-			"300",
-			"400",
-			"500",
-			"600",
-			"700"
-		]
-	}
-], t = {
+var e = {
 	100: "Thin",
 	200: "Extra Light",
 	300: "Light",
@@ -169,4 +11,4 @@ var e = [
 	900: "Black"
 };
 //#endregion
-export { e as defaultFonts, t as weights };
+export { e as weights };

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

@@ -1,10 +1,7 @@
 import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
 export type TypographyFontProps = {
     partialValue?: StyleValue;
-    fonts?: {
-        name: string;
-    }[];
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const TypographyFont: ({ partialValue, fonts, onChange }: TypographyFontProps) => import("react").JSX.Element;
+declare const TypographyFont: ({ partialValue, onChange }: TypographyFontProps) => import("react").JSX.Element;
 export default TypographyFont;

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

@@ -1,22 +1,29 @@
 import e from "../../components/CategoryOption/index.mjs";
 import t from "../../components/CategorySection/index.mjs";
-import { defaultFonts as n } from "./TypographyConstants.mjs";
-import { useMemo as r } from "react";
+import n from "../../../../hooks/useSpaceFonts.mjs";
+import { useCallback as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
+import { fontFamilyStack as a, primaryFamily as o } from "@plitzi/sdk-shared/style";
 //#region src/components/StyleInspector/categories/Typography/TypographyFont.tsx
-var a = ({ partialValue: a, fonts: o, onChange: s }) => (o = r(() => [...o ?? [], ...n], [o]), /* @__PURE__ */ i(t, {
-	label: "F. Family",
-	keys: ["font-family"],
-	children: /* @__PURE__ */ i(e, {
-		value: a,
-		onChange: s,
-		type: "select",
-		children: o.map((e) => /* @__PURE__ */ i("option", {
-			style: { fontFamily: e.name },
-			value: e.name,
-			children: e.name
-		}, e.name))
-	})
-}));
+var s = ({ partialValue: s, onChange: c }) => {
+	let l = n(), u = typeof s == "string" ? o(s) : "", d = r((e) => {
+		let t = l.find((t) => t.family === e);
+		c?.(t ? a(t) : e);
+	}, [l, c]);
+	return /* @__PURE__ */ i(t, {
+		label: "F. Family",
+		keys: ["font-family"],
+		children: /* @__PURE__ */ i(e, {
+			value: u,
+			onChange: d,
+			type: "select",
+			children: l.map((e) => /* @__PURE__ */ i("option", {
+				style: { fontFamily: a(e) },
+				value: e.family,
+				children: e.family
+			}, e.family))
+		})
+	});
+};
 //#endregion
-export { a as default };
+export { s as default };

package/dist/components/StyleInspector/components/CategoryContainer/CategoryContainer.mjs

@@ -1,9 +1,9 @@
 import e from "../../hooks/useInspectorValues.mjs";
 import t from "../CategoryAdvanced/CategoryAdvancedContext.mjs";
 import n from "../InspectorDots/index.mjs";
-import r from "clsx";
-import { useCallback as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
 import s from "@plitzi/plitzi-ui/Icon";
 import c from "@plitzi/plitzi-ui/hooks/useStorage";
 import l from "@plitzi/plitzi-ui/ContainerCollapsable";
@@ -12,26 +12,26 @@ var u = ({ className: u, classNameContent: d, children: f, title: p = "Title", d
 	let [v, y] = c(`builder-state.styleInspector.advanced.${p}`, !1), { hasValues: b } = e({
 		keys: h,
 		asValue: !1
-	}), x = i((e) => {
+	}), x = r((e) => {
 		e.stopPropagation(), y((e) => !e);
 	}, [y]);
-	return /* @__PURE__ */ o(l, {
+	return /* @__PURE__ */ a(l, {
 		className: u,
 		collapsed: g,
 		onChange: _,
-		children: [/* @__PURE__ */ a(l.Header, {
-			className: r("h-8", {
+		children: [/* @__PURE__ */ i(l.Header, {
+			className: o("h-8", {
 				"border-b border-gray-200 hover:bg-slate-100 dark:border-zinc-700 dark:hover:bg-zinc-700/50": g,
 				"bg-slate-100 dark:bg-zinc-700/50": !g
 			}),
 			title: p,
 			placement: "right",
-			iconCollapsed: /* @__PURE__ */ a(s, { icon: "fa-solid fa-angle-down" }),
-			iconExpanded: /* @__PURE__ */ a(s, { icon: "fa-solid fa-angle-up" }),
-			children: /* @__PURE__ */ o("div", {
+			iconCollapsed: /* @__PURE__ */ i(s, { icon: "fa-solid fa-angle-down" }),
+			iconExpanded: /* @__PURE__ */ i(s, { icon: "fa-solid fa-angle-up" }),
+			children: /* @__PURE__ */ a("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ a(n, { styleKeys: m }), !!h?.length && !g && /* @__PURE__ */ a(s, {
-					className: r("cursor-pointer text-xs", {
+				children: [/* @__PURE__ */ i(n, { styleKeys: m }), !!h?.length && !g && /* @__PURE__ */ i(s, {
+					className: o("cursor-pointer text-xs", {
 						"text-blue-500": v,
 						"text-orange-500": !v && b,
 						"text-gray-400 hover:text-gray-600 dark:text-zinc-500 dark:hover:text-zinc-300": !v && !b
@@ -41,9 +41,9 @@ var u = ({ className: u, classNameContent: d, children: f, title: p = "Title", d
 					onClick: x
 				})]
 			})
-		}), /* @__PURE__ */ a(l.Content, {
-			className: r("flex flex-col gap-3 p-2", { "border-b border-gray-200 dark:border-zinc-700": !g }, d),
-			children: /* @__PURE__ */ a(t, {
+		}), /* @__PURE__ */ i(l.Content, {
+			className: o("flex flex-col gap-3 p-2", { "border-b border-gray-200 dark:border-zinc-700": !g }, d),
+			children: /* @__PURE__ */ i(t, {
 				value: v,
 				children: f
 			})

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionIconGroup.mjs

@@ -1,27 +1,27 @@
-import e from "clsx";
-import { useCallback as t, useMemo as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { useCallback as e, useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import r from "clsx";
 import i from "@plitzi/plitzi-ui/IconGroup";
 //#region src/components/StyleInspector/components/CategoryOption/categoryTypes/OptionIconGroup.tsx
 var a = ({ items: a = [], onChange: o }) => {
-	let s = n(() => a.filter((e) => typeof e.isVisible != "boolean" || e.isVisible), [a]), c = t((e) => () => o?.(e), [o]);
-	return /* @__PURE__ */ r(i, {
+	let s = t(() => a.filter((e) => typeof e.isVisible != "boolean" || e.isVisible), [a]), c = e((e) => () => o?.(e), [o]);
+	return /* @__PURE__ */ n(i, {
 		className: "w-full px-1.5 py-1",
 		gap: 1,
 		size: "md",
-		children: s.map((t, n) => /* @__PURE__ */ r(i.Icon, {
-			size: t.size,
-			className: e("cursor-pointer rounded-sm p-0.5", {
-				"bg-zinc-300 dark:bg-zinc-800": t.active,
-				"text-xs": typeof t.icon == "string",
-				"h-5 w-5": t.size !== "custom"
+		children: s.map((e, t) => /* @__PURE__ */ n(i.Icon, {
+			size: e.size,
+			className: r("cursor-pointer rounded-sm p-0.5", {
+				"bg-zinc-300 dark:bg-zinc-800": e.active,
+				"text-xs": typeof e.icon == "string",
+				"h-5 w-5": e.size !== "custom"
 			}),
-			active: t.active,
-			onClick: c(t.value),
-			icon: typeof t.icon == "string" ? t.icon : void 0,
-			title: t.description,
-			children: typeof t.icon != "string" && t.icon
-		}, n))
+			active: e.active,
+			onClick: c(e.value),
+			icon: typeof e.icon == "string" ? e.icon : void 0,
+			title: e.description,
+			children: typeof e.icon != "string" && e.icon
+		}, t))
 	});
 };
 //#endregion

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionMetricInput.mjs

@@ -1,6 +1,6 @@
-import e from "clsx";
-import { useCallback as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+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/MetricInput";
 //#region src/components/StyleInspector/components/CategoryOption/categoryTypes/OptionMetricInput.tsx
 var a = ({ value: a, className: o, preffix: s = "", min: c, max: l, step: u, units: d = [
@@ -45,13 +45,13 @@ var a = ({ value: a, className: o, preffix: s = "", min: c, max: l, step: u, uni
 		value: "lvw"
 	}
 ], allowedWords: f = ["auto", "none"], allowVariables: p = !0, onChange: m }) => {
-	let h = t((e) => m?.(e), [m]);
-	return /* @__PURE__ */ r("div", {
+	let h = e((e) => m?.(e), [m]);
+	return /* @__PURE__ */ n("div", {
 		className: "flex items-center gap-1",
-		children: [s && /* @__PURE__ */ r("span", {
+		children: [s && /* @__PURE__ */ n("span", {
 			className: "text-xs",
 			children: [s, ":"]
-		}), /* @__PURE__ */ n(i, {
+		}), /* @__PURE__ */ t(i, {
 			size: "xs",
 			value: a,
 			min: c,
@@ -61,7 +61,7 @@ var a = ({ value: a, className: o, preffix: s = "", min: c, max: l, step: u, uni
 			allowedWords: f,
 			allowVariables: p,
 			onChange: h,
-			className: e("w-full min-w-0", o)
+			className: r("w-full min-w-0", o)
 		})]
 	});
 };

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionSelect.mjs

@@ -1,12 +1,12 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
+import t from "clsx";
 import n from "@plitzi/plitzi-ui/Select";
 //#region src/components/StyleInspector/components/CategoryOption/categoryTypes/OptionSelect.tsx
-var r = ({ children: r, className: i, value: a, onChange: o }) => /* @__PURE__ */ t(n, {
+var r = ({ children: r, className: i, value: a, onChange: o }) => /* @__PURE__ */ e(n, {
 	size: "xs",
 	value: a,
 	onChange: o,
-	className: e("w-full min-w-0", i),
+	className: t("w-full min-w-0", i),
 	children: r
 });
 //#endregion

package/dist/components/StyleInspector/components/InspectorLabel/InspectorLabel.mjs

@@ -1,29 +1,29 @@
 import e from "../../StyleInspectorContext.mjs";
 import t from "../../hooks/useInspectorValues.mjs";
-import n from "clsx";
-import { memo as r, use as i, useCallback as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-var s = r(({ keyValue: r, children: s, className: c = "", size: l = "small", sectionTitle: u = !1 }) => {
-	let { resetValue: d } = i(e), { hasValues: f, hasInherit: p, hasBinding: m, hasVariables: h } = t({
-		keys: r,
+import { memo as n, use as r, useCallback as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "clsx";
+var s = n(({ keyValue: n, children: s, className: c = "", size: l = "small", sectionTitle: u = !1 }) => {
+	let { resetValue: d } = r(e), { hasValues: f, hasInherit: p, hasBinding: m, hasVariables: h } = t({
+		keys: n,
 		asValue: !1
-	}), g = a(() => {
-		!f || !r || d(r);
+	}), g = i(() => {
+		f && n && d(n);
 	}, [
 		d,
 		f,
-		r
+		n
 	]);
-	return /* @__PURE__ */ o("div", {
-		className: n("inspector__label flex min-w-[50px] shrink-0 items-center select-none", c, {
+	return /* @__PURE__ */ a("div", {
+		className: o("inspector__label flex min-w-[50px] shrink-0 items-center select-none", c, {
 			"text-xs": l === "small",
 			"text-sm": l === "medium",
 			"text-base": l === "normal",
 			"mb-[-1px] p-0": u
 		}),
 		title: typeof s == "string" ? s : void 0,
-		children: /* @__PURE__ */ o("label", {
-			className: n("m-0 truncate", {
+		children: /* @__PURE__ */ a("label", {
+			className: o("m-0 truncate", {
 				"px-1": !u,
 				"rounded-tl rounded-tr border border-gray-300 bg-gray-100 px-2 font-bold text-zinc-700 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200": u,
 				"cursor-pointer bg-blue-200 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400": f && !m && !h,