@alepha/ui 0.18.1 → 0.18.3

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

@@ -42,14 +42,14 @@ export interface UserButtonProps
   menuConfig?: Partial<Omit<ActionMenuConfig, "items">>;
 
   /**
-   * Whether to show a divider before logout (default: true when menuItems provided)
+   * Custom icon to use instead of user avatar (default: IconUser)
    */
-  showLogoutDivider?: boolean;
+  icon?: ReactNode;
 
   /**
-   * Custom icon to use instead of user avatar (default: IconUser)
+   * If true, the profile link will not be shown in the menu even if a userProfile page exists and the user is authenticated.
    */
-  icon?: ReactNode;
+  skipProfile?: boolean;
 }
 
 const UserButton = (props: UserButtonProps) => {
@@ -58,13 +58,13 @@ const UserButton = (props: UserButtonProps) => {
     logoutLabel = "Sign out",
     loginLabel,
     menuConfig,
-    showLogoutDivider = menuItems.length > 0,
     icon,
+    skipProfile = false,
     children,
     ...buttonProps
   } = props;
 
-  buttonProps.variant ??= "subtle";
+  buttonProps.variant ??= "default";
 
   const adminUserCtrl = useClient<AdminUserController>();
   const pages = useInject(ReactPageProvider);
@@ -93,8 +93,6 @@ const UserButton = (props: UserButtonProps) => {
     );
   }
 
-  const userLabel = auth.user.username || auth.user.email;
-
   const items: ActionMenuItem[] = [];
 
   // Add user info label if available
@@ -106,10 +104,10 @@ const UserButton = (props: UserButtonProps) => {
   }
 
   // Add profile page link if available
-  if (userPage && isConnected) {
+  if (userPage && isConnected && !skipProfile) {
     items.push({
       label: "Profile",
-      icon: <IconUser size={ui.sizes.icon.md} />,
+      icon: <IconUser size={ui.sizes.icon.sm} />,
       href: authRouter.path("userProfile"),
     });
   }
@@ -118,7 +116,7 @@ const UserButton = (props: UserButtonProps) => {
   if (adminPage && isAdmin) {
     items.push({
       label: "Admin",
-      icon: <IconSettings size={ui.sizes.icon.md} />,
+      icon: <IconSettings size={ui.sizes.icon.sm} />,
       href: authRouter.path("adminLayout"),
     });
   }
@@ -127,14 +125,14 @@ const UserButton = (props: UserButtonProps) => {
   items.push(...menuItems);
 
   // Add divider before logout if needed
-  if (showLogoutDivider && items.length > 0) {
+  if (items.length > 0) {
     items.push({ type: "divider" });
   }
 
   // Add logout item
   items.push({
     label: logoutLabel,
-    icon: <IconLogout size={ui.sizes.icon.md} />,
+    icon: <IconLogout size={ui.sizes.icon.sm} />,
     color: "red",
     onClick: () => auth.logout(),
   });
@@ -148,23 +146,21 @@ const UserButton = (props: UserButtonProps) => {
       icon={
         hasAvatar ? undefined : icon === null ? undefined : (icon ?? IconUser)
       }
-      leftSection={
-        hasAvatar ? (
-          <Avatar
-            src={`/api/files/${auth.user.picture}`}
-            size={24}
-            radius="xl"
-          />
-        ) : undefined
-      }
+      px={8}
       menu={{
-        position: "bottom-end",
+        menuProps: {
+          withArrow: true,
+          arrowSize: 12,
+        },
+        position: "bottom",
         width: 200,
         ...menuConfig,
         items,
       }}
     >
-      {children}
+      {hasAvatar ? (
+        <Avatar src={`/api/files/${auth.user.picture}`} size={24} radius="xl" />
+      ) : undefined}
     </ActionButton>
   );
 };

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 type { VerifyEmailStep } from "./components/VerifyEmail.tsx";
 export { default as VerifyEmail } from "./components/VerifyEmail.tsx";
 export * from "./primitives/$uiAuth.ts";
 

package/src/core/atoms/alephaSidebarAtom.ts

@@ -26,7 +26,7 @@ export const alephaSidebarAtom = $atom({
     closed: true,
     collapsed: false,
     expandedWidth: 300,
-    collapsedWidth: 78,
+    collapsedWidth: 72,
   },
 });
 

package/src/core/atoms/alephaThemeListAtom.ts

@@ -1,12 +1,25 @@
 import { $atom, type Static, t } from "alepha";
 import type { AlephaTheme } from "../interfaces/AlephaTheme.ts";
 import { defaultTheme } from "./themes/default.ts";
+import { editorialTheme } from "./themes/editorial.ts";
 import { midnightTheme } from "./themes/midnight.ts";
+import { monochromeTheme } from "./themes/monochrome.ts";
+import { rosePineTheme } from "./themes/rosePine.ts";
+import { softBrutalismTheme } from "./themes/softBrutalism.ts";
+import { terminalTheme } from "./themes/terminal.ts";
 
 export const alephaThemeListAtom = $atom({
   name: "alepha.ui.themeList",
   schema: t.array(t.json<AlephaTheme>()), // TODO: translate to proper schema
-  default: [defaultTheme, midnightTheme],
+  default: [
+    defaultTheme,
+    midnightTheme,
+    softBrutalismTheme,
+    terminalTheme,
+    editorialTheme,
+    rosePineTheme,
+    monochromeTheme,
+  ],
 });
 
 export type AlephaThemeListAtom = Static<typeof alephaThemeListAtom.schema>;

package/src/core/atoms/alephaThemeOverridesAtom.ts

@@ -0,0 +1,17 @@
+import { $atom, type Static, t } from "alepha";
+
+export const alephaThemeOverridesAtom = $atom({
+  name: "alepha.ui.themeOverrides",
+  schema: t.object({
+    primaryColor: t.optional(t.text()),
+    radius: t.optional(t.text()),
+    fontFamily: t.optional(t.text()),
+    fontSize: t.optional(t.text()),
+    scale: t.optional(t.text()),
+  }),
+  default: {},
+});
+
+export type AlephaThemeOverrides = Static<
+  typeof alephaThemeOverridesAtom.schema
+>;

package/src/core/atoms/themes/editorial.ts

@@ -0,0 +1,184 @@
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Card,
+  Paper,
+  TextInput,
+} from "@mantine/core";
+import type { AlephaTheme } from "../../interfaces/AlephaTheme.ts";
+
+/**
+ * Editorial theme.
+ *
+ * Serif typography, high contrast black and white, thin borders, generous whitespace.
+ * Newspaper/magazine aesthetic — elegant restraint.
+ */
+export const editorialTheme: AlephaTheme = {
+  name: "Editorial",
+  description: "Serif typography with newspaper elegance",
+  defaultColorScheme: "light",
+  head: {
+    link: [
+      { rel: "preconnect", href: "https://fonts.googleapis.com" },
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossorigin: "",
+      },
+      {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap",
+      },
+    ],
+  },
+  primaryColor: "ink",
+  primaryShade: { light: 7, dark: 3 },
+  autoContrast: true,
+  fontFamily: '"Source Serif 4", "Georgia", "Times New Roman", serif',
+  fontFamilyMonospace:
+    'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  headings: {
+    fontFamily: '"Playfair Display", "Georgia", "Times New Roman", serif',
+    fontWeight: "700",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "2.5rem", lineHeight: "1.15" },
+      h2: { fontSize: "1.75rem", lineHeight: "1.2" },
+      h3: { fontSize: "1.375rem", lineHeight: "1.3" },
+      h4: { fontSize: "1.125rem", lineHeight: "1.4" },
+      h5: { fontSize: "1rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.875rem", lineHeight: "1.5" },
+    },
+  },
+  defaultRadius: "sm",
+  radius: {
+    xs: "2px",
+    sm: "3px",
+    md: "4px",
+    lg: "6px",
+    xl: "8px",
+  },
+  shadows: {
+    xs: "0 1px 2px rgba(0, 0, 0, 0.06)",
+    sm: "0 1px 3px rgba(0, 0, 0, 0.08)",
+    md: "0 2px 6px rgba(0, 0, 0, 0.08)",
+    lg: "0 4px 12px rgba(0, 0, 0, 0.1)",
+    xl: "0 8px 24px rgba(0, 0, 0, 0.1)",
+  },
+  colors: {
+    // Primary — ink black with warm tint
+    ink: [
+      "#f5f3f0",
+      "#e8e4de",
+      "#d4cec5",
+      "#b5ad9f",
+      "#8c8272",
+      "#6b6050",
+      "#4a4035",
+      "#332b22",
+      "#1f1812",
+      "#0d0a07",
+    ],
+    // Accent — muted burgundy
+    burgundy: [
+      "#faf0f0",
+      "#f0d4d4",
+      "#e0adad",
+      "#cc8585",
+      "#b35e5e",
+      "#944545",
+      "#763636",
+      "#5a2828",
+      "#3d1b1b",
+      "#220f0f",
+    ],
+    // Warm grays — paper-tinted
+    gray: [
+      "#faf9f7",
+      "#f0eee9",
+      "#e0dcd5",
+      "#c8c2b8",
+      "#a8a194",
+      "#8a8273",
+      "#6b6456",
+      "#504a3f",
+      "#36322b",
+      "#1e1b17",
+    ],
+    // Dark palette — warm charcoal
+    dark: [
+      "#d5d2cd",
+      "#aba59c",
+      "#817a6e",
+      "#5e584e",
+      "#46413a",
+      "#36322c",
+      "#2a2721",
+      "#201d19",
+      "#171411",
+      "#0d0b09",
+    ],
+  },
+
+  components: {
+    Button: Button.extend({
+      defaultProps: {
+        fw: 600,
+      },
+      styles: {
+        root: {
+          letterSpacing: "0.02em",
+        },
+      },
+    }),
+
+    ActionIcon: ActionIcon.extend({
+      styles: {
+        root: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Paper: Paper.extend({
+      styles: {
+        root: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Card: Card.extend({
+      styles: {
+        root: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    TextInput: TextInput.extend({
+      styles: {
+        input: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Badge: Badge.extend({
+      defaultProps: {
+        fw: 600,
+        variant: "outline",
+      },
+      styles: {
+        root: {
+          fontFamily:
+            '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+          letterSpacing: "0.04em",
+          textTransform: "uppercase" as const,
+          fontSize: "0.65rem",
+        },
+      },
+    }),
+  },
+};

package/src/core/atoms/themes/monochrome.ts

@@ -0,0 +1,197 @@
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Card,
+  Paper,
+  TextInput,
+} from "@mantine/core";
+import type { AlephaTheme } from "../../interfaces/AlephaTheme.ts";
+
+/**
+ * Monochrome theme.
+ *
+ * Pure black and white. No color. Bold typography does all the heavy lifting.
+ * A design-school statement piece — minimalist color, maximalist type.
+ */
+export const monochromeTheme: AlephaTheme = {
+  name: "Monochrome",
+  description: "Pure black and white — zero color, maximum typography",
+  primaryColor: "mono",
+  primaryShade: { light: 8, dark: 1 },
+  autoContrast: true,
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+  fontFamilyMonospace:
+    'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  headings: {
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+    fontWeight: "800",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "2.25rem", lineHeight: "1.15" },
+      h2: { fontSize: "1.625rem", lineHeight: "1.25" },
+      h3: { fontSize: "1.25rem", lineHeight: "1.35" },
+      h4: { fontSize: "1.0625rem", lineHeight: "1.45" },
+      h5: { fontSize: "0.9375rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.8125rem", lineHeight: "1.5" },
+    },
+  },
+  defaultRadius: "0",
+  radius: {
+    xs: "0",
+    sm: "0",
+    md: "0",
+    lg: "0",
+    xl: "2px",
+  },
+  shadows: {
+    xs: "0 1px 2px rgba(0, 0, 0, 0.08)",
+    sm: "0 1px 4px rgba(0, 0, 0, 0.1)",
+    md: "0 2px 8px rgba(0, 0, 0, 0.12)",
+    lg: "0 4px 16px rgba(0, 0, 0, 0.14)",
+    xl: "0 8px 32px rgba(0, 0, 0, 0.16)",
+  },
+  colors: {
+    // Primary — pure grayscale
+    mono: [
+      "#f5f5f5",
+      "#e0e0e0",
+      "#c0c0c0",
+      "#a0a0a0",
+      "#808080",
+      "#606060",
+      "#404040",
+      "#282828",
+      "#141414",
+      "#000000",
+    ],
+    // Gray — identical to mono for consistency
+    gray: [
+      "#f5f5f5",
+      "#e5e5e5",
+      "#cccccc",
+      "#b0b0b0",
+      "#909090",
+      "#707070",
+      "#555555",
+      "#3a3a3a",
+      "#252525",
+      "#121212",
+    ],
+    // "Colors" are all grayscale — no hue anywhere
+    blue: [
+      "#f5f5f5",
+      "#e0e0e0",
+      "#c0c0c0",
+      "#a0a0a0",
+      "#808080",
+      "#606060",
+      "#404040",
+      "#282828",
+      "#141414",
+      "#000000",
+    ],
+    green: [
+      "#f5f5f5",
+      "#e0e0e0",
+      "#c0c0c0",
+      "#a0a0a0",
+      "#808080",
+      "#606060",
+      "#404040",
+      "#282828",
+      "#141414",
+      "#000000",
+    ],
+    red: [
+      "#f5f5f5",
+      "#e0e0e0",
+      "#c0c0c0",
+      "#a0a0a0",
+      "#808080",
+      "#606060",
+      "#404040",
+      "#282828",
+      "#141414",
+      "#000000",
+    ],
+    // Dark palette — true blacks
+    dark: [
+      "#d0d0d0",
+      "#a0a0a0",
+      "#707070",
+      "#505050",
+      "#383838",
+      "#282828",
+      "#1c1c1c",
+      "#141414",
+      "#0a0a0a",
+      "#000000",
+    ],
+  },
+
+  components: {
+    Button: Button.extend({
+      defaultProps: {
+        fw: 700,
+      },
+      styles: {
+        root: {
+          border: "2px solid currentColor",
+          letterSpacing: "0.03em",
+          textTransform: "uppercase" as const,
+          fontSize: "0.8125rem",
+        },
+      },
+    }),
+
+    ActionIcon: ActionIcon.extend({
+      styles: {
+        root: {
+          border: "2px solid currentColor",
+        },
+      },
+    }),
+
+    Paper: Paper.extend({
+      styles: {
+        root: {
+          border: "2px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Card: Card.extend({
+      styles: {
+        root: {
+          border: "2px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    TextInput: TextInput.extend({
+      styles: {
+        input: {
+          border: "2px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Badge: Badge.extend({
+      defaultProps: {
+        fw: 700,
+        variant: "outline",
+      },
+      styles: {
+        root: {
+          textTransform: "uppercase" as const,
+          letterSpacing: "0.06em",
+          fontSize: "0.65rem",
+          border: "2px solid currentColor",
+        },
+      },
+    }),
+  },
+};