@alepha/ui 0.17.2 → 0.18.1

package/src/admin/components/users/AdminUsers.tsx

@@ -1,31 +1,51 @@
-import { DataTable, Text } from "@alepha/ui";
-import { Badge, Flex } from "@mantine/core";
-import { IconCheck, IconUsersPlus, IconX } from "@tabler/icons-react";
+import { DataTable, Flex, Text, useDialog, useToast } from "@alepha/ui";
+import { Badge } from "@mantine/core";
 import { type Page, t } from "alepha";
-import {
-  type AdminUserController,
-  type UserEntity,
-  users,
-} from "alepha/api/users";
+import type { AdminUserController, UserEntity } from "alepha/api/users";
 import { useClient } from "alepha/react";
 import { useI18n } from "alepha/react/i18n";
 import { useRouter } from "alepha/react/router";
+import { useState } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUsersProps {
   userRealmName?: string;
 }
 
+const createUserSchema = t.object({
+  username: t.optional(
+    t.shortText({
+      minLength: 3,
+      maxLength: 50,
+      pattern: "^[a-zA-Z0-9._-]+$",
+    }),
+  ),
+  email: t.optional(t.email()),
+  phoneNumber: t.optional(t.e164()),
+  firstName: t.optional(t.string()),
+  lastName: t.optional(t.string()),
+  roles: t.optional(t.array(t.string())),
+  enabled: t.optional(t.boolean()),
+  password: t.optional(t.string({ minLength: 8 })),
+});
+
 const AdminUsers = (props: AdminUsersProps) => {
   const client = useClient<AdminUserController>();
   const router = useRouter<AdminRouter>();
   const { l } = useI18n();
+  const dialog = useDialog();
+  const toast = useToast();
+  const [refreshKey, setRefreshKey] = useState(0);
 
   const filters = t.object({
     query: t.optional(
       t.string({
         $control: {
-          query: t.omit(users.schema, ["id", "version"]),
+          query: t.object({
+            email: t.optional(t.email()),
+            enabled: t.optional(t.boolean()),
+            emailVerified: t.optional(t.boolean()),
+          }),
         },
       }),
     ),
@@ -34,14 +54,8 @@ const AdminUsers = (props: AdminUsersProps) => {
   return (
     <Flex flex={1} direction="column">
       <DataTable<UserEntity, typeof filters>
+        key={refreshKey}
         submitOnInit
-        actions={[
-          {
-            icon: IconUsersPlus,
-            href: router.path("adminUserCreate"),
-            label: "Create User",
-          },
-        ]}
         defaultSize={10}
         typeFormProps={{
           skipSubmitButton: true,
@@ -53,27 +67,22 @@ const AdminUsers = (props: AdminUsersProps) => {
           striped: false,
           highlightOnHover: true,
         }}
-        onFilterChange={(key, value, form) => {
+        onFilterChange={(key, _value, form) => {
           if (key === "query") {
             return form.submit();
           }
         }}
         filters={filters}
-        tableTrProps={(item) => {
-          const baseProps: Record<string, any> = {
-            style: { cursor: "pointer" },
-            onClick: () =>
-              router.push("adminUserDetails", {
-                params: { userId: item.id },
-              }),
-          };
-
-          if (!item.enabled) {
-            baseProps.opacity = 0.5;
-          }
-
-          return baseProps;
-        }}
+        tableTrProps={(item) => ({
+          style: {
+            cursor: "pointer",
+            opacity: item.enabled ? 1 : 0.5,
+          },
+          onClick: () =>
+            router.push("adminUserProfile", {
+              params: { userId: item.id },
+            }),
+        })}
         items={async (filters) => {
           const response = await client.findUsers({
             query: {
@@ -81,7 +90,6 @@ const AdminUsers = (props: AdminUsersProps) => {
               userRealmName: props.userRealmName,
             },
           });
-
           return response as Page<UserEntity>;
         }}
         columns={{
@@ -89,40 +97,20 @@ const AdminUsers = (props: AdminUsersProps) => {
             label: "Username",
             value: (item) => (
               <Text size="sm" fw={500}>
-                {item.username || "-"}
+                {item.username || "\u2014"}
               </Text>
             ),
           },
           email: {
             label: "Email",
-            value: (item) => (
-              <Flex gap="xs">
-                <Text size="sm">{item.email || "-"}</Text>
-                {item.email && (
-                  <Badge
-                    size="xs"
-                    variant="light"
-                    color={item.emailVerified ? "green" : "gray"}
-                    leftSection={
-                      item.emailVerified ? (
-                        <IconCheck size={10} />
-                      ) : (
-                        <IconX size={10} />
-                      )
-                    }
-                  >
-                    {item.emailVerified ? "Verified" : "Unverified"}
-                  </Badge>
-                )}
-              </Flex>
-            ),
+            value: (item) => <Text size="sm">{item.email || "\u2014"}</Text>,
           },
           roles: {
             label: "Roles",
             value: (item) => (
               <Flex gap={4}>
                 {item.roles.map((role: string) => (
-                  <Badge key={role} size="xs" variant="outline">
+                  <Badge key={role} size="xs" variant="default">
                     {role}
                   </Badge>
                 ))}
@@ -133,13 +121,9 @@ const AdminUsers = (props: AdminUsersProps) => {
             label: "Status",
             fit: true,
             value: (item) => (
-              <Badge
-                size="sm"
-                variant="light"
-                color={item.enabled ? "green" : "red"}
-              >
+              <Text size="sm" c="dimmed">
                 {item.enabled ? "Active" : "Disabled"}
-              </Badge>
+              </Text>
             ),
           },
           createdAt: {

package/src/admin/index.ts

@@ -11,10 +11,6 @@ export * from "./primitives/$uiAdmin.ts";
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * | Stability | Since | Runtime |
- * |-----------|-------|---------|
- * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
- *
  * Admin panel UI components.
  *
  * **Features:**

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

@@ -164,7 +164,7 @@ const UserButton = (props: UserButtonProps) => {
         items,
       }}
     >
-      {children ?? userLabel}
+      {children}
     </ActionButton>
   );
 };

package/src/auth/index.ts

@@ -19,10 +19,6 @@ export * from "./primitives/$uiAuth.ts";
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * | Stability | Since | Runtime |
- * |-----------|-------|---------|
- * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
- *
  * Authentication UI components.
  *
  * **Features:**

package/src/core/UiRouter.ts

@@ -1,5 +1,5 @@
+import { AlephaMantineProvider } from "@alepha/ui";
 import { $page } from "alepha/react/router";
-import AlephaMantineProvider from "./components/layout/AlephaMantineProvider.tsx";
 
 /**
  * UI Router defining the root page with AlephaMantineProvider.

package/src/core/atoms/alephaSidebarAtom.ts

@@ -4,53 +4,29 @@ export const alephaSidebarAtom = $atom({
   name: "alepha.ui.sidebar",
   schema: t.object({
     /**
-     * Whether the sidebar is opened or closed (mobile).
+     * Whether the sidebar drawer is closed (mobile).
      */
-    opened: t.boolean(),
+    closed: t.boolean(),
     /**
-     * Whether the sidebar is collapsed (narrow) or expanded (wide).
+     * Whether the sidebar is collapsed (desktop icon-only mode).
      */
     collapsed: t.boolean(),
     /**
-     * Current width of the sidebar when expanded (can be changed by resizing).
+     * Width of the sidebar when expanded.
      * @default 300
      */
-    width: t.number(),
-    /**
-     * Default width used when expanding from collapsed state or on hover.
-     * @default 300
-     */
-    defaultWidth: t.number(),
+    expandedWidth: t.number(),
     /**
      * Width of the sidebar when collapsed.
      * @default 78
      */
     collapsedWidth: t.number(),
-    /**
-     * Maximum width when resizing.
-     * @default 500
-     */
-    maxWidth: t.number(),
-    /**
-     * Minimum width before auto-collapse triggers.
-     * @default 150
-     */
-    collapseThreshold: t.number(),
-    /**
-     * Delay in ms before sidebar expands on hover when collapsed.
-     * @default 300
-     */
-    hoverDelay: t.number(),
   }),
   default: {
-    opened: false,
+    closed: true,
     collapsed: false,
-    width: 300,
-    defaultWidth: 300,
+    expandedWidth: 300,
     collapsedWidth: 78,
-    maxWidth: 500,
-    collapseThreshold: 240,
-    hoverDelay: 300,
   },
 });
 

package/src/core/components/{layout/AlephaMantineProvider.tsx → AlephaMantineProvider.tsx}

@@ -13,9 +13,9 @@ import { useEvents } from "alepha/react";
 import { FormValidationError } from "alepha/react/form";
 import { NestedView } from "alepha/react/router";
 import type { ReactNode } from "react";
-import { useTheme } from "../../hooks/useTheme.ts";
-import { useToast } from "../../hooks/useToast.ts";
-import Omnibar, { type OmnibarProps } from "./Omnibar.tsx";
+import { useTheme } from "../hooks/useTheme.ts";
+import { useToast } from "../hooks/useToast.ts";
+import Omnibar, { type OmnibarProps } from "./layout/Omnibar.tsx";
 
 export interface AlephaMantineProviderProps {
   children?: ReactNode;
@@ -72,7 +72,6 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
         {...props.mantine}
         defaultColorScheme={defaultColorScheme}
         theme={{
-          cursorType: "pointer",
           // Spread all theme properties from the selected theme
           ...theme,
           // User overrides take precedence

package/src/core/components/Flex.tsx

@@ -0,0 +1,63 @@
+import {
+  Flex as MantineFlex,
+  type FlexProps as MantineFlexProps,
+} from "@mantine/core";
+import { forwardRef } from "react";
+
+export interface FlexProps extends MantineFlexProps {
+  /**
+   * flex: 1 — fill available space.
+   */
+  fill?: boolean;
+
+  /**
+   * Shorthand for align="center" + justify="center".
+   */
+  center?: boolean;
+
+  /**
+   * Shorthand for justify="center".
+   */
+  centerX?: boolean;
+
+  /**
+   * Shorthand for align="center".
+   */
+  centerY?: boolean;
+
+  /**
+   * Shorthand for direction="column".
+   */
+  col?: boolean;
+}
+
+const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
+  const { fill, center, centerX, centerY, col, ...rest } = props;
+
+  if (fill) {
+    rest.flex ??= 1;
+  }
+
+  if (col) {
+    rest.direction ??= "column";
+  }
+
+  if (center) {
+    rest.align ??= "center";
+    rest.justify ??= "center";
+  }
+
+  if (centerX) {
+    rest.justify ??= "center";
+  }
+
+  if (centerY) {
+    rest.align ??= "center";
+  }
+
+  return <MantineFlex ref={ref} {...rest} />;
+});
+
+Flex.displayName = "Flex";
+
+export default Flex;

package/src/core/components/Heading.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { AlephaIntent } from "../interfaces/AlephaIntent.ts";
+
+export type HeadingProps = {
+  title: string | ReactNode;
+  description?: string | ReactNode;
+  icon?: ReactNode;
+  intent?: AlephaIntent;
+  loading?: boolean;
+  ellipsis?: boolean;
+  fill?: boolean;
+  tag?: string | ReactNode;
+};
+
+const Heading = (props: HeadingProps) => {
+  return <h1>Heading</h1>;
+};
+
+export default Heading;

package/src/core/components/Text.tsx

@@ -0,0 +1,140 @@
+import {
+  Text as MantineText,
+  type TextProps as MantineTextProps,
+} from "@mantine/core";
+import { forwardRef, type ReactNode } from "react";
+import type { AlephaIntent } from "../interfaces/AlephaIntent.ts";
+
+export interface TextProps extends MantineTextProps {
+  children?: ReactNode;
+
+  /**
+   * Semantic color intent for the text.
+   */
+  intent?: AlephaIntent;
+
+  /**
+   * Shorthand for fw={700}.
+   */
+  bold?: boolean;
+
+  /**
+   * Shorthand for fs="italic".
+   */
+  italic?: boolean;
+
+  /**
+   * Shorthand for fw={300}.
+   */
+  light?: boolean;
+
+  /**
+   * Shorthand for c="dimmed".
+   */
+  muted?: boolean;
+
+  /**
+   * Shorthand for size="sm".
+   */
+  small?: boolean;
+
+  /**
+   * Shorthand for tt="uppercase".
+   */
+  uppercase?: boolean;
+
+  /**
+   * Shorthand for tt="capitalize".
+   */
+  capitalize?: boolean;
+
+  /**
+   * Shorthand for ta="center".
+   */
+  center?: boolean;
+
+  /**
+   * Shorthand for ff="monospace".
+   */
+  monospace?: boolean;
+
+  /**
+   * Text with title styles (larger font size, bolder weight).
+   */
+  title?: boolean;
+}
+
+const INTENT_COLORS: Record<AlephaIntent, string> = {
+  primary: "blue",
+  info: "cyan",
+  success: "green",
+  warning: "yellow",
+  danger: "red",
+};
+
+const Text = forwardRef<HTMLParagraphElement, TextProps>((props, ref) => {
+  const {
+    intent,
+    bold,
+    italic,
+    light,
+    muted,
+    small,
+    uppercase,
+    capitalize,
+    center,
+    monospace,
+    title,
+    ...rest
+  } = props;
+
+  if (intent) {
+    rest.c ??= INTENT_COLORS[intent];
+  }
+
+  if (bold) {
+    rest.fw ??= 700;
+  }
+
+  if (light) {
+    rest.fw ??= 300;
+  }
+
+  if (italic) {
+    rest.fs ??= "italic";
+  }
+
+  if (muted) {
+    rest.c ??= "dimmed";
+  }
+
+  if (small) {
+    rest.size ??= "sm";
+  }
+
+  if (uppercase) {
+    rest.tt ??= "uppercase";
+  }
+
+  if (capitalize) {
+    rest.tt ??= "capitalize";
+  }
+
+  if (center) {
+    rest.ta ??= "center";
+  }
+
+  if (monospace) {
+    rest.ff ??= "monospace";
+  }
+
+  if (title) {
+    rest.size ??= "xl";
+  }
+
+  return <MantineText ref={ref} {...rest} />;
+});
+
+Text.displayName = "Text";
+
+export default Text;

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

@@ -328,6 +328,7 @@ const ActionButton = (_props: ActionProps) => {
 
     delete (restProps as any).classNameActive;
     delete (restProps as any).variantActive;
+    delete (restProps as any).propsActive;
 
     if ("action" in restProps && restProps.action) {
       return (
@@ -550,8 +551,10 @@ export interface ActionNavigationButtonProps extends ButtonProps {
   routerGoOptions?: RouterPushOptions;
   classNameActive?: string;
   variantActive?: ButtonProps["variant"];
+  propsActive?: ButtonProps;
   target?: string;
   anchorProps?: AnchorProps;
+  anchor?: boolean;
 }
 
 /**
@@ -562,8 +565,10 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
     active: options,
     classNameActive,
     variantActive,
+    propsActive,
     routerGoOptions,
     onClick: propsOnClick,
+    anchor,
     ...buttonProps
   } = props as ActionNavigationButtonProps & { onClick?: (e: any) => void };
   const router = useRouter();
@@ -572,6 +577,10 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
   );
   const anchorProps = router.anchor(props.href, routerGoOptions);
 
+  if (propsActive && isActive) {
+    Object.assign(buttonProps, propsActive);
+  }
+
   // Combine passed onClick with router's onClick
   const combinedOnClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     propsOnClick?.(e as any);
@@ -583,11 +592,12 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
     buttonProps.className = `${className} ${classNameActive}`.trim();
   }
 
-  if (props.anchorProps) {
+  if (props.anchorProps || anchor) {
     return (
       <Anchor
         component={"a"}
         {...anchorProps}
+        {...(buttonProps as AnchorProps)}
         {...props.anchorProps}
         onClick={combinedOnClick}
       >
@@ -619,6 +629,7 @@ const ActionHrefButton = (props: ActionNavigationButtonProps) => {
     active: options,
     classNameActive,
     variantActive,
+    propsActive,
     routerGoOptions,
     target,
     ...buttonProps

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

@@ -9,9 +9,9 @@ const BurgerButton = (props: BurgerButtonProps) => {
 
   return (
     <Burger
-      opened={sidebar.opened}
-      onClick={() => setSidebar({ ...sidebar, opened: !sidebar.opened })}
-      hiddenFrom="sm"
+      opened={!sidebar.closed}
+      onClick={() => setSidebar({ ...sidebar, closed: !sidebar.closed })}
+      hiddenFrom="md"
       size="sm"
       {...props}
     />

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

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

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

@@ -18,16 +18,13 @@ const ToggleSidebarButton = (props: Props) => {
           ? IconLayoutSidebarRightCollapse
           : IconLayoutSidebarLeftCollapse
       }
-      visibleFrom={"sm"}
+      visibleFrom={"md"}
       variant={"subtle"}
       size={"md"}
       onClick={() => {
-        const expanding = sidebar.collapsed;
         setSidebar({
           ...sidebar,
           collapsed: !sidebar.collapsed,
-          // Reset width to defaultWidth when expanding
-          width: expanding ? sidebar.defaultWidth : sidebar.width,
         });
       }}
       tooltip={{