@plitzi/sdk-style 0.30.19

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

@@ -0,0 +1,83 @@
+import e from "../../components/CategoryOption/index.mjs";
+import t from "../../components/CategorySection/index.mjs";
+import { useCallback as n, useRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/ContainerFloating";
+import s from "@plitzi/plitzi-ui/Icon";
+//#region src/components/StyleInspector/categories/Typography/TypographyTextShadowItem.tsx
+var c = ({ value: c = "", onRemove: l, onChange: u }) => {
+	let [d = "2px", f = "2px", p = "0px", m = "black"] = c.split(" "), h = r({
+		posX: d,
+		posY: f,
+		blur: p,
+		color: m
+	});
+	h.current = {
+		posX: d,
+		posY: f,
+		blur: p,
+		color: m
+	};
+	let g = n((e) => (t) => {
+		let n = { ...h.current };
+		n[e] = t;
+		let { posX: r, posY: i, blur: a, color: o } = n;
+		u?.(`${r} ${i} ${a} ${o}`);
+	}, [u]);
+	return /* @__PURE__ */ a(o, {
+		className: "w-full",
+		closeOnClick: !1,
+		children: [/* @__PURE__ */ a(o.Trigger, {
+			className: "flex w-full cursor-pointer items-center justify-between rounded-sm border border-gray-300 bg-white px-2 py-0.5 select-none hover:bg-gray-100 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:bg-zinc-700/60",
+			children: [/* @__PURE__ */ a("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ i("div", {
+					className: "mr-1 h-5 w-5 rounded-sm",
+					style: { backgroundColor: m }
+				}), /* @__PURE__ */ i("div", { children: c })]
+			}), /* @__PURE__ */ i("div", {
+				className: "flex",
+				children: /* @__PURE__ */ i(s, {
+					size: "xs",
+					icon: "fas fa-trash-alt",
+					onClick: l,
+					intent: "danger",
+					title: "Remove"
+				})
+			})]
+		}), /* @__PURE__ */ i(o.Content, {
+			className: "w-[260px]",
+			children: /* @__PURE__ */ a("div", {
+				className: "flex w-full flex-col gap-2 p-2",
+				children: [/* @__PURE__ */ a(t, { children: [
+					/* @__PURE__ */ i(e, {
+						className: "min-w-0",
+						label: "Pos X",
+						value: d,
+						onChange: g("posX"),
+						type: "metric"
+					}),
+					/* @__PURE__ */ i(e, {
+						label: "Pos Y",
+						value: f,
+						onChange: g("posY"),
+						type: "metric"
+					}),
+					/* @__PURE__ */ i(e, {
+						label: "Blur",
+						value: p,
+						onChange: g("blur"),
+						type: "metric"
+					})
+				] }), /* @__PURE__ */ i(t, { children: /* @__PURE__ */ i(e, {
+					label: "Color",
+					value: m,
+					onChange: g("color"),
+					type: "color"
+				}) })]
+			})
+		})]
+	});
+};
+//#endregion
+export { c as default };

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

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

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

@@ -0,0 +1,68 @@
+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/TextDirectionLtr";
+import c from "@plitzi/plitzi-ui/icons/TextDirectionRtl";
+//#region src/components/StyleInspector/categories/Typography/TypographyTransform.tsx
+var l = ({ textTransform: l, direction: u, onChange: d }) => {
+	let f = n(() => [
+		{
+			value: "none",
+			icon: /* @__PURE__ */ i(o, {}),
+			description: "None",
+			active: l === "none"
+		},
+		{
+			value: "uppercase",
+			icon: /* @__PURE__ */ i("span", { children: "AA" }),
+			size: "custom",
+			description: "All Caps",
+			active: l === "uppercase"
+		},
+		{
+			value: "capitalize",
+			icon: /* @__PURE__ */ i("span", { children: "Aa" }),
+			size: "custom",
+			description: "Capitalize Every Word",
+			active: l === "capitalize"
+		},
+		{
+			value: "lowercase",
+			icon: /* @__PURE__ */ i("span", { children: "aa" }),
+			size: "custom",
+			description: "Lower Case",
+			active: l === "lowercase"
+		}
+	], [l]), p = n(() => [{
+		value: "ltr",
+		icon: /* @__PURE__ */ i(s, {}),
+		description: "Left To Right",
+		active: u === "ltr"
+	}, {
+		value: "rtl",
+		icon: /* @__PURE__ */ i(c, {}),
+		description: "Right To Left",
+		active: u === "rtl"
+	}], [u]);
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(t, {
+		label: "Capitalize",
+		keys: ["text-transform"],
+		children: /* @__PURE__ */ i(e, {
+			onChange: d?.("text-transform"),
+			type: "iconGroup",
+			items: f
+		})
+	}), /* @__PURE__ */ i(t, {
+		label: "Direction",
+		keys: ["direction"],
+		children: /* @__PURE__ */ i(e, {
+			onChange: d?.("direction"),
+			type: "iconGroup",
+			items: p
+		})
+	})] });
+};
+//#endregion
+export { l as default };

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

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

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

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

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

@@ -0,0 +1,7 @@
+export type VariablesProps = {
+    replaceTokens?: boolean;
+    isCollapsed?: boolean;
+    onCollapse?: (category: string, isCollapsed: boolean) => void;
+};
+declare const Variables: ({ isCollapsed, onCollapse }: VariablesProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default Variables;

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

@@ -0,0 +1,55 @@
+import e from "../../StyleInspectorContext.mjs";
+import t from "../../components/CategoryContainer/index.mjs";
+import { use as n, useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o, { useModal as s } from "@plitzi/plitzi-ui/Modal";
+import c from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+import { useToast as l } from "@plitzi/plitzi-ui/Toast";
+import u from "@plitzi/sdk-variables/components/StyleVariables";
+//#region src/components/StyleInspector/categories/Variables/Variables.tsx
+var d = ({ isCollapsed: d, onCollapse: f }) => {
+	let { displayMode: p, selector: m } = n(e), { builderHandler: h } = n(c), { showDialog: g } = s(), { addToast: _ } = l(), v = r((e) => f?.("variables", e), [f]), y = r((e) => {
+		if (!m) return;
+		let { name: t, category: n, value: r } = e;
+		m.variables?.[n]?.[t] ? _(/* @__PURE__ */ a("span", { children: [
+			"Variable with the name ",
+			/* @__PURE__ */ i("b", { children: t }),
+			" already exists"
+		] }), {
+			appeareance: "warning",
+			autoDismiss: !0,
+			placement: "top-right"
+		}) : h("styleAddSelectorVariable", p, m.name, n, t, r);
+	}, [
+		_,
+		h,
+		p,
+		m
+	]), b = r((e) => {
+		m && h("styleUpdateSelectorVariable", p, m.name, e.category, e.name, e.value);
+	}, [
+		h,
+		p,
+		m
+	]), x = r(async (e, t) => {
+		m && await g(/* @__PURE__ */ i(o.Header, { children: /* @__PURE__ */ i("h4", { children: "Remove Style Variable" }) }), /* @__PURE__ */ i(o.Body, { children: /* @__PURE__ */ i("h4", { children: "Do you want to remove this item ?" }) }), void 0, { size: "sm" }, t) && h("styleRemoveSelectorVariable", p, m.name, e, t);
+	}, [
+		h,
+		p,
+		m,
+		g
+	]);
+	if (m) return /* @__PURE__ */ i(t, {
+		title: "Variables",
+		isCollapsed: d,
+		onCollapse: v,
+		children: /* @__PURE__ */ i(u, {
+			variables: m.variables,
+			onAdd: y,
+			onUpdate: b,
+			onRemove: x
+		})
+	});
+};
+//#endregion
+export { d as default };

package/dist/components/StyleInspector/categories/Variables/index.d.ts

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

package/dist/components/StyleInspector/categories/Variables/index.mjs

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

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

@@ -0,0 +1,13 @@
+import { StyleCategory } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type CategoryContainerProps = {
+    className?: string;
+    classNameContent?: string;
+    children?: ReactNode;
+    title?: string;
+    dotKeys?: StyleCategory[];
+    isCollapsed?: boolean;
+    onCollapse: (collapsed: boolean) => void;
+};
+declare const CategoryContainer: ({ className, classNameContent, children, title, dotKeys, isCollapsed, onCollapse }: CategoryContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default CategoryContainer;

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

@@ -0,0 +1,27 @@
+import e from "../InspectorDots/index.mjs";
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Icon";
+import a from "@plitzi/plitzi-ui/ContainerCollapsable";
+//#region src/components/StyleInspector/components/CategoryContainer/CategoryContainer.tsx
+var o = ({ className: o, classNameContent: s, children: c, title: l = "Title", dotKeys: u, isCollapsed: d = !0, onCollapse: f }) => /* @__PURE__ */ r(a, {
+	className: o,
+	collapsed: d,
+	onChange: f,
+	children: [/* @__PURE__ */ n(a.Header, {
+		className: t("h-8", {
+			"border-b border-gray-200 hover:bg-slate-100 dark:border-zinc-700 dark:hover:bg-zinc-700/50": d,
+			"bg-slate-100 dark:bg-zinc-700/50": !d
+		}),
+		title: l,
+		placement: "right",
+		iconCollapsed: /* @__PURE__ */ n(i, { icon: "fa-solid fa-angle-down" }),
+		iconExpanded: /* @__PURE__ */ n(i, { icon: "fa-solid fa-angle-up" }),
+		children: /* @__PURE__ */ n(e, { styleKeys: u })
+	}), /* @__PURE__ */ n(a.Content, {
+		className: t("flex flex-col gap-3 p-2", { "border-b border-gray-200 dark:border-zinc-700": !d }, s),
+		children: c
+	})]
+});
+//#endregion
+export { o as default };

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

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

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

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

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

@@ -0,0 +1,39 @@
+import { OptionIconGroupProps } from './categoryTypes/OptionIconGroup';
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type CategoryOptionType = 'input' | 'select' | 'iconGroup';
+type CategoryOptionPropsBase = {
+    className?: string;
+    direction?: 'column' | 'row';
+    keys?: StyleCategory[];
+    label?: ReactNode;
+    onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+export type CategoryOptionProps = (CategoryOptionPropsBase & {
+    type: 'iconGroup';
+    items: OptionIconGroupProps['items'];
+}) | (CategoryOptionPropsBase & {
+    type: 'select';
+    children?: ReactNode;
+}) | (CategoryOptionPropsBase & {
+    type: 'metric';
+    value?: StyleValue;
+    preffix?: string;
+    units?: {
+        label: string;
+        value: string;
+    }[];
+    allowedWords?: string[];
+    step?: number;
+    min?: number;
+    max?: number;
+    allowVariables?: boolean;
+}) | (CategoryOptionPropsBase & {
+    type: 'color';
+    value?: StyleValue;
+}) | (CategoryOptionPropsBase & {
+    type?: 'input' | 'select';
+    value?: StyleValue;
+});
+declare const CategoryOption: (props: CategoryOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default CategoryOption;

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

@@ -0,0 +1,30 @@
+import e from "../InspectorLabel/index.mjs";
+import t from "./categoryTypes/OptionColor.mjs";
+import n from "./categoryTypes/OptionIconGroup.mjs";
+import r from "./categoryTypes/OptionInput.mjs";
+import i from "./categoryTypes/OptionMetricInput.mjs";
+import a from "./categoryTypes/OptionSelect.mjs";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@plitzi/plitzi-ui/Flex";
+//#region src/components/StyleInspector/components/CategoryOption/CategoryOption.tsx
+var u = (u) => {
+	let { direction: d = "column", label: f, keys: p, type: m = "input", ...h } = u;
+	return /* @__PURE__ */ c(l, {
+		className: "w-full min-w-0",
+		direction: d,
+		gap: 1,
+		children: [f && /* @__PURE__ */ s(e, {
+			className: "!min-w-0",
+			keyValue: p,
+			children: f
+		}), /* @__PURE__ */ c(o, { children: [
+			m === "iconGroup" && /* @__PURE__ */ s(n, { ...h }),
+			m === "input" && /* @__PURE__ */ s(r, { ...h }),
+			m === "select" && /* @__PURE__ */ s(a, { ...h }),
+			m === "color" && /* @__PURE__ */ s(t, { ...h }),
+			m === "metric" && /* @__PURE__ */ s(i, { ...h })
+		] })]
+	});
+};
+//#endregion
+export { u as default };

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionColor.d.ts

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

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

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+import t from "@plitzi/plitzi-ui/ColorPicker";
+//#region src/components/StyleInspector/components/CategoryOption/categoryTypes/OptionColor.tsx
+var n = ["inherit"], r = ({ className: r, value: i, onChange: a }) => /* @__PURE__ */ e(t, {
+	size: "xs",
+	className: {
+		root: "w-full min-w-0",
+		input: r
+	},
+	value: i,
+	onChange: a,
+	allowVariables: !0,
+	allowedWords: n
+});
+//#endregion
+export { r as default };

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionIconGroup.d.ts

@@ -0,0 +1,15 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type OptionIconGroupProps = {
+    items?: {
+        icon: ReactNode;
+        value: StyleValue | Record<StyleCategory, StyleValue> | boolean;
+        description?: string;
+        isVisible?: boolean;
+        active?: boolean;
+        size?: 'md' | 'sm' | 'xs' | 'custom';
+    }[];
+    onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
+};
+declare const OptionIconGroup: ({ items, onChange }: OptionIconGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default OptionIconGroup;

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

@@ -0,0 +1,27 @@
+import e from "clsx";
+import { useCallback as t, useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+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, {
+		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"
+			}),
+			active: t.active,
+			onClick: c(t.value),
+			icon: typeof t.icon == "string" ? t.icon : void 0,
+			children: typeof t.icon != "string" && t.icon
+		}, n))
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionInput.d.ts

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

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

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import t from "@plitzi/plitzi-ui/Input";
+//#region src/components/StyleInspector/components/CategoryOption/categoryTypes/OptionInput.tsx
+var n = ({ value: n, className: r, onChange: i }) => /* @__PURE__ */ e(t, {
+	size: "xs",
+	value: n,
+	onChange: i,
+	className: {
+		root: "w-full min-w-0",
+		input: r
+	}
+});
+//#endregion
+export { n as default };

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionMetricInput.d.ts

@@ -0,0 +1,18 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+export type OptionMetricInputProps = {
+    className?: string;
+    value?: StyleValue;
+    preffix?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    units?: {
+        label: string;
+        value: string;
+    }[];
+    allowedWords?: string[];
+    allowVariables?: boolean;
+    onChange?: (value: StyleValue | Record<StyleCategory, StyleValue>) => void;
+};
+declare const OptionMetricInput: ({ value, className, preffix, min, max, step, units, allowedWords, allowVariables, onChange }: OptionMetricInputProps) => import("react/jsx-runtime").JSX.Element;
+export default OptionMetricInput;

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

@@ -0,0 +1,69 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+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 = [
+	{
+		label: "PX",
+		value: "px"
+	},
+	{
+		label: "VW",
+		value: "vw"
+	},
+	{
+		label: "VH",
+		value: "vh"
+	},
+	{
+		label: "%",
+		value: "%"
+	},
+	{
+		label: "EM",
+		value: "em"
+	},
+	{
+		label: "REM",
+		value: "rem"
+	},
+	{
+		label: "DVH",
+		value: "dvh"
+	},
+	{
+		label: "DVW",
+		value: "dvw"
+	},
+	{
+		label: "LVH",
+		value: "lvh"
+	},
+	{
+		label: "LVW",
+		value: "lvw"
+	}
+], allowedWords: f = ["auto", "none"], allowVariables: p = !0, onChange: m }) => {
+	let h = t((e) => m?.(e), [m]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex items-center gap-1",
+		children: [s && /* @__PURE__ */ r("span", {
+			className: "text-xs",
+			children: [s, ":"]
+		}), /* @__PURE__ */ n(i, {
+			size: "xs",
+			value: a,
+			min: c,
+			max: l,
+			step: u,
+			units: d,
+			allowedWords: f,
+			allowVariables: p,
+			onChange: h,
+			className: e("w-full min-w-0", o)
+		})]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionSelect.d.ts

@@ -0,0 +1,10 @@
+import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type OptionSelectProps = {
+    className?: string;
+    children?: ReactNode;
+    value?: StyleValue;
+    onChange?: (value: StyleValue | Record<StyleCategory, StyleValue>) => void;
+};
+declare const OptionSelect: ({ children, className, value, onChange }: OptionSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default OptionSelect;

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

@@ -0,0 +1,13 @@
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+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, {
+	size: "xs",
+	value: a,
+	onChange: o,
+	className: e("w-full min-w-0", i),
+	children: r
+});
+//#endregion
+export { r as default };

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

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

package/dist/components/StyleInspector/components/CategoryOption/index.mjs

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

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

@@ -0,0 +1,12 @@
+import { StyleCategory } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type CategoryOptionType = 'text' | 'select' | 'iconGroup';
+export type CategoryOptionProps = {
+    className?: string;
+    children?: ReactNode;
+    label?: ReactNode;
+    direction?: 'column' | 'row';
+    keys?: StyleCategory[];
+};
+declare const CategorySection: ({ children, className, direction, label, keys }: CategoryOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default CategorySection;

package/dist/components/StyleInspector/components/CategorySection/CategorySection.mjs

@@ -0,0 +1,18 @@
+import e from "../InspectorLabel/index.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Flex";
+//#region src/components/StyleInspector/components/CategorySection/CategorySection.tsx
+var i = ({ children: i, className: a, direction: o = "row", label: s, keys: c }) => /* @__PURE__ */ n(r, {
+	direction: o,
+	gap: 2,
+	justify: s && o === "row" ? "between" : void 0,
+	items: o === "row" ? "center" : void 0,
+	className: a,
+	children: [s && /* @__PURE__ */ t(e, {
+		className: o === "row" ? "w-18" : "w-full",
+		keyValue: c,
+		children: s
+	}), i]
+});
+//#endregion
+export { i as default };

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

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

package/dist/components/StyleInspector/components/CategorySection/index.mjs

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

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

@@ -0,0 +1,6 @@
+import { StyleCategory } from '@plitzi/sdk-shared';
+export type InspectorDotsProps = {
+    styleKeys?: StyleCategory[];
+};
+declare const InspectorDots: ({ styleKeys }: InspectorDotsProps) => import("react/jsx-runtime").JSX.Element;
+export default InspectorDots;