@alepha/ui 0.18.2 → 0.19.0

package/dist/demo/index.d.ts

@@ -16,6 +16,7 @@ declare class DemoRouter {
   demoToast: alepha_react_router0.PagePrimitive<alepha_react_router0.PageConfigSchema, any, alepha_react_router0.TPropsParentDefault>;
   demoForm: 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>;
+  demoControlSelect: alepha_react_router0.PagePrimitive<alepha_react_router0.PageConfigSchema, any, alepha_react_router0.TPropsParentDefault>;
   demoTable: 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>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/demo/DemoRouter.ts","../../src/demo/primitives/$uiDemo.ts","../../src/demo/index.ts"],"mappings":";;;;cAwBa,UAAA;EACX,UAAA,EAAU,oBAAA,CAAA,aAAA,CADW,oBAAA,CACX,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAgBV,QAAA,EAAQ,oBAAA,CAAA,aAAA,CAhBE,oBAAA,CAgBF,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQR,QAAA,EAAQ,oBAAA,CAAA,aAAA,CARA,oBAAA,CAQA,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAYR,QAAA,EAAQ,oBAAA,CAAA,aAAA,CAZA,oBAAA,CAYA,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOR,QAAA,EAAQ,oBAAA,CAAA,aAAA,CAPA,oBAAA,CAOA,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOR,WAAA,EAAW,oBAAA,CAAA,aAAA,CAPH,oBAAA,CAOG,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOX,UAAA,EAAU,oBAAA,CAAA,aAAA,CAPC,oBAAA,CAOD,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQV,iBAAA,EAAiB,oBAAA,CAAA,aAAA,CARP,oBAAA,CAQO,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOjB,WAAA,EAAW,oBAAA,CAAA,aAAA,CAPM,oBAAA,CAON,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOX,UAAA,EAAU,oBAAA,CAAA,aAAA,CAPC,oBAAA,CAOD,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOV,SAAA,EAAS,oBAAA,CAAA,aAAA,CAPC,oBAAA,CAOD,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQT,QAAA,EAAQ,oBAAA,CAAA,aAAA,CARC,oBAAA,CAQD,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOR,YAAA,EAAY,oBAAA,CAAA,aAAA,CAPJ,oBAAA,CAOI,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQZ,SAAA,EAAS,oBAAA,CAAA,aAAA,CARG,oBAAA,CAQH,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOT,aAAA,EAAa,oBAAA,CAAA,aAAA,CAPJ,oBAAA,CAOI,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQb,QAAA,EAAQ,oBAAA,CAAA,aAAA,CARK,oBAAA,CAQL,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOR,cAAA,EAAc,oBAAA,CAAA,aAAA,CAPN,oBAAA,CAOM,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQd,QAAA,EAAQ,oBAAA,CAAA,aAAA,CARM,oBAAA,CAQN,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAYR,SAAA,EAAS,oBAAA,CAAA,aAAA,CAZD,oBAAA,CAYC,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOT,YAAA,EAAY,oBAAA,CAAA,aAAA,CAPH,oBAAA,CAOG,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOZ,iBAAA,EAAiB,oBAAA,CAAA,aAAA,CAPL,oBAAA,CAOK,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOjB,eAAA,EAAe,oBAAA,CAAA,aAAA,CAPE,oBAAA,CAOF,gBAAA,OAAA,oBAAA,CAAA,mBAAA;AAAA;;;;;;cC/LJ,OAAA,QAAO,UAAA;;;;;ADkBpB;;;;;;;;;cEFa,YAAA,EAAY,MAAA,CAAA,OAAA,CAGvB,MAAA,CAHuB,MAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/demo/DemoRouter.ts","../../src/demo/primitives/$uiDemo.ts","../../src/demo/index.ts"],"mappings":";;;;cAwBa,UAAA;EACX,UAAA,EAAU,oBAAA,CAAA,aAAA,CADW,oBAAA,CACX,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAgBV,QAAA,EAAQ,oBAAA,CAAA,aAAA,CAhBE,oBAAA,CAgBF,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQR,QAAA,EAAQ,oBAAA,CAAA,aAAA,CARA,oBAAA,CAQA,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAYR,QAAA,EAAQ,oBAAA,CAAA,aAAA,CAZA,oBAAA,CAYA,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOR,QAAA,EAAQ,oBAAA,CAAA,aAAA,CAPA,oBAAA,CAOA,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOR,WAAA,EAAW,oBAAA,CAAA,aAAA,CAPH,oBAAA,CAOG,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOX,UAAA,EAAU,oBAAA,CAAA,aAAA,CAPC,oBAAA,CAOD,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQV,iBAAA,EAAiB,oBAAA,CAAA,aAAA,CARP,oBAAA,CAQO,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOjB,WAAA,EAAW,oBAAA,CAAA,aAAA,CAPM,oBAAA,CAON,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOX,UAAA,EAAU,oBAAA,CAAA,aAAA,CAPC,oBAAA,CAOD,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOV,SAAA,EAAS,oBAAA,CAAA,aAAA,CAPC,oBAAA,CAOD,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQT,QAAA,EAAQ,oBAAA,CAAA,aAAA,CARC,oBAAA,CAQD,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOR,YAAA,EAAY,oBAAA,CAAA,aAAA,CAPJ,oBAAA,CAOI,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOZ,iBAAA,EAAiB,oBAAA,CAAA,aAAA,CAPL,oBAAA,CAOK,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQjB,SAAA,EAAS,oBAAA,CAAA,aAAA,CARQ,oBAAA,CAQR,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOT,aAAA,EAAa,oBAAA,CAAA,aAAA,CAPJ,oBAAA,CAOI,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQb,QAAA,EAAQ,oBAAA,CAAA,aAAA,CARK,oBAAA,CAQL,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOR,cAAA,EAAc,oBAAA,CAAA,aAAA,CAPN,oBAAA,CAOM,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAQd,QAAA,EAAQ,oBAAA,CAAA,aAAA,CARM,oBAAA,CAQN,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAYR,SAAA,EAAS,oBAAA,CAAA,aAAA,CAZD,oBAAA,CAYC,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOT,YAAA,EAAY,oBAAA,CAAA,aAAA,CAPH,oBAAA,CAOG,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOZ,iBAAA,EAAiB,oBAAA,CAAA,aAAA,CAPL,oBAAA,CAOK,gBAAA,OAAA,oBAAA,CAAA,mBAAA;EAOjB,eAAA,EAAe,oBAAA,CAAA,aAAA,CAPE,oBAAA,CAOF,gBAAA,OAAA,oBAAA,CAAA,mBAAA;AAAA;;;;;;cCtMJ,OAAA,QAAO,UAAA;;;;;ADkBpB;;;;;;;;;cEFa,YAAA,EAAY,MAAA,CAAA,OAAA,CAGvB,MAAA,CAHuB,MAAA"}

package/dist/demo/index.js

@@ -1,15 +1,14 @@
-import { t as AlephaUI } from "./core-B7LNjM78.js";
+import { t as AlephaUI } from "./core-DRtQklr3.js";
 import { $context, $module } from "alepha";
 import { IconBell, IconBinaryTree, IconBraces, IconClick, IconForms, IconHeading, IconHome, IconKey, IconLayout, IconLayoutSidebar, IconLetterT, IconLockQuestion, IconLogin, IconMailCheck, IconMessage, IconPackages, IconRowInsertBottom, IconTable, IconUserPlus, IconWall } from "@tabler/icons-react";
 import { $page } from "alepha/react/router";
-
 //#region ../../src/demo/DemoRouter.ts
 var DemoRouter = class {
 	demoLayout = $page({
 		icon: IconPackages,
 		path: "/demo",
 		label: "Demo",
-		lazy: () => import("./DemoLayout-Cy6xjn6P.js"),
+		lazy: () => import("./DemoLayout-CN_PDCX2.js"),
 		children: () => [
 			this.demoHome,
 			this.demoCore,
@@ -24,7 +23,7 @@ var DemoRouter = class {
 		icon: IconHome,
 		path: "/",
 		label: "Home",
-		lazy: () => import("./DemoHome-BSGuBHus.js")
+		lazy: () => import("./DemoHome-DRbL2eGf.js")
 	});
 	demoCore = $page({
 		icon: IconWall,
@@ -41,25 +40,25 @@ var DemoRouter = class {
 		icon: IconRowInsertBottom,
 		path: "/flex",
 		label: "Flex",
-		lazy: () => import("./DemoFlex-CAhLUanT.js")
+		lazy: () => import("./DemoFlex-870PEl0V.js")
 	});
 	demoText = $page({
 		icon: IconLetterT,
 		path: "/text",
 		label: "Text",
-		lazy: () => import("./DemoText-DU3JeRS0.js")
+		lazy: () => import("./DemoText-pT6Gi5b5.js")
 	});
 	demoHeading = $page({
 		icon: IconHeading,
 		path: "/heading",
 		label: "Heading",
-		lazy: () => import("./DemoHeading-yIFmNjHB.js")
+		lazy: () => import("./DemoHeading-C1YR27fz.js")
 	});
 	demoButton = $page({
 		icon: IconClick,
 		path: "/button",
 		label: "Button",
-		lazy: () => import("./DemoButton-CGUyR9eM.js")
+		lazy: () => import("./DemoButton-_Ws2w-J0.js")
 	});
 	demoLayoutSection = $page({
 		icon: IconLayout,
@@ -75,31 +74,37 @@ var DemoRouter = class {
 		icon: IconLayoutSidebar,
 		path: "/sidebar",
 		label: "Sidebar",
-		lazy: () => import("./DemoSidebar-od7aLjP_.js")
+		lazy: () => import("./DemoSidebar-CfKS6w1o.js")
 	});
 	demoDialog = $page({
 		icon: IconMessage,
 		path: "/dialog",
 		label: "Dialog",
-		lazy: () => import("./DemoDialog-DW8QEvD1.js")
+		lazy: () => import("./DemoDialog-B01OMVRd.js")
 	});
 	demoToast = $page({
 		icon: IconBell,
 		path: "/toast",
 		label: "Toast",
-		lazy: () => import("./DemoToast-CUJEiPRa.js")
+		lazy: () => import("./DemoToast-I13NBzQQ.js")
 	});
 	demoForm = $page({
 		icon: IconForms,
 		path: "/form",
 		label: "Form",
-		children: () => [this.demoTypeForm]
+		children: () => [this.demoTypeForm, this.demoControlSelect]
 	});
 	demoTypeForm = $page({
 		icon: IconForms,
 		path: "/type-form",
 		label: "TypeForm",
-		lazy: () => import("./DemoTypeForm-C1dNkahD.js")
+		lazy: () => import("./DemoTypeForm-BqzcrtvN.js")
+	});
+	demoControlSelect = $page({
+		icon: IconForms,
+		path: "/control-select",
+		label: "ControlSelect",
+		lazy: () => import("./DemoControlSelect-ChP4ZOpQ.js")
 	});
 	demoTable = $page({
 		icon: IconTable,
@@ -111,7 +116,7 @@ var DemoRouter = class {
 		icon: IconTable,
 		path: "/data-table",
 		label: "DataTable",
-		lazy: () => import("./DemoDataTable-QFG-xXSx.js")
+		lazy: () => import("./DemoDataTable-Hwf_UUni.js")
 	});
 	demoJson = $page({
 		icon: IconBraces,
@@ -123,7 +128,7 @@ var DemoRouter = class {
 		icon: IconBinaryTree,
 		path: "/viewer",
 		label: "JsonViewer",
-		lazy: () => import("./DemoJsonViewer-DsA2IpgV.js")
+		lazy: () => import("./DemoJsonViewer-DoABiqBW.js")
 	});
 	demoAuth = $page({
 		icon: IconKey,
@@ -140,28 +145,27 @@ var DemoRouter = class {
 		icon: IconLogin,
 		path: "/login",
 		label: "Login",
-		lazy: () => import("./DemoLogin-vqxgTu4P.js")
+		lazy: () => import("./DemoLogin-B5x-ug3Q.js")
 	});
 	demoRegister = $page({
 		icon: IconUserPlus,
 		path: "/register",
 		label: "Register",
-		lazy: () => import("./DemoRegister-YHPvPg77.js")
+		lazy: () => import("./DemoRegister-Q6sg2xuV.js")
 	});
 	demoResetPassword = $page({
 		icon: IconLockQuestion,
 		path: "/reset-password",
 		label: "ResetPassword",
-		lazy: () => import("./DemoResetPassword-mOW18Zlm.js")
+		lazy: () => import("./DemoResetPassword-DrqZfmEw.js")
 	});
 	demoVerifyEmail = $page({
 		icon: IconMailCheck,
 		path: "/verify-email",
 		label: "VerifyEmail",
-		lazy: () => import("./DemoVerifyEmail-D9EcXZ38.js")
+		lazy: () => import("./DemoVerifyEmail-HwD8xfQw.js")
 	});
 };
-
 //#endregion
 //#region ../../src/demo/primitives/$uiDemo.ts
 /**
@@ -171,7 +175,6 @@ const $uiDemo = () => {
 	const { alepha } = $context();
 	return alepha.inject(DemoRouter);
 };
-
 //#endregion
 //#region ../../src/demo/index.ts
 /**
@@ -189,7 +192,7 @@ const AlephaUIDemo = $module({
 	name: "alepha.ui.demo",
 	services: [AlephaUI, DemoRouter]
 });
-
 //#endregion
 export { $uiDemo, AlephaUIDemo, DemoRouter };
+
 //# sourceMappingURL=index.js.map

package/dist/demo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/demo/DemoRouter.ts","../../src/demo/primitives/$uiDemo.ts","../../src/demo/index.ts"],"sourcesContent":["import {\n  IconBell,\n  IconBinaryTree,\n  IconBraces,\n  IconClick,\n  IconForms,\n  IconHeading,\n  IconHome,\n  IconKey,\n  IconLayout,\n  IconLayoutSidebar,\n  IconLetterT,\n  IconLockQuestion,\n  IconLogin,\n  IconMailCheck,\n  IconMessage,\n  IconPackages,\n  IconRowInsertBottom,\n  IconTable,\n  IconUserPlus,\n  IconWall,\n} from \"@tabler/icons-react\";\nimport { $page } from \"alepha/react/router\";\n\nexport class DemoRouter {\n  demoLayout = $page({\n    icon: IconPackages,\n    path: \"/demo\",\n    label: \"Demo\",\n    lazy: () => import(\"./components/DemoLayout.tsx\"),\n    children: () => [\n      this.demoHome,\n      this.demoCore,\n      this.demoLayoutSection,\n      this.demoForm,\n      this.demoTable,\n      this.demoJson,\n      this.demoAuth,\n    ],\n  });\n\n  demoHome = $page({\n    icon: IconHome,\n    path: \"/\",\n    label: \"Home\",\n    lazy: () => import(\"./components/DemoHome.tsx\"),\n  });\n\n  // Core Components\n  demoCore = $page({\n    icon: IconWall,\n    path: \"/core\",\n    label: \"Core\",\n    children: () => [\n      this.demoFlex,\n      this.demoText,\n      this.demoButton,\n      this.demoHeading,\n    ],\n  });\n\n  demoFlex = $page({\n    icon: IconRowInsertBottom,\n    path: \"/flex\",\n    label: \"Flex\",\n    lazy: () => import(\"./components/core/DemoFlex.tsx\"),\n  });\n\n  demoText = $page({\n    icon: IconLetterT,\n    path: \"/text\",\n    label: \"Text\",\n    lazy: () => import(\"./components/core/DemoText.tsx\"),\n  });\n\n  demoHeading = $page({\n    icon: IconHeading,\n    path: \"/heading\",\n    label: \"Heading\",\n    lazy: () => import(\"./components/core/DemoHeading.tsx\"),\n  });\n\n  demoButton = $page({\n    icon: IconClick,\n    path: \"/button\",\n    label: \"Button\",\n    lazy: () => import(\"./components/core/DemoButton.tsx\"),\n  });\n\n  // Layout Components\n  demoLayoutSection = $page({\n    icon: IconLayout,\n    path: \"/layout\",\n    label: \"Layout\",\n    children: () => [this.demoSidebar, this.demoDialog, this.demoToast],\n  });\n\n  demoSidebar = $page({\n    icon: IconLayoutSidebar,\n    path: \"/sidebar\",\n    label: \"Sidebar\",\n    lazy: () => import(\"./components/layout/DemoSidebar.tsx\"),\n  });\n\n  demoDialog = $page({\n    icon: IconMessage,\n    path: \"/dialog\",\n    label: \"Dialog\",\n    lazy: () => import(\"./components/layout/DemoDialog.tsx\"),\n  });\n\n  demoToast = $page({\n    icon: IconBell,\n    path: \"/toast\",\n    label: \"Toast\",\n    lazy: () => import(\"./components/layout/DemoToast.tsx\"),\n  });\n\n  // Form Components\n  demoForm = $page({\n    icon: IconForms,\n    path: \"/form\",\n    label: \"Form\",\n    children: () => [this.demoTypeForm],\n  });\n\n  demoTypeForm = $page({\n    icon: IconForms,\n    path: \"/type-form\",\n    label: \"TypeForm\",\n    lazy: () => import(\"./components/core/DemoTypeForm.tsx\"),\n  });\n\n  // Table Components\n  demoTable = $page({\n    icon: IconTable,\n    path: \"/table\",\n    label: \"Table\",\n    children: () => [this.demoDataTable],\n  });\n\n  demoDataTable = $page({\n    icon: IconTable,\n    path: \"/data-table\",\n    label: \"DataTable\",\n    lazy: () => import(\"./components/core/DemoDataTable.tsx\"),\n  });\n\n  // JSON Components\n  demoJson = $page({\n    icon: IconBraces,\n    path: \"/json\",\n    label: \"Json\",\n    children: () => [this.demoJsonViewer],\n  });\n\n  demoJsonViewer = $page({\n    icon: IconBinaryTree,\n    path: \"/viewer\",\n    label: \"JsonViewer\",\n    lazy: () => import(\"./components/json/DemoJsonViewer.tsx\"),\n  });\n\n  // Auth Components\n  demoAuth = $page({\n    icon: IconKey,\n    path: \"/auth\",\n    label: \"Auth\",\n    children: () => [\n      this.demoLogin,\n      this.demoRegister,\n      this.demoResetPassword,\n      this.demoVerifyEmail,\n    ],\n  });\n\n  demoLogin = $page({\n    icon: IconLogin,\n    path: \"/login\",\n    label: \"Login\",\n    lazy: () => import(\"./components/auth/DemoLogin.tsx\"),\n  });\n\n  demoRegister = $page({\n    icon: IconUserPlus,\n    path: \"/register\",\n    label: \"Register\",\n    lazy: () => import(\"./components/auth/DemoRegister.tsx\"),\n  });\n\n  demoResetPassword = $page({\n    icon: IconLockQuestion,\n    path: \"/reset-password\",\n    label: \"ResetPassword\",\n    lazy: () => import(\"./components/auth/DemoResetPassword.tsx\"),\n  });\n\n  demoVerifyEmail = $page({\n    icon: IconMailCheck,\n    path: \"/verify-email\",\n    label: \"VerifyEmail\",\n    lazy: () => import(\"./components/auth/DemoVerifyEmail.tsx\"),\n  });\n}\n","import { $context } from \"alepha\";\nimport { DemoRouter } from \"../DemoRouter.ts\";\n\n/**\n * Register Demo UI components and get the DemoRouter instance.\n */\nexport const $uiDemo = () => {\n  const { alepha } = $context();\n  return alepha.inject(DemoRouter);\n};\n","import { AlephaUI } from \"@alepha/ui\";\nimport { $module } from \"alepha\";\nimport { DemoRouter } from \"./DemoRouter.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport { DemoRouter } from \"./DemoRouter.ts\";\nexport * from \"./primitives/$uiDemo.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Component showcase and documentation.\n *\n * **Features:**\n * - DemoLayout for demo pages\n * - DemoHome landing page\n * - MacWindow component for showcases\n * - Showcase component for component demos\n *\n * @module alepha.ui.demo\n */\nexport const AlephaUIDemo = $module({\n  name: \"alepha.ui.demo\",\n  services: [AlephaUI, DemoRouter],\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/demo/DemoRouter.ts","../../src/demo/primitives/$uiDemo.ts","../../src/demo/index.ts"],"sourcesContent":["import {\n  IconBell,\n  IconBinaryTree,\n  IconBraces,\n  IconClick,\n  IconForms,\n  IconHeading,\n  IconHome,\n  IconKey,\n  IconLayout,\n  IconLayoutSidebar,\n  IconLetterT,\n  IconLockQuestion,\n  IconLogin,\n  IconMailCheck,\n  IconMessage,\n  IconPackages,\n  IconRowInsertBottom,\n  IconTable,\n  IconUserPlus,\n  IconWall,\n} from \"@tabler/icons-react\";\nimport { $page } from \"alepha/react/router\";\n\nexport class DemoRouter {\n  demoLayout = $page({\n    icon: IconPackages,\n    path: \"/demo\",\n    label: \"Demo\",\n    lazy: () => import(\"./components/DemoLayout.tsx\"),\n    children: () => [\n      this.demoHome,\n      this.demoCore,\n      this.demoLayoutSection,\n      this.demoForm,\n      this.demoTable,\n      this.demoJson,\n      this.demoAuth,\n    ],\n  });\n\n  demoHome = $page({\n    icon: IconHome,\n    path: \"/\",\n    label: \"Home\",\n    lazy: () => import(\"./components/DemoHome.tsx\"),\n  });\n\n  // Core Components\n  demoCore = $page({\n    icon: IconWall,\n    path: \"/core\",\n    label: \"Core\",\n    children: () => [\n      this.demoFlex,\n      this.demoText,\n      this.demoButton,\n      this.demoHeading,\n    ],\n  });\n\n  demoFlex = $page({\n    icon: IconRowInsertBottom,\n    path: \"/flex\",\n    label: \"Flex\",\n    lazy: () => import(\"./components/core/DemoFlex.tsx\"),\n  });\n\n  demoText = $page({\n    icon: IconLetterT,\n    path: \"/text\",\n    label: \"Text\",\n    lazy: () => import(\"./components/core/DemoText.tsx\"),\n  });\n\n  demoHeading = $page({\n    icon: IconHeading,\n    path: \"/heading\",\n    label: \"Heading\",\n    lazy: () => import(\"./components/core/DemoHeading.tsx\"),\n  });\n\n  demoButton = $page({\n    icon: IconClick,\n    path: \"/button\",\n    label: \"Button\",\n    lazy: () => import(\"./components/core/DemoButton.tsx\"),\n  });\n\n  // Layout Components\n  demoLayoutSection = $page({\n    icon: IconLayout,\n    path: \"/layout\",\n    label: \"Layout\",\n    children: () => [this.demoSidebar, this.demoDialog, this.demoToast],\n  });\n\n  demoSidebar = $page({\n    icon: IconLayoutSidebar,\n    path: \"/sidebar\",\n    label: \"Sidebar\",\n    lazy: () => import(\"./components/layout/DemoSidebar.tsx\"),\n  });\n\n  demoDialog = $page({\n    icon: IconMessage,\n    path: \"/dialog\",\n    label: \"Dialog\",\n    lazy: () => import(\"./components/layout/DemoDialog.tsx\"),\n  });\n\n  demoToast = $page({\n    icon: IconBell,\n    path: \"/toast\",\n    label: \"Toast\",\n    lazy: () => import(\"./components/layout/DemoToast.tsx\"),\n  });\n\n  // Form Components\n  demoForm = $page({\n    icon: IconForms,\n    path: \"/form\",\n    label: \"Form\",\n    children: () => [this.demoTypeForm, this.demoControlSelect],\n  });\n\n  demoTypeForm = $page({\n    icon: IconForms,\n    path: \"/type-form\",\n    label: \"TypeForm\",\n    lazy: () => import(\"./components/core/DemoTypeForm.tsx\"),\n  });\n\n  demoControlSelect = $page({\n    icon: IconForms,\n    path: \"/control-select\",\n    label: \"ControlSelect\",\n    lazy: () => import(\"./components/core/DemoControlSelect.tsx\"),\n  });\n\n  // Table Components\n  demoTable = $page({\n    icon: IconTable,\n    path: \"/table\",\n    label: \"Table\",\n    children: () => [this.demoDataTable],\n  });\n\n  demoDataTable = $page({\n    icon: IconTable,\n    path: \"/data-table\",\n    label: \"DataTable\",\n    lazy: () => import(\"./components/core/DemoDataTable.tsx\"),\n  });\n\n  // JSON Components\n  demoJson = $page({\n    icon: IconBraces,\n    path: \"/json\",\n    label: \"Json\",\n    children: () => [this.demoJsonViewer],\n  });\n\n  demoJsonViewer = $page({\n    icon: IconBinaryTree,\n    path: \"/viewer\",\n    label: \"JsonViewer\",\n    lazy: () => import(\"./components/json/DemoJsonViewer.tsx\"),\n  });\n\n  // Auth Components\n  demoAuth = $page({\n    icon: IconKey,\n    path: \"/auth\",\n    label: \"Auth\",\n    children: () => [\n      this.demoLogin,\n      this.demoRegister,\n      this.demoResetPassword,\n      this.demoVerifyEmail,\n    ],\n  });\n\n  demoLogin = $page({\n    icon: IconLogin,\n    path: \"/login\",\n    label: \"Login\",\n    lazy: () => import(\"./components/auth/DemoLogin.tsx\"),\n  });\n\n  demoRegister = $page({\n    icon: IconUserPlus,\n    path: \"/register\",\n    label: \"Register\",\n    lazy: () => import(\"./components/auth/DemoRegister.tsx\"),\n  });\n\n  demoResetPassword = $page({\n    icon: IconLockQuestion,\n    path: \"/reset-password\",\n    label: \"ResetPassword\",\n    lazy: () => import(\"./components/auth/DemoResetPassword.tsx\"),\n  });\n\n  demoVerifyEmail = $page({\n    icon: IconMailCheck,\n    path: \"/verify-email\",\n    label: \"VerifyEmail\",\n    lazy: () => import(\"./components/auth/DemoVerifyEmail.tsx\"),\n  });\n}\n","import { $context } from \"alepha\";\nimport { DemoRouter } from \"../DemoRouter.ts\";\n\n/**\n * Register Demo UI components and get the DemoRouter instance.\n */\nexport const $uiDemo = () => {\n  const { alepha } = $context();\n  return alepha.inject(DemoRouter);\n};\n","import { AlephaUI } from \"@alepha/ui\";\nimport { $module } from \"alepha\";\nimport { DemoRouter } from \"./DemoRouter.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport { DemoRouter } from \"./DemoRouter.ts\";\nexport * from \"./primitives/$uiDemo.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Component showcase and documentation.\n *\n * **Features:**\n * - DemoLayout for demo pages\n * - DemoHome landing page\n * - MacWindow component for showcases\n * - Showcase component for component demos\n *\n * @module alepha.ui.demo\n */\nexport const AlephaUIDemo = $module({\n  name: \"alepha.ui.demo\",\n  services: [AlephaUI, DemoRouter],\n});\n"],"mappings":"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"}

package/dist/demo/rolldown-runtime-CiIaOW0V.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -22,33 +22,33 @@
     "styles.css"
   ],
   "dependencies": {
-    "@mantine/charts": "^8.3.15",
-    "@mantine/core": "^8.3.15",
-    "@mantine/dates": "^8.3.15",
-    "@mantine/hooks": "^8.3.15",
-    "@mantine/modals": "^8.3.15",
-    "@mantine/notifications": "^8.3.15",
-    "@mantine/nprogress": "^8.3.15",
-    "@mantine/spotlight": "^8.3.15",
-    "@tabler/icons-react": "^3.37.1",
-    "dayjs": "^1.11.19",
+    "@mantine/charts": "^8.3.18",
+    "@mantine/core": "^8.3.18",
+    "@mantine/dates": "^8.3.18",
+    "@mantine/hooks": "^8.3.18",
+    "@mantine/modals": "^8.3.18",
+    "@mantine/notifications": "^8.3.18",
+    "@mantine/nprogress": "^8.3.18",
+    "@mantine/spotlight": "^8.3.18",
+    "@tabler/icons-react": "^3.40.0",
+    "dayjs": "^1.11.20",
     "react-is": "^19.2.4",
-    "recharts": "^3.7.0"
+    "recharts": "^3.8.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.4",
+    "@biomejs/biome": "^2.4.8",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/react-is": "^19.2.0",
-    "alepha": "0.18.2",
+    "alepha": "0.19.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0"
   },
   "peerDependencies": {
-    "alepha": "0.18.2",
+    "alepha": "0.19.0",
     "react": "*",
     "react-dom": "*"
   },
@@ -58,7 +58,7 @@
     "typecheck": "alepha typecheck",
     "test": "alepha test",
     "build": "node ../alepha/scripts/build.ts",
-    "build:check": "node scripts/build.ts --check"
+    "build:check": "node ../alepha/scripts/build.ts --check"
   },
   "repository": {
     "type": "git",
@@ -87,6 +87,6 @@
       "default": "./dist/demo/index.js"
     },
     "./styles": "./src/core/styles.css",
-    "./json/styles": "./src/json/styles.css"
+    "./styles.css": "./src/core/styles.css"
   }
 }

package/src/admin/AdminRouter.tsx

@@ -9,6 +9,7 @@ import {
 } from "@alepha/ui";
 import { AuthRouter, UserButton } from "@alepha/ui/auth";
 import {
+  IconBell,
   IconClock,
   IconDashboard,
   IconDevices,
@@ -23,12 +24,12 @@ import {
   IconUser,
   IconUsers,
 } from "@tabler/icons-react";
-import { $inject } from "alepha";
+import { $inject, t } from "alepha";
 import type { AdminAuditController } from "alepha/api/audits";
 import type { FileController } from "alepha/api/files";
 import type { AdminJobController } from "alepha/api/jobs";
 import type { AdminApiKeyController } from "alepha/api/keys";
-
+import type { AdminNotificationController } from "alepha/api/notifications";
 import type { AdminParameterController } from "alepha/api/parameters";
 import type {
   AdminSessionController,
@@ -36,6 +37,7 @@ import type {
 } from "alepha/api/users";
 import { ReactAuth } from "alepha/react/auth";
 import { $page, ReactRouter, Redirection } from "alepha/react/router";
+import { $secure } from "alepha/security";
 import { $cookie } from "alepha/server/cookies";
 import { $client } from "alepha/server/links";
 
@@ -51,6 +53,7 @@ export class AdminRouter {
   protected readonly auditCtrl = $client<AdminAuditController>();
   protected readonly jobCtrl = $client<AdminJobController>();
   protected readonly apiKeyCtrl = $client<AdminApiKeyController>();
+  protected readonly notificationCtrl = $client<AdminNotificationController>();
 
   public readonly adminCookie = $cookie(alephaSidebarAtom, {
     name: "admin.sidebar",
@@ -159,6 +162,10 @@ export class AdminRouter {
               { ...this.router.node(this.adminJobExecutions.name) },
             ],
           },
+          {
+            ...this.router.node(this.adminNotifications.name),
+            can: () => this.notificationCtrl.findNotifications.can(),
+          },
           {
             ...this.router.node(this.adminParameters.name),
             can: () => this.paramCtrl.getParameterTree.can(),
@@ -196,6 +203,11 @@ export class AdminRouter {
       title: "Admin Panel",
       titleSeparator: " | ",
     },
+    use: [
+      $secure({
+        permissions: ["admin:access"],
+      }),
+    ],
     lazy: () => import("./components/AdminLayout.tsx"),
     props: () => ({
       adminShellProps: this.adminShellProps(),
@@ -243,7 +255,18 @@ export class AdminRouter {
     head: {
       title: "Users",
     },
+    schema: {
+      params: t.object({
+        userId: t.text(),
+      }),
+    },
     lazy: () => import("./components/users/AdminUserLayout.tsx"),
+    loader: async ({ params }) => {
+      const user = await this.userCtrl.getUser({
+        params: { id: params.userId },
+      });
+      return { user };
+    },
   });
 
   public readonly adminUserProfile = $page({
@@ -390,4 +413,21 @@ export class AdminRouter {
     lazy: () => import("./components/keys/AdminApiKeys.tsx"),
     can: () => this.apiKeyCtrl.findApiKeys.can(),
   });
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Notifications
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly adminNotifications = $page({
+    icon: IconBell,
+    parent: this.adminLayout,
+    path: "/notifications",
+    label: "Notifications",
+    description: "View sent notifications and their delivery status.",
+    head: {
+      title: "Notifications",
+    },
+    lazy: () => import("./components/notifications/AdminNotifications.tsx"),
+    can: () => this.notificationCtrl.findNotifications.can(),
+  });
 }

package/src/admin/atoms/adminUserAtom.ts

@@ -0,0 +1,7 @@
+import { $atom, t } from "alepha";
+import { users } from "alepha/api/users";
+
+export const adminUserAtom = $atom({
+  name: "alepha.admin.user",
+  schema: t.optional(users.schema),
+});

package/src/admin/components/AdminLayout.tsx

@@ -4,10 +4,9 @@ import {
   DashboardShell,
   type DashboardShellProps,
   SidebarCollapseButton,
-  Text,
   ui,
 } from "@alepha/ui";
-import { Flex, Image } from "@mantine/core";
+import { Flex } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
 
 export interface AdminLayoutProps {
@@ -31,7 +30,7 @@ const AdminLayout = (props: AdminLayoutProps) => {
     >
       <DashboardShell
         layout={"alt"}
-        navbarHeader={(props) => (
+        navbarHeader={() => (
           <Flex gap={"md"} flex={1} px={"lg"} align={"center"}>
             <ActionButton
               href={"/"}
@@ -39,17 +38,6 @@ const AdminLayout = (props: AdminLayoutProps) => {
               bd={0}
               icon={IconArrowLeft}
             />
-            {!props.collapsed && (
-              <>
-                <Image pt={4} src={"/favicon.svg"} h={36} w={36} />
-                <Flex direction={"column"}>
-                  <Text bold>Blog</Text>
-                  <Text small muted mt={-4}>
-                    Admin Panel
-                  </Text>
-                </Flex>
-              </>
-            )}
           </Flex>
         )}
         footerHeight={48}

package/src/admin/components/jobs/AdminJobDashboard.tsx

@@ -1,6 +1,6 @@
 import { ActionButton, Flex, StatCards, Text, useToast } from "@alepha/ui";
 import { AreaChart, BarChart, DonutChart } from "@mantine/charts";
-import { Paper, SimpleGrid, Table } from "@mantine/core";
+import { Paper, SegmentedControl, SimpleGrid, Table } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconCircleCheck,
@@ -21,6 +21,13 @@ import { useCallback, useEffect, useState } from "react";
 
 // ─────────────────────────────────────────────────────────────────────────────
 
+const TIME_RANGES = [
+  { label: "24h", value: "1" },
+  { label: "7d", value: "7" },
+  { label: "14d", value: "14" },
+  { label: "30d", value: "30" },
+];
+
 const formatDuration = (
   start: Date | string,
   end?: Date | string | null,
@@ -53,20 +60,23 @@ const AdminJobDashboard = () => {
   const { l } = useI18n();
   const toast = useToast();
 
+  const [days, setDays] = useState("7");
   const [stats, setStats] = useState<JobStats | null>(null);
   const [recent, setRecent] = useState<RecentExecution[]>([]);
   const [failures, setFailures] = useState<JobFailure[]>([]);
   const [activity, setActivity] = useState<JobActivityPoint[]>([]);
   const [queueDepth, setQueueDepth] = useState<JobQueueDepth[]>([]);
 
+  const daysNum = Number(days);
+
   const loadData = useCallback(async () => {
     try {
       const [statsData, recentData, failureData, activityData, queueData] =
         await Promise.all([
-          client.getJobStats(),
+          client.getJobStats({ query: { days: daysNum } }),
           client.findJobExecutions({ query: { sort: "-createdAt", size: 10 } }),
-          client.getJobTopFailures(),
-          client.getJobActivity({ query: { days: 14 } }),
+          client.getJobTopFailures({ query: { days: daysNum } }),
+          client.getJobActivity({ query: { days: daysNum } }),
           client.getJobQueueDepth(),
         ]);
       setStats(statsData);
@@ -77,7 +87,7 @@ const AdminJobDashboard = () => {
     } catch {
       toast.danger("Failed to load dashboard data");
     }
-  }, [client, toast]);
+  }, [client, toast, daysNum]);
 
   useEffect(() => {
     loadData();
@@ -119,19 +129,40 @@ const AdminJobDashboard = () => {
       ].filter((d) => d.value > 0)
     : [];
 
+  const rangeLabel =
+    TIME_RANGES.find((r) => r.value === days)?.label ?? `${days}d`;
+
   return (
     <Flex flex={1} direction="column" gap="md" p="md">
       <Flex justify="space-between" align="center">
         <Text size="lg" fw={600}>
           Jobs Dashboard
         </Text>
-        <ActionButton
-          tooltip="Refresh"
-          variant="light"
-          size="sm"
-          icon={IconRefresh}
-          onClick={loadData}
-        />
+        <Flex
+          gap="sm"
+          align="center"
+          py="xs"
+          px="sm"
+          style={{
+            backgroundColor: "var(--mantine-color-body)",
+            borderRadius: "var(--mantine-radius-md)",
+            border: "1px solid var(--mantine-color-default-border)",
+          }}
+        >
+          <SegmentedControl
+            size="xs"
+            data={TIME_RANGES}
+            value={days}
+            onChange={setDays}
+          />
+          <ActionButton
+            tooltip="Refresh"
+            variant="minimal"
+            size="sm"
+            icon={IconRefresh}
+            onClick={loadData}
+          />
+        </Flex>
       </Flex>
 
       {/* Stats Cards */}
@@ -149,13 +180,13 @@ const AdminJobDashboard = () => {
               icon: IconPlayerPlay,
             },
             {
-              label: "Completed 24h",
-              value: stats.completed24h,
+              label: `Completed (${rangeLabel})`,
+              value: stats.completed,
               icon: IconCircleCheck,
             },
             {
-              label: "Failed 24h",
-              value: stats.failed24h,
+              label: `Failed (${rangeLabel})`,
+              value: stats.failed,
               icon: IconAlertTriangle,
             },
           ]}
@@ -167,7 +198,7 @@ const AdminJobDashboard = () => {
         {/* Activity Timeline */}
         <Paper p="md" radius="md" withBorder>
           <Text size="sm" fw={600} mb="sm">
-            Activity (14d)
+            Activity ({rangeLabel})
           </Text>
           {activityChartData.length > 0 ? (
             <AreaChart
@@ -292,10 +323,10 @@ const AdminJobDashboard = () => {
           </Table>
         </Paper>
 
-        {/* Top Failures (7d) */}
+        {/* Top Failures */}
         <Paper p="md" radius="md" withBorder>
           <Text size="sm" fw={600} mb="sm">
-            Top Failures (7d)
+            Top Failures ({rangeLabel})
           </Text>
           {failures.length > 0 ? (
             <Table>
@@ -336,7 +367,7 @@ const AdminJobDashboard = () => {
           ) : (
             <Flex h={100} align="center" justify="center">
               <Text size="sm" c="dimmed">
-                No failures in the last 7 days
+                No failures in the last {rangeLabel}
               </Text>
             </Flex>
           )}