@alepha/ui 0.16.2 → 0.17.1

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

@@ -497,6 +497,7 @@ const ActionHookButton = (props: ActionHookButtonProps) => {
 
 export interface ActionClickButtonProps extends ButtonProps {
   onClick: (e: any) => any;
+  preventDefault?: boolean;
 }
 
 /**
@@ -509,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 (

package/src/core/components/data/ErrorViewer.tsx

@@ -1,8 +1,8 @@
 import {
   ActionIcon,
-  Box,
   Collapse,
   CopyButton,
+  Flex,
   type MantineSize,
   Text,
   Tooltip,
@@ -64,9 +64,9 @@ export const ErrorViewer = ({
   };
 
   return (
-    <Box pos="relative" w="100%">
+    <Flex pos="relative" w="100%">
       {copyable && (
-        <Box pos="absolute" top={0} right={0} style={{ zIndex: 1 }}>
+        <Flex pos="absolute" top={0} right={0} style={{ zIndex: 1 }}>
           <CopyButton value={getCopyContent()}>
             {({ copied, copy }) => (
               <Tooltip label={copied ? "Copied" : "Copy Error"}>
@@ -85,10 +85,10 @@ export const ErrorViewer = ({
               </Tooltip>
             )}
           </CopyButton>
-        </Box>
+        </Flex>
       )}
-      <Box pt={copyable ? 30 : 0}>
-        <Box
+      <Flex pt={copyable ? 30 : 0}>
+        <Flex
           style={{
             display: "flex",
             alignItems: "flex-start",
@@ -112,11 +112,11 @@ export const ErrorViewer = ({
           >
             {errorMessage}
           </Text>
-        </Box>
+        </Flex>
 
         {showStack && stackLines.length > 1 && (
-          <Box mt="sm">
-            <Box
+          <Flex mt="sm">
+            <Flex
               style={{
                 display: "flex",
                 alignItems: "center",
@@ -135,10 +135,10 @@ export const ErrorViewer = ({
               <Text c="dimmed" size={sizeConfig.text} fw={500}>
                 Stack Trace ({stackLines.length - 1} frames)
               </Text>
-            </Box>
+            </Flex>
 
             <Collapse in={stackExpanded}>
-              <Box
+              <Flex
                 mt="xs"
                 pl="md"
                 style={{
@@ -159,12 +159,12 @@ export const ErrorViewer = ({
                     {line}
                   </Text>
                 ))}
-              </Box>
+              </Flex>
             </Collapse>
-          </Box>
+          </Flex>
         )}
-      </Box>
-    </Box>
+      </Flex>
+    </Flex>
   );
 };
 

package/src/core/components/dialogs/AlertDialog.tsx

@@ -1,12 +1,12 @@
-import { Button, Group, Text } from "@mantine/core";
+import { Button, Flex, Text } from "@mantine/core";
 import type { AlertDialogProps } from "../../services/DialogService.tsx";
 
 const AlertDialog = ({ options, onClose }: AlertDialogProps) => (
   <>
     {options?.message && <Text mb="md">{options.message}</Text>}
-    <Group justify="flex-end">
+    <Flex justify="flex-end">
       <Button onClick={onClose}>{options?.okLabel || "OK"}</Button>
-    </Group>
+    </Flex>
   </>
 );
 

package/src/core/components/dialogs/ConfirmDialog.tsx

@@ -1,10 +1,10 @@
-import { Button, Group, Text } from "@mantine/core";
+import { Button, Flex, Text } from "@mantine/core";
 import type { ConfirmDialogProps } from "../../services/DialogService.tsx";
 
 const ConfirmDialog = ({ options, onConfirm }: ConfirmDialogProps) => (
   <>
     {options?.message && <Text mb="md">{options.message}</Text>}
-    <Group justify="flex-end">
+    <Flex justify="flex-end">
       <Button variant="subtle" onClick={() => onConfirm(false)}>
         {options?.cancelLabel || "Cancel"}
       </Button>
@@ -14,7 +14,7 @@ const ConfirmDialog = ({ options, onConfirm }: ConfirmDialogProps) => (
       >
         {options?.confirmLabel || "Confirm"}
       </Button>
-    </Group>
+    </Flex>
   </>
 );
 

package/src/core/components/dialogs/PromptDialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Text, TextInput } from "@mantine/core";
+import { Button, Flex, Text, TextInput } from "@mantine/core";
 import { useEffect, useRef, useState } from "react";
 import type { PromptDialogProps } from "../../services/DialogService.tsx";
 
@@ -36,7 +36,7 @@ const PromptDialog = ({ options, onSubmit }: PromptDialogProps) => {
         required={options?.required}
         mb="md"
       />
-      <Group justify="flex-end">
+      <Flex justify="flex-end">
         <Button variant="subtle" onClick={() => onSubmit(null)}>
           {options?.cancelLabel || "Cancel"}
         </Button>
@@ -46,7 +46,7 @@ const PromptDialog = ({ options, onSubmit }: PromptDialogProps) => {
         >
           {options?.submitLabel || "OK"}
         </Button>
-      </Group>
+      </Flex>
     </>
   );
 };