@alepha/ui 0.15.3 → 0.15.5

package/src/core/components/buttons/DarkModeButton.tsx

@@ -1,75 +1,24 @@
-import {
-  Flex,
-  type MantineBreakpoint,
-  SegmentedControl,
-  type SegmentedControlProps,
-  useComputedColorScheme,
-  useMantineColorScheme,
-} from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
 import { IconMoon, IconSun } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
-export interface DarkModeButtonProps {
-  mode?: "minimal" | "segmented";
-  size?: MantineBreakpoint;
-  variant?:
-    | "filled"
-    | "light"
-    | "outline"
-    | "default"
-    | "subtle"
-    | "transparent";
-
-  fullWidth?: boolean;
-
-  segmentedProps?: Partial<SegmentedControlProps>;
-  actionProps?: Partial<ActionProps>;
-}
-
-const DarkModeButton = (props: DarkModeButtonProps) => {
+/**
+ * SSR-safe dark mode toggle button.
+ *
+ * Uses CSS-based icon switching to avoid hydration mismatches.
+ * Both icons are rendered, CSS hides the wrong one based on
+ * `data-mantine-color-scheme` attribute.
+ */
+const DarkModeButton = (props: Partial<ActionProps>) => {
   const { setColorScheme } = useMantineColorScheme();
-  const computedColorScheme = useComputedColorScheme("light");
-  const [colorScheme, setColorScheme2] = useState("default");
-  const mode = props.mode ?? "minimal";
-
-  useEffect(() => {
-    setColorScheme2(computedColorScheme);
-  }, [computedColorScheme]);
 
   const toggleColorScheme = () => {
-    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+    const current =
+      document.documentElement.getAttribute("data-mantine-color-scheme") ??
+      "light";
+    setColorScheme(current === "dark" ? "light" : "dark");
   };
 
-  if (mode === "segmented") {
-    return (
-      <SegmentedControl
-        value={colorScheme}
-        onChange={(value) => setColorScheme(value as "light" | "dark")}
-        data={[
-          {
-            value: "light",
-            label: (
-              <Flex h={20} align="center" justify="center">
-                <IconSun size={16} />
-              </Flex>
-            ),
-          },
-          {
-            value: "dark",
-            label: (
-              <Flex h={20} align="center" justify="center">
-                <IconMoon size={16} />
-              </Flex>
-            ),
-          },
-        ]}
-        w={props.fullWidth ? "100%" : undefined}
-        {...props.segmentedProps}
-      />
-    );
-  }
-
   return (
     <ActionButton
       onClick={toggleColorScheme}
@@ -77,15 +26,13 @@ const DarkModeButton = (props: DarkModeButtonProps) => {
       size={props.size ?? "sm"}
       aria-label="Toggle color scheme"
       px={"xs"}
-      fullWidth={props.fullWidth ?? false}
       icon={
-        colorScheme === "dark"
-          ? IconSun
-          : colorScheme === "light"
-            ? IconMoon
-            : IconSun
+        <>
+          <IconSun className="alepha-light-hidden" />
+          <IconMoon className="alepha-dark-hidden" />
+        </>
       }
-      {...props.actionProps}
+      {...props}
     />
   );
 };

package/src/core/components/buttons/LanguageButton.tsx

@@ -2,12 +2,7 @@ import { IconLanguage } from "@tabler/icons-react";
 import { useI18n } from "alepha/react/i18n";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
-export interface LanguageButtonProps {
-  languages?: string[];
-  actionProps?: ActionProps;
-}
-
-const LanguageButton = (props: LanguageButtonProps) => {
+const LanguageButton = (props: Partial<ActionProps>) => {
   const i18n = useI18n();
   return (
     <ActionButton
@@ -20,7 +15,7 @@ const LanguageButton = (props: LanguageButtonProps) => {
           active: i18n.lang === lang,
         })),
       }}
-      {...props.actionProps}
+      {...props}
     />
   );
 };

package/src/core/components/buttons/ThemeButton.tsx

@@ -4,11 +4,7 @@ import { alephaThemeListAtom } from "../../atoms/alephaThemeListAtom.ts";
 import { useTheme } from "../../hooks/useTheme.ts";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
-export interface ThemeButtonProps {
-  actionProps?: Partial<ActionProps>;
-}
-
-const ThemeButton = (props: ThemeButtonProps) => {
+const ThemeButton = (props: Partial<ActionProps>) => {
   const [theme, setTheme] = useTheme();
   const themeList = useStore(alephaThemeListAtom)[0];
 
@@ -26,7 +22,7 @@ const ThemeButton = (props: ThemeButtonProps) => {
           active: theme.name === it.name,
         })),
       }}
-      {...props.actionProps}
+      {...props}
     />
   );
 };

package/src/core/components/layout/AdminShell.tsx

@@ -21,7 +21,11 @@ import {
 import { alephaSidebarAtom } from "../../atoms/alephaSidebarAtom.ts";
 import { ui } from "../../constants/ui.ts";
 import AppBar, { type AppBarProps } from "./AppBar.tsx";
-import { Sidebar, type SidebarProps } from "./Sidebar.tsx";
+import {
+  Sidebar,
+  type SidebarMenuItem,
+  type SidebarProps,
+} from "./Sidebar.tsx";
 
 export interface AdminShellProps {
   appShellProps?: Partial<AppShellProps>;
@@ -240,6 +244,17 @@ const AdminShell = (props: AdminShellProps) => {
   // When collapsed but hovering, show defaultWidth (not current width)
   const isExpandedByHover = collapsed && isHovering;
   const effectiveCollapsed = collapsed && !isHovering;
+
+  // Wrap onItemClick to collapse sidebar when clicking during hover-expansion
+  const handleSidebarItemClick = useCallback(
+    (item: SidebarMenuItem) => {
+      if (isExpandedByHover) {
+        setIsHovering(false);
+      }
+      props.sidebarProps?.onItemClick?.(item);
+    },
+    [isExpandedByHover, props.sidebarProps?.onItemClick],
+  );
   const hoverWidth = Math.max(defaultWidth, collapsedWidth);
   // When hovering, keep main content at collapsed width (sidebar overlays)
   const sidebarWidth = hasSidebar
@@ -300,6 +315,7 @@ const AdminShell = (props: AdminShellProps) => {
           <Sidebar
             {...(props.sidebarProps ?? {})}
             collapsed={effectiveCollapsed}
+            onItemClick={handleSidebarItemClick}
           />
           {(canResize || isExpandedByHover) && (
             <Flex

package/src/core/components/layout/AppBar.tsx

@@ -11,14 +11,11 @@ import {
 import { IconArrowLeft } from "@tabler/icons-react";
 import { Link, useRouter } from "alepha/react/router";
 import type { ComponentType, ReactNode } from "react";
+import type { ActionProps } from "../buttons/ActionButton.tsx";
 import ActionButton from "../buttons/ActionButton.tsx";
 import BurgerButton from "../buttons/BurgerButton.tsx";
-import DarkModeButton, {
-  type DarkModeButtonProps,
-} from "../buttons/DarkModeButton.tsx";
-import LanguageButton, {
-  type LanguageButtonProps,
-} from "../buttons/LanguageButton.tsx";
+import DarkModeButton from "../buttons/DarkModeButton.tsx";
+import LanguageButton from "../buttons/LanguageButton.tsx";
 import OmnibarButton, {
   type OmnibarButtonProps,
 } from "../buttons/OmnibarButton.tsx";
@@ -53,7 +50,7 @@ export interface AppBarBurger extends AppBarAbstractItem {
 
 export interface AppBarDark extends AppBarAbstractItem {
   type: "dark";
-  props?: DarkModeButtonProps;
+  props?: Partial<ActionProps>;
 }
 
 export interface AppBarSearch extends AppBarAbstractItem {
@@ -63,7 +60,7 @@ export interface AppBarSearch extends AppBarAbstractItem {
 
 export interface AppBarLang extends AppBarAbstractItem {
   type: "lang";
-  props?: LanguageButtonProps;
+  props?: Partial<ActionProps>;
 }
 
 export interface AppBarSpacer extends AppBarAbstractItem {

package/src/core/index.ts

@@ -39,7 +39,6 @@ export { default as ClipboardButton } from "./components/buttons/ClipboardButton
 export { default as DarkModeButton } from "./components/buttons/DarkModeButton.tsx";
 export { default as LanguageButton } from "./components/buttons/LanguageButton.tsx";
 export { default as OmnibarButton } from "./components/buttons/OmnibarButton.tsx";
-export type { ThemeButtonProps } from "./components/buttons/ThemeButton.tsx";
 export { default as ThemeButton } from "./components/buttons/ThemeButton.tsx";
 export { default as ToggleSidebarButton } from "./components/buttons/ToggleSidebarButton.tsx";
 export { default as AlertDialog } from "./components/dialogs/AlertDialog.tsx";

package/src/core/styles.css

@@ -3,6 +3,7 @@
 @import "@mantine/spotlight/styles.css";
 @import "@mantine/dates/styles.css";
 @import "@mantine/notifications/styles.css";
+@import "./components/buttons/DarkModeButton.css";
 
 :root {
   --alepha-background-light: var(--mantine-color-gray-1);

package/src/demo/components/auth/DemoLogin.tsx

@@ -94,6 +94,8 @@ const buildRealmConfig = (props: {
       firstNameLastNameEnabled: false,
       firstNameLastNameRequired: false,
       resetPasswordAllowed: props.resetPasswordAllowed,
+      adminEmails: [],
+      adminUsernames: [],
       passwordPolicy: {
         minLength: 8,
         requireUppercase: true,

package/src/demo/components/auth/DemoRegister.tsx

@@ -106,6 +106,8 @@ const buildRealmConfig = (props: {
       firstNameLastNameEnabled: false,
       firstNameLastNameRequired: false,
       resetPasswordAllowed: true,
+      adminEmails: [],
+      adminUsernames: [],
       passwordPolicy: {
         minLength: 8,
         requireUppercase: true,

package/src/demo/components/auth/DemoResetPassword.tsx

@@ -40,6 +40,8 @@ const buildRealmConfig = (props: {
       firstNameLastNameEnabled: false,
       firstNameLastNameRequired: false,
       resetPasswordAllowed: props.resetPasswordAllowed,
+      adminEmails: [],
+      adminUsernames: [],
       passwordPolicy: {
         minLength: 8,
         requireUppercase: true,

package/dist/admin/AdminAudits-BU-p1g7A.js

@@ -1,3 +0,0 @@
-import { t as AdminAudits_default } from "./AdminAudits-Oh7iAfQa.js";
-
-export { AdminAudits_default as default };

package/dist/admin/AdminFiles-Bg9feLFH.js

@@ -1,3 +0,0 @@
-import { t as AdminFiles_default } from "./AdminFiles-Cu8GHgQ3.js";
-
-export { AdminFiles_default as default };

package/dist/admin/AdminLayout-BfeFXiul.js

@@ -1,3 +0,0 @@
-import { t as AdminLayout_default } from "./AdminLayout-QJLIesuG.js";
-
-export { AdminLayout_default as default };

package/dist/admin/AdminLayout-QJLIesuG.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdminLayout-QJLIesuG.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\";\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        sidebarProps={{\n          autoPopulateMenu: {\n            startsWith: \"/admin\",\n          },\n        }}\n        {...props.adminShellProps}\n      />\n    </AlephaMantineProvider>\n  );\n};\n\nexport default AdminLayout;\n"],"mappings":";;;;;;AAcA,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,cAAc,EACZ,kBAAkB,EAChB,YAAY,UACb,EACF;EACD,GAAI,MAAM;GACV,GACoB;;AAI5B,0BAAe"}

package/dist/admin/AdminNotifications-DmfGPqHe.js

@@ -1,3 +0,0 @@
-import { t as AdminNotifications_default } from "./AdminNotifications-CgYkBuG_.js";
-
-export { AdminNotifications_default as default };

package/dist/admin/AdminSessions-Cn4_jB04.js

@@ -1,3 +0,0 @@
-import { t as AdminSessions_default } from "./AdminSessions-Bey9cuy1.js";
-
-export { AdminSessions_default as default };

package/dist/admin/AdminUserSessions-rvA0ztxn.js

@@ -1,3 +0,0 @@
-import { t as AdminUserSessions_default } from "./AdminUserSessions-kmkXG-xf.js";
-
-export { AdminUserSessions_default as default };

package/dist/admin/AdminUserSettings-Dg-wTRzN.js

@@ -1,3 +0,0 @@
-import { t as AdminUserSettings_default } from "./AdminUserSettings-DZ9iWhJW.js";
-
-export { AdminUserSettings_default as default };

package/dist/admin/AdminUsers-RCaxccEW.js

@@ -1,3 +0,0 @@
-import { t as AdminUsers_default } from "./AdminUsers-D6Y5K8Am.js";
-
-export { AdminUsers_default as default };

package/src/admin/MainRouter.ts

@@ -1,23 +0,0 @@
-import { AlephaMantineProvider } from "@alepha/ui";
-import { AuthRouter } from "@alepha/ui/auth";
-import { $inject } from "alepha";
-import { $page } from "alepha/react/router";
-import { AdminRouter } from "./AdminRouter.ts";
-
-/**
- * Main application router that combines Auth and Admin routers.
- *
- * We assume that the main application router will always have Admin and Auth routers.
- *
- * This is basically a convenience class to avoid having to inject these routers everywhere.
- * Code is lightweight enough that we can just copy it if needed.
- */
-export class MainRouter {
-  auth = $inject(AuthRouter);
-  admin = $inject(AdminRouter);
-
-  layout = $page({
-    component: AlephaMantineProvider,
-    children: () => [this.auth.layout, this.admin.adminLayout],
-  });
-}