@alepha/ui 0.18.1 → 0.18.3

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,4 +1,4 @@
-import { t as AlephaUI } from "./core-RCUw1Q-a.js";
+import { t as AlephaUI } from "./core-DFgB3yU4.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";
@@ -9,7 +9,7 @@ var DemoRouter = class {
 		icon: IconPackages,
 		path: "/demo",
 		label: "Demo",
-		lazy: () => import("./DemoLayout-C56xb5EE.js"),
+		lazy: () => import("./DemoLayout-CHU8WTwO.js"),
 		children: () => [
 			this.demoHome,
 			this.demoCore,
@@ -24,7 +24,7 @@ var DemoRouter = class {
 		icon: IconHome,
 		path: "/",
 		label: "Home",
-		lazy: () => import("./DemoHome-Clbn8AmS.js")
+		lazy: () => import("./DemoHome-D_De3UiT.js")
 	});
 	demoCore = $page({
 		icon: IconWall,
@@ -41,25 +41,25 @@ var DemoRouter = class {
 		icon: IconRowInsertBottom,
 		path: "/flex",
 		label: "Flex",
-		lazy: () => import("./DemoFlex-EtVq8QfX.js")
+		lazy: () => import("./DemoFlex-a8OhMMvq.js")
 	});
 	demoText = $page({
 		icon: IconLetterT,
 		path: "/text",
 		label: "Text",
-		lazy: () => import("./DemoText-CzXuUn3g.js")
+		lazy: () => import("./DemoText-ubcw-vog.js")
 	});
 	demoHeading = $page({
 		icon: IconHeading,
 		path: "/heading",
 		label: "Heading",
-		lazy: () => import("./DemoHeading-BS-vGfkI.js")
+		lazy: () => import("./DemoHeading-C13OVDfS.js")
 	});
 	demoButton = $page({
 		icon: IconClick,
 		path: "/button",
 		label: "Button",
-		lazy: () => import("./DemoButton-BmaWZVwf.js")
+		lazy: () => import("./DemoButton-wiCxZZ_L.js")
 	});
 	demoLayoutSection = $page({
 		icon: IconLayout,
@@ -75,31 +75,37 @@ var DemoRouter = class {
 		icon: IconLayoutSidebar,
 		path: "/sidebar",
 		label: "Sidebar",
-		lazy: () => import("./DemoSidebar-CcBo4ltC.js")
+		lazy: () => import("./DemoSidebar-Giy2HRBD.js")
 	});
 	demoDialog = $page({
 		icon: IconMessage,
 		path: "/dialog",
 		label: "Dialog",
-		lazy: () => import("./DemoDialog-4ItHLf9t.js")
+		lazy: () => import("./DemoDialog-CUWdLHim.js")
 	});
 	demoToast = $page({
 		icon: IconBell,
 		path: "/toast",
 		label: "Toast",
-		lazy: () => import("./DemoToast-BgHDhWrX.js")
+		lazy: () => import("./DemoToast-9die_dYT.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-DDzWoMSV.js")
+		lazy: () => import("./DemoTypeForm-D_d6OVKL.js")
+	});
+	demoControlSelect = $page({
+		icon: IconForms,
+		path: "/control-select",
+		label: "ControlSelect",
+		lazy: () => import("./DemoControlSelect-D7ILObVg.js")
 	});
 	demoTable = $page({
 		icon: IconTable,
@@ -111,7 +117,7 @@ var DemoRouter = class {
 		icon: IconTable,
 		path: "/data-table",
 		label: "DataTable",
-		lazy: () => import("./DemoDataTable-Z9xyV221.js")
+		lazy: () => import("./DemoDataTable-DZ5Y8pFX.js")
 	});
 	demoJson = $page({
 		icon: IconBraces,
@@ -123,7 +129,7 @@ var DemoRouter = class {
 		icon: IconBinaryTree,
 		path: "/viewer",
 		label: "JsonViewer",
-		lazy: () => import("./DemoJsonViewer-DkIX_ky2.js")
+		lazy: () => import("./DemoJsonViewer-B50s9aGM.js")
 	});
 	demoAuth = $page({
 		icon: IconKey,
@@ -140,25 +146,25 @@ var DemoRouter = class {
 		icon: IconLogin,
 		path: "/login",
 		label: "Login",
-		lazy: () => import("./DemoLogin-BZwpicOS.js")
+		lazy: () => import("./DemoLogin-BBlrWpml.js")
 	});
 	demoRegister = $page({
 		icon: IconUserPlus,
 		path: "/register",
 		label: "Register",
-		lazy: () => import("./DemoRegister-C7_qc4MJ.js")
+		lazy: () => import("./DemoRegister-BuNE3_-f.js")
 	});
 	demoResetPassword = $page({
 		icon: IconLockQuestion,
 		path: "/reset-password",
 		label: "ResetPassword",
-		lazy: () => import("./DemoResetPassword-BI1Ct4Dw.js")
+		lazy: () => import("./DemoResetPassword-D_IjjjOJ.js")
 	});
 	demoVerifyEmail = $page({
 		icon: IconMailCheck,
 		path: "/verify-email",
 		label: "VerifyEmail",
-		lazy: () => import("./DemoVerifyEmail-C_Irdnov.js")
+		lazy: () => import("./DemoVerifyEmail-B43KlF4F.js")
 	});
 };
 

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/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -30,17 +30,17 @@
     "@mantine/notifications": "^8.3.15",
     "@mantine/nprogress": "^8.3.15",
     "@mantine/spotlight": "^8.3.15",
-    "@tabler/icons-react": "^3.37.1",
+    "@tabler/icons-react": "^3.38.0",
     "dayjs": "^1.11.19",
     "react-is": "^19.2.4",
     "recharts": "^3.7.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.4",
+    "@biomejs/biome": "^2.4.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/react-is": "^19.2.0",
-    "alepha": "0.18.1",
+    "alepha": "0.18.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
@@ -48,7 +48,7 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "alepha": "0.18.1",
+    "alepha": "0.18.3",
     "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.ts → AdminRouter.tsx}

@@ -1,12 +1,24 @@
-import type { DashboardShellProps, SidebarNode } from "@alepha/ui";
-import { AuthRouter } from "@alepha/ui/auth";
 import {
+  type AppBarItem,
+  alephaSidebarAtom,
+  Breadcrumbs,
+  type DashboardShellProps,
+  LanguageButton,
+  type SidebarNode,
+  ThemeButton,
+} from "@alepha/ui";
+import { AuthRouter, UserButton } from "@alepha/ui/auth";
+import {
+  IconBell,
   IconClock,
+  IconDashboard,
   IconDevices,
   IconFile,
   IconHistory,
   IconKey,
+  IconLayoutDashboard,
   IconListDetails,
+  IconLockPassword,
   IconSettings,
   IconTerminal2,
   IconUser,
@@ -17,7 +29,7 @@ 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,
@@ -25,6 +37,7 @@ import type {
 } from "alepha/api/users";
 import { ReactAuth } from "alepha/react/auth";
 import { $page, ReactRouter, Redirection } from "alepha/react/router";
+import { $cookie } from "alepha/server/cookies";
 import { $client } from "alepha/server/links";
 
 export class AdminRouter {
@@ -39,32 +52,92 @@ 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",
+  });
 
   public configFn?: (adminRouter: AdminRouter) => DashboardShellProps = () => {
     return {
       sidebarProps: {
         items: this.getDefaultSidebarItems(),
       },
+      appBarProps: {
+        items: this.getDefaultAppBarItems(),
+      },
     };
   };
 
+  public getDefaultAppBarItems(): AppBarItem[] {
+    return [
+      {
+        type: "burger",
+        position: "left",
+      },
+      {
+        element: <Breadcrumbs />,
+        position: "left",
+      },
+      {
+        element: <UserButton />,
+        position: "right",
+      },
+      {
+        element: <ThemeButton expert />,
+        position: "right",
+      },
+      {
+        element: <LanguageButton />,
+        position: "right",
+      },
+      {
+        type: "dark",
+        position: "right",
+      },
+    ];
+  }
+
   public getDefaultSidebarItems(): SidebarNode[] {
     return [
+      {
+        position: "top",
+        type: "search",
+      },
+      {
+        position: "top",
+        type: "spacer",
+      },
+      {
+        label: "Dashboard",
+        href: "/admin",
+        icon: IconLayoutDashboard,
+      },
       {
         type: "section",
-        label: "Identity",
+        label: "Security",
         children: [
           {
-            ...this.router.node(this.adminUsers.name),
-            can: () => this.userCtrl.findUsers.can(),
-          },
-          {
-            ...this.router.node(this.adminSessions.name),
-            can: () => this.sessionCtrl.findSessions.can(),
+            label: "Identity",
+            icon: IconLockPassword,
+            children: [
+              {
+                ...this.router.node(this.adminUsers.name),
+                can: () => this.userCtrl.findUsers.can(),
+              },
+              {
+                ...this.router.node(this.adminSessions.name),
+                can: () => this.sessionCtrl.findSessions.can(),
+              },
+              {
+                ...this.router.node(this.adminApiKeys.name),
+                can: () => this.apiKeyCtrl.findApiKeys.can(),
+              },
+            ],
           },
           {
-            ...this.router.node(this.adminApiKeys.name),
-            can: () => this.apiKeyCtrl.findApiKeys.can(),
+            ...this.router.node(this.adminAudits.name),
+            can: () => this.auditCtrl.findAudits.can(),
           },
         ],
       },
@@ -77,9 +150,8 @@ export class AdminRouter {
             can: () => this.fileCtrl.findFiles.can(),
           },
           {
-            ...this.router.node(this.adminJobDashboard.name),
-            href: undefined,
-            can: () => this.jobCtrl.getJobRegistry.can(),
+            label: "Jobs",
+            icon: IconTerminal2,
             children: [
               {
                 ...this.router.node(this.adminJobDashboard.name),
@@ -90,8 +162,8 @@ export class AdminRouter {
             ],
           },
           {
-            ...this.router.node(this.adminAudits.name),
-            can: () => this.auditCtrl.findAudits.can(),
+            ...this.router.node(this.adminNotifications.name),
+            can: () => this.notificationCtrl.findNotifications.can(),
           },
           {
             ...this.router.node(this.adminParameters.name),
@@ -126,6 +198,10 @@ export class AdminRouter {
   public readonly adminLayout = $page({
     path: "/admin",
     label: "Admin",
+    head: {
+      title: "Admin Panel",
+      titleSeparator: " | ",
+    },
     lazy: () => import("./components/AdminLayout.tsx"),
     props: () => ({
       adminShellProps: this.adminShellProps(),
@@ -138,6 +214,18 @@ export class AdminRouter {
     },
   });
 
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Dashboard
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly adminDashboard = $page({
+    icon: IconLayoutDashboard,
+    parent: this.adminLayout,
+    path: "/",
+    label: "Dashboard",
+    lazy: () => import("./components/AdminDashboard.tsx"),
+  });
+
   // ─────────────────────────────────────────────────────────────────────────────
   // Users
   // ─────────────────────────────────────────────────────────────────────────────
@@ -147,6 +235,9 @@ export class AdminRouter {
     parent: this.adminLayout,
     path: "/users",
     label: "Users",
+    head: {
+      title: "Users",
+    },
     description: "Manage application users and their roles.",
     lazy: () => import("./components/users/AdminUsers.tsx"),
     can: () => this.userCtrl.findUsers.can(),
@@ -155,6 +246,9 @@ export class AdminRouter {
   public readonly adminUserLayout = $page({
     parent: this.adminLayout,
     path: "/users/:userId",
+    head: {
+      title: "Users",
+    },
     lazy: () => import("./components/users/AdminUserLayout.tsx"),
   });
 
@@ -163,6 +257,9 @@ export class AdminRouter {
     parent: this.adminUserLayout,
     path: "/",
     label: "Profile",
+    head: {
+      title: "User Profile",
+    },
     lazy: () => import("./components/users/AdminUserProfile.tsx"),
   });
 
@@ -171,6 +268,9 @@ export class AdminRouter {
     parent: this.adminUserLayout,
     path: "/sessions",
     label: "Sessions",
+    head: {
+      title: "User Sessions",
+    },
     lazy: () => import("./components/users/AdminUserSessions.tsx"),
   });
 
@@ -183,6 +283,9 @@ export class AdminRouter {
     parent: this.adminLayout,
     path: "/audits",
     label: "Audit Log",
+    head: {
+      title: "Audit Logs",
+    },
     description: "View system-wide audit trail and activity logs.",
     lazy: () => import("./components/audits/AdminAudits.tsx"),
     can: () => this.auditCtrl.findAudits.can(),
@@ -198,6 +301,9 @@ export class AdminRouter {
     path: "/sessions",
     label: "Sessions",
     description: "View and manage all active sessions.",
+    head: {
+      title: "Sessions",
+    },
     lazy: () => import("./components/sessions/AdminSessions.tsx"),
     can: () => this.sessionCtrl.findSessions.can(),
   });
@@ -212,6 +318,9 @@ export class AdminRouter {
     path: "/files",
     label: "Files",
     description: "Manage uploaded files and storage.",
+    head: {
+      title: "Files",
+    },
     lazy: () => import("./components/files/AdminFiles.tsx"),
     can: () => this.fileCtrl.findFiles.can(),
   });
@@ -228,6 +337,9 @@ export class AdminRouter {
     description: "View and manage application parameters.",
     lazy: () => import("./components/parameters/AdminParameters.tsx"),
     can: () => this.paramCtrl.getParameterTree.can(),
+    head: {
+      title: "Parameters",
+    },
     loader: async () => {
       const treeData = await this.paramCtrl.getParameterTree({});
       return { treeData };
@@ -239,7 +351,7 @@ export class AdminRouter {
   // ─────────────────────────────────────────────────────────────────────────────
 
   public readonly adminJobDashboard = $page({
-    icon: IconTerminal2,
+    icon: IconDashboard,
     parent: this.adminLayout,
     path: "/jobs",
     label: "Jobs",
@@ -277,8 +389,28 @@ export class AdminRouter {
     parent: this.adminLayout,
     path: "/api-keys",
     label: "API Keys",
+    head: {
+      title: "API Keys",
+    },
     description: "View and manage API keys for programmatic access.",
     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/components/AdminDashboard.tsx

@@ -0,0 +1,52 @@
+import { Flex, Text } from "@alepha/ui";
+import { useAuth } from "alepha/react/auth";
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const AdminDashboard = () => {
+  const auth = useAuth();
+
+  return (
+    <Flex elevated fill col pos="relative" style={{ overflow: "hidden" }}>
+      <Flex
+        bg="yellow"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: 256,
+          height: 256,
+          borderRadius: "50%",
+          transform: "translate(-50%, -50%)",
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* Header */}
+      <Flex gap={4} p={128} pb="xl" style={{ zIndex: 1 }}>
+        <Flex col pos={"relative"}>
+          <Text muted bold small uppercase>
+            Account Home
+          </Text>
+          <Text
+            top={10}
+            pos={"absolute"}
+            left={-20}
+            fz={42}
+            c={"yellow"}
+            style={{ transform: "rotate(-15deg)" }}
+          >
+            !
+          </Text>
+          <Text fz={36}>Hello, {auth.user?.name ?? "Admin"}</Text>
+          <Text muted>
+            This is your admin dashboard. You can manage resources from the
+            sidebar menu.
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default AdminDashboard;