@plitzi/sdk-variables 0.30.19

package/dist/components/StyleVariables/VariableGroup.mjs

@@ -0,0 +1,39 @@
+import e from "./StyleVariable.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/ContainerCollapsable";
+import i from "@plitzi/plitzi-ui/Icon";
+//#region src/components/StyleVariables/VariableGroup.tsx
+var a = ({ category: a, variables: o = {}, onUpdate: s, onRemove: c }) => {
+	let l = Object.keys(o).length;
+	return /* @__PURE__ */ n(r, {
+		collapsed: !0,
+		children: [/* @__PURE__ */ t(r.Header, {
+			className: "h-6 text-sm",
+			title: /* @__PURE__ */ n("span", {
+				className: "flex w-full items-center justify-between gap-1 font-bold",
+				children: [a, /* @__PURE__ */ n("span", {
+					className: "text-xs font-normal text-gray-500",
+					children: [
+						"(",
+						l,
+						")"
+					]
+				})]
+			}),
+			placement: "right",
+			iconCollapsed: /* @__PURE__ */ t(i, { icon: "fa-solid fa-angle-down" }),
+			iconExpanded: /* @__PURE__ */ t(i, { icon: "fa-solid fa-angle-up" })
+		}), l > 0 && /* @__PURE__ */ t(r.Content, {
+			className: "flex flex-col gap-1 py-1",
+			children: Object.keys(o).map((n, r) => /* @__PURE__ */ t(e, {
+				category: a,
+				name: n,
+				value: o[n],
+				onUpdate: s,
+				onRemove: c
+			}, `${a}-${r}`))
+		})]
+	});
+};
+//#endregion
+export { a as default };

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

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

package/dist/components/StyleVariables/VariableList.mjs

@@ -0,0 +1,17 @@
+import e from "./VariableGroup.mjs";
+import { jsx as t } from "react/jsx-runtime";
+import { StyleVariableCategory as n } from "@plitzi/sdk-shared";
+//#region src/components/StyleVariables/VariableList.tsx
+var r = ({ variables: r, onUpdate: i, onRemove: a }) => {
+	if (r) return /* @__PURE__ */ t("div", {
+		className: "flex grow flex-col overflow-y-auto",
+		children: Object.values(n).map((n) => /* @__PURE__ */ t(e, {
+			category: n,
+			variables: r[n],
+			onUpdate: i,
+			onRemove: a
+		}, n))
+	});
+};
+//#endregion
+export { r as default };

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

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

package/dist/components/StyleVariables/VariableValue.mjs

@@ -0,0 +1,27 @@
+import { useMemo as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/StyleVariables/VariableValue.tsx
+var r = ({ type: r, value: i }) => {
+	let a = e(() => typeof i == "object" ? Object.keys(i).sort((e) => e === "default" ? -1 : 1) : [], [i]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex items-center gap-2 truncate text-xs",
+		children: [i && r === "color" && typeof i == "object" && a.map((e) => /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-1 capitalize",
+			title: `${e}: ${i[e]}`,
+			children: [
+				e[0],
+				":",
+				/* @__PURE__ */ t("div", {
+					className: "min-h-4 min-w-4 rounded border border-gray-300",
+					style: { backgroundColor: i[e] }
+				})
+			]
+		}, e)), r === "text" && (typeof i == "string" || typeof i == "number") && /* @__PURE__ */ t("div", {
+			className: "truncate",
+			title: i,
+			children: i
+		})]
+	});
+};
+//#endregion
+export { r as default };

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

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

package/dist/components/StyleVariables/index.mjs

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

package/dist/components/index.d.ts

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

package/dist/components/index.mjs

@@ -0,0 +1,10 @@
+import { __exportAll as e } from "../_virtual/_rolldown/runtime.mjs";
+import t from "./SchemaVariables/index.mjs";
+import n from "./StyleVariables/index.mjs";
+//#region src/components/index.ts
+var r = /* @__PURE__ */ e({
+	SchemaVariables: () => t,
+	StyleVariables: () => n
+});
+//#endregion
+export { t as SchemaVariables, n as StyleVariables, r as components_exports };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { default as VariablesContext } from './VariablesContext';
+import { schemaVariablesToCss, styleVariablesToCss } from './VariablesHelper';
+import * as components from './components';
+import * as forms from './models';
+export * from './models';
+export * from './components';
+export * from './VariablesContext';
+export * from './VariablesHelper';
+export { VariablesContext, schemaVariablesToCss, styleVariablesToCss, components, forms };

package/dist/index.mjs

@@ -0,0 +1,11 @@
+import { schemaVariableFormSchema as e } from "./models/SchemaVariableForm/SchemaVariableForm.mjs";
+import t from "./models/SchemaVariableForm/index.mjs";
+import n from "./components/SchemaVariables/index.mjs";
+import { styleVariableFormSchema as r } from "./models/StyleVariableForm/StyleVariableForm.mjs";
+import i from "./models/StyleVariableForm/index.mjs";
+import { models_exports as a } from "./models/index.mjs";
+import o from "./components/StyleVariables/index.mjs";
+import { components_exports as s } from "./components/index.mjs";
+import c from "./VariablesContext.mjs";
+import { schemaVariablesToCss as l, styleSelectorVariablesToCss as u, styleVariablesToCss as d } from "./VariablesHelper.mjs";
+export { t as SchemaVariableForm, n as SchemaVariables, i as StyleVariableForm, o as StyleVariables, c as VariablesContext, s as components, a as forms, e as schemaVariableFormSchema, l as schemaVariablesToCss, u as styleSelectorVariablesToCss, r as styleVariableFormSchema, d as styleVariablesToCss };

package/dist/models/SchemaVariableForm/SchemaVariableForm.d.ts

@@ -0,0 +1,39 @@
+import { z } from 'zod';
+import { Environment, QueryParams, RouteParams, SchemaVariable } from '@plitzi/sdk-shared';
+import { MouseEvent } from 'react';
+export declare const schemaVariableFormSchema: z.ZodObject<{
+    name: z.ZodString;
+    category: z.ZodString;
+    type: z.ZodEnum<{
+        number: "number";
+        color: "color";
+        text: "text";
+        email: "email";
+        password: "password";
+        select: "select";
+        select2: "select2";
+        checkbox: "checkbox";
+        textarea: "textarea";
+        switch: "switch";
+    }>;
+    value: z.ZodString;
+    subValues: z.ZodOptional<z.ZodArray<z.ZodRecord<z.ZodString, z.ZodAny>>>;
+}, z.core.$strip>;
+export type SchemaVariableFormProps = {
+    name?: SchemaVariable['name'];
+    category?: SchemaVariable['category'];
+    value?: SchemaVariable['value'];
+    type?: SchemaVariable['type'];
+    subValues?: SchemaVariable['subValues'];
+    whenData?: {
+        routeParams: RouteParams;
+        queryParams: QueryParams;
+        hostname?: string;
+        environment: Environment;
+    };
+    isNewRecord?: boolean;
+    onClose?: (e?: MouseEvent) => void;
+    onSubmit?: (values: SchemaVariable) => void;
+};
+declare const SchemaVariableForm: ({ name, category, value, type, subValues, whenData, isNewRecord, onSubmit, onClose }: SchemaVariableFormProps) => import("react/jsx-runtime").JSX.Element;
+export default SchemaVariableForm;

package/dist/models/SchemaVariableForm/SchemaVariableForm.mjs

@@ -0,0 +1,171 @@
+import e from "./VariableValue.mjs";
+import t from "./VariableSubValue.mjs";
+import n from "@plitzi/plitzi-ui/Button";
+import { useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/Alert";
+import s, { useFieldArray as c, useForm as l, useFormWatch as u } from "@plitzi/plitzi-ui/Form";
+import { z as d } from "zod";
+//#region src/models/SchemaVariableForm/SchemaVariableForm.tsx
+var f = d.object({
+	name: d.string().min(4).regex(/^(?:\w+\s+|)([a-zA-Z_][a-zA-Z0-9_]+)$/i, { message: "Name only can be letters, numbers and _ -" }),
+	category: d.string(),
+	type: d.enum([
+		"text",
+		"number",
+		"email",
+		"password",
+		"select",
+		"select2",
+		"checkbox",
+		"textarea",
+		"color",
+		"switch"
+	]),
+	value: d.string().min(3),
+	subValues: d.array(d.record(d.string(), d.any())).optional()
+}), p = ({ name: d = "variable", category: p = "", value: m = "", type: h = "text", subValues: g, whenData: _, isNewRecord: v = !1, onSubmit: y, onClose: b }) => {
+	let x = l({
+		defaultValues: {
+			name: d,
+			value: m,
+			category: p,
+			type: h,
+			subValues: g
+		},
+		config: { schema: f }
+	}), { fields: S, append: C, remove: w, move: T } = c({
+		control: x.formMethods.control,
+		name: "subValues",
+		rules: { minLength: 0 }
+	}), E = u(x.formMethods, "type"), D = u(x.formMethods, "subValues"), O = r((e) => y?.(e), [y]), k = D && D.length > 0, A = r(() => C({
+		value: "",
+		when: void 0
+	}), [C]), j = r((e) => () => {
+		e > 0 && T(e, e - 1);
+	}, [T]), M = r((e) => () => {
+		e < S.length - 1 && T(e, e + 1);
+	}, [S, T]), N = r((e) => () => w(e), [w]), P = r(() => {
+		x.formMethods.setValue("value", "");
+	}, [x]);
+	return /* @__PURE__ */ a(s, {
+		form: x,
+		onSubmit: O,
+		className: "gap-4 rounded border border-gray-300 bg-slate-100 p-2",
+		children: [/* @__PURE__ */ a(s.Body, {
+			gap: 2,
+			children: [
+				/* @__PURE__ */ a("div", {
+					className: "flex gap-4",
+					children: [/* @__PURE__ */ i(s.Input, {
+						name: "name",
+						label: "Name",
+						size: "xs",
+						disabled: !v,
+						className: "w-full grow basis-0"
+					}), /* @__PURE__ */ a(s.Select, {
+						name: "type",
+						label: "Type",
+						size: "xs",
+						onChange: P,
+						className: "w-full grow basis-0",
+						children: [
+							/* @__PURE__ */ i("option", {
+								value: "text",
+								children: "Text"
+							}),
+							/* @__PURE__ */ i("option", {
+								value: "number",
+								children: "Number"
+							}),
+							/* @__PURE__ */ i("option", {
+								value: "email",
+								children: "Email"
+							}),
+							/* @__PURE__ */ i("option", {
+								value: "password",
+								children: "Password"
+							}),
+							/* @__PURE__ */ i("option", {
+								value: "select",
+								children: "Select"
+							}),
+							/* @__PURE__ */ i("option", {
+								value: "select2",
+								children: "Select2"
+							}),
+							/* @__PURE__ */ i("option", {
+								value: "checkbox",
+								children: "Checkbox"
+							}),
+							/* @__PURE__ */ i("option", {
+								value: "switch",
+								children: "Switch"
+							}),
+							/* @__PURE__ */ i("option", {
+								value: "textarea",
+								children: "Text Area"
+							}),
+							/* @__PURE__ */ i("option", {
+								value: "color",
+								children: "Color"
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ i(s.Input, {
+					name: "category",
+					label: "Category",
+					size: "xs",
+					className: "w-full grow basis-0"
+				}),
+				/* @__PURE__ */ i(e, {
+					valueType: E,
+					hasSubValues: k,
+					name: "value"
+				}),
+				k && /* @__PURE__ */ i(o, {
+					intent: "info",
+					className: "text-xs text-white",
+					children: "Based on the logic the variable will take one of these values from top to down"
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ i("div", {
+						className: "flex flex-col gap-2",
+						children: S.map((e, n) => /* @__PURE__ */ i("div", {
+							className: "flex gap-2",
+							children: /* @__PURE__ */ i(t, {
+								whenData: _,
+								valueType: E,
+								index: n,
+								indexLimit: S.length - 1,
+								onClickRemove: N(n),
+								onClickUp: j(n),
+								onClickDown: M(n)
+							})
+						}, e.id))
+					}), /* @__PURE__ */ i(n, {
+						size: "xs",
+						title: "Down",
+						onClick: A,
+						children: "+ Conditional Value"
+					})]
+				})
+			]
+		}), /* @__PURE__ */ a(s.Footer, {
+			justify: "end",
+			children: [/* @__PURE__ */ i(n, {
+				onClick: b,
+				size: "xs",
+				children: "Cancel"
+			}), /* @__PURE__ */ i(n, {
+				type: "submit",
+				size: "xs",
+				children: v ? "Add" : "Update"
+			})]
+		})]
+	});
+};
+//#endregion
+export { p as default, f as schemaVariableFormSchema };

package/dist/models/SchemaVariableForm/VariableSubValue.d.ts

@@ -0,0 +1,17 @@
+import { Environment, QueryParams, RouteParams, SchemaVariable } from '@plitzi/sdk-shared';
+export type VariableSubValueProps = {
+    valueType?: SchemaVariable['type'];
+    whenData?: {
+        routeParams: RouteParams;
+        queryParams: QueryParams;
+        hostname?: string;
+        environment: Environment;
+    };
+    index?: number;
+    indexLimit?: number;
+    onClickRemove?: () => void;
+    onClickUp?: () => void;
+    onClickDown?: () => void;
+};
+declare const VariableSubValue: ({ index, valueType, whenData, indexLimit, onClickRemove, onClickUp, onClickDown }: VariableSubValueProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableSubValue;

package/dist/models/SchemaVariableForm/VariableSubValue.mjs

@@ -0,0 +1,55 @@
+import e from "./VariableValue.mjs";
+import { useMemo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/QueryBuilder";
+import a from "@plitzi/plitzi-ui/Form";
+import o from "@plitzi/plitzi-ui/Heading";
+import { getPathsFromObeject as s } from "@plitzi/sdk-shared/helpers/utils";
+//#region src/models/SchemaVariableForm/VariableSubValue.tsx
+var c = ({ index: c = 0, valueType: l = "text", whenData: u, indexLimit: d, onClickRemove: f, onClickUp: p, onClickDown: m }) => {
+	let h = t(() => s(u).reduce((e, t) => ({
+		...e,
+		[t]: {
+			name: t,
+			label: t,
+			placeholder: `Enter ${t}`
+		}
+	}), {}), [u]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex min-w-0 grow basis-0 flex-col gap-3 rounded-sm border border-gray-300 p-2",
+		children: [/* @__PURE__ */ n(e, {
+			valueType: l,
+			name: `subValues.${c}.value`,
+			isSubValue: !0,
+			index: c,
+			indexLimit: d,
+			onClickRemove: f,
+			onClickUp: p,
+			onClickDown: m
+		}), /* @__PURE__ */ n(a.Custom, {
+			name: `subValues.${c}.when`,
+			render: ({ field: { ref: e, value: t, onChange: a }, fieldState: { error: s } }) => /* @__PURE__ */ r("div", {
+				className: "flex flex-col gap-1",
+				ref: e,
+				children: [/* @__PURE__ */ n(o, {
+					as: "h5",
+					children: "When Happens"
+				}), /* @__PURE__ */ n("div", {
+					className: "flex flex-col",
+					children: /* @__PURE__ */ n(i, {
+						direction: "vertical",
+						intent: "gray",
+						className: "w-full",
+						query: t,
+						fields: h,
+						onChange: a,
+						showBranches: !0,
+						error: !!s?.message
+					})
+				})]
+			})
+		})]
+	});
+};
+//#endregion
+export { c as default };

package/dist/models/SchemaVariableForm/VariableSubValueActions.d.ts

@@ -0,0 +1,9 @@
+export type VariableSubValueActionsProps = {
+    indexLimit?: number;
+    index?: number;
+    onClickRemove?: () => void;
+    onClickUp?: () => void;
+    onClickDown?: () => void;
+};
+declare const VariableSubValueActions: ({ indexLimit, index, onClickRemove, onClickUp, onClickDown }: VariableSubValueActionsProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableSubValueActions;

package/dist/models/SchemaVariableForm/VariableSubValueActions.mjs

@@ -0,0 +1,32 @@
+import e from "@plitzi/plitzi-ui/Button";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/models/SchemaVariableForm/VariableSubValueActions.tsx
+var r = ({ indexLimit: r = 0, index: i = 0, onClickRemove: a, onClickUp: o, onClickDown: s }) => /* @__PURE__ */ n("div", {
+	className: "flex gap-2",
+	children: [
+		/* @__PURE__ */ t(e, {
+			intent: "danger",
+			size: "xs",
+			onClick: a,
+			title: "Remove",
+			className: "aspect-square",
+			children: /* @__PURE__ */ t("i", { className: "fas fa-trash-alt" })
+		}),
+		i > 0 && /* @__PURE__ */ t(e, {
+			size: "xs",
+			className: "aspect-square",
+			title: "Up",
+			onClick: o,
+			children: /* @__PURE__ */ t("i", { className: "fa-solid fa-arrow-up" })
+		}),
+		i < r && /* @__PURE__ */ t(e, {
+			size: "xs",
+			className: "aspect-square",
+			title: "Down",
+			onClick: s,
+			children: /* @__PURE__ */ t("i", { className: "fa-solid fa-arrow-down" })
+		})
+	]
+});
+//#endregion
+export { r as default };

package/dist/models/SchemaVariableForm/VariableValue.d.ts

@@ -0,0 +1,14 @@
+import { SchemaVariable } from '@plitzi/sdk-shared';
+export type VariableValueProps = {
+    valueType?: SchemaVariable['type'];
+    hasSubValues?: boolean;
+    name?: string;
+    index?: number;
+    indexLimit?: number;
+    isSubValue?: boolean;
+    onClickRemove?: () => void;
+    onClickUp?: () => void;
+    onClickDown?: () => void;
+};
+declare const VariableValue: ({ valueType, hasSubValues, name, index, indexLimit, isSubValue, onClickRemove, onClickUp, onClickDown }: VariableValueProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableValue;

package/dist/models/SchemaVariableForm/VariableValue.mjs

@@ -0,0 +1,76 @@
+import e from "./VariableSubValueActions.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Form";
+//#region src/models/SchemaVariableForm/VariableValue.tsx
+var i = ({ valueType: i = "text", hasSubValues: a = !1, name: o = "value", index: s, indexLimit: c, isSubValue: l = !1, onClickRemove: u, onClickUp: d, onClickDown: f }) => {
+	let p = a ? "Fallback Value" : "Value", m = a ? "Fallback Value" : "Value";
+	return /* @__PURE__ */ n("div", {
+		className: "flex items-end gap-2",
+		children: [
+			[
+				"text",
+				"email",
+				"password",
+				"number"
+			].includes(i) && /* @__PURE__ */ t(r.Input, {
+				type: i,
+				name: o,
+				label: p,
+				placeholder: m,
+				size: "xs",
+				className: "w-full min-w-0"
+			}),
+			i === "select" && /* @__PURE__ */ t(r.Select, {
+				name: o,
+				label: p,
+				placeholder: m,
+				size: "xs",
+				className: "w-full min-w-0"
+			}),
+			i === "select2" && /* @__PURE__ */ t(r.Select2, {
+				name: o,
+				label: p,
+				placeholder: m,
+				size: "xs",
+				className: "w-full min-w-0"
+			}),
+			i === "textarea" && /* @__PURE__ */ t(r.TextArea, {
+				name: o,
+				label: p,
+				placeholder: m,
+				size: "xs",
+				className: "w-full min-w-0"
+			}),
+			i === "switch" && /* @__PURE__ */ t(r.Switch, {
+				name: o,
+				label: p,
+				placeholder: m,
+				size: "xs",
+				className: "w-full min-w-0"
+			}),
+			i === "checkbox" && /* @__PURE__ */ t(r.Checkbox, {
+				name: o,
+				label: p,
+				placeholder: m,
+				size: "xs",
+				className: "w-full min-w-0"
+			}),
+			i === "color" && /* @__PURE__ */ t(r.Color, {
+				name: o,
+				label: p,
+				placeholder: m,
+				size: "xs",
+				className: "w-full min-w-0"
+			}),
+			l && /* @__PURE__ */ t(e, {
+				index: s,
+				indexLimit: c,
+				onClickRemove: u,
+				onClickUp: d,
+				onClickDown: f
+			})
+		]
+	});
+};
+//#endregion
+export { i as default };

package/dist/models/SchemaVariableForm/index.d.ts

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

package/dist/models/SchemaVariableForm/index.mjs

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

package/dist/models/StyleVariableForm/StyleVariableForm.d.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod';
+import { StyleVariableCategory, StyleVariableValue } from '@plitzi/sdk-shared';
+import { MouseEvent } from 'react';
+export declare const styleVariableFormSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    name: z.ZodString;
+    category: z.ZodLiteral<StyleVariableCategory.COLOR>;
+    value: z.ZodObject<{
+        light: z.ZodString;
+        dark: z.ZodString;
+        default: z.ZodString;
+    }, z.core.$strip>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodString;
+    category: z.ZodLiteral<StyleVariableCategory.SHADOW>;
+    value: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodString;
+    category: z.ZodLiteral<StyleVariableCategory.SPACING>;
+    value: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodString;
+    category: z.ZodLiteral<StyleVariableCategory.CUSTOM>;
+    value: z.ZodString;
+}, z.core.$strip>], "category">;
+export type StyleVariableFormProps = {
+    name?: string;
+    category?: StyleVariableCategory;
+    value?: StyleVariableValue;
+    isNewRecord?: boolean;
+    onClose?: (e: MouseEvent) => void;
+    onSubmit?: (values: z.infer<typeof styleVariableFormSchema>) => void;
+};
+declare const StyleVariableForm: ({ name, category, value, isNewRecord, onClose, onSubmit }: StyleVariableFormProps) => import("react/jsx-runtime").JSX.Element;
+export default StyleVariableForm;