@alepha/ui 0.16.2 → 0.17.1

package/dist/demo/DemoDataTable-lnBKWBf8.js

@@ -0,0 +1,362 @@
+import { t as Showcase } from "./Showcase-BzoXNlCn.js";
+import { DataTable, Text } from "@alepha/ui";
+import { t } from "alepha";
+import { IconDownload, IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+import { Badge, Code, Flex, Paper } from "@mantine/core";
+import { jsx, jsxs } 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",
+		notes: "Team lead for the backend team."
+	},
+	{
+		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",
+		notes: "On leave until March."
+	},
+	{
+		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",
+		notes: "External consultant, limited access."
+	},
+	{
+		id: 6,
+		name: "Frank Castle",
+		email: "frank@example.com",
+		role: "user",
+		status: "inactive"
+	},
+	{
+		id: 7,
+		name: "Grace Hopper",
+		email: "grace@example.com",
+		role: "admin",
+		status: "active",
+		notes: "Pioneered compiler development."
+	},
+	{
+		id: 8,
+		name: "Hank Pym",
+		email: "hank@example.com",
+		role: "user",
+		status: "active"
+	}
+];
+const filters = t.object({
+	search: t.optional(t.text({ title: "Search" })),
+	role: t.optional(t.enum([
+		"admin",
+		"user",
+		"guest"
+	], { title: "Role" })),
+	status: t.optional(t.enum(["active", "inactive"], { title: "Status" }))
+});
+const showcaseSchema = t.object({
+	withCheckbox: t.boolean({
+		title: "Checkbox",
+		default: true,
+		$control: { switch: true }
+	}),
+	withExport: t.boolean({
+		title: "Export",
+		default: true,
+		$control: { switch: true }
+	}),
+	withPanel: t.boolean({
+		title: "Panel",
+		default: true,
+		$control: { switch: true }
+	}),
+	withDrawer: t.boolean({
+		title: "Drawer",
+		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, {
+		title: "DataTable",
+		schema: showcaseSchema,
+		initialValues: {
+			withCheckbox: true,
+			withExport: true,
+			withPanel: true,
+			withDrawer: true,
+			defaultSize: 5
+		},
+		columns: 1,
+		children: (props) => /* @__PURE__ */ jsx(DataTable, {
+			filters,
+			defaultFilters: ["search", "role"],
+			submitOnInit: true,
+			defaultSize: props.defaultSize,
+			withCheckbox: props.withCheckbox,
+			withExport: props.withExport,
+			getItemKey: (u) => String(u.id),
+			onFilterChange: (key, _value, form) => {
+				if (key === "role" || key === "status") return form.submit();
+			},
+			typeFormProps: {
+				skipSubmitButton: true,
+				columns: 3
+			},
+			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);
+				if (params.status) filtered = filtered.filter((u) => u.status === params.status);
+				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)
+					}
+				};
+			},
+			actions: [{
+				tooltip: "Add User",
+				icon: IconPlus,
+				variant: "light",
+				size: "xs",
+				onClick: () => alert("Add user clicked")
+			}],
+			checkboxActions: [{
+				label: "Export Selected",
+				icon: /* @__PURE__ */ jsx(IconDownload, { size: 14 }),
+				intent: "primary",
+				onClick: ({ selectedItems, clearSelection }) => {
+					alert(`Exporting ${selectedItems.length} users`);
+					clearSelection();
+				}
+			}, {
+				label: "Delete Selected",
+				icon: /* @__PURE__ */ jsx(IconTrash, { size: 14 }),
+				intent: "danger",
+				onClick: ({ selectedItems, clearSelection }) => {
+					alert(`Deleting ${selectedItems.length} users`);
+					clearSelection();
+				}
+			}],
+			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
+					})
+				},
+				notes: {
+					label: "Notes",
+					defaultHidden: true,
+					value: (u) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						lineClamp: 1,
+						children: u.notes ?? "—"
+					})
+				},
+				actions: {
+					label: "",
+					fit: true,
+					actions: (u) => [{
+						tooltip: "Edit",
+						icon: IconEdit,
+						color: "blue",
+						onClick: () => alert(`Edit ${u.name}`)
+					}, {
+						tooltip: "Delete",
+						icon: IconTrash,
+						color: "red",
+						onClick: () => alert(`Delete ${u.name}`),
+						visible: u.role !== "admin"
+					}]
+				}
+			},
+			panel: props.withPanel ? {
+				can: (u) => Boolean(u.notes),
+				render: (u) => /* @__PURE__ */ jsxs(Flex, {
+					direction: "column",
+					gap: "xs",
+					p: "sm",
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: 600,
+						children: "Notes"
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						children: u.notes
+					})]
+				})
+			} : void 0,
+			drawer: props.withDrawer ? (u) => /* @__PURE__ */ jsxs(Flex, {
+				direction: "column",
+				gap: "md",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						size: "lg",
+						fw: 600,
+						children: u.name
+					}),
+					/* @__PURE__ */ jsx(Paper, {
+						p: "sm",
+						radius: "md",
+						withBorder: true,
+						children: /* @__PURE__ */ jsxs(Flex, {
+							direction: "column",
+							gap: "xs",
+							children: [
+								/* @__PURE__ */ jsxs(Flex, {
+									gap: "xs",
+									children: [/* @__PURE__ */ jsx(Text, {
+										size: "sm",
+										c: "dimmed",
+										w: 60,
+										children: "Email"
+									}), /* @__PURE__ */ jsx(Text, {
+										size: "sm",
+										children: u.email
+									})]
+								}),
+								/* @__PURE__ */ jsxs(Flex, {
+									gap: "xs",
+									children: [/* @__PURE__ */ jsx(Text, {
+										size: "sm",
+										c: "dimmed",
+										w: 60,
+										children: "Role"
+									}), /* @__PURE__ */ jsx(Badge, {
+										size: "sm",
+										color: u.role === "admin" ? "blue" : u.role === "user" ? "green" : "gray",
+										children: u.role
+									})]
+								}),
+								/* @__PURE__ */ jsxs(Flex, {
+									gap: "xs",
+									children: [/* @__PURE__ */ jsx(Text, {
+										size: "sm",
+										c: "dimmed",
+										w: 60,
+										children: "Status"
+									}), /* @__PURE__ */ jsx(Badge, {
+										size: "sm",
+										color: u.status === "active" ? "green" : "red",
+										variant: "light",
+										children: u.status
+									})]
+								})
+							]
+						})
+					}),
+					u.notes && /* @__PURE__ */ jsxs(Paper, {
+						p: "sm",
+						radius: "md",
+						withBorder: true,
+						children: [/* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							fw: 600,
+							mb: "xs",
+							children: "Notes"
+						}), /* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							children: u.notes
+						})]
+					}),
+					/* @__PURE__ */ jsxs(Paper, {
+						p: "sm",
+						radius: "md",
+						withBorder: true,
+						children: [/* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							fw: 600,
+							mb: "xs",
+							children: "Raw Data"
+						}), /* @__PURE__ */ jsx(Code, {
+							block: true,
+							children: JSON.stringify(u, null, 2)
+						})]
+					})
+				]
+			}) : void 0,
+			tableProps: { highlightOnHover: true }
+		}, JSON.stringify(props))
+	});
+};
+
+//#endregion
+export { DemoDataTable as default };
+//# sourceMappingURL=DemoDataTable-lnBKWBf8.js.map

package/dist/demo/DemoDataTable-lnBKWBf8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoDataTable-lnBKWBf8.js","names":[],"sources":["../../src/demo/components/core/DemoDataTable.tsx"],"sourcesContent":["import { DataTable, Text } from \"@alepha/ui\";\nimport { Badge, Code, Flex, Paper } from \"@mantine/core\";\nimport {\n  IconDownload,\n  IconEdit,\n  IconPlus,\n  IconTrash,\n} from \"@tabler/icons-react\";\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  notes?: string;\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    notes: \"Team lead for the backend team.\",\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    notes: \"On leave until March.\",\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    notes: \"External consultant, limited access.\",\n  },\n  {\n    id: 6,\n    name: \"Frank Castle\",\n    email: \"frank@example.com\",\n    role: \"user\",\n    status: \"inactive\",\n  },\n  {\n    id: 7,\n    name: \"Grace Hopper\",\n    email: \"grace@example.com\",\n    role: \"admin\",\n    status: \"active\",\n    notes: \"Pioneered compiler development.\",\n  },\n  {\n    id: 8,\n    name: \"Hank Pym\",\n    email: \"hank@example.com\",\n    role: \"user\",\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  status: t.optional(t.enum([\"active\", \"inactive\"], { title: \"Status\" })),\n});\n\nconst showcaseSchema = t.object({\n  withCheckbox: t.boolean({\n    title: \"Checkbox\",\n    default: true,\n    $control: { switch: true },\n  }),\n  withExport: t.boolean({\n    title: \"Export\",\n    default: true,\n    $control: { switch: true },\n  }),\n  withPanel: t.boolean({\n    title: \"Panel\",\n    default: true,\n    $control: { switch: true },\n  }),\n  withDrawer: t.boolean({\n    title: \"Drawer\",\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        withExport: true,\n        withPanel: true,\n        withDrawer: true,\n        defaultSize: 5,\n      }}\n      columns={1}\n    >\n      {(props) => (\n        <DataTable<User, typeof filters>\n          key={JSON.stringify(props)}\n          filters={filters}\n          defaultFilters={[\"search\", \"role\"]}\n          submitOnInit\n          defaultSize={props.defaultSize}\n          withCheckbox={props.withCheckbox}\n          withExport={props.withExport}\n          getItemKey={(u) => String(u.id)}\n          onFilterChange={(key, _value, form) => {\n            if (key === \"role\" || key === \"status\") {\n              return form.submit();\n            }\n          }}\n          typeFormProps={{\n            skipSubmitButton: true,\n            columns: 3,\n          }}\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            if (params.status) {\n              filtered = filtered.filter((u) => u.status === params.status);\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          actions={[\n            {\n              tooltip: \"Add User\",\n              icon: IconPlus,\n              variant: \"light\",\n              size: \"xs\",\n              onClick: () => alert(\"Add user clicked\"),\n            },\n          ]}\n          checkboxActions={[\n            {\n              label: \"Export Selected\",\n              icon: <IconDownload size={14} />,\n              intent: \"primary\",\n              onClick: ({ selectedItems, clearSelection }) => {\n                alert(`Exporting ${selectedItems.length} users`);\n                clearSelection();\n              },\n            },\n            {\n              label: \"Delete Selected\",\n              icon: <IconTrash size={14} />,\n              intent: \"danger\",\n              onClick: ({ selectedItems, clearSelection }) => {\n                alert(`Deleting ${selectedItems.length} users`);\n                clearSelection();\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            notes: {\n              label: \"Notes\",\n              defaultHidden: true,\n              value: (u) => (\n                <Text size=\"xs\" c=\"dimmed\" lineClamp={1}>\n                  {u.notes ?? \"—\"}\n                </Text>\n              ),\n            },\n            actions: {\n              label: \"\",\n              fit: true,\n              actions: (u) => [\n                {\n                  tooltip: \"Edit\",\n                  icon: IconEdit,\n                  color: \"blue\",\n                  onClick: () => alert(`Edit ${u.name}`),\n                },\n                {\n                  tooltip: \"Delete\",\n                  icon: IconTrash,\n                  color: \"red\",\n                  onClick: () => alert(`Delete ${u.name}`),\n                  visible: u.role !== \"admin\",\n                },\n              ],\n            },\n          }}\n          panel={\n            props.withPanel\n              ? {\n                  can: (u) => Boolean(u.notes),\n                  render: (u) => (\n                    <Flex direction=\"column\" gap=\"xs\" p=\"sm\">\n                      <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                        Notes\n                      </Text>\n                      <Text size=\"sm\">{u.notes}</Text>\n                    </Flex>\n                  ),\n                }\n              : undefined\n          }\n          drawer={\n            props.withDrawer\n              ? (u) => (\n                  <Flex direction=\"column\" gap=\"md\">\n                    <Text size=\"lg\" fw={600}>\n                      {u.name}\n                    </Text>\n                    <Paper p=\"sm\" radius=\"md\" withBorder>\n                      <Flex direction=\"column\" gap=\"xs\">\n                        <Flex gap=\"xs\">\n                          <Text size=\"sm\" c=\"dimmed\" w={60}>\n                            Email\n                          </Text>\n                          <Text size=\"sm\">{u.email}</Text>\n                        </Flex>\n                        <Flex gap=\"xs\">\n                          <Text size=\"sm\" c=\"dimmed\" w={60}>\n                            Role\n                          </Text>\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                        </Flex>\n                        <Flex gap=\"xs\">\n                          <Text size=\"sm\" c=\"dimmed\" w={60}>\n                            Status\n                          </Text>\n                          <Badge\n                            size=\"sm\"\n                            color={u.status === \"active\" ? \"green\" : \"red\"}\n                            variant=\"light\"\n                          >\n                            {u.status}\n                          </Badge>\n                        </Flex>\n                      </Flex>\n                    </Paper>\n                    {u.notes && (\n                      <Paper p=\"sm\" radius=\"md\" withBorder>\n                        <Text size=\"sm\" fw={600} mb=\"xs\">\n                          Notes\n                        </Text>\n                        <Text size=\"sm\">{u.notes}</Text>\n                      </Paper>\n                    )}\n                    <Paper p=\"sm\" radius=\"md\" withBorder>\n                      <Text size=\"sm\" fw={600} mb=\"xs\">\n                        Raw Data\n                      </Text>\n                      <Code block>{JSON.stringify(u, null, 2)}</Code>\n                    </Paper>\n                  </Flex>\n                )\n              : undefined\n          }\n          tableProps={{\n            highlightOnHover: true,\n          }}\n        />\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoDataTable;\n"],"mappings":"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"}

package/dist/demo/{DemoHome-DpRrPlBC.js → DemoHome-CUMZsYaH.js}

@@ -1,15 +1,14 @@
-import { t as __exportAll } from "./rolldown-runtime-CjeV3_4I.js";
 import { IconBraces } from "@tabler/icons-react";
-import { Box, Stack, Text, Title } from "@mantine/core";
+import { Flex, Text, Title } from "@mantine/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region ../../src/demo/components/DemoHome.tsx
-var DemoHome_exports = /* @__PURE__ */ __exportAll({ default: () => DemoHome });
 const DemoHome = () => {
-	return /* @__PURE__ */ jsx(Stack, {
+	return /* @__PURE__ */ jsx(Flex, {
+		direction: "column",
 		gap: "xl",
 		p: "xl",
-		children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Title, {
+		children: /* @__PURE__ */ jsxs(Flex, { children: [/* @__PURE__ */ jsx(Title, {
 			order: 1,
 			mb: "xs",
 			children: "Component Showcase"
@@ -22,5 +21,5 @@ const DemoHome = () => {
 };
 
 //#endregion
-export { DemoHome_exports as n, DemoHome as t };
-//# sourceMappingURL=DemoHome-DpRrPlBC.js.map
+export { DemoHome as default };
+//# sourceMappingURL=DemoHome-CUMZsYaH.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DemoHome-CUMZsYaH.js","names":[],"sources":["../../src/demo/components/DemoHome.tsx"],"sourcesContent":["import { Flex, 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    <Flex direction=\"column\" gap=\"xl\" p=\"xl\">\n      <Flex>\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      </Flex>\n    </Flex>\n  );\n};\n\nexport default DemoHome;\n"],"mappings":";;;;;AAaA,MAAM,iBAAiB;AACrB,QACE,oBAAC;EAAK,WAAU;EAAS,KAAI;EAAK,GAAE;YAClC,qBAAC,mBACC,oBAAC;GAAM,OAAO;GAAG,IAAG;aAAK;IAEjB,EACR,oBAAC;GAAK,GAAE;GAAS,MAAK;aAAK;IAEpB,IACF;GACF"}

package/dist/demo/{DemoJsonViewer-zeucGKHV.js → DemoJsonViewer-_uokbGaW.js}

@@ -1,9 +1,8 @@
-import { t as __exportAll } from "./rolldown-runtime-CjeV3_4I.js";
-import { t as Showcase } from "./Showcase-C9btr_SJ.js";
+import { t as Showcase } from "./Showcase-BzoXNlCn.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 { ActionIcon, Flex, Text as Text$1, 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";
@@ -124,7 +123,7 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 		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, {
+		if (!expanded) return /* @__PURE__ */ jsx(Text$1, {
 			fs: "italic",
 			component: "span",
 			size,
@@ -134,7 +133,7 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 		return null;
 	};
 	const getCopyValue = () => isExpandable ? JSON.stringify(nodeValue, null, 2) : String(nodeValue ?? "");
-	return /* @__PURE__ */ jsxs(Group, {
+	return /* @__PURE__ */ jsxs(Flex, {
 		gap: 6,
 		wrap: "nowrap",
 		...elementProps,
@@ -150,7 +149,7 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 				width: config.icon,
 				flexShrink: 0
 			} }),
-			nodeKey !== void 0 && !isArrayItem && /* @__PURE__ */ jsxs(Text, {
+			nodeKey !== void 0 && !isArrayItem && /* @__PURE__ */ jsxs(Text$1, {
 				component: "span",
 				size,
 				children: [/* @__PURE__ */ jsx("span", {
@@ -161,7 +160,7 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 					children: ":"
 				})]
 			}),
-			nodeKey !== void 0 && isArrayItem && /* @__PURE__ */ jsxs(Text, {
+			nodeKey !== void 0 && isArrayItem && /* @__PURE__ */ jsxs(Text$1, {
 				component: "span",
 				size,
 				children: [/* @__PURE__ */ jsx("span", {
@@ -172,12 +171,12 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 					children: ":"
 				})]
 			}),
-			hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text, {
+			hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
 				size,
 				style: STYLES.preview,
 				children: "[]"
-			}) : /* @__PURE__ */ jsx(Text, {
+			}) : /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
 				size,
 				style: STYLES.preview,
@@ -217,7 +216,7 @@ const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm"
 	}, [treeData, defaultExpandedDepth]) });
 	const renderValue = useCallback((val, key, path) => {
 		const custom = formatValue?.(key, val, path);
-		if (custom !== void 0) return /* @__PURE__ */ jsx(Text, {
+		if (custom !== void 0) return /* @__PURE__ */ jsx(Text$1, {
 			component: "span",
 			size,
 			style: STYLES.string,
@@ -227,7 +226,7 @@ const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm"
 		});
 		const type = getValueType(val);
 		switch (type) {
-			case "string": return /* @__PURE__ */ jsxs(Text, {
+			case "string": return /* @__PURE__ */ jsxs(Text$1, {
 				style: STYLES.string,
 				component: "span",
 				size,
@@ -239,26 +238,26 @@ const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm"
 					"\""
 				]
 			});
-			case "number": return /* @__PURE__ */ jsx(Text, {
+			case "number": return /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
 				size,
 				style: STYLES.number,
 				children: val
 			});
-			case "boolean": return /* @__PURE__ */ jsx(Text, {
+			case "boolean": return /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
 				size,
 				style: STYLES.boolean,
 				children: String(val)
 			});
 			case "null":
-			case "undefined": return /* @__PURE__ */ jsx(Text, {
+			case "undefined": return /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
 				size,
 				style: STYLES.null,
 				children: type
 			});
-			default: return /* @__PURE__ */ jsx(Text, {
+			default: return /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
 				size,
 				children: String(val)
@@ -288,7 +287,7 @@ const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm"
 		showQuotes,
 		size
 	]);
-	if (treeData.length === 0) return /* @__PURE__ */ jsx(Text, {
+	if (treeData.length === 0) return /* @__PURE__ */ jsx(Text$1, {
 		size,
 		style: STYLES.null,
 		children: data === null ? "null" : data === void 0 ? "undefined" : "{}"
@@ -326,7 +325,6 @@ DialogService.prototype.json = function(data, options) {
 
 //#endregion
 //#region ../../src/demo/components/json/DemoJsonViewer.tsx
-var DemoJsonViewer_exports = /* @__PURE__ */ __exportAll({ default: () => DemoJsonViewer });
 const sampleData = {
 	name: "Sample Project",
 	createdAt: "2024-01-15T10:30:00.000Z",
@@ -427,5 +425,5 @@ const DemoJsonViewer = () => {
 };
 
 //#endregion
-export { DemoJsonViewer_exports as n, DemoJsonViewer as t };
-//# sourceMappingURL=DemoJsonViewer-zeucGKHV.js.map
+export { DemoJsonViewer as default };
+//# sourceMappingURL=DemoJsonViewer-_uokbGaW.js.map

package/dist/demo/DemoJsonViewer-_uokbGaW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoJsonViewer-_uokbGaW.js","names":["Text"],"sources":["../../src/json/components/JsonViewer.tsx","../../src/json/extensions/DialogService.tsx","../../src/demo/components/json/DemoJsonViewer.tsx"],"sourcesContent":["import {\n  ActionIcon,\n  Flex,\n  getTreeExpandedState,\n  type MantineSize,\n  Text,\n  Tree,\n  useTree,\n} from \"@mantine/core\";\nimport {\n  IconCheck,\n  IconChevronDown,\n  IconChevronRight,\n  IconCopy,\n} from \"@tabler/icons-react\";\nimport {\n  type CSSProperties,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\ninterface JsonViewerProps {\n  data: any;\n  /**\n   * Depth level to expand by default (0 = collapsed, Infinity = all expanded)\n   */\n  defaultExpandedDepth?: number;\n  /**\n   * Maximum nesting depth to render\n   */\n  maxDepth?: number;\n  /**\n   * Size variant\n   */\n  size?: MantineSize;\n  /**\n   * Whether to show quotes around keys and strings\n   */\n  showQuotes?: boolean;\n  /**\n   * Show copy button on row hover\n   */\n  showCopyButton?: boolean;\n  /**\n   * Custom value formatter. Return formatted string or undefined to use default.\n   */\n  formatValue?: (\n    key: string | undefined,\n    value: any,\n    path: string[],\n  ) => string | number | undefined;\n}\n\ninterface JsonTreeNode {\n  value: string;\n  label: string;\n  children?: JsonTreeNode[];\n  // Custom properties\n  nodeValue: any;\n  nodeKey: string | undefined;\n  path: string[];\n  isArrayItem: boolean;\n  isRoot?: boolean;\n}\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\n\nconst SIZE_CONFIG: Record<MantineSize, { icon: number; levelOffset: number }> =\n  {\n    xs: { icon: 14, levelOffset: 16 },\n    sm: { icon: 16, levelOffset: 20 },\n    md: { icon: 18, levelOffset: 24 },\n    lg: { icon: 20, levelOffset: 28 },\n    xl: { icon: 22, levelOffset: 32 },\n  };\n\nconst STYLES = {\n  root: {\n    fontFamily: \"var(--mantine-font-family-monospace)\",\n  } satisfies CSSProperties,\n  chevron: {\n    flexShrink: 0,\n    color: \"var(--mantine-color-dimmed)\",\n  } satisfies CSSProperties,\n  key: {\n    color: \"var(--mantine-color-cyan-text)\",\n    fontWeight: 500,\n  } satisfies CSSProperties,\n  colon: {\n    color: \"var(--mantine-color-dimmed)\",\n  } satisfies CSSProperties,\n  string: {\n    color: \"var(--mantine-color-teal-text)\",\n  } satisfies CSSProperties,\n  number: {\n    color: \"var(--mantine-color-blue-text)\",\n  } satisfies CSSProperties,\n  boolean: {\n    color: \"var(--mantine-color-violet-text)\",\n  } satisfies CSSProperties,\n  null: {\n    color: \"var(--mantine-color-dimmed)\",\n    fontStyle: \"italic\",\n  } satisfies CSSProperties,\n  preview: {\n    color: \"var(--mantine-color-dimmed)\",\n  } satisfies CSSProperties,\n};\n\n// =============================================================================\n// HELPERS\n// =============================================================================\n\nconst getValueType = (val: any): string => {\n  if (val === null) return \"null\";\n  if (val === undefined) return \"undefined\";\n  if (Array.isArray(val)) return \"array\";\n  return typeof val;\n};\n\n// Convert JSON to tree data structure\nfunction buildTreeNodes(\n  data: any,\n  path: string[] = [],\n  key?: string,\n  isArrayItem = false,\n  maxDepth = 10,\n): JsonTreeNode | null {\n  const currentPath = key !== undefined ? [...path, key] : path;\n  const nodeId = currentPath.length > 0 ? currentPath.join(\".\") : \"root\";\n\n  if (currentPath.length > maxDepth) {\n    return {\n      value: nodeId,\n      label: key ?? \"\",\n      nodeValue: data,\n      nodeKey: key,\n      path: currentPath,\n      isArrayItem,\n    };\n  }\n\n  const type = getValueType(data);\n\n  if (type === \"object\" || type === \"array\") {\n    const entries =\n      type === \"array\"\n        ? (data as any[]).map((v, i) => [String(i), v] as const)\n        : Object.entries(data);\n\n    const children = entries\n      .map(([k, v]) =>\n        buildTreeNodes(v, currentPath, k, type === \"array\", maxDepth),\n      )\n      .filter((n): n is JsonTreeNode => n !== null);\n\n    return {\n      value: nodeId,\n      label: key ?? \"\",\n      nodeValue: data,\n      nodeKey: key,\n      path: currentPath,\n      isArrayItem,\n      children: children.length > 0 ? children : undefined,\n    };\n  }\n\n  return {\n    value: nodeId,\n    label: key ?? \"\",\n    nodeValue: data,\n    nodeKey: key,\n    path: currentPath,\n    isArrayItem,\n  };\n}\n\n// Get all expandable node IDs up to a certain depth\nfunction getExpandedIds(\n  nodes: JsonTreeNode[],\n  targetDepth: number,\n  currentDepth = 0,\n): string[] {\n  if (currentDepth >= targetDepth) return [];\n  const ids: string[] = [];\n  for (const node of nodes) {\n    if (node.children) {\n      ids.push(node.value);\n      ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));\n    }\n  }\n  return ids;\n}\n\n// =============================================================================\n// COPY BUTTON COMPONENT\n// =============================================================================\n\nconst CopyButton = ({\n  value,\n  iconSize,\n}: {\n  value: string;\n  iconSize: number;\n}) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      navigator.clipboard.writeText(value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    },\n    [value],\n  );\n\n  return (\n    <ActionIcon\n      size={iconSize + 4}\n      variant=\"transparent\"\n      c={copied ? \"green\" : \"dimmed\"}\n      onClick={handleCopy}\n      className=\"alepha-json-viewer-copy\"\n    >\n      {copied ? <IconCheck size={iconSize} /> : <IconCopy size={iconSize} />}\n    </ActionIcon>\n  );\n};\n\n// =============================================================================\n// ROW NODE COMPONENT\n// =============================================================================\n\ninterface RowNodeProps {\n  node: JsonTreeNode;\n  expanded: boolean;\n  hasChildren: boolean;\n  elementProps: any;\n  size: MantineSize;\n  config: { icon: number; levelOffset: number };\n  showQuotes: boolean;\n  showCopyButton: boolean;\n  renderValue: (val: any, key: string | undefined, path: string[]) => ReactNode;\n}\n\nconst RowNode = ({\n  node,\n  expanded,\n  hasChildren,\n  elementProps,\n  size,\n  config,\n  showQuotes,\n  showCopyButton,\n  renderValue,\n}: RowNodeProps) => {\n  const { nodeValue, nodeKey, path, isArrayItem, isRoot } = node;\n  const type = getValueType(nodeValue);\n  const isExpandable = type === \"object\" || type === \"array\";\n\n  const getPreview = () => {\n    if (!isExpandable) return null;\n    const entries = type === \"array\" ? nodeValue : Object.keys(nodeValue);\n    const count = entries.length;\n    const label = type === \"array\" ? \"item\" : \"key\";\n\n    // For root node or collapsed nodes, show the count\n    if (!expanded) {\n      return (\n        <Text fs={\"italic\"} component=\"span\" size={size} style={STYLES.preview}>\n          {count === 0\n            ? type === \"array\"\n              ? \"[]\"\n              : \"{}\"\n            : type === \"array\"\n              ? `[ ${count} ${count === 1 ? label : `${label}s`} ]`\n              : `{ ${count} ${count === 1 ? label : `${label}s`} }`}\n        </Text>\n      );\n    }\n\n    return null;\n  };\n\n  const getCopyValue = () =>\n    isExpandable ? JSON.stringify(nodeValue, null, 2) : String(nodeValue ?? \"\");\n\n  return (\n    <Flex\n      gap={6}\n      wrap=\"nowrap\"\n      {...elementProps}\n      className={`alepha-json-viewer-row ${elementProps.className || \"\"}`}\n    >\n      {hasChildren ? (\n        expanded ? (\n          <IconChevronDown size={config.icon} style={STYLES.chevron} />\n        ) : (\n          <IconChevronRight size={config.icon} style={STYLES.chevron} />\n        )\n      ) : (\n        <span style={{ width: config.icon, flexShrink: 0 }} />\n      )}\n\n      {nodeKey !== undefined && !isArrayItem && (\n        <Text component=\"span\" size={size}>\n          <span style={STYLES.key}>\n            {showQuotes ? `\"${nodeKey}\"` : nodeKey}\n          </span>\n          <span style={STYLES.colon}>:</span>\n        </Text>\n      )}\n\n      {nodeKey !== undefined && isArrayItem && (\n        <Text component=\"span\" size={size}>\n          <span style={STYLES.key}>{nodeKey}</span>\n          <span style={STYLES.colon}>:</span>\n        </Text>\n      )}\n\n      {hasChildren ? (\n        getPreview()\n      ) : isExpandable ? (\n        type === \"array\" ? (\n          <Text component=\"span\" size={size} style={STYLES.preview}>\n            []\n          </Text>\n        ) : (\n          <Text component=\"span\" size={size} style={STYLES.preview}>\n            {\"{}\"}\n          </Text>\n        )\n      ) : (\n        renderValue(nodeValue, nodeKey, path)\n      )}\n\n      {showCopyButton && (\n        <CopyButton value={getCopyValue()} iconSize={config.icon} />\n      )}\n    </Flex>\n  );\n};\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const JsonViewer = ({\n  data,\n  defaultExpandedDepth = 2,\n  maxDepth = 10,\n  size = \"sm\",\n  showQuotes = false,\n  showCopyButton = true,\n  formatValue,\n}: JsonViewerProps) => {\n  const config = SIZE_CONFIG[size] || SIZE_CONFIG.sm;\n\n  // Build tree data from JSON with root wrapper\n  const treeData = useMemo(() => {\n    const type = getValueType(data);\n\n    // For objects and arrays, create a root node wrapper\n    if (type === \"object\" || type === \"array\") {\n      const entries =\n        type === \"array\"\n          ? (data as any[]).map((v, i) => [String(i), v] as const)\n          : Object.entries(data);\n      const children = entries\n        .map(([k, v]) => buildTreeNodes(v, [], k, type === \"array\", maxDepth))\n        .filter((n): n is JsonTreeNode => n !== null);\n\n      const rootNode: JsonTreeNode = {\n        value: \"root\",\n        label: \"\",\n        nodeValue: data,\n        nodeKey: undefined,\n        path: [],\n        isArrayItem: false,\n        isRoot: true,\n        children: children.length > 0 ? children : undefined,\n      };\n      return [rootNode];\n    }\n\n    // For primitives, just show the value directly\n    const node = buildTreeNodes(data, [], undefined, false, maxDepth);\n    return node ? [node] : [];\n  }, [data, maxDepth]);\n\n  // Compute initial expanded state (root is always expanded by default unless depth is 0)\n  const initialExpandedState = useMemo(() => {\n    if (defaultExpandedDepth === 0) return {};\n    if (defaultExpandedDepth === Infinity) {\n      return getTreeExpandedState(treeData, \"*\");\n    }\n    // Add 1 to depth to account for root node\n    const ids = getExpandedIds(treeData, defaultExpandedDepth + 1);\n    return getTreeExpandedState(treeData, ids);\n  }, [treeData, defaultExpandedDepth]);\n\n  const tree = useTree({ initialExpandedState });\n\n  // Render value based on type\n  const renderValue = useCallback(\n    (val: any, key: string | undefined, path: string[]): ReactNode => {\n      const custom = formatValue?.(key, val, path);\n      if (custom !== undefined) {\n        return (\n          <Text\n            component=\"span\"\n            size={size}\n            style={STYLES.string}\n            className=\"alepha-json-viewer-value\"\n            title={String(val)}\n          >\n            {custom}\n          </Text>\n        );\n      }\n\n      const type = getValueType(val);\n      switch (type) {\n        case \"string\": {\n          return (\n            <Text\n              style={STYLES.string}\n              component=\"span\"\n              size={size}\n              className=\"alepha-json-viewer-value\"\n              title={val}\n            >\n              \"{val}\"\n            </Text>\n          );\n        }\n        case \"number\":\n          return (\n            <Text component=\"span\" size={size} style={STYLES.number}>\n              {val}\n            </Text>\n          );\n        case \"boolean\":\n          return (\n            <Text component=\"span\" size={size} style={STYLES.boolean}>\n              {String(val)}\n            </Text>\n          );\n        case \"null\":\n        case \"undefined\":\n          return (\n            <Text component=\"span\" size={size} style={STYLES.null}>\n              {type}\n            </Text>\n          );\n        default:\n          return (\n            <Text component=\"span\" size={size}>\n              {String(val)}\n            </Text>\n          );\n      }\n    },\n    [formatValue, showQuotes, size],\n  );\n\n  // Render tree node\n  const renderNode = useCallback(\n    ({\n      node,\n      expanded,\n      hasChildren,\n      elementProps,\n    }: {\n      node: JsonTreeNode;\n      expanded: boolean;\n      hasChildren: boolean;\n      elementProps: any;\n    }): ReactNode => {\n      return (\n        <RowNode\n          node={node}\n          expanded={expanded}\n          hasChildren={hasChildren}\n          elementProps={elementProps}\n          size={size}\n          config={config}\n          showQuotes={showQuotes}\n          showCopyButton={showCopyButton}\n          renderValue={renderValue}\n        />\n      );\n    },\n    [config, renderValue, showCopyButton, showQuotes, size],\n  );\n\n  if (treeData.length === 0) {\n    return (\n      <Text size={size} style={STYLES.null}>\n        {data === null ? \"null\" : data === undefined ? \"undefined\" : \"{}\"}\n      </Text>\n    );\n  }\n\n  return (\n    <Tree\n      data={treeData}\n      tree={tree}\n      levelOffset={config.levelOffset}\n      expandOnClick\n      renderNode={renderNode as any}\n      styles={{ root: STYLES.root }}\n    />\n  );\n};\n\nexport default JsonViewer;\n","import { type BaseDialogOptions, DialogService, ui } from \"@alepha/ui\";\nimport { Flex } from \"@mantine/core\";\nimport { JsonViewer } from \"../components/JsonViewer.tsx\";\n\ndeclare module \"@alepha/ui\" {\n  interface DialogService {\n    /**\n     * Opens a JSON viewer dialog.\n     *\n     * @param data - The JSON data to display.\n     * @param options - Additional dialog options.\n     */\n    json(data?: any, options?: BaseDialogOptions): void;\n  }\n}\n\nDialogService.prototype.json = function (\n  data?: any,\n  options?: BaseDialogOptions,\n) {\n  this.open({\n    size: \"lg\",\n    title: options?.title || \"Json Viewer\",\n    ...options,\n    content: (\n      <Flex bdrs={\"md\"} w={\"100%\"} flex={1} p={\"sm\"} bg={ui.colors.surface}>\n        <JsonViewer size={\"xs\"} data={data} />\n      </Flex>\n    ),\n  });\n};\n","import { JsonViewer } from \"@alepha/ui/json\";\nimport { t } from \"alepha\";\nimport { useI18n } from \"alepha/react/i18n\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst sampleData = {\n  name: \"Sample Project\",\n  createdAt: \"2024-01-15T10:30:00.000Z\",\n  updatedAt: \"2024-06-20T14:45:30.000Z\",\n  count: 42,\n  price: 99.99,\n  isActive: true,\n  nullValue: null,\n  tags: [\"typescript\", \"react\", \"json\"],\n  nested: {\n    level1: {\n      level2: {\n        deepValue: \"Found me!\",\n      },\n    },\n  },\n  users: [\n    { id: 1, name: \"Alice\", role: \"admin\" },\n    { id: 2, name: \"Bob\", role: \"user\" },\n  ],\n  emptyArray: [],\n  emptyObject: {},\n  longText:\n    \"This is a very long text that should be truncated when it exceeds the maximum string length configured in the viewer options.\",\n};\n\nconst $control = {\n  switch: true,\n  slider: true,\n  segmented: true,\n};\n\nconst jsonViewerSchema = t.object({\n  showQuotes: t.boolean({\n    title: \"Show Quotes\",\n    default: false,\n    $control: {\n      switch: true,\n    },\n  }),\n  showCopyButton: t.boolean({\n    title: \"Show Copy Button\",\n    default: true,\n    $control: {\n      switch: true,\n    },\n  }),\n  useFormatValue: t.boolean({\n    title: \"Format Dates\",\n    default: true,\n    $control: {\n      switch: true,\n    },\n  }),\n  defaultExpandedDepth: t.integer({\n    title: \"Expand Depth\",\n    default: 2,\n    minimum: 0,\n    maximum: 10,\n    $control: { slider: true },\n  }),\n  maxDepth: t.integer({\n    title: \"Max Depth\",\n    default: 10,\n    minimum: 1,\n    maximum: 20,\n    $control: { slider: true },\n  }),\n  size: t.enum([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"], {\n    title: \"Size\",\n    default: \"sm\",\n    $control: {\n      segmented: true,\n    },\n  }),\n});\n\nconst DemoJsonViewer = () => {\n  const i18n = useI18n();\n  const formatValue = (\n    key: string | undefined,\n    value: any,\n  ): string | number | undefined => {\n    if (key === \"createdAt\") {\n      return i18n.l(value, { date: \"LLL\" });\n    }\n    if (key === \"updatedAt\") {\n      return i18n.l(value, { date: \"fromNow\" });\n    }\n    return undefined;\n  };\n\n  return (\n    <Showcase\n      title=\"JsonViewer\"\n      schema={jsonViewerSchema}\n      initialValues={{\n        showQuotes: false,\n        showCopyButton: true,\n        useFormatValue: true,\n        defaultExpandedDepth: 2,\n        maxDepth: 10,\n        size: \"sm\",\n      }}\n      columns={1}\n    >\n      {(props) => (\n        <JsonViewer\n          key={props.defaultExpandedDepth}\n          data={sampleData}\n          defaultExpandedDepth={props.defaultExpandedDepth}\n          showQuotes={props.showQuotes}\n          showCopyButton={props.showCopyButton}\n          formatValue={props.useFormatValue ? formatValue : undefined}\n          maxDepth={props.maxDepth}\n          size={props.size}\n        />\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoJsonViewer;\n"],"mappings":"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"}

package/dist/demo/{DemoLayout-PhgbAAiQ.js → DemoLayout-DHVoacE6.js}

@@ -1,11 +1,9 @@
-import { t as __exportAll } from "./rolldown-runtime-CjeV3_4I.js";
 import { ActionButton, AlephaMantineProvider, DashboardShell } from "@alepha/ui";
 import { IconArrowLeft } from "@tabler/icons-react";
 import { useRouter } from "alepha/react/router";
 import { jsx } from "react/jsx-runtime";
 
 //#region ../../src/demo/components/DemoLayout.tsx
-var DemoLayout_exports = /* @__PURE__ */ __exportAll({ default: () => DemoLayout });
 const DemoLayout = () => {
 	const router = useRouter();
 	return /* @__PURE__ */ jsx(AlephaMantineProvider, { children: /* @__PURE__ */ jsx(DashboardShell, {
@@ -44,5 +42,5 @@ const DemoLayout = () => {
 };
 
 //#endregion
-export { DemoLayout_exports as n, DemoLayout as t };
-//# sourceMappingURL=DemoLayout-PhgbAAiQ.js.map
+export { DemoLayout as default };
+//# sourceMappingURL=DemoLayout-DHVoacE6.js.map

package/dist/demo/{DemoLayout-PhgbAAiQ.js.map → DemoLayout-DHVoacE6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DemoLayout-PhgbAAiQ.js","names":[],"sources":["../../src/demo/components/DemoLayout.tsx"],"sourcesContent":["import {\n  ActionButton,\n  AlephaMantineProvider,\n  DashboardShell,\n} from \"@alepha/ui\";\nimport { IconArrowLeft } from \"@tabler/icons-react\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { DemoRouter } from \"../DemoRouter.ts\";\n\nconst DemoLayout = () => {\n  const router = useRouter<DemoRouter>();\n  return (\n    <AlephaMantineProvider>\n      <DashboardShell\n        appShellMainProps={{ h: \"100%\" }}\n        appBarProps={{\n          items: [\n            {\n              element: (\n                <ActionButton variant=\"subtle\" icon={IconArrowLeft} href=\"/\" />\n              ),\n              position: \"left\",\n            },\n            {\n              type: \"dark\",\n              position: \"right\",\n            },\n          ],\n        }}\n        sidebarProps={{\n          items: [\n            router.node(\"demoHome\"),\n            {\n              ...router.node(\"demoCore\"),\n              children: [\n                router.node(\"demoTypeForm\"),\n                router.node(\"demoSidebar\"),\n                router.node(\"demoDataTable\"),\n              ],\n            },\n            {\n              ...router.node(\"demoJson\"),\n              children: [router.node(\"demoJsonViewer\")],\n            },\n            {\n              ...router.node(\"demoAuth\"),\n              children: [router.node(\"demoLogin\"), router.node(\"demoRegister\")],\n            },\n          ],\n        }}\n      />\n    </AlephaMantineProvider>\n  );\n};\n\nexport default DemoLayout;\n"],"mappings":";;;;;;;;AASA,MAAM,mBAAmB;CACvB,MAAM,SAAS,WAAuB;AACtC,QACE,oBAAC,mCACC,oBAAC;EACC,mBAAmB,EAAE,GAAG,QAAQ;EAChC,aAAa,EACX,OAAO,CACL;GACE,SACE,oBAAC;IAAa,SAAQ;IAAS,MAAM;IAAe,MAAK;KAAM;GAEjE,UAAU;GACX,EACD;GACE,MAAM;GACN,UAAU;GACX,CACF,EACF;EACD,cAAc,EACZ,OAAO;GACL,OAAO,KAAK,WAAW;GACvB;IACE,GAAG,OAAO,KAAK,WAAW;IAC1B,UAAU;KACR,OAAO,KAAK,eAAe;KAC3B,OAAO,KAAK,cAAc;KAC1B,OAAO,KAAK,gBAAgB;KAC7B;IACF;GACD;IACE,GAAG,OAAO,KAAK,WAAW;IAC1B,UAAU,CAAC,OAAO,KAAK,iBAAiB,CAAC;IAC1C;GACD;IACE,GAAG,OAAO,KAAK,WAAW;IAC1B,UAAU,CAAC,OAAO,KAAK,YAAY,EAAE,OAAO,KAAK,eAAe,CAAC;IAClE;GACF,EACF;GACD,GACoB"}
+{"version":3,"file":"DemoLayout-DHVoacE6.js","names":[],"sources":["../../src/demo/components/DemoLayout.tsx"],"sourcesContent":["import {\n  ActionButton,\n  AlephaMantineProvider,\n  DashboardShell,\n} from \"@alepha/ui\";\nimport { IconArrowLeft } from \"@tabler/icons-react\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { DemoRouter } from \"../DemoRouter.ts\";\n\nconst DemoLayout = () => {\n  const router = useRouter<DemoRouter>();\n  return (\n    <AlephaMantineProvider>\n      <DashboardShell\n        appShellMainProps={{ h: \"100%\" }}\n        appBarProps={{\n          items: [\n            {\n              element: (\n                <ActionButton variant=\"subtle\" icon={IconArrowLeft} href=\"/\" />\n              ),\n              position: \"left\",\n            },\n            {\n              type: \"dark\",\n              position: \"right\",\n            },\n          ],\n        }}\n        sidebarProps={{\n          items: [\n            router.node(\"demoHome\"),\n            {\n              ...router.node(\"demoCore\"),\n              children: [\n                router.node(\"demoTypeForm\"),\n                router.node(\"demoSidebar\"),\n                router.node(\"demoDataTable\"),\n              ],\n            },\n            {\n              ...router.node(\"demoJson\"),\n              children: [router.node(\"demoJsonViewer\")],\n            },\n            {\n              ...router.node(\"demoAuth\"),\n              children: [router.node(\"demoLogin\"), router.node(\"demoRegister\")],\n            },\n          ],\n        }}\n      />\n    </AlephaMantineProvider>\n  );\n};\n\nexport default DemoLayout;\n"],"mappings":";;;;;;AASA,MAAM,mBAAmB;CACvB,MAAM,SAAS,WAAuB;AACtC,QACE,oBAAC,mCACC,oBAAC;EACC,mBAAmB,EAAE,GAAG,QAAQ;EAChC,aAAa,EACX,OAAO,CACL;GACE,SACE,oBAAC;IAAa,SAAQ;IAAS,MAAM;IAAe,MAAK;KAAM;GAEjE,UAAU;GACX,EACD;GACE,MAAM;GACN,UAAU;GACX,CACF,EACF;EACD,cAAc,EACZ,OAAO;GACL,OAAO,KAAK,WAAW;GACvB;IACE,GAAG,OAAO,KAAK,WAAW;IAC1B,UAAU;KACR,OAAO,KAAK,eAAe;KAC3B,OAAO,KAAK,cAAc;KAC1B,OAAO,KAAK,gBAAgB;KAC7B;IACF;GACD;IACE,GAAG,OAAO,KAAK,WAAW;IAC1B,UAAU,CAAC,OAAO,KAAK,iBAAiB,CAAC;IAC1C;GACD;IACE,GAAG,OAAO,KAAK,WAAW;IAC1B,UAAU,CAAC,OAAO,KAAK,YAAY,EAAE,OAAO,KAAK,eAAe,CAAC;IAClE;GACF,EACF;GACD,GACoB"}