@alepha/ui 0.18.1 → 0.18.3

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

@@ -19,8 +19,7 @@ const ToggleSidebarButton = (props: Props) => {
           : IconLayoutSidebarLeftCollapse
       }
       visibleFrom={"md"}
-      variant={"subtle"}
-      size={"md"}
+      variant={"default"}
       onClick={() => {
         setSidebar({
           ...sidebar,

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/AppBar.tsx

@@ -8,6 +8,7 @@ import {
   OmnibarButton,
   type OmnibarButtonProps,
   Text,
+  ThemeButton,
 } from "@alepha/ui";
 import {
   Anchor,
@@ -25,6 +26,7 @@ export type AppBarItem =
   | AppBarElement
   | AppBarBurger
   | AppBarDark
+  | AppBarTheme
   | AppBarSearch
   | AppBarLang
   | AppBarSpacer
@@ -54,6 +56,11 @@ export interface AppBarDark extends AppBarAbstractItem {
   props?: Partial<ActionProps>;
 }
 
+export interface AppBarTheme extends AppBarAbstractItem {
+  type: "theme";
+  props?: Partial<ActionProps>;
+}
+
 export interface AppBarSearch extends AppBarAbstractItem {
   type: "search";
   props?: OmnibarButtonProps;
@@ -175,6 +182,9 @@ const AppBar = (props: AppBarProps) => {
       if (item.type === "dark") {
         return <DarkModeButton key={index} {...item.props} />;
       }
+      if (item.type === "theme") {
+        return <ThemeButton key={index} {...item.props} />;
+      }
       if (item.type === "search") {
         return <OmnibarButton key={index} {...item.props} />;
       }

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,
@@ -37,7 +37,7 @@ export interface DashboardShellProps {
   /**
    * Content rendered above the Sidebar inside the navbar (e.g. logo).
    */
-  navbarHeader?: ReactNode;
+  navbarHeader?: (props: { collapsed: boolean }) => ReactNode;
 
   /**
    * Content rendered below the Sidebar inside the navbar (e.g. toggle button).
@@ -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,11 +135,13 @@ 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
       layout={"alt"}
       w={"100%"}
+      h={"100vh"}
       flex={1}
       header={hasAppBar ? { height: hHeight } : undefined}
       navbar={
@@ -159,10 +165,7 @@ const DashboardShell = (props: DashboardShellProps) => {
       )}
 
       {hasSidebar && (
-        <AppShell.Navbar
-          className="alepha-sidebar-navbar"
-          {...props.appShellNavbarProps}
-        >
+        <AppShell.Navbar {...props.appShellNavbarProps}>
           {props.navbarHeader ? (
             <Flex
               style={{
@@ -170,7 +173,7 @@ const DashboardShell = (props: DashboardShellProps) => {
               }}
               h={headerHeight}
             >
-              {props.navbarHeader}
+              {props.navbarHeader({ collapsed })}
             </Flex>
           ) : null}
           <Sidebar {...(props.sidebarProps ?? {})} collapsed={collapsed} />
@@ -187,8 +190,22 @@ const DashboardShell = (props: DashboardShellProps) => {
         </AppShell.Navbar>
       )}
 
-      <AppShell.Main pos={"relative"} {...props.appShellMainProps}>
-        {props.children ?? <NestedView />}
+      <AppShell.Main
+        display={"flex"}
+        bg={"var(--alepha-ground)"}
+        pos={"relative"}
+        h={props.fill ? "100%" : "inherit"}
+        {...props.appShellMainProps}
+      >
+        {props.container ? (
+          <Container
+            {...(typeof props.container === "boolean" ? {} : props.container)}
+          >
+            {mainContent}
+          </Container>
+        ) : (
+          mainContent
+        )}
       </AppShell.Main>
 
       {footerElement && (

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

@@ -1,31 +1,17 @@
-import {
-  ActionButton,
-  type ActionMenuConfig,
-  type ActionMenuItem,
-  type ActionProps,
-  Flex,
-  OmnibarButton,
-  renderIcon,
-  SidebarCollapseButton,
-  Text,
-  ui,
-} from "@alepha/ui";
 import type { FlexProps, MantineBreakpoint } from "@mantine/core";
-import {
-  IconChevronDown,
-  IconChevronRight,
-  IconSquareRounded,
-} from "@tabler/icons-react";
-import { useEvents } from "alepha/react";
 import { useRouter } from "alepha/react/router";
-import {
-  type ComponentType,
-  Fragment,
-  type ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
+import { type ComponentType, Fragment, type ReactNode, useMemo } from "react";
+import { ui } from "../../constants/ui.ts";
+import { renderIcon } from "../../helpers/renderIcon.tsx";
+import type { ActionProps } from "../buttons/ActionButton.tsx";
+import OmnibarButton from "../buttons/OmnibarButton.tsx";
+import SidebarCollapseButton from "../buttons/ToggleSidebarButton.tsx";
+import Flex from "../Flex.tsx";
+import Text from "../Text.tsx";
+import { SidebarCollapsedItem } from "./SidebarCollapsedItem.tsx";
+import { SidebarItem } from "./SidebarItem.tsx";
+
+// ---------------------------------------------------------------------------------------------------------------------
 
 export interface SidebarProps {
   items?: SidebarNode[];
@@ -49,9 +35,10 @@ export interface SidebarProps {
       };
 }
 
+// ---------------------------------------------------------------------------------------------------------------------
+
 export const Sidebar = (props: SidebarProps) => {
   const router = useRouter();
-  const { onItemClick } = props;
 
   const divider = (
     key: string | number,
@@ -89,7 +76,7 @@ export const Sidebar = (props: SidebarProps) => {
 
       if (item.type === "search") {
         return (
-          <Flex key={key} mb="xs">
+          <Flex key={key} mb="xs" w={"100%"} justify="center" pos={"relative"}>
             <OmnibarButton collapsed={collapsed} />
           </Flex>
         );
@@ -112,7 +99,6 @@ export const Sidebar = (props: SidebarProps) => {
         if (collapsed) {
           return (
             <Fragment key={key}>
-              {divider(`${key}-d`, undefined, collapsed)}
               {item.children?.map((child, index) =>
                 renderNode(child, `s${key}-${index}`, collapsed),
               )}
@@ -161,7 +147,7 @@ export const Sidebar = (props: SidebarProps) => {
           key={key}
           item={item}
           level={0}
-          onItemClick={onItemClick}
+          onItemClick={props.onItemClick}
           theme={props.theme ?? {}}
         />
       );
@@ -172,7 +158,7 @@ export const Sidebar = (props: SidebarProps) => {
         key={key}
         item={item}
         level={0}
-        onItemClick={onItemClick}
+        onItemClick={props.onItemClick}
         theme={props.theme ?? {}}
       />
     );
@@ -202,7 +188,7 @@ export const Sidebar = (props: SidebarProps) => {
   };
 
   const padding = "md";
-  const gap = props.items ? (props.gap ?? 4) : "xs";
+  const gap = props.items ? (props.gap ?? 8) : "xs";
   const menu = useMemo(
     () => getSidebarNodes(),
     [props.items, props.autoPopulateMenu],
@@ -249,209 +235,6 @@ export const Sidebar = (props: SidebarProps) => {
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export interface SidebarItemProps {
-  item: SidebarMenuItem;
-  level: number;
-  onItemClick?: (item: SidebarMenuItem) => void;
-  theme: SidebarTheme;
-}
-
-export const SidebarItem = (props: SidebarItemProps) => {
-  const { item, level } = props;
-  const maxLevel = 2; // 0, 1, 2 = 3 levels total
-
-  const router = useRouter();
-  const isActive = useCallback((item: SidebarMenuItem): boolean => {
-    if (!item.children) return false;
-    for (const child of item.children) {
-      if (child.href) {
-        if (router.isActive(child.href)) {
-          return true;
-        }
-      }
-      if (isActive(child)) {
-        return true;
-      }
-    }
-    return false;
-  }, []);
-
-  const [isOpen, setIsOpen] = useState<boolean>(isActive(item));
-
-  useEvents(
-    {
-      "react:transition:end": () => {
-        // recalculate open state on transition end to ensure correct state after navigation
-        if (isActive(item)) {
-          setIsOpen(true);
-        }
-      },
-    },
-    [],
-  );
-
-  if (level > maxLevel) return null;
-
-  const handleItemClick = (e: MouseEvent) => {
-    if (!props.item.target) {
-      e.preventDefault();
-    }
-    if (item.children && item.children.length > 0) {
-      setIsOpen(!isOpen);
-    } else {
-      props.onItemClick?.(item);
-      item.onClick?.();
-    }
-  };
-
-  return (
-    <Flex direction={"column"} ps={level === 0 ? 0 : 32} pos={"relative"}>
-      <ActionButton
-        w={"100%"}
-        justify="space-between"
-        href={props.item.href}
-        target={props.item.target}
-        size={
-          props.item.theme?.size ??
-          props.theme.button?.size ??
-          (level === 0 ? "sm" : "xs")
-        }
-        // tooltip={
-        //   item.description
-        //     ? { label: item.description, position: "right" }
-        //     : undefined
-        // }
-        bd={0}
-        fw={"normal"}
-        variant={"default"}
-        propsActive={{
-          variant: "outline",
-          fw: "bold",
-        }}
-        radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
-        onClick={handleItemClick}
-        leftSection={
-          <Flex w={"100%"} align="center" gap={"sm"}>
-            {renderIcon(item.icon, ui.sizes.icon.sm)}
-            <Flex direction={"column"}>
-              <Flex>{item.label}</Flex>
-            </Flex>
-          </Flex>
-        }
-        rightSection={
-          item.children ? (
-            <Flex>
-              {isOpen ? (
-                <IconChevronDown size={14} />
-              ) : (
-                <IconChevronRight size={14} />
-              )}
-            </Flex>
-          ) : (
-            props.item.rightSection
-          )
-        }
-        {...props.item.actionProps}
-      />
-
-      {item.children && isOpen && (
-        <Flex direction={"column"} data-parent-level={level}>
-          <Flex
-            style={{
-              position: "absolute",
-              width: 1,
-              background:
-                "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
-              top: 48,
-              left: 20 + 32 * level,
-              bottom: 16,
-            }}
-          />
-          {item.children
-            .filter((child) => !child.can || child.can())
-            .map((child, index) => (
-              <SidebarItem
-                key={index}
-                item={child}
-                level={level + 1}
-                onItemClick={props.onItemClick}
-                theme={props.theme}
-              />
-            ))}
-        </Flex>
-      )}
-    </Flex>
-  );
-};
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-const SidebarCollapsedItem = (props: SidebarItemProps) => {
-  const { item, level } = props;
-  const router = useRouter();
-
-  const handleItemClick = () => {
-    props.onItemClick?.(item);
-    item.onClick?.();
-  };
-
-  const hasChildren = item.children && item.children.length > 0;
-
-  const menu: ActionMenuConfig | undefined = hasChildren
-    ? {
-        on: "hover",
-        position: "right",
-        items: item
-          .children!.filter((child) => !child.can || child.can())
-          .map(
-            (child): ActionMenuItem => ({
-              label: child.label as string,
-              icon: renderIcon(child.icon, ui.sizes.icon.sm),
-              href: child.href,
-              active: child.href
-                ? router.isActive(child.href, {
-                    startWith: child.activeStartsWith,
-                  })
-                : undefined,
-            }),
-          ),
-      }
-    : undefined;
-
-  return (
-    <ActionButton
-      size={
-        props.item.theme?.size ??
-        props.theme.button?.size ??
-        (level === 0 ? "sm" : "xs")
-      }
-      variant={"subtle"}
-      variantActive={"default"}
-      tooltip={
-        hasChildren
-          ? undefined
-          : {
-              label: item.label,
-              position: "right",
-            }
-      }
-      radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
-      onClick={hasChildren ? undefined : handleItemClick}
-      icon={
-        renderIcon(item.icon, ui.sizes.icon.sm) ?? (
-          <IconSquareRounded size={ui.sizes.icon.sm} />
-        )
-      }
-      href={hasChildren ? undefined : (props.item.href as any)}
-      target={hasChildren ? undefined : props.item.target}
-      menu={menu}
-      {...props.item.actionProps}
-    />
-  );
-};
-
-// ---------------------------------------------------------------------------------------------------------------------
-
 export type SidebarNode =
   | SidebarMenuItem
   | SidebarSpacer