@plitzi/sdk-variables 0.30.19

package/dist/VariablesContext.d.ts

@@ -0,0 +1,2 @@
+declare const VariablesContext: import('react').Context<undefined>;
+export default VariablesContext;

package/dist/VariablesContext.mjs

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+var t = e(void 0);
+t.displayName = "VariablesContext";
+//#endregion
+export { t as default };

package/dist/VariablesHelper.d.ts

@@ -0,0 +1,4 @@
+import { StyleVariables } from '@plitzi/sdk-shared';
+export declare const schemaVariablesToCss: (variables?: Record<string, string>) => string;
+export declare const styleVariablesToCss: (variables: Partial<StyleVariables>, name?: string, tabIndentSpace?: number, includeRoot?: boolean) => string;
+export declare const styleSelectorVariablesToCss: (variables: Partial<StyleVariables>, name: string, tabIndentSpace?: number, includeRoot?: boolean) => string;

package/dist/VariablesHelper.mjs

@@ -0,0 +1,41 @@
+//#region src/VariablesHelper.ts
+var e = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/, t = /^rgba?\(\s*(\d{1,3}%?\s*,\s*){2,3}\d{1,3}%?\s*\)$/, n = /^hsla?\(\s*\d{1,3}(deg|rad|turn)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%(\s*,\s*(0|0?\.\d+|1))?\s*\)$/, r = new Set([
+	"black",
+	"white",
+	"red",
+	"green",
+	"blue",
+	"yellow",
+	"cyan",
+	"magenta",
+	"orange",
+	"purple",
+	"brown",
+	"pink",
+	"gray",
+	"lime",
+	"teal",
+	"navy",
+	"silver",
+	"maroon",
+	"olive",
+	"aqua",
+	"fuchsia"
+]), i = (i) => {
+	if (!i || typeof i != "string") return !1;
+	let a = i.trim().toLowerCase();
+	return e.test(a) || t.test(a) || n.test(a) || r.has(a);
+}, a = (e) => e ? Object.keys(e).filter((t) => typeof e[t] == "string" || typeof e[t] == "number").map((t) => {
+	let n = e[t];
+	return i(n) ? `--${t}:${n};` : `--${t}:"${n}";`;
+}).join("\n") : "", o = (e, t = ":root", n = 2, r = !0) => {
+	let i = [], a = [], o = [], s = " ".repeat(n), c = " ".repeat(n * 2);
+	for (let [, t] of Object.entries(e)) for (let [e, n] of Object.entries(t)) {
+		let t = `--${e}`;
+		typeof n == "object" ? (i.push(`${c}${t}: ${n.default};`), a.push(`${c}${t}: ${n.light};`), o.push(`${c}${t}: ${n.dark};`)) : i.push(`${c}${t}: ${n};`);
+	}
+	let l = "";
+	return r && (l = `${t} {\n${i.join("\n")}\n}`), a.length && (l += `\n\n@media (prefers-color-scheme: light) {\n${s}${t} {\n${a.join("\n")}\n  }\n}`), o.length && (l += `\n\n@media (prefers-color-scheme: dark) {\n${s}${t} {\n${o.join("\n")}\n  }\n}`), l;
+}, s = (e, t, n = 2, r = !0) => o(e, t, n, r);
+//#endregion
+export { a as schemaVariablesToCss, s as styleSelectorVariablesToCss, o as styleVariablesToCss };

package/dist/_virtual/_rolldown/runtime.mjs

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t as __exportAll };

package/dist/components/SchemaVariables/SchemaVariable.d.ts

@@ -0,0 +1,19 @@
+import { Environment, QueryParams, RouteParams, SchemaVariable as TSchemaVariable } from '@plitzi/sdk-shared';
+export type SchemaVariableProps = {
+    name?: string;
+    category?: string;
+    value?: string;
+    type?: TSchemaVariable['type'];
+    subValues?: TSchemaVariable['subValues'];
+    whenData?: {
+        routeParams: RouteParams;
+        queryParams: QueryParams;
+        hostname?: string;
+        environment: Environment;
+    };
+    onChange?: (name: string, value: Omit<TSchemaVariable, 'name'>) => void;
+    onRemove: (name: string) => void;
+    onParentRefresh?: (identifier: string, segment: object) => void;
+};
+declare const SchemaVariable: ({ name, value, type, category, subValues, whenData, onChange, onRemove }: SchemaVariableProps) => import("react/jsx-runtime").JSX.Element;
+export default SchemaVariable;

package/dist/components/SchemaVariables/SchemaVariable.mjs

@@ -0,0 +1,68 @@
+import e from "./VariableActions.mjs";
+import t from "./VariableValue.mjs";
+import n from "./VariableDetails.mjs";
+import r from "../../models/SchemaVariableForm/index.mjs";
+import { useCallback as i, useState as a } from "react";
+import { omit as o } from "@plitzi/plitzi-ui/helpers";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/SchemaVariables/SchemaVariable.tsx
+var l = ({ name: l = "variable", value: u = "", type: d = "text", category: f = "", subValues: p, whenData: m, onChange: h, onRemove: g }) => {
+	let [_, v] = a(!1), [y, b] = a(!1), x = i((e) => {
+		e.stopPropagation(), g(l);
+	}, [g, l]), S = i((e) => {
+		e.stopPropagation(), v(!0);
+	}, []), C = i(() => v(!1), [v]), w = i((e) => {
+		h?.(l, o(e, ["name"])), v(!1);
+	}, [
+		h,
+		l,
+		v
+	]), T = i(() => b((e) => !e), []);
+	return _ ? /* @__PURE__ */ s("div", {
+		className: "rounded-sm border border-gray-300 p-2 dark:border-zinc-700",
+		children: /* @__PURE__ */ s(r, {
+			name: l,
+			category: f,
+			type: d,
+			value: u,
+			subValues: p,
+			whenData: m,
+			onSubmit: w,
+			onClose: C
+		})
+	}) : /* @__PURE__ */ c("div", {
+		className: "group flex flex-col gap-1 rounded-sm border border-gray-300 bg-white px-2 py-0.5 text-sm text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800/50 dark:text-zinc-300",
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex w-full cursor-pointer items-center gap-2",
+			onClick: T,
+			children: [/* @__PURE__ */ c("div", {
+				className: "flex w-full overflow-hidden",
+				children: [p && p.length > 0 && /* @__PURE__ */ s("i", {
+					className: "fa-solid fa-code-merge px-1 text-sm",
+					title: "Has Variations"
+				}), /* @__PURE__ */ c("div", {
+					className: "flex min-w-0 grow basis-0 justify-between gap-2",
+					children: [/* @__PURE__ */ s("div", {
+						className: "font-bold",
+						title: l,
+						children: l
+					}), /* @__PURE__ */ s(t, {
+						className: "truncate text-xs",
+						type: d,
+						value: u
+					})]
+				})]
+			}), /* @__PURE__ */ s(e, {
+				selected: y,
+				onUpdate: S,
+				onRemove: x
+			})]
+		}), y && /* @__PURE__ */ s(n, {
+			name: l,
+			type: d,
+			subValues: p
+		})]
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/SchemaVariables/SchemaVariables.d.ts

@@ -0,0 +1,16 @@
+import { Environment, QueryParams, RouteParams, SchemaVariable as TSchemaVariable } from '@plitzi/sdk-shared';
+export type SchemaVariablesProps = {
+    className?: string;
+    variables?: TSchemaVariable[];
+    whenData?: {
+        routeParams: RouteParams;
+        queryParams: QueryParams;
+        hostname?: string;
+        environment: Environment;
+    };
+    onAdd?: (variable: TSchemaVariable) => void;
+    onUpdate?: (variable: TSchemaVariable) => void;
+    onRemove?: (name: string) => void;
+};
+declare const SchemaVariables: ({ className, variables, whenData, onAdd, onUpdate, onRemove }: SchemaVariablesProps) => import("react/jsx-runtime").JSX.Element;
+export default SchemaVariables;

package/dist/components/SchemaVariables/SchemaVariables.mjs

@@ -0,0 +1,62 @@
+import e from "../../models/SchemaVariableForm/index.mjs";
+import t from "./SchemaVariable.mjs";
+import n from "@plitzi/plitzi-ui/Button";
+import r from "clsx";
+import { useCallback as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/SchemaVariables/SchemaVariables.tsx
+var c = ({ className: c, variables: l, whenData: u, onAdd: d, onUpdate: f, onRemove: p }) => {
+	let [m, h] = a(), g = i((e) => {
+		d?.(e), h(void 0);
+	}, [d]), _ = i((e, t) => f?.({
+		...t,
+		name: e
+	}), [f]), v = i((e) => p?.(e), [p]), y = i(() => {
+		h({
+			name: "variable",
+			type: "text",
+			category: "",
+			value: "",
+			subValues: []
+		});
+	}, []), b = i(() => h(void 0), []);
+	return /* @__PURE__ */ s("div", {
+		className: r("flex w-full flex-col gap-3", c),
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex min-h-0 grow basis-0 flex-col gap-1 overflow-y-auto",
+				children: l?.map((e) => {
+					let { name: n, type: r, value: i, category: a, subValues: s } = e;
+					return /* @__PURE__ */ o(t, {
+						name: n,
+						category: a,
+						type: r,
+						value: i,
+						subValues: s,
+						whenData: u,
+						onChange: _,
+						onRemove: v
+					}, n);
+				})
+			}),
+			!m && /* @__PURE__ */ o("div", {
+				className: "flex w-full px-1",
+				children: /* @__PURE__ */ s(n, {
+					className: "w-full",
+					size: "xs",
+					onClick: y,
+					iconPlacement: "before",
+					children: [/* @__PURE__ */ o(n.Icon, { icon: "fa-solid fa-plus" }), "Add Space Variable"]
+				})
+			}),
+			m && /* @__PURE__ */ o(e, {
+				...m,
+				isNewRecord: !0,
+				onSubmit: g,
+				onClose: b
+			})
+		]
+	});
+};
+//#endregion
+export { c as default };

package/dist/components/SchemaVariables/VariableActions.d.ts

@@ -0,0 +1,8 @@
+import { MouseEvent } from 'react';
+export type VariableActionsProps = {
+    onUpdate?: (e: MouseEvent) => void;
+    onRemove?: (e: MouseEvent) => void;
+    selected?: boolean;
+};
+declare const VariableActions: ({ onUpdate, onRemove, selected }: VariableActionsProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableActions;

package/dist/components/SchemaVariables/VariableActions.mjs

@@ -0,0 +1,33 @@
+import e from "@plitzi/plitzi-ui/Button";
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/SchemaVariables/VariableActions.tsx
+var i = ({ onUpdate: i, onRemove: a, selected: o = !1 }) => /* @__PURE__ */ r("div", {
+	className: t("flex items-center gap-2 text-xs", {
+		flex: o,
+		"hidden group-hover:flex": !o
+	}),
+	children: [/* @__PURE__ */ n(e, {
+		intent: "custom",
+		size: "custom",
+		border: "none",
+		onClick: i,
+		title: "Update",
+		children: /* @__PURE__ */ n(e.Icon, {
+			intent: "primary",
+			icon: "fas fa-pen"
+		})
+	}), /* @__PURE__ */ n(e, {
+		intent: "custom",
+		border: "none",
+		size: "custom",
+		onClick: a,
+		title: "Remove",
+		children: /* @__PURE__ */ n(e.Icon, {
+			intent: "danger",
+			icon: "fas fa-trash-alt"
+		})
+	})]
+});
+//#endregion
+export { i as default };

package/dist/components/SchemaVariables/VariableDetails.d.ts

@@ -0,0 +1,8 @@
+import { SchemaVariable } from '@plitzi/sdk-shared';
+export type VariableDetailsProps = {
+    name?: SchemaVariable['name'];
+    type?: SchemaVariable['type'];
+    subValues?: SchemaVariable['subValues'];
+};
+declare const VariableDetails: ({ name, subValues, type }: VariableDetailsProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableDetails;

package/dist/components/SchemaVariables/VariableDetails.mjs

@@ -0,0 +1,57 @@
+import e from "./VariableValue.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { QueryBuilderFormatter as i } from "@plitzi/plitzi-ui/QueryBuilder";
+import { useToast as a } from "@plitzi/plitzi-ui/Toast";
+//#region src/components/SchemaVariables/VariableDetails.tsx
+var o = ({ name: o, subValues: s = [], type: c = "text" }) => {
+	let { addToast: l } = a(), u = t(() => {
+		navigator.clipboard.writeText(`{{${o}}}`), l("Variable copied into the clipboard", {
+			appeareance: "success",
+			autoDismiss: !0,
+			placement: "top-right"
+		});
+	}, [l, o]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex w-full flex-col gap-2",
+		children: [s.length > 0 && /* @__PURE__ */ n("div", {
+			className: "flex w-full flex-col gap-1",
+			children: s.map((t, a) => /* @__PURE__ */ r("div", {
+				className: "flex w-full flex-col rounded-sm border border-gray-300 text-xs",
+				children: [/* @__PURE__ */ r("div", {
+					className: "flex items-center gap-1 px-1 py-0.5",
+					children: [/* @__PURE__ */ n("div", {
+						className: "font-bold",
+						children: "Value:"
+					}), /* @__PURE__ */ n(e, {
+						className: "text-xs",
+						value: t.value,
+						type: c
+					})]
+				}), /* @__PURE__ */ r("div", {
+					className: "flex gap-1 border-t border-gray-300 px-1 py-0.5",
+					children: [/* @__PURE__ */ n("div", {
+						className: "font-bold",
+						children: "When:"
+					}), i(t.when)]
+				})]
+			}, a))
+		}), /* @__PURE__ */ r("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex gap-1",
+				children: ["Token:", /* @__PURE__ */ n("div", {
+					className: "truncate font-bold",
+					title: o,
+					children: `{{${o}}}`
+				})]
+			}), /* @__PURE__ */ n("i", {
+				className: "fa-solid fa-copy cursor-pointer hover:text-blue-400",
+				onClick: u,
+				title: "Copy"
+			})]
+		})]
+	});
+};
+//#endregion
+export { o as default };

package/dist/components/SchemaVariables/VariableValue.d.ts

@@ -0,0 +1,7 @@
+export type VariableValueProps = {
+    className?: string;
+    value?: string;
+    type?: string;
+};
+declare const VariableValue: ({ type, value }: VariableValueProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableValue;

package/dist/components/SchemaVariables/VariableValue.mjs

@@ -0,0 +1,16 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/SchemaVariables/VariableValue.tsx
+var n = ({ type: n, value: r }) => /* @__PURE__ */ t("div", {
+	className: "flex items-center gap-1 truncate text-xs",
+	children: [n === "color" && /* @__PURE__ */ e("div", {
+		className: "min-h-3 min-w-3 rounded-sm border border-gray-300",
+		title: r,
+		style: { backgroundColor: r }
+	}), /* @__PURE__ */ e("div", {
+		className: "truncate",
+		title: r,
+		children: r
+	})]
+});
+//#endregion
+export { n as default };

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

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

package/dist/components/SchemaVariables/index.mjs

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

package/dist/components/StyleVariables/StyleVariable.d.ts

@@ -0,0 +1,11 @@
+import { StyleVariableCategory, StyleVariableValue } from '@plitzi/sdk-shared';
+import { TStyleVariable } from './StyleVariables';
+export type StyleVariableProps = {
+    category: StyleVariableCategory;
+    name: string;
+    value?: StyleVariableValue;
+    onUpdate?: (name: string, values: Omit<TStyleVariable, 'name'>) => void;
+    onRemove?: (category: StyleVariableCategory, name: string) => void;
+};
+declare const StyleVariable: ({ category, name, value, onUpdate, onRemove }: StyleVariableProps) => import("react/jsx-runtime").JSX.Element;
+export default StyleVariable;

package/dist/components/StyleVariables/StyleVariable.mjs

@@ -0,0 +1,63 @@
+import e from "./VariableActions.mjs";
+import t from "./VariableDetails.mjs";
+import n from "./VariableValue.mjs";
+import r from "../../models/StyleVariableForm/index.mjs";
+import { useCallback as i, useState as a } from "react";
+import { omit as o } from "@plitzi/plitzi-ui/helpers";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { StyleVariableCategory as l } from "@plitzi/sdk-shared";
+//#region src/components/StyleVariables/StyleVariable.tsx
+var u = ({ category: u, name: d, value: f, onUpdate: p, onRemove: m }) => {
+	let [h, g] = a(!1), [_, v] = a(!1), y = i((e) => {
+		e.stopPropagation(), g(!0);
+	}, []), b = i((e) => {
+		e.stopPropagation(), m?.(u, d);
+	}, [
+		m,
+		u,
+		d
+	]), x = i(() => v((e) => !e), []), S = i(() => g(!1), [g]), C = i((e) => {
+		p?.(d, o(e, ["name"])), g(!1);
+	}, [
+		p,
+		d,
+		g
+	]);
+	return h ? /* @__PURE__ */ s("div", {
+		className: "rounded-sm border border-gray-300 bg-white p-2 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800/50 dark:text-zinc-300",
+		children: /* @__PURE__ */ s(r, {
+			name: d,
+			category: u,
+			value: f,
+			onSubmit: C,
+			onClose: S
+		})
+	}) : /* @__PURE__ */ c("div", {
+		className: "group flex flex-col gap-1 rounded-sm border border-gray-300 bg-white px-1 py-0.5 text-sm text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800/50 dark:text-zinc-300",
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex w-full cursor-pointer items-center gap-2",
+			onClick: x,
+			children: [/* @__PURE__ */ s("div", {
+				className: "flex w-full overflow-hidden",
+				children: /* @__PURE__ */ c("div", {
+					className: "flex min-w-0 grow basis-0 justify-between gap-2",
+					children: [/* @__PURE__ */ s("div", {
+						className: "truncate font-bold",
+						title: d,
+						children: d
+					}), /* @__PURE__ */ s(n, {
+						className: "truncate text-xs",
+						type: u === l.COLOR ? "color" : "text",
+						value: f
+					})]
+				})
+			}), /* @__PURE__ */ s(e, {
+				selected: _,
+				onUpdate: y,
+				onRemove: b
+			})]
+		}), _ && /* @__PURE__ */ s(t, { name: d })]
+	});
+};
+//#endregion
+export { u as default };

package/dist/components/StyleVariables/StyleVariables.d.ts

@@ -0,0 +1,15 @@
+import { StyleVariableCategory, StyleVariables as TStyleVariables, StyleVariableValue } from '@plitzi/sdk-shared';
+export type TStyleVariable = {
+    name: string;
+    category: StyleVariableCategory;
+    value: StyleVariableValue;
+};
+export type StyleVariablesProps = {
+    className?: string;
+    variables?: Partial<TStyleVariables>;
+    onAdd?: (variable: TStyleVariable) => void;
+    onUpdate?: (variable: TStyleVariable) => void;
+    onRemove?: (category: StyleVariableCategory, name: string) => void;
+};
+declare const StyleVariables: ({ className, variables, onAdd, onUpdate, onRemove }: StyleVariablesProps) => import("react/jsx-runtime").JSX.Element;
+export default StyleVariables;

package/dist/components/StyleVariables/StyleVariables.mjs

@@ -0,0 +1,58 @@
+import e from "../../models/StyleVariableForm/index.mjs";
+import t from "./VariableList.mjs";
+import n from "@plitzi/plitzi-ui/Button";
+import r from "clsx";
+import { useCallback as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { StyleVariableCategory as c } from "@plitzi/sdk-shared";
+//#region src/components/StyleVariables/StyleVariables.tsx
+var l = ({ className: l, variables: u = {
+	color: {},
+	spacing: {},
+	shadow: {}
+}, onAdd: d, onUpdate: f, onRemove: p }) => {
+	let [m, h] = a(), g = i((e) => {
+		d?.(e), h(void 0);
+	}, [d]), _ = i((e, t) => f?.({
+		...t,
+		name: e
+	}), [f]), v = i((e, t) => p?.(e, t), [p]), y = i(() => {
+		h({
+			name: "",
+			category: c.COLOR,
+			value: {
+				light: "",
+				dark: "",
+				default: ""
+			}
+		});
+	}, []), b = i(() => h(void 0), []);
+	return /* @__PURE__ */ s("div", {
+		className: r("flex flex-col gap-2", l),
+		children: [
+			/* @__PURE__ */ o(t, {
+				variables: u,
+				onUpdate: _,
+				onRemove: v
+			}),
+			!m && /* @__PURE__ */ o("div", {
+				className: "flex w-full px-1",
+				children: /* @__PURE__ */ s(n, {
+					className: "w-full",
+					size: "xs",
+					onClick: y,
+					iconPlacement: "before",
+					children: [/* @__PURE__ */ o(n.Icon, { icon: "fa-solid fa-plus" }), "Add Style Variable"]
+				})
+			}),
+			m && /* @__PURE__ */ o(e, {
+				...m,
+				isNewRecord: !0,
+				onSubmit: g,
+				onClose: b
+			})
+		]
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/StyleVariables/VariableActions.d.ts

@@ -0,0 +1,8 @@
+import { MouseEvent } from 'react';
+export type VariableActionsProps = {
+    onUpdate?: (e: MouseEvent) => void;
+    onRemove?: (e: MouseEvent) => void;
+    selected?: boolean;
+};
+declare const VariableActions: ({ onUpdate, onRemove, selected }: VariableActionsProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableActions;

package/dist/components/StyleVariables/VariableActions.mjs

@@ -0,0 +1,33 @@
+import e from "@plitzi/plitzi-ui/Button";
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/StyleVariables/VariableActions.tsx
+var i = ({ onUpdate: i, onRemove: a, selected: o = !1 }) => /* @__PURE__ */ r("div", {
+	className: t("flex items-center gap-2 text-xs", {
+		flex: o,
+		"hidden group-hover:flex": !o
+	}),
+	children: [/* @__PURE__ */ n(e, {
+		intent: "custom",
+		size: "custom",
+		border: "none",
+		onClick: i,
+		title: "Update",
+		children: /* @__PURE__ */ n(e.Icon, {
+			intent: "primary",
+			icon: "fas fa-pen"
+		})
+	}), /* @__PURE__ */ n(e, {
+		intent: "custom",
+		border: "none",
+		size: "custom",
+		onClick: a,
+		title: "Remove",
+		children: /* @__PURE__ */ n(e.Icon, {
+			intent: "danger",
+			icon: "fas fa-trash-alt"
+		})
+	})]
+});
+//#endregion
+export { i as default };

package/dist/components/StyleVariables/VariableDetails.d.ts

@@ -0,0 +1,7 @@
+import { SchemaVariable } from '@plitzi/sdk-shared';
+export type VariableDetailsProps = {
+    name?: SchemaVariable['name'];
+    type?: SchemaVariable['type'];
+};
+declare const VariableDetails: ({ name }: VariableDetailsProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableDetails;

package/dist/components/StyleVariables/VariableDetails.mjs

@@ -0,0 +1,30 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useToast as r } from "@plitzi/plitzi-ui/Toast";
+//#region src/components/StyleVariables/VariableDetails.tsx
+var i = ({ name: i }) => {
+	let { addToast: a } = r(), o = e(() => {
+		navigator.clipboard.writeText(`var(--${i})`), a("Variable copied into the clipboard", {
+			appeareance: "success",
+			autoDismiss: !0,
+			placement: "top-right"
+		});
+	}, [a, i]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex w-full items-center justify-between gap-2",
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex gap-1",
+			children: ["Token:", /* @__PURE__ */ t("div", {
+				className: "truncate font-bold",
+				title: i,
+				children: `var(--${i})`
+			})]
+		}), /* @__PURE__ */ t("i", {
+			className: "fa-solid fa-copy cursor-pointer hover:text-blue-400",
+			onClick: o,
+			title: "Copy"
+		})]
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/StyleVariables/VariableGroup.d.ts

@@ -0,0 +1,10 @@
+import { TStyleVariable } from './StyleVariables';
+import { StyleVariableCategory, StyleVariableGroup } from '@plitzi/sdk-shared';
+export type VariableGroupProps = {
+    category: StyleVariableCategory;
+    variables?: StyleVariableGroup;
+    onUpdate?: (name: string, values: Omit<TStyleVariable, 'name'>) => void;
+    onRemove?: (category: StyleVariableCategory, name: string) => void;
+};
+declare const VariableGroup: ({ category, variables, onUpdate, onRemove }: VariableGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableGroup;