@alepha/ui 0.14.1 → 0.14.2

package/dist/demo/DemoDataTable-2mzzf__a.js

@@ -0,0 +1,150 @@
+import { t as Showcase_default } from "./Showcase-vemLuO2t.js";
+import { DataTable } from "@alepha/ui";
+import { t } from "alepha";
+import { Badge, Text } from "@mantine/core";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../../src/demo/components/core/DemoDataTable.tsx
+const sampleUsers = [
+	{
+		id: 1,
+		name: "Alice Johnson",
+		email: "alice@example.com",
+		role: "admin",
+		status: "active"
+	},
+	{
+		id: 2,
+		name: "Bob Smith",
+		email: "bob@example.com",
+		role: "user",
+		status: "active"
+	},
+	{
+		id: 3,
+		name: "Charlie Brown",
+		email: "charlie@example.com",
+		role: "user",
+		status: "inactive"
+	},
+	{
+		id: 4,
+		name: "Diana Prince",
+		email: "diana@example.com",
+		role: "admin",
+		status: "active"
+	},
+	{
+		id: 5,
+		name: "Eve Wilson",
+		email: "eve@example.com",
+		role: "guest",
+		status: "active"
+	}
+];
+const filters = t.object({
+	search: t.optional(t.text({ title: "Search" })),
+	role: t.optional(t.enum([
+		"admin",
+		"user",
+		"guest"
+	], { title: "Role" }))
+});
+const showcaseSchema = t.object({
+	withCheckbox: t.boolean({
+		title: "Checkbox",
+		default: true,
+		$control: { switch: true }
+	}),
+	defaultSize: t.integer({
+		title: "Page Size",
+		default: 5,
+		minimum: 1,
+		maximum: 20,
+		$control: { slider: true }
+	})
+});
+const DemoDataTable = () => {
+	return /* @__PURE__ */ jsx(Showcase_default, {
+		title: "DataTable",
+		schema: showcaseSchema,
+		initialValues: {
+			withCheckbox: true,
+			defaultSize: 5
+		},
+		columns: 1,
+		children: (props) => /* @__PURE__ */ jsx(DataTable, {
+			filters,
+			submitOnInit: true,
+			defaultSize: props.defaultSize,
+			items: async (params) => {
+				let filtered = [...sampleUsers];
+				if (params.search) {
+					const s = params.search.toLowerCase();
+					filtered = filtered.filter((u) => u.name.toLowerCase().includes(s) || u.email.toLowerCase().includes(s));
+				}
+				if (params.role) filtered = filtered.filter((u) => u.role === params.role);
+				const start = params.page * params.size;
+				return {
+					content: filtered.slice(start, start + params.size),
+					page: {
+						totalElements: filtered.length,
+						totalPages: Math.ceil(filtered.length / params.size)
+					}
+				};
+			},
+			columns: {
+				id: {
+					label: "ID",
+					value: (u) => /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						children: u.id
+					}),
+					sortable: true,
+					fit: true
+				},
+				name: {
+					label: "Name",
+					value: (u) => /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						fw: 500,
+						children: u.name
+					}),
+					sortable: true
+				},
+				email: {
+					label: "Email",
+					value: (u) => /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						c: "dimmed",
+						children: u.email
+					})
+				},
+				role: {
+					label: "Role",
+					value: (u) => /* @__PURE__ */ jsx(Badge, {
+						size: "sm",
+						color: u.role === "admin" ? "blue" : u.role === "user" ? "green" : "gray",
+						children: u.role
+					})
+				},
+				status: {
+					label: "Status",
+					value: (u) => /* @__PURE__ */ jsx(Badge, {
+						size: "sm",
+						color: u.status === "active" ? "green" : "red",
+						variant: "light",
+						children: u.status
+					})
+				}
+			},
+			withCheckbox: props.withCheckbox,
+			getItemKey: (u) => String(u.id)
+		}, `${props.withCheckbox}-${props.defaultSize}`)
+	});
+};
+var DemoDataTable_default = DemoDataTable;
+
+//#endregion
+export { DemoDataTable_default as default };
+//# sourceMappingURL=DemoDataTable-2mzzf__a.js.map

package/dist/demo/DemoDataTable-2mzzf__a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoDataTable-2mzzf__a.js","names":["Showcase"],"sources":["../../src/demo/components/core/DemoDataTable.tsx"],"sourcesContent":["import { DataTable } from \"@alepha/ui\";\nimport { Badge, Text } from \"@mantine/core\";\nimport { t } from \"alepha\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n  role: \"admin\" | \"user\" | \"guest\";\n  status: \"active\" | \"inactive\";\n}\n\nconst sampleUsers: User[] = [\n  {\n    id: 1,\n    name: \"Alice Johnson\",\n    email: \"alice@example.com\",\n    role: \"admin\",\n    status: \"active\",\n  },\n  {\n    id: 2,\n    name: \"Bob Smith\",\n    email: \"bob@example.com\",\n    role: \"user\",\n    status: \"active\",\n  },\n  {\n    id: 3,\n    name: \"Charlie Brown\",\n    email: \"charlie@example.com\",\n    role: \"user\",\n    status: \"inactive\",\n  },\n  {\n    id: 4,\n    name: \"Diana Prince\",\n    email: \"diana@example.com\",\n    role: \"admin\",\n    status: \"active\",\n  },\n  {\n    id: 5,\n    name: \"Eve Wilson\",\n    email: \"eve@example.com\",\n    role: \"guest\",\n    status: \"active\",\n  },\n];\n\nconst filters = t.object({\n  search: t.optional(t.text({ title: \"Search\" })),\n  role: t.optional(t.enum([\"admin\", \"user\", \"guest\"], { title: \"Role\" })),\n});\n\nconst showcaseSchema = t.object({\n  withCheckbox: t.boolean({\n    title: \"Checkbox\",\n    default: true,\n    $control: { switch: true },\n  }),\n  defaultSize: t.integer({\n    title: \"Page Size\",\n    default: 5,\n    minimum: 1,\n    maximum: 20,\n    $control: { slider: true },\n  }),\n});\n\nconst DemoDataTable = () => {\n  return (\n    <Showcase\n      title=\"DataTable\"\n      schema={showcaseSchema}\n      initialValues={{\n        withCheckbox: true,\n        defaultSize: 5,\n      }}\n      columns={1}\n    >\n      {(props) => (\n        <DataTable<User, typeof filters>\n          key={`${props.withCheckbox}-${props.defaultSize}`}\n          filters={filters}\n          submitOnInit\n          defaultSize={props.defaultSize}\n          items={async (params) => {\n            let filtered = [...sampleUsers];\n            if (params.search) {\n              const s = params.search.toLowerCase();\n              filtered = filtered.filter(\n                (u) =>\n                  u.name.toLowerCase().includes(s) ||\n                  u.email.toLowerCase().includes(s),\n              );\n            }\n            if (params.role) {\n              filtered = filtered.filter((u) => u.role === params.role);\n            }\n            const start = params.page * params.size;\n            const content = filtered.slice(start, start + params.size);\n            return {\n              content,\n              page: {\n                totalElements: filtered.length,\n                totalPages: Math.ceil(filtered.length / params.size),\n              },\n            };\n          }}\n          columns={{\n            id: {\n              label: \"ID\",\n              value: (u) => <Text size=\"sm\">{u.id}</Text>,\n              sortable: true,\n              fit: true,\n            },\n            name: {\n              label: \"Name\",\n              value: (u) => (\n                <Text size=\"sm\" fw={500}>\n                  {u.name}\n                </Text>\n              ),\n              sortable: true,\n            },\n            email: {\n              label: \"Email\",\n              value: (u) => (\n                <Text size=\"sm\" c=\"dimmed\">\n                  {u.email}\n                </Text>\n              ),\n            },\n            role: {\n              label: \"Role\",\n              value: (u) => (\n                <Badge\n                  size=\"sm\"\n                  color={\n                    u.role === \"admin\"\n                      ? \"blue\"\n                      : u.role === \"user\"\n                        ? \"green\"\n                        : \"gray\"\n                  }\n                >\n                  {u.role}\n                </Badge>\n              ),\n            },\n            status: {\n              label: \"Status\",\n              value: (u) => (\n                <Badge\n                  size=\"sm\"\n                  color={u.status === \"active\" ? \"green\" : \"red\"}\n                  variant=\"light\"\n                >\n                  {u.status}\n                </Badge>\n              ),\n            },\n          }}\n          withCheckbox={props.withCheckbox}\n          getItemKey={(u) => String(u.id)}\n        />\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoDataTable;\n"],"mappings":";;;;;;;AAaA,MAAM,cAAsB;CAC1B;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,MAAM;EACN,QAAQ;EACT;CACD;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,MAAM;EACN,QAAQ;EACT;CACD;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,MAAM;EACN,QAAQ;EACT;CACD;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,MAAM;EACN,QAAQ;EACT;CACD;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,MAAM;EACN,QAAQ;EACT;CACF;AAED,MAAM,UAAU,EAAE,OAAO;CACvB,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,UAAU,CAAC,CAAC;CAC/C,MAAM,EAAE,SAAS,EAAE,KAAK;EAAC;EAAS;EAAQ;EAAQ,EAAE,EAAE,OAAO,QAAQ,CAAC,CAAC;CACxE,CAAC;AAEF,MAAM,iBAAiB,EAAE,OAAO;CAC9B,cAAc,EAAE,QAAQ;EACtB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,aAAa,EAAE,QAAQ;EACrB,OAAO;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACH,CAAC;AAEF,MAAM,sBAAsB;AAC1B,QACE,oBAACA;EACC,OAAM;EACN,QAAQ;EACR,eAAe;GACb,cAAc;GACd,aAAa;GACd;EACD,SAAS;aAEP,UACA,oBAAC;GAEU;GACT;GACA,aAAa,MAAM;GACnB,OAAO,OAAO,WAAW;IACvB,IAAI,WAAW,CAAC,GAAG,YAAY;AAC/B,QAAI,OAAO,QAAQ;KACjB,MAAM,IAAI,OAAO,OAAO,aAAa;AACrC,gBAAW,SAAS,QACjB,MACC,EAAE,KAAK,aAAa,CAAC,SAAS,EAAE,IAChC,EAAE,MAAM,aAAa,CAAC,SAAS,EAAE,CACpC;;AAEH,QAAI,OAAO,KACT,YAAW,SAAS,QAAQ,MAAM,EAAE,SAAS,OAAO,KAAK;IAE3D,MAAM,QAAQ,OAAO,OAAO,OAAO;AAEnC,WAAO;KACL,SAFc,SAAS,MAAM,OAAO,QAAQ,OAAO,KAAK;KAGxD,MAAM;MACJ,eAAe,SAAS;MACxB,YAAY,KAAK,KAAK,SAAS,SAAS,OAAO,KAAK;MACrD;KACF;;GAEH,SAAS;IACP,IAAI;KACF,OAAO;KACP,QAAQ,MAAM,oBAAC;MAAK,MAAK;gBAAM,EAAE;OAAU;KAC3C,UAAU;KACV,KAAK;KACN;IACD,MAAM;KACJ,OAAO;KACP,QAAQ,MACN,oBAAC;MAAK,MAAK;MAAK,IAAI;gBACjB,EAAE;OACE;KAET,UAAU;KACX;IACD,OAAO;KACL,OAAO;KACP,QAAQ,MACN,oBAAC;MAAK,MAAK;MAAK,GAAE;gBACf,EAAE;OACE;KAEV;IACD,MAAM;KACJ,OAAO;KACP,QAAQ,MACN,oBAAC;MACC,MAAK;MACL,OACE,EAAE,SAAS,UACP,SACA,EAAE,SAAS,SACT,UACA;gBAGP,EAAE;OACG;KAEX;IACD,QAAQ;KACN,OAAO;KACP,QAAQ,MACN,oBAAC;MACC,MAAK;MACL,OAAO,EAAE,WAAW,WAAW,UAAU;MACzC,SAAQ;gBAEP,EAAE;OACG;KAEX;IACF;GACD,cAAc,MAAM;GACpB,aAAa,MAAM,OAAO,EAAE,GAAG;KAlF1B,GAAG,MAAM,aAAa,GAAG,MAAM,cAmFpC;GAEK;;AAIf,4BAAe"}

package/dist/demo/DemoHome-CnuL5WV9.js

@@ -0,0 +1,25 @@
+import { IconBraces } from "@tabler/icons-react";
+import { Box, Stack, Text, Title } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../../src/demo/components/DemoHome.tsx
+const DemoHome = () => {
+	return /* @__PURE__ */ jsx(Stack, {
+		gap: "xl",
+		p: "xl",
+		children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Title, {
+			order: 1,
+			mb: "xs",
+			children: "Component Showcase"
+		}), /* @__PURE__ */ jsx(Text, {
+			c: "dimmed",
+			size: "lg",
+			children: "Interactive demos and documentation for @alepha/ui components."
+		})] })
+	});
+};
+var DemoHome_default = DemoHome;
+
+//#endregion
+export { DemoHome_default as t };
+//# sourceMappingURL=DemoHome-CnuL5WV9.js.map

package/dist/demo/DemoHome-CnuL5WV9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoHome-CnuL5WV9.js","names":[],"sources":["../../src/demo/components/DemoHome.tsx"],"sourcesContent":["import { Box, Stack, Text, Title } from \"@mantine/core\";\nimport { IconBraces } from \"@tabler/icons-react\";\n\nconst components = [\n  {\n    name: \"JsonViewer\",\n    description:\n      \"Interactive JSON viewer with syntax highlighting, expand/collapse, and copy functionality.\",\n    icon: IconBraces,\n    href: \"/demo/json-viewer\",\n  },\n];\n\nconst DemoHome = () => {\n  return (\n    <Stack gap=\"xl\" p=\"xl\">\n      <Box>\n        <Title order={1} mb=\"xs\">\n          Component Showcase\n        </Title>\n        <Text c=\"dimmed\" size=\"lg\">\n          Interactive demos and documentation for @alepha/ui components.\n        </Text>\n      </Box>\n    </Stack>\n  );\n};\n\nexport default DemoHome;\n"],"mappings":";;;;;AAaA,MAAM,iBAAiB;AACrB,QACE,oBAAC;EAAM,KAAI;EAAK,GAAE;YAChB,qBAAC,kBACC,oBAAC;GAAM,OAAO;GAAG,IAAG;aAAK;IAEjB,EACR,oBAAC;GAAK,GAAE;GAAS,MAAK;aAAK;IAEpB,IACH;GACA;;AAIZ,uBAAe"}

package/dist/demo/DemoHome-D6Z7EE4V.js

@@ -0,0 +1,3 @@
+import { t as DemoHome_default } from "./DemoHome-CnuL5WV9.js";
+
+export { DemoHome_default as default };

package/dist/demo/DemoJsonViewer-CYUggLop.js

@@ -0,0 +1,4 @@
+import { t as DemoJsonViewer_default } from "./DemoJsonViewer-NUGst5wW.js";
+import "./Showcase-vemLuO2t.js";
+
+export { DemoJsonViewer_default as default };

package/dist/demo/DemoJsonViewer-NUGst5wW.js

@@ -0,0 +1,430 @@
+import { t as Showcase_default } from "./Showcase-vemLuO2t.js";
+import { DialogService, ui } from "@alepha/ui";
+import { t } from "alepha";
+import { IconCheck, IconChevronDown, IconChevronRight, IconCopy } from "@tabler/icons-react";
+import { ActionIcon, Flex, Group, Text, Tree, getTreeExpandedState, useTree } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useI18n } from "@alepha/react/i18n";
+import { useCallback, useMemo, useState } from "react";
+
+//#region ../../src/json/components/JsonViewer.tsx
+const SIZE_CONFIG = {
+	xs: {
+		icon: 14,
+		levelOffset: 16
+	},
+	sm: {
+		icon: 16,
+		levelOffset: 20
+	},
+	md: {
+		icon: 18,
+		levelOffset: 24
+	},
+	lg: {
+		icon: 20,
+		levelOffset: 28
+	},
+	xl: {
+		icon: 22,
+		levelOffset: 32
+	}
+};
+const STYLES = {
+	root: { fontFamily: "var(--mantine-font-family-monospace)" },
+	chevron: {
+		flexShrink: 0,
+		color: "var(--mantine-color-dimmed)"
+	},
+	key: {
+		color: "var(--mantine-color-cyan-text)",
+		fontWeight: 500
+	},
+	colon: { color: "var(--mantine-color-dimmed)" },
+	string: { color: "var(--mantine-color-teal-text)" },
+	number: { color: "var(--mantine-color-blue-text)" },
+	boolean: { color: "var(--mantine-color-violet-text)" },
+	null: {
+		color: "var(--mantine-color-dimmed)",
+		fontStyle: "italic"
+	},
+	preview: { color: "var(--mantine-color-dimmed)" }
+};
+const getValueType = (val) => {
+	if (val === null) return "null";
+	if (val === void 0) return "undefined";
+	if (Array.isArray(val)) return "array";
+	return typeof val;
+};
+function buildTreeNodes(data, path = [], key, isArrayItem = false, maxDepth = 10) {
+	const currentPath = key !== void 0 ? [...path, key] : path;
+	const nodeId = currentPath.length > 0 ? currentPath.join(".") : "root";
+	if (currentPath.length > maxDepth) return {
+		value: nodeId,
+		label: key ?? "",
+		nodeValue: data,
+		nodeKey: key,
+		path: currentPath,
+		isArrayItem
+	};
+	const type = getValueType(data);
+	if (type === "object" || type === "array") {
+		const children = (type === "array" ? data.map((v, i) => [String(i), v]) : Object.entries(data)).map(([k, v]) => buildTreeNodes(v, currentPath, k, type === "array", maxDepth)).filter((n) => n !== null);
+		return {
+			value: nodeId,
+			label: key ?? "",
+			nodeValue: data,
+			nodeKey: key,
+			path: currentPath,
+			isArrayItem,
+			children: children.length > 0 ? children : void 0
+		};
+	}
+	return {
+		value: nodeId,
+		label: key ?? "",
+		nodeValue: data,
+		nodeKey: key,
+		path: currentPath,
+		isArrayItem
+	};
+}
+function getExpandedIds(nodes, targetDepth, currentDepth = 0) {
+	if (currentDepth >= targetDepth) return [];
+	const ids = [];
+	for (const node of nodes) if (node.children) {
+		ids.push(node.value);
+		ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));
+	}
+	return ids;
+}
+const CopyButton = ({ value, iconSize }) => {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback((e) => {
+		e.stopPropagation();
+		navigator.clipboard.writeText(value);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	}, [value]);
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		size: iconSize + 4,
+		variant: "transparent",
+		c: copied ? "green" : "dimmed",
+		onClick: handleCopy,
+		className: "alepha-json-viewer-copy",
+		children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: iconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: iconSize })
+	});
+};
+const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, showQuotes, showCopyButton, renderValue }) => {
+	const { nodeValue, nodeKey, path, isArrayItem, isRoot } = node;
+	const type = getValueType(nodeValue);
+	const isExpandable = type === "object" || type === "array";
+	const getPreview = () => {
+		if (!isExpandable) return null;
+		const count = (type === "array" ? nodeValue : Object.keys(nodeValue)).length;
+		const label = type === "array" ? "item" : "key";
+		if (!expanded) return /* @__PURE__ */ jsx(Text, {
+			fs: "italic",
+			component: "span",
+			size,
+			style: STYLES.preview,
+			children: count === 0 ? type === "array" ? "[]" : "{}" : type === "array" ? `[ ${count} ${count === 1 ? label : `${label}s`} ]` : `{ ${count} ${count === 1 ? label : `${label}s`} }`
+		});
+		return null;
+	};
+	const getCopyValue = () => isExpandable ? JSON.stringify(nodeValue, null, 2) : String(nodeValue ?? "");
+	return /* @__PURE__ */ jsxs(Group, {
+		gap: 6,
+		wrap: "nowrap",
+		...elementProps,
+		className: `alepha-json-viewer-row ${elementProps.className || ""}`,
+		children: [
+			hasChildren ? expanded ? /* @__PURE__ */ jsx(IconChevronDown, {
+				size: config.icon,
+				style: STYLES.chevron
+			}) : /* @__PURE__ */ jsx(IconChevronRight, {
+				size: config.icon,
+				style: STYLES.chevron
+			}) : /* @__PURE__ */ jsx("span", { style: {
+				width: config.icon,
+				flexShrink: 0
+			} }),
+			nodeKey !== void 0 && !isArrayItem && /* @__PURE__ */ jsxs(Text, {
+				component: "span",
+				size,
+				children: [/* @__PURE__ */ jsx("span", {
+					style: STYLES.key,
+					children: showQuotes ? `"${nodeKey}"` : nodeKey
+				}), /* @__PURE__ */ jsx("span", {
+					style: STYLES.colon,
+					children: ":"
+				})]
+			}),
+			nodeKey !== void 0 && isArrayItem && /* @__PURE__ */ jsxs(Text, {
+				component: "span",
+				size,
+				children: [/* @__PURE__ */ jsx("span", {
+					style: STYLES.key,
+					children: nodeKey
+				}), /* @__PURE__ */ jsx("span", {
+					style: STYLES.colon,
+					children: ":"
+				})]
+			}),
+			hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.preview,
+				children: "[]"
+			}) : /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.preview,
+				children: "{}"
+			}) : renderValue(nodeValue, nodeKey, path),
+			showCopyButton && /* @__PURE__ */ jsx(CopyButton, {
+				value: getCopyValue(),
+				iconSize: config.icon
+			})
+		]
+	});
+};
+const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm", showQuotes = false, showCopyButton = true, formatValue }) => {
+	const config = SIZE_CONFIG[size] || SIZE_CONFIG.sm;
+	const treeData = useMemo(() => {
+		const type = getValueType(data);
+		if (type === "object" || type === "array") {
+			const children = (type === "array" ? data.map((v, i) => [String(i), v]) : Object.entries(data)).map(([k, v]) => buildTreeNodes(v, [], k, type === "array", maxDepth)).filter((n) => n !== null);
+			return [{
+				value: "root",
+				label: "",
+				nodeValue: data,
+				nodeKey: void 0,
+				path: [],
+				isArrayItem: false,
+				isRoot: true,
+				children: children.length > 0 ? children : void 0
+			}];
+		}
+		const node = buildTreeNodes(data, [], void 0, false, maxDepth);
+		return node ? [node] : [];
+	}, [data, maxDepth]);
+	const tree = useTree({ initialExpandedState: useMemo(() => {
+		if (defaultExpandedDepth === 0) return {};
+		if (defaultExpandedDepth === Infinity) return getTreeExpandedState(treeData, "*");
+		return getTreeExpandedState(treeData, getExpandedIds(treeData, defaultExpandedDepth + 1));
+	}, [treeData, defaultExpandedDepth]) });
+	const renderValue = useCallback((val, key, path) => {
+		const custom = formatValue?.(key, val, path);
+		if (custom !== void 0) return /* @__PURE__ */ jsx(Text, {
+			component: "span",
+			size,
+			style: STYLES.string,
+			className: "alepha-json-viewer-value",
+			title: String(val),
+			children: custom
+		});
+		const type = getValueType(val);
+		switch (type) {
+			case "string": return /* @__PURE__ */ jsxs(Text, {
+				style: STYLES.string,
+				component: "span",
+				size,
+				className: "alepha-json-viewer-value",
+				title: val,
+				children: [
+					"\"",
+					val,
+					"\""
+				]
+			});
+			case "number": return /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.number,
+				children: val
+			});
+			case "boolean": return /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.boolean,
+				children: String(val)
+			});
+			case "null":
+			case "undefined": return /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.null,
+				children: type
+			});
+			default: return /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				children: String(val)
+			});
+		}
+	}, [
+		formatValue,
+		showQuotes,
+		size
+	]);
+	const renderNode = useCallback(({ node, expanded, hasChildren, elementProps }) => {
+		return /* @__PURE__ */ jsx(RowNode, {
+			node,
+			expanded,
+			hasChildren,
+			elementProps,
+			size,
+			config,
+			showQuotes,
+			showCopyButton,
+			renderValue
+		});
+	}, [
+		config,
+		renderValue,
+		showCopyButton,
+		showQuotes,
+		size
+	]);
+	if (treeData.length === 0) return /* @__PURE__ */ jsx(Text, {
+		size,
+		style: STYLES.null,
+		children: data === null ? "null" : data === void 0 ? "undefined" : "{}"
+	});
+	return /* @__PURE__ */ jsx(Tree, {
+		data: treeData,
+		tree,
+		levelOffset: config.levelOffset,
+		expandOnClick: true,
+		renderNode,
+		styles: { root: STYLES.root }
+	});
+};
+
+//#endregion
+//#region ../../src/json/extensions/DialogService.tsx
+DialogService.prototype.json = function(data, options) {
+	this.open({
+		size: "lg",
+		title: options?.title || "Json Viewer",
+		...options,
+		content: /* @__PURE__ */ jsx(Flex, {
+			bdrs: "md",
+			w: "100%",
+			flex: 1,
+			p: "sm",
+			bg: ui.colors.surface,
+			children: /* @__PURE__ */ jsx(JsonViewer, {
+				size: "xs",
+				data
+			})
+		})
+	});
+};
+
+//#endregion
+//#region ../../src/demo/components/json/DemoJsonViewer.tsx
+const sampleData = {
+	name: "Sample Project",
+	createdAt: "2024-01-15T10:30:00.000Z",
+	updatedAt: "2024-06-20T14:45:30.000Z",
+	count: 42,
+	price: 99.99,
+	isActive: true,
+	nullValue: null,
+	tags: [
+		"typescript",
+		"react",
+		"json"
+	],
+	nested: { level1: { level2: { deepValue: "Found me!" } } },
+	users: [{
+		id: 1,
+		name: "Alice",
+		role: "admin"
+	}, {
+		id: 2,
+		name: "Bob",
+		role: "user"
+	}],
+	emptyArray: [],
+	emptyObject: {},
+	longText: "This is a very long text that should be truncated when it exceeds the maximum string length configured in the viewer options."
+};
+const jsonViewerSchema = t.object({
+	showQuotes: t.boolean({
+		title: "Show Quotes",
+		default: false,
+		$control: { switch: true }
+	}),
+	showCopyButton: t.boolean({
+		title: "Show Copy Button",
+		default: true,
+		$control: { switch: true }
+	}),
+	useFormatValue: t.boolean({
+		title: "Format Dates",
+		default: true,
+		$control: { switch: true }
+	}),
+	defaultExpandedDepth: t.integer({
+		title: "Expand Depth",
+		default: 2,
+		minimum: 0,
+		maximum: 10,
+		$control: { slider: true }
+	}),
+	maxDepth: t.integer({
+		title: "Max Depth",
+		default: 10,
+		minimum: 1,
+		maximum: 20,
+		$control: { slider: true }
+	}),
+	size: t.enum([
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	], {
+		title: "Size",
+		default: "sm",
+		$control: { segmented: true }
+	})
+});
+const DemoJsonViewer = () => {
+	const i18n = useI18n();
+	const formatValue = (key, value) => {
+		if (key === "createdAt") return i18n.l(value, { date: "LLL" });
+		if (key === "updatedAt") return i18n.l(value, { date: "fromNow" });
+	};
+	return /* @__PURE__ */ jsx(Showcase_default, {
+		title: "JsonViewer",
+		schema: jsonViewerSchema,
+		initialValues: {
+			showQuotes: false,
+			showCopyButton: true,
+			useFormatValue: true,
+			defaultExpandedDepth: 2,
+			maxDepth: 10,
+			size: "sm"
+		},
+		columns: 1,
+		children: (props) => /* @__PURE__ */ jsx(JsonViewer, {
+			data: sampleData,
+			defaultExpandedDepth: props.defaultExpandedDepth,
+			showQuotes: props.showQuotes,
+			showCopyButton: props.showCopyButton,
+			formatValue: props.useFormatValue ? formatValue : void 0,
+			maxDepth: props.maxDepth,
+			size: props.size
+		}, props.defaultExpandedDepth)
+	});
+};
+var DemoJsonViewer_default = DemoJsonViewer;
+
+//#endregion
+export { DemoJsonViewer_default as t };
+//# sourceMappingURL=DemoJsonViewer-NUGst5wW.js.map