@alepha/ui 0.16.2 → 0.17.1

package/src/admin/components/users/AdminUserDetails.tsx

@@ -1,16 +1,14 @@
 import { ActionButton, ClipboardButton, Control } from "@alepha/ui";
 import {
   Badge,
-  Box,
   Card,
   Center,
   Divider,
+  Flex,
   Grid,
-  Group,
   Loader,
   Paper,
   SimpleGrid,
-  Stack,
   Text,
   ThemeIcon,
 } from "@mantine/core";
@@ -43,7 +41,7 @@ interface DataRowProps {
 }
 
 const DataRow = ({ label, value, copyValue }: DataRowProps) => (
-  <Group
+  <Flex
     justify="space-between"
     py={8}
     wrap="nowrap"
@@ -52,7 +50,7 @@ const DataRow = ({ label, value, copyValue }: DataRowProps) => (
     <Text size="sm" c="dimmed" style={{ flexShrink: 0 }}>
       {label}
     </Text>
-    <Group gap={6} wrap="nowrap" style={{ minWidth: 0 }}>
+    <Flex gap={6} wrap="nowrap" style={{ minWidth: 0 }}>
       {typeof value === "string" ? (
         <Text size="sm" fw={500} truncate style={{ maxWidth: 220 }}>
           {value || "—"}
@@ -68,8 +66,8 @@ const DataRow = ({ label, value, copyValue }: DataRowProps) => (
           c="dimmed"
         />
       )}
-    </Group>
-  </Group>
+    </Flex>
+  </Flex>
 );
 
 interface StatCardProps {
@@ -81,19 +79,19 @@ interface StatCardProps {
 
 const StatCard = ({ icon, label, value, color }: StatCardProps) => (
   <Paper p="md" radius="md" withBorder>
-    <Group gap="sm">
+    <Flex gap="sm">
       <ThemeIcon size="lg" radius="md" variant="light" color={color}>
         {icon}
       </ThemeIcon>
-      <Box>
+      <Flex>
         <Text size="xl" fw={700} lh={1}>
           {value}
         </Text>
         <Text size="xs" c="dimmed">
           {label}
         </Text>
-      </Box>
-    </Group>
+      </Flex>
+    </Flex>
   </Paper>
 );
 
@@ -165,10 +163,10 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
   if (!user) {
     return (
       <Center flex={1} py="xl">
-        <Stack align="center" gap="xs">
+        <Flex direction="column" align="center" gap="xs">
           <IconUser size={48} opacity={0.3} />
           <Text c="dimmed">User not found</Text>
-        </Stack>
+        </Flex>
       </Center>
     );
   }
@@ -179,7 +177,7 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
       : user.firstName || user.lastName || null;
 
   return (
-    <Stack gap="md">
+    <Flex direction="column" gap="md">
       {/* Stats Overview */}
       <SimpleGrid cols={{ base: 2, sm: 4 }}>
         <StatCard
@@ -212,12 +210,12 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
         {/* Left Column - Account Details */}
         <Grid.Col span={{ base: 12, md: 6 }}>
           <Card padding={0} radius="md" withBorder h="100%">
-            <Group justify="space-between" p="md" pb={0}>
+            <Flex justify="space-between" p="md" pb={0}>
               <Text fw={600} size="sm">
                 Account Details
               </Text>
-            </Group>
-            <Box px="md" pb="md">
+            </Flex>
+            <Flex px="md" pb="md">
               <DataRow label="User ID" value={user.id} copyValue={user.id} />
               <DataRow
                 label="Username"
@@ -227,7 +225,7 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
               <DataRow
                 label="Email"
                 value={
-                  <Group gap={6}>
+                  <Flex gap={6}>
                     <Text size="sm" fw={500}>
                       {user.email || "—"}
                     </Text>
@@ -240,7 +238,7 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
                         {user.emailVerified ? "verified" : "unverified"}
                       </Badge>
                     )}
-                  </Group>
+                  </Flex>
                 }
                 copyValue={user.email}
               />
@@ -253,7 +251,7 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
               <DataRow
                 label="Status"
                 value={
-                  <Group gap={4}>
+                  <Flex gap={4}>
                     <ThemeIcon
                       size={16}
                       radius="xl"
@@ -269,17 +267,17 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
                     <Text size="sm" fw={500}>
                       {user.enabled ? "Active" : "Disabled"}
                     </Text>
-                  </Group>
+                  </Flex>
                 }
               />
-            </Box>
+            </Flex>
           </Card>
         </Grid.Col>
 
         {/* Right Column - Personal Info */}
         <Grid.Col span={{ base: 12, md: 6 }}>
           <Card padding={0} radius="md" withBorder h="100%">
-            <Group justify="space-between" p="md" pb={0}>
+            <Flex justify="space-between" p="md" pb={0}>
               <Text fw={600} size="sm">
                 Personal Information
               </Text>
@@ -292,12 +290,12 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
                   Edit
                 </ActionButton>
               )}
-            </Group>
+            </Flex>
 
             {editing ? (
-              <Box p="md">
+              <Flex p="md">
                 <form {...form.props}>
-                  <Stack gap="sm">
+                  <Flex direction="column" gap="sm">
                     <SimpleGrid cols={2}>
                       <Control
                         title="First Name"
@@ -311,7 +309,7 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
                     </SimpleGrid>
                     <Control title="Roles" input={form.input.roles} />
                     <Divider />
-                    <Group justify="flex-end" gap="xs">
+                    <Flex justify="flex-end" gap="xs">
                       <ActionButton
                         variant="subtle"
                         size="xs"
@@ -322,12 +320,12 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
                       <ActionButton size="xs" form={form}>
                         Save
                       </ActionButton>
-                    </Group>
-                  </Stack>
+                    </Flex>
+                  </Flex>
                 </form>
-              </Box>
+              </Flex>
             ) : (
-              <Box px="md" pb="md">
+              <Flex px="md" pb="md">
                 <DataRow label="First Name" value={user.firstName || "—"} />
                 <DataRow label="Last Name" value={user.lastName || "—"} />
                 <DataRow label="Display Name" value={displayName || "—"} />
@@ -335,13 +333,13 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
                   label="Roles"
                   value={
                     user.roles.length > 0 ? (
-                      <Group gap={4}>
+                      <Flex gap={4}>
                         {user.roles.map((role) => (
                           <Badge key={role} size="xs" variant="light">
                             {role}
                           </Badge>
                         ))}
-                      </Group>
+                      </Flex>
                     ) : (
                       <Text size="sm" c="dimmed">
                         No roles
@@ -349,7 +347,7 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
                     )
                   }
                 />
-              </Box>
+              </Flex>
             )}
           </Card>
         </Grid.Col>
@@ -357,58 +355,58 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
 
       {/* Timeline */}
       <Card padding={0} radius="md" withBorder>
-        <Group justify="space-between" p="md" pb={0}>
+        <Flex justify="space-between" p="md" pb={0}>
           <Text fw={600} size="sm">
             Activity Timeline
           </Text>
-        </Group>
+        </Flex>
         <SimpleGrid cols={{ base: 2, sm: 4 }} p="md">
-          <Box>
-            <Group gap={6} mb={4}>
+          <Flex>
+            <Flex gap={6} mb={4}>
               <IconCalendar size={14} style={{ opacity: 0.5 }} />
               <Text size="xs" c="dimmed">
                 Created
               </Text>
-            </Group>
+            </Flex>
             <Text size="sm" fw={500}>
               {l(user.createdAt, { date: "ll" })}
             </Text>
             <Text size="xs" c="dimmed">
               {l(user.createdAt, { date: "fromNow" })}
             </Text>
-          </Box>
-          <Box>
-            <Group gap={6} mb={4}>
+          </Flex>
+          <Flex>
+            <Flex gap={6} mb={4}>
               <IconCalendar size={14} style={{ opacity: 0.5 }} />
               <Text size="xs" c="dimmed">
                 Updated
               </Text>
-            </Group>
+            </Flex>
             <Text size="sm" fw={500}>
               {l(user.updatedAt, { date: "ll" })}
             </Text>
             <Text size="xs" c="dimmed">
               {l(user.updatedAt, { date: "fromNow" })}
             </Text>
-          </Box>
-          <Box>
-            <Group gap={6} mb={4}>
+          </Flex>
+          <Flex>
+            <Flex gap={6} mb={4}>
               <IconDevices size={14} style={{ opacity: 0.5 }} />
               <Text size="xs" c="dimmed">
                 Last Login
               </Text>
-            </Group>
+            </Flex>
             <Text size="sm" c="dimmed">
               —
             </Text>
-          </Box>
-          <Box>
-            <Group gap={6} mb={4}>
+          </Flex>
+          <Flex>
+            <Flex gap={6} mb={4}>
               <IconCheck size={14} style={{ opacity: 0.5 }} />
               <Text size="xs" c="dimmed">
                 Email Verified
               </Text>
-            </Group>
+            </Flex>
             {user.emailVerified ? (
               <>
                 <Text size="sm" fw={500}>
@@ -423,10 +421,10 @@ const AdminUserDetails = (props: AdminUserDetailsProps) => {
                 Not verified
               </Text>
             )}
-          </Box>
+          </Flex>
         </SimpleGrid>
       </Card>
-    </Stack>
+    </Flex>
   );
 };
 

package/src/admin/components/users/AdminUserLayout.tsx

@@ -1,4 +1,4 @@
-import { Box, Center, Loader, Stack, Text } from "@mantine/core";
+import { Center, Flex, Loader, Text } from "@mantine/core";
 import {
   IconBan,
   IconDevices,
@@ -60,10 +60,10 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
   if (!user) {
     return (
       <Center flex={1}>
-        <Stack align="center" gap="xs">
+        <Flex direction="column" align="center" gap="xs">
           <IconUser size={48} opacity={0.3} />
           <Text c="dimmed">User not found</Text>
-        </Stack>
+        </Flex>
       </Center>
     );
   }
@@ -130,8 +130,8 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
   };
 
   return (
-    <Box py="xl" px="xl" flex={1}>
-      <Stack gap="lg">
+    <Flex py="xl" px="xl" flex={1}>
+      <Flex direction="column" gap="lg">
         <AdminResourceHeader
           backHref={router.path("adminUsers")}
           backLabel="Users"
@@ -213,8 +213,8 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
         />
 
         <NestedView />
-      </Stack>
-    </Box>
+      </Flex>
+    </Flex>
   );
 };
 

package/src/admin/components/users/AdminUserSessions.tsx

@@ -1,5 +1,5 @@
 import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
-import { Badge, Group } from "@mantine/core";
+import { Badge } from "@mantine/core";
 import {
   IconDeviceDesktop,
   IconDeviceMobile,
@@ -83,7 +83,7 @@ const AdminUserSessions = (props: AdminUserSessionsProps) => {
           userAgent: {
             label: "Device",
             value: (item) => (
-              <Group gap={4}>
+              <Flex gap={4}>
                 {item.userAgent ? (
                   <>
                     <Badge
@@ -102,7 +102,7 @@ const AdminUserSessions = (props: AdminUserSessionsProps) => {
                     -
                   </Text>
                 )}
-              </Group>
+              </Flex>
             ),
           },
           ip: {

package/src/admin/components/users/AdminUserSettings.tsx

@@ -1,5 +1,5 @@
 import { ActionButton, Flex, Text } from "@alepha/ui";
-import { Alert, Card, Group, Loader, Stack } from "@mantine/core";
+import { Alert, Card, Loader } from "@mantine/core";
 import {
   IconAlertCircle,
   IconCheck,
@@ -106,7 +106,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
     <Flex flex={1} direction="column" gap="md">
       {user.email && !user.emailVerified && (
         <Card withBorder p="lg">
-          <Stack gap="md">
+          <Flex direction="column" gap="md">
             <Text size="lg" fw={500}>
               Email Verification
             </Text>
@@ -126,7 +126,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
               </Alert>
             )}
 
-            <Group>
+            <Flex>
               <ActionButton
                 leftSection={<IconMail size={16} />}
                 loading={verifyLoading}
@@ -134,13 +134,13 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
               >
                 Send Verification Link
               </ActionButton>
-            </Group>
-          </Stack>
+            </Flex>
+          </Flex>
         </Card>
       )}
 
       <Card withBorder p="lg">
-        <Stack gap="md">
+        <Flex direction="column" gap="md">
           <Text size="lg" fw={500} c="red">
             Danger Zone
           </Text>
@@ -152,7 +152,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
             </Text>
           </Alert>
 
-          <Group>
+          <Flex>
             <ActionButton
               color="red"
               leftSection={<IconTrash size={16} />}
@@ -161,8 +161,8 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
             >
               Delete User
             </ActionButton>
-          </Group>
-        </Stack>
+          </Flex>
+        </Flex>
       </Card>
     </Flex>
   );

package/src/admin/components/users/AdminUsers.tsx

@@ -1,5 +1,5 @@
 import { DataTable, Text } from "@alepha/ui";
-import { Badge, Flex, Group } from "@mantine/core";
+import { Badge, Flex } from "@mantine/core";
 import { IconCheck, IconUsersPlus, IconX } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import {
@@ -96,7 +96,7 @@ const AdminUsers = (props: AdminUsersProps) => {
           email: {
             label: "Email",
             value: (item) => (
-              <Group gap="xs">
+              <Flex gap="xs">
                 <Text size="sm">{item.email || "-"}</Text>
                 {item.email && (
                   <Badge
@@ -114,19 +114,19 @@ const AdminUsers = (props: AdminUsersProps) => {
                     {item.emailVerified ? "Verified" : "Unverified"}
                   </Badge>
                 )}
-              </Group>
+              </Flex>
             ),
           },
           roles: {
             label: "Roles",
             value: (item) => (
-              <Group gap={4}>
+              <Flex gap={4}>
                 {item.roles.map((role: string) => (
                   <Badge key={role} size="xs" variant="outline">
                     {role}
                   </Badge>
                 ))}
-              </Group>
+              </Flex>
             ),
           },
           enabled: {

package/src/admin/components/verifications/AdminVerifications.tsx

@@ -1,11 +1,11 @@
 import { Flex, Text } from "@alepha/ui";
-import { Stack } from "@mantine/core";
+
 import { IconShieldCheck } from "@tabler/icons-react";
 
 const AdminVerifications = () => {
   return (
     <Flex flex={1} justify="center" align="center">
-      <Stack align="center" gap="xs">
+      <Flex direction="column" align="center" gap="xs">
         <IconShieldCheck
           size={48}
           stroke={1.5}
@@ -17,7 +17,7 @@ const AdminVerifications = () => {
           verification codes are generated and validated through the
           verification API endpoints.
         </Text>
-      </Stack>
+      </Flex>
     </Flex>
   );
 };

package/src/admin/index.ts

@@ -6,30 +6,6 @@ import { AdminRouter } from "./AdminRouter.ts";
 // ---------------------------------------------------------------------------------------------------------------------
 
 export { AdminRouter } from "./AdminRouter.ts";
-// Audits
-export { default as AdminAudits } from "./components/audits/AdminAudits.tsx";
-// Files
-export { default as AdminFiles } from "./components/files/AdminFiles.tsx";
-// Jobs
-export { default as AdminJobs } from "./components/jobs/AdminJobs.tsx";
-// API Keys
-export { default as AdminApiKeys } from "./components/keys/AdminApiKeys.tsx";
-// Notifications
-export { default as AdminNotifications } from "./components/notifications/AdminNotifications.tsx";
-// Parameters
-export { default as AdminParameters } from "./components/parameters/AdminParameters.tsx";
-// Sessions
-export { default as AdminSessions } from "./components/sessions/AdminSessions.tsx";
-// Users
-export { default as AdminUserAudits } from "./components/users/AdminUserAudits.tsx";
-export { default as AdminUserCreate } from "./components/users/AdminUserCreate.tsx";
-export { default as AdminUserDetails } from "./components/users/AdminUserDetails.tsx";
-export { default as AdminUserLayout } from "./components/users/AdminUserLayout.tsx";
-export { default as AdminUserSessions } from "./components/users/AdminUserSessions.tsx";
-export { default as AdminUserSettings } from "./components/users/AdminUserSettings.tsx";
-export { default as AdminUsers } from "./components/users/AdminUsers.tsx";
-// Verifications
-export { default as AdminVerifications } from "./components/verifications/AdminVerifications.tsx";
 export * from "./primitives/$uiAdmin.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------

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