@alepha/ui 0.18.1 → 0.18.3

package/src/core/components/Flex.tsx

@@ -29,10 +29,71 @@ export interface FlexProps extends MantineFlexProps {
    * Shorthand for direction="column".
    */
   col?: boolean;
+
+  /**
+   * Set ground to `var(--alepha-ground)`.
+   */
+  ground?: boolean;
+
+  /**
+   * Set ground to `var(--alepha-surface)`.
+   */
+  surface?: boolean;
+
+  /**
+   * Set ground to `var(--alepha-elevated)`.
+   */
+  elevated?: boolean;
+
+  /**
+   * Add rounded corners to the container. If `true`, a default border radius will be applied. You can also specify a custom border radius value (e.g., "sm", "md", "lg", or any valid CSS border-radius value).
+   */
+  rounded?: boolean | number | string;
+
+  /**
+   * Add a border to the container. The color will be determined by the current theme.
+   */
+  bordered?: boolean;
+
+  /**
+   * Add a top border only.
+   */
+  borderedTop?: boolean;
+
+  /**
+   * Add a bottom border only.
+   */
+  borderedBottom?: boolean;
+
+  /**
+   * Add a shadow to the container. The intensity will be determined by the current theme.
+   */
+  shadowed?: boolean | number | string;
+
+  /**
+   * Set overflow to "auto" to enable scrolling when content overflows the container.
+   */
+  overflow?: boolean;
 }
 
 const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
-  const { fill, center, centerX, centerY, col, ...rest } = props;
+  const {
+    fill,
+    center,
+    centerX,
+    centerY,
+    col,
+    ground,
+    surface,
+    elevated,
+    rounded,
+    bordered,
+    borderedTop,
+    borderedBottom,
+    shadowed,
+    overflow,
+    ...rest
+  } = props;
 
   if (fill) {
     rest.flex ??= 1;
@@ -55,6 +116,45 @@ const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
     rest.align ??= "center";
   }
 
+  if (ground) {
+    rest.bg = "var(--alepha-ground)";
+  } else if (surface) {
+    rest.bg = "var(--alepha-surface)";
+  } else if (elevated) {
+    rest.bg = "var(--alepha-elevated)";
+  }
+
+  if (rounded) {
+    rest.bdrs = rounded === true ? "md" : rounded;
+  }
+
+  if (bordered) {
+    rest.bd = "1px solid var(--alepha-border)";
+  }
+
+  if (borderedTop) {
+    rest.style = {
+      borderTop: "1px solid var(--alepha-border)",
+      ...((rest.style as object) ?? {}),
+    };
+  }
+
+  if (borderedBottom) {
+    rest.style = {
+      borderBottom: "1px solid var(--alepha-border)",
+      ...((rest.style as object) ?? {}),
+    };
+  }
+
+  if (shadowed) {
+    rest.className =
+      `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
+  }
+
+  if (overflow) {
+    rest.className = `${rest.className ?? ""} overflow-auto`.trim();
+  }
+
   return <MantineFlex ref={ref} {...rest} />;
 });
 

package/src/core/components/Text.tsx

@@ -109,7 +109,7 @@ const Text = forwardRef<HTMLParagraphElement, TextProps>((props, ref) => {
   }
 
   if (small) {
-    rest.size ??= "sm";
+    rest.size ??= "xs";
   }
 
   if (uppercase) {

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

@@ -8,7 +8,6 @@ import {
   type MenuItemProps,
   type MenuProps,
   type MenuTargetProps,
-  ThemeIcon,
   type ThemeIconProps,
   Tooltip,
   type TooltipProps,
@@ -113,6 +112,9 @@ export interface ActionMenuConfig {
 export interface ActionCommonProps extends ButtonProps {
   children?: ReactNode;
 
+  /**
+   * If set, the button will show only the icon on smaller screens and reveal the text from the specified breakpoint and up.
+   */
   textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
@@ -140,6 +142,11 @@ export interface ActionCommonProps extends ButtonProps {
    */
   icon?: ReactNode | ComponentType;
 
+  /**
+   * Size of the icon. Can be a number (pixels) or a string (e.g., "1em", "20px").
+   */
+  iconSize?: number | string;
+
   /**
    * Additional props to pass to the ThemeIcon wrapping the icon.
    */
@@ -149,6 +156,11 @@ export interface ActionCommonProps extends ButtonProps {
    * Visual intent of the action button.
    */
   intent?: "primary" | "success" | "danger" | "warning" | "info" | "none";
+
+  /**
+   * Active state styling for navigation actions. When set, the button will apply active styles based on the current route.
+   */
+  variant?: ButtonProps["variant"] | "minimal";
 }
 
 export type ActionProps = ActionCommonProps &
@@ -162,95 +174,21 @@ export type ActionProps = ActionCommonProps &
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-// Helper function to render menu items recursively
-const ActionMenuItem = (props: {
-  item: ActionMenuItem;
-  index: number;
-}): ReactNode => {
-  const { item, index } = props;
-
-  const router = useRouter();
-  const action = useAction(
-    {
-      handler: async (e: any) => {
-        await item.onClick?.();
-      },
-    },
-    [item.onClick],
-  );
-
-  // Render divider
-  if (item.type === "divider") {
-    return <Menu.Divider key={index} />;
-  }
-
-  // Render label
-  if (item.type === "label") {
-    return <Menu.Label key={index}>{item.label}</Menu.Label>;
-  }
-
-  // Render submenu if it has children
-  if (item.children && item.children.length > 0) {
-    return (
-      <Menu key={index} trigger="hover" position="right-start" offset={2}>
-        <Menu.Target>
-          <Menu.Item
-            leftSection={item.icon}
-            rightSection={<IconChevronRight size={14} />}
-          >
-            {item.label}
-          </Menu.Item>
-        </Menu.Target>
-        <Menu.Dropdown>
-          {item.children.map((child, childIndex) => (
-            <ActionMenuItem item={child} index={childIndex} key={childIndex} />
-          ))}
-        </Menu.Dropdown>
-      </Menu>
-    );
-  }
-
-  const menuItemProps: MenuItemProps & ButtonHTMLAttributes<unknown> = {};
-  if (props.item.onClick) {
-    menuItemProps.onClick = action.run;
-  } else if (props.item.href) {
-    Object.assign(menuItemProps, router.anchor(props.item.href));
-  }
-
-  // render regular menu item
-  return (
-    <Menu.Item
-      key={index}
-      leftSection={item.icon}
-      onClick={item.onClick}
-      color={item.color}
-      rightSection={
-        item.active ? (
-          <ThemeIcon size={"xs"} variant={"transparent"}>
-            <IconCheck />
-          </ThemeIcon>
-        ) : undefined
-      }
-      {...menuItemProps}
-    >
-      {item.label}
-    </Menu.Item>
-  );
-};
+// ---------------------------------------------------------------------------------------------------------------------
 
 const ActionButton = (_props: ActionProps) => {
   const theme = useMantineTheme();
   const props = { ..._props };
-  const { tooltip, menu, icon, ...restProps } = props;
 
-  if (props.variant === "subtle" || props.variant === "outline") {
-    restProps.color ??= "gray";
+  if (props.variant === "minimal") {
+    //props.variant = "default";
+    //props.bd = 0;
   }
 
+  const { tooltip, menu, icon, iconSize, ...restProps } = props;
+
   if (props.intent) {
-    if (props.intent === "none") {
-      restProps.color ??= "gray";
-    } else if (props.intent === "primary") {
+    if (props.intent === "primary") {
       restProps.color ??= theme.primaryColor;
     } else if (props.intent === "success") {
       restProps.c ??= "white";
@@ -268,15 +206,16 @@ const ActionButton = (_props: ActionProps) => {
 
   if (props.icon) {
     const sizes = ui.sizes.icon as Record<string, number>;
+    const iconSize = props.iconSize ?? sizes[props.size || "sm"];
     const icon = isComponentType(props.icon) ? (
-      <props.icon size={sizes[props.size || "md"]} />
+      <props.icon size={iconSize} />
     ) : (
       <span>{props.icon as ReactNode}</span>
     );
 
     if (!props.children) {
       restProps.children = Children.only(icon);
-      restProps.px ??= "xs"; // TODO: change based on props.size ?
+      restProps.p ??= 8;
     } else {
       restProps.leftSection = icon;
     }
@@ -302,7 +241,13 @@ const ActionButton = (_props: ActionProps) => {
           </ActionButton>
         </Flex>
         <Flex w={"100%"} hiddenFrom={textVisibleFrom}>
-          <ActionButton px={"xs"} {...rest} tooltip={tooltip} menu={menu}>
+          <ActionButton
+            px={"xs"}
+            {...rest}
+            aria-label={typeof children === "string" ? children : undefined}
+            tooltip={tooltip}
+            menu={menu}
+          >
             {leftSection}
           </ActionButton>
         </Flex>
@@ -568,6 +513,7 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
     propsActive,
     routerGoOptions,
     onClick: propsOnClick,
+    anchorProps: buttonAnchorProps,
     anchor,
     ...buttonProps
   } = props as ActionNavigationButtonProps & { onClick?: (e: any) => void };
@@ -592,13 +538,13 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
     buttonProps.className = `${className} ${classNameActive}`.trim();
   }
 
-  if (props.anchorProps || anchor) {
+  if (buttonAnchorProps || anchor) {
     return (
       <Anchor
         component={"a"}
         {...anchorProps}
         {...(buttonProps as AnchorProps)}
-        {...props.anchorProps}
+        {...buttonAnchorProps}
         onClick={combinedOnClick}
       >
         {props.children}
@@ -643,3 +589,79 @@ const ActionHrefButton = (props: ActionNavigationButtonProps) => {
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
+
+// Helper function to render menu items recursively
+const ActionMenuItem = (props: {
+  item: ActionMenuItem;
+  index: number;
+}): ReactNode => {
+  const { item, index } = props;
+
+  const router = useRouter();
+  const action = useAction(
+    {
+      handler: async (e: any) => {
+        await item.onClick?.();
+      },
+    },
+    [item.onClick],
+  );
+
+  // Render divider
+  if (item.type === "divider") {
+    return <Menu.Divider key={index} />;
+  }
+
+  // Render label
+  if (item.type === "label") {
+    return <Menu.Label key={index}>{item.label}</Menu.Label>;
+  }
+
+  // Render submenu if it has children
+  if (item.children && item.children.length > 0) {
+    return (
+      <Menu key={index} trigger="hover" position="right-start" offset={2}>
+        <Menu.Target>
+          <Menu.Item
+            leftSection={item.icon}
+            rightSection={<IconChevronRight size={14} />}
+          >
+            {item.label}
+          </Menu.Item>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {item.children.map((child, childIndex) => (
+            <ActionMenuItem item={child} index={childIndex} key={childIndex} />
+          ))}
+        </Menu.Dropdown>
+      </Menu>
+    );
+  }
+
+  const menuItemProps: MenuItemProps & ButtonHTMLAttributes<unknown> = {};
+  if (props.item.onClick) {
+    menuItemProps.onClick = action.run;
+  } else if (props.item.href) {
+    Object.assign(menuItemProps, router.anchor(props.item.href));
+  }
+
+  // render regular menu item
+  return (
+    <Menu.Item
+      key={index}
+      leftSection={
+        item.icon ??
+        (item.active ? (
+          <IconCheck size={ui.sizes.icon.sm} />
+        ) : (
+          <Flex w={ui.sizes.icon.sm} />
+        ))
+      }
+      onClick={item.onClick}
+      color={item.color}
+      {...menuItemProps}
+    >
+      {item.label}
+    </Menu.Item>
+  );
+};

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

@@ -20,14 +20,14 @@ const DarkModeButton = (props: Partial<ActionProps>) => {
     setColorScheme(current === "dark" ? "light" : "dark");
   };
 
-  const size = props.size ?? "md";
+  const size = props.size ?? "sm";
   const iconSize =
-    (ui.sizes.icon as Record<string, number>)[size] ?? ui.sizes.icon.md;
+    (ui.sizes.icon as Record<string, number>)[size] ?? ui.sizes.icon.sm;
 
   return (
     <ActionButton
       onClick={toggleColorScheme}
-      variant={props.variant ?? "subtle"}
+      variant={props.variant ?? "default"}
       size={size}
       aria-label="Toggle color scheme"
       icon={

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

@@ -6,7 +6,7 @@ const LanguageButton = (props: Partial<ActionProps>) => {
   const i18n = useI18n();
   return (
     <ActionButton
-      variant={"subtle"}
+      variant={"default"}
       icon={IconLanguage}
       menu={{
         items: i18n.languages.map((lang) => ({

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

@@ -20,8 +20,7 @@ const OmnibarButton = (props: OmnibarButtonProps) => {
       <ActionButton
         variant={"subtle"}
         onClick={spotlight.open}
-        radius={"md"}
-        icon={<IconSearch size={16} />}
+        icon={IconSearch}
         tooltip={{ label: "Search", position: "right" }}
         {...props.actionProps}
       />

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

@@ -1,28 +1,57 @@
 import { IconPalette } from "@tabler/icons-react";
 import { useStore } from "alepha/react";
 import { alephaThemeListAtom } from "../../atoms/alephaThemeListAtom.ts";
+import { useDialog } from "../../hooks/useDialog.ts";
 import { useTheme } from "../../hooks/useTheme.ts";
+import type { ActionMenuItem } from "./ActionButton.tsx";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
+import ThemeExpertModal from "./ThemeExpertModal.tsx";
 
-const ThemeButton = (props: Partial<ActionProps>) => {
+type ThemeButtonProps = Partial<ActionProps> & {
+  /**
+   * Enable expert mode with color, radius, and font customization.
+   */
+  expert?: boolean;
+};
+
+const ThemeButton = (props: ThemeButtonProps) => {
+  const { expert, ...actionProps } = props;
   const [theme, setTheme] = useTheme();
   const themeList = useStore(alephaThemeListAtom)[0];
+  const dialog = useDialog();
+
+  const items: ActionMenuItem[] = themeList.map((it, index) => ({
+    label: it.name,
+    onClick: () =>
+      setTheme({
+        index,
+      }),
+    active: theme.name === it.name,
+  }));
+
+  if (expert) {
+    items.push(
+      { type: "divider" },
+      {
+        label: "Customize...",
+        onClick: () => {
+          dialog.open({
+            title: "Customize Theme",
+            content: <ThemeExpertModal />,
+          });
+        },
+      },
+    );
+  }
 
   return (
     <ActionButton
-      variant="subtle"
+      variant="default"
       icon={IconPalette}
       menu={{
-        items: themeList.map((it, index) => ({
-          label: it.name,
-          onClick: () =>
-            setTheme({
-              index,
-            }),
-          active: theme.name === it.name,
-        })),
+        items,
       }}
-      {...props}
+      {...actionProps}
     />
   );
 };

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;