@alepha/ui 0.18.0 → 0.18.2

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

@@ -0,0 +1,184 @@
+import {
+  ColorSwatch,
+  Flex,
+  Select,
+  SimpleGrid,
+  Text,
+  useMantineTheme,
+} from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+import type { AlephaThemeOverrides } from "../../atoms/alephaThemeOverridesAtom.ts";
+import { useDialog } from "../../hooks/useDialog.ts";
+import { useTheme } from "../../hooks/useTheme.ts";
+import ActionButton from "./ActionButton.tsx";
+
+const MANTINE_COLORS = [
+  "red",
+  "pink",
+  "grape",
+  "violet",
+  "indigo",
+  "blue",
+  "cyan",
+  "teal",
+  "green",
+  "lime",
+  "yellow",
+  "orange",
+];
+
+const RADIUS_OPTIONS = [
+  { label: "xs", value: "xs" },
+  { label: "sm", value: "sm" },
+  { label: "md", value: "md" },
+  { label: "lg", value: "lg" },
+  { label: "xl", value: "xl" },
+];
+
+const SIZE_OPTIONS = [
+  { label: "xs", value: "xs" },
+  { label: "sm", value: "sm" },
+  { label: "md", value: "md" },
+  { label: "lg", value: "lg" },
+  { label: "xl", value: "xl" },
+];
+
+const FONT_OPTIONS = [
+  { label: "System", value: "" },
+  { label: "Inter", value: "Inter, sans-serif" },
+  { label: "Mono", value: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { label: "Serif", value: "Georgia, 'Times New Roman', serif" },
+];
+
+const ThemeExpertModal = () => {
+  const [, , expert] = useTheme();
+  const dialog = useDialog();
+  const mantineTheme = useMantineTheme();
+  const { overrides, setOverrides } = expert;
+
+  const currentColor = overrides.primaryColor || mantineTheme.primaryColor;
+  const currentRadius = overrides.radius || mantineTheme.defaultRadius || "md";
+  const currentFont = overrides.fontFamily || "";
+  const currentFontSize = overrides.fontSize || "md";
+  const currentScale = overrides.scale || "md";
+
+  const updateOverrides = (patch: Partial<AlephaThemeOverrides>) => {
+    setOverrides({ ...overrides, ...patch });
+  };
+
+  return (
+    <Flex direction="column" gap="lg">
+      <Flex direction="column" gap="xs">
+        <Text fw={500} size="sm">
+          Primary Color
+        </Text>
+        <SimpleGrid cols={6} spacing="xs">
+          {MANTINE_COLORS.map((color) => (
+            <Flex key={color} justify="center">
+              <ColorSwatch
+                color={mantineTheme.colors[color]?.[6] ?? color}
+                onClick={() => updateOverrides({ primaryColor: color })}
+                style={{ cursor: "pointer" }}
+                size={32}
+              >
+                {currentColor === color && (
+                  <IconCheck size={14} color="white" />
+                )}
+              </ColorSwatch>
+            </Flex>
+          ))}
+        </SimpleGrid>
+      </Flex>
+
+      <Flex direction="column" gap="xs">
+        <Text fw={500} size="sm">
+          Border Radius
+        </Text>
+        <Flex gap="xs">
+          {RADIUS_OPTIONS.map((opt) => (
+            <ActionButton
+              key={opt.value}
+              variant={
+                String(currentRadius) === opt.value ? "filled" : "default"
+              }
+              size="xs"
+              flex={1}
+              onClick={() => updateOverrides({ radius: opt.value })}
+            >
+              {opt.label}
+            </ActionButton>
+          ))}
+        </Flex>
+      </Flex>
+
+      <Flex direction="column" gap="xs">
+        <Text fw={500} size="sm">
+          Font Family
+        </Text>
+        <Select
+          data={FONT_OPTIONS}
+          value={currentFont}
+          onChange={(value) => updateOverrides({ fontFamily: value ?? "" })}
+          allowDeselect={false}
+        />
+      </Flex>
+
+      <Flex direction="column" gap="xs">
+        <Text fw={500} size="sm">
+          Font Size
+        </Text>
+        <Flex gap="xs">
+          {SIZE_OPTIONS.map((opt) => (
+            <ActionButton
+              key={opt.value}
+              variant={currentFontSize === opt.value ? "filled" : "default"}
+              size="xs"
+              flex={1}
+              onClick={() => updateOverrides({ fontSize: opt.value })}
+            >
+              {opt.label}
+            </ActionButton>
+          ))}
+        </Flex>
+      </Flex>
+
+      <Flex direction="column" gap="xs">
+        <Text fw={500} size="sm">
+          Scale
+        </Text>
+        <Flex gap="xs">
+          {SIZE_OPTIONS.map((opt) => (
+            <ActionButton
+              key={opt.value}
+              variant={currentScale === opt.value ? "filled" : "default"}
+              size="xs"
+              flex={1}
+              onClick={() => updateOverrides({ scale: opt.value })}
+            >
+              {opt.label}
+            </ActionButton>
+          ))}
+        </Flex>
+      </Flex>
+
+      <Flex justify="space-between">
+        <ActionButton
+          variant="subtle"
+          color="red"
+          onClick={() => expert.resetOverrides()}
+        >
+          Reset
+        </ActionButton>
+        <ActionButton
+          variant={"default"}
+          px={"xl"}
+          onClick={() => dialog.close()}
+        >
+          OK
+        </ActionButton>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ThemeExpertModal;

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

@@ -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).
@@ -136,6 +136,7 @@ const DashboardShell = (props: DashboardShellProps) => {
     <AppShell
       layout={"alt"}
       w={"100%"}
+      h={"100vh"}
       flex={1}
       header={hasAppBar ? { height: hHeight } : undefined}
       navbar={
@@ -159,10 +160,7 @@ const DashboardShell = (props: DashboardShellProps) => {
       )}
 
       {hasSidebar && (
-        <AppShell.Navbar
-          className="alepha-sidebar-navbar"
-          {...props.appShellNavbarProps}
-        >
+        <AppShell.Navbar {...props.appShellNavbarProps}>
           {props.navbarHeader ? (
             <Flex
               style={{
@@ -170,7 +168,7 @@ const DashboardShell = (props: DashboardShellProps) => {
               }}
               h={headerHeight}
             >
-              {props.navbarHeader}
+              {props.navbarHeader({ collapsed })}
             </Flex>
           ) : null}
           <Sidebar {...(props.sidebarProps ?? {})} collapsed={collapsed} />
@@ -187,7 +185,12 @@ const DashboardShell = (props: DashboardShellProps) => {
         </AppShell.Navbar>
       )}
 
-      <AppShell.Main pos={"relative"} {...props.appShellMainProps}>
+      <AppShell.Main
+        display={"flex"}
+        bg={"var(--alepha-ground)"}
+        pos={"relative"}
+        {...props.appShellMainProps}
+      >
         {props.children ?? <NestedView />}
       </AppShell.Main>
 

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

@@ -89,7 +89,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 +112,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),
               )}
@@ -202,7 +201,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],
@@ -316,17 +315,11 @@ export const SidebarItem = (props: SidebarItemProps) => {
           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}
@@ -355,7 +348,7 @@ export const SidebarItem = (props: SidebarItemProps) => {
       />
 
       {item.children && isOpen && (
-        <Flex direction={"column"} data-parent-level={level}>
+        <Flex direction={"column"} data-parent-level={level} gap={2} py={2}>
           <Flex
             style={{
               position: "absolute",
@@ -401,52 +394,67 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
     ? {
         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,
-            }),
-          ),
+        menuProps: {
+          arrowPosition: "center",
+          arrowSize: 10,
+          withArrow: true,
+        },
+        items: [
+          {
+            type: "label",
+            label: item.label,
+          },
+          ...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}
-    />
+    <Flex w={"100%"} justify="center" pos={"relative"}>
+      <ActionButton
+        size={
+          props.item.theme?.size ??
+          props.theme.button?.size ??
+          (level === 0 ? "sm" : "xs")
+        }
+        bd={0}
+        variant={"default"}
+        propsActive={{
+          variant: "outline",
+        }}
+        tooltip={
+          hasChildren
+            ? undefined
+            : {
+                label: item.label,
+                position: "right",
+              }
+        }
+        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}
+      />
+    </Flex>
   );
 };
 

package/src/core/constants/ui.ts

@@ -1,17 +1,17 @@
 export const ui = {
   colors: {
     transparent: "transparent",
-    background: "var(--alepha-background)",
+    background: "var(--alepha-ground)",
     surface: "var(--alepha-surface)",
     elevated: "var(--alepha-elevated)",
     border: "var(--alepha-border)",
   },
   sizes: {
     icon: {
-      xs: 14,
-      sm: 16,
-      md: 20,
-      lg: 24,
+      xs: 16,
+      sm: 20,
+      md: 24,
+      lg: 28,
       xl: 32,
     },
   },

package/src/core/hooks/useTheme.ts

@@ -3,23 +3,36 @@ import {
   alephaThemeAtom,
   type CurrentAlephaTheme,
 } from "../atoms/alephaThemeAtom.ts";
+import {
+  type AlephaThemeOverrides,
+  alephaThemeOverridesAtom,
+} from "../atoms/alephaThemeOverridesAtom.ts";
 import type { AlephaTheme } from "../interfaces/AlephaTheme.ts";
 import { ThemeProvider } from "../providers/ThemeProvider.ts";
 
+export interface ThemeExpert {
+  overrides: AlephaThemeOverrides;
+  setOverrides: (overrides: AlephaThemeOverrides) => void;
+  resetOverrides: () => void;
+}
+
 /**
  * Hook to get and set the current theme.
  *
- * Returns a tuple with the current theme and a function to set the theme.
+ * Returns a tuple with the current theme, a function to set the theme,
+ * and expert mode controls for fine-grained customization.
  *
  * ```tsx
- * const [theme, setTheme] = useTheme();
+ * const [theme, setTheme, expert] = useTheme();
  * ```
  */
 export const useTheme = (): [
   AlephaTheme,
   (theme: CurrentAlephaTheme) => void,
+  ThemeExpert,
 ] => {
   useStore(alephaThemeAtom);
+  useStore(alephaThemeOverridesAtom);
 
   const themeProvider = useInject(ThemeProvider);
   const theme = themeProvider.getTheme();
@@ -27,5 +40,15 @@ export const useTheme = (): [
     themeProvider.setTheme(theme.index);
   };
 
-  return [theme, setTheme] as const;
+  const expert: ThemeExpert = {
+    overrides: themeProvider.getThemeOverrides(),
+    setOverrides: (overrides: AlephaThemeOverrides) => {
+      themeProvider.setThemeOverrides(overrides);
+    },
+    resetOverrides: () => {
+      themeProvider.resetThemeOverrides();
+    },
+  };
+
+  return [theme, setTheme, expert] as const;
 };

package/src/core/index.ts

@@ -5,6 +5,7 @@ import { AlephaReactI18n } from "alepha/react/i18n";
 import type { ComponentType, ReactNode } from "react";
 import { alephaSidebarAtom } from "./atoms/alephaSidebarAtom.ts";
 import { alephaThemeAtom } from "./atoms/alephaThemeAtom.ts";
+import { alephaThemeOverridesAtom } from "./atoms/alephaThemeOverridesAtom.ts";
 import { ThemeProvider } from "./providers/ThemeProvider.ts";
 import { DialogService } from "./services/DialogService.tsx";
 import { ToastService } from "./services/ToastService.tsx";
@@ -15,6 +16,7 @@ import { UiRouter } from "./UiRouter.ts";
 export * from "./atoms/alephaSidebarAtom.ts";
 export * from "./atoms/alephaThemeAtom.ts";
 export * from "./atoms/alephaThemeListAtom.ts";
+export * from "./atoms/alephaThemeOverridesAtom.ts";
 export * from "./atoms/themes/default.ts";
 export * from "./atoms/themes/midnight.ts";
 export type { AlephaMantineProviderProps } from "./components/AlephaMantineProvider.tsx";
@@ -109,7 +111,7 @@ export * from "./form/index.ts";
 export * from "./helpers/isComponentType.ts";
 export * from "./helpers/renderIcon.tsx";
 export { useDialog } from "./hooks/useDialog.ts";
-export { useTheme } from "./hooks/useTheme.ts";
+export { type ThemeExpert, useTheme } from "./hooks/useTheme.ts";
 export { useToast } from "./hooks/useToast.ts";
 export * from "./interfaces/AlephaIntent.ts";
 // JSON
@@ -140,6 +142,9 @@ declare module "alepha" {
   interface State {
     [alephaSidebarAtom.key]?: Static<typeof alephaSidebarAtom.schema>;
     [alephaThemeAtom.key]?: Static<typeof alephaThemeAtom.schema>;
+    [alephaThemeOverridesAtom.key]?: Static<
+      typeof alephaThemeOverridesAtom.schema
+    >;
   }
 }
 

package/src/core/interfaces/AlephaTheme.ts

@@ -1,7 +1,9 @@
 import type { MantineThemeOverride } from "@mantine/core";
+import type { SimpleHead } from "alepha/react/head";
 
 export type AlephaTheme = MantineThemeOverride & {
   name: string;
   description: string;
   defaultColorScheme?: "light" | "dark"; // or "system"
+  head?: Pick<SimpleHead, "link" | "meta" | "script">;
 };