@alepha/ui 0.13.1 → 0.13.3

package/src/auth/components/buttons/UserButton.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from "@alepha/react";
 import { useAuth } from "@alepha/react/auth";
 import {
   ActionButton,
@@ -7,8 +8,9 @@ import {
   ui,
 } from "@alepha/ui";
 import { Avatar } from "@mantine/core";
-import { IconLogout, IconUser } from "@tabler/icons-react";
+import { IconLogin2, IconLogout, IconUser } from "@tabler/icons-react";
 import type { ReactNode } from "react";
+import type { AuthRouter } from "../../AuthRouter.ts";
 
 export interface UserButtonProps
   extends Omit<ActionProps, "menu" | "icon" | "onClick"> {
@@ -55,8 +57,10 @@ const UserButton = (props: UserButtonProps) => {
     picture?: string;
   }>();
 
+  const authRouter = useRouter<AuthRouter>();
+
   if (!auth.user) {
-    return null;
+    return <ActionButton icon={IconLogin2} href={authRouter.path("login")} />;
   }
 
   const userLabel = auth.user.username || auth.user.email;

package/src/auth/index.ts

@@ -13,6 +13,7 @@ export { default as UserButton } from "./components/buttons/UserButton.tsx";
 export { default as Login } from "./components/Login.tsx";
 export { default as Register } from "./components/Register.tsx";
 export { default as ResetPassword } from "./components/ResetPassword.tsx";
+export { default as VerifyEmail } from "./components/VerifyEmail.tsx";
 
 // ---------------------------------------------------------------------------------------------------------------------
 

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

@@ -144,6 +144,11 @@ export interface ActionCommonProps extends ButtonProps {
    * Additional props to pass to the ThemeIcon wrapping the icon.
    */
   themeIconProps?: ThemeIconProps;
+
+  /**
+   * Visual intent of the action button.
+   */
+  intent?: "primary" | "success" | "danger" | "warning" | "info";
 }
 
 export type ActionProps = ActionCommonProps &
@@ -234,9 +239,12 @@ const ActionMenuItem = (props: {
 };
 
 const ActionButton = (_props: ActionProps) => {
-  const props = { variant: "default", ..._props };
+  const props = { variant: "subtle", ..._props };
   const { tooltip, menu, icon, ...restProps } = props;
 
+  // set default color to gray (not colored)
+  restProps.color ??= "gray";
+
   if (props.icon) {
     const icon = isComponentType(props.icon) ? (
       <props.icon size={ui.sizes.icon.md} />
@@ -254,15 +262,14 @@ const ActionButton = (_props: ActionProps) => {
 
     if (!props.children) {
       restProps.children = Children.only(icon);
-      restProps.p ??= "xs";
+      restProps.px ??= "xs";
     } else {
       restProps.leftSection = icon;
     }
   }
 
   if (props.leftSection && !props.children) {
-    restProps.className ??= "mantine-Action-iconOnly";
-    restProps.p ??= "xs";
+    restProps.px ??= "xs";
   }
 
   if (props.textVisibleFrom) {

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

@@ -73,7 +73,7 @@ const DarkModeButton = (props: DarkModeButtonProps) => {
   return (
     <ActionButton
       onClick={toggleColorScheme}
-      variant={props.variant ?? "default"}
+      variant={props.variant ?? "subtle"}
       size={props.size ?? "sm"}
       aria-label="Toggle color scheme"
       px={"xs"}

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

@@ -12,18 +12,23 @@ const OmnibarButton = (props: OmnibarButtonProps) => {
   return (
     <ActionButton
       variant={"default"}
-      miw={256}
       onClick={spotlight.open}
       justify={"space-between"}
-      rightSection={<Kbd size={"sm"}>⌘+K</Kbd>}
+      rightSection={
+        <Kbd visibleFrom={"sm"} size={"sm"}>
+          ⌘+K
+        </Kbd>
+      }
       radius={"md"}
       {...props.actionProps}
     >
       <Flex align={"center"} gap={"xs"}>
         <IconSearch size={16} color={"gray"} />
-        <Text size={"xs"} c={"dimmed"}>
-          Search...
-        </Text>
+        <Flex visibleFrom={"sm"} miw={192}>
+          <Text size={"xs"} c={"dimmed"}>
+            Search...
+          </Text>
+        </Flex>
       </Flex>
     </ActionButton>
   );

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

@@ -0,0 +1,31 @@
+import { useInject } from "@alepha/react";
+import { IconPalette } from "@tabler/icons-react";
+import { useTheme } from "../../hooks/useTheme.ts";
+import { ThemeProvider } from "../../providers/ThemeProvider.ts";
+import ActionButton, { type ActionProps } from "./ActionButton.tsx";
+
+export interface ThemeButtonProps {
+  actionProps?: Partial<ActionProps>;
+}
+
+const ThemeButton = (props: ThemeButtonProps) => {
+  const [theme, setTheme] = useTheme();
+  const themes = useInject(ThemeProvider).themes;
+
+  return (
+    <ActionButton
+      variant="subtle"
+      icon={IconPalette}
+      menu={{
+        items: themes.map((it) => ({
+          label: it.label,
+          onClick: () => setTheme(it),
+          active: theme.id === it.id,
+        })),
+      }}
+      {...props.actionProps}
+    />
+  );
+};
+
+export default ThemeButton;

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

@@ -93,18 +93,20 @@ const AdminShell = (props: AdminShellProps) => {
 
   return (
     <AppShell
+      w={"100%"}
+      flex={1}
       padding="md"
       header={hasAppBar ? { height: 60 } : undefined}
       navbar={
         hasSidebar
           ? {
-              width: collapsed ? { base: 72 } : { base: 300 },
+              width: collapsed ? { base: 78 } : { base: 300 },
               breakpoint: "sm",
               collapsed: { mobile: !opened },
             }
           : undefined
       }
-      footer={props.footer ? { height: 60 } : undefined}
+      footer={props.footer ? { height: 24 } : undefined}
       {...props.appShellProps}
     >
       <AppShell.Header bg={ui.colors.surface} {...props.appShellHeaderProps}>

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

@@ -1,15 +1,17 @@
 import { NestedView, useEvents } from "@alepha/react";
 import { FormValidationError } from "@alepha/react/form";
-import type {
-  ColorSchemeScriptProps,
-  MantineProviderProps,
+import {
+  ColorSchemeScript,
+  type ColorSchemeScriptProps,
+  MantineProvider,
+  type MantineProviderProps,
 } from "@mantine/core";
-import { ColorSchemeScript, MantineProvider } from "@mantine/core";
 import { ModalsProvider, type ModalsProviderProps } from "@mantine/modals";
 import { Notifications, type NotificationsProps } from "@mantine/notifications";
 import type { NavigationProgressProps } from "@mantine/nprogress";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
 import type { ReactNode } from "react";
+import { useTheme } from "../../hooks/useTheme.ts";
 import { useToast } from "../../hooks/useToast.ts";
 import Omnibar, { type OmnibarProps } from "./Omnibar.tsx";
 
@@ -25,6 +27,7 @@ export interface AlephaMantineProviderProps {
 
 const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
   const toast = useToast();
+  const [theme] = useTheme();
 
   useEvents(
     {
@@ -59,6 +62,9 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
       <MantineProvider
         {...props.mantine}
         theme={{
+          // Spread all theme properties from the selected theme
+          ...theme,
+          // User overrides take precedence
           ...props.mantine?.theme,
         }}
       >

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

@@ -1,7 +1,9 @@
-import { useRouter } from "@alepha/react";
+import { useRouter, useStore } from "@alepha/react";
 import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import { type ReactNode, useMemo } from "react";
+import { ui } from "../../constants/ui.ts";
+import { renderIcon } from "../buttons/ActionButton.tsx";
 
 export interface OmnibarProps {
   shortcut?: string | string[];
@@ -14,16 +16,31 @@ const Omnibar = (props: OmnibarProps) => {
   const searchPlaceholder = props.searchPlaceholder ?? "Search...";
   const nothingFound = props.nothingFound ?? "Nothing found...";
   const router = useRouter();
+
+  // watch user to re-render on permission changes
+  const [user] = useStore("alepha.server.request.user");
+
   const actions: SpotlightActionData[] = useMemo(
     () =>
-      router.concretePages.map((page) => ({
-        id: page.name,
-        label: page.label ?? page.name,
-        description: page.description,
-        onClick: () => router.go(page.name),
-        leftSection: page.icon,
-      })),
-    [],
+      router.concretePages
+        .filter((page) => {
+          if (page.can && !page.can()) return false;
+
+          return true;
+        })
+        .map((page) => ({
+          id: page.name,
+          label: page.label ?? page.name,
+          description: page.description,
+          onClick: () => {
+            if (page.staticName) {
+              return router.go(page.staticName, { params: page.params });
+            }
+            return router.go(page.name);
+          },
+          leftSection: renderIcon(page.icon),
+        })),
+    [user],
   );
 
   return (
@@ -32,7 +49,7 @@ const Omnibar = (props: OmnibarProps) => {
       shortcut={shortcut}
       limit={10}
       searchProps={{
-        leftSection: <IconSearch size={20} />,
+        leftSection: <IconSearch size={ui.sizes.icon.md} />,
         placeholder: searchPlaceholder,
       }}
       nothingFound={nothingFound}

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

@@ -86,6 +86,11 @@ export const Sidebar = (props: SidebarProps) => {
       return <Flex key={key}>{item.element}</Flex>;
     }
 
+    // Check visibility control
+    if (item.can && !item.can()) {
+      return null;
+    }
+
     if (props.collapsed) {
       return (
         <SidebarCollapsedItem
@@ -271,15 +276,17 @@ export const SidebarItem = (props: SidebarItemProps) => {
               bottom: 16,
             }}
           />
-          {item.children.map((child, index) => (
-            <SidebarItem
-              key={index}
-              item={child}
-              level={level + 1}
-              onItemClick={props.onItemClick}
-              theme={props.theme}
-            />
-          ))}
+          {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>
@@ -338,6 +345,14 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
       color={"var(--alepha-text)"}
       variant={"subtle"}
       variantActive={"default"}
+      tooltip={
+        item.children
+          ? undefined
+          : {
+              label: item.label,
+              position: "right",
+            }
+      }
       radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
       onClick={handleItemClick}
       icon={renderIcon(item.icon) ?? <IconSquareRounded />}
@@ -348,12 +363,14 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
           ? ({
               position: "right",
               on: "hover",
-              items: item.children.map((child) => ({
-                label: child.label,
-                href: child.href,
-                icon: renderIcon(child.icon),
-                children: child.children,
-              })),
+              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
       }
@@ -410,6 +427,7 @@ export interface SidebarMenuItem extends SidebarAbstractItem {
   rightSection?: ReactNode;
   theme?: SidebarButtonTheme;
   actionProps?: ActionProps;
+  can?: () => boolean; // Visibility control: true -> visible, false -> hidden
 }
 
 export interface SidebarButtonTheme {

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

@@ -1,6 +1,7 @@
 import { useInject } from "@alepha/react";
 import { type FormModel, useForm } from "@alepha/react/form";
 import {
+  Card,
   Flex,
   Pagination,
   Select,
@@ -20,6 +21,7 @@ import {
 } from "alepha";
 import { DateTimeProvider, type DurationLike } from "alepha/datetime";
 import { type ReactNode, useEffect, useState } from "react";
+import { ui } from "../../constants/ui.ts";
 import ActionButton from "../buttons/ActionButton.tsx";
 import TypeForm, { type TypeFormProps } from "../form/TypeForm.tsx";
 
@@ -283,11 +285,13 @@ const DataTable = <T extends object, Filters extends TObject>(
   return (
     <Flex direction={"column"} gap={"sm"} flex={1}>
       {props.filters ? (
-        <TypeForm
-          {...props.typeFormProps}
-          form={form as unknown as FormModel<Filters>}
-          schema={schema}
-        />
+        <Card withBorder p={"lg"} bg={ui.colors.elevated}>
+          <TypeForm
+            {...props.typeFormProps}
+            form={form as unknown as FormModel<Filters>}
+            schema={schema}
+          />
+        </Card>
       ) : null}
 
       <Flex className={"overflow-auto"}>

package/src/core/hooks/useTheme.ts

@@ -0,0 +1,25 @@
+import { useInject, useStore } from "@alepha/react";
+import {
+  type AlephaTheme,
+  type Theme,
+  ThemeProvider,
+  themeAtom,
+} from "../providers/ThemeProvider.ts";
+
+export const useTheme = () => {
+  useStore(themeAtom);
+
+  const themeService = useInject(ThemeProvider);
+  const currentTheme = themeService.getTheme();
+
+  // Find the full theme object from the themes array
+  const fullTheme =
+    themeService.themes.find((t) => t.id === currentTheme.id) ??
+    themeService.themes[0];
+
+  const applyTheme = (theme: Theme | AlephaTheme) => {
+    themeService.setTheme({ id: theme.id });
+  };
+
+  return [fullTheme, applyTheme] as const;
+};

package/src/core/index.ts

@@ -2,8 +2,9 @@ import { AlephaReactForm } from "@alepha/react/form";
 import { AlephaReactHead } from "@alepha/react/head";
 import { AlephaReactI18n } from "@alepha/react/i18n";
 import { $module } from "alepha";
-import type { ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 import type { ControlProps } from "./components/form/Control.tsx";
+import { ThemeProvider } from "./providers/ThemeProvider.ts";
 import { RootRouter } from "./RootRouter.ts";
 import { DialogService } from "./services/DialogService.tsx";
 import { ToastService } from "./services/ToastService.tsx";
@@ -27,6 +28,8 @@ export { default as ClipboardButton } from "./components/buttons/ClipboardButton
 export { default as DarkModeButton } from "./components/buttons/DarkModeButton.tsx";
 export { default as LanguageButton } from "./components/buttons/LanguageButton.tsx";
 export { default as OmnibarButton } from "./components/buttons/OmnibarButton.tsx";
+export type { ThemeButtonProps } from "./components/buttons/ThemeButton.tsx";
+export { default as ThemeButton } from "./components/buttons/ThemeButton.tsx";
 export { default as JsonViewer } from "./components/data/JsonViewer.tsx";
 export { default as AlertDialog } from "./components/dialogs/AlertDialog.tsx";
 export { default as ConfirmDialog } from "./components/dialogs/ConfirmDialog.tsx";
@@ -77,6 +80,7 @@ export { default as DataTable } from "./components/table/DataTable.tsx";
 export * from "./constants/ui.ts";
 export { useDialog } from "./hooks/useDialog.ts";
 export { useToast } from "./hooks/useToast.ts";
+export * from "./providers/ThemeProvider.ts";
 export * from "./RootRouter.ts";
 export type {
   AlertDialogOptions,
@@ -102,7 +106,7 @@ declare module "typebox" {
 }
 
 declare module "@alepha/react" {
-  interface PageDescriptorOptions {
+  interface PagePrimitiveOptions {
     /**
      * Human-readable title for the page.
      * - for Sidebar navigation
@@ -121,7 +125,7 @@ declare module "@alepha/react" {
     /**
      * Optional icon for the page.
      */
-    icon?: ReactNode;
+    icon?: ReactNode | ComponentType;
   }
 }
 
@@ -134,11 +138,12 @@ declare module "@alepha/react" {
  */
 export const AlephaUI = $module({
   name: "alepha.ui",
-  services: [DialogService, ToastService, RootRouter],
+  services: [DialogService, ToastService, ThemeProvider, RootRouter],
   register: (alepha) => {
     alepha.with(AlephaReactI18n);
     alepha.with(AlephaReactHead);
     alepha.with(AlephaReactForm);
+    alepha.with(ThemeProvider);
     alepha.with(DialogService);
     alepha.with(ToastService);
   },

package/src/core/providers/ThemeProvider.ts

@@ -0,0 +1,87 @@
+import { $head } from "@alepha/react/head";
+import type { MantineThemeOverride } from "@mantine/core";
+import { $atom, $inject, Alepha, type Static, t } from "alepha";
+import { $cookie } from "alepha/server/cookies";
+import {
+  auroraTheme,
+  crystalTheme,
+  defaultTheme,
+  emberTheme,
+  midnightTheme,
+  remoraidTheme,
+  slateTheme,
+} from "../themes/index.ts";
+
+export const themeAtom = $atom({
+  name: "alepha.ui.theme",
+  schema: t.object({
+    id: t.string(),
+  }),
+  default: {
+    id: "default",
+  },
+});
+
+export type Theme = Static<typeof themeAtom.schema>;
+
+declare module "alepha" {
+  interface State {
+    [themeAtom.key]?: Theme;
+  }
+}
+
+export type AlephaTheme = MantineThemeOverride & {
+  id: string;
+  label: string;
+  description: string;
+};
+
+export class ThemeProvider {
+  protected readonly alepha = $inject(Alepha);
+  protected themeCookie = $cookie(themeAtom);
+
+  public themes: AlephaTheme[] = [
+    defaultTheme,
+    remoraidTheme,
+    midnightTheme,
+    slateTheme,
+    auroraTheme,
+    emberTheme,
+    crystalTheme,
+  ];
+
+  protected themeHead = $head(() => {
+    return {
+      htmlAttributes: {
+        "data-theme": this.getTheme().id,
+      },
+    };
+  });
+
+  public setTheme(theme: Theme) {
+    this.themeCookie.set(theme);
+    this.alepha.store.set(themeAtom, theme);
+
+    if (typeof document === "undefined") return;
+
+    document.documentElement.removeAttribute("data-theme");
+
+    if (theme.id !== "default") {
+      document.documentElement.setAttribute("data-theme", theme.id);
+    }
+  }
+
+  public getTheme() {
+    // TODO: make a safe cookie getter, today it crash when Cookie Server is called inside vite pre-render
+    try {
+      return (
+        this.themeCookie.get() ??
+        this.alepha.store.get(themeAtom) ??
+        themeAtom.options.default
+      );
+    } catch {
+      // TODO: atom should take default value if undefined ???
+      return this.alepha.store.get(themeAtom) ?? themeAtom.options.default;
+    }
+  }
+}

package/src/core/themes/aurora.ts

@@ -0,0 +1,107 @@
+import type { AlephaTheme } from "../providers/ThemeProvider.ts";
+
+export const auroraTheme: AlephaTheme = {
+  id: "aurora",
+  label: "Aurora",
+  description: "Vibrant, playful with gradients and hover effects",
+  primaryColor: "violet",
+  primaryShade: { light: 5, dark: 4 },
+  fontFamily:
+    '"Nunito", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontFamilyMonospace:
+    '"Fira Code", "JetBrains Mono", ui-monospace, Consolas, monospace',
+  headings: {
+    fontFamily:
+      '"Nunito", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif',
+    fontWeight: "700",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "2.25rem", lineHeight: "1.3" },
+      h2: { fontSize: "1.75rem", lineHeight: "1.35" },
+      h3: { fontSize: "1.375rem", lineHeight: "1.4" },
+      h4: { fontSize: "1.125rem", lineHeight: "1.45" },
+      h5: { fontSize: "1rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.875rem", lineHeight: "1.5" },
+    },
+  },
+  fontSizes: {
+    xs: "0.8rem",
+    sm: "0.9rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.3rem",
+  },
+  lineHeights: {
+    xs: "1.5",
+    sm: "1.55",
+    md: "1.6",
+    lg: "1.65",
+    xl: "1.7",
+  },
+  radius: {
+    xs: "6px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px",
+  },
+  defaultRadius: "md",
+  shadows: {
+    xs: "0 2px 4px rgba(139, 92, 246, 0.08)",
+    sm: "0 4px 8px rgba(139, 92, 246, 0.1)",
+    md: "0 8px 16px rgba(139, 92, 246, 0.12)",
+    lg: "0 16px 32px rgba(139, 92, 246, 0.15)",
+    xl: "0 24px 48px rgba(139, 92, 246, 0.18)",
+  },
+  defaultGradient: { from: "violet", to: "pink", deg: 135 },
+  colors: {
+    dark: [
+      "#d4d0dc",
+      "#a8a3b3",
+      "#7c7689",
+      "#5c5568",
+      "#454050",
+      "#302c38",
+      "#252129",
+      "#1e1b24",
+      "#16141a",
+      "#0d0c10",
+    ],
+    gray: [
+      "#faf9fb",
+      "#f3f1f5",
+      "#e8e5ed",
+      "#d4d0dc",
+      "#a8a3b3",
+      "#7c7689",
+      "#5c5568",
+      "#454050",
+      "#302c38",
+      "#1e1b24",
+    ],
+    violet: [
+      "#f5f3ff",
+      "#ede9fe",
+      "#ddd6fe",
+      "#c4b5fd",
+      "#a78bfa",
+      "#8b5cf6",
+      "#7c3aed",
+      "#6d28d9",
+      "#5b21b6",
+      "#4c1d95",
+    ],
+    pink: [
+      "#fdf2f8",
+      "#fce7f3",
+      "#fbcfe8",
+      "#f9a8d4",
+      "#f472b6",
+      "#ec4899",
+      "#db2777",
+      "#be185d",
+      "#9d174d",
+      "#831843",
+    ],
+  },
+};