@alepha/ui 0.17.2 → 0.18.1

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

@@ -1,11 +1,10 @@
+import { renderIcon, ui } from "@alepha/ui";
 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 { currentUserAtom } from "alepha/security";
 import { type ReactNode, useMemo } from "react";
-import { ui } from "../../constants/ui.ts";
-import { renderIcon } from "../../helpers/renderIcon.tsx";
 
 export interface OmnibarProps {
   shortcut?: string | string[];

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

@@ -1,9 +1,16 @@
 import {
+  ActionButton,
+  type ActionMenuConfig,
+  type ActionMenuItem,
+  type ActionProps,
   Flex,
-  type FlexProps,
-  type MantineBreakpoint,
+  OmnibarButton,
+  renderIcon,
+  SidebarCollapseButton,
   Text,
-} from "@mantine/core";
+  ui,
+} from "@alepha/ui";
+import type { FlexProps, MantineBreakpoint } from "@mantine/core";
 import {
   IconChevronDown,
   IconChevronRight,
@@ -19,11 +26,6 @@ import {
   useMemo,
   useState,
 } from "react";
-import { ui } from "../../constants/ui.ts";
-import { renderIcon } from "../../helpers/renderIcon.tsx";
-import ActionButton, { type ActionProps } from "../buttons/ActionButton.tsx";
-import OmnibarButton from "../buttons/OmnibarButton.tsx";
-import ToggleSidebarButton from "../buttons/ToggleSidebarButton.tsx";
 
 export interface SidebarProps {
   items?: SidebarNode[];
@@ -37,12 +39,6 @@ export interface SidebarProps {
     paths?: string[];
   };
 
-  /**
-   * Whether the sidebar expands on hover when collapsed.
-   * @default true
-   */
-  expandOnHover?: boolean;
-
   /**
    * Automatically populate the menu from the router's pages.
    */
@@ -57,7 +53,11 @@ export const Sidebar = (props: SidebarProps) => {
   const router = useRouter();
   const { onItemClick } = props;
 
-  const divider = (key: string | number, fill?: boolean) => {
+  const divider = (
+    key: string | number,
+    fill?: boolean,
+    collapsed?: boolean,
+  ) => {
     return (
       <Flex
         key={key}
@@ -65,41 +65,40 @@ export const Sidebar = (props: SidebarProps) => {
         bg={"var(--mantine-color-default-border)"}
         my={"xs"}
         mx={
-          fill
-            ? "calc(-1 * var(--mantine-spacing-md))"
-            : props.collapsed
-              ? 0
-              : "sm"
+          fill ? "calc(-1 * var(--mantine-spacing-md))" : collapsed ? 0 : "sm"
         }
       />
     );
   };
 
-  const renderNode = (item: SidebarNode, key: number | string) => {
+  const renderNode = (
+    item: SidebarNode,
+    key: number | string,
+    collapsed: boolean,
+  ) => {
     if ("type" in item) {
       // Hide spacers when collapsed
       if (item.type === "spacer") {
-        if (props.collapsed) return null;
+        if (collapsed) return null;
         return <Flex key={key} h={16} />;
       }
 
       if (item.type === "divider") {
-        return divider(key, item.fill);
+        return divider(key, item.fill, collapsed);
       }
 
       if (item.type === "search") {
         return (
           <Flex key={key} mb="xs">
-            <OmnibarButton collapsed={props.collapsed} />
+            <OmnibarButton collapsed={collapsed} />
           </Flex>
         );
       }
 
       if (item.type === "toggle") {
-        return <ToggleSidebarButton key={key} />;
+        return <SidebarCollapseButton key={key} />;
       }
 
-      // Replace sections with dividers when collapsed
       // Replace sections with dividers when collapsed
       if (item.type === "section") {
         // Hide section if all children are hidden
@@ -110,16 +109,17 @@ export const Sidebar = (props: SidebarProps) => {
           if (!hasVisibleChild) return null;
         }
 
-        if (props.collapsed) {
+        if (collapsed) {
           return (
             <Fragment key={key}>
-              {divider(`${key}-d`)}
+              {divider(`${key}-d`, undefined, collapsed)}
               {item.children?.map((child, index) =>
-                renderNode(child, `s${key}-${index}`),
+                renderNode(child, `s${key}-${index}`, collapsed),
               )}
             </Fragment>
           );
         }
+
         return (
           <Fragment key={key}>
             <Flex mt={"md"} align={"center"} gap={"xs"}>
@@ -129,7 +129,7 @@ export const Sidebar = (props: SidebarProps) => {
               </Text>
             </Flex>
             {item.children?.map((child, index) =>
-              renderNode(child, `s${key}-${index}`),
+              renderNode(child, `s${key}-${index}`, collapsed),
             )}
           </Fragment>
         );
@@ -155,7 +155,7 @@ export const Sidebar = (props: SidebarProps) => {
       }
     }
 
-    if (props.collapsed) {
+    if (collapsed) {
       return (
         <SidebarCollapsedItem
           key={key}
@@ -208,37 +208,43 @@ export const Sidebar = (props: SidebarProps) => {
     [props.items, props.autoPopulateMenu],
   );
 
-  return (
-    <Flex
-      flex={1}
-      py={padding}
-      direction={"column"}
-      className="alepha-sidebar-scroll"
-      {...props.flexProps}
-    >
+  const renderSidebar = (collapsed: boolean) => (
+    <Flex flex={1} py={padding} direction={"column"} {...props.flexProps}>
       <Flex gap={gap} px={padding} direction={"column"}>
         {menu
           .filter((it) => it.position === "top")
-          .map((item, index) => renderNode(item, index))}
+          .map((item, index) => renderNode(item, index, collapsed))}
       </Flex>
-      <Flex
-        gap={gap}
-        px={padding}
-        direction={"column"}
-        flex={1}
-        className="alepha-sidebar-scroll"
-      >
+      <Flex gap={gap} px={padding} direction={"column"} flex={1}>
         {menu
           .filter((it) => !it.position)
-          .map((item, index) => renderNode(item, index))}
+          .map((item, index) => renderNode(item, index, collapsed))}
       </Flex>
       <Flex gap={gap} px={padding} direction={"column"}>
         {menu
           .filter((it) => it.position === "bottom")
-          .map((item, index) => renderNode(item, index))}
+          .map((item, index) => renderNode(item, index, collapsed))}
       </Flex>
     </Flex>
   );
+
+  // When collapsed, render both versions and use CSS breakpoints:
+  // - Desktop (>=md): show collapsed (icon-only) sidebar
+  // - Mobile (<md): show expanded sidebar (drawer with labels)
+  if (props.collapsed) {
+    return (
+      <>
+        <Flex flex={1} direction={"column"} visibleFrom="md">
+          {renderSidebar(true)}
+        </Flex>
+        <Flex flex={1} direction={"column"} hiddenFrom="md">
+          {renderSidebar(false)}
+        </Flex>
+      </>
+    );
+  }
+
+  return renderSidebar(false);
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -310,14 +316,18 @@ export const SidebarItem = (props: SidebarItemProps) => {
           props.theme.button?.size ??
           (level === 0 ? "sm" : "xs")
         }
-        tooltip={
-          item.description
-            ? { label: item.description, position: "right" }
-            : undefined
-        }
-        color={"gray"}
-        variant={"subtle"}
-        variantActive={"default"}
+        // 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={
@@ -376,21 +386,38 @@ export const SidebarItem = (props: SidebarItemProps) => {
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export interface SidebarItemProps {
-  item: SidebarMenuItem;
-  level: number;
-  onItemClick?: (item: SidebarMenuItem) => void;
-  theme: SidebarTheme;
-}
-
 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={
@@ -400,19 +427,24 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
       }
       variant={"subtle"}
       variantActive={"default"}
-      tooltip={{
-        label: item.label,
-        position: "right",
-      }}
+      tooltip={
+        hasChildren
+          ? undefined
+          : {
+              label: item.label,
+              position: "right",
+            }
+      }
       radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
-      onClick={handleItemClick}
+      onClick={hasChildren ? undefined : handleItemClick}
       icon={
         renderIcon(item.icon, ui.sizes.icon.sm) ?? (
           <IconSquareRounded size={ui.sizes.icon.sm} />
         )
       }
-      href={props.item.href as any}
-      target={props.item.target}
+      href={hasChildren ? undefined : (props.item.href as any)}
+      target={hasChildren ? undefined : props.item.target}
+      menu={menu}
       {...props.item.actionProps}
     />
   );

package/src/core/components/layout/index.ts

@@ -0,0 +1,65 @@
+import { $module } from "alepha";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export type { AlephaMantineProviderProps } from "../AlephaMantineProvider.tsx";
+export { default as AlephaMantineProvider } from "../AlephaMantineProvider.tsx";
+export type {
+  AppBarBack,
+  AppBarBurger,
+  AppBarDark,
+  AppBarDivider,
+  AppBarElement,
+  AppBarItem,
+  AppBarLang,
+  AppBarLogo,
+  AppBarProps,
+  AppBarSearch,
+  AppBarSpacer,
+} from "./AppBar.tsx";
+export { default as AppBar } from "./AppBar.tsx";
+export type { BreadcrumbProps } from "./Breadcrumb.tsx";
+export { default as Breadcrumbs } from "./Breadcrumb.tsx";
+export type { ContainerProps } from "./Container.tsx";
+export { default as Container } from "./Container.tsx";
+export {
+  type DashboardShellProps,
+  type DashboardShellProps as AdminShellProps,
+  default as DashboardShell,
+  default as AdminShell,
+} from "./DashboardShell.tsx";
+export type { OmnibarProps } from "./Omnibar.tsx";
+export { default as Omnibar } from "./Omnibar.tsx";
+export type {
+  SidebarAbstractItem,
+  SidebarButtonTheme,
+  SidebarDivider,
+  SidebarElement,
+  SidebarItemProps,
+  SidebarMenuItem,
+  SidebarNode,
+  SidebarProps,
+  SidebarSearch,
+  SidebarSection,
+  SidebarSpacer,
+  SidebarTheme,
+} from "./Sidebar.tsx";
+export { Sidebar } from "./Sidebar.tsx";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Layout components for building application shells.
+ *
+ * **Features:**
+ * - DashboardShell with resizable sidebar
+ * - AppBar with configurable elements
+ * - Sidebar navigation with sections and menu items
+ * - Breadcrumb navigation
+ * - Omnibar (command palette)
+ *
+ * @module alepha.ui.layout
+ */
+export const AlephaUILayout = $module({
+  name: "alepha.ui.layout",
+});

package/src/core/{components/form → form/components}/Control.tsx

@@ -21,10 +21,7 @@ import type {
 } from "@mantine/dates";
 import { useFormState } from "alepha/react/form";
 import type { ComponentType } from "react";
-import {
-  type GenericControlProps,
-  parseInput,
-} from "../../utils/parseInput.ts";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 import ControlArray, { type ControlArrayProps } from "./ControlArray.tsx";
 import ControlDate from "./ControlDate.tsx";
 import ControlNumber, { type ControlNumberProps } from "./ControlNumber.tsx";
@@ -268,19 +265,40 @@ const Control = (_props: ControlProps) => {
     "type" in props.input.schema &&
     props.input.schema.type === "boolean"
   ) {
-    const switchProps = typeof props.switch === "object" ? props.switch : {};
+    if (props.switch) {
+      const switchProps = typeof props.switch === "object" ? props.switch : {};
+      return (
+        <Switch
+          {...inputProps}
+          size={props.size}
+          id={id}
+          color={"blue"}
+          defaultChecked={props.input.props.defaultValue}
+          onChange={(event) => {
+            props.input.set(event.currentTarget.checked);
+          }}
+          {...switchProps}
+        />
+      );
+    }
+
+    const opts: ControlSelectProps = {
+      input: props.input,
+      select: {
+        data: [
+          { value: "true", label: "Yes" },
+          { value: "false", label: "No" },
+        ],
+      },
+    };
 
     return (
-      <Switch
-        {...inputProps}
+      <ControlSelect
         size={props.size}
-        id={id}
-        color={"blue"}
-        defaultChecked={props.input.props.defaultValue}
-        onChange={(event) => {
-          props.input.set(event.currentTarget.checked);
-        }}
-        {...switchProps}
+        title={props.title}
+        description={props.description}
+        icon={icon}
+        {...opts}
       />
     );
   }

package/src/core/{components/form → form/components}/ControlArray.tsx

@@ -1,3 +1,4 @@
+import { ui } from "@alepha/ui";
 import {
   ActionIcon,
   Fieldset,
@@ -11,11 +12,7 @@ import type { TObject, TSchema } from "alepha";
 import { useAlepha } from "alepha/react";
 import type { BaseInputField } from "alepha/react/form";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { ui } from "../../constants/ui.ts";
-import {
-  type GenericControlProps,
-  parseInput,
-} from "../../utils/parseInput.ts";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 import Control, { type ControlProps } from "./Control.tsx";
 
 /**

package/src/core/{components/form → form/components}/ControlDate.tsx

@@ -7,10 +7,7 @@ import {
   type TimeInputProps,
 } from "@mantine/dates";
 import { useFormState } from "alepha/react/form";
-import {
-  type GenericControlProps,
-  parseInput,
-} from "../../utils/parseInput.ts";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 
 export interface ControlDateProps extends GenericControlProps {
   date?: boolean | DateInputProps;

package/src/core/{components/form → form/components}/ControlNumber.tsx

@@ -8,10 +8,7 @@ import {
 import { useEvents } from "alepha/react";
 import { useFormState } from "alepha/react/form";
 import { useRef, useState } from "react";
-import {
-  type GenericControlProps,
-  parseInput,
-} from "../../utils/parseInput.ts";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 
 export interface ControlNumberProps extends GenericControlProps {
   numberInputProps?: Partial<NumberInputProps>;

package/src/core/{components/form → form/components}/ControlObject.tsx

@@ -1,10 +1,7 @@
 import { Fieldset, Flex, Grid, Text } from "@mantine/core";
 import type { TObject } from "alepha";
 import type { BaseInputField, ObjectInputField } from "alepha/react/form";
-import {
-  type GenericControlProps,
-  parseInput,
-} from "../../utils/parseInput.ts";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 import Control, { type ControlProps } from "./Control.tsx";
 
 export interface ControlObjectProps extends GenericControlProps {

package/src/core/{components/form → form/components}/ControlQueryBuilder.tsx

@@ -1,3 +1,10 @@
+import {
+  ActionButton,
+  extractSchemaFields,
+  OPERATOR_INFO,
+  type SchemaField,
+  ui,
+} from "@alepha/ui";
 import {
   ActionIcon,
   Badge,
@@ -13,13 +20,6 @@ import type { TObject } from "alepha";
 import { parseQueryString } from "alepha/orm";
 import { useEvents } from "alepha/react";
 import { useRef, useState } from "react";
-import { ui } from "../../constants/ui.ts";
-import {
-  extractSchemaFields,
-  OPERATOR_INFO,
-  type SchemaField,
-} from "../../utils/extractSchemaFields.ts";
-import ActionButton from "../buttons/ActionButton.tsx";
 
 export interface ControlQueryBuilderProps
   extends Omit<TextInputProps, "value" | "onChange"> {

package/src/core/{components/form → form/components}/ControlSelect.tsx

@@ -14,10 +14,7 @@ import {
 } from "@mantine/core";
 import { useFormState } from "alepha/react/form";
 import { useEffect, useState } from "react";
-import {
-  type GenericControlProps,
-  parseInput,
-} from "../../utils/parseInput.ts";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 
 export type SelectValueLabel =
   | string
@@ -192,6 +189,7 @@ const ControlSelect = (props: ControlSelectProps) => {
       size={props.size}
       id={id}
       leftSection={icon}
+      rightSection={null}
       data={data}
       {...props.input.props}
       {...selectProps}