@plitzi/sdk-style 0.30.19

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

@@ -0,0 +1,224 @@
+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";
+//#region src/components/StyleInspector/categories/Typography/Typography.tsx
+var _ = [
+	"font-family",
+	"font-weight",
+	"font-size",
+	"line-height",
+	"color",
+	"text-align",
+	"font-style",
+	"text-decoration",
+	"letter-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: _,
+		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, {
+		title: "Typography",
+		dotKeys: _,
+		isCollapsed: y,
+		onCollapse: z,
+		children: [
+			/* @__PURE__ */ h(a, {
+				partialValue: D,
+				onChange: V("text-align")
+			}),
+			/* @__PURE__ */ h(c, {
+				partialValue: C,
+				fonts: b,
+				onChange: V("font-family")
+			}),
+			/* @__PURE__ */ h(r, {
+				label: "Weight",
+				keys: ["font-weight"],
+				children: /* @__PURE__ */ h(n, {
+					value: w,
+					onChange: V("font-weight"),
+					type: "select",
+					children: Object.keys(s).map((e) => /* @__PURE__ */ h("option", {
+						value: e,
+						disabled: !B || !B.weights.includes(e),
+						children: s[Number(e)]
+					}, e))
+				})
+			}),
+			/* @__PURE__ */ g(r, {
+				label: "",
+				children: [/* @__PURE__ */ h(n, {
+					keys: ["font-size"],
+					label: "Size",
+					value: T,
+					onChange: V("font-size"),
+					type: "metric"
+				}), /* @__PURE__ */ h(n, {
+					keys: ["line-height"],
+					label: "Line Height",
+					value: F,
+					onChange: V("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__ */ g(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"
+				})]
+			}),
+			/* @__PURE__ */ h(d, {
+				textTransform: A,
+				direction: R,
+				onChange: V
+			}),
+			/* @__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__ */ h(r, {
+				label: "Overflow",
+				keys: ["text-overflow"],
+				children: /* @__PURE__ */ g(n, {
+					value: P,
+					onChange: V("text-overflow"),
+					type: "select",
+					children: [
+						/* @__PURE__ */ h("option", {
+							value: "clip",
+							children: "Clip"
+						}),
+						/* @__PURE__ */ h("option", {
+							value: "ellipsis",
+							children: "Ellipsis"
+						}),
+						/* @__PURE__ */ h("option", {
+							value: "string",
+							children: "String"
+						}),
+						/* @__PURE__ */ h("option", {
+							value: "initial",
+							children: "Initial"
+						}),
+						/* @__PURE__ */ h("option", {
+							value: "inherit",
+							children: "Inherit"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ h(u, {
+				value: j,
+				onChange: V("text-shadow")
+			})
+		]
+	});
+});
+//#endregion
+export { y as default };

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

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

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

@@ -0,0 +1,41 @@
+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";
+//#region src/components/StyleInspector/categories/Typography/TypographyAlign.tsx
+var i = ({ partialValue: i, onChange: a }) => /* @__PURE__ */ r(t, {
+	label: "Align",
+	keys: ["text-align"],
+	children: /* @__PURE__ */ r(e, {
+		onChange: a,
+		type: "iconGroup",
+		items: n(() => [
+			{
+				value: "left",
+				icon: "fa-solid fa-align-left",
+				description: "Left",
+				active: i === "left"
+			},
+			{
+				value: "center",
+				icon: "fa-solid fa-align-center",
+				description: "Center",
+				active: i === "center"
+			},
+			{
+				value: "right",
+				icon: "fa-solid fa-align-right",
+				description: "Right",
+				active: i === "right"
+			},
+			{
+				value: "justify",
+				icon: "fa-solid fa-align-justify",
+				description: "Justify",
+				active: i === "justify"
+			}
+		], [i])
+	})
+});
+//#endregion
+export { i as default };

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

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

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

@@ -0,0 +1,172 @@
+//#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 = {
+	100: "Thin",
+	200: "Extra Light",
+	300: "Light",
+	400: "Normal",
+	500: "Medium",
+	600: "Semi Bold",
+	700: "Bold",
+	800: "Extra Bold",
+	900: "Black"
+};
+//#endregion
+export { e as defaultFonts, t as weights };

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

@@ -0,0 +1,10 @@
+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-runtime").JSX.Element;
+export default TypographyFont;

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

@@ -0,0 +1,22 @@
+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 { jsx as i } from "react/jsx-runtime";
+//#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))
+	})
+}));
+//#endregion
+export { a as default };

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

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

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

@@ -0,0 +1,64 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useMemo as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/icons/XMark";
+import s from "@plitzi/plitzi-ui/icons/TextDecorationOverline";
+//#region src/components/StyleInspector/categories/Typography/TypographyStyle.tsx
+var c = ({ fontStyle: c, textDecoration: l, onChange: u }) => {
+	let d = n(() => [{
+		value: "normal",
+		icon: "fa-solid fa-font",
+		description: "Normal",
+		active: c === "normal"
+	}, {
+		value: "italic",
+		icon: "fa-solid fa-italic",
+		description: "Italic",
+		active: c === "italic"
+	}], [c]), f = n(() => [
+		{
+			value: "none",
+			icon: /* @__PURE__ */ i(o, {}),
+			description: "None",
+			active: l === "none"
+		},
+		{
+			value: "line-through",
+			icon: "fa-solid fa-strikethrough",
+			description: "Strikethrough",
+			active: l === "line-through"
+		},
+		{
+			value: "underline",
+			icon: "fa-solid fa-underline",
+			description: "Underline",
+			active: l === "underline"
+		},
+		{
+			value: "overline",
+			icon: /* @__PURE__ */ i(s, {}),
+			description: "Overline",
+			active: l === "overline"
+		}
+	], [l]);
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(t, {
+		label: "Italicize",
+		keys: ["font-style"],
+		children: /* @__PURE__ */ i(e, {
+			onChange: u?.("font-style"),
+			type: "iconGroup",
+			items: d
+		})
+	}), /* @__PURE__ */ i(t, {
+		label: "Decoration",
+		keys: ["text-decoration"],
+		children: /* @__PURE__ */ i(e, {
+			onChange: u?.("text-decoration"),
+			type: "iconGroup",
+			items: f
+		})
+	})] });
+};
+//#endregion
+export { c as default };

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

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

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

@@ -0,0 +1,43 @@
+import e from "../../components/InspectorLabel/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import n from "./TypographyTextShadowItem.mjs";
+import { useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Typography/TypographyTextShadow.tsx
+var o = ({ value: o, onChange: s }) => {
+	let c = r((e) => (t) => {
+		t.stopPropagation(), t.preventDefault();
+		let n = o.split(",").toSpliced(e, 1);
+		s?.(n.length > 0 ? n.join(",") : "");
+	}, [s, o]), l = r((e) => (t) => {
+		let n = o.split(",");
+		n[e] = t, s?.(n.join(","));
+	}, [s, o]), u = r(() => {
+		let e = o === "" ? [] : o.split(",");
+		e.push("2px 2px 5px black"), s?.(e.join(","));
+	}, [s, o]), d = [];
+	return o !== "" && (d = o.split(",")), /* @__PURE__ */ a(t, {
+		direction: "column",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex w-full justify-between",
+			children: [/* @__PURE__ */ i(e, {
+				keyValue: ["text-shadow"],
+				children: "Text Shadow"
+			}), /* @__PURE__ */ i("button", {
+				className: "cursor-pointer",
+				type: "button",
+				onClick: u,
+				children: /* @__PURE__ */ i("i", { className: "fas fa-plus" })
+			})]
+		}), d.length > 0 && /* @__PURE__ */ i("div", {
+			className: "mt-1",
+			children: d.map((e, t) => /* @__PURE__ */ i(n, {
+				value: e,
+				onChange: l(t),
+				onRemove: c(t)
+			}, t))
+		})]
+	});
+};
+//#endregion
+export { o as default };

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

@@ -0,0 +1,8 @@
+import { MouseEvent } from 'react';
+export type TypographyTextShadowItemProps = {
+    value?: string;
+    onChange?: (value: string) => void;
+    onRemove?: (e: MouseEvent) => void;
+};
+declare const TypographyTextShadowItem: ({ value, onRemove, onChange }: TypographyTextShadowItemProps) => import("react/jsx-runtime").JSX.Element;
+export default TypographyTextShadowItem;