@alepha/ui 0.18.2 → 0.19.0

package/dist/demo/DemoDataTable-Hwf_UUni.js

@@ -0,0 +1,361 @@
+import { l as Text$1, m as useDialog, r as DataTable } from "./core-DRtQklr3.js";
+import { t as Showcase } from "./Showcase-D49Wud2v.js";
+import { t } from "alepha";
+import { Badge, Code, Flex, Paper } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconDownload, IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+//#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 DataTablePreview = (props) => {
+	const dialog = useDialog();
+	return /* @__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: () => dialog.alert({ message: "Add user clicked" })
+		}],
+		checkboxActions: [{
+			label: "Export Selected",
+			icon: /* @__PURE__ */ jsx(IconDownload, { size: 14 }),
+			intent: "primary",
+			onClick: ({ selectedItems, clearSelection }) => {
+				dialog.alert({ message: `Exporting ${selectedItems.length} users` });
+				clearSelection();
+			}
+		}, {
+			label: "Delete Selected",
+			icon: /* @__PURE__ */ jsx(IconTrash, { size: 14 }),
+			intent: "danger",
+			onClick: ({ selectedItems, clearSelection }) => {
+				dialog.alert({ message: `Deleting ${selectedItems.length} users` });
+				clearSelection();
+			}
+		}],
+		columns: {
+			id: {
+				label: "ID",
+				value: (u) => /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					children: u.id
+				}),
+				sortable: true,
+				fit: true
+			},
+			name: {
+				label: "Name",
+				value: (u) => /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					fw: 500,
+					children: u.name
+				}),
+				sortable: true
+			},
+			email: {
+				label: "Email",
+				value: (u) => /* @__PURE__ */ jsx(Text$1, {
+					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$1, {
+					size: "xs",
+					c: "dimmed",
+					lineClamp: 1,
+					children: u.notes ?? "—"
+				})
+			}
+		},
+		rowActions: (u) => [{
+			label: "Edit",
+			icon: IconEdit,
+			color: "blue",
+			onClick: () => dialog.alert({ message: `Edit ${u.name}` })
+		}, {
+			label: "Delete",
+			icon: IconTrash,
+			color: "red",
+			onClick: () => dialog.alert({ message: `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$1, {
+					size: "xs",
+					c: "dimmed",
+					tt: "uppercase",
+					fw: 600,
+					children: "Notes"
+				}), /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					children: u.notes
+				})]
+			})
+		} : void 0,
+		drawer: props.withDrawer ? (u) => /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			gap: "md",
+			children: [
+				/* @__PURE__ */ jsx(Text$1, {
+					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$1, {
+									size: "sm",
+									c: "dimmed",
+									w: 60,
+									children: "Email"
+								}), /* @__PURE__ */ jsx(Text$1, {
+									size: "sm",
+									children: u.email
+								})]
+							}),
+							/* @__PURE__ */ jsxs(Flex, {
+								gap: "xs",
+								children: [/* @__PURE__ */ jsx(Text$1, {
+									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$1, {
+									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$1, {
+						size: "sm",
+						fw: 600,
+						mb: "xs",
+						children: "Notes"
+					}), /* @__PURE__ */ jsx(Text$1, {
+						size: "sm",
+						children: u.notes
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Paper, {
+					p: "sm",
+					radius: "md",
+					withBorder: true,
+					children: [/* @__PURE__ */ jsx(Text$1, {
+						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));
+};
+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(DataTablePreview, { ...props })
+	});
+};
+//#endregion
+export { DemoDataTable as default };
+
+//# sourceMappingURL=DemoDataTable-Hwf_UUni.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DemoDataTable-Hwf_UUni.js","names":["Text"],"sources":["../../src/demo/components/core/DemoDataTable.tsx"],"sourcesContent":["import { DataTable, Text, useDialog } 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\ninterface DataTablePreviewProps {\n  withCheckbox: boolean;\n  withExport: boolean;\n  withPanel: boolean;\n  withDrawer: boolean;\n  defaultSize: number;\n}\n\nconst DataTablePreview = (props: DataTablePreviewProps) => {\n  const dialog = useDialog();\n\n  return (\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: () => dialog.alert({ message: \"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            dialog.alert({\n              message: `Exporting ${selectedItems.length} users`,\n            });\n            clearSelection();\n          },\n        },\n        {\n          label: \"Delete Selected\",\n          icon: <IconTrash size={14} />,\n          intent: \"danger\",\n          onClick: ({ selectedItems, clearSelection }) => {\n            dialog.alert({\n              message: `Deleting ${selectedItems.length} users`,\n            });\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      }}\n      rowActions={(u) => [\n        {\n          label: \"Edit\",\n          icon: IconEdit,\n          color: \"blue\",\n          onClick: () => dialog.alert({ message: `Edit ${u.name}` }),\n        },\n        {\n          label: \"Delete\",\n          icon: IconTrash,\n          color: \"red\",\n          onClick: () => dialog.alert({ message: `Delete ${u.name}` }),\n          visible: u.role !== \"admin\",\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};\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) => <DataTablePreview {...(props as DataTablePreviewProps)} />}\n    </Showcase>\n  );\n};\n\nexport default DemoDataTable;\n"],"mappings":"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"}

package/dist/demo/{DemoDialog-DW8QEvD1.js → DemoDialog-B01OMVRd.js}

@@ -1,7 +1,6 @@
-import { f as Flex, h as ActionButton, m as useDialog, s as Text } from "./core-B7LNjM78.js";
+import { f as Flex, h as ActionButton, l as Text, m as useDialog } from "./core-DRtQklr3.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconAlertCircle, IconMessage, IconQuestionMark } from "@tabler/icons-react";
-
 //#region ../../src/demo/components/layout/DemoDialog.tsx
 const DemoDialog = () => {
 	const dialog = useDialog();
@@ -95,7 +94,7 @@ const DemoDialog = () => {
 		]
 	});
 };
-
 //#endregion
 export { DemoDialog as default };
-//# sourceMappingURL=DemoDialog-DW8QEvD1.js.map
+
+//# sourceMappingURL=DemoDialog-B01OMVRd.js.map

package/dist/demo/{DemoDialog-DW8QEvD1.js.map → DemoDialog-B01OMVRd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DemoDialog-DW8QEvD1.js","names":[],"sources":["../../src/demo/components/layout/DemoDialog.tsx"],"sourcesContent":["import { ActionButton, Flex, Text, useDialog } from \"@alepha/ui\";\nimport {\n  IconAlertCircle,\n  IconMessage,\n  IconQuestionMark,\n} from \"@tabler/icons-react\";\n\nconst DemoDialog = () => {\n  const dialog = useDialog();\n\n  return (\n    <Flex col gap=\"xl\" p=\"xl\">\n      <Text bold size=\"lg\">\n        Dialog Service\n      </Text>\n      <Text muted small>\n        Programmatic dialogs via the DialogService. No need to mount modal\n        components — just call the service.\n      </Text>\n\n      <Flex gap=\"md\" wrap=\"wrap\">\n        <ActionButton\n          icon={IconAlertCircle}\n          variant=\"light\"\n          onClick={() =>\n            dialog.alert({\n              title: \"Heads up\",\n              message: \"This is an informational alert dialog.\",\n            })\n          }\n        >\n          Alert\n        </ActionButton>\n\n        <ActionButton\n          icon={IconQuestionMark}\n          variant=\"light\"\n          intent=\"warning\"\n          onClick={async () => {\n            const ok = await dialog.confirm({\n              title: \"Confirm action\",\n              message: \"Are you sure you want to proceed?\",\n            });\n            if (ok) {\n              dialog.alert({\n                title: \"Confirmed\",\n                message: \"You confirmed the action.\",\n              });\n            }\n          }}\n        >\n          Confirm\n        </ActionButton>\n\n        <ActionButton\n          icon={IconMessage}\n          variant=\"light\"\n          intent=\"primary\"\n          onClick={async () => {\n            const value = await dialog.prompt({\n              title: \"Enter a value\",\n              message: \"What is your name?\",\n              placeholder: \"John Doe\",\n            });\n            if (value) {\n              dialog.alert({\n                title: \"Hello\",\n                message: `Nice to meet you, ${value}!`,\n              });\n            }\n          }}\n        >\n          Prompt\n        </ActionButton>\n      </Flex>\n\n      <Flex col gap=\"md\">\n        <Text bold small uppercase muted>\n          Variants\n        </Text>\n        <Flex gap=\"md\" wrap=\"wrap\">\n          <ActionButton\n            variant=\"light\"\n            intent=\"danger\"\n            onClick={() =>\n              dialog.confirm({\n                title: \"Delete item\",\n                message:\n                  \"This action cannot be undone. Are you sure you want to delete this item?\",\n                confirmColor: \"red\",\n                confirmLabel: \"Delete\",\n              })\n            }\n          >\n            Danger Confirm\n          </ActionButton>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default DemoDialog;\n"],"mappings":";;;;;AAOA,MAAM,mBAAmB;CACvB,MAAM,SAAS,WAAW;AAE1B,QACE,qBAAC;EAAK;EAAI,KAAI;EAAK,GAAE;;GACnB,oBAAC;IAAK;IAAK,MAAK;cAAK;KAEd;GACP,oBAAC;IAAK;IAAM;cAAM;KAGX;GAEP,qBAAC;IAAK,KAAI;IAAK,MAAK;;KAClB,oBAAC;MACC,MAAM;MACN,SAAQ;MACR,eACE,OAAO,MAAM;OACX,OAAO;OACP,SAAS;OACV,CAAC;gBAEL;OAEc;KAEf,oBAAC;MACC,MAAM;MACN,SAAQ;MACR,QAAO;MACP,SAAS,YAAY;AAKnB,WAJW,MAAM,OAAO,QAAQ;QAC9B,OAAO;QACP,SAAS;QACV,CAAC,CAEA,QAAO,MAAM;QACX,OAAO;QACP,SAAS;QACV,CAAC;;gBAGP;OAEc;KAEf,oBAAC;MACC,MAAM;MACN,SAAQ;MACR,QAAO;MACP,SAAS,YAAY;OACnB,MAAM,QAAQ,MAAM,OAAO,OAAO;QAChC,OAAO;QACP,SAAS;QACT,aAAa;QACd,CAAC;AACF,WAAI,MACF,QAAO,MAAM;QACX,OAAO;QACP,SAAS,qBAAqB,MAAM;QACrC,CAAC;;gBAGP;OAEc;;KACV;GAEP,qBAAC;IAAK;IAAI,KAAI;eACZ,oBAAC;KAAK;KAAK;KAAM;KAAU;eAAM;MAE1B,EACP,oBAAC;KAAK,KAAI;KAAK,MAAK;eAClB,oBAAC;MACC,SAAQ;MACR,QAAO;MACP,eACE,OAAO,QAAQ;OACb,OAAO;OACP,SACE;OACF,cAAc;OACd,cAAc;OACf,CAAC;gBAEL;OAEc;MACV;KACF;;GACF"}
+{"version":3,"file":"DemoDialog-B01OMVRd.js","names":[],"sources":["../../src/demo/components/layout/DemoDialog.tsx"],"sourcesContent":["import { ActionButton, Flex, Text, useDialog } from \"@alepha/ui\";\nimport {\n  IconAlertCircle,\n  IconMessage,\n  IconQuestionMark,\n} from \"@tabler/icons-react\";\n\nconst DemoDialog = () => {\n  const dialog = useDialog();\n\n  return (\n    <Flex col gap=\"xl\" p=\"xl\">\n      <Text bold size=\"lg\">\n        Dialog Service\n      </Text>\n      <Text muted small>\n        Programmatic dialogs via the DialogService. No need to mount modal\n        components — just call the service.\n      </Text>\n\n      <Flex gap=\"md\" wrap=\"wrap\">\n        <ActionButton\n          icon={IconAlertCircle}\n          variant=\"light\"\n          onClick={() =>\n            dialog.alert({\n              title: \"Heads up\",\n              message: \"This is an informational alert dialog.\",\n            })\n          }\n        >\n          Alert\n        </ActionButton>\n\n        <ActionButton\n          icon={IconQuestionMark}\n          variant=\"light\"\n          intent=\"warning\"\n          onClick={async () => {\n            const ok = await dialog.confirm({\n              title: \"Confirm action\",\n              message: \"Are you sure you want to proceed?\",\n            });\n            if (ok) {\n              dialog.alert({\n                title: \"Confirmed\",\n                message: \"You confirmed the action.\",\n              });\n            }\n          }}\n        >\n          Confirm\n        </ActionButton>\n\n        <ActionButton\n          icon={IconMessage}\n          variant=\"light\"\n          intent=\"primary\"\n          onClick={async () => {\n            const value = await dialog.prompt({\n              title: \"Enter a value\",\n              message: \"What is your name?\",\n              placeholder: \"John Doe\",\n            });\n            if (value) {\n              dialog.alert({\n                title: \"Hello\",\n                message: `Nice to meet you, ${value}!`,\n              });\n            }\n          }}\n        >\n          Prompt\n        </ActionButton>\n      </Flex>\n\n      <Flex col gap=\"md\">\n        <Text bold small uppercase muted>\n          Variants\n        </Text>\n        <Flex gap=\"md\" wrap=\"wrap\">\n          <ActionButton\n            variant=\"light\"\n            intent=\"danger\"\n            onClick={() =>\n              dialog.confirm({\n                title: \"Delete item\",\n                message:\n                  \"This action cannot be undone. Are you sure you want to delete this item?\",\n                confirmColor: \"red\",\n                confirmLabel: \"Delete\",\n              })\n            }\n          >\n            Danger Confirm\n          </ActionButton>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default DemoDialog;\n"],"mappings":";;;;AAOA,MAAM,mBAAmB;CACvB,MAAM,SAAS,WAAW;AAE1B,QACE,qBAAC,MAAD;EAAM,KAAA;EAAI,KAAI;EAAK,GAAE;YAArB;GACE,oBAAC,MAAD;IAAM,MAAA;IAAK,MAAK;cAAK;IAEd,CAAA;GACP,oBAAC,MAAD;IAAM,OAAA;IAAM,OAAA;cAAM;IAGX,CAAA;GAEP,qBAAC,MAAD;IAAM,KAAI;IAAK,MAAK;cAApB;KACE,oBAAC,cAAD;MACE,MAAM;MACN,SAAQ;MACR,eACE,OAAO,MAAM;OACX,OAAO;OACP,SAAS;OACV,CAAC;gBAEL;MAEc,CAAA;KAEf,oBAAC,cAAD;MACE,MAAM;MACN,SAAQ;MACR,QAAO;MACP,SAAS,YAAY;AAKnB,WAJW,MAAM,OAAO,QAAQ;QAC9B,OAAO;QACP,SAAS;QACV,CAAC,CAEA,QAAO,MAAM;QACX,OAAO;QACP,SAAS;QACV,CAAC;;gBAGP;MAEc,CAAA;KAEf,oBAAC,cAAD;MACE,MAAM;MACN,SAAQ;MACR,QAAO;MACP,SAAS,YAAY;OACnB,MAAM,QAAQ,MAAM,OAAO,OAAO;QAChC,OAAO;QACP,SAAS;QACT,aAAa;QACd,CAAC;AACF,WAAI,MACF,QAAO,MAAM;QACX,OAAO;QACP,SAAS,qBAAqB,MAAM;QACrC,CAAC;;gBAGP;MAEc,CAAA;KACV;;GAEP,qBAAC,MAAD;IAAM,KAAA;IAAI,KAAI;cAAd,CACE,oBAAC,MAAD;KAAM,MAAA;KAAK,OAAA;KAAM,WAAA;KAAU,OAAA;eAAM;KAE1B,CAAA,EACP,oBAAC,MAAD;KAAM,KAAI;KAAK,MAAK;eAClB,oBAAC,cAAD;MACE,SAAQ;MACR,QAAO;MACP,eACE,OAAO,QAAQ;OACb,OAAO;OACP,SACE;OACF,cAAc;OACd,cAAc;OACf,CAAC;gBAEL;MAEc,CAAA;KACV,CAAA,CACF;;GACF"}

package/dist/demo/{DemoFlex-CAhLUanT.js → DemoFlex-870PEl0V.js}

@@ -1,8 +1,7 @@
-import { f as Flex, s as Text } from "./core-B7LNjM78.js";
-import { t as Showcase } from "./Showcase-BtEU0pY9.js";
+import { f as Flex, l as Text } from "./core-DRtQklr3.js";
+import { t as Showcase } from "./Showcase-D49Wud2v.js";
 import { t } from "alepha";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region ../../src/demo/components/core/DemoFlex.tsx
 const showcaseSchema = t.object({
 	fill: t.boolean({
@@ -99,7 +98,7 @@ const DemoFlex = () => {
 		})
 	});
 };
-
 //#endregion
 export { DemoFlex as default };
-//# sourceMappingURL=DemoFlex-CAhLUanT.js.map
+
+//# sourceMappingURL=DemoFlex-870PEl0V.js.map

package/dist/demo/{DemoFlex-CAhLUanT.js.map → DemoFlex-870PEl0V.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DemoFlex-CAhLUanT.js","names":[],"sources":["../../src/demo/components/core/DemoFlex.tsx"],"sourcesContent":["import { Flex, Text } from \"@alepha/ui\";\nimport { t } from \"alepha\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst showcaseSchema = t.object({\n  fill: t.boolean({\n    title: \"fill\",\n    default: false,\n    $control: { switch: true },\n  }),\n  col: t.boolean({\n    title: \"col\",\n    default: false,\n    $control: { switch: true },\n  }),\n  center: t.boolean({\n    title: \"center\",\n    default: false,\n    $control: { switch: true },\n  }),\n  centerX: t.boolean({\n    title: \"centerX\",\n    default: false,\n    $control: { switch: true },\n  }),\n  centerY: t.boolean({\n    title: \"centerY\",\n    default: false,\n    $control: { switch: true },\n  }),\n  gap: t.enum([\"0\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"], {\n    title: \"gap\",\n    default: \"md\",\n  }),\n  wrap: t.enum([\"nowrap\", \"wrap\"], {\n    title: \"wrap\",\n    default: \"nowrap\",\n  }),\n});\n\nconst Item = ({ label }: { label: string }) => (\n  <Flex\n    center\n    style={{\n      background: \"var(--mantine-primary-color-light)\",\n      border: \"1px solid var(--mantine-primary-color-light-hover)\",\n      borderRadius: 6,\n      padding: \"8px 16px\",\n      minWidth: 60,\n      minHeight: 40,\n    }}\n  >\n    <Text size=\"sm\" fw={500}>\n      {label}\n    </Text>\n  </Flex>\n);\n\nconst DemoFlex = () => {\n  return (\n    <Showcase\n      title=\"Flex\"\n      schema={showcaseSchema}\n      initialValues={{\n        fill: false,\n        col: false,\n        center: false,\n        centerX: false,\n        centerY: false,\n        gap: \"md\",\n        wrap: \"nowrap\",\n      }}\n      columns={1}\n      windowProps={{}}\n    >\n      {(props) => (\n        <Flex\n          fill={props.fill}\n          col={props.col}\n          center={props.center}\n          centerX={props.centerX}\n          centerY={props.centerY}\n          gap={props.gap === \"0\" ? 0 : props.gap}\n          wrap={props.wrap}\n          style={{\n            minHeight: 200,\n            border: \"1px dashed var(--mantine-color-default-border)\",\n            borderRadius: 8,\n            padding: 16,\n          }}\n        >\n          <Item label=\"A\" />\n          <Item label=\"B\" />\n          <Item label=\"C\" />\n        </Flex>\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoFlex;\n"],"mappings":";;;;;;AAIA,MAAM,iBAAiB,EAAE,OAAO;CAC9B,MAAM,EAAE,QAAQ;EACd,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,KAAK,EAAE,QAAQ;EACb,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,QAAQ,EAAE,QAAQ;EAChB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,SAAS,EAAE,QAAQ;EACjB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,SAAS,EAAE,QAAQ;EACjB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,KAAK,EAAE,KAAK;EAAC;EAAK;EAAM;EAAM;EAAM;EAAM;EAAK,EAAE;EAC/C,OAAO;EACP,SAAS;EACV,CAAC;CACF,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE;EAC/B,OAAO;EACP,SAAS;EACV,CAAC;CACH,CAAC;AAEF,MAAM,QAAQ,EAAE,YACd,oBAAC;CACC;CACA,OAAO;EACL,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,SAAS;EACT,UAAU;EACV,WAAW;EACZ;WAED,oBAAC;EAAK,MAAK;EAAK,IAAI;YACjB;GACI;EACF;AAGT,MAAM,iBAAiB;AACrB,QACE,oBAAC;EACC,OAAM;EACN,QAAQ;EACR,eAAe;GACb,MAAM;GACN,KAAK;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,KAAK;GACL,MAAM;GACP;EACD,SAAS;EACT,aAAa,EAAE;aAEb,UACA,qBAAC;GACC,MAAM,MAAM;GACZ,KAAK,MAAM;GACX,QAAQ,MAAM;GACd,SAAS,MAAM;GACf,SAAS,MAAM;GACf,KAAK,MAAM,QAAQ,MAAM,IAAI,MAAM;GACnC,MAAM,MAAM;GACZ,OAAO;IACL,WAAW;IACX,QAAQ;IACR,cAAc;IACd,SAAS;IACV;;IAED,oBAAC,QAAK,OAAM,MAAM;IAClB,oBAAC,QAAK,OAAM,MAAM;IAClB,oBAAC,QAAK,OAAM,MAAM;;IACb;GAEA"}
+{"version":3,"file":"DemoFlex-870PEl0V.js","names":[],"sources":["../../src/demo/components/core/DemoFlex.tsx"],"sourcesContent":["import { Flex, Text } from \"@alepha/ui\";\nimport { t } from \"alepha\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst showcaseSchema = t.object({\n  fill: t.boolean({\n    title: \"fill\",\n    default: false,\n    $control: { switch: true },\n  }),\n  col: t.boolean({\n    title: \"col\",\n    default: false,\n    $control: { switch: true },\n  }),\n  center: t.boolean({\n    title: \"center\",\n    default: false,\n    $control: { switch: true },\n  }),\n  centerX: t.boolean({\n    title: \"centerX\",\n    default: false,\n    $control: { switch: true },\n  }),\n  centerY: t.boolean({\n    title: \"centerY\",\n    default: false,\n    $control: { switch: true },\n  }),\n  gap: t.enum([\"0\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"], {\n    title: \"gap\",\n    default: \"md\",\n  }),\n  wrap: t.enum([\"nowrap\", \"wrap\"], {\n    title: \"wrap\",\n    default: \"nowrap\",\n  }),\n});\n\nconst Item = ({ label }: { label: string }) => (\n  <Flex\n    center\n    style={{\n      background: \"var(--mantine-primary-color-light)\",\n      border: \"1px solid var(--mantine-primary-color-light-hover)\",\n      borderRadius: 6,\n      padding: \"8px 16px\",\n      minWidth: 60,\n      minHeight: 40,\n    }}\n  >\n    <Text size=\"sm\" fw={500}>\n      {label}\n    </Text>\n  </Flex>\n);\n\nconst DemoFlex = () => {\n  return (\n    <Showcase\n      title=\"Flex\"\n      schema={showcaseSchema}\n      initialValues={{\n        fill: false,\n        col: false,\n        center: false,\n        centerX: false,\n        centerY: false,\n        gap: \"md\",\n        wrap: \"nowrap\",\n      }}\n      columns={1}\n      windowProps={{}}\n    >\n      {(props) => (\n        <Flex\n          fill={props.fill}\n          col={props.col}\n          center={props.center}\n          centerX={props.centerX}\n          centerY={props.centerY}\n          gap={props.gap === \"0\" ? 0 : props.gap}\n          wrap={props.wrap}\n          style={{\n            minHeight: 200,\n            border: \"1px dashed var(--mantine-color-default-border)\",\n            borderRadius: 8,\n            padding: 16,\n          }}\n        >\n          <Item label=\"A\" />\n          <Item label=\"B\" />\n          <Item label=\"C\" />\n        </Flex>\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoFlex;\n"],"mappings":";;;;;AAIA,MAAM,iBAAiB,EAAE,OAAO;CAC9B,MAAM,EAAE,QAAQ;EACd,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,KAAK,EAAE,QAAQ;EACb,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,QAAQ,EAAE,QAAQ;EAChB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,SAAS,EAAE,QAAQ;EACjB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,SAAS,EAAE,QAAQ;EACjB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,KAAK,EAAE,KAAK;EAAC;EAAK;EAAM;EAAM;EAAM;EAAM;EAAK,EAAE;EAC/C,OAAO;EACP,SAAS;EACV,CAAC;CACF,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE;EAC/B,OAAO;EACP,SAAS;EACV,CAAC;CACH,CAAC;AAEF,MAAM,QAAQ,EAAE,YACd,oBAAC,MAAD;CACE,QAAA;CACA,OAAO;EACL,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,SAAS;EACT,UAAU;EACV,WAAW;EACZ;WAED,oBAAC,MAAD;EAAM,MAAK;EAAK,IAAI;YACjB;EACI,CAAA;CACF,CAAA;AAGT,MAAM,iBAAiB;AACrB,QACE,oBAAC,UAAD;EACE,OAAM;EACN,QAAQ;EACR,eAAe;GACb,MAAM;GACN,KAAK;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,KAAK;GACL,MAAM;GACP;EACD,SAAS;EACT,aAAa,EAAE;aAEb,UACA,qBAAC,MAAD;GACE,MAAM,MAAM;GACZ,KAAK,MAAM;GACX,QAAQ,MAAM;GACd,SAAS,MAAM;GACf,SAAS,MAAM;GACf,KAAK,MAAM,QAAQ,MAAM,IAAI,MAAM;GACnC,MAAM,MAAM;GACZ,OAAO;IACL,WAAW;IACX,QAAQ;IACR,cAAc;IACd,SAAS;IACV;aAbH;IAeE,oBAAC,MAAD,EAAM,OAAM,KAAM,CAAA;IAClB,oBAAC,MAAD,EAAM,OAAM,KAAM,CAAA;IAClB,oBAAC,MAAD,EAAM,OAAM,KAAM,CAAA;IACb;;EAEA,CAAA"}

package/dist/demo/{DemoHeading-yIFmNjHB.js → DemoHeading-C1YR27fz.js}

@@ -1,8 +1,7 @@
-import { d as Heading } from "./core-B7LNjM78.js";
-import { t as Showcase } from "./Showcase-BtEU0pY9.js";
+import { d as Heading } from "./core-DRtQklr3.js";
+import { t as Showcase } from "./Showcase-D49Wud2v.js";
 import { t } from "alepha";
 import { jsx } from "react/jsx-runtime";
-
 //#region ../../src/demo/components/core/DemoHeading.tsx
 const DemoHeading = () => {
 	return /* @__PURE__ */ jsx(Showcase, {
@@ -12,7 +11,7 @@ const DemoHeading = () => {
 		children: (props) => /* @__PURE__ */ jsx(Heading, { title: "Hello!" })
 	});
 };
-
 //#endregion
 export { DemoHeading as default };
-//# sourceMappingURL=DemoHeading-yIFmNjHB.js.map
+
+//# sourceMappingURL=DemoHeading-C1YR27fz.js.map

package/dist/demo/{DemoHeading-yIFmNjHB.js.map → DemoHeading-C1YR27fz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DemoHeading-yIFmNjHB.js","names":[],"sources":["../../src/demo/components/core/DemoHeading.tsx"],"sourcesContent":["import { Heading } from \"@alepha/ui\";\nimport { t } from \"alepha\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst DemoHeading = () => {\n  return (\n    <Showcase title=\"Flex\" schema={t.object({})} initialValues={{}}>\n      {(props) => <Heading title={\"Hello!\"} />}\n    </Showcase>\n  );\n};\n\nexport default DemoHeading;\n"],"mappings":";;;;;;AAIA,MAAM,oBAAoB;AACxB,QACE,oBAAC;EAAS,OAAM;EAAO,QAAQ,EAAE,OAAO,EAAE,CAAC;EAAE,eAAe,EAAE;aAC1D,UAAU,oBAAC,WAAQ,OAAO,WAAY;GAC/B"}
+{"version":3,"file":"DemoHeading-C1YR27fz.js","names":[],"sources":["../../src/demo/components/core/DemoHeading.tsx"],"sourcesContent":["import { Heading } from \"@alepha/ui\";\nimport { t } from \"alepha\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst DemoHeading = () => {\n  return (\n    <Showcase title=\"Flex\" schema={t.object({})} initialValues={{}}>\n      {(props) => <Heading title={\"Hello!\"} />}\n    </Showcase>\n  );\n};\n\nexport default DemoHeading;\n"],"mappings":";;;;;AAIA,MAAM,oBAAoB;AACxB,QACE,oBAAC,UAAD;EAAU,OAAM;EAAO,QAAQ,EAAE,OAAO,EAAE,CAAC;EAAE,eAAe,EAAE;aAC1D,UAAU,oBAAC,SAAD,EAAS,OAAO,UAAY,CAAA;EAC/B,CAAA"}

package/dist/demo/{DemoHome-BSGuBHus.js → DemoHome-DRbL2eGf.js}

@@ -1,7 +1,6 @@
-import { f as Flex, s as Text } from "./core-B7LNjM78.js";
+import { f as Flex, l as Text } from "./core-DRtQklr3.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { IconBraces } from "@tabler/icons-react";
-
+import "@tabler/icons-react";
 //#region ../../src/demo/components/DemoHome.tsx
 const DemoHome = () => {
 	return /* @__PURE__ */ jsxs(Flex, {
@@ -16,7 +15,7 @@ const DemoHome = () => {
 		})]
 	});
 };
-
 //#endregion
 export { DemoHome as default };
-//# sourceMappingURL=DemoHome-BSGuBHus.js.map
+
+//# sourceMappingURL=DemoHome-DRbL2eGf.js.map

package/dist/demo/{DemoHome-BSGuBHus.js.map → DemoHome-DRbL2eGf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DemoHome-BSGuBHus.js","names":[],"sources":["../../src/demo/components/DemoHome.tsx"],"sourcesContent":["import { Flex, Text } from \"@alepha/ui\";\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 p={\"lg\"} col>\n      <Text title>Component Showcase</Text>\n      <Text c=\"dimmed\">\n        Interactive demos and documentation for @alepha/ui components.\n      </Text>\n    </Flex>\n  );\n};\n\nexport default DemoHome;\n"],"mappings":";;;;;AAaA,MAAM,iBAAiB;AACrB,QACE,qBAAC;EAAK,GAAG;EAAM;aACb,oBAAC;GAAK;aAAM;IAAyB,EACrC,oBAAC;GAAK,GAAE;aAAS;IAEV;GACF"}
+{"version":3,"file":"DemoHome-DRbL2eGf.js","names":[],"sources":["../../src/demo/components/DemoHome.tsx"],"sourcesContent":["import { Flex, Text } from \"@alepha/ui\";\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 p={\"lg\"} col>\n      <Text title>Component Showcase</Text>\n      <Text c=\"dimmed\">\n        Interactive demos and documentation for @alepha/ui components.\n      </Text>\n    </Flex>\n  );\n};\n\nexport default DemoHome;\n"],"mappings":";;;;AAaA,MAAM,iBAAiB;AACrB,QACE,qBAAC,MAAD;EAAM,GAAG;EAAM,KAAA;YAAf,CACE,oBAAC,MAAD;GAAM,OAAA;aAAM;GAAyB,CAAA,EACrC,oBAAC,MAAD;GAAM,GAAE;aAAS;GAEV,CAAA,CACF"}

package/dist/demo/{DemoJsonViewer-DsA2IpgV.js → DemoJsonViewer-DoABiqBW.js}

@@ -1,9 +1,8 @@
-import { i as JsonViewer } from "./core-B7LNjM78.js";
-import { t as Showcase } from "./Showcase-BtEU0pY9.js";
+import { i as JsonViewer } from "./core-DRtQklr3.js";
+import { t as Showcase } from "./Showcase-D49Wud2v.js";
 import { t } from "alepha";
 import { useI18n } from "alepha/react/i18n";
 import { jsx } from "react/jsx-runtime";
-
 //#region ../../src/demo/components/json/DemoJsonViewer.tsx
 const sampleData = {
 	name: "Sample Project",
@@ -103,7 +102,7 @@ const DemoJsonViewer = () => {
 		}, props.defaultExpandedDepth)
 	});
 };
-
 //#endregion
 export { DemoJsonViewer as default };
-//# sourceMappingURL=DemoJsonViewer-DsA2IpgV.js.map
+
+//# sourceMappingURL=DemoJsonViewer-DoABiqBW.js.map

package/dist/demo/{DemoJsonViewer-DsA2IpgV.js.map → DemoJsonViewer-DoABiqBW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DemoJsonViewer-DsA2IpgV.js","names":[],"sources":["../../src/demo/components/json/DemoJsonViewer.tsx"],"sourcesContent":["import { JsonViewer } from \"@alepha/ui\";\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":";;;;;;;AAKA,MAAM,aAAa;CACjB,MAAM;CACN,WAAW;CACX,WAAW;CACX,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,MAAM;EAAC;EAAc;EAAS;EAAO;CACrC,QAAQ,EACN,QAAQ,EACN,QAAQ,EACN,WAAW,aACZ,EACF,EACF;CACD,OAAO,CACL;EAAE,IAAI;EAAG,MAAM;EAAS,MAAM;EAAS,EACvC;EAAE,IAAI;EAAG,MAAM;EAAO,MAAM;EAAQ,CACrC;CACD,YAAY,EAAE;CACd,aAAa,EAAE;CACf,UACE;CACH;AAQD,MAAM,mBAAmB,EAAE,OAAO;CAChC,YAAY,EAAE,QAAQ;EACpB,OAAO;EACP,SAAS;EACT,UAAU,EACR,QAAQ,MACT;EACF,CAAC;CACF,gBAAgB,EAAE,QAAQ;EACxB,OAAO;EACP,SAAS;EACT,UAAU,EACR,QAAQ,MACT;EACF,CAAC;CACF,gBAAgB,EAAE,QAAQ;EACxB,OAAO;EACP,SAAS;EACT,UAAU,EACR,QAAQ,MACT;EACF,CAAC;CACF,sBAAsB,EAAE,QAAQ;EAC9B,OAAO;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,UAAU,EAAE,QAAQ;EAClB,OAAO;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,MAAM,EAAE,KAAK;EAAC;EAAM;EAAM;EAAM;EAAM;EAAK,EAAE;EAC3C,OAAO;EACP,SAAS;EACT,UAAU,EACR,WAAW,MACZ;EACF,CAAC;CACH,CAAC;AAEF,MAAM,uBAAuB;CAC3B,MAAM,OAAO,SAAS;CACtB,MAAM,eACJ,KACA,UACgC;AAChC,MAAI,QAAQ,YACV,QAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAI,QAAQ,YACV,QAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;;AAK7C,QACE,oBAAC;EACC,OAAM;EACN,QAAQ;EACR,eAAe;GACb,YAAY;GACZ,gBAAgB;GAChB,gBAAgB;GAChB,sBAAsB;GACtB,UAAU;GACV,MAAM;GACP;EACD,SAAS;aAEP,UACA,oBAAC;GAEC,MAAM;GACN,sBAAsB,MAAM;GAC5B,YAAY,MAAM;GAClB,gBAAgB,MAAM;GACtB,aAAa,MAAM,iBAAiB,cAAc;GAClD,UAAU,MAAM;GAChB,MAAM,MAAM;KAPP,MAAM,qBAQX;GAEK"}
+{"version":3,"file":"DemoJsonViewer-DoABiqBW.js","names":[],"sources":["../../src/demo/components/json/DemoJsonViewer.tsx"],"sourcesContent":["import { JsonViewer } from \"@alepha/ui\";\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":";;;;;;AAKA,MAAM,aAAa;CACjB,MAAM;CACN,WAAW;CACX,WAAW;CACX,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,MAAM;EAAC;EAAc;EAAS;EAAO;CACrC,QAAQ,EACN,QAAQ,EACN,QAAQ,EACN,WAAW,aACZ,EACF,EACF;CACD,OAAO,CACL;EAAE,IAAI;EAAG,MAAM;EAAS,MAAM;EAAS,EACvC;EAAE,IAAI;EAAG,MAAM;EAAO,MAAM;EAAQ,CACrC;CACD,YAAY,EAAE;CACd,aAAa,EAAE;CACf,UACE;CACH;AAQD,MAAM,mBAAmB,EAAE,OAAO;CAChC,YAAY,EAAE,QAAQ;EACpB,OAAO;EACP,SAAS;EACT,UAAU,EACR,QAAQ,MACT;EACF,CAAC;CACF,gBAAgB,EAAE,QAAQ;EACxB,OAAO;EACP,SAAS;EACT,UAAU,EACR,QAAQ,MACT;EACF,CAAC;CACF,gBAAgB,EAAE,QAAQ;EACxB,OAAO;EACP,SAAS;EACT,UAAU,EACR,QAAQ,MACT;EACF,CAAC;CACF,sBAAsB,EAAE,QAAQ;EAC9B,OAAO;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,UAAU,EAAE,QAAQ;EAClB,OAAO;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,MAAM,EAAE,KAAK;EAAC;EAAM;EAAM;EAAM;EAAM;EAAK,EAAE;EAC3C,OAAO;EACP,SAAS;EACT,UAAU,EACR,WAAW,MACZ;EACF,CAAC;CACH,CAAC;AAEF,MAAM,uBAAuB;CAC3B,MAAM,OAAO,SAAS;CACtB,MAAM,eACJ,KACA,UACgC;AAChC,MAAI,QAAQ,YACV,QAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAI,QAAQ,YACV,QAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;;AAK7C,QACE,oBAAC,UAAD;EACE,OAAM;EACN,QAAQ;EACR,eAAe;GACb,YAAY;GACZ,gBAAgB;GAChB,gBAAgB;GAChB,sBAAsB;GACtB,UAAU;GACV,MAAM;GACP;EACD,SAAS;aAEP,UACA,oBAAC,YAAD;GAEE,MAAM;GACN,sBAAsB,MAAM;GAC5B,YAAY,MAAM;GAClB,gBAAgB,MAAM;GACtB,aAAa,MAAM,iBAAiB,cAAc,KAAA;GAClD,UAAU,MAAM;GAChB,MAAM,MAAM;GACZ,EARK,MAAM,qBAQX;EAEK,CAAA"}

package/dist/demo/{DemoLayout-Cy6xjn6P.js → DemoLayout-CN_PDCX2.js}

@@ -1,23 +1,26 @@
-import { _ as AlephaMantineProvider, c as DashboardShell, g as ui, p as ToggleSidebarButton, u as Breadcrumb } from "./core-B7LNjM78.js";
+import { _ as AlephaMantineProvider, g as ui, p as ToggleSidebarButton, s as DashboardShell, u as Breadcrumbs } from "./core-DRtQklr3.js";
 import { jsx } from "react/jsx-runtime";
 import { useRouter } from "alepha/react/router";
-
 //#region ../../src/demo/components/DemoLayout.tsx
 const DemoLayout = () => {
 	const router = useRouter();
 	return /* @__PURE__ */ jsx(AlephaMantineProvider, { children: /* @__PURE__ */ jsx(DashboardShell, {
+		fill: true,
 		appShellProps: {
 			withBorder: false,
 			bg: ui.colors.background
 		},
-		appShellHeaderProps: { bg: "transparent" },
+		appShellHeaderProps: {
+			bg: "transparent",
+			style: { backdropFilter: "blur(10px)" }
+		},
 		appBarProps: { items: [
 			{
 				type: "burger",
 				position: "left"
 			},
 			{
-				element: /* @__PURE__ */ jsx(Breadcrumb, {}),
+				element: /* @__PURE__ */ jsx(Breadcrumbs, {}),
 				position: "left"
 			},
 			{
@@ -46,7 +49,7 @@ const DemoLayout = () => {
 			},
 			{
 				...router.node("demoForm"),
-				children: [router.node("demoTypeForm")]
+				children: [router.node("demoTypeForm"), router.node("demoControlSelect")]
 			},
 			{
 				...router.node("demoTable"),
@@ -58,7 +61,12 @@ const DemoLayout = () => {
 			},
 			{
 				...router.node("demoAuth"),
-				children: [router.node("demoLogin"), router.node("demoRegister")]
+				children: [
+					router.node("demoLogin"),
+					router.node("demoRegister"),
+					router.node("demoResetPassword"),
+					router.node("demoVerifyEmail")
+				]
 			},
 			{
 				position: "bottom",
@@ -67,7 +75,7 @@ const DemoLayout = () => {
 		] }
 	}) });
 };
-
 //#endregion
 export { DemoLayout as default };
-//# sourceMappingURL=DemoLayout-Cy6xjn6P.js.map
+
+//# sourceMappingURL=DemoLayout-CN_PDCX2.js.map