@alepha/ui 0.16.1 → 0.17.0

package/src/admin/components/shared/AdminResourceHeader.tsx

@@ -4,9 +4,8 @@ import {
   Avatar,
   Badge,
   Button,
-  Group,
+  Flex,
   Menu,
-  Stack,
   Text,
   Tooltip,
 } from "@mantine/core";
@@ -172,10 +171,10 @@ const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
   };
 
   return (
-    <Stack gap="xs">
+    <Flex direction="column" gap="xs">
       {/* Breadcrumb / Back navigation */}
       {backHref && (
-        <Group>
+        <Flex>
           <ActionButton
             variant="subtle"
             size="xs"
@@ -185,18 +184,23 @@ const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
           >
             {backLabel}
           </ActionButton>
-        </Group>
+        </Flex>
       )}
 
       {/* Main header */}
-      <Group justify="space-between" align="flex-start" wrap="nowrap">
+      <Flex justify="space-between" align="flex-start" wrap="nowrap">
         {/* Left: Avatar + Info */}
-        <Group gap="md" wrap="nowrap">
+        <Flex gap="md" wrap="nowrap">
           {renderAvatar()}
 
-          <Stack gap={2} justify="center" style={{ minHeight: 56 }}>
+          <Flex
+            direction="column"
+            gap={2}
+            justify="center"
+            style={{ minHeight: 56 }}
+          >
             {/* Title row */}
-            <Group gap="xs" align="center">
+            <Flex gap="xs" align="center">
               <Text size="md" fw={600} lh={1.2}>
                 {title}
               </Text>
@@ -210,7 +214,7 @@ const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
                   {status.label}
                 </Badge>
               )}
-            </Group>
+            </Flex>
 
             {/* Subtitle */}
             {subtitle && (
@@ -218,11 +222,11 @@ const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
                 {subtitle}
               </Text>
             )}
-          </Stack>
-        </Group>
+          </Flex>
+        </Flex>
 
         {/* Right: Actions */}
-        <Group gap="xs">
+        <Flex gap="xs">
           {externalUrl && (
             <Tooltip label="Open in new tab" openDelay={500}>
               <ActionIcon
@@ -272,9 +276,9 @@ const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
               </Menu.Dropdown>
             </Menu>
           )}
-        </Group>
-      </Group>
-    </Stack>
+        </Flex>
+      </Flex>
+    </Flex>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import { DataTable, Flex, Text } from "@alepha/ui";
-import { Badge, Group, Tooltip } from "@mantine/core";
+import { Badge, Tooltip } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconCheck,
@@ -138,20 +138,20 @@ const AdminUserAudits = (_props: AdminUserAuditsProps) => {
             fit: true,
             value: (item) =>
               item.success ? (
-                <Group gap={4}>
+                <Flex gap={4}>
                   <IconCheck size={14} color="var(--mantine-color-green-6)" />
                   <Text size="xs" c="green">
                     Success
                   </Text>
-                </Group>
+                </Flex>
               ) : (
                 <Tooltip label={item.errorMessage || "Failed"}>
-                  <Group gap={4}>
+                  <Flex gap={4}>
                     <IconX size={14} color="var(--mantine-color-red-6)" />
                     <Text size="xs" c="red">
                       Failed
                     </Text>
-                  </Group>
+                  </Flex>
                 </Tooltip>
               ),
           },

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

@@ -1,5 +1,5 @@
 import { ActionButton, Control, Flex } from "@alepha/ui";
-import { Card, Stack, Text } from "@mantine/core";
+import { Card, Text } from "@mantine/core";
 import { t } from "alepha";
 import type { AdminUserController } from "alepha/api/users";
 import { useClient } from "alepha/react";
@@ -53,7 +53,7 @@ const AdminUserCreate = (props: AdminUserCreateProps) => {
     <Flex flex={1} p="md">
       <Card withBorder p="lg" maw={600} w="100%">
         <form {...form.props}>
-          <Stack gap="md">
+          <Flex direction="column" gap="md">
             <Text size="lg" fw={500}>
               Create New User
             </Text>
@@ -75,7 +75,7 @@ const AdminUserCreate = (props: AdminUserCreateProps) => {
             <Control title="Enabled" input={form.input.enabled} />
 
             <ActionButton form={form}>Create User</ActionButton>
-          </Stack>
+          </Flex>
         </form>
       </Card>
     </Flex>

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";
 
 // ---------------------------------------------------------------------------------------------------------------------