@alepha/ui 0.15.5 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/admin/{AdminLayout-BqZiXx4H.js → AdminLayout-D8yZ-8lG.js} +2 -1
  2. package/dist/admin/AdminLayout-D8yZ-8lG.js.map +1 -0
  3. package/dist/admin/index.d.ts +12 -8
  4. package/dist/admin/index.d.ts.map +1 -1
  5. package/dist/admin/index.js +79 -12
  6. package/dist/admin/index.js.map +1 -1
  7. package/dist/auth/{AuthLayout-Dj5K4SIN.js → AuthLayout-mFOWbiSP.js} +2 -1
  8. package/dist/auth/AuthLayout-mFOWbiSP.js.map +1 -0
  9. package/dist/auth/index.d.ts +9 -7
  10. package/dist/auth/index.d.ts.map +1 -1
  11. package/dist/auth/index.js +21 -15
  12. package/dist/auth/index.js.map +1 -1
  13. package/dist/core/index.d.ts +3 -3
  14. package/dist/core/index.d.ts.map +1 -1
  15. package/dist/core/index.js +8 -5
  16. package/dist/core/index.js.map +1 -1
  17. package/package.json +11 -11
  18. package/src/admin/AdminRouter.ts +77 -2
  19. package/src/admin/components/AdminLayout.tsx +1 -1
  20. package/src/admin/index.ts +5 -12
  21. package/src/admin/primitives/$uiAdmin.ts +17 -0
  22. package/src/auth/AuthRouter.ts +13 -4
  23. package/src/auth/components/AuthLayout.tsx +1 -1
  24. package/src/auth/index.ts +5 -14
  25. package/src/auth/primitives/$uiAuth.ts +10 -0
  26. package/src/core/components/layout/AlephaMantineProvider.tsx +2 -1
  27. package/src/core/components/layout/Sidebar.tsx +10 -0
  28. package/src/core/index.ts +3 -3
  29. package/dist/admin/AdminLayout-BX4FIpXv.css +0 -143
  30. package/dist/admin/AdminLayout-BX4FIpXv.css.map +0 -1
  31. package/dist/admin/AdminLayout-BqZiXx4H.js.map +0 -1
  32. package/dist/auth/AuthLayout-BaD7RD2h.css +0 -143
  33. package/dist/auth/AuthLayout-BaD7RD2h.css.map +0 -1
  34. package/dist/auth/AuthLayout-Dj5K4SIN.js.map +0 -1
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "mantine"
8
8
  ],
9
9
  "author": "Nicolas Foures",
10
- "version": "0.15.5",
10
+ "version": "0.16.0",
11
11
  "type": "module",
12
12
  "engines": {
13
13
  "node": ">=22.0.0"
@@ -22,19 +22,19 @@
22
22
  "styles.css"
23
23
  ],
24
24
  "dependencies": {
25
- "@mantine/core": "^8.3.13",
26
- "@mantine/dates": "^8.3.13",
27
- "@mantine/hooks": "^8.3.13",
28
- "@mantine/modals": "^8.3.13",
29
- "@mantine/notifications": "^8.3.13",
30
- "@mantine/nprogress": "^8.3.13",
31
- "@mantine/spotlight": "^8.3.13",
25
+ "@mantine/core": "^8.3.14",
26
+ "@mantine/dates": "^8.3.14",
27
+ "@mantine/hooks": "^8.3.14",
28
+ "@mantine/modals": "^8.3.14",
29
+ "@mantine/notifications": "^8.3.14",
30
+ "@mantine/nprogress": "^8.3.14",
31
+ "@mantine/spotlight": "^8.3.14",
32
32
  "@tabler/icons-react": "^3.36.1",
33
33
  "dayjs": "^1.11.19"
34
34
  },
35
35
  "devDependencies": {
36
- "@biomejs/biome": "^2.3.13",
37
- "alepha": "0.15.5",
36
+ "@biomejs/biome": "^2.3.14",
37
+ "alepha": "0.16.0",
38
38
  "react": "^19.2.4",
39
39
  "react-dom": "^19.2.4",
40
40
  "typescript": "^5.9.3",
@@ -42,7 +42,7 @@
42
42
  "vitest": "^4.0.18"
43
43
  },
44
44
  "peerDependencies": {
45
- "alepha": "0.15.5",
45
+ "alepha": "0.16.0",
46
46
  "react": "*",
47
47
  "react-dom": "*"
48
48
  },
@@ -1,4 +1,4 @@
1
- import type { AdminShellProps } from "@alepha/ui";
1
+ import type { AdminShellProps, SidebarNode } from "@alepha/ui";
2
2
  import { AuthRouter } from "@alepha/ui/auth";
3
3
  import {
4
4
  IconBell,
@@ -40,7 +40,82 @@ export class AdminRouter {
40
40
  protected readonly jobCtrl = $client<AdminJobController>();
41
41
  protected readonly apiKeyCtrl = $client<AdminApiKeyController>();
42
42
 
43
+ public configFn?: (adminRouter: AdminRouter) => AdminShellProps = () => {
44
+ return {
45
+ sidebarResizable: true,
46
+ sidebarProps: {
47
+ items: this.getDefaultSidebarItems(),
48
+ },
49
+ };
50
+ };
51
+
52
+ public getDefaultSidebarItems(): SidebarNode[] {
53
+ return [
54
+ // Identity & Access
55
+ {
56
+ label: "Identity",
57
+ icon: IconUsers,
58
+ children: [
59
+ {
60
+ ...this.router.node(this.adminUsers.name),
61
+ can: () => this.userCtrl.findUsers.can(),
62
+ },
63
+ {
64
+ ...this.router.node(this.adminSessions.name),
65
+ can: () => this.sessionCtrl.findSessions.can(),
66
+ },
67
+ {
68
+ ...this.router.node(this.adminApiKeys.name),
69
+ can: () => this.apiKeyCtrl.findApiKeys.can(),
70
+ },
71
+ ],
72
+ },
73
+
74
+ // Content & Storage
75
+ {
76
+ label: "Content",
77
+ icon: IconFile,
78
+ children: [
79
+ {
80
+ ...this.router.node(this.adminFiles.name),
81
+ can: () => this.fileCtrl.findFiles.can(),
82
+ },
83
+ {
84
+ ...this.router.node(this.adminNotifications.name),
85
+ can: () => this.notificationCtrl.findNotifications.can(),
86
+ },
87
+ ],
88
+ },
89
+
90
+ // System
91
+ {
92
+ label: "System",
93
+ icon: IconSettings,
94
+ children: [
95
+ {
96
+ ...this.router.node(this.adminJobs.name),
97
+ can: () => this.jobCtrl.getJobs.can(),
98
+ },
99
+ {
100
+ ...this.router.node(this.adminAudits.name),
101
+ can: () => this.auditCtrl.findAudits.can(),
102
+ },
103
+ {
104
+ ...this.router.node(this.adminParameters.name),
105
+ can: () => this.configCtrl.getConfigTree.can(),
106
+ },
107
+ ],
108
+ },
109
+
110
+ // Bottom
111
+ { type: "toggle", position: "bottom" },
112
+ ];
113
+ }
114
+
43
115
  protected adminShellProps(): AdminShellProps {
116
+ if (this.configFn) {
117
+ return this.configFn(this);
118
+ }
44
119
  return {};
45
120
  }
46
121
 
@@ -61,7 +136,7 @@ export class AdminRouter {
61
136
  public readonly adminLayout = $page({
62
137
  path: "/admin",
63
138
  label: "Admin",
64
- can: () => this.userCtrl.findUsers.can(),
139
+ can: () => this.auth.can("admin:*"),
65
140
  lazy: () => import("./components/AdminLayout.tsx"),
66
141
  props: () => ({
67
142
  adminShellProps: this.adminShellProps(),
@@ -7,7 +7,7 @@ import {
7
7
  } from "@alepha/ui";
8
8
  import { UserButton } from "@alepha/ui/auth";
9
9
  import { IconArrowLeft } from "@tabler/icons-react";
10
- import "../../core/styles.css";
10
+ import "@alepha/ui/styles";
11
11
 
12
12
  export interface AdminLayoutProps {
13
13
  adminShellProps?: AdminShellProps;
@@ -1,6 +1,6 @@
1
1
  import { AlephaUI } from "@alepha/ui";
2
2
  import { AlephaUIAuth } from "@alepha/ui/auth";
3
- import { $context, $module } from "alepha";
3
+ import { $module } from "alepha";
4
4
  import { AdminRouter } from "./AdminRouter.ts";
5
5
 
6
6
  // ---------------------------------------------------------------------------------------------------------------------
@@ -30,13 +30,14 @@ export { default as AdminUserSettings } from "./components/users/AdminUserSettin
30
30
  export { default as AdminUsers } from "./components/users/AdminUsers.tsx";
31
31
  // Verifications
32
32
  export { default as AdminVerifications } from "./components/verifications/AdminVerifications.tsx";
33
+ export * from "./primitives/$uiAdmin.ts";
33
34
 
34
35
  // ---------------------------------------------------------------------------------------------------------------------
35
36
 
36
37
  /**
37
- * | type | quality | stability |
38
- * |------|---------|-----------|
39
- * | frontend | rare | experimental |
38
+ * | Stability | Since | Runtime |
39
+ * |-----------|-------|---------|
40
+ * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
40
41
  *
41
42
  * Admin panel UI components.
42
43
  *
@@ -62,11 +63,3 @@ export const AlephaUIAdmin = $module({
62
63
  });
63
64
 
64
65
  // ---------------------------------------------------------------------------------------------------------------------
65
-
66
- /**
67
- * Register Admin UI components and get the AdminRouter instance.
68
- */
69
- export const $uiAdmin = () => {
70
- const { alepha } = $context();
71
- return alepha.inject(AdminRouter);
72
- };
@@ -0,0 +1,17 @@
1
+ import type { AdminShellProps } from "@alepha/ui";
2
+ import { $context } from "alepha";
3
+ import { AdminRouter } from "../AdminRouter.ts";
4
+
5
+ /**
6
+ * Register Admin UI components and get the AdminRouter instance.
7
+ */
8
+ export const $uiAdmin = (optsFn?: (a: AdminRouter) => AdminShellProps) => {
9
+ const { alepha } = $context();
10
+ const adminRouter = alepha.inject(AdminRouter);
11
+
12
+ if (optsFn) {
13
+ adminRouter.configFn = optsFn;
14
+ }
15
+
16
+ return adminRouter;
17
+ };
@@ -9,7 +9,7 @@ import {
9
9
  import { $inject, AlephaError, t } from "alepha";
10
10
  import type { RealmController } from "alepha/api/users";
11
11
  import { ReactAuth } from "alepha/react/auth";
12
- import { $page } from "alepha/react/router";
12
+ import { $page, Redirection } from "alepha/react/router";
13
13
  import { $client } from "alepha/server/links";
14
14
 
15
15
  /**
@@ -48,7 +48,10 @@ export class AuthRouter {
48
48
  },
49
49
  can: () => !this.auth.user,
50
50
  lazy: () => import("./components/Login.tsx"),
51
- loader: async ({ query }) => {
51
+ loader: async ({ query, user }) => {
52
+ if (user) {
53
+ throw new Redirection(query.r || "/");
54
+ }
52
55
  return {
53
56
  realmConfig: await this.loadRealmConfig(query.realm),
54
57
  };
@@ -65,7 +68,10 @@ export class AuthRouter {
65
68
  },
66
69
  can: () => !this.auth.user,
67
70
  lazy: () => import("./components/Register.tsx"),
68
- loader: async ({ query }) => {
71
+ loader: async ({ query, user }) => {
72
+ if (user) {
73
+ throw new Redirection(query.r || "/");
74
+ }
69
75
  return {
70
76
  realmConfig: await this.loadRealmConfig(query.realm),
71
77
  };
@@ -82,7 +88,10 @@ export class AuthRouter {
82
88
  },
83
89
  can: () => !this.auth.user,
84
90
  lazy: () => import("./components/ResetPassword.tsx"),
85
- loader: async ({ query }) => {
91
+ loader: async ({ query, user }) => {
92
+ if (user) {
93
+ throw new Redirection(query.r || "/");
94
+ }
86
95
  return {
87
96
  realmConfig: await this.loadRealmConfig(query.realm),
88
97
  };
@@ -1,7 +1,7 @@
1
1
  import { AlephaMantineProvider } from "@alepha/ui";
2
2
  import { Flex } from "@mantine/core";
3
3
  import { NestedView } from "alepha/react/router";
4
- import "../../core/styles.css";
4
+ import "@alepha/ui/styles";
5
5
 
6
6
  const AuthLayout = () => {
7
7
  return (
package/src/auth/index.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AlephaUI } from "@alepha/ui";
2
- import { $context, $module } from "alepha";
2
+ import { $module } from "alepha";
3
3
  import { AlephaReactAuth } from "alepha/react/auth";
4
4
  import { AlephaReactI18n } from "alepha/react/i18n";
5
5
  import { AuthI18n } from "./AuthI18n.ts";
@@ -14,13 +14,14 @@ export { default as Login } from "./components/Login.tsx";
14
14
  export { default as Register } from "./components/Register.tsx";
15
15
  export { default as ResetPassword } from "./components/ResetPassword.tsx";
16
16
  export { default as VerifyEmail } from "./components/VerifyEmail.tsx";
17
+ export * from "./primitives/$uiAuth.ts";
17
18
 
18
19
  // ---------------------------------------------------------------------------------------------------------------------
19
20
 
20
21
  /**
21
- * | type | quality | stability |
22
- * |------|---------|-----------|
23
- * | frontend | rare | experimental |
22
+ * | Stability | Since | Runtime |
23
+ * |-----------|-------|---------|
24
+ * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
24
25
  *
25
26
  * Authentication UI components.
26
27
  *
@@ -37,13 +38,3 @@ export const AlephaUIAuth = $module({
37
38
  name: "alepha.ui.auth",
38
39
  services: [AlephaUI, AlephaReactAuth, AlephaReactI18n, AuthRouter, AuthI18n],
39
40
  });
40
-
41
- // ---------------------------------------------------------------------------------------------------------------------
42
-
43
- /**
44
- * Register Auth UI components and get the AuthRouter instance.
45
- */
46
- export const $uiAuth = () => {
47
- const { alepha } = $context();
48
- return alepha.inject(AuthRouter);
49
- };
@@ -0,0 +1,10 @@
1
+ import { $context } from "alepha";
2
+ import { AuthRouter } from "../AuthRouter.ts";
3
+
4
+ /**
5
+ * Register Auth UI components and get the AuthRouter instance.
6
+ */
7
+ export const $uiAuth = () => {
8
+ const { alepha } = $context();
9
+ return alepha.inject(AuthRouter);
10
+ };
@@ -39,8 +39,9 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
39
39
  "react:transition:end": () => {
40
40
  nprogress.complete();
41
41
  },
42
- "react:action:error": ({ error }) => {
42
+ "react:action:error": ({ error, type }) => {
43
43
  if (
44
+ type === "transition" ||
44
45
  error instanceof FormValidationError ||
45
46
  error instanceof TypeBoxError
46
47
  ) {
@@ -110,6 +110,16 @@ export const Sidebar = (props: SidebarProps) => {
110
110
  return null;
111
111
  }
112
112
 
113
+ // Hide parent if all children are hidden
114
+ if (item.children && item.children.length > 0) {
115
+ const hasVisibleChild = item.children.some(
116
+ (child) => !child.can || child.can(),
117
+ );
118
+ if (!hasVisibleChild) {
119
+ return null;
120
+ }
121
+ }
122
+
113
123
  if (props.collapsed) {
114
124
  return (
115
125
  <SidebarCollapsedItem
package/src/core/index.ts CHANGED
@@ -159,9 +159,9 @@ declare module "alepha/react/router" {
159
159
  // ---------------------------------------------------------------------------------------------------------------------
160
160
 
161
161
  /**
162
- * | type | quality | stability |
163
- * |------|---------|-----------|
164
- * | frontend | rare | experimental |
162
+ * | Stability | Since | Runtime |
163
+ * |-----------|-------|---------|
164
+ * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
165
165
  *
166
166
  * Core UI components based on Mantine UI v8.
167
167
  *
@@ -1,143 +0,0 @@
1
- /* Dark Mode Toggle - SSR-safe icon switching */
2
-
3
- [data-mantine-color-scheme="light"] .alepha-light-hidden,
4
- [data-mantine-color-scheme="dark"] .alepha-dark-hidden {
5
- display: none;
6
- }
7
-
8
-
9
- :root {
10
- --alepha-background-light: var(--mantine-color-gray-1);
11
- --alepha-background-dark: var(--mantine-color-dark-9);
12
- --alepha-background: var(--alepha-background-light);
13
-
14
- --alepha-surface-light: var(--mantine-color-gray-0);
15
- --alepha-surface-dark: var(--mantine-color-dark-8);
16
- --alepha-surface: var(--alepha-surface-light);
17
-
18
- --alepha-elevated-light: var(--mantine-color-white);
19
- --alepha-elevated-hover-light: #f6f5f5;
20
- --alepha-elevated-dark: var(--mantine-color-dark-7);
21
- --alepha-elevated-hover-dark: var(--mantine-color-dark-6);
22
- --alepha-elevated: var(--alepha-elevated-light);
23
- --alepha-elevated-hover: var(--alepha-elevated-hover-light);
24
-
25
- --alepha-border: var(--mantine-color-default-border);
26
-
27
- --alepha-text-light: #000000;
28
- --alepha-text-dark: #ffffff;
29
- --alepha-text-muted: #6c757d;
30
- --alepha-text: var(--alepha-text-light);
31
- }
32
-
33
- #root {
34
- display: flex;
35
- background-color: var(--alepha-background);
36
- color: var(--alepha-text);
37
- min-height: 100dvh;
38
- }
39
-
40
- /* ------------------------------------------------------------------------------------------------------------------ */
41
-
42
- [data-mantine-color-scheme="dark"] {
43
- --alepha-surface: var(--alepha-surface-dark);
44
- --alepha-elevated: var(--alepha-elevated-dark);
45
- --alepha-elevated-hover: var(--alepha-elevated-hover-dark);
46
- --alepha-background: var(--alepha-background-dark);
47
- --alepha-text: var(--alepha-text-dark);
48
- }
49
-
50
- /* ------------------------------------------------------------------------------------------------------------------ */
51
-
52
- .overflow-auto {
53
- overflow: auto;
54
- scrollbar-color: var(--alepha-text-muted) transparent;
55
- scrollbar-width: thin;
56
- }
57
-
58
- /* Sidebar scroll area - subtle scrollbar that appears on hover */
59
- .alepha-sidebar-scroll {
60
- overflow-y: auto;
61
- overflow-x: hidden;
62
- scrollbar-width: thin;
63
- scrollbar-color: transparent transparent;
64
- }
65
-
66
- .alepha-sidebar-scroll:hover {
67
- scrollbar-color: var(--mantine-color-gray-4) transparent;
68
- }
69
-
70
- [data-mantine-color-scheme="dark"] .alepha-sidebar-scroll:hover {
71
- scrollbar-color: var(--mantine-color-dark-4) transparent;
72
- }
73
-
74
- /* WebKit scrollbar styling */
75
- .alepha-sidebar-scroll::-webkit-scrollbar {
76
- width: 6px;
77
- }
78
-
79
- .alepha-sidebar-scroll::-webkit-scrollbar-track {
80
- background: transparent;
81
- }
82
-
83
- .alepha-sidebar-scroll::-webkit-scrollbar-thumb {
84
- background: transparent;
85
- border-radius: 3px;
86
- }
87
-
88
- .alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {
89
- background: var(--mantine-color-gray-4);
90
- }
91
-
92
- [data-mantine-color-scheme="dark"]
93
- .alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {
94
- background: var(--mantine-color-dark-4);
95
- }
96
-
97
- /* ------------------------------------------------------------------------------------------------------------------ */
98
- /* Sidebar Transitions */
99
-
100
- .alepha-sidebar-navbar {
101
- transition: width 0.2s ease-in-out;
102
- }
103
-
104
- .alepha-sidebar-navbar[data-resizing="true"] {
105
- transition: none;
106
- }
107
-
108
- .alepha-sidebar-main {
109
- transition: padding-left 0.2s ease-in-out;
110
- }
111
-
112
- .alepha-sidebar-main[data-resizing="true"] {
113
- transition: none;
114
- }
115
-
116
- /* ------------------------------------------------------------------------------------------------------------------ */
117
- /* Modal Customizations */
118
-
119
- /* Custom modal scale animation */
120
- @keyframes modalScaleIn {
121
- from {
122
- opacity: 0;
123
- transform: scale(0.9);
124
- }
125
- to {
126
- opacity: 1;
127
- transform: scale(1);
128
- }
129
- }
130
-
131
- @keyframes modalScaleOut {
132
- from {
133
- opacity: 1;
134
- transform: scale(1);
135
- }
136
- to {
137
- opacity: 0;
138
- transform: scale(0.95);
139
- }
140
- }
141
-
142
-
143
- /*# sourceMappingURL=AdminLayout-BX4FIpXv.css.map*/
@@ -1 +0,0 @@
1
- {"version":3,"file":"AdminLayout-BX4FIpXv.css","names":[],"sources":["../../../../src/core/components/buttons/DarkModeButton.css","../../../../src/core/styles.css"],"sourcesContent":["/* Dark Mode Toggle - SSR-safe icon switching */\n\n[data-mantine-color-scheme=\"light\"] .alepha-light-hidden,\n[data-mantine-color-scheme=\"dark\"] .alepha-dark-hidden {\n display: none;\n}\n","@import \"@mantine/core/styles.css\";\n@import \"@mantine/nprogress/styles.css\";\n@import \"@mantine/spotlight/styles.css\";\n@import \"@mantine/dates/styles.css\";\n@import \"@mantine/notifications/styles.css\";\n@import \"./components/buttons/DarkModeButton.css\";\n\n:root {\n --alepha-background-light: var(--mantine-color-gray-1);\n --alepha-background-dark: var(--mantine-color-dark-9);\n --alepha-background: var(--alepha-background-light);\n\n --alepha-surface-light: var(--mantine-color-gray-0);\n --alepha-surface-dark: var(--mantine-color-dark-8);\n --alepha-surface: var(--alepha-surface-light);\n\n --alepha-elevated-light: var(--mantine-color-white);\n --alepha-elevated-hover-light: #f6f5f5;\n --alepha-elevated-dark: var(--mantine-color-dark-7);\n --alepha-elevated-hover-dark: var(--mantine-color-dark-6);\n --alepha-elevated: var(--alepha-elevated-light);\n --alepha-elevated-hover: var(--alepha-elevated-hover-light);\n\n --alepha-border: var(--mantine-color-default-border);\n\n --alepha-text-light: #000000;\n --alepha-text-dark: #ffffff;\n --alepha-text-muted: #6c757d;\n --alepha-text: var(--alepha-text-light);\n}\n\n#root {\n display: flex;\n background-color: var(--alepha-background);\n color: var(--alepha-text);\n min-height: 100dvh;\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n\n[data-mantine-color-scheme=\"dark\"] {\n --alepha-surface: var(--alepha-surface-dark);\n --alepha-elevated: var(--alepha-elevated-dark);\n --alepha-elevated-hover: var(--alepha-elevated-hover-dark);\n --alepha-background: var(--alepha-background-dark);\n --alepha-text: var(--alepha-text-dark);\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n\n.overflow-auto {\n overflow: auto;\n scrollbar-color: var(--alepha-text-muted) transparent;\n scrollbar-width: thin;\n}\n\n/* Sidebar scroll area - subtle scrollbar that appears on hover */\n.alepha-sidebar-scroll {\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n}\n\n.alepha-sidebar-scroll:hover {\n scrollbar-color: var(--mantine-color-gray-4) transparent;\n}\n\n[data-mantine-color-scheme=\"dark\"] .alepha-sidebar-scroll:hover {\n scrollbar-color: var(--mantine-color-dark-4) transparent;\n}\n\n/* WebKit scrollbar styling */\n.alepha-sidebar-scroll::-webkit-scrollbar {\n width: 6px;\n}\n\n.alepha-sidebar-scroll::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.alepha-sidebar-scroll::-webkit-scrollbar-thumb {\n background: transparent;\n border-radius: 3px;\n}\n\n.alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {\n background: var(--mantine-color-gray-4);\n}\n\n[data-mantine-color-scheme=\"dark\"]\n .alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {\n background: var(--mantine-color-dark-4);\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n/* Sidebar Transitions */\n\n.alepha-sidebar-navbar {\n transition: width 0.2s ease-in-out;\n}\n\n.alepha-sidebar-navbar[data-resizing=\"true\"] {\n transition: none;\n}\n\n.alepha-sidebar-main {\n transition: padding-left 0.2s ease-in-out;\n}\n\n.alepha-sidebar-main[data-resizing=\"true\"] {\n transition: none;\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n/* Modal Customizations */\n\n/* Custom modal scale animation */\n@keyframes modalScaleIn {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes modalScaleOut {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;;;ACEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"AdminLayout-BqZiXx4H.js","names":[],"sources":["../../src/admin/components/AdminLayout.tsx"],"sourcesContent":["import {\n ActionButton,\n AdminShell,\n type AdminShellProps,\n AlephaMantineProvider,\n OmnibarButton,\n} from \"@alepha/ui\";\nimport { UserButton } from \"@alepha/ui/auth\";\nimport { IconArrowLeft } from \"@tabler/icons-react\";\nimport \"../../core/styles.css\";\n\nexport interface AdminLayoutProps {\n adminShellProps?: AdminShellProps;\n}\n\nconst AdminLayout = (props: AdminLayoutProps) => {\n return (\n <AlephaMantineProvider>\n <AdminShell\n appBarProps={{\n items: [\n {\n element: (\n <ActionButton\n variant={\"subtle\"}\n icon={IconArrowLeft}\n href={\"/\"}\n />\n ),\n position: \"left\",\n },\n {\n element: <OmnibarButton />,\n position: \"center\",\n },\n {\n element: <UserButton />,\n position: \"right\",\n },\n {\n type: \"dark\",\n position: \"right\",\n },\n ],\n }}\n sidebarResizable\n sidebarProps={{\n autoPopulateMenu: {\n startsWith: \"/admin\",\n },\n }}\n {...props.adminShellProps}\n />\n </AlephaMantineProvider>\n );\n};\n\nexport default AdminLayout;\n"],"mappings":";;;;;;AAeA,MAAM,eAAe,UAA4B;AAC/C,QACE,oBAAC,mCACC,oBAAC;EACC,aAAa,EACX,OAAO;GACL;IACE,SACE,oBAAC;KACC,SAAS;KACT,MAAM;KACN,MAAM;MACN;IAEJ,UAAU;IACX;GACD;IACE,SAAS,oBAAC,kBAAgB;IAC1B,UAAU;IACX;GACD;IACE,SAAS,oBAAC,eAAa;IACvB,UAAU;IACX;GACD;IACE,MAAM;IACN,UAAU;IACX;GACF,EACF;EACD;EACA,cAAc,EACZ,kBAAkB,EAChB,YAAY,UACb,EACF;EACD,GAAI,MAAM;GACV,GACoB;;AAI5B,0BAAe"}
@@ -1,143 +0,0 @@
1
- /* Dark Mode Toggle - SSR-safe icon switching */
2
-
3
- [data-mantine-color-scheme="light"] .alepha-light-hidden,
4
- [data-mantine-color-scheme="dark"] .alepha-dark-hidden {
5
- display: none;
6
- }
7
-
8
-
9
- :root {
10
- --alepha-background-light: var(--mantine-color-gray-1);
11
- --alepha-background-dark: var(--mantine-color-dark-9);
12
- --alepha-background: var(--alepha-background-light);
13
-
14
- --alepha-surface-light: var(--mantine-color-gray-0);
15
- --alepha-surface-dark: var(--mantine-color-dark-8);
16
- --alepha-surface: var(--alepha-surface-light);
17
-
18
- --alepha-elevated-light: var(--mantine-color-white);
19
- --alepha-elevated-hover-light: #f6f5f5;
20
- --alepha-elevated-dark: var(--mantine-color-dark-7);
21
- --alepha-elevated-hover-dark: var(--mantine-color-dark-6);
22
- --alepha-elevated: var(--alepha-elevated-light);
23
- --alepha-elevated-hover: var(--alepha-elevated-hover-light);
24
-
25
- --alepha-border: var(--mantine-color-default-border);
26
-
27
- --alepha-text-light: #000000;
28
- --alepha-text-dark: #ffffff;
29
- --alepha-text-muted: #6c757d;
30
- --alepha-text: var(--alepha-text-light);
31
- }
32
-
33
- #root {
34
- display: flex;
35
- background-color: var(--alepha-background);
36
- color: var(--alepha-text);
37
- min-height: 100dvh;
38
- }
39
-
40
- /* ------------------------------------------------------------------------------------------------------------------ */
41
-
42
- [data-mantine-color-scheme="dark"] {
43
- --alepha-surface: var(--alepha-surface-dark);
44
- --alepha-elevated: var(--alepha-elevated-dark);
45
- --alepha-elevated-hover: var(--alepha-elevated-hover-dark);
46
- --alepha-background: var(--alepha-background-dark);
47
- --alepha-text: var(--alepha-text-dark);
48
- }
49
-
50
- /* ------------------------------------------------------------------------------------------------------------------ */
51
-
52
- .overflow-auto {
53
- overflow: auto;
54
- scrollbar-color: var(--alepha-text-muted) transparent;
55
- scrollbar-width: thin;
56
- }
57
-
58
- /* Sidebar scroll area - subtle scrollbar that appears on hover */
59
- .alepha-sidebar-scroll {
60
- overflow-y: auto;
61
- overflow-x: hidden;
62
- scrollbar-width: thin;
63
- scrollbar-color: transparent transparent;
64
- }
65
-
66
- .alepha-sidebar-scroll:hover {
67
- scrollbar-color: var(--mantine-color-gray-4) transparent;
68
- }
69
-
70
- [data-mantine-color-scheme="dark"] .alepha-sidebar-scroll:hover {
71
- scrollbar-color: var(--mantine-color-dark-4) transparent;
72
- }
73
-
74
- /* WebKit scrollbar styling */
75
- .alepha-sidebar-scroll::-webkit-scrollbar {
76
- width: 6px;
77
- }
78
-
79
- .alepha-sidebar-scroll::-webkit-scrollbar-track {
80
- background: transparent;
81
- }
82
-
83
- .alepha-sidebar-scroll::-webkit-scrollbar-thumb {
84
- background: transparent;
85
- border-radius: 3px;
86
- }
87
-
88
- .alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {
89
- background: var(--mantine-color-gray-4);
90
- }
91
-
92
- [data-mantine-color-scheme="dark"]
93
- .alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {
94
- background: var(--mantine-color-dark-4);
95
- }
96
-
97
- /* ------------------------------------------------------------------------------------------------------------------ */
98
- /* Sidebar Transitions */
99
-
100
- .alepha-sidebar-navbar {
101
- transition: width 0.2s ease-in-out;
102
- }
103
-
104
- .alepha-sidebar-navbar[data-resizing="true"] {
105
- transition: none;
106
- }
107
-
108
- .alepha-sidebar-main {
109
- transition: padding-left 0.2s ease-in-out;
110
- }
111
-
112
- .alepha-sidebar-main[data-resizing="true"] {
113
- transition: none;
114
- }
115
-
116
- /* ------------------------------------------------------------------------------------------------------------------ */
117
- /* Modal Customizations */
118
-
119
- /* Custom modal scale animation */
120
- @keyframes modalScaleIn {
121
- from {
122
- opacity: 0;
123
- transform: scale(0.9);
124
- }
125
- to {
126
- opacity: 1;
127
- transform: scale(1);
128
- }
129
- }
130
-
131
- @keyframes modalScaleOut {
132
- from {
133
- opacity: 1;
134
- transform: scale(1);
135
- }
136
- to {
137
- opacity: 0;
138
- transform: scale(0.95);
139
- }
140
- }
141
-
142
-
143
- /*# sourceMappingURL=AuthLayout-BaD7RD2h.css.map*/
@@ -1 +0,0 @@
1
- {"version":3,"file":"AuthLayout-BaD7RD2h.css","names":[],"sources":["../../../../src/core/components/buttons/DarkModeButton.css","../../../../src/core/styles.css"],"sourcesContent":["/* Dark Mode Toggle - SSR-safe icon switching */\n\n[data-mantine-color-scheme=\"light\"] .alepha-light-hidden,\n[data-mantine-color-scheme=\"dark\"] .alepha-dark-hidden {\n display: none;\n}\n","@import \"@mantine/core/styles.css\";\n@import \"@mantine/nprogress/styles.css\";\n@import \"@mantine/spotlight/styles.css\";\n@import \"@mantine/dates/styles.css\";\n@import \"@mantine/notifications/styles.css\";\n@import \"./components/buttons/DarkModeButton.css\";\n\n:root {\n --alepha-background-light: var(--mantine-color-gray-1);\n --alepha-background-dark: var(--mantine-color-dark-9);\n --alepha-background: var(--alepha-background-light);\n\n --alepha-surface-light: var(--mantine-color-gray-0);\n --alepha-surface-dark: var(--mantine-color-dark-8);\n --alepha-surface: var(--alepha-surface-light);\n\n --alepha-elevated-light: var(--mantine-color-white);\n --alepha-elevated-hover-light: #f6f5f5;\n --alepha-elevated-dark: var(--mantine-color-dark-7);\n --alepha-elevated-hover-dark: var(--mantine-color-dark-6);\n --alepha-elevated: var(--alepha-elevated-light);\n --alepha-elevated-hover: var(--alepha-elevated-hover-light);\n\n --alepha-border: var(--mantine-color-default-border);\n\n --alepha-text-light: #000000;\n --alepha-text-dark: #ffffff;\n --alepha-text-muted: #6c757d;\n --alepha-text: var(--alepha-text-light);\n}\n\n#root {\n display: flex;\n background-color: var(--alepha-background);\n color: var(--alepha-text);\n min-height: 100dvh;\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n\n[data-mantine-color-scheme=\"dark\"] {\n --alepha-surface: var(--alepha-surface-dark);\n --alepha-elevated: var(--alepha-elevated-dark);\n --alepha-elevated-hover: var(--alepha-elevated-hover-dark);\n --alepha-background: var(--alepha-background-dark);\n --alepha-text: var(--alepha-text-dark);\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n\n.overflow-auto {\n overflow: auto;\n scrollbar-color: var(--alepha-text-muted) transparent;\n scrollbar-width: thin;\n}\n\n/* Sidebar scroll area - subtle scrollbar that appears on hover */\n.alepha-sidebar-scroll {\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n}\n\n.alepha-sidebar-scroll:hover {\n scrollbar-color: var(--mantine-color-gray-4) transparent;\n}\n\n[data-mantine-color-scheme=\"dark\"] .alepha-sidebar-scroll:hover {\n scrollbar-color: var(--mantine-color-dark-4) transparent;\n}\n\n/* WebKit scrollbar styling */\n.alepha-sidebar-scroll::-webkit-scrollbar {\n width: 6px;\n}\n\n.alepha-sidebar-scroll::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.alepha-sidebar-scroll::-webkit-scrollbar-thumb {\n background: transparent;\n border-radius: 3px;\n}\n\n.alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {\n background: var(--mantine-color-gray-4);\n}\n\n[data-mantine-color-scheme=\"dark\"]\n .alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {\n background: var(--mantine-color-dark-4);\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n/* Sidebar Transitions */\n\n.alepha-sidebar-navbar {\n transition: width 0.2s ease-in-out;\n}\n\n.alepha-sidebar-navbar[data-resizing=\"true\"] {\n transition: none;\n}\n\n.alepha-sidebar-main {\n transition: padding-left 0.2s ease-in-out;\n}\n\n.alepha-sidebar-main[data-resizing=\"true\"] {\n transition: none;\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n/* Modal Customizations */\n\n/* Custom modal scale animation */\n@keyframes modalScaleIn {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes modalScaleOut {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;;;ACEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}