@plitzi/sdk-style 0.30.19

package/dist/components/Selector/SelectorHelper.mjs

@@ -0,0 +1,4 @@
+//#region src/components/Selector/SelectorHelper.ts
+var e = (e) => (e.match(/^[0-9]/) && (e = `_${e}`), e.replace(" ", "-").replace(/[^a-zA-Z0-9_-]+/, ""));
+//#endregion
+export { e as selectorFormatter };

package/dist/components/Selector/SelectorItem/ItemOptions.d.ts

@@ -0,0 +1,9 @@
+import { SelectorValue } from '../Selector';
+import { TagType } from '@plitzi/sdk-shared';
+export type ItemOptionsProps = {
+    selector?: string;
+    type: TagType;
+    onAction?: (action: 'duplicate' | 'remove' | 'delete', data?: SelectorValue) => void;
+};
+declare const ItemOptions: ({ selector, type, onAction }: ItemOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export default ItemOptions;

package/dist/components/Selector/SelectorItem/ItemOptions.mjs

@@ -0,0 +1,57 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/ContainerFloating";
+import i from "@plitzi/plitzi-ui/Icon";
+import a, { useModal as o } from "@plitzi/plitzi-ui/Modal";
+import { makeId as s } from "@plitzi/sdk-shared/helpers/utils";
+//#region src/components/Selector/SelectorItem/ItemOptions.tsx
+var c = ({ selector: c = "", type: l = "class", onAction: u }) => {
+	let { showDialog: d } = o(), f = e(() => u?.("duplicate", {
+		name: `${c}-${s(4)}`,
+		type: l
+	}), [
+		u,
+		c,
+		l
+	]), p = e(() => u?.("remove"), [u]), m = e(async () => {
+		await d(/* @__PURE__ */ t(a.Header, { children: /* @__PURE__ */ t("h4", { children: "Remove Selector" }) }), /* @__PURE__ */ t(a.Body, { children: /* @__PURE__ */ t("h4", { children: "Do you want to remove this item ?" }) }), void 0, { size: "sm" }, c) && u?.("delete");
+	}, [
+		u,
+		c,
+		d
+	]);
+	return /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ t(r.Trigger, { children: /* @__PURE__ */ t(i, {
+		icon: "fa-solid fa-ellipsis-vertical",
+		className: "h-4 w-4 !min-w-4"
+	}) }), /* @__PURE__ */ t(r.Content, {
+		className: "text-xs text-zinc-700 dark:text-zinc-300",
+		children: /* @__PURE__ */ n("div", {
+			className: "rounded border border-gray-200 bg-gray-50 py-1 dark:border-zinc-700 dark:bg-zinc-800",
+			children: [/* @__PURE__ */ t("div", {
+				className: "mb-1 px-2 font-bold text-zinc-800 dark:text-zinc-200",
+				children: "Actions"
+			}), /* @__PURE__ */ n("ul", {
+				className: "flex flex-col gap-1 px-2",
+				children: [
+					/* @__PURE__ */ t("li", {
+						onClick: f,
+						className: "cursor-pointer rounded-sm px-2 py-1 hover:bg-gray-200 dark:hover:bg-zinc-700",
+						children: "Duplicate"
+					}),
+					/* @__PURE__ */ t("li", {
+						onClick: p,
+						className: "cursor-pointer rounded-sm px-2 py-1 hover:bg-gray-200 dark:hover:bg-zinc-700",
+						children: "Remove"
+					}),
+					/* @__PURE__ */ t("li", {
+						onClick: m,
+						className: "cursor-pointer rounded-sm px-2 py-1 text-red-400 hover:bg-gray-200 dark:hover:bg-zinc-700",
+						children: "Delete"
+					})
+				]
+			})]
+		})
+	})] });
+};
+//#endregion
+export { c as default };

package/dist/components/Selector/SelectorItem/SelectorItem.d.ts

@@ -0,0 +1,15 @@
+import { SelectorValue } from '../Selector';
+import { TagType } from '@plitzi/sdk-shared';
+export type SelectorItemProps = {
+    className?: string;
+    selector?: string;
+    type?: TagType;
+    editable?: boolean;
+    active?: boolean;
+    readOnly?: boolean;
+    onClick?: (selector: SelectorValue) => void;
+    onChange?: (selector: SelectorValue) => void;
+    onAction?: (action: 'duplicate' | 'remove' | 'delete', data?: SelectorValue) => void;
+};
+declare const SelectorItem: ({ className, selector, type, editable, active, readOnly, onClick, onChange, onAction }: SelectorItemProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectorItem;

package/dist/components/Selector/SelectorItem/SelectorItem.mjs

@@ -0,0 +1,50 @@
+import { selectorFormatter as e } from "../SelectorHelper.mjs";
+import t from "./ItemOptions.mjs";
+import n from "clsx";
+import { useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/ContentEditable";
+//#region src/components/Selector/SelectorItem/SelectorItem.tsx
+var s = ({ className: s = "", selector: c = "", type: l = "class", editable: u = !0, active: d = !1, readOnly: f = !1, onClick: p, onChange: m, onAction: h }) => {
+	let g = r((e) => {
+		e.preventDefault(), f || e.stopPropagation(), p?.({
+			name: c,
+			type: l
+		});
+	}, [
+		p,
+		f,
+		c,
+		l
+	]), _ = r((t) => {
+		m?.({
+			name: e(t),
+			type: l
+		});
+	}, [l, m]);
+	return /* @__PURE__ */ a("div", {
+		className: n("relative flex cursor-pointer items-center gap-1 rounded-sm px-2 py-1 text-white select-none", s, {
+			"bg-primary-400": l === "element" && d,
+			"bg-secondary-400": l !== "element" && d,
+			"bg-gray-500": !d,
+			"max-w-full min-w-0": !u
+		}),
+		onClick: g,
+		title: `${l}: ${c}`,
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex min-w-0 grow basis-0 text-xs",
+			children: [u && /* @__PURE__ */ i(o, {
+				className: "inline text-nowrap focus-visible:m-[1px] focus-visible:px-1 focus-visible:outline-1 focus-visible:outline-dashed",
+				value: c,
+				openMode: "doubleClick",
+				onChange: _
+			}), !u && c]
+		}), u && l !== "element" && /* @__PURE__ */ i(t, {
+			selector: c,
+			type: l,
+			onAction: h
+		})]
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/Selector/SelectorItem/index.d.ts

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

package/dist/components/Selector/SelectorItem/index.mjs

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

package/dist/components/Selector/SelectorSuggestions/SelectorSuggestions.d.ts

@@ -0,0 +1,9 @@
+import { SelectorValue } from '../Selector';
+export type SelectorSuggestionsProps = {
+    selector?: string;
+    onSelect?: (tag: SelectorValue) => void;
+    onCreate?: (tag: SelectorValue) => void;
+    selectors?: SelectorValue[];
+};
+declare const SelectorSuggestions: ({ onSelect, onCreate, selector, selectors }: SelectorSuggestionsProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectorSuggestions;

package/dist/components/Selector/SelectorSuggestions/SelectorSuggestions.mjs

@@ -0,0 +1,23 @@
+import e from "./SuggestionsCreator.mjs";
+import t from "./SuggestionsList.mjs";
+import { useCallback as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/Selector/SelectorSuggestions/SelectorSuggestions.tsx
+var o = ({ onSelect: o, onCreate: s, selector: c = "", selectors: l = [] }) => {
+	let u = r(() => c && l.find((e) => e.name === c), [c, l]), d = n((e) => o?.(e), [o]), f = n((e) => s?.(e), [s]), p = r(() => {
+		let e = l;
+		return c && (e = e.filter((e) => e.type === "class" && e.name.toLowerCase().includes(c.toLowerCase()))), e;
+	}, [l, c]);
+	return /* @__PURE__ */ a("div", {
+		className: "flex w-full flex-col gap-2 px-2 py-2",
+		children: [c && !u && /* @__PURE__ */ i(e, {
+			selector: c,
+			onClick: f
+		}), /* @__PURE__ */ i(t, {
+			selectors: p,
+			onSelect: d
+		})]
+	});
+};
+//#endregion
+export { o as default };

package/dist/components/Selector/SelectorSuggestions/SuggestionsCreator.d.ts

@@ -0,0 +1,7 @@
+import { SelectorValue } from '../Selector';
+export type SuggestionsCreatorProps = {
+    selector?: string;
+    onClick?: (selector: SelectorValue) => void;
+};
+declare const SuggestionsCreator: ({ selector, onClick }: SuggestionsCreatorProps) => import("react/jsx-runtime").JSX.Element;
+export default SuggestionsCreator;

package/dist/components/Selector/SelectorSuggestions/SuggestionsCreator.mjs

@@ -0,0 +1,20 @@
+import e from "../SelectorItem/index.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Selector/SelectorSuggestions/SuggestionsCreator.tsx
+var r = ({ selector: r, onClick: i }) => /* @__PURE__ */ n("div", {
+	className: "flex flex-col",
+	children: [/* @__PURE__ */ t("div", {
+		className: "text-sm font-bold text-zinc-800 dark:text-zinc-200",
+		children: "New Token"
+	}), /* @__PURE__ */ n("div", {
+		className: "flex items-center gap-1 px-2 text-xs text-zinc-600 dark:text-zinc-400",
+		children: [/* @__PURE__ */ t("div", { children: "Create:" }), /* @__PURE__ */ t(e, {
+			selector: r,
+			editable: !1,
+			active: !0,
+			onClick: i
+		})]
+	})]
+});
+//#endregion
+export { r as default };

package/dist/components/Selector/SelectorSuggestions/SuggestionsList.d.ts

@@ -0,0 +1,7 @@
+import { SelectorValue } from '../Selector';
+export type SuggestionsListProps = {
+    selectors?: SelectorValue[];
+    onSelect?: (selector: SelectorValue) => void;
+};
+declare const SuggestionsList: ({ selectors, onSelect }: SuggestionsListProps) => import("react/jsx-runtime").JSX.Element;
+export default SuggestionsList;

package/dist/components/Selector/SelectorSuggestions/SuggestionsList.mjs

@@ -0,0 +1,25 @@
+import e from "../SelectorItem/index.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Selector/SelectorSuggestions/SuggestionsList.tsx
+var r = ({ selectors: r = [], onSelect: i }) => /* @__PURE__ */ n("div", {
+	className: "flex w-full flex-col",
+	children: [/* @__PURE__ */ t("div", {
+		className: "mb-1 w-full text-sm font-bold text-zinc-800 dark:text-zinc-200",
+		children: "Tokens Availables"
+	}), /* @__PURE__ */ n("div", {
+		className: "flex max-h-[250px] flex-col items-start gap-1 overflow-y-auto text-xs",
+		children: [r.map((n, r) => /* @__PURE__ */ t(e, {
+			className: "cursor-pointer",
+			selector: n.name,
+			type: n.type,
+			editable: !1,
+			onClick: i,
+			active: !0
+		}, `${n.name}_${r}`)), r.length === 0 && /* @__PURE__ */ t("div", {
+			className: "w-full rounded-sm border-2 border-dashed border-gray-300 p-3 text-center text-zinc-500 dark:border-zinc-600 dark:text-zinc-400",
+			children: "No tokens availables"
+		})]
+	})]
+});
+//#endregion
+export { r as default };

package/dist/components/Selector/SelectorSuggestions/index.d.ts

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

package/dist/components/Selector/SelectorSuggestions/index.mjs

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

package/dist/components/Selector/index.d.ts

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

package/dist/components/Selector/index.mjs

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

package/dist/components/StyleInspector/Inspector.d.ts

@@ -0,0 +1,15 @@
+import { DisplayMode, Element, StyleItem, StyleState } from '@plitzi/sdk-shared';
+export type InspectorProps = {
+    selectors?: StyleItem[];
+    componentType?: string;
+    componentSubType?: string;
+    selector?: StyleItem;
+    styleState?: StyleState;
+    styleVariant?: string;
+    styleSelector?: string;
+    element?: Element;
+    displayMode: DisplayMode;
+    mode?: 'element' | 'manager';
+};
+declare const Inspector: ({ selectors, componentType, componentSubType, selector, styleState, styleVariant, styleSelector, element, displayMode, mode }: InspectorProps) => import("react/jsx-runtime").JSX.Element;
+export default Inspector;

package/dist/components/StyleInspector/Inspector.mjs

@@ -0,0 +1,178 @@
+import { makeSelector as e } from "../../StyleHelper.mjs";
+import t from "./categories/Background/index.mjs";
+import n from "./categories/Border/index.mjs";
+import r from "./categories/Display/index.mjs";
+import i from "./categories/DisplayFlexChild/index.mjs";
+import a from "./categories/Effects/index.mjs";
+import o from "./categories/List/index.mjs";
+import s from "./categories/ListItem/index.mjs";
+import c from "./categories/Position/index.mjs";
+import l from "./categories/RawStyle/index.mjs";
+import u from "./categories/Size/index.mjs";
+import d from "./categories/Spacing/index.mjs";
+import f from "./categories/Typography/index.mjs";
+import p from "./categories/Variables/index.mjs";
+import m from "./hooks/useStyleInherit.mjs";
+import h from "./StyleInspectorProvider.mjs";
+import { get as g, set as _ } from "@plitzi/plitzi-ui/helpers";
+import { use as v, useCallback as y, useMemo as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { produce as C } from "immer";
+import w from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+import T from "@plitzi/plitzi-ui/hooks/useStorage";
+import E from "@plitzi/plitzi-ui/Switch";
+//#region src/components/StyleInspector/Inspector.tsx
+var D = ({ selectors: D, componentType: O, componentSubType: k, selector: A, styleState: j, styleVariant: M, styleSelector: N = "base", element: P, displayMode: F, mode: I = "element" }) => {
+	let { builderHandler: L } = v(w), [R, z] = T(`builder-state.styleInspector.${I}.collapsedCache`, {}), [B, V] = T(`builder-state.styleInspector.${I}.showAllOptions`, !1), [H, U] = T(`builder-state.styleInspector.${I}.replaceTokens`, !1), W = m({
+		element: P,
+		componentType: O,
+		componentSubType: k,
+		selector: A?.name,
+		styleSelector: N,
+		styleState: j,
+		styleVariant: M
+	}), G = y((e, t) => z((n) => ({
+		...n,
+		[e]: t
+	})), [z]), K = y((e) => V(e.target.checked), [V]), q = y((e) => U(e.target.checked), [U]), J = y((t, n) => {
+		if (A) {
+			L("styleUpdateSelector", F, A.name, t, n, {
+				componentType: A.type === "element" ? O : void 0,
+				styleSelector: N,
+				styleState: j,
+				styleVariant: M
+			});
+			return;
+		}
+		if (!O) return;
+		let r = e(O, N);
+		if (L("styleAddSelector", F, r, "class", t, n, {
+			styleSelector: N,
+			styleState: j,
+			styleVariant: M
+		}), !P) return;
+		let i = g(P, `definition.styleSelectors.${N}`);
+		L("schemaUpdateElement", C(P, (e) => {
+			i ? _(e, `definition.styleSelectors.${N}`, `${i} ${r}`) : _(e, `definition.styleSelectors.${N}`, r);
+		}));
+	}, [
+		L,
+		O,
+		F,
+		P,
+		A,
+		N,
+		j,
+		M
+	]), Y = b(() => {
+		let e = P?.definition.type;
+		return B || I === "manager" || e === "list" || e === "listItem";
+	}, [
+		P?.definition.type,
+		I,
+		B
+	]), X = b(() => B || I === "manager" || g(W, "parentStyle.display", "block") === "flex", [
+		W,
+		I,
+		B
+	]), Z = b(() => g(W, "parentStyle.flex-direction", "row") === "column", [W]);
+	return /* @__PURE__ */ x(h, {
+		componentType: O,
+		displayMode: F,
+		styleSelector: N,
+		styleState: j,
+		styleVariant: M,
+		selector: A,
+		element: P,
+		inheritData: W,
+		onChange: J,
+		children: /* @__PURE__ */ S("div", {
+			className: "flex grow flex-col justify-between",
+			children: [/* @__PURE__ */ S("div", {
+				className: "flex grow flex-col",
+				children: [
+					Y && /* @__PURE__ */ x(o, {
+						replaceTokens: H,
+						isCollapsed: R.list ?? !0,
+						onCollapse: G
+					}),
+					Y && /* @__PURE__ */ x(s, {
+						replaceTokens: H,
+						isCollapsed: R.listItem ?? !0,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(r, {
+						replaceTokens: H,
+						isCollapsed: R.display ?? !0,
+						onCollapse: G
+					}),
+					X && /* @__PURE__ */ x(i, {
+						replaceTokens: H,
+						isCollapsed: R.displayFlexChild ?? !0,
+						isFlexVertical: Z,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(d, {
+						replaceTokens: H,
+						isCollapsed: R.spacing ?? !0,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(u, {
+						replaceTokens: H,
+						isCollapsed: R.size ?? !0,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(c, {
+						replaceTokens: H,
+						isCollapsed: R.position ?? !0,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(f, {
+						replaceTokens: H,
+						isCollapsed: R.typography ?? !0,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(t, {
+						replaceTokens: H,
+						isCollapsed: R.background ?? !0,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(n, {
+						replaceTokens: H,
+						isCollapsed: R.border ?? !0,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(a, {
+						replaceTokens: H,
+						isCollapsed: R.effects ?? !0,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(p, {
+						isCollapsed: R.variables ?? !0,
+						onCollapse: G
+					}),
+					/* @__PURE__ */ x(l, {
+						isCollapsed: R.rawStyle ?? !0,
+						selectors: D,
+						onCollapse: G
+					})
+				]
+			}), /* @__PURE__ */ S("div", {
+				className: "flex items-center justify-end gap-4 border-t border-gray-200 px-2 py-1 dark:border-zinc-700",
+				children: [/* @__PURE__ */ x(E, {
+					size: "xs",
+					label: "Replace Tokens",
+					checked: H,
+					onChange: q
+				}), I === "element" && /* @__PURE__ */ x(E, {
+					size: "xs",
+					label: "Show All Options",
+					checked: B,
+					onChange: K
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { D as default };

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

@@ -0,0 +1,21 @@
+import { DisplayMode, Element, StyleItem, StyleState } from '@plitzi/sdk-shared';
+export type StyleInspectorProps = {
+    displayMode: DisplayMode;
+    selectors?: Record<string, StyleItem>;
+    value?: string;
+    element?: Element;
+    componentType?: string;
+    mode?: 'element' | 'manager';
+    styleSelectors?: Record<string, string>;
+    styleSelectorsAvailables?: string[];
+    componentSubTypesAvailables?: string[];
+    allowStyleSelector?: boolean;
+    allowStyleState?: boolean;
+    allowStyleVariant?: boolean;
+    onChange?: (selector?: string) => void;
+    onVariantChange?: (variant?: string) => void;
+    onStateChange?: (state: StyleState) => void;
+    onRemoveVariant?: (variant: string) => void;
+};
+declare const StyleInspector: ({ displayMode, selectors, value, element, mode, componentType, styleSelectors, styleSelectorsAvailables, componentSubTypesAvailables, allowStyleSelector, allowStyleState, allowStyleVariant, onChange, onRemoveVariant }: StyleInspectorProps) => import("react/jsx-runtime").JSX.Element;
+export default StyleInspector;