@alepha/ui 0.15.4 → 0.16.0

package/src/auth/index.ts

@@ -1,5 +1,5 @@
 import { AlephaUI } from "@alepha/ui";
-import { $context, $module } from "alepha";
+import { $module } from "alepha";
 import { AlephaReactAuth } from "alepha/react/auth";
 import { AlephaReactI18n } from "alepha/react/i18n";
 import { AuthI18n } from "./AuthI18n.ts";
@@ -14,13 +14,14 @@ export { default as Login } from "./components/Login.tsx";
 export { default as Register } from "./components/Register.tsx";
 export { default as ResetPassword } from "./components/ResetPassword.tsx";
 export { default as VerifyEmail } from "./components/VerifyEmail.tsx";
+export * from "./primitives/$uiAuth.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * | type | quality | stability |
- * |------|---------|-----------|
- * | frontend | rare | experimental |
+ * | Stability | Since | Runtime |
+ * |-----------|-------|---------|
+ * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
  *
  * Authentication UI components.
  *
@@ -37,13 +38,3 @@ export const AlephaUIAuth = $module({
   name: "alepha.ui.auth",
   services: [AlephaUI, AlephaReactAuth, AlephaReactI18n, AuthRouter, AuthI18n],
 });
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-/**
- * Register Auth UI components and get the AuthRouter instance.
- */
-export const $uiAuth = () => {
-  const { alepha } = $context();
-  return alepha.inject(AuthRouter);
-};

package/src/auth/primitives/$uiAuth.ts

@@ -0,0 +1,10 @@
+import { $context } from "alepha";
+import { AuthRouter } from "../AuthRouter.ts";
+
+/**
+ * Register Auth UI components and get the AuthRouter instance.
+ */
+export const $uiAuth = () => {
+  const { alepha } = $context();
+  return alepha.inject(AuthRouter);
+};

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

@@ -567,14 +567,21 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
     classNameActive,
     variantActive,
     routerGoOptions,
+    onClick: propsOnClick,
     ...buttonProps
-  } = props;
+  } = props as ActionNavigationButtonProps & { onClick?: (e: any) => void };
   const router = useRouter();
   const { isPending, isActive } = useActive(
     options ? { href: props.href, ...options } : { href: props.href },
   );
   const anchorProps = router.anchor(props.href, routerGoOptions);
 
+  // Combine passed onClick with router's onClick
+  const combinedOnClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    propsOnClick?.(e as any);
+    anchorProps.onClick?.(e);
+  };
+
   const className = buttonProps.className || "";
   if (isActive && options !== false && classNameActive) {
     buttonProps.className = `${className} ${classNameActive}`.trim();
@@ -582,7 +589,12 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
 
   if (props.anchorProps) {
     return (
-      <Anchor component={"a"} {...anchorProps} {...props.anchorProps}>
+      <Anchor
+        component={"a"}
+        {...anchorProps}
+        {...props.anchorProps}
+        onClick={combinedOnClick}
+      >
         {props.children}
       </Anchor>
     );
@@ -594,6 +606,7 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
       loading={isPending}
       {...buttonProps}
       {...anchorProps}
+      onClick={combinedOnClick}
       variant={
         isActive && options !== false
           ? (variantActive ?? "filled")

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

@@ -0,0 +1,6 @@
+/* Dark Mode Toggle - SSR-safe icon switching */
+
+[data-mantine-color-scheme="light"] .alepha-light-hidden,
+[data-mantine-color-scheme="dark"] .alepha-dark-hidden {
+  display: none;
+}

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/AlephaMantineProvider.tsx

@@ -39,8 +39,9 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
       "react:transition:end": () => {
         nprogress.complete();
       },
-      "react:action:error": ({ error }) => {
+      "react:action:error": ({ error, type }) => {
         if (
+          type === "transition" ||
           error instanceof FormValidationError ||
           error instanceof TypeBoxError
         ) {

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/components/layout/Sidebar.tsx

@@ -110,6 +110,16 @@ export const Sidebar = (props: SidebarProps) => {
       return null;
     }
 
+    // Hide parent if all children are hidden
+    if (item.children && item.children.length > 0) {
+      const hasVisibleChild = item.children.some(
+        (child) => !child.can || child.can(),
+      );
+      if (!hasVisibleChild) {
+        return null;
+      }
+    }
+
     if (props.collapsed) {
       return (
         <SidebarCollapsedItem

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";
@@ -160,9 +159,9 @@ declare module "alepha/react/router" {
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * | type | quality | stability |
- * |------|---------|-----------|
- * | frontend | rare | experimental |
+ * | Stability | Since | Runtime |
+ * |-----------|-------|---------|
+ * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
  *
  * Core UI components based on Mantine UI v8.
  *

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/dist/auth/AuthLayout-Dj5K4SIN.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AuthLayout-Dj5K4SIN.js","names":[],"sources":["../../src/auth/components/AuthLayout.tsx"],"sourcesContent":["import { AlephaMantineProvider } from \"@alepha/ui\";\nimport { Flex } from \"@mantine/core\";\nimport { NestedView } from \"alepha/react/router\";\n\nconst AuthLayout = () => {\n  return (\n    <AlephaMantineProvider omnibar={false}>\n      <Flex flex={1} align={\"center\"} h={\"100vh\"} justify={\"center\"}>\n        <NestedView />\n      </Flex>\n    </AlephaMantineProvider>\n  );\n};\n\nexport default AuthLayout;\n"],"mappings":";;;;;;AAIA,MAAM,mBAAmB;AACvB,QACE,oBAAC;EAAsB,SAAS;YAC9B,oBAAC;GAAK,MAAM;GAAG,OAAO;GAAU,GAAG;GAAS,SAAS;aACnD,oBAAC,eAAa;IACT;GACe;;AAI5B,yBAAe"}

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],
-  });
-}