@alepha/ui 0.16.2 → 0.17.1

package/src/admin/components/parameters/ParameterDetails.tsx

@@ -1,5 +1,5 @@
 import { ActionButton, Flex, Text, TypeForm } from "@alepha/ui";
-import { Box, Card, Code, Group, Loader, Stack } from "@mantine/core";
+import { Card, Code, Loader } from "@mantine/core";
 import { IconClock } from "@tabler/icons-react";
 import { jsonSchemaToTypeBox, type TObject, t } from "alepha";
 import { useForm } from "alepha/react/form";
@@ -19,7 +19,7 @@ export interface ParameterDetailsProps {
  * Loading state.
  */
 const LoadingState = () => (
-  <Box
+  <Flex
     flex={1}
     h="100%"
     p="md"
@@ -32,7 +32,7 @@ const LoadingState = () => (
     <Flex flex={1} justify="center" align="center" h="100%">
       <Loader size="sm" />
     </Flex>
-  </Box>
+  </Flex>
 );
 
 interface ConfigFormProps {
@@ -120,7 +120,7 @@ const ConfigForm = ({
   }, [fieldCount]);
 
   return (
-    <Box
+    <Flex
       flex={1}
       h="100%"
       style={{
@@ -131,11 +131,16 @@ const ConfigForm = ({
     >
       <Flex direction="column" h="100%" w="100%" style={{ minHeight: 0 }}>
         {/* Content */}
-        <Box flex={1} p="md" className="overflow-auto" style={{ minHeight: 0 }}>
+        <Flex
+          flex={1}
+          p="md"
+          className="overflow-auto"
+          style={{ minHeight: 0 }}
+        >
           {currentContent !== null ? (
-            <Stack gap="lg">
+            <Flex direction="column" gap="lg">
               {/* Form or JSON view */}
-              <Box>
+              <Flex>
                 {hasValidSchema ? (
                   <TypeForm
                     form={form}
@@ -144,46 +149,46 @@ const ConfigForm = ({
                     fill={false}
                   />
                 ) : (
-                  <Box>
+                  <Flex>
                     <Text size="xs" c="dimmed" mb={4}>
                       Current Value
                     </Text>
                     <Code block style={{ whiteSpace: "pre-wrap" }}>
                       {formatJson(currentContent)}
                     </Code>
-                  </Box>
+                  </Flex>
                 )}
-              </Box>
+              </Flex>
 
               {/* Metadata */}
               {configValue?.current?.changeDescription && (
-                <Box>
+                <Flex>
                   <Text size="xs" c="dimmed" mb={4}>
                     Change Description
                   </Text>
                   <Text size="sm">{configValue.current.changeDescription}</Text>
-                </Box>
+                </Flex>
               )}
 
               {configValue?.current && (
-                <Group gap="xl">
-                  <Box>
+                <Flex gap="xl">
+                  <Flex>
                     <Text size="xs" c="dimmed" mb={2}>
                       Updated
                     </Text>
                     <Text size="sm">
                       {l(configValue.current.updatedAt, { date: "fromNow" })}
                     </Text>
-                  </Box>
+                  </Flex>
                   {configValue.current.creatorName && (
-                    <Box>
+                    <Flex>
                       <Text size="xs" c="dimmed" mb={2}>
                         Updated By
                       </Text>
                       <Text size="sm">{configValue.current.creatorName}</Text>
-                    </Box>
+                    </Flex>
                   )}
-                </Group>
+                </Flex>
               )}
 
               {!configValue?.current &&
@@ -197,8 +202,8 @@ const ConfigForm = ({
               {/* Scheduled update preview */}
               {configValue?.next && (
                 <Card withBorder p="sm" bg="var(--mantine-color-blue-light)">
-                  <Stack gap="xs">
-                    <Group gap="xs">
+                  <Flex direction="column" gap="xs">
+                    <Flex gap="xs">
                       <IconClock
                         size={14}
                         color="var(--mantine-color-blue-6)"
@@ -206,7 +211,7 @@ const ConfigForm = ({
                       <Text size="xs" fw={500} c="blue">
                         Scheduled Update (v{configValue.next.version})
                       </Text>
-                    </Group>
+                    </Flex>
                     <Text size="xs" c="dimmed">
                       Activates{" "}
                       {l(configValue.next.activationDate, {
@@ -216,10 +221,10 @@ const ConfigForm = ({
                     <Code block style={{ whiteSpace: "pre-wrap" }} fz="xs">
                       {formatJson(configValue.next.content)}
                     </Code>
-                  </Stack>
+                  </Flex>
                 </Card>
               )}
-            </Stack>
+            </Flex>
           ) : (
             <Flex justify="center" align="center" h={200}>
               <Text c="dimmed" size="sm">
@@ -227,18 +232,18 @@ const ConfigForm = ({
               </Text>
             </Flex>
           )}
-        </Box>
+        </Flex>
 
         {/* Footer with actions */}
         {hasValidSchema && currentContent !== null && (
-          <Box
+          <Flex
             p="md"
             style={{
               flexShrink: 0,
               borderTop: "1px solid var(--mantine-color-default-border)",
             }}
           >
-            <Group justify="flex-end" gap="sm">
+            <Flex justify="flex-end" gap="sm">
               <ActionButton
                 variant="subtle"
                 onClick={() => form.reset({} as any)}
@@ -249,11 +254,11 @@ const ConfigForm = ({
               <ActionButton intent="primary" form={form} loading={saving}>
                 Save Changes
               </ActionButton>
-            </Group>
-          </Box>
+            </Flex>
+          </Flex>
         )}
       </Flex>
-    </Box>
+    </Flex>
   );
 };
 

package/src/admin/components/parameters/ParameterEmptyState.tsx

@@ -1,5 +1,5 @@
 import { Text } from "@alepha/ui";
-import { Flex, Stack } from "@mantine/core";
+import { Flex } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
 
 /**
@@ -9,17 +9,17 @@ import { IconArrowLeft } from "@tabler/icons-react";
 const ParameterEmptyState = () => {
   return (
     <Flex flex={1} p={"xl"} align="center">
-      <Stack align="center" gap="md">
+      <Flex direction="column" align="center" gap="md">
         <IconArrowLeft size={32} color="var(--mantine-color-dimmed)" />
-        <Stack align="center" gap={4}>
+        <Flex direction="column" align="center" gap={4}>
           <Text fw={500} c="dimmed">
             No Parameter Selected
           </Text>
           <Text size="xs" c="dimmed" ta="center" maw={240}>
             Choose a parameter from the tree to view and edit its configuration
           </Text>
-        </Stack>
-      </Stack>
+        </Flex>
+      </Flex>
     </Flex>
   );
 };

package/src/admin/components/parameters/ParameterHistory.tsx

@@ -1,13 +1,5 @@
 import { ActionButton, Flex, Text } from "@alepha/ui";
-import {
-  Badge,
-  Box,
-  Group,
-  Loader,
-  ScrollArea,
-  Stack,
-  Timeline,
-} from "@mantine/core";
+import { Badge, Loader, ScrollArea, Timeline } from "@mantine/core";
 import { IconHistory } from "@tabler/icons-react";
 import type { Parameter } from "alepha/api/parameters";
 import { useI18n } from "alepha/react/i18n";
@@ -62,7 +54,7 @@ const ParameterHistory = ({
                 </Text>
               }
               title={
-                <Group gap="xs">
+                <Flex gap="xs">
                   <Text size="xs" fw={500}>
                     Version {version.version}
                   </Text>
@@ -73,10 +65,10 @@ const ParameterHistory = ({
                   >
                     {version.status}
                   </Badge>
-                </Group>
+                </Flex>
               }
             >
-              <Stack gap={4} mt={4}>
+              <Flex direction="column" gap={4} mt={4}>
                 <Text size="xs" c="dimmed">
                   {l(version.createdAt, { date: "fromNow" })}
                 </Text>
@@ -104,7 +96,7 @@ const ParameterHistory = ({
                     Rollback to this version
                   </ActionButton>
                 )}
-              </Stack>
+              </Flex>
             </Timeline.Item>
           ))}
         </Timeline>
@@ -113,7 +105,7 @@ const ParameterHistory = ({
   };
 
   return (
-    <Box
+    <Flex
       w={160}
       h="100%"
       p="xs"
@@ -125,16 +117,16 @@ const ParameterHistory = ({
         borderLeft: "1px solid var(--mantine-color-default-border)",
       }}
     >
-      <Stack gap="xs" h="100%" style={{ minHeight: 0 }}>
-        <Group gap="xs">
+      <Flex direction="column" gap="xs" h="100%" style={{ minHeight: 0 }}>
+        <Flex gap="xs">
           <IconHistory size={16} color="var(--mantine-color-dimmed)" />
           <Text size="sm" fw={500}>
             History
           </Text>
-        </Group>
+        </Flex>
         {renderContent()}
-      </Stack>
-    </Box>
+      </Flex>
+    </Flex>
   );
 };
 

package/src/admin/components/parameters/ParameterTree.tsx

@@ -1,10 +1,8 @@
 import { ActionButton, Text } from "@alepha/ui";
 import {
-  Box,
   Collapse,
-  Group,
+  Flex,
   ScrollArea,
-  Stack,
   TextInput,
   UnstyledButton,
 } from "@mantine/core";
@@ -95,7 +93,7 @@ const TreeNode = memo(
     const handleMouseLeave = useCallback(() => setIsHovered(false), []);
 
     return (
-      <Box>
+      <Flex>
         <UnstyledButton
           onClick={handleClick}
           onMouseEnter={handleMouseEnter}
@@ -103,7 +101,7 @@ const TreeNode = memo(
           w="100%"
           style={{ display: "block" }}
         >
-          <Group
+          <Flex
             gap={6}
             wrap="nowrap"
             p="4px 8px"
@@ -118,7 +116,7 @@ const TreeNode = memo(
           >
             {hasChildren ? (
               <>
-                <Box
+                <Flex
                   style={{
                     display: "flex",
                     alignItems: "center",
@@ -137,7 +135,7 @@ const TreeNode = memo(
                       color="var(--mantine-color-dimmed)"
                     />
                   )}
-                </Box>
+                </Flex>
                 {isExpanded ? (
                   <IconFolderOpen
                     size={16}
@@ -154,7 +152,7 @@ const TreeNode = memo(
               </>
             ) : (
               <>
-                <Box w={16} />
+                <Flex w={16} />
                 <IconSettings
                   size={16}
                   color={
@@ -178,7 +176,7 @@ const TreeNode = memo(
             >
               {node.name}
             </Text>
-          </Group>
+          </Flex>
         </UnstyledButton>
 
         {hasChildren && (
@@ -196,7 +194,7 @@ const TreeNode = memo(
             ))}
           </Collapse>
         )}
-      </Box>
+      </Flex>
     );
   },
 );
@@ -259,7 +257,7 @@ const ParameterTree = ({
   );
 
   return (
-    <Box
+    <Flex
       w={280}
       h="100%"
       p="sm"
@@ -270,8 +268,8 @@ const ParameterTree = ({
         borderRight: "1px solid var(--mantine-color-default-border)",
       }}
     >
-      <Stack gap="sm" h="100%" style={{ minHeight: 0 }}>
-        <Group justify="space-between" gap="xs">
+      <Flex direction="column" gap="sm" h="100%" style={{ minHeight: 0 }}>
+        <Flex justify="space-between" gap="xs">
           <Text size="sm" fw={600}>
             Parameters
           </Text>
@@ -283,7 +281,7 @@ const ParameterTree = ({
           >
             <IconRefresh size={14} />
           </ActionButton>
-        </Group>
+        </Flex>
 
         <TextInput
           placeholder="Search..."
@@ -299,7 +297,7 @@ const ParameterTree = ({
               {searchQuery ? "No matching parameters" : "No parameters"}
             </Text>
           ) : (
-            <Stack gap={0} style={{ gap: 1 }}>
+            <Flex direction="column" gap={0} style={{ gap: 1 }}>
               {filteredTreeData.map((node) => (
                 <TreeNode
                   key={node.path}
@@ -311,11 +309,11 @@ const ParameterTree = ({
                   onToggle={handleToggle}
                 />
               ))}
-            </Stack>
+            </Flex>
           )}
         </ScrollArea>
-      </Stack>
-    </Box>
+      </Flex>
+    </Flex>
   );
 };
 

package/src/admin/components/sessions/AdminSessions.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,
@@ -120,7 +120,7 @@ const AdminSessions = (props: AdminSessionsProps) => {
             label: "Device",
             fit: true,
             value: (item) => (
-              <Group gap={4}>
+              <Flex gap={4}>
                 {item.userAgent ? (
                   <>
                     <Badge
@@ -139,7 +139,7 @@ const AdminSessions = (props: AdminSessionsProps) => {
                     -
                   </Text>
                 )}
-              </Group>
+              </Flex>
             ),
           },
           ip: {

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>