@alepha/ui 0.18.0 → 0.18.2

package/src/core/providers/ThemeProvider.ts

@@ -1,8 +1,12 @@
 import { $inject, Alepha, AlephaError } from "alepha";
-import { $head } from "alepha/react/head";
+import { $head, BrowserHeadProvider } from "alepha/react/head";
 import { $cookie } from "alepha/server/cookies";
 import { alephaThemeAtom } from "../atoms/alephaThemeAtom.ts";
 import { alephaThemeListAtom } from "../atoms/alephaThemeListAtom.ts";
+import {
+  type AlephaThemeOverrides,
+  alephaThemeOverridesAtom,
+} from "../atoms/alephaThemeOverridesAtom.ts";
 import { defaultTheme } from "../atoms/themes/default.ts";
 import type { AlephaTheme } from "../interfaces/AlephaTheme.ts";
 
@@ -14,6 +18,12 @@ export class ThemeProvider {
     ttl: [1, "year"],
   });
 
+  protected readonly overridesCookie = $cookie({
+    name: "themeOverrides",
+    schema: alephaThemeOverridesAtom.schema,
+    ttl: [1, "year"],
+  });
+
   protected readonly head = $head(() => {
     const theme = this.getTheme();
     if (!theme || !theme.name) {
@@ -21,8 +31,9 @@ export class ThemeProvider {
     }
     return {
       htmlAttributes: {
-        "data-theme": theme.name,
+        "data-theme": this.slugify(theme.name),
       },
+      ...theme.head,
     };
   });
 
@@ -38,23 +49,112 @@ export class ThemeProvider {
     this.cookie.set({ index });
     this.alepha.store.set(alephaThemeAtom, { index });
 
-    if (typeof document === "undefined") {
+    if (!this.alepha.isBrowser()) {
       return;
     }
 
-    document.documentElement.removeAttribute("data-theme");
+    this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
+  }
 
-    if (newTheme.name) {
-      document.documentElement.setAttribute("data-theme", newTheme.name);
-    }
+  protected slugify(name: string): string {
+    return name.toLowerCase().replace(/\s+/g, "-");
   }
 
+  protected static readonly FONT_SIZE_MULTIPLIERS: Record<string, number> = {
+    xs: 0.85,
+    sm: 0.925,
+    md: 1,
+    lg: 1.1,
+    xl: 1.25,
+  };
+
+  protected static readonly SCALE_VALUES: Record<string, number> = {
+    xs: 0.85,
+    sm: 0.925,
+    md: 1,
+    lg: 1.1,
+    xl: 1.25,
+  };
+
+  protected static readonly DEFAULT_FONT_SIZES: Record<string, string> = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+  };
+
   public getTheme() {
     const index = this.getThemeIndex();
     const list = this.alepha.store.get(
       alephaThemeListAtom,
     ) as Array<AlephaTheme>;
-    return list[index] || list[0] || defaultTheme;
+    const base = list[index] || list[0] || defaultTheme;
+    const overrides = this.getThemeOverrides();
+
+    if (
+      !overrides.primaryColor &&
+      !overrides.radius &&
+      !overrides.fontFamily &&
+      !overrides.fontSize &&
+      !overrides.scale
+    ) {
+      return base;
+    }
+
+    const merged = {
+      ...base,
+      ...(overrides.primaryColor && { primaryColor: overrides.primaryColor }),
+      ...(overrides.radius && { defaultRadius: overrides.radius }),
+      ...(overrides.fontFamily && { fontFamily: overrides.fontFamily }),
+      ...(overrides.scale &&
+        overrides.scale !== "md" && {
+          scale: ThemeProvider.SCALE_VALUES[overrides.scale] ?? 1,
+        }),
+    };
+
+    if (overrides.fontSize && overrides.fontSize !== "md") {
+      const multiplier =
+        ThemeProvider.FONT_SIZE_MULTIPLIERS[overrides.fontSize] ?? 1;
+      const baseSizes =
+        (base.fontSizes as Record<string, string> | undefined) ??
+        ThemeProvider.DEFAULT_FONT_SIZES;
+      merged.fontSizes = Object.fromEntries(
+        Object.entries(baseSizes).map(([key, val]) => [
+          key,
+          `${(Number.parseFloat(String(val)) * multiplier).toFixed(4)}rem`,
+        ]),
+      ) as typeof merged.fontSizes;
+    }
+
+    return merged;
+  }
+
+  public setThemeOverrides(overrides: AlephaThemeOverrides) {
+    this.overridesCookie.set(overrides);
+    this.alepha.store.set(alephaThemeOverridesAtom, overrides);
+
+    if (!this.alepha.isBrowser()) {
+      return;
+    }
+
+    this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
+  }
+
+  public getThemeOverrides(): AlephaThemeOverrides {
+    try {
+      return (
+        this.overridesCookie.get() ??
+        this.alepha.store.get(alephaThemeOverridesAtom) ??
+        {}
+      );
+    } catch {
+      return this.alepha.store.get(alephaThemeOverridesAtom) ?? {};
+    }
+  }
+
+  public resetThemeOverrides() {
+    this.setThemeOverrides({});
   }
 
   protected getThemeIndex() {

package/src/core/services/DialogService.tsx

@@ -73,15 +73,22 @@ export class DialogService {
    */
   public alert(options?: AlertDialogOptions): Promise<void> {
     return new Promise((resolve) => {
+      let resolved = false;
+      const done = () => {
+        if (resolved) return;
+        resolved = true;
+        resolve();
+      };
       const modalId = this.open({
         ...options,
         title: options?.title || "Alert",
+        onClose: done,
         content: (
           <AlertDialog
             options={options}
             onClose={() => {
               this.close(modalId);
-              resolve();
+              done();
             }}
           />
         ),
@@ -94,17 +101,24 @@ export class DialogService {
    */
   public confirm(options?: ConfirmDialogOptions): Promise<boolean> {
     return new Promise((resolve) => {
+      let resolved = false;
+      const done = (confirmed: boolean) => {
+        if (resolved) return;
+        resolved = true;
+        resolve(confirmed);
+      };
       const modalId = this.open({
         ...options,
         title: options?.title || "Confirm",
         closeOnClickOutside: false,
         closeOnEscape: false,
+        onClose: () => done(false),
         content: (
           <ConfirmDialog
             options={options}
             onConfirm={(confirmed) => {
               this.close(modalId);
-              resolve(confirmed);
+              done(confirmed);
             }}
           />
         ),
@@ -117,17 +131,24 @@ export class DialogService {
    */
   public prompt(options?: PromptDialogOptions): Promise<string | null> {
     return new Promise((resolve) => {
+      let resolved = false;
+      const done = (value: string | null) => {
+        if (resolved) return;
+        resolved = true;
+        resolve(value);
+      };
       const modalId = this.open({
         ...options,
         title: options?.title || "Input",
         closeOnClickOutside: false,
         closeOnEscape: false,
+        onClose: () => done(null),
         content: (
           <PromptDialog
             options={options}
             onSubmit={(value) => {
               this.close(modalId);
-              resolve(value);
+              done(value);
             }}
           />
         ),

package/src/core/styles.css

@@ -8,9 +8,9 @@
 @import "./json/components/JsonViewer.css";
 
 :root {
-  --alepha-background-light: var(--mantine-color-gray-1);
-  --alepha-background-dark: var(--mantine-color-dark-9);
-  --alepha-background: var(--alepha-background-light);
+  --alepha-ground-light: var(--mantine-color-gray-1);
+  --alepha-ground-dark: var(--mantine-color-dark-9);
+  --alepha-ground: var(--alepha-ground-light);
 
   --alepha-surface-light: var(--mantine-color-gray-0);
   --alepha-surface-dark: var(--mantine-color-dark-8);
@@ -31,32 +31,46 @@
   --alepha-text: var(--alepha-text-light);
 }
 
-/*#root {*/
-/*  display: flex;*/
-/*  background-color: var(--alepha-background);*/
-/*  color: var(--alepha-text);*/
-/*  min-height: 100dvh;*/
-/*  flex-direction: column;*/
-/*}*/
-
 /* ------------------------------------------------------------------------------------------------------------------ */
 
 [data-mantine-color-scheme="dark"] {
   --alepha-surface: var(--alepha-surface-dark);
   --alepha-elevated: var(--alepha-elevated-dark);
   --alepha-elevated-hover: var(--alepha-elevated-hover-dark);
-  --alepha-background: var(--alepha-background-dark);
+  --alepha-ground: var(--alepha-ground-dark);
   --alepha-text: var(--alepha-text-dark);
 }
 
 /* ------------------------------------------------------------------------------------------------------------------ */
 
+.shadow-xs {
+  box-shadow: var(--mantine-shadow-xs);
+}
+
+.shadow-sm {
+  box-shadow: var(--mantine-shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--mantine-shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--mantine-shadow-lg);
+}
+
+.shadow-xl {
+  box-shadow: var(--mantine-shadow-xl);
+}
+
 .overflow-auto {
   overflow: auto;
   scrollbar-color: var(--alepha-text-muted) transparent;
   scrollbar-width: thin;
 }
 
+/* ------------------------------------------------------------------------------------------------------------------ */
+
 /* Sidebar scroll area - subtle scrollbar that appears on hover */
 .alepha-sidebar-scroll {
   overflow-y: auto;
@@ -96,17 +110,6 @@
   background: var(--mantine-color-dark-4);
 }
 
-/* ------------------------------------------------------------------------------------------------------------------ */
-/* Sidebar Transitions */
-
-.alepha-sidebar-navbar {
-  transition: width 0.2s ease-in-out;
-}
-
-.alepha-sidebar-main {
-  transition: padding-left 0.2s ease-in-out;
-}
-
 /* ------------------------------------------------------------------------------------------------------------------ */
 /* Modal Customizations */
 

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

@@ -1,24 +1,25 @@
-import { ActionButton, ui } from "@alepha/ui";
-import {
-  Checkbox,
-  Drawer,
-  Flex,
-  Table,
-  Text,
-  UnstyledButton,
-} from "@mantine/core";
+import { ActionButton, Flex, isComponentType, Text, ui } from "@alepha/ui";
+import { Checkbox, Drawer, Table, UnstyledButton } from "@mantine/core";
 import {
   IconArrowDown,
   IconArrowsSort,
   IconArrowUp,
   IconChevronDown,
   IconChevronRight,
+  IconDotsVertical,
 } 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, useRef, useState } from "react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import type {
   ColumnVisibility,
   DataTableColumnContext,
@@ -318,7 +319,8 @@ const DataTable = <T extends object, Filters extends TObject>(
   const totalColumns =
     visibleColumns.length +
     (panelConfig ? 1 : 0) +
-    (props.withCheckbox ? 1 : 0);
+    (props.withCheckbox ? 1 : 0) +
+    (props.rowActions ? 1 : 0);
 
   // Checkbox header column
   const checkboxHeader = props.withCheckbox ? (
@@ -351,7 +353,9 @@ const DataTable = <T extends object, Filters extends TObject>(
         }}
       >
         <Flex align="center" gap={4}>
-          <Text size="xs">{col.label}</Text>
+          <Text bold muted size="xs">
+            {col.label}
+          </Text>
           {col.sortable && (
             <Flex c="dimmed">
               {sortDir === "asc" && <IconArrowUp size={ui.sizes.icon.sm} />}
@@ -424,45 +428,58 @@ const DataTable = <T extends object, Filters extends TObject>(
             alepha,
           } as DataTableColumnContext<Filters>;
 
-          if (col.actions) {
-            const rowActions = col
-              .actions(item as T, ctx)
-              .filter((a) => a.visible !== false);
+          return (
+            <Table.Td key={key} style={col.fit ? FIT_STYLE : undefined}>
+              {col.value?.(item as T, ctx)}
+            </Table.Td>
+          );
+        })}
+        {props.rowActions &&
+          (() => {
+            const ctx = {
+              index,
+              form: form as unknown as FormModel<Filters>,
+              alepha,
+            } as DataTableColumnContext<Filters>;
+            const actions = props.rowActions!(item as T, ctx).filter(
+              (a) => a.visible !== false,
+            );
+            if (actions.length === 0) return <Table.Td style={FIT_STYLE} />;
             return (
               <Table.Td
                 py={2}
                 px={4}
-                key={key}
-                style={col.fit ? FIT_STYLE : undefined}
+                style={FIT_STYLE}
                 onClick={(e) => e.stopPropagation()}
               >
-                <Flex gap={4}>
-                  {rowActions.map(({ visible: _, ...actionProps }, i) => (
-                    <ActionButton
-                      key={i}
-                      variant="subtle"
-                      size="xs"
-                      preventDefault
-                      h={20}
-                      {...actionProps}
-                    />
-                  ))}
-                </Flex>
+                <ActionButton
+                  variant="subtle"
+                  size="xs"
+                  icon={IconDotsVertical}
+                  menu={{
+                    items: actions.map((action) => {
+                      const Icon = action.icon;
+                      return {
+                        label:
+                          action.label ??
+                          (typeof action.tooltip === "string"
+                            ? action.tooltip
+                            : undefined),
+                        icon:
+                          Icon && isComponentType(Icon) ? (
+                            <Icon size={14} />
+                          ) : (
+                            (Icon as ReactNode)
+                          ),
+                        onClick: (action as any).onClick,
+                        color: action.color,
+                      };
+                    }),
+                  }}
+                />
               </Table.Td>
             );
-          }
-
-          return (
-            <Table.Td
-              py={2}
-              px={4}
-              key={key}
-              style={col.fit ? FIT_STYLE : undefined}
-            >
-              {col.value?.(item as T, ctx)}
-            </Table.Td>
-          );
-        })}
+          })()}
       </Table.Tr>,
     ];
 
@@ -485,106 +502,119 @@ const DataTable = <T extends object, Filters extends TObject>(
   }, [props.filters, form.options.schema]);
 
   return (
-    <Flex flex={1} p={0} bdrs="sm" direction="column">
-      <DataTableToolbar
-        columns={props.columns}
-        filters={props.filters}
-        columnVisibility={columnVisibility}
-        filterVisibility={filterVisibility}
-        onColumnVisibilityChange={setColumnVisibility}
-        onFilterVisibilityChange={setFilterVisibility}
-        actions={props.actions}
-        onRefresh={() => form.submit()}
-        items={items.content as T[]}
-        withExport={props.withExport}
-        selectedItems={selection.selectedItems}
-        checkboxActions={props.checkboxActions}
-        onClearSelection={selection.clear}
-      />
-
-      {filterSchema && props.filters && (
-        <DataTableFilters
-          schema={filterSchema}
-          form={form as unknown as FormModel<TObject>}
-          typeFormProps={
-            props.typeFormProps as DataTableFiltersProps["typeFormProps"]
-          }
+    <Flex
+      gap={"xs"}
+      flex={1}
+      p={0}
+      direction="column"
+      style={{ overflow: "hidden" }}
+    >
+      <Flex rounded bordered elevated shadowed={"xs"} col>
+        <DataTableToolbar
+          columns={props.columns}
+          filters={props.filters}
+          columnVisibility={columnVisibility}
           filterVisibility={filterVisibility}
+          onColumnVisibilityChange={setColumnVisibility}
+          onFilterVisibilityChange={setFilterVisibility}
+          actions={props.actions}
+          onRefresh={() => form.submit()}
+          items={items.content as T[]}
+          withExport={props.withExport}
+          selectedItems={selection.selectedItems}
+          checkboxActions={props.checkboxActions}
+          onClearSelection={selection.clear}
         />
-      )}
-
-      <Flex className="overflow-auto">
-        <Table
-          aria-label="Data table"
-          withColumnBorders
-          withRowBorders
-          {...props.tableProps}
-        >
-          <Table.Thead
-            style={{
-              position: "sticky",
-              top: 0,
-              zIndex: 1,
-              backgroundColor: "var(--mantine-color-body)",
-            }}
-          >
-            <Table.Tr>
-              {panelConfig && <Table.Th style={{ width: 36 }} />}
-              {checkboxHeader}
-              {head}
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody
-            style={{
-              opacity: form.submitting ? 0.5 : 1,
-              transition: "opacity 150ms ease",
-            }}
+
+        {filterSchema && props.filters && (
+          <DataTableFilters
+            schema={filterSchema}
+            form={form as unknown as FormModel<TObject>}
+            typeFormProps={
+              props.typeFormProps as DataTableFiltersProps["typeFormProps"]
+            }
+            filterVisibility={filterVisibility}
+          />
+        )}
+      </Flex>
+
+      <Flex col rounded bordered elevated shadowed={"xs"}>
+        <Flex className="overflow-auto">
+          <Table
+            aria-label="Data table"
+            withRowBorders
+            highlightOnHover
+            {...props.tableProps}
           >
-            {rows}
-            {items.content.length === 0 && (
+            <Table.Thead
+              style={{
+                position: "sticky",
+                top: 0,
+                zIndex: 1,
+              }}
+            >
               <Table.Tr>
-                <Table.Td
-                  colSpan={totalColumns || 1}
-                  py="xl"
-                  style={{ textAlign: "center" }}
-                >
-                  <Text c="dimmed" size="sm">
-                    {form.submitting ? "Loading…" : "No results"}
-                  </Text>
-                </Table.Td>
+                {panelConfig && <Table.Th style={{ width: 36 }} />}
+                {checkboxHeader}
+                {head}
+                {props.rowActions && <Table.Th style={FIT_STYLE} />}
               </Table.Tr>
-            )}
-          </Table.Tbody>
-        </Table>
-      </Flex>
+            </Table.Thead>
+            <Table.Tbody
+              style={{
+                opacity: form.submitting ? 0.5 : 1,
+                transition: "opacity 150ms ease",
+              }}
+            >
+              {rows}
+              {items.content.length === 0 && (
+                <Table.Tr>
+                  <Table.Td
+                    colSpan={totalColumns || 1}
+                    py="xl"
+                    style={{ textAlign: "center" }}
+                  >
+                    <Text c="dimmed" size="sm">
+                      {form.submitting ? "Loading…" : "No results"}
+                    </Text>
+                  </Table.Td>
+                </Table.Tr>
+              )}
+            </Table.Tbody>
+          </Table>
+        </Flex>
 
-      {props.infinityScroll && <div ref={sentinelRef} />}
-
-      {!props.infinityScroll && (
-        <DataTablePagination
-          page={page}
-          size={size}
-          totalPages={items.page?.totalPages ?? 1}
-          onPageChange={(value) => {
-            form.input.page.set(value - 1);
-          }}
-          onSizeChange={(value) => {
-            form.input.size.set(value);
-          }}
-        />
-      )}
-
-      {drawerConfig && (
-        <Drawer
-          opened={drawerItem !== null}
-          onClose={() => setDrawerItem(null)}
-          position="right"
-          size="xl"
-          {...drawerConfig.props}
-        >
-          {drawerItem && drawerConfig.render(drawerItem)}
-        </Drawer>
-      )}
+        {props.infinityScroll && <div ref={sentinelRef} />}
+
+        {!props.infinityScroll && (
+          <DataTablePagination
+            page={page}
+            size={size}
+            totalPages={items.page?.totalPages ?? 1}
+            totalElements={items.page?.totalElements}
+            offset={items.page?.offset ?? 0}
+            numberOfElements={items.content.length}
+            onPageChange={(value) => {
+              form.input.page.set(value - 1);
+            }}
+            onSizeChange={(value) => {
+              form.input.size.set(value);
+            }}
+          />
+        )}
+
+        {drawerConfig && (
+          <Drawer
+            opened={drawerItem !== null}
+            onClose={() => setDrawerItem(null)}
+            position="right"
+            size="xl"
+            {...drawerConfig.props}
+          >
+            {drawerItem && drawerConfig.render(drawerItem)}
+          </Drawer>
+        )}
+      </Flex>
     </Flex>
   );
 };

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

@@ -47,12 +47,7 @@ const DataTableFilters = ({
   }
 
   return (
-    <Flex
-      w="100%"
-      p="xs"
-      bg={ui.colors.surface}
-      style={{ borderBottom: "1px solid var(--alepha-border)" }}
-    >
+    <Flex w="100%" p="xs" m="xs" bdrs="md" bg={ui.colors.surface}>
       <TypeForm
         size={"xs"}
         {...typeFormProps}