@alepha/ui 0.14.0 → 0.14.2

package/dist/demo/DemoVerifyEmail-C_ooC5u8.js

@@ -0,0 +1,152 @@
+import { t as Showcase_default } from "./Showcase-vemLuO2t.js";
+import { ActionButton } from "@alepha/ui";
+import { t } from "alepha";
+import { useRouter, useRouterState } from "@alepha/react/router";
+import { IconAlertCircle, IconCheck, IconMailCheck } from "@tabler/icons-react";
+import { Alert, Card, Flex, Loader, Stack, Text } from "@mantine/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useI18n } from "@alepha/react/i18n";
+import { useEffect, useState } from "react";
+import { useClient } from "@alepha/react";
+
+//#region ../../src/auth/components/VerifyEmail.tsx
+const VerifyEmail = (_props) => {
+	const router = useRouter();
+	const state = useRouterState();
+	const userCtrl = useClient();
+	const { tr } = useI18n();
+	const [step, setStep] = useState("verifying");
+	const [error, setError] = useState(null);
+	const email = state.query.email;
+	const token = state.query.token;
+	useEffect(() => {
+		const verify = async () => {
+			if (!email || !token) {
+				setError(tr("verifyEmailMissingParams"));
+				setStep("error");
+				return;
+			}
+			try {
+				await userCtrl.verifyEmail({ body: {
+					email,
+					token
+				} });
+				setStep("success");
+			} catch (err) {
+				setError(err instanceof Error ? err.message : tr("verifyEmailFailed"));
+				setStep("error");
+			}
+		};
+		verify();
+	}, [email, token]);
+	return /* @__PURE__ */ jsx(Flex, {
+		flex: 1,
+		justify: "center",
+		align: "center",
+		children: /* @__PURE__ */ jsx(Stack, {
+			gap: "sm",
+			w: 400,
+			children: /* @__PURE__ */ jsx(Card, {
+				withBorder: true,
+				p: "lg",
+				bg: "var(--alepha-elevated)",
+				children: /* @__PURE__ */ jsxs(Stack, {
+					gap: "md",
+					align: "center",
+					children: [
+						step === "verifying" && /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(Loader, { size: "lg" }),
+							/* @__PURE__ */ jsx(Text, {
+								size: "lg",
+								fw: 500,
+								ta: "center",
+								children: tr("verifyEmailVerifying")
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								size: "sm",
+								c: "dimmed",
+								ta: "center",
+								children: tr("verifyEmailPleaseWait")
+							})
+						] }),
+						step === "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(IconMailCheck, {
+								size: 48,
+								color: "var(--mantine-color-green-6)"
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								size: "lg",
+								fw: 500,
+								ta: "center",
+								children: tr("verifyEmailTitle")
+							}),
+							/* @__PURE__ */ jsx(Alert, {
+								variant: "light",
+								color: "green",
+								icon: /* @__PURE__ */ jsx(IconCheck, {}),
+								children: /* @__PURE__ */ jsx(Text, {
+									size: "sm",
+									children: tr("verifyEmailSuccess")
+								})
+							}),
+							/* @__PURE__ */ jsx(ActionButton, {
+								href: router.path("login"),
+								fullWidth: true,
+								children: tr("verifyEmailSignIn")
+							})
+						] }),
+						step === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(IconAlertCircle, {
+								size: 48,
+								color: "var(--mantine-color-red-6)"
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								size: "lg",
+								fw: 500,
+								ta: "center",
+								children: tr("verifyEmailTitle")
+							}),
+							/* @__PURE__ */ jsx(Alert, {
+								variant: "light",
+								color: "red",
+								icon: /* @__PURE__ */ jsx(IconAlertCircle, {}),
+								children: /* @__PURE__ */ jsx(Text, {
+									size: "sm",
+									children: error || tr("verifyEmailFailed")
+								})
+							}),
+							/* @__PURE__ */ jsx(ActionButton, {
+								href: router.path("login"),
+								fullWidth: true,
+								children: tr("verifyEmailBackToSignIn")
+							})
+						] })
+					]
+				})
+			})
+		})
+	});
+};
+var VerifyEmail_default = VerifyEmail;
+
+//#endregion
+//#region ../../src/demo/components/auth/DemoVerifyEmail.tsx
+const showcaseSchema = t.object({ placeholder: t.boolean({
+	title: "Demo Mode",
+	default: true,
+	$control: { switch: true }
+}) });
+const DemoVerifyEmail = () => {
+	return /* @__PURE__ */ jsx(Showcase_default, {
+		title: "VerifyEmail",
+		schema: showcaseSchema,
+		initialValues: { placeholder: true },
+		columns: 1,
+		children: () => /* @__PURE__ */ jsx(VerifyEmail_default, {})
+	});
+};
+var DemoVerifyEmail_default = DemoVerifyEmail;
+
+//#endregion
+export { DemoVerifyEmail_default as default };
+//# sourceMappingURL=DemoVerifyEmail-C_ooC5u8.js.map

package/dist/demo/DemoVerifyEmail-C_ooC5u8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoVerifyEmail-C_ooC5u8.js","names":["Showcase","VerifyEmail"],"sources":["../../src/auth/components/VerifyEmail.tsx","../../src/demo/components/auth/DemoVerifyEmail.tsx"],"sourcesContent":["import { useClient } from \"@alepha/react\";\nimport { useI18n } from \"@alepha/react/i18n\";\nimport { useRouter, useRouterState } from \"@alepha/react/router\";\nimport { ActionButton } from \"@alepha/ui\";\nimport { Alert, Card, Flex, Loader, Stack, Text } from \"@mantine/core\";\nimport { IconAlertCircle, IconCheck, IconMailCheck } from \"@tabler/icons-react\";\nimport type { UserController } from \"alepha/api/users\";\nimport { useEffect, useState } from \"react\";\nimport type { AuthI18n } from \"../AuthI18n.ts\";\nimport type { AuthRouter } from \"../AuthRouter.ts\";\n\nexport type VerifyEmailProps = {};\n\ntype Step = \"verifying\" | \"success\" | \"error\";\n\nconst VerifyEmail = (_props: VerifyEmailProps) => {\n  const router = useRouter<AuthRouter>();\n  const state = useRouterState();\n  const userCtrl = useClient<UserController>();\n  const { tr } = useI18n<AuthI18n, \"en\">();\n\n  const [step, setStep] = useState<Step>(\"verifying\");\n  const [error, setError] = useState<string | null>(null);\n\n  const email = state.query.email as string | undefined;\n  const token = state.query.token as string | undefined;\n\n  useEffect(() => {\n    const verify = async () => {\n      if (!email || !token) {\n        setError(tr(\"verifyEmailMissingParams\"));\n        setStep(\"error\");\n        return;\n      }\n\n      try {\n        await userCtrl.verifyEmail({\n          body: { email, token },\n        });\n        setStep(\"success\");\n      } catch (err) {\n        setError(err instanceof Error ? err.message : tr(\"verifyEmailFailed\"));\n        setStep(\"error\");\n      }\n    };\n\n    verify();\n  }, [email, token]);\n\n  return (\n    <Flex flex={1} justify=\"center\" align=\"center\">\n      <Stack gap=\"sm\" w={400}>\n        <Card withBorder p=\"lg\" bg=\"var(--alepha-elevated)\">\n          <Stack gap=\"md\" align=\"center\">\n            {step === \"verifying\" && (\n              <>\n                <Loader size=\"lg\" />\n                <Text size=\"lg\" fw={500} ta=\"center\">\n                  {tr(\"verifyEmailVerifying\")}\n                </Text>\n                <Text size=\"sm\" c=\"dimmed\" ta=\"center\">\n                  {tr(\"verifyEmailPleaseWait\")}\n                </Text>\n              </>\n            )}\n\n            {step === \"success\" && (\n              <>\n                <IconMailCheck size={48} color=\"var(--mantine-color-green-6)\" />\n                <Text size=\"lg\" fw={500} ta=\"center\">\n                  {tr(\"verifyEmailTitle\")}\n                </Text>\n                <Alert variant=\"light\" color=\"green\" icon={<IconCheck />}>\n                  <Text size=\"sm\">{tr(\"verifyEmailSuccess\")}</Text>\n                </Alert>\n                <ActionButton href={router.path(\"login\")} fullWidth>\n                  {tr(\"verifyEmailSignIn\")}\n                </ActionButton>\n              </>\n            )}\n\n            {step === \"error\" && (\n              <>\n                <IconAlertCircle size={48} color=\"var(--mantine-color-red-6)\" />\n                <Text size=\"lg\" fw={500} ta=\"center\">\n                  {tr(\"verifyEmailTitle\")}\n                </Text>\n                <Alert variant=\"light\" color=\"red\" icon={<IconAlertCircle />}>\n                  <Text size=\"sm\">{error || tr(\"verifyEmailFailed\")}</Text>\n                </Alert>\n                <ActionButton href={router.path(\"login\")} fullWidth>\n                  {tr(\"verifyEmailBackToSignIn\")}\n                </ActionButton>\n              </>\n            )}\n          </Stack>\n        </Card>\n      </Stack>\n    </Flex>\n  );\n};\n\nexport default VerifyEmail;\n","import { t } from \"alepha\";\nimport VerifyEmail from \"../../../auth/components/VerifyEmail.tsx\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst showcaseSchema = t.object({\n  placeholder: t.boolean({\n    title: \"Demo Mode\",\n    default: true,\n    $control: { switch: true },\n  }),\n});\n\nconst DemoVerifyEmail = () => {\n  return (\n    <Showcase\n      title=\"VerifyEmail\"\n      schema={showcaseSchema}\n      initialValues={{\n        placeholder: true,\n      }}\n      columns={1}\n    >\n      {() => <VerifyEmail />}\n    </Showcase>\n  );\n};\n\nexport default DemoVerifyEmail;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,eAAe,WAA6B;CAChD,MAAM,SAAS,WAAuB;CACtC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,WAAW,WAA2B;CAC5C,MAAM,EAAE,OAAO,SAAyB;CAExC,MAAM,CAAC,MAAM,WAAW,SAAe,YAAY;CACnD,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CAEvD,MAAM,QAAQ,MAAM,MAAM;CAC1B,MAAM,QAAQ,MAAM,MAAM;AAE1B,iBAAgB;EACd,MAAM,SAAS,YAAY;AACzB,OAAI,CAAC,SAAS,CAAC,OAAO;AACpB,aAAS,GAAG,2BAA2B,CAAC;AACxC,YAAQ,QAAQ;AAChB;;AAGF,OAAI;AACF,UAAM,SAAS,YAAY,EACzB,MAAM;KAAE;KAAO;KAAO,EACvB,CAAC;AACF,YAAQ,UAAU;YACX,KAAK;AACZ,aAAS,eAAe,QAAQ,IAAI,UAAU,GAAG,oBAAoB,CAAC;AACtE,YAAQ,QAAQ;;;AAIpB,UAAQ;IACP,CAAC,OAAO,MAAM,CAAC;AAElB,QACE,oBAAC;EAAK,MAAM;EAAG,SAAQ;EAAS,OAAM;YACpC,oBAAC;GAAM,KAAI;GAAK,GAAG;aACjB,oBAAC;IAAK;IAAW,GAAE;IAAK,IAAG;cACzB,qBAAC;KAAM,KAAI;KAAK,OAAM;;MACnB,SAAS,eACR;OACE,oBAAC,UAAO,MAAK,OAAO;OACpB,oBAAC;QAAK,MAAK;QAAK,IAAI;QAAK,IAAG;kBACzB,GAAG,uBAAuB;SACtB;OACP,oBAAC;QAAK,MAAK;QAAK,GAAE;QAAS,IAAG;kBAC3B,GAAG,wBAAwB;SACvB;UACN;MAGJ,SAAS,aACR;OACE,oBAAC;QAAc,MAAM;QAAI,OAAM;SAAiC;OAChE,oBAAC;QAAK,MAAK;QAAK,IAAI;QAAK,IAAG;kBACzB,GAAG,mBAAmB;SAClB;OACP,oBAAC;QAAM,SAAQ;QAAQ,OAAM;QAAQ,MAAM,oBAAC,cAAY;kBACtD,oBAAC;SAAK,MAAK;mBAAM,GAAG,qBAAqB;UAAQ;SAC3C;OACR,oBAAC;QAAa,MAAM,OAAO,KAAK,QAAQ;QAAE;kBACvC,GAAG,oBAAoB;SACX;UACd;MAGJ,SAAS,WACR;OACE,oBAAC;QAAgB,MAAM;QAAI,OAAM;SAA+B;OAChE,oBAAC;QAAK,MAAK;QAAK,IAAI;QAAK,IAAG;kBACzB,GAAG,mBAAmB;SAClB;OACP,oBAAC;QAAM,SAAQ;QAAQ,OAAM;QAAM,MAAM,oBAAC,oBAAkB;kBAC1D,oBAAC;SAAK,MAAK;mBAAM,SAAS,GAAG,oBAAoB;UAAQ;SACnD;OACR,oBAAC;QAAa,MAAM,OAAO,KAAK,QAAQ;QAAE;kBACvC,GAAG,0BAA0B;SACjB;UACd;;MAEC;KACH;IACD;GACH;;AAIX,0BAAe;;;;AClGf,MAAM,iBAAiB,EAAE,OAAO,EAC9B,aAAa,EAAE,QAAQ;CACrB,OAAO;CACP,SAAS;CACT,UAAU,EAAE,QAAQ,MAAM;CAC3B,CAAC,EACH,CAAC;AAEF,MAAM,wBAAwB;AAC5B,QACE,oBAACA;EACC,OAAM;EACN,QAAQ;EACR,eAAe,EACb,aAAa,MACd;EACD,SAAS;kBAEF,oBAACC,wBAAc;GACb;;AAIf,8BAAe"}

package/dist/demo/IconGoogle-DvmFiEDB.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../../src/auth/components/icons/IconGithub.tsx
+const IconGithub = () => {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "24",
+		height: "24",
+		viewBox: "0 0 1024 1024",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z",
+			transform: "scale(64)",
+			fill: "var(--alepha-text)"
+		})
+	});
+};
+var IconGithub_default = IconGithub;
+
+//#endregion
+//#region ../../src/auth/components/icons/IconGoogle.tsx
+const IconGoogle = () => {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		height: "24",
+		viewBox: "0 0 24 24",
+		width: "24",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+				fill: "#4285F4"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+				fill: "#34A853"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+				fill: "#FBBC05"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+				fill: "#EA4335"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M1 1h22v22H1z",
+				fill: "none"
+			})
+		]
+	});
+};
+var IconGoogle_default = IconGoogle;
+
+//#endregion
+export { IconGithub_default as n, IconGoogle_default as t };
+//# sourceMappingURL=IconGoogle-DvmFiEDB.js.map

package/dist/demo/IconGoogle-DvmFiEDB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconGoogle-DvmFiEDB.js","names":[],"sources":["../../src/auth/components/icons/IconGithub.tsx","../../src/auth/components/icons/IconGoogle.tsx"],"sourcesContent":["const IconGithub = () => {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 1024 1024\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z\"\n        transform=\"scale(64)\"\n        fill={\"var(--alepha-text)\"}\n      />\n    </svg>\n  );\n};\n\nexport default IconGithub;\n","const IconGoogle = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n    >\n      <path\n        d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n        fill=\"#4285F4\"\n      />\n      <path\n        d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n        fill=\"#34A853\"\n      />\n      <path\n        d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n        fill=\"#FBBC05\"\n      />\n      <path\n        d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n        fill=\"#EA4335\"\n      />\n      <path d=\"M1 1h22v22H1z\" fill=\"none\" />\n    </svg>\n  );\n};\n\nexport default IconGoogle;\n"],"mappings":";;;AAAA,MAAM,mBAAmB;AACvB,QACE,oBAAC;EACC,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,OAAM;YAEN,oBAAC;GACC,UAAS;GACT,UAAS;GACT,GAAE;GACF,WAAU;GACV,MAAM;IACN;GACE;;AAIV,yBAAe;;;;ACpBf,MAAM,mBAAmB;AACvB,QACE,qBAAC;EACC,OAAM;EACN,QAAO;EACP,SAAQ;EACR,OAAM;;GAEN,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IAAK,GAAE;IAAgB,MAAK;KAAS;;GAClC;;AAIV,yBAAe"}

package/dist/demo/Showcase-vemLuO2t.js

@@ -0,0 +1,187 @@
+import { TypeForm, ui } from "@alepha/ui";
+import { Box, Card, Flex, SegmentedControl, Text } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useForm } from "@alepha/react/form";
+
+//#region ../../src/demo/components/shared/MacWindow.tsx
+const MacWindow = ({ children, title, containerProps, fill }) => {
+	const [size, setSize] = useState("100");
+	const getWidth = () => {
+		return `${size}%`;
+	};
+	return /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		flex: fill ? 1 : void 0,
+		h: fill ? "100%" : void 0,
+		bdrs: "md",
+		style: {
+			width: getWidth(),
+			border: "1px solid var(--mantine-color-default-border)",
+			overflow: "hidden",
+			background: "var(--mantine-color-body)",
+			boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+			transition: "width 0.3s ease"
+		},
+		children: [/* @__PURE__ */ jsxs(Flex, {
+			h: 36,
+			px: "sm",
+			align: "center",
+			gap: 8,
+			style: {
+				background: "var(--mantine-color-default)",
+				borderBottom: "1px solid var(--mantine-color-default-border)"
+			},
+			children: [
+				/* @__PURE__ */ jsxs(Flex, {
+					gap: 6,
+					children: [
+						/* @__PURE__ */ jsx(Box, {
+							w: 12,
+							h: 12,
+							style: {
+								borderRadius: "50%",
+								background: "#ff5f57"
+							}
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							w: 12,
+							h: 12,
+							style: {
+								borderRadius: "50%",
+								background: "#febc2e"
+							}
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							w: 12,
+							h: 12,
+							style: {
+								borderRadius: "50%",
+								background: "#28c840"
+							}
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					style: {
+						flex: 1,
+						textAlign: "center",
+						fontSize: 13,
+						color: "var(--mantine-color-dimmed)"
+					},
+					children: title
+				}),
+				fill ? void 0 : /* @__PURE__ */ jsx(SegmentedControl, {
+					size: "xs",
+					value: size,
+					onChange: (v) => setSize(v),
+					data: [
+						{
+							label: "25",
+							value: "25"
+						},
+						{
+							label: "50",
+							value: "50"
+						},
+						{
+							label: "75",
+							value: "75"
+						},
+						{
+							label: "100",
+							value: "100"
+						}
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx(Flex, {
+			direction: "column",
+			flex: fill ? 1 : void 0,
+			p: "md",
+			...containerProps,
+			children
+		})]
+	});
+};
+var MacWindow_default = MacWindow;
+
+//#endregion
+//#region ../../src/demo/components/shared/Showcase.tsx
+/**
+* Showcase component for demonstrating UI components with interactive props configuration.
+* Uses TypeForm to render a form based on the props schema and displays the component preview.
+*/
+const Showcase = ({ title, schema, initialValues, columns = 3, children, windowProps }) => {
+	const [values, setValues] = useState(initialValues ?? {});
+	const form = useForm({
+		schema,
+		initialValues,
+		handler: (values$1) => {
+			setValues(values$1);
+		},
+		onChange: (key, value) => {
+			console.log("onChange", key, value);
+			form.submit();
+		}
+	}, [schema]);
+	return /* @__PURE__ */ jsxs(Flex, {
+		flex: 1,
+		h: "100%",
+		children: [/* @__PURE__ */ jsx(Flex, {
+			flex: 1,
+			bg: ui.colors.background,
+			h: "100%",
+			p: "xl",
+			justify: "center",
+			align: "flex-start",
+			style: {
+				flex: 1,
+				minWidth: 0,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(MacWindow_default, {
+				title,
+				...windowProps,
+				children: children(values)
+			})
+		}), /* @__PURE__ */ jsx(Box, {
+			bg: ui.colors.surface,
+			h: "100%",
+			p: "md",
+			style: {
+				flex: "0 0 300px",
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsxs(Card, {
+				withBorder: true,
+				shadow: "sm",
+				radius: "md",
+				bg: ui.colors.elevated,
+				children: [/* @__PURE__ */ jsx(Card.Section, {
+					withBorder: true,
+					py: "xs",
+					inheritPadding: true,
+					children: /* @__PURE__ */ jsxs(Text, {
+						size: "xs",
+						fw: 500,
+						children: [title, " Props"]
+					})
+				}), /* @__PURE__ */ jsx(Card.Section, {
+					p: "sm",
+					children: /* @__PURE__ */ jsx(TypeForm, {
+						form,
+						columns,
+						skipSubmitButton: true,
+						skipFormElement: true
+					})
+				})]
+			})
+		})]
+	});
+};
+var Showcase_default = Showcase;
+
+//#endregion
+export { MacWindow_default as n, Showcase_default as t };
+//# sourceMappingURL=Showcase-vemLuO2t.js.map

package/dist/demo/Showcase-vemLuO2t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Showcase-vemLuO2t.js","names":["values","MacWindow"],"sources":["../../src/demo/components/shared/MacWindow.tsx","../../src/demo/components/shared/Showcase.tsx"],"sourcesContent":["import { Box, type BoxProps, Flex, SegmentedControl } from \"@mantine/core\";\nimport { type ReactNode, useState } from \"react\";\n\nexport interface MacWindowProps {\n  children: ReactNode;\n  title?: string;\n  containerProps?: BoxProps;\n  fill?: boolean;\n}\n\ntype WindowSize = \"25\" | \"50\" | \"75\" | \"100\";\n\nconst MacWindow = ({\n  children,\n  title,\n  containerProps,\n  fill,\n}: MacWindowProps) => {\n  const [size, setSize] = useState<WindowSize>(\"100\");\n\n  const getWidth = () => {\n    return `${size}%`;\n  };\n\n  return (\n    <Flex\n      direction=\"column\"\n      flex={fill ? 1 : undefined}\n      h={fill ? \"100%\" : undefined}\n      bdrs={\"md\"}\n      style={{\n        width: getWidth(),\n        border: \"1px solid var(--mantine-color-default-border)\",\n        overflow: \"hidden\",\n        background: \"var(--mantine-color-body)\",\n        boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.15)\",\n        transition: \"width 0.3s ease\",\n      }}\n    >\n      <Flex\n        h={36}\n        px=\"sm\"\n        align=\"center\"\n        gap={8}\n        style={{\n          background: \"var(--mantine-color-default)\",\n          borderBottom: \"1px solid var(--mantine-color-default-border)\",\n        }}\n      >\n        <Flex gap={6}>\n          <Box\n            w={12}\n            h={12}\n            style={{ borderRadius: \"50%\", background: \"#ff5f57\" }}\n          />\n          <Box\n            w={12}\n            h={12}\n            style={{ borderRadius: \"50%\", background: \"#febc2e\" }}\n          />\n          <Box\n            w={12}\n            h={12}\n            style={{ borderRadius: \"50%\", background: \"#28c840\" }}\n          />\n        </Flex>\n\n        <Box\n          style={{\n            flex: 1,\n            textAlign: \"center\",\n            fontSize: 13,\n            color: \"var(--mantine-color-dimmed)\",\n          }}\n        >\n          {title}\n        </Box>\n\n        {fill ? undefined : (\n          <SegmentedControl\n            size=\"xs\"\n            value={size}\n            onChange={(v) => setSize(v as WindowSize)}\n            data={[\n              { label: \"25\", value: \"25\" },\n              { label: \"50\", value: \"50\" },\n              { label: \"75\", value: \"75\" },\n              { label: \"100\", value: \"100\" },\n            ]}\n          />\n        )}\n      </Flex>\n      <Flex\n        direction={\"column\"}\n        flex={fill ? 1 : undefined}\n        p=\"md\"\n        {...containerProps}\n      >\n        {children}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default MacWindow;\n","import { useForm } from \"@alepha/react/form\";\nimport { TypeForm, ui } from \"@alepha/ui\";\nimport { Box, Card, Flex, Text } from \"@mantine/core\";\nimport type { Static, TObject } from \"alepha\";\nimport { type ReactNode, useState } from \"react\";\nimport MacWindow, { type MacWindowProps } from \"./MacWindow.tsx\";\n\nexport interface ShowcaseProps<T extends TObject> {\n  /**\n   * Component title\n   */\n  title: string;\n  /**\n   * Schema for the props configuration\n   */\n  schema: T;\n  /**\n   * Initial values for the props\n   */\n  initialValues?: Partial<Static<T>>;\n  /**\n   * Number of columns for the props form\n   */\n  columns?: number;\n  /**\n   * Render function that receives the current props values\n   */\n  children: (props: Static<T>) => ReactNode;\n  /**\n   * Additional props for the MacWindow container\n   */\n  windowProps?: Partial<MacWindowProps>;\n}\n\n/**\n * Showcase component for demonstrating UI components with interactive props configuration.\n * Uses TypeForm to render a form based on the props schema and displays the component preview.\n */\nconst Showcase = <T extends TObject>({\n  title,\n  schema,\n  initialValues,\n  columns = 3,\n  children,\n  windowProps,\n}: ShowcaseProps<T>) => {\n  const [values, setValues] = useState<Record<string, any>>(\n    initialValues ?? {},\n  );\n\n  const form = useForm(\n    {\n      schema,\n      initialValues,\n      handler: (values) => {\n        setValues(values as Record<string, any>);\n      },\n      onChange: (key, value) => {\n        console.log(\"onChange\", key, value);\n        form.submit();\n      },\n    },\n    [schema],\n  );\n\n  return (\n    <Flex flex={1} h={\"100%\"}>\n      <Flex\n        flex={1}\n        bg={ui.colors.background}\n        h={\"100%\"}\n        p=\"xl\"\n        justify=\"center\"\n        align=\"flex-start\"\n        style={{ flex: 1, minWidth: 0, overflow: \"auto\" }}\n      >\n        <MacWindow title={title} {...windowProps}>\n          {children(values as Static<T>)}\n        </MacWindow>\n      </Flex>\n\n      <Box\n        bg={ui.colors.surface}\n        h={\"100%\"}\n        p={\"md\"}\n        style={{\n          flex: \"0 0 300px\",\n          overflow: \"auto\",\n        }}\n      >\n        <Card withBorder shadow=\"sm\" radius=\"md\" bg={ui.colors.elevated}>\n          <Card.Section withBorder py={\"xs\"} inheritPadding>\n            <Text size={\"xs\"} fw={500}>\n              {title} Props\n            </Text>\n          </Card.Section>\n\n          <Card.Section p={\"sm\"}>\n            <TypeForm\n              form={form}\n              columns={columns}\n              skipSubmitButton\n              skipFormElement\n            />\n          </Card.Section>\n        </Card>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default Showcase;\n"],"mappings":";;;;;;;AAYA,MAAM,aAAa,EACjB,UACA,OACA,gBACA,WACoB;CACpB,MAAM,CAAC,MAAM,WAAW,SAAqB,MAAM;CAEnD,MAAM,iBAAiB;AACrB,SAAO,GAAG,KAAK;;AAGjB,QACE,qBAAC;EACC,WAAU;EACV,MAAM,OAAO,IAAI;EACjB,GAAG,OAAO,SAAS;EACnB,MAAM;EACN,OAAO;GACL,OAAO,UAAU;GACjB,QAAQ;GACR,UAAU;GACV,YAAY;GACZ,WAAW;GACX,YAAY;GACb;aAED,qBAAC;GACC,GAAG;GACH,IAAG;GACH,OAAM;GACN,KAAK;GACL,OAAO;IACL,YAAY;IACZ,cAAc;IACf;;IAED,qBAAC;KAAK,KAAK;;MACT,oBAAC;OACC,GAAG;OACH,GAAG;OACH,OAAO;QAAE,cAAc;QAAO,YAAY;QAAW;QACrD;MACF,oBAAC;OACC,GAAG;OACH,GAAG;OACH,OAAO;QAAE,cAAc;QAAO,YAAY;QAAW;QACrD;MACF,oBAAC;OACC,GAAG;OACH,GAAG;OACH,OAAO;QAAE,cAAc;QAAO,YAAY;QAAW;QACrD;;MACG;IAEP,oBAAC;KACC,OAAO;MACL,MAAM;MACN,WAAW;MACX,UAAU;MACV,OAAO;MACR;eAEA;MACG;IAEL,OAAO,SACN,oBAAC;KACC,MAAK;KACL,OAAO;KACP,WAAW,MAAM,QAAQ,EAAgB;KACzC,MAAM;MACJ;OAAE,OAAO;OAAM,OAAO;OAAM;MAC5B;OAAE,OAAO;OAAM,OAAO;OAAM;MAC5B;OAAE,OAAO;OAAM,OAAO;OAAM;MAC5B;OAAE,OAAO;OAAO,OAAO;OAAO;MAC/B;MACD;;IAEC,EACP,oBAAC;GACC,WAAW;GACX,MAAM,OAAO,IAAI;GACjB,GAAE;GACF,GAAI;GAEH;IACI;GACF;;AAIX,wBAAe;;;;;;;;AClEf,MAAM,YAA+B,EACnC,OACA,QACA,eACA,UAAU,GACV,UACA,kBACsB;CACtB,MAAM,CAAC,QAAQ,aAAa,SAC1B,iBAAiB,EAAE,CACpB;CAED,MAAM,OAAO,QACX;EACE;EACA;EACA,UAAU,aAAW;AACnB,aAAUA,SAA8B;;EAE1C,WAAW,KAAK,UAAU;AACxB,WAAQ,IAAI,YAAY,KAAK,MAAM;AACnC,QAAK,QAAQ;;EAEhB,EACD,CAAC,OAAO,CACT;AAED,QACE,qBAAC;EAAK,MAAM;EAAG,GAAG;aAChB,oBAAC;GACC,MAAM;GACN,IAAI,GAAG,OAAO;GACd,GAAG;GACH,GAAE;GACF,SAAQ;GACR,OAAM;GACN,OAAO;IAAE,MAAM;IAAG,UAAU;IAAG,UAAU;IAAQ;aAEjD,oBAACC;IAAiB;IAAO,GAAI;cAC1B,SAAS,OAAoB;KACpB;IACP,EAEP,oBAAC;GACC,IAAI,GAAG,OAAO;GACd,GAAG;GACH,GAAG;GACH,OAAO;IACL,MAAM;IACN,UAAU;IACX;aAED,qBAAC;IAAK;IAAW,QAAO;IAAK,QAAO;IAAK,IAAI,GAAG,OAAO;eACrD,oBAAC,KAAK;KAAQ;KAAW,IAAI;KAAM;eACjC,qBAAC;MAAK,MAAM;MAAM,IAAI;iBACnB,OAAM;OACF;MACM,EAEf,oBAAC,KAAK;KAAQ,GAAG;eACf,oBAAC;MACO;MACG;MACT;MACA;OACA;MACW;KACV;IACH;GACD;;AAIX,uBAAe"}

package/dist/demo/index.d.ts

@@ -0,0 +1,97 @@
+import * as alepha0 from "alepha";
+import { Static, TObject } from "alepha";
+import * as _alepha_react_router0 from "@alepha/react/router";
+import { BoxProps } from "@mantine/core";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region ../../src/demo/components/DemoHome.d.ts
+declare const DemoHome: () => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ../../src/demo/components/DemoLayout.d.ts
+declare const DemoLayout: () => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ../../src/demo/components/json/DemoJsonViewer.d.ts
+declare const DemoJsonViewer: () => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ../../src/demo/components/shared/MacWindow.d.ts
+interface MacWindowProps {
+  children: ReactNode;
+  title?: string;
+  containerProps?: BoxProps;
+  fill?: boolean;
+}
+declare const MacWindow: ({
+  children,
+  title,
+  containerProps,
+  fill
+}: MacWindowProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ../../src/demo/components/shared/Showcase.d.ts
+interface ShowcaseProps<T extends TObject> {
+  /**
+   * Component title
+   */
+  title: string;
+  /**
+   * Schema for the props configuration
+   */
+  schema: T;
+  /**
+   * Initial values for the props
+   */
+  initialValues?: Partial<Static<T>>;
+  /**
+   * Number of columns for the props form
+   */
+  columns?: number;
+  /**
+   * Render function that receives the current props values
+   */
+  children: (props: Static<T>) => ReactNode;
+  /**
+   * Additional props for the MacWindow container
+   */
+  windowProps?: Partial<MacWindowProps>;
+}
+/**
+ * Showcase component for demonstrating UI components with interactive props configuration.
+ * Uses TypeForm to render a form based on the props schema and displays the component preview.
+ */
+declare const Showcase: <T extends TObject>({
+  title,
+  schema,
+  initialValues,
+  columns,
+  children,
+  windowProps
+}: ShowcaseProps<T>) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region ../../src/demo/DemoRouter.d.ts
+declare class DemoRouter {
+  demoLayout: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoHome: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoCore: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoTypeForm: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoSidebar: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoDataTable: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoJson: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoJsonViewer: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoAuth: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoLogin: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoRegister: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoResetPassword: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+  demoVerifyEmail: _alepha_react_router0.PagePrimitive<_alepha_react_router0.PageConfigSchema, any, _alepha_react_router0.TPropsParentDefault>;
+}
+//#endregion
+//#region ../../src/demo/index.d.ts
+/**
+ * Demo UI Module - Component showcase and documentation
+ *
+ * @module alepha.ui.demo
+ */
+declare const AlephaUIDemo: alepha0.Service<alepha0.Module>;
+//#endregion
+export { AlephaUIDemo, DemoHome, DemoJsonViewer, DemoLayout, DemoRouter, MacWindow, type MacWindowProps, Showcase, type ShowcaseProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/demo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/demo/components/DemoHome.tsx","../../src/demo/components/DemoLayout.tsx","../../src/demo/components/json/DemoJsonViewer.tsx","../../src/demo/components/shared/MacWindow.tsx","../../src/demo/components/shared/Showcase.tsx","../../src/demo/DemoRouter.ts","../../src/demo/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;cAaM,gBAAQ,kBAAA,CAAA,GAAA,CAAA;;;cCRR,kBAAU,kBAAA,CAAA,GAAA,CAAA;;;cC6EV,sBAAc,kBAAA,CAAA,GAAA,CAAA;;;UC/EH,cAAA;YACL;;mBAEO;;;AHOL,cGDR,SHcL,EAAA,CAba;EAAA,QAAA;EAAA,KAAA;EAAA,cAab;EAAA;AAAA,CAAA,EGTE,cHSF,EAAA,GGTgB,kBAAA,CAAA,GAAA,CAAA,OHShB;;;UInBgB,wBAAwB;;;;;EJMnC;;;UIEI;EHVJ;;;kBGcY,QAAQ,OAAO;EF+D3B;;;;EC/EW;AAKhB;;EAIkB,QAAA,EAAA,CAAA,KAAA,ECeC,MDfD,CCeQ,CDfR,CAAA,EAAA,GCee,SDff;EAAA;;;EAKF,WAAA,CAAA,ECcD,ODdC,CCcO,cDdP,CAAA;;;;;ACVjB;cA+BM,QA/BmC,EAAA,CAAA,UA+Bb,OA/Ba,CAAA,CAAA;EAAA,KAAA;EAAA,MAAA;EAAA,aAAA;EAAA,OAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAsCtC,aAtCsC,CAsCxB,CAtCwB,CAAA,EAAA,GAsCtB,kBAAA,CAAA,GAAA,CAAA,OAtCsB;;;cCU5B,UAAA;cACD,qBAAA,CAAA,cADW,qBAAA,CACX,gBAAA,OAAA,qBAAA,CAAA,mBAAA;YAaF,qBAAA,CAAA,cAbE,qBAAA,CAaF,gBAAA,OAAA,qBAAA,CAAA,mBAAA;YAQA,qBAAA,CAAA,cARA,qBAAA,CAQA,gBAAA,OAAA,qBAAA,CAAA,mBAAA;gBAOI,qBAAA,CAAA,cAPJ,qBAAA,CAOI,gBAAA,OAAA,qBAAA,CAAA,mBAAA;eAOD,qBAAA,CAAA,cAPC,qBAAA,CAOD,gBAAA,OAAA,qBAAA,CAAA,mBAAA;iBAOE,qBAAA,CAAA,cAPF,qBAAA,CAOE,gBAAA,OAAA,qBAAA,CAAA,mBAAA;YAQL,qBAAA,CAAA,cARK,qBAAA,CAQL,gBAAA,OAAA,qBAAA,CAAA,mBAAA;ELvDJ,cAaL,EKiDe,qBAAA,CAAA,aLjDf,CK0CS,qBAAA,CAOM,gBAAA,ELjDf,GAAA,EKiDe,qBAAA,CAAA,mBAAA,CLjDf;YKyDS,qBAAA,CAAA,cARM,qBAAA,CAQN,gBAAA,OAAA,qBAAA,CAAA,mBAAA;aAYC,qBAAA,CAAA,cAZD,qBAAA,CAYC,gBAAA,OAAA,qBAAA,CAAA,mBAAA;gBAOG,qBAAA,CAAA,cAPH,qBAAA,CAOG,gBAAA,OAAA,qBAAA,CAAA,mBAAA;EJjGR,iBA4CL,EI4DkB,qBAAA,CAAA,aJ5DlB,CIqDa,qBAAA,CAOK,gBAAA,EJ5DlB,GAAA,EI4DkB,qBAAA,CAAA,mBAAA,CJ5DlB;mBImEgB,qBAAA,CAAA,cAPE,qBAAA,CAOF,gBAAA,OAAA,qBAAA,CAAA,mBAAA;;;;;;ALvGH;;;cMaD,cAAY,OAAA,CAAA,QAGvB,OAAA,CAHuB,MAAA"}

package/dist/demo/index.js

@@ -0,0 +1,121 @@
+import { t as DemoHome_default } from "./DemoHome-CnuL5WV9.js";
+import { t as DemoLayout_default } from "./DemoLayout-dvbeuBBf.js";
+import { t as DemoJsonViewer_default } from "./DemoJsonViewer-NUGst5wW.js";
+import { n as MacWindow_default, t as Showcase_default } from "./Showcase-vemLuO2t.js";
+import { AlephaUI } from "@alepha/ui";
+import { $module } from "alepha";
+import { $page } from "@alepha/react/router";
+import { IconBinaryTree, IconBraces, IconForms, IconHome, IconKey, IconLayoutSidebar, IconLockQuestion, IconLogin, IconMailCheck, IconPackages, IconTable, IconUserPlus, IconWall } from "@tabler/icons-react";
+
+//#region ../../src/demo/DemoRouter.ts
+var DemoRouter = class {
+	demoLayout = $page({
+		icon: IconPackages,
+		path: "/demo",
+		label: "Demo",
+		lazy: () => import("./DemoLayout-ZFDzyvY3.js"),
+		children: () => [
+			this.demoHome,
+			this.demoCore,
+			this.demoJson,
+			this.demoAuth
+		]
+	});
+	demoHome = $page({
+		icon: IconHome,
+		path: "/",
+		label: "Home",
+		lazy: () => import("./DemoHome-D6Z7EE4V.js")
+	});
+	demoCore = $page({
+		icon: IconWall,
+		path: "/core",
+		label: "Core",
+		children: () => [
+			this.demoTypeForm,
+			this.demoSidebar,
+			this.demoDataTable
+		]
+	});
+	demoTypeForm = $page({
+		icon: IconForms,
+		path: "/type-form",
+		label: "TypeForm",
+		lazy: () => import("./DemoTypeForm-P5_VInW2.js")
+	});
+	demoSidebar = $page({
+		icon: IconLayoutSidebar,
+		path: "/sidebar",
+		label: "Sidebar",
+		lazy: () => import("./DemoSidebar-DWnjYHoP.js")
+	});
+	demoDataTable = $page({
+		icon: IconTable,
+		path: "/data-table",
+		label: "DataTable",
+		lazy: () => import("./DemoDataTable-2mzzf__a.js")
+	});
+	demoJson = $page({
+		icon: IconBraces,
+		path: "/json",
+		label: "Json",
+		children: () => [this.demoJsonViewer]
+	});
+	demoJsonViewer = $page({
+		icon: IconBinaryTree,
+		path: "/viewer",
+		label: "JsonViewer",
+		lazy: () => import("./DemoJsonViewer-CYUggLop.js")
+	});
+	demoAuth = $page({
+		icon: IconKey,
+		path: "/auth",
+		label: "Auth",
+		children: () => [
+			this.demoLogin,
+			this.demoRegister,
+			this.demoResetPassword,
+			this.demoVerifyEmail
+		]
+	});
+	demoLogin = $page({
+		icon: IconLogin,
+		path: "/login",
+		label: "Login",
+		lazy: () => import("./DemoLogin--wE44i23.js")
+	});
+	demoRegister = $page({
+		icon: IconUserPlus,
+		path: "/register",
+		label: "Register",
+		lazy: () => import("./DemoRegister-BtrMksx6.js")
+	});
+	demoResetPassword = $page({
+		icon: IconLockQuestion,
+		path: "/reset-password",
+		label: "ResetPassword",
+		lazy: () => import("./DemoResetPassword-DVXiiiX7.js")
+	});
+	demoVerifyEmail = $page({
+		icon: IconMailCheck,
+		path: "/verify-email",
+		label: "VerifyEmail",
+		lazy: () => import("./DemoVerifyEmail-C_ooC5u8.js")
+	});
+};
+
+//#endregion
+//#region ../../src/demo/index.ts
+/**
+* Demo UI Module - Component showcase and documentation
+*
+* @module alepha.ui.demo
+*/
+const AlephaUIDemo = $module({
+	name: "alepha.ui.demo",
+	services: [AlephaUI, DemoRouter]
+});
+
+//#endregion
+export { AlephaUIDemo, DemoHome_default as DemoHome, DemoJsonViewer_default as DemoJsonViewer, DemoLayout_default as DemoLayout, DemoRouter, MacWindow_default as MacWindow, Showcase_default as Showcase };
+//# sourceMappingURL=index.js.map