@alepha/ui 0.18.2 → 0.18.3

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

@@ -42,14 +42,14 @@ export interface UserButtonProps
   menuConfig?: Partial<Omit<ActionMenuConfig, "items">>;
 
   /**
-   * Whether to show a divider before logout (default: true when menuItems provided)
+   * Custom icon to use instead of user avatar (default: IconUser)
    */
-  showLogoutDivider?: boolean;
+  icon?: ReactNode;
 
   /**
-   * Custom icon to use instead of user avatar (default: IconUser)
+   * If true, the profile link will not be shown in the menu even if a userProfile page exists and the user is authenticated.
    */
-  icon?: ReactNode;
+  skipProfile?: boolean;
 }
 
 const UserButton = (props: UserButtonProps) => {
@@ -58,8 +58,8 @@ const UserButton = (props: UserButtonProps) => {
     logoutLabel = "Sign out",
     loginLabel,
     menuConfig,
-    showLogoutDivider = menuItems.length > 0,
     icon,
+    skipProfile = false,
     children,
     ...buttonProps
   } = props;
@@ -104,10 +104,10 @@ const UserButton = (props: UserButtonProps) => {
   }
 
   // Add profile page link if available
-  if (userPage && isConnected) {
+  if (userPage && isConnected && !skipProfile) {
     items.push({
       label: "Profile",
-      icon: <IconUser size={ui.sizes.icon.md} />,
+      icon: <IconUser size={ui.sizes.icon.sm} />,
       href: authRouter.path("userProfile"),
     });
   }
@@ -116,7 +116,7 @@ const UserButton = (props: UserButtonProps) => {
   if (adminPage && isAdmin) {
     items.push({
       label: "Admin",
-      icon: <IconSettings size={ui.sizes.icon.md} />,
+      icon: <IconSettings size={ui.sizes.icon.sm} />,
       href: authRouter.path("adminLayout"),
     });
   }
@@ -125,14 +125,14 @@ const UserButton = (props: UserButtonProps) => {
   items.push(...menuItems);
 
   // Add divider before logout if needed
-  if (showLogoutDivider && items.length > 0) {
+  if (items.length > 0) {
     items.push({ type: "divider" });
   }
 
   // Add logout item
   items.push({
     label: logoutLabel,
-    icon: <IconLogout size={ui.sizes.icon.md} />,
+    icon: <IconLogout size={ui.sizes.icon.sm} />,
     color: "red",
     onClick: () => auth.logout(),
   });
@@ -146,23 +146,21 @@ const UserButton = (props: UserButtonProps) => {
       icon={
         hasAvatar ? undefined : icon === null ? undefined : (icon ?? IconUser)
       }
-      leftSection={
-        hasAvatar ? (
-          <Avatar
-            src={`/api/files/${auth.user.picture}`}
-            size={24}
-            radius="xl"
-          />
-        ) : undefined
-      }
+      px={8}
       menu={{
-        position: "bottom-end",
+        menuProps: {
+          withArrow: true,
+          arrowSize: 12,
+        },
+        position: "bottom",
         width: 200,
         ...menuConfig,
         items,
       }}
     >
-      {children}
+      {hasAvatar ? (
+        <Avatar src={`/api/files/${auth.user.picture}`} size={24} radius="xl" />
+      ) : undefined}
     </ActionButton>
   );
 };

package/src/auth/index.ts

@@ -13,6 +13,7 @@ export { default as UserButton } from "./components/buttons/UserButton.tsx";
 export { default as Login } from "./components/Login.tsx";
 export { default as Register } from "./components/Register.tsx";
 export { default as ResetPassword } from "./components/ResetPassword.tsx";
+export type { VerifyEmailStep } from "./components/VerifyEmail.tsx";
 export { default as VerifyEmail } from "./components/VerifyEmail.tsx";
 export * from "./primitives/$uiAuth.ts";
 

package/src/core/components/Flex.tsx

@@ -69,6 +69,11 @@ export interface FlexProps extends MantineFlexProps {
    * Add a shadow to the container. The intensity will be determined by the current theme.
    */
   shadowed?: boolean | number | string;
+
+  /**
+   * Set overflow to "auto" to enable scrolling when content overflows the container.
+   */
+  overflow?: boolean;
 }
 
 const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
@@ -86,6 +91,7 @@ const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
     borderedTop,
     borderedBottom,
     shadowed,
+    overflow,
     ...rest
   } = props;
 
@@ -145,6 +151,10 @@ const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
       `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
   }
 
+  if (overflow) {
+    rest.className = `${rest.className ?? ""} overflow-auto`.trim();
+  }
+
   return <MantineFlex ref={ref} {...rest} />;
 });
 

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

@@ -112,6 +112,9 @@ export interface ActionMenuConfig {
 export interface ActionCommonProps extends ButtonProps {
   children?: ReactNode;
 
+  /**
+   * If set, the button will show only the icon on smaller screens and reveal the text from the specified breakpoint and up.
+   */
   textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
@@ -139,6 +142,9 @@ export interface ActionCommonProps extends ButtonProps {
    */
   icon?: ReactNode | ComponentType;
 
+  /**
+   * Size of the icon. Can be a number (pixels) or a string (e.g., "1em", "20px").
+   */
   iconSize?: number | string;
 
   /**
@@ -150,6 +156,11 @@ export interface ActionCommonProps extends ButtonProps {
    * Visual intent of the action button.
    */
   intent?: "primary" | "success" | "danger" | "warning" | "info" | "none";
+
+  /**
+   * Active state styling for navigation actions. When set, the button will apply active styles based on the current route.
+   */
+  variant?: ButtonProps["variant"] | "minimal";
 }
 
 export type ActionProps = ActionCommonProps &
@@ -163,85 +174,17 @@ export type ActionProps = ActionCommonProps &
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-// Helper function to render menu items recursively
-const ActionMenuItem = (props: {
-  item: ActionMenuItem;
-  index: number;
-}): ReactNode => {
-  const { item, index } = props;
-
-  const router = useRouter();
-  const action = useAction(
-    {
-      handler: async (e: any) => {
-        await item.onClick?.();
-      },
-    },
-    [item.onClick],
-  );
-
-  // Render divider
-  if (item.type === "divider") {
-    return <Menu.Divider key={index} />;
-  }
-
-  // Render label
-  if (item.type === "label") {
-    return <Menu.Label key={index}>{item.label}</Menu.Label>;
-  }
-
-  // Render submenu if it has children
-  if (item.children && item.children.length > 0) {
-    return (
-      <Menu key={index} trigger="hover" position="right-start" offset={2}>
-        <Menu.Target>
-          <Menu.Item
-            leftSection={item.icon}
-            rightSection={<IconChevronRight size={14} />}
-          >
-            {item.label}
-          </Menu.Item>
-        </Menu.Target>
-        <Menu.Dropdown>
-          {item.children.map((child, childIndex) => (
-            <ActionMenuItem item={child} index={childIndex} key={childIndex} />
-          ))}
-        </Menu.Dropdown>
-      </Menu>
-    );
-  }
-
-  const menuItemProps: MenuItemProps & ButtonHTMLAttributes<unknown> = {};
-  if (props.item.onClick) {
-    menuItemProps.onClick = action.run;
-  } else if (props.item.href) {
-    Object.assign(menuItemProps, router.anchor(props.item.href));
-  }
-
-  // render regular menu item
-  return (
-    <Menu.Item
-      key={index}
-      leftSection={
-        item.icon ??
-        (item.active ? (
-          <IconCheck size={ui.sizes.icon.sm} />
-        ) : (
-          <Flex w={ui.sizes.icon.sm} />
-        ))
-      }
-      onClick={item.onClick}
-      color={item.color}
-      {...menuItemProps}
-    >
-      {item.label}
-    </Menu.Item>
-  );
-};
+// ---------------------------------------------------------------------------------------------------------------------
 
 const ActionButton = (_props: ActionProps) => {
   const theme = useMantineTheme();
   const props = { ..._props };
+
+  if (props.variant === "minimal") {
+    //props.variant = "default";
+    //props.bd = 0;
+  }
+
   const { tooltip, menu, icon, iconSize, ...restProps } = props;
 
   if (props.intent) {
@@ -298,7 +241,13 @@ const ActionButton = (_props: ActionProps) => {
           </ActionButton>
         </Flex>
         <Flex w={"100%"} hiddenFrom={textVisibleFrom}>
-          <ActionButton px={"xs"} {...rest} tooltip={tooltip} menu={menu}>
+          <ActionButton
+            px={"xs"}
+            {...rest}
+            aria-label={typeof children === "string" ? children : undefined}
+            tooltip={tooltip}
+            menu={menu}
+          >
             {leftSection}
           </ActionButton>
         </Flex>
@@ -564,6 +513,7 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
     propsActive,
     routerGoOptions,
     onClick: propsOnClick,
+    anchorProps: buttonAnchorProps,
     anchor,
     ...buttonProps
   } = props as ActionNavigationButtonProps & { onClick?: (e: any) => void };
@@ -588,13 +538,13 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
     buttonProps.className = `${className} ${classNameActive}`.trim();
   }
 
-  if (props.anchorProps || anchor) {
+  if (buttonAnchorProps || anchor) {
     return (
       <Anchor
         component={"a"}
         {...anchorProps}
         {...(buttonProps as AnchorProps)}
-        {...props.anchorProps}
+        {...buttonAnchorProps}
         onClick={combinedOnClick}
       >
         {props.children}
@@ -639,3 +589,79 @@ const ActionHrefButton = (props: ActionNavigationButtonProps) => {
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
+
+// Helper function to render menu items recursively
+const ActionMenuItem = (props: {
+  item: ActionMenuItem;
+  index: number;
+}): ReactNode => {
+  const { item, index } = props;
+
+  const router = useRouter();
+  const action = useAction(
+    {
+      handler: async (e: any) => {
+        await item.onClick?.();
+      },
+    },
+    [item.onClick],
+  );
+
+  // Render divider
+  if (item.type === "divider") {
+    return <Menu.Divider key={index} />;
+  }
+
+  // Render label
+  if (item.type === "label") {
+    return <Menu.Label key={index}>{item.label}</Menu.Label>;
+  }
+
+  // Render submenu if it has children
+  if (item.children && item.children.length > 0) {
+    return (
+      <Menu key={index} trigger="hover" position="right-start" offset={2}>
+        <Menu.Target>
+          <Menu.Item
+            leftSection={item.icon}
+            rightSection={<IconChevronRight size={14} />}
+          >
+            {item.label}
+          </Menu.Item>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {item.children.map((child, childIndex) => (
+            <ActionMenuItem item={child} index={childIndex} key={childIndex} />
+          ))}
+        </Menu.Dropdown>
+      </Menu>
+    );
+  }
+
+  const menuItemProps: MenuItemProps & ButtonHTMLAttributes<unknown> = {};
+  if (props.item.onClick) {
+    menuItemProps.onClick = action.run;
+  } else if (props.item.href) {
+    Object.assign(menuItemProps, router.anchor(props.item.href));
+  }
+
+  // render regular menu item
+  return (
+    <Menu.Item
+      key={index}
+      leftSection={
+        item.icon ??
+        (item.active ? (
+          <IconCheck size={ui.sizes.icon.sm} />
+        ) : (
+          <Flex w={ui.sizes.icon.sm} />
+        ))
+      }
+      onClick={item.onClick}
+      color={item.color}
+      {...menuItemProps}
+    >
+      {item.label}
+    </Menu.Item>
+  );
+};

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

@@ -36,109 +36,115 @@ export interface DetailDrawerProps {
   defaultTab?: string;
 }
 
-const DetailDrawer = ({
-  opened,
-  onClose,
-  title,
-  subtitle,
-  status,
-  actions,
-  tabs,
-  children,
-  loading,
-  size = "xl",
-  defaultTab,
-}: DetailDrawerProps) => (
-  <Drawer
-    opened={opened}
-    onClose={onClose}
-    position="right"
-    size={size}
-    withCloseButton={false}
-    padding={0}
-  >
-    {/* Header */}
-    <Flex
-      p="md"
-      justify="space-between"
-      align="flex-start"
-      style={{ borderBottom: "1px solid var(--mantine-color-default-border)" }}
+const DetailDrawer = (props: DetailDrawerProps) => {
+  const {
+    opened,
+    onClose,
+    title,
+    subtitle,
+    status,
+    actions,
+    tabs,
+    children,
+    loading,
+    size = "xl",
+    defaultTab,
+  } = props;
+
+  return (
+    <Drawer
+      opened={opened}
+      onClose={onClose}
+      position="right"
+      size={size}
+      withCloseButton={false}
+      padding={0}
     >
-      <Flex direction="column" gap={2} style={{ minWidth: 0, flex: 1 }}>
-        <Flex gap="xs" align="center">
-          {status && (
-            <Flex
-              w={8}
-              h={8}
-              style={{
-                borderRadius: "50%",
-                backgroundColor: status.active
-                  ? "var(--mantine-color-green-6)"
-                  : "var(--mantine-color-red-6)",
-                flexShrink: 0,
-              }}
-            />
+      {/* Header */}
+      <Flex
+        p="md"
+        justify="space-between"
+        align="flex-start"
+        style={{
+          borderBottom: "1px solid var(--mantine-color-default-border)",
+        }}
+      >
+        <Flex direction="column" gap={2} style={{ minWidth: 0, flex: 1 }}>
+          <Flex gap="xs" align="center">
+            {status && (
+              <Flex
+                w={8}
+                h={8}
+                style={{
+                  borderRadius: "50%",
+                  backgroundColor: status.active
+                    ? "var(--mantine-color-green-6)"
+                    : "var(--mantine-color-red-6)",
+                  flexShrink: 0,
+                }}
+              />
+            )}
+            <Text size="lg" fw={600} truncate>
+              {title}
+            </Text>
+          </Flex>
+          {subtitle && (
+            <Text size="sm" c="dimmed" truncate>
+              {subtitle}
+            </Text>
           )}
-          <Text size="lg" fw={600} truncate>
-            {title}
-          </Text>
         </Flex>
-        {subtitle && (
-          <Text size="sm" c="dimmed" truncate>
-            {subtitle}
-          </Text>
-        )}
-      </Flex>
-      <Flex gap="xs" align="center" style={{ flexShrink: 0 }}>
-        {actions && actions.length > 0 && (
-          <ActionButton
-            variant="default"
-            size="xs"
-            menu={{
-              items: actions,
-              position: "bottom-end",
-              width: 200,
-            }}
-          >
-            Actions
+        <Flex gap="xs" align="center" style={{ flexShrink: 0 }}>
+          {actions && actions.length > 0 && (
+            <ActionButton
+              variant="default"
+              size="xs"
+              menu={{
+                items: actions,
+                position: "bottom-end",
+                width: 200,
+              }}
+            >
+              Actions
+            </ActionButton>
+          )}
+          <ActionButton variant="subtle" size="xs" c="dimmed" onClick={onClose}>
+            Close
           </ActionButton>
-        )}
-        <ActionButton variant="subtle" size="xs" c="dimmed" onClick={onClose}>
-          Close
-        </ActionButton>
+        </Flex>
       </Flex>
-    </Flex>
 
-    {/* Content */}
-    {loading ? (
-      <Flex flex={1} justify="center" align="center" py="xl">
-        <Loader />
-      </Flex>
-    ) : tabs && tabs.length > 0 ? (
-      <Tabs defaultValue={defaultTab || tabs[0].value}>
-        <Tabs.List px="md">
+      {/* Content */}
+      {loading ? (
+        <Flex flex={1} justify="center" align="center" py="xl">
+          <Loader />
+        </Flex>
+      ) : tabs && tabs.length > 0 ? (
+        <Tabs defaultValue={defaultTab || tabs[0].value}>
+          <Tabs.List px="md">
+            {tabs.map((tab) => (
+              <Tabs.Tab
+                key={tab.value}
+                value={tab.value}
+                leftSection={tab.icon ? <tab.icon size={14} /> : undefined}
+              >
+                {tab.label}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
           {tabs.map((tab) => (
-            <Tabs.Tab
-              key={tab.value}
-              value={tab.value}
-              leftSection={tab.icon ? <tab.icon size={14} /> : undefined}
-            >
-              {tab.label}
-            </Tabs.Tab>
+            <Tabs.Panel key={tab.value} value={tab.value} p="md">
+              {tab.content}
+            </Tabs.Panel>
           ))}
-        </Tabs.List>
-        {tabs.map((tab) => (
-          <Tabs.Panel key={tab.value} value={tab.value} p="md">
-            {tab.content}
-          </Tabs.Panel>
-        ))}
-      </Tabs>
-    ) : (
-      <Flex direction="column" p="md">
-        {children}
-      </Flex>
-    )}
-  </Drawer>
-);
+        </Tabs>
+      ) : (
+        <Flex direction="column" p="md">
+          {children}
+        </Flex>
+      )}
+    </Drawer>
+  );
+};
 
 export default DetailDrawer;

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

@@ -14,7 +14,8 @@ export interface DetailListProps {
   columns?: number;
 }
 
-const DetailList = ({ items, columns = 1 }: DetailListProps) => {
+const DetailList = (props: DetailListProps) => {
+  const { items, columns = 1 } = props;
   const visibleItems = items.filter((item) => !item.hidden);
 
   return (

package/src/core/components/layout/Breadcrumb.tsx

@@ -34,12 +34,9 @@ export interface BreadcrumbProps extends FlexProps {
  * Pages should define a `label` in their `$page()` options for best results.
  * Falls back to the page name converted to Title Case.
  */
-const Breadcrumb = ({
-  home = "Home",
-  separator,
-  size = "sm",
-  ...groupProps
-}: BreadcrumbProps) => {
+const Breadcrumb = (props: BreadcrumbProps) => {
+  const { home = "Home", separator, size = "sm", ...groupProps } = props;
+
   const state = useRouterState();
   const router = useRouter();
 

package/src/core/components/layout/DashboardShell.tsx

@@ -1,4 +1,4 @@
-import { alephaSidebarAtom, Flex } from "@alepha/ui";
+import { alephaSidebarAtom, Container, Flex } from "@alepha/ui";
 import {
   AppShell,
   type AppShellFooterProps,
@@ -64,10 +64,14 @@ export interface DashboardShellProps {
   };
 
   /**
-   * Wrap AppBar and main content in a Mantine Container.
-   * Pass `true` for default Container, or ContainerProps to customize.
+   * Wrap the Dashboard main content in a Mantine Container.
    */
   container?: boolean | ContainerProps;
+
+  /**
+   * If true, the DashboardShell will fill the height of its container.
+   */
+  fill?: boolean;
 }
 
 const DashboardShell = (props: DashboardShellProps) => {
@@ -131,6 +135,7 @@ const DashboardShell = (props: DashboardShellProps) => {
   const headerHeight = hasAppBar ? hHeight : 0;
   const footerHeight = footerElement ? fHeight : 0;
   const navbarWidth = collapsed ? collapsedWidth : expandedWidth;
+  const mainContent = props.children ?? <NestedView />;
 
   return (
     <AppShell
@@ -189,9 +194,18 @@ const DashboardShell = (props: DashboardShellProps) => {
         display={"flex"}
         bg={"var(--alepha-ground)"}
         pos={"relative"}
+        h={props.fill ? "100%" : "inherit"}
         {...props.appShellMainProps}
       >
-        {props.children ?? <NestedView />}
+        {props.container ? (
+          <Container
+            {...(typeof props.container === "boolean" ? {} : props.container)}
+          >
+            {mainContent}
+          </Container>
+        ) : (
+          mainContent
+        )}
       </AppShell.Main>
 
       {footerElement && (