@alepha/ui 0.17.2 → 0.18.1

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

@@ -0,0 +1,144 @@
+import {
+  Drawer,
+  type DrawerProps,
+  Flex,
+  Loader,
+  Tabs,
+  Text,
+} from "@mantine/core";
+import type { ComponentType, ReactNode } from "react";
+import type { ActionMenuItem } from "../buttons/ActionButton.tsx";
+import ActionButton from "../buttons/ActionButton.tsx";
+
+export interface DetailDrawerTab {
+  value: string;
+  label: string;
+  icon?: ComponentType<{ size?: number }>;
+  content: ReactNode;
+}
+
+export interface DetailDrawerStatus {
+  label: string;
+  active: boolean;
+}
+
+export interface DetailDrawerProps {
+  opened: boolean;
+  onClose: () => void;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  status?: DetailDrawerStatus;
+  actions?: ActionMenuItem[];
+  tabs?: DetailDrawerTab[];
+  children?: ReactNode;
+  loading?: boolean;
+  size?: DrawerProps["size"];
+  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)" }}
+    >
+      <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>
+        )}
+      </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
+          </ActionButton>
+        )}
+        <ActionButton variant="subtle" size="xs" c="dimmed" onClick={onClose}>
+          Close
+        </ActionButton>
+      </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">
+          {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.Panel key={tab.value} value={tab.value} p="md">
+            {tab.content}
+          </Tabs.Panel>
+        ))}
+      </Tabs>
+    ) : (
+      <Flex direction="column" p="md">
+        {children}
+      </Flex>
+    )}
+  </Drawer>
+);
+
+export default DetailDrawer;

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

@@ -0,0 +1,64 @@
+import { Flex, Grid, Text } from "@mantine/core";
+import type { ReactNode } from "react";
+import ClipboardButton from "../buttons/ClipboardButton.tsx";
+
+export interface DetailListItem {
+  label: string;
+  value: ReactNode;
+  hidden?: boolean;
+  copyable?: string;
+}
+
+export interface DetailListProps {
+  items: DetailListItem[];
+  columns?: number;
+}
+
+const DetailList = ({ items, columns = 1 }: DetailListProps) => {
+  const visibleItems = items.filter((item) => !item.hidden);
+
+  return (
+    <Grid gutter="xs">
+      {visibleItems.map((item) => (
+        <Grid.Col key={item.label} span={12 / columns}>
+          <Flex
+            py={6}
+            justify="space-between"
+            align="center"
+            style={{
+              borderBottom: "1px solid var(--mantine-color-default-border)",
+            }}
+          >
+            <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
+              {item.label}
+            </Text>
+            <Flex gap={4} align="center" style={{ minWidth: 0 }}>
+              {typeof item.value === "string" ||
+              typeof item.value === "number" ? (
+                <Text size="sm" fw={500} truncate>
+                  {item.value || "\u2014"}
+                </Text>
+              ) : (
+                (item.value ?? (
+                  <Text size="sm" c="dimmed">
+                    {"\u2014"}
+                  </Text>
+                ))
+              )}
+              {item.copyable && (
+                <ClipboardButton
+                  value={item.copyable}
+                  size="xs"
+                  variant="subtle"
+                  c="dimmed"
+                />
+              )}
+            </Flex>
+          </Flex>
+        </Grid.Col>
+      ))}
+    </Grid>
+  );
+};
+
+export default DetailList;

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

@@ -0,0 +1,50 @@
+import { Flex, Paper, Text } from "@mantine/core";
+import type { ComponentType, ReactNode } from "react";
+import { ui } from "../../constants/ui.ts";
+
+export interface StatCardItem {
+  label: string;
+  value: ReactNode;
+  icon?: ReactNode | ComponentType<{ size?: number }>;
+}
+
+export interface StatCardsProps {
+  items: StatCardItem[];
+}
+
+const StatCards = ({ items }: StatCardsProps) => (
+  <Flex gap="sm" wrap="wrap">
+    {items.map((item) => {
+      const IconComponent =
+        item.icon && typeof item.icon === "function" ? item.icon : null;
+      const iconNode = IconComponent ? (
+        <IconComponent size={ui.sizes.icon.md} />
+      ) : (
+        (item.icon as ReactNode)
+      );
+
+      return (
+        <Paper
+          key={item.label}
+          p="md"
+          radius="md"
+          withBorder
+          style={{ flex: "1 1 0", minWidth: 120 }}
+        >
+          <Flex gap="sm" align="center">
+            <Flex direction="column">
+              <Text size="xl" fw={700} lh={1}>
+                {item.value}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {item.label}
+              </Text>
+            </Flex>
+          </Flex>
+        </Paper>
+      );
+    })}
+  </Flex>
+);
+
+export default StatCards;

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

@@ -1,24 +1,25 @@
+import {
+  ActionButton,
+  type ActionProps,
+  BurgerButton,
+  DarkModeButton,
+  Flex,
+  LanguageButton,
+  OmnibarButton,
+  type OmnibarButtonProps,
+  Text,
+} from "@alepha/ui";
 import {
   Anchor,
   Container,
   type ContainerProps,
   Divider,
-  Flex,
   type FlexProps,
   Image,
-  Text,
 } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
 import { Link, useRouter } from "alepha/react/router";
 import type { ComponentType, ReactNode } from "react";
-import type { ActionProps } from "../buttons/ActionButton.tsx";
-import ActionButton from "../buttons/ActionButton.tsx";
-import BurgerButton from "../buttons/BurgerButton.tsx";
-import DarkModeButton from "../buttons/DarkModeButton.tsx";
-import LanguageButton from "../buttons/LanguageButton.tsx";
-import OmnibarButton, {
-  type OmnibarButtonProps,
-} from "../buttons/OmnibarButton.tsx";
 
 export type AppBarItem =
   | AppBarElement

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

@@ -1,8 +1,8 @@
-import { Anchor, Flex, type FlexProps, Text } from "@mantine/core";
+import { ActionButton, Flex, Text, toTitleCase } from "@alepha/ui";
+import type { FlexProps } from "@mantine/core";
 import { IconChevronRight } from "@tabler/icons-react";
-import { Link, useRouter, useRouterState } from "alepha/react/router";
+import { useRouter, useRouterState } from "alepha/react/router";
 import type { ReactNode } from "react";
-import { toTitleCase } from "../../utils/string.ts";
 
 export interface BreadcrumbProps extends FlexProps {
   /**
@@ -37,7 +37,7 @@ export interface BreadcrumbProps extends FlexProps {
 const Breadcrumb = ({
   home = "Home",
   separator,
-  size = "xs",
+  size = "sm",
   ...groupProps
 }: BreadcrumbProps) => {
   const state = useRouterState();
@@ -69,14 +69,14 @@ const Breadcrumb = ({
   const sep = separator ?? <IconChevronRight size={12} color="#9ca3af" />;
 
   return (
-    <Flex gap={4} {...groupProps}>
+    <Flex gap={"sm"} {...groupProps}>
       {crumbs.map((crumb, i) => (
-        <Flex key={crumb.href} gap={4}>
+        <Flex align={"center"} key={crumb.href} gap={"sm"}>
           {i > 0 && sep}
           {i < crumbs.length - 1 ? (
-            <Anchor component={Link} href={crumb.href} size={size} c="dimmed">
+            <ActionButton anchor href={crumb.href} size={size} c="dimmed">
               {crumb.label}
-            </Anchor>
+            </ActionButton>
           ) : (
             <Text size={size} fw={500}>
               {crumb.label}

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

@@ -0,0 +1,15 @@
+import {
+  Container as MantineContainer,
+  type ContainerProps as MantineContainerProps,
+} from "@mantine/core";
+import { forwardRef } from "react";
+
+export interface ContainerProps extends MantineContainerProps {}
+
+const Container = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  return <MantineContainer ref={ref} {...props} />;
+});
+
+Container.displayName = "Container";
+
+export default Container;

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

@@ -1,3 +1,4 @@
+import { alephaSidebarAtom, Flex } from "@alepha/ui";
 import {
   AppShell,
   type AppShellFooterProps,
@@ -5,26 +6,14 @@ import {
   type AppShellMainProps,
   type AppShellNavbarProps,
   type AppShellProps,
-  Container,
   type ContainerProps,
-  Flex,
 } from "@mantine/core";
 import { useEvents, useStore } from "alepha/react";
 import { NestedView, useRouter } from "alepha/react/router";
-import {
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { alephaSidebarAtom } from "../../atoms/alephaSidebarAtom.ts";
+import type { ReactNode } from "react";
+import { useState } from "react";
 import AppBar, { type AppBarProps } from "./AppBar.tsx";
-import {
-  Sidebar,
-  type SidebarMenuItem,
-  type SidebarProps,
-} from "./Sidebar.tsx";
+import { Sidebar, type SidebarProps } from "./Sidebar.tsx";
 
 export interface DashboardShellProps {
   appShellProps?: Partial<AppShellProps>;
@@ -67,12 +56,6 @@ export interface DashboardShellProps {
    */
   footerHeight?: number;
 
-  /**
-   * Enable drag-to-resize for the sidebar.
-   * Width and constraints are configured in alephaSidebarAtom.
-   */
-  sidebarResizable?: boolean;
-
   noSidebarWhen?: {
     /**
      * Paths where the sidebar should be hidden.
@@ -90,138 +73,12 @@ export interface DashboardShellProps {
 const DashboardShell = (props: DashboardShellProps) => {
   const router = useRouter();
   const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
-  const { opened } = sidebar;
   const collapsed =
     props.sidebarProps?.collapsed !== undefined
       ? props.sidebarProps.collapsed
       : sidebar.collapsed;
 
-  // Resize state
-  const [isResizing, setIsResizing] = useState(false);
-  const [isHovering, setIsHovering] = useState(false);
-  const [collapseEffect, setCollapseEffect] = useState({
-    offset: 0,
-    opacity: 1,
-  });
-  const resizeRef = useRef<{ startX: number; startWidth: number } | null>(null);
-
-  // Use atom values for constraints
-  const {
-    collapsedWidth,
-    collapseThreshold,
-    maxWidth,
-    hoverDelay,
-    defaultWidth,
-  } = sidebar;
-
-  const handleResizeStart = useCallback(
-    (e: React.MouseEvent) => {
-      if (!props.sidebarResizable) return;
-      e.preventDefault();
-
-      // If collapsed and hovering, un-collapse first and start from defaultWidth
-      if (collapsed) {
-        setSidebar({ ...sidebar, collapsed: false, width: defaultWidth });
-        setIsResizing(true);
-        resizeRef.current = {
-          startX: e.clientX,
-          startWidth: defaultWidth,
-        };
-      } else {
-        setIsResizing(true);
-        resizeRef.current = {
-          startX: e.clientX,
-          startWidth: sidebar.width,
-        };
-      }
-    },
-    [props.sidebarResizable, collapsed, sidebar, setSidebar, defaultWidth],
-  );
-
-  useEffect(() => {
-    if (!isResizing) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!resizeRef.current) return;
-      const delta = e.clientX - resizeRef.current.startX;
-      const rawWidth = resizeRef.current.startWidth + delta;
-      const newWidth = Math.min(Math.max(rawWidth, collapsedWidth), maxWidth);
-
-      // Visual effect when below collapse threshold
-      if (rawWidth < collapseThreshold) {
-        const progress = Math.max(
-          0,
-          (collapseThreshold - rawWidth) / collapseThreshold,
-        );
-        setCollapseEffect({
-          offset: -progress * collapsedWidth,
-          opacity: 1 - progress * 0.7,
-        });
-        setSidebar({ ...sidebar, width: collapseThreshold, collapsed: false });
-      } else {
-        setCollapseEffect({ offset: 0, opacity: 1 });
-        setSidebar({ ...sidebar, width: newWidth, collapsed: false });
-      }
-    };
-
-    const handleMouseUp = () => {
-      // If we released while in collapse zone, actually collapse
-      if (collapseEffect.offset < 0) {
-        setSidebar({ ...sidebar, collapsed: true });
-      }
-      setCollapseEffect({ offset: 0, opacity: 1 });
-      setIsResizing(false);
-      resizeRef.current = null;
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [
-    isResizing,
-    sidebar,
-    setSidebar,
-    collapsedWidth,
-    maxWidth,
-    collapseThreshold,
-    collapseEffect.offset,
-  ]);
-
-  // Hover to expand when collapsed (with delay)
-  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const expandOnHover = props.sidebarProps?.expandOnHover !== false;
-
-  const handleNavbarMouseEnter = useCallback(() => {
-    if (collapsed && expandOnHover) {
-      hoverTimeoutRef.current = setTimeout(() => {
-        setIsHovering(true);
-      }, hoverDelay);
-    }
-  }, [collapsed, expandOnHover, hoverDelay]);
-
-  const handleNavbarMouseLeave = useCallback(() => {
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
-    }
-    setIsHovering(false);
-  }, []);
-
-  // Reset hover state when collapsed changes (e.g., when toggle button is clicked)
-  useEffect(() => {
-    if (collapsed) {
-      setIsHovering(false);
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-        hoverTimeoutRef.current = null;
-      }
-    }
-  }, [collapsed]);
+  const { collapsedWidth, expandedWidth } = sidebar;
 
   const shouldShowSidebar = () => {
     if (props.noSidebarWhen?.paths) {
@@ -246,7 +103,7 @@ const DashboardShell = (props: DashboardShellProps) => {
         setShowSidebar(shouldShowSidebar());
       },
       "react:transition:begin": () => {
-        setSidebar({ ...sidebar, opened: false });
+        setSidebar({ ...sidebar, closed: true });
       },
     },
     [sidebar],
@@ -264,55 +121,33 @@ const DashboardShell = (props: DashboardShellProps) => {
   const hasSidebar = showSidebar && props.sidebarProps !== undefined;
   const hasAppBar = props.appBarProps || props.header;
 
+  let footerElement = props.footer;
+  if (props.footerHeight) {
+    footerElement ??= <Flex h={props.footerHeight} />;
+  }
+
   const hHeight = props.headerHeight ?? 60;
   const fHeight = props.footerHeight ?? 24;
   const headerHeight = hasAppBar ? hHeight : 0;
-  const footerHeight = props.footer ? fHeight : 0;
-  const expandedWidth = Math.max(sidebar.width, collapsedWidth);
-
-  // When collapsed but hovering, show defaultWidth (not current width)
-  const isExpandedByHover = collapsed && isHovering;
-  const effectiveCollapsed = collapsed && !isHovering;
-
-  // Wrap onItemClick to collapse sidebar when clicking during hover-expansion
-  const handleSidebarItemClick = useCallback(
-    (item: SidebarMenuItem) => {
-      if (isExpandedByHover) {
-        setIsHovering(false);
-      }
-      props.sidebarProps?.onItemClick?.(item);
-    },
-    [isExpandedByHover, props.sidebarProps?.onItemClick],
-  );
-  const hoverWidth = Math.max(defaultWidth, collapsedWidth);
-  // When hovering, keep main content at collapsed width (sidebar overlays)
-  const sidebarWidth = hasSidebar
-    ? effectiveCollapsed || isExpandedByHover
-      ? collapsedWidth
-      : expandedWidth
-    : 0;
-  const canResize = props.sidebarResizable && !collapsed;
+  const footerHeight = footerElement ? fHeight : 0;
+  const navbarWidth = collapsed ? collapsedWidth : expandedWidth;
 
   return (
     <AppShell
-      layout={props.layout}
+      layout={"alt"}
       w={"100%"}
       flex={1}
       header={hasAppBar ? { height: hHeight } : undefined}
       navbar={
         hasSidebar
           ? {
-              // When hovering, keep collapsed width to avoid pushing content
-              width:
-                effectiveCollapsed || isExpandedByHover
-                  ? { base: collapsedWidth }
-                  : { base: expandedWidth },
-              breakpoint: "sm",
-              collapsed: { mobile: !opened },
+              width: { base: navbarWidth },
+              breakpoint: "md",
+              collapsed: { mobile: sidebar.closed },
             }
           : undefined
       }
-      footer={props.footer ? { height: fHeight } : undefined}
+      footer={footerElement ? { height: fHeight } : undefined}
       {...props.appShellProps}
     >
       {hasAppBar && (
@@ -326,22 +161,6 @@ const DashboardShell = (props: DashboardShellProps) => {
       {hasSidebar && (
         <AppShell.Navbar
           className="alepha-sidebar-navbar"
-          data-resizing={isResizing}
-          data-hover-expanded={isExpandedByHover}
-          onMouseEnter={handleNavbarMouseEnter}
-          onMouseLeave={handleNavbarMouseLeave}
-          style={{
-            transform: collapseEffect.offset
-              ? `translateX(${collapseEffect.offset}px)`
-              : undefined,
-            opacity: collapseEffect.opacity,
-            // When hovering, expand width visually as overlay
-            ...(isExpandedByHover && {
-              width: hoverWidth,
-              zIndex: 200,
-              boxShadow: "var(--mantine-shadow-xl)",
-            }),
-          }}
           {...props.appShellNavbarProps}
         >
           {props.navbarHeader ? (
@@ -354,11 +173,7 @@ const DashboardShell = (props: DashboardShellProps) => {
               {props.navbarHeader}
             </Flex>
           ) : null}
-          <Sidebar
-            {...(props.sidebarProps ?? {})}
-            collapsed={effectiveCollapsed}
-            onItemClick={handleSidebarItemClick}
-          />
+          <Sidebar {...(props.sidebarProps ?? {})} collapsed={collapsed} />
           {props.navbarFooter ? (
             <Flex
               style={{
@@ -369,46 +184,16 @@ const DashboardShell = (props: DashboardShellProps) => {
               {props.navbarFooter}
             </Flex>
           ) : null}
-          {(canResize || isExpandedByHover) && (
-            <Flex
-              pos="absolute"
-              right={-6}
-              top={0}
-              bottom={0}
-              w={12}
-              style={{
-                cursor: "col-resize",
-                userSelect: "none",
-              }}
-              onMouseDown={handleResizeStart}
-            />
-          )}
         </AppShell.Navbar>
       )}
 
-      <AppShell.Main
-        className="alepha-sidebar-main"
-        data-resizing={isResizing}
-        {...props.appShellMainProps}
-      >
-        {props.container ? (
-          <Container
-            w={"100%"}
-            flex={1}
-            display="flex"
-            style={{ flexDirection: "column" }}
-            {...(typeof props.container === "boolean" ? {} : props.container)}
-          >
-            {props.children ?? <NestedView />}
-          </Container>
-        ) : (
-          (props.children ?? <NestedView />)
-        )}
+      <AppShell.Main pos={"relative"} {...props.appShellMainProps}>
+        {props.children ?? <NestedView />}
       </AppShell.Main>
 
-      {props.footer && (
+      {footerElement && (
         <AppShell.Footer {...props.appShellFooterProps}>
-          {props.footer}
+          {footerElement}
         </AppShell.Footer>
       )}
     </AppShell>