@alepha/ui 0.15.1 → 0.15.3

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

@@ -1,5 +1,17 @@
-import { Divider, Flex, type FlexProps } from "@mantine/core";
-import type { ReactNode } from "react";
+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 ActionButton from "../buttons/ActionButton.tsx";
 import BurgerButton from "../buttons/BurgerButton.tsx";
 import DarkModeButton, {
   type DarkModeButtonProps,
@@ -18,55 +30,146 @@ export type AppBarItem =
   | AppBarSearch
   | AppBarLang
   | AppBarSpacer
-  | AppBarDivider;
+  | AppBarDivider
+  | AppBarLogo
+  | AppBarBack;
 
-export interface AppBarElement {
+export interface AppBarAbstractItem {
   position: "left" | "center" | "right";
+
+  /**
+   * Visibility control: return true to show, false to hide.
+   */
+  can?: () => boolean;
+}
+
+export interface AppBarElement extends AppBarAbstractItem {
   element: ReactNode;
 }
 
-export interface AppBarBurger {
-  position: "left" | "center" | "right";
+export interface AppBarBurger extends AppBarAbstractItem {
   type: "burger";
 }
 
-export interface AppBarDark {
-  position: "left" | "center" | "right";
+export interface AppBarDark extends AppBarAbstractItem {
   type: "dark";
   props?: DarkModeButtonProps;
 }
 
-export interface AppBarSearch {
-  position: "left" | "center" | "right";
+export interface AppBarSearch extends AppBarAbstractItem {
   type: "search";
   props?: OmnibarButtonProps;
 }
 
-export interface AppBarLang {
-  position: "left" | "center" | "right";
+export interface AppBarLang extends AppBarAbstractItem {
   type: "lang";
   props?: LanguageButtonProps;
 }
 
-export interface AppBarSpacer {
-  position: "left" | "center" | "right";
+export interface AppBarSpacer extends AppBarAbstractItem {
   type: "spacer";
 }
 
-export interface AppBarDivider {
-  position: "left" | "center" | "right";
+export interface AppBarDivider extends AppBarAbstractItem {
   type: "divider";
 }
 
+export interface AppBarLogo extends AppBarAbstractItem {
+  type: "logo";
+  props?: {
+    /**
+     * Logo image source URL.
+     */
+    src?: string;
+
+    /**
+     * Logo text (used if no src provided).
+     */
+    text?: string;
+
+    /**
+     * Icon component (used if no src or text provided).
+     */
+    icon?: ReactNode | ComponentType;
+
+    /**
+     * Link href when logo is clicked.
+     */
+    href?: string;
+
+    /**
+     * Logo image height in pixels.
+     * @default 32
+     */
+    height?: number;
+
+    /**
+     * Logo image width in pixels.
+     */
+    width?: number;
+
+    /**
+     * Font weight for text logo.
+     * @default 700
+     */
+    fontWeight?: number;
+
+    /**
+     * Font size for text logo.
+     * @default "lg"
+     */
+    fontSize?: string;
+  };
+}
+
+export interface AppBarBack extends AppBarAbstractItem {
+  type: "back";
+  props?: {
+    /**
+     * Custom label for back button.
+     * @default "Back"
+     */
+    label?: string;
+
+    /**
+     * Show only icon without label.
+     * @default true
+     */
+    iconOnly?: boolean;
+
+    /**
+     * Custom href to navigate to instead of history back.
+     */
+    href?: string;
+
+    /**
+     * Custom icon component.
+     */
+    icon?: ReactNode | ComponentType;
+  };
+}
+
 export interface AppBarProps {
   flexProps?: FlexProps;
   items?: AppBarItem[];
+
+  /**
+   * Wrap the AppBar content in a Mantine Container.
+   * Pass `true` for default Container, or ContainerProps to customize.
+   */
+  container?: boolean | ContainerProps;
 }
 
 const AppBar = (props: AppBarProps) => {
   const { items = [] } = props;
+  const router = useRouter();
 
   const renderItem = (item: AppBarItem, index: number) => {
+    // Check visibility control
+    if (item.can && !item.can()) {
+      return null;
+    }
+
     if ("type" in item) {
       if (item.type === "burger") {
         return <BurgerButton key={index} />;
@@ -86,6 +189,12 @@ const AppBar = (props: AppBarProps) => {
       if (item.type === "divider") {
         return <Divider key={index} orientation="vertical" />;
       }
+      if (item.type === "logo") {
+        return renderLogo(item, index);
+      }
+      if (item.type === "back") {
+        return renderBack(item, index);
+      }
     }
     if ("element" in item) {
       return item.element;
@@ -93,15 +202,111 @@ const AppBar = (props: AppBarProps) => {
     return null;
   };
 
+  const renderLogo = (item: AppBarLogo, index: number) => {
+    const {
+      src,
+      text,
+      icon,
+      href,
+      height = 32,
+      width,
+      fontWeight = 700,
+      fontSize = "lg",
+    } = item.props ?? {};
+
+    const logoContent = src ? (
+      <Image src={src} h={height} w={width} fit="contain" />
+    ) : icon ? (
+      typeof icon === "function" ? (
+        (() => {
+          const IconComponent = icon;
+          return <IconComponent />;
+        })()
+      ) : (
+        icon
+      )
+    ) : text ? (
+      <Text fw={fontWeight} size={fontSize}>
+        {text}
+      </Text>
+    ) : null;
+
+    if (href) {
+      return (
+        <Anchor
+          component={Link}
+          key={index}
+          href={href}
+          underline="never"
+          c="inherit"
+        >
+          {logoContent}
+        </Anchor>
+      );
+    }
+
+    return <Flex key={index}>{logoContent}</Flex>;
+  };
+
+  const renderBack = (item: AppBarBack, index: number) => {
+    const { label = "Back", iconOnly = true, href, icon } = item.props ?? {};
+
+    const renderIcon = () => {
+      if (!icon) {
+        return <IconArrowLeft size={18} />;
+      }
+      if (typeof icon === "function") {
+        const IconComponent = icon as ComponentType<{ size?: number }>;
+        return <IconComponent size={18} />;
+      }
+      return icon;
+    };
+
+    const iconElement = renderIcon();
+
+    const handleClick = () => {
+      if (href) {
+        router.push(href);
+      } else {
+        router.back();
+      }
+    };
+
+    if (iconOnly) {
+      return (
+        <ActionButton
+          key={index}
+          icon={iconElement}
+          variant="subtle"
+          color="gray"
+          onClick={handleClick}
+          tooltip={{ label, position: "bottom" }}
+        />
+      );
+    }
+
+    return (
+      <ActionButton
+        key={index}
+        leftSection={iconElement}
+        variant="subtle"
+        color="gray"
+        onClick={handleClick}
+      >
+        {label}
+      </ActionButton>
+    );
+  };
+
   const leftItems = items.filter((item) => item.position === "left");
   const centerItems = items.filter((item) => item.position === "center");
   const rightItems = items.filter((item) => item.position === "right");
 
-  return (
+  const content = (
     <Flex
       h="100%"
       align="center"
-      px="md"
+      px={props.container ? 0 : "md"}
       justify="space-between"
       {...props.flexProps}
     >
@@ -128,6 +333,18 @@ const AppBar = (props: AppBarProps) => {
       </Flex>
     </Flex>
   );
+
+  if (props.container) {
+    const containerProps =
+      typeof props.container === "boolean" ? {} : props.container;
+    return (
+      <Container h="100%" {...containerProps}>
+        {content}
+      </Container>
+    );
+  }
+
+  return content;
 };
 
 export default AppBar;

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

@@ -1,7 +1,7 @@
-import { useStore } from "@alepha/react";
-import { useRouter } from "@alepha/react/router";
 import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
+import { useStore } from "alepha/react";
+import { useRouter } from "alepha/react/router";
 import { type ReactNode, useMemo } from "react";
 import { ui } from "../../constants/ui.ts";
 import { renderIcon } from "../../helpers/renderIcon.tsx";
@@ -35,9 +35,9 @@ const Omnibar = (props: OmnibarProps) => {
           description: page.description,
           onClick: () => {
             if (page.staticName) {
-              return router.go(page.staticName, { params: page.params });
+              return router.push(page.staticName, { params: page.params });
             }
-            return router.go(page.name);
+            return router.push(page.name);
           },
           leftSection: renderIcon(page.icon),
         })),

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

@@ -1,5 +1,3 @@
-import { useEvents } from "@alepha/react";
-import { useRouter } from "@alepha/react/router";
 import {
   Flex,
   type FlexProps,
@@ -11,6 +9,8 @@ import {
   IconChevronRight,
   IconSquareRounded,
 } from "@tabler/icons-react";
+import { useEvents } from "alepha/react";
+import { useRouter } from "alepha/react/router";
 import {
   type ComponentType,
   type ReactNode,
@@ -49,44 +49,51 @@ export const Sidebar = (props: SidebarProps) => {
   const router = useRouter();
   const { onItemClick } = props;
 
+  const divider = (key: string | number) => {
+    return (
+      <Flex
+        key={key}
+        h={1}
+        bg={"var(--alepha-border)"}
+        my={"xs"}
+        mx={props.collapsed ? 0 : "sm"}
+      />
+    );
+  };
+
   const renderNode = (item: SidebarNode, key: number) => {
     if ("type" in item) {
+      // Hide spacers when collapsed
       if (item.type === "spacer") {
+        if (props.collapsed) return null;
         return <Flex key={key} h={16} />;
       }
 
       if (item.type === "divider") {
-        return (
-          <Flex
-            key={key}
-            h={1}
-            bg={"var(--alepha-border)"}
-            my={"md"}
-            mx={"sm"}
-          />
-        );
+        return divider(key);
       }
 
       if (item.type === "search") {
-        return <OmnibarButton collapsed={props.collapsed} key={key} />;
+        return (
+          <Flex key={key} mb="xs">
+            <OmnibarButton collapsed={props.collapsed} />
+          </Flex>
+        );
       }
 
       if (item.type === "toggle") {
         return <ToggleSidebarButton key={key} />;
       }
 
+      // Replace sections with dividers when collapsed
       if (item.type === "section") {
-        if (props.collapsed) return;
+        if (props.collapsed) {
+          return divider(key);
+        }
         return (
-          <Flex key={key} mt={"md"} mb={"xs"} align={"center"} gap={"xs"}>
+          <Flex key={key} mt={"md"} align={"center"} gap={"xs"}>
             {renderIcon(item.icon)}
-            <Text
-              key={key}
-              size={"xs"}
-              c={"dimmed"}
-              tt={"uppercase"}
-              fw={"bold"}
-            >
+            <Text size={"xs"} c={"dimmed"} tt={"uppercase"} fw={"bold"}>
               {item.label}
             </Text>
           </Flex>
@@ -150,15 +157,18 @@ export const Sidebar = (props: SidebarProps) => {
   };
 
   const padding = "md";
-  const gap = props.items ? props.gap : "xs";
-  const menu = useMemo(() => getSidebarNodes(), []);
+  const gap = props.items ? (props.gap ?? 2) : "xs";
+  const menu = useMemo(
+    () => getSidebarNodes(),
+    [props.items, props.autoPopulateMenu],
+  );
 
   return (
     <Flex
       flex={1}
       py={padding}
       direction={"column"}
-      className={"overflow-auto"}
+      className="alepha-sidebar-scroll"
       {...props.flexProps}
     >
       <Flex gap={gap} px={padding} direction={"column"}>
@@ -171,7 +181,7 @@ export const Sidebar = (props: SidebarProps) => {
         px={padding}
         direction={"column"}
         flex={1}
-        className={"overflow-auto"}
+        className="alepha-sidebar-scroll"
       >
         {menu
           .filter((it) => !it.position)
@@ -255,6 +265,7 @@ export const SidebarItem = (props: SidebarItemProps) => {
           props.theme.button?.size ??
           (level === 0 ? "sm" : "xs")
         }
+        tooltip={item.description}
         c={"var(--mantine-color-text)"}
         color={"gray"}
         variant={"subtle"}
@@ -266,11 +277,6 @@ export const SidebarItem = (props: SidebarItemProps) => {
             {renderIcon(item.icon)}
             <Flex direction={"column"}>
               <Flex>{item.label}</Flex>
-              {item.description && (
-                <Text size={"xs"} c={"dimmed"}>
-                  {item.description}
-                </Text>
-              )}
             </Flex>
           </Flex>
         }
@@ -332,34 +338,9 @@ export interface SidebarItemProps {
 const SidebarCollapsedItem = (props: SidebarItemProps) => {
   const { item, level } = props;
 
-  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));
-
-  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?.();
-    }
+  const handleItemClick = () => {
+    props.onItemClick?.(item);
+    item.onClick?.();
   };
 
   return (
@@ -371,35 +352,15 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
       }
       variant={"subtle"}
       variantActive={"default"}
-      tooltip={
-        item.children
-          ? undefined
-          : {
-              label: item.label,
-              position: "right",
-            }
-      }
+      tooltip={{
+        label: item.label,
+        position: "right",
+      }}
       radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
       onClick={handleItemClick}
       icon={renderIcon(item.icon) ?? <IconSquareRounded />}
       href={props.item.href as any}
       target={props.item.target}
-      menu={
-        item.children
-          ? ({
-              position: "right",
-              on: "hover",
-              items: item.children
-                .filter((child) => !child.can || child.can())
-                .map((child) => ({
-                  label: child.label,
-                  href: child.href,
-                  icon: renderIcon(child.icon),
-                  children: child.children?.filter((c) => !c.can || c.can()),
-                })),
-            } as any)
-          : undefined
-      }
       {...props.item.actionProps}
     />
   );

package/src/core/components/table/DataTable.tsx

@@ -1,5 +1,3 @@
-import { useInject } from "@alepha/react";
-import { type FormModel, useForm } from "@alepha/react/form";
 import { Checkbox, Flex, Table, Text, UnstyledButton } from "@mantine/core";
 import { useDebouncedCallback } from "@mantine/hooks";
 import {
@@ -9,6 +7,8 @@ import {
 } from "@tabler/icons-react";
 import { Alepha, type Static, type TObject, t } from "alepha";
 import { DateTimeProvider } from "alepha/datetime";
+import { useInject } from "alepha/react";
+import { type FormModel, useForm } from "alepha/react/form";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { ui } from "../../constants/ui.ts";
 import DataTableFilters, {

package/src/core/components/table/DataTableFilters.tsx

@@ -1,6 +1,6 @@
-import type { FormModel } from "@alepha/react/form";
 import { Flex } from "@mantine/core";
 import { type TObject, t } from "alepha";
+import type { FormModel } from "alepha/react/form";
 import { useMemo } from "react";
 import { ui } from "../../constants/ui.ts";
 import TypeForm, { type TypeFormProps } from "../form/TypeForm.tsx";

package/src/core/components/table/types.ts

@@ -1,4 +1,3 @@
-import type { FormModel } from "@alepha/react/form";
 import type { TableProps, TableTrProps } from "@mantine/core";
 import type {
   Alepha,
@@ -9,6 +8,7 @@ import type {
   TObject,
 } from "alepha";
 import type { DurationLike } from "alepha/datetime";
+import type { FormModel } from "alepha/react/form";
 import type { ReactNode } from "react";
 import type { ActionProps } from "../buttons/ActionButton.tsx";
 import type { TypeFormProps } from "../form/TypeForm.tsx";

package/src/core/hooks/useDialog.ts

@@ -1,4 +1,4 @@
-import { useInject } from "@alepha/react";
+import { useInject } from "alepha/react";
 import { DialogService } from "../services/DialogService.tsx";
 
 /**

package/src/core/hooks/useTheme.ts

@@ -1,4 +1,4 @@
-import { useInject, useStore } from "@alepha/react";
+import { useInject, useStore } from "alepha/react";
 import {
   alephaThemeAtom,
   type CurrentAlephaTheme,

package/src/core/hooks/useToast.ts

@@ -1,4 +1,4 @@
-import { useInject } from "@alepha/react";
+import { useInject } from "alepha/react";
 import { ToastService } from "../services/ToastService.tsx";
 
 /**