@alepha/ui 0.16.1 → 0.17.0

package/src/admin/primitives/$uiAdmin.ts

@@ -1,11 +1,11 @@
-import type { AdminShellProps } from "@alepha/ui";
+import type { DashboardShellProps } from "@alepha/ui";
 import { $context } from "alepha";
 import { AdminRouter } from "../AdminRouter.ts";
 
 /**
  * Register Admin UI components and get the AdminRouter instance.
  */
-export const $uiAdmin = (optsFn?: (a: AdminRouter) => AdminShellProps) => {
+export const $uiAdmin = (optsFn?: (a: AdminRouter) => DashboardShellProps) => {
   const { alepha } = $context();
   const adminRouter = alepha.inject(AdminRouter);
 

package/src/auth/AuthRouter.ts

@@ -27,6 +27,7 @@ export class AuthRouter {
   protected readonly auth = $inject(ReactAuth);
 
   authLayout = $page({
+    label: "Auth",
     path: "/auth",
     lazy: () => import("./components/AuthLayout.tsx"),
     children: () => [

package/src/auth/components/Login.tsx

@@ -1,5 +1,5 @@
 import { ActionButton, Control, capitalize } from "@alepha/ui";
-import { Card, Flex, Group, Image, Stack, Text, Title } from "@mantine/core";
+import { Card, Flex, Image, Text, Title } from "@mantine/core";
 import { IconLock, IconUser } from "@tabler/icons-react";
 import { AlephaError, t } from "alepha";
 import type { RealmConfig } from "alepha/api/users";
@@ -115,14 +115,14 @@ const Login = (props: LoginProps) => {
 
   return (
     <Flex flex={1} justify={"center"} align={"center"}>
-      <Stack gap={"sm"} w={360}>
+      <Flex direction="column" gap={"sm"} w={360}>
         <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
-          <Stack gap={"md"}>
+          <Flex direction="column" gap={"md"}>
             {/* Realm branding */}
             {(settings.logoUrl ||
               settings.displayName ||
               settings.description) && (
-              <Stack gap={"xs"} align="center" mb="xs">
+              <Flex direction="column" gap={"xs"} align="center" mb="xs">
                 {settings.logoUrl && (
                   <Image
                     src={settings.logoUrl}
@@ -142,14 +142,14 @@ const Login = (props: LoginProps) => {
                     {settings.description}
                   </Text>
                 )}
-              </Stack>
+              </Flex>
             )}
 
             {/* Credentials login form */}
             {credentialsProvider && (
               <>
                 <form {...form.props}>
-                  <Stack flex={1} gap={"md"}>
+                  <Flex direction="column" flex={1} gap={"md"}>
                     <Control
                       title={identifierTitle}
                       input={form.input.identifier}
@@ -169,7 +169,7 @@ const Login = (props: LoginProps) => {
                     <ActionButton variant={"filled"} form={form}>
                       {tr("loginSignIn")}
                     </ActionButton>
-                  </Stack>
+                  </Flex>
                 </form>
                 {settings.resetPasswordAllowed && (
                   <Text size="sm" ta="center">
@@ -188,18 +188,18 @@ const Login = (props: LoginProps) => {
 
             {/* OR divider - only when both credentials AND external methods exist */}
             {showOrDivider && (
-              <Group align="center" justify="center" gap={"md"}>
+              <Flex align="center" justify="center" gap={"md"}>
                 <Flex flex={1} h={"1px"} bg={"var(--alepha-border)"} />
                 <Text size="xs" c={"dimmed"}>
                   {tr("loginOr")}
                 </Text>
                 <Flex flex={1} h={"1px"} bg={"var(--alepha-border)"} />
-              </Group>
+              </Flex>
             )}
 
             {/* External login methods */}
             {externalLoginMethods.length > 0 && (
-              <Stack gap={"sm"}>
+              <Flex direction="column" gap={"sm"}>
                 {externalLoginMethods.map((method) => (
                   <ActionButton
                     variant={"default"}
@@ -217,7 +217,7 @@ const Login = (props: LoginProps) => {
                     })}
                   </ActionButton>
                 ))}
-              </Stack>
+              </Flex>
             )}
 
             {/* Registration link */}
@@ -234,12 +234,12 @@ const Login = (props: LoginProps) => {
                 </ActionButton>
               </Text>
             )}
-          </Stack>
+          </Flex>
         </Card>
         <ActionButton variant={"subtle"} href={"/"}>
           {tr("loginCancel")}
         </ActionButton>
-      </Stack>
+      </Flex>
     </Flex>
   );
 };

package/src/auth/components/Profile.tsx

@@ -1,14 +1,5 @@
 import { ActionButton } from "@alepha/ui";
-import {
-  Avatar,
-  Badge,
-  Card,
-  Flex,
-  Group,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { Avatar, Badge, Card, Flex, Text, Title } from "@mantine/core";
 import {
   IconAt,
   IconCalendar,
@@ -35,9 +26,9 @@ const Profile = () => {
 
   return (
     <Flex flex={1} justify="center" align="center">
-      <Stack gap="md" w={400}>
+      <Flex direction="column" gap="md" w={400}>
         <Card withBorder p="xl" bg="var(--alepha-elevated)">
-          <Stack gap="lg">
+          <Flex direction="column" gap="lg">
             {/* Avatar and name */}
             <Flex direction="column" align="center" gap="md">
               <Avatar
@@ -48,18 +39,18 @@ const Profile = () => {
               >
                 {!picture && <IconUser size={48} />}
               </Avatar>
-              <Stack gap={4} align="center">
+              <Flex direction="column" gap={4} align="center">
                 <Title order={3}>{displayName}</Title>
                 {email && username && (
                   <Text size="sm" c="dimmed">
                     @{username}
                   </Text>
                 )}
-              </Stack>
+              </Flex>
             </Flex>
 
             {/* User details */}
-            <Stack gap="sm">
+            <Flex direction="column" gap="sm">
               {email && (
                 <ProfileField icon={<IconAt size={18} />} label="Email">
                   {email}
@@ -83,13 +74,13 @@ const Profile = () => {
               {/* Roles */}
               {roles && roles.length > 0 && (
                 <ProfileField icon={<IconShield size={18} />} label="Roles">
-                  <Group gap="xs">
+                  <Flex gap="xs">
                     {roles.map((role) => (
                       <Badge key={role} size="sm" variant="light">
                         {role}
                       </Badge>
                     ))}
-                  </Group>
+                  </Flex>
                 </ProfileField>
               )}
 
@@ -99,19 +90,19 @@ const Profile = () => {
                   icon={<IconCalendar size={18} />}
                   label="Organizations"
                 >
-                  <Group gap="xs">
+                  <Flex gap="xs">
                     {organizations.map((org) => (
                       <Badge key={org} size="sm" variant="outline">
                         {org}
                       </Badge>
                     ))}
-                  </Group>
+                  </Flex>
                 </ProfileField>
               )}
-            </Stack>
+            </Flex>
 
             {/* Actions */}
-            <Stack gap="sm" mt="md">
+            <Flex direction="column" gap="sm" mt="md">
               <ActionButton
                 variant="light"
                 color="red"
@@ -120,14 +111,14 @@ const Profile = () => {
               >
                 Sign out
               </ActionButton>
-            </Stack>
-          </Stack>
+            </Flex>
+          </Flex>
         </Card>
 
         <ActionButton variant="subtle" href="/">
           Back to home
         </ActionButton>
-      </Stack>
+      </Flex>
     </Flex>
   );
 };
@@ -144,12 +135,12 @@ const ProfileField = ({ icon, label, children }: ProfileFieldProps) => {
       <Flex c="dimmed" mt={2}>
         {icon}
       </Flex>
-      <Stack gap={2} flex={1}>
+      <Flex direction="column" gap={2} flex={1}>
         <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
           {label}
         </Text>
         <Text size="sm">{children}</Text>
-      </Stack>
+      </Flex>
     </Flex>
   );
 };

package/src/auth/components/Register.tsx

@@ -1,15 +1,5 @@
 import { ActionButton, Control, capitalize } from "@alepha/ui";
-import {
-  Alert,
-  Card,
-  Flex,
-  Group,
-  Image,
-  PinInput,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { Alert, Card, Flex, Image, PinInput, Text, Title } from "@mantine/core";
 import {
   IconAlertCircle,
   IconLock,
@@ -222,9 +212,9 @@ const Register = (props: RegisterProps) => {
   if (registrationState.phase === "verification" && registrationState.intent) {
     return (
       <Flex flex={1} justify={"center"} align={"center"}>
-        <Stack gap={"sm"} w={360}>
+        <Flex direction="column" gap={"sm"} w={360}>
           <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
-            <Stack gap={"md"}>
+            <Flex direction="column" gap={"md"}>
               <Text size="lg" fw={500} ta="center">
                 {tr("registerVerifyTitle") ?? "Verify your account"}
               </Text>
@@ -240,7 +230,7 @@ const Register = (props: RegisterProps) => {
               )}
 
               {registrationState.intent.expectEmailVerification && (
-                <Stack gap={"xs"}>
+                <Flex direction="column" gap={"xs"}>
                   <Text size="sm" fw={500}>
                     {tr("registerEmailCode")}
                   </Text>
@@ -254,11 +244,11 @@ const Register = (props: RegisterProps) => {
                       aria-label="Email verification code"
                     />
                   </Flex>
-                </Stack>
+                </Flex>
               )}
 
               {registrationState.intent.expectPhoneVerification && (
-                <Stack gap={"xs"}>
+                <Flex direction="column" gap={"xs"}>
                   <Text size="sm" fw={500}>
                     {tr("registerPhoneCode")}
                   </Text>
@@ -272,7 +262,7 @@ const Register = (props: RegisterProps) => {
                       aria-label="Phone verification code"
                     />
                   </Flex>
-                </Stack>
+                </Flex>
               )}
 
               <ActionButton
@@ -292,9 +282,9 @@ const Register = (props: RegisterProps) => {
               >
                 {tr("registerVerifyBack") ?? "Back to registration"}
               </ActionButton>
-            </Stack>
+            </Flex>
           </Card>
-        </Stack>
+        </Flex>
       </Flex>
     );
   }
@@ -309,14 +299,14 @@ const Register = (props: RegisterProps) => {
   // Registration form phase UI
   return (
     <Flex flex={1} justify={"center"} align={"center"}>
-      <Stack gap={"sm"} w={360}>
+      <Flex direction="column" gap={"sm"} w={360}>
         <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
-          <Stack gap={"md"}>
+          <Flex direction="column" gap={"md"}>
             {/* Realm branding */}
             {(settings.logoUrl ||
               settings.displayName ||
               settings.description) && (
-              <Stack gap={"xs"} align="center" mb="xs">
+              <Flex direction="column" gap={"xs"} align="center" mb="xs">
                 {settings.logoUrl && (
                   <Image
                     src={settings.logoUrl}
@@ -336,7 +326,7 @@ const Register = (props: RegisterProps) => {
                     {settings.description}
                   </Text>
                 )}
-              </Stack>
+              </Flex>
             )}
 
             {!isRegistrationAllowed ? (
@@ -361,7 +351,7 @@ const Register = (props: RegisterProps) => {
                 {/* Credentials registration form */}
                 {credentialsProvider && (
                   <form {...form.props}>
-                    <Stack flex={1} gap={"md"}>
+                    <Flex direction="column" flex={1} gap={"md"}>
                       {settings.usernameEnabled !== false &&
                         form.input.username && (
                           <Control
@@ -417,24 +407,24 @@ const Register = (props: RegisterProps) => {
                       >
                         {tr("registerCreateAccount")}
                       </ActionButton>
-                    </Stack>
+                    </Flex>
                   </form>
                 )}
 
                 {/* OR divider - only when both credentials AND external methods exist */}
                 {showOrDivider && (
-                  <Group align="center" justify="center" gap={"md"}>
+                  <Flex align="center" justify="center" gap={"md"}>
                     <Flex flex={1} h={"1px"} bg={"var(--alepha-border)"} />
                     <Text size="xs" c="dimmed">
                       {tr("registerOr")}
                     </Text>
                     <Flex flex={1} h={"1px"} bg={"var(--alepha-border)"} />
-                  </Group>
+                  </Flex>
                 )}
 
                 {/* External login methods */}
                 {externalMethods.length > 0 && (
-                  <Stack gap={"sm"}>
+                  <Flex direction="column" gap={"sm"}>
                     {externalMethods.map((method) => (
                       <ActionButton
                         variant={"default"}
@@ -452,7 +442,7 @@ const Register = (props: RegisterProps) => {
                         })}
                       </ActionButton>
                     ))}
-                  </Stack>
+                  </Flex>
                 )}
 
                 {/* Sign in link */}
@@ -469,12 +459,12 @@ const Register = (props: RegisterProps) => {
                 </Text>
               </>
             )}
-          </Stack>
+          </Flex>
         </Card>
         <ActionButton variant={"subtle"} href={redirect}>
           {tr("registerCancel")}
         </ActionButton>
-      </Stack>
+      </Flex>
     </Flex>
   );
 };

package/src/auth/components/ResetPassword.tsx

@@ -1,14 +1,5 @@
 import { ActionButton, Control } from "@alepha/ui";
-import {
-  Alert,
-  Card,
-  Flex,
-  Image,
-  PinInput,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { Alert, Card, Flex, Image, PinInput, Text, Title } from "@mantine/core";
 import {
   IconAlertCircle,
   IconCheck,
@@ -139,14 +130,14 @@ const ResetPassword = (props: ResetPasswordProps) => {
 
   return (
     <Flex flex={1} justify={"center"} align={"center"}>
-      <Stack gap={"sm"} w={360}>
+      <Flex direction="column" gap={"sm"} w={360}>
         <Card withBorder p={"lg"} bg={"var(--alepha-elevated)"}>
-          <Stack gap={"md"}>
+          <Flex direction="column" gap={"md"}>
             {/* Realm branding */}
             {(settings.logoUrl ||
               settings.displayName ||
               settings.description) && (
-              <Stack gap={"xs"} align="center" mb="xs">
+              <Flex direction="column" gap={"xs"} align="center" mb="xs">
                 {settings.logoUrl && (
                   <Image
                     src={settings.logoUrl}
@@ -166,7 +157,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
                     {settings.description}
                   </Text>
                 )}
-              </Stack>
+              </Flex>
             )}
 
             {error && (
@@ -194,7 +185,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
               </>
             ) : resetState.step === "email" ? (
               <form {...emailForm.props}>
-                <Stack flex={1} gap={"md"}>
+                <Flex direction="column" flex={1} gap={"md"}>
                   <Text size="lg" fw={500} ta="center">
                     {tr("resetPasswordTitle")}
                   </Text>
@@ -217,10 +208,10 @@ const ResetPassword = (props: ResetPasswordProps) => {
                   >
                     {tr("resetPasswordSendCode")}
                   </ActionButton>
-                </Stack>
+                </Flex>
               </form>
             ) : resetState.step === "code" ? (
-              <Stack gap={"md"}>
+              <Flex direction="column" gap={"md"}>
                 <Text size="lg" fw={500} ta="center">
                   {tr("resetPasswordTitle")}
                 </Text>
@@ -247,10 +238,10 @@ const ResetPassword = (props: ResetPasswordProps) => {
                 >
                   {tr("resetPasswordResendCode")}
                 </ActionButton>
-              </Stack>
+              </Flex>
             ) : resetState.step === "password" ? (
               <form {...passwordForm.props}>
-                <Stack flex={1} gap={"md"}>
+                <Flex direction="column" flex={1} gap={"md"}>
                   <Text size="lg" fw={500} ta="center">
                     {tr("resetPasswordTitle")}
                   </Text>
@@ -277,7 +268,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
                   <ActionButton form={passwordForm}>
                     {tr("resetPasswordSetNewPassword")}
                   </ActionButton>
-                </Stack>
+                </Flex>
               </form>
             ) : (
               <>
@@ -293,12 +284,12 @@ const ResetPassword = (props: ResetPasswordProps) => {
                 </ActionButton>
               </>
             )}
-          </Stack>
+          </Flex>
         </Card>
         <ActionButton variant={"subtle"} href={redirect}>
           {tr("resetPasswordCancel")}
         </ActionButton>
-      </Stack>
+      </Flex>
     </Flex>
   );
 };

package/src/auth/components/VerifyEmail.tsx

@@ -1,5 +1,5 @@
 import { ActionButton } from "@alepha/ui";
-import { Alert, Card, Flex, Loader, Stack, Text } from "@mantine/core";
+import { Alert, Card, Flex, Loader, Text } from "@mantine/core";
 import { IconAlertCircle, IconCheck, IconMailCheck } from "@tabler/icons-react";
 import type { UserController } from "alepha/api/users";
 import { useClient } from "alepha/react";
@@ -49,9 +49,9 @@ const VerifyEmail = (_props: VerifyEmailProps) => {
 
   return (
     <Flex flex={1} justify="center" align="center">
-      <Stack gap="sm" w={400}>
+      <Flex direction="column" gap="sm" w={400}>
         <Card withBorder p="lg" bg="var(--alepha-elevated)">
-          <Stack gap="md" align="center">
+          <Flex direction="column" gap="md" align="center">
             {step === "verifying" && (
               <>
                 <Loader size="lg" />
@@ -93,9 +93,9 @@ const VerifyEmail = (_props: VerifyEmailProps) => {
                 </ActionButton>
               </>
             )}
-          </Stack>
+          </Flex>
         </Card>
-      </Stack>
+      </Flex>
     </Flex>
   );
 };

package/src/auth/components/buttons/UserButton.tsx

@@ -31,6 +31,11 @@ export interface UserButtonProps
    */
   logoutLabel?: string;
 
+  /**
+   * Custom label for the login button when user is not authenticated
+   */
+  loginLabel?: string;
+
   /**
    * Menu configuration overrides
    */
@@ -51,6 +56,7 @@ const UserButton = (props: UserButtonProps) => {
   const {
     menuItems = [],
     logoutLabel = "Sign out",
+    loginLabel,
     menuConfig,
     showLogoutDivider = menuItems.length > 0,
     icon,
@@ -79,9 +85,11 @@ const UserButton = (props: UserButtonProps) => {
     return (
       <ActionButton
         {...buttonProps}
-        icon={IconLogin2}
+        icon={icon === null ? undefined : (icon ?? IconLogin2)}
         href={authRouter.path("login")}
-      />
+      >
+        {loginLabel ?? children}
+      </ActionButton>
     );
   }
 
@@ -132,12 +140,14 @@ const UserButton = (props: UserButtonProps) => {
   });
 
   // Use leftSection for Avatar (JSX element), icon prop for component types
-  const hasAvatar = !icon && auth.user.picture;
+  const hasAvatar = icon === undefined && auth.user.picture;
 
   return (
     <ActionButton
       {...buttonProps}
-      icon={hasAvatar ? undefined : (icon ?? IconUser)}
+      icon={
+        hasAvatar ? undefined : icon === null ? undefined : (icon ?? IconUser)
+      }
       leftSection={
         hasAvatar ? (
           <Avatar

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

@@ -243,17 +243,14 @@ const ActionButton = (_props: ActionProps) => {
   const props = { ..._props };
   const { tooltip, menu, icon, ...restProps } = props;
 
-  if (props.variant === "subtle") {
-    restProps.c ??= "var(--mantine-color-text)";
+  if (props.variant === "subtle" || props.variant === "outline") {
     restProps.color ??= "gray";
   }
 
   if (props.intent) {
     if (props.intent === "none") {
-      restProps.c ??= "var(--mantine-color-text)";
       restProps.color ??= "gray";
     } else if (props.intent === "primary") {
-      restProps.c ??= "white";
       restProps.color ??= theme.primaryColor;
     } else if (props.intent === "success") {
       restProps.c ??= "white";
@@ -262,7 +259,6 @@ const ActionButton = (_props: ActionProps) => {
       restProps.c ??= "white";
       restProps.color ??= "red";
     } else if (props.intent === "warning") {
-      restProps.c ??= "var(--mantine-color-text)";
       restProps.color ??= "yellow";
     } else if (props.intent === "info") {
       restProps.c ??= "white";
@@ -271,18 +267,11 @@ const ActionButton = (_props: ActionProps) => {
   }
 
   if (props.icon) {
+    const sizes = ui.sizes.icon as Record<string, number>;
     const icon = isComponentType(props.icon) ? (
-      <props.icon size={ui.sizes.icon.md} />
+      <props.icon size={sizes[props.size || "md"]} />
     ) : (
-      <ThemeIcon
-        w={24} // TODO: make size configurable
-        variant={"transparent"}
-        size={"sm"}
-        c={"var(--mantine-color-text)"}
-        {...props.themeIconProps}
-      >
-        {props.icon as ReactNode}
-      </ThemeIcon>
+      <span>{props.icon as ReactNode}</span>
     );
 
     if (!props.children) {
@@ -508,6 +497,7 @@ const ActionHookButton = (props: ActionHookButtonProps) => {
 
 export interface ActionClickButtonProps extends ButtonProps {
   onClick: (e: any) => any;
+  preventDefault?: boolean;
 }
 
 /**
@@ -520,14 +510,20 @@ export interface ActionClickButtonProps extends ButtonProps {
  * </ActionButton>
  * ```
  */
-const ActionClickButton = (props: ActionClickButtonProps) => {
+const ActionClickButton = ({
+  preventDefault,
+  ...props
+}: ActionClickButtonProps) => {
   const action = useAction(
     {
       handler: async (e: any) => {
+        if (preventDefault) {
+          e.preventDefault();
+        }
         await props.onClick(e);
       },
     },
-    [props.onClick],
+    [props.onClick, preventDefault],
   );
 
   return (