@alepha/ui 0.13.3 → 0.13.5

package/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -18,10 +18,11 @@
   "style": "./styles.css",
   "files": [
     "dist",
-    "src"
+    "src",
+    "styles.css"
   ],
   "dependencies": {
-    "@alepha/react": "0.13.3",
+    "@alepha/react": "0.13.5",
     "@mantine/core": "^8.3.9",
     "@mantine/dates": "^8.3.9",
     "@mantine/hooks": "^8.3.9",
@@ -30,7 +31,7 @@
     "@mantine/nprogress": "^8.3.9",
     "@mantine/spotlight": "^8.3.9",
     "@tabler/icons-react": "^3.35.0",
-    "alepha": "0.13.3",
+    "alepha": "0.13.5",
     "dayjs": "^1.11.19"
   },
   "devDependencies": {

package/src/admin/AdminSidebar.ts

@@ -0,0 +1,31 @@
+import type { ReactRouter } from "@alepha/react";
+import type { SidebarNode } from "@alepha/ui";
+import { createElement } from "react";
+import ToggleSidebarButton from "../core/components/buttons/ToggleSidebarButton.tsx";
+
+export class AdminSidebar {
+  public menu = (router: ReactRouter<any>): SidebarNode[] => [
+    {
+      element: createElement(ToggleSidebarButton),
+    },
+    {
+      type: "spacer",
+    },
+    {
+      ...router.node("adminUsers"),
+      description: undefined,
+    },
+    {
+      ...router.node("adminSessions"),
+      description: undefined,
+    },
+    {
+      ...router.node("adminNotifications"),
+      description: undefined,
+    },
+    {
+      ...router.node("adminFiles"),
+      description: undefined,
+    },
+  ];
+}

package/src/admin/components/AdminLayout.tsx

@@ -1,4 +1,4 @@
-import { NestedView, useRouter } from "@alepha/react";
+import { NestedView, useInject, useRouter } from "@alepha/react";
 import {
   ActionButton,
   AdminShell,
@@ -8,11 +8,13 @@ import {
 import { UserButton } from "@alepha/ui/auth";
 import { Flex } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
-import ToggleSidebarButton from "../../core/components/buttons/ToggleSidebarButton.tsx";
 import type { AdminRouter } from "../AdminRouter.ts";
+import { AdminSidebar } from "../AdminSidebar.ts";
 
 const AdminLayout = () => {
   const router = useRouter<AdminRouter>();
+  const sidebar = useInject(AdminSidebar);
+
   return (
     <AdminShell
       appShellMainProps={{
@@ -61,30 +63,7 @@ const AdminLayout = () => {
       }}
       sidebarProps={{
         gap: "xs",
-        menu: [
-          {
-            element: <ToggleSidebarButton />,
-          },
-          {
-            type: "spacer",
-          },
-          {
-            ...router.node("adminUsers"),
-            description: undefined,
-          },
-          {
-            ...router.node("adminSessions"),
-            description: undefined,
-          },
-          {
-            ...router.node("adminNotifications"),
-            description: undefined,
-          },
-          {
-            ...router.node("adminFiles"),
-            description: undefined,
-          },
-        ],
+        menu: sidebar.menu(router),
       }}
     >
       <Flex flex={1} bg={"var(--alepha-surface)"}>

package/src/admin/index.ts

@@ -2,11 +2,13 @@ import { AlephaUI } from "@alepha/ui";
 import { AlephaUIAuth } from "@alepha/ui/auth";
 import { $module } from "alepha";
 import { AdminRouter } from "./AdminRouter.ts";
+import { AdminSidebar } from "./AdminSidebar.ts";
 import { MainRouter } from "./MainRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export { AdminRouter } from "./AdminRouter.ts";
+export { AdminSidebar } from "./AdminSidebar.ts";
 export { default as AdminFiles } from "./components/AdminFiles.tsx";
 export { default as AdminJobs } from "./components/AdminJobs.tsx";
 export { default as AdminLayout } from "./components/AdminLayout.tsx";
@@ -31,8 +33,9 @@ export { MainRouter } from "./MainRouter.ts";
  */
 export const AlephaUIAdmin = $module({
   name: "alepha.ui.admin",
-  services: [AlephaUI, AlephaUIAuth, AdminRouter, MainRouter],
+  services: [AlephaUI, AlephaUIAuth, AdminRouter, MainRouter, AdminSidebar],
   register: (alepha) => {
     alepha.with(AdminRouter);
+    alepha.with(AdminSidebar);
   },
 });

package/src/auth/components/Login.tsx

@@ -174,7 +174,7 @@ const Login = (props: LoginProps) => {
             )}
           </Stack>
         </Card>
-        <ActionButton variant={"subtle"} href={redirect}>
+        <ActionButton variant={"subtle"} href={"/"}>
           {tr("loginCancel")}
         </ActionButton>
       </Stack>

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

@@ -60,7 +60,13 @@ const UserButton = (props: UserButtonProps) => {
   const authRouter = useRouter<AuthRouter>();
 
   if (!auth.user) {
-    return <ActionButton icon={IconLogin2} href={authRouter.path("login")} />;
+    return (
+      <ActionButton
+        {...buttonProps}
+        icon={IconLogin2}
+        href={authRouter.path("login")}
+      />
+    );
   }
 
   const userLabel = auth.user.username || auth.user.email;

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

@@ -244,6 +244,7 @@ const ActionButton = (_props: ActionProps) => {
 
   // set default color to gray (not colored)
   restProps.color ??= "gray";
+  restProps.c ??= "var(--mantine-color-text)";
 
   if (props.icon) {
     const icon = isComponentType(props.icon) ? (

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

@@ -229,7 +229,6 @@ export const SidebarItem = (props: SidebarItemProps) => {
           props.theme.button?.size ??
           (level === 0 ? "sm" : "xs")
         }
-        color={"var(--alepha-text)"}
         variant={"subtle"}
         variantActive={"default"}
         radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
@@ -342,7 +341,6 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
         props.theme.button?.size ??
         (level === 0 ? "sm" : "xs")
       }
-      color={"var(--alepha-text)"}
       variant={"subtle"}
       variantActive={"default"}
       tooltip={

package/src/core/hooks/useTheme.ts

@@ -1,13 +1,13 @@
 import { useInject, useStore } from "@alepha/react";
 import {
   type AlephaTheme,
+  mantineThemeAtom,
   type Theme,
   ThemeProvider,
-  themeAtom,
 } from "../providers/ThemeProvider.ts";
 
 export const useTheme = () => {
-  useStore(themeAtom);
+  useStore(mantineThemeAtom);
 
   const themeService = useInject(ThemeProvider);
   const currentTheme = themeService.getTheme();

package/src/core/providers/ThemeProvider.ts

@@ -12,7 +12,7 @@ import {
   slateTheme,
 } from "../themes/index.ts";
 
-export const themeAtom = $atom({
+export const mantineThemeAtom = $atom({
   name: "alepha.ui.theme",
   schema: t.object({
     id: t.string(),
@@ -22,11 +22,11 @@ export const themeAtom = $atom({
   },
 });
 
-export type Theme = Static<typeof themeAtom.schema>;
+export type Theme = Static<typeof mantineThemeAtom.schema>;
 
 declare module "alepha" {
   interface State {
-    [themeAtom.key]?: Theme;
+    [mantineThemeAtom.key]?: Theme;
   }
 }
 
@@ -38,7 +38,7 @@ export type AlephaTheme = MantineThemeOverride & {
 
 export class ThemeProvider {
   protected readonly alepha = $inject(Alepha);
-  protected themeCookie = $cookie(themeAtom);
+  protected themeCookie = $cookie(mantineThemeAtom);
 
   public themes: AlephaTheme[] = [
     defaultTheme,
@@ -60,7 +60,7 @@ export class ThemeProvider {
 
   public setTheme(theme: Theme) {
     this.themeCookie.set(theme);
-    this.alepha.store.set(themeAtom, theme);
+    this.alepha.store.set(mantineThemeAtom, theme);
 
     if (typeof document === "undefined") return;
 
@@ -76,12 +76,15 @@ export class ThemeProvider {
     try {
       return (
         this.themeCookie.get() ??
-        this.alepha.store.get(themeAtom) ??
-        themeAtom.options.default
+        this.alepha.store.get(mantineThemeAtom) ??
+        mantineThemeAtom.options.default
       );
     } catch {
       // TODO: atom should take default value if undefined ???
-      return this.alepha.store.get(themeAtom) ?? themeAtom.options.default;
+      return (
+        this.alepha.store.get(mantineThemeAtom) ??
+        mantineThemeAtom.options.default
+      );
     }
   }
 }

package/src/core/themes/midnight.ts

@@ -24,13 +24,7 @@ export const midnightTheme: AlephaTheme = {
       h6: { fontSize: "0.75rem", lineHeight: "1.5" },
     },
   },
-  fontSizes: {
-    xs: "0.75rem",
-    sm: "0.875rem",
-    md: "0.875rem",
-    lg: "1rem",
-    xl: "1.25rem",
-  },
+
   radius: {
     xs: "3px",
     sm: "6px",

package/styles.css

@@ -0,0 +1,84 @@
+@import "@mantine/core/styles.css";
+@import "@mantine/nprogress/styles.css";
+@import "@mantine/spotlight/styles.css";
+@import "@mantine/dates/styles.css";
+@import "@mantine/notifications/styles.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-surface-light: var(--mantine-color-gray-0);
+  --alepha-surface-dark: var(--mantine-color-dark-8);
+  --alepha-surface: var(--alepha-surface-light);
+
+  --alepha-elevated-light: var(--mantine-color-white);
+  --alepha-elevated-hover-light: #f6f5f5;
+  --alepha-elevated-dark: var(--mantine-color-dark-7);
+  --alepha-elevated-hover-dark: var(--mantine-color-dark-6);
+  --alepha-elevated: var(--alepha-elevated-light);
+  --alepha-elevated-hover: var(--alepha-elevated-hover-light);
+
+  --alepha-border-light: #cbcbcb;
+  --alepha-border-dark: var(--mantine-color-dark-4);
+  --alepha-border: var(--alepha-border-light);
+
+  --alepha-text-light: #000000;
+  --alepha-text-dark: #ffffff;
+  --alepha-text-muted: #6c757d;
+  --alepha-text: var(--alepha-text-light);
+}
+
+#root {
+  display: flex;
+  background-color: var(--alepha-background);
+  color: var(--alepha-text);
+  min-height: 100dvh;
+}
+
+/* ------------------------------------------------------------------------------------------------------------------ */
+
+[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-border: var(--alepha-border-dark);
+  --alepha-background: var(--alepha-background-dark);
+  --alepha-shadow: var(--alepha-shadow-dark);
+  --alepha-text: var(--alepha-text-dark);
+}
+
+/* ------------------------------------------------------------------------------------------------------------------ */
+
+.overflow-auto {
+  overflow: auto;
+  scrollbar-color: var(--alepha-text-muted) transparent;
+  scrollbar-width: thin;
+}
+
+/* ------------------------------------------------------------------------------------------------------------------ */
+/* Modal Customizations */
+
+/* Custom modal scale animation */
+@keyframes modalScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes modalScaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}

package/dist/admin/AdminFiles-DldZB7oo.js

@@ -1,3 +0,0 @@
-import { t as AdminFiles_default } from "./AdminFiles-BjofP3OC.js";
-
-export { AdminFiles_default as default };

package/dist/admin/AdminLayout-JakF7ESb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdminLayout-JakF7ESb.js","names":["menuItemProps: MenuItemProps & ButtonHTMLAttributes<unknown>","ActionButton","icon","Flex","defaultTooltipProps: Partial<TooltipProps>","ActionButton","Flex","ToggleSidebarButton"],"sources":["../../src/core/constants/ui.ts","../../src/core/components/buttons/ActionButton.tsx","../../src/core/components/buttons/ToggleSidebarButton.tsx","../../src/admin/components/AdminLayout.tsx"],"sourcesContent":["export const ui = {\n  colors: {\n    transparent: \"transparent\",\n    background: \"var(--alepha-background)\",\n    surface: \"var(--alepha-surface)\",\n    elevated: \"var(--alepha-elevated)\",\n    border: \"var(--alepha-border)\",\n  },\n  sizes: {\n    icon: {\n      xs: 12,\n      sm: 16,\n      md: 20,\n      lg: 24,\n      xl: 32,\n    },\n  },\n};\n","import {\n  type RouterGoOptions,\n  type UseActionReturn,\n  type UseActiveOptions,\n  useAction,\n  useActive,\n  useRouter,\n} from \"@alepha/react\";\nimport { type FormModel, useFormState } from \"@alepha/react/form\";\nimport {\n  Anchor,\n  type AnchorProps,\n  Button,\n  type ButtonProps,\n  Flex,\n  Menu,\n  type MenuItemProps,\n  type MenuProps,\n  type MenuTargetProps,\n  ThemeIcon,\n  type ThemeIconProps,\n  Tooltip,\n  type TooltipProps,\n} from \"@mantine/core\";\nimport { IconCheck, IconChevronRight } from \"@tabler/icons-react\";\nimport {\n  type ButtonHTMLAttributes,\n  Children,\n  type ComponentType,\n  isValidElement,\n  type ReactNode,\n} from \"react\";\nimport { ui } from \"../../constants/ui.ts\";\n\nexport interface ActionMenuItem {\n  /**\n   * Menu item type\n   */\n  type?: \"item\" | \"divider\" | \"label\";\n\n  /**\n   * Label text for the menu item\n   */\n  label?: string | ReactNode;\n\n  /**\n   * Icon element to display before the label\n   */\n  icon?: ReactNode;\n\n  /**\n   * Click handler for menu items\n   */\n  onClick?: () => void;\n\n  /**\n   * Href for navigation menu items\n   */\n  href?: string;\n\n  /**\n   * Color for the menu item (e.g., \"red\" for danger actions)\n   */\n  color?: string;\n\n  /**\n   * Nested submenu items\n   */\n  children?: ActionMenuItem[];\n\n  /**\n   * Whether the menu item is active\n   */\n  active?: boolean;\n}\n\nexport interface ActionMenuConfig {\n  /**\n   * Array of menu items to display\n   */\n  items: ActionMenuItem[];\n\n  /**\n   * Menu position relative to the button\n   */\n  position?:\n    | \"bottom\"\n    | \"bottom-start\"\n    | \"bottom-end\"\n    | \"top\"\n    | \"top-start\"\n    | \"top-end\"\n    | \"left\"\n    | \"right\";\n\n  /**\n   * Menu width\n   */\n  width?: number | string;\n\n  /**\n   * Menu shadow\n   */\n  shadow?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n  on?: \"hover\" | \"click\";\n\n  targetProps?: MenuTargetProps;\n\n  menuProps?: MenuProps;\n}\n\nexport interface ActionCommonProps extends ButtonProps {\n  children?: ReactNode;\n\n  textVisibleFrom?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n  /**\n   * Tooltip to display on hover. Can be a string for simple tooltips\n   * or a TooltipProps object for advanced configuration.\n   */\n  tooltip?: string | TooltipProps;\n\n  /**\n   * Menu configuration. When provided, the action will display a dropdown menu.\n   */\n  menu?: ActionMenuConfig;\n\n  /**\n   * If set, a confirmation dialog will be shown before performing the action.\n   * If `true`, a default title and message will be used.\n   * If a string, it will be used as the message with a default title.\n   * If an object, it can contain `title` and `message` properties to customize the dialog.\n   */\n  confirm?: boolean | string | { title?: string; message: string };\n\n  /**\n   * Icon to display on the left side of the button.\n   * If no children are provided, the button will be styled as an icon-only button.\n   */\n  icon?: ReactNode | ComponentType;\n\n  /**\n   * Additional props to pass to the ThemeIcon wrapping the icon.\n   */\n  themeIconProps?: ThemeIconProps;\n\n  /**\n   * Visual intent of the action button.\n   */\n  intent?: \"primary\" | \"success\" | \"danger\" | \"warning\" | \"info\";\n}\n\nexport type ActionProps = ActionCommonProps &\n  (\n    | ActionNavigationButtonProps\n    | ActionClickButtonProps\n    | ActionSubmitButtonProps\n    | ActionHookButtonProps\n    | {}\n  );\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n// Helper function to render menu items recursively\nconst ActionMenuItem = (props: {\n  item: ActionMenuItem;\n  index: number;\n}): ReactNode => {\n  const { item, index } = props;\n\n  const router = useRouter();\n  const action = useAction(\n    {\n      handler: async (e: any) => {\n        await item.onClick?.();\n      },\n    },\n    [item.onClick],\n  );\n\n  // Render divider\n  if (item.type === \"divider\") {\n    return <Menu.Divider key={index} />;\n  }\n\n  // Render label\n  if (item.type === \"label\") {\n    return <Menu.Label key={index}>{item.label}</Menu.Label>;\n  }\n\n  // Render submenu if it has children\n  if (item.children && item.children.length > 0) {\n    return (\n      <Menu key={index} trigger=\"hover\" position=\"right-start\" offset={2}>\n        <Menu.Target>\n          <Menu.Item\n            leftSection={item.icon}\n            rightSection={<IconChevronRight size={14} />}\n          >\n            {item.label}\n          </Menu.Item>\n        </Menu.Target>\n        <Menu.Dropdown>\n          {item.children.map((child, childIndex) => (\n            <ActionMenuItem item={child} index={childIndex} key={childIndex} />\n          ))}\n        </Menu.Dropdown>\n      </Menu>\n    );\n  }\n\n  const menuItemProps: MenuItemProps & ButtonHTMLAttributes<unknown> = {};\n  if (props.item.onClick) {\n    menuItemProps.onClick = action.run;\n  } else if (props.item.href) {\n    Object.assign(menuItemProps, router.anchor(props.item.href));\n  }\n\n  // render regular menu item\n  return (\n    <Menu.Item\n      key={index}\n      leftSection={item.icon}\n      onClick={item.onClick}\n      color={item.color}\n      rightSection={\n        item.active ? (\n          <ThemeIcon size={\"xs\"} variant={\"transparent\"}>\n            <IconCheck />\n          </ThemeIcon>\n        ) : undefined\n      }\n      {...menuItemProps}\n    >\n      {item.label}\n    </Menu.Item>\n  );\n};\n\nconst ActionButton = (_props: ActionProps) => {\n  const props = { variant: \"subtle\", ..._props };\n  const { tooltip, menu, icon, ...restProps } = props;\n\n  // set default color to gray (not colored)\n  restProps.color ??= \"gray\";\n\n  if (props.icon) {\n    const icon = isComponentType(props.icon) ? (\n      <props.icon size={ui.sizes.icon.md} />\n    ) : (\n      <ThemeIcon\n        w={24} // TODO: make size configurable\n        variant={\"transparent\"}\n        size={\"sm\"}\n        c={\"var(--mantine-color-text)\"}\n        {...props.themeIconProps}\n      >\n        {props.icon as ReactNode}\n      </ThemeIcon>\n    );\n\n    if (!props.children) {\n      restProps.children = Children.only(icon);\n      restProps.px ??= \"xs\";\n    } else {\n      restProps.leftSection = icon;\n    }\n  }\n\n  if (props.leftSection && !props.children) {\n    restProps.px ??= \"xs\";\n  }\n\n  if (props.textVisibleFrom) {\n    const { children, textVisibleFrom, leftSection, ...rest } = restProps;\n    return (\n      <>\n        <Flex w={\"100%\"} visibleFrom={textVisibleFrom}>\n          <ActionButton\n            flex={1}\n            {...rest}\n            leftSection={leftSection}\n            tooltip={tooltip}\n            menu={menu}\n          >\n            {children}\n          </ActionButton>\n        </Flex>\n        <Flex w={\"100%\"} hiddenFrom={textVisibleFrom}>\n          <ActionButton px={\"xs\"} {...rest} tooltip={tooltip} menu={menu}>\n            {leftSection}\n          </ActionButton>\n        </Flex>\n      </>\n    );\n  }\n\n  const renderAction = () => {\n    if (\"href\" in restProps && restProps.href) {\n      if (restProps.href.startsWith(\"http\") || restProps.target) {\n        return (\n          <ActionHrefButton {...restProps} href={restProps.href}>\n            {restProps.children}\n          </ActionHrefButton>\n        );\n      }\n      return (\n        <ActionNavigationButton {...restProps} href={restProps.href}>\n          {restProps.children}\n        </ActionNavigationButton>\n      );\n    }\n\n    delete (restProps as any).classNameActive;\n    delete (restProps as any).variantActive;\n\n    if (\"action\" in restProps && restProps.action) {\n      return (\n        <ActionHookButton {...restProps} action={restProps.action}>\n          {restProps.children}\n        </ActionHookButton>\n      );\n    }\n\n    if (\"onClick\" in restProps && restProps.onClick) {\n      return (\n        <ActionClickButton {...restProps} onClick={restProps.onClick}>\n          {restProps.children}\n        </ActionClickButton>\n      );\n    }\n\n    if (\"form\" in restProps && restProps.form) {\n      if (restProps.type === \"reset\") {\n        return (\n          <ActionResetButton {...restProps} form={restProps.form}>\n            {restProps.children}\n          </ActionResetButton>\n        );\n      }\n      return (\n        <ActionSubmitButton {...restProps} form={restProps.form}>\n          {restProps.children}\n        </ActionSubmitButton>\n      );\n    }\n\n    return <Button {...(restProps as any)}>{restProps.children}</Button>;\n  };\n\n  let actionElement = renderAction();\n\n  // wrap with Menu if provided\n  if (menu) {\n    actionElement = (\n      <Menu\n        position={menu.position || \"bottom-start\"}\n        width={menu.width || 200}\n        shadow={menu.shadow || \"md\"}\n        trigger={menu.on === \"hover\" ? \"hover\" : \"click\"}\n        {...menu.menuProps}\n      >\n        <Menu.Target {...menu.targetProps}>{actionElement}</Menu.Target>\n        <Menu.Dropdown>\n          {menu.items.map((item, index) => (\n            <ActionMenuItem item={item} index={index} key={index} />\n          ))}\n        </Menu.Dropdown>\n      </Menu>\n    );\n  }\n\n  // Wrap with Tooltip if provided\n  if (tooltip) {\n    // openDelay: 1000 -> like HTML title attribute\n    const defaultTooltipProps: Partial<TooltipProps> = {\n      openDelay: 1000,\n    };\n    const tooltipProps: TooltipProps =\n      typeof tooltip === \"string\"\n        ? {\n            ...defaultTooltipProps,\n            label: tooltip,\n            children: actionElement,\n          }\n        : { ...defaultTooltipProps, ...tooltip, children: actionElement };\n\n    return <Tooltip {...tooltipProps} />;\n  }\n\n  return actionElement;\n};\n\nexport default ActionButton;\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n// Action Submit\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport interface ActionSubmitButtonProps extends ButtonProps {\n  form: FormModel<any>;\n  type?: \"submit\" | \"reset\";\n}\n\n/**\n * Action button that submits a form with loading and disabled state handling.\n */\nconst ActionSubmitButton = (props: ActionSubmitButtonProps) => {\n  const { form, ...buttonProps } = props;\n  const state = useFormState(form);\n  return (\n    <Button\n      {...buttonProps}\n      loading={state.loading}\n      disabled={state.loading}\n      type={\"submit\"}\n    >\n      {props.children}\n    </Button>\n  );\n};\n\nconst ActionResetButton = (props: ActionSubmitButtonProps) => {\n  const { form, ...buttonProps } = props;\n  const state = useFormState(form);\n  return (\n    <Button {...buttonProps} disabled={state.loading} type={\"reset\"}>\n      {props.children}\n    </Button>\n  );\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n// Action with useAction Hook\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport interface ActionHookButtonProps extends ButtonProps {\n  action: UseActionReturn<any[], any>;\n}\n\n/**\n * Action button that integrates with useAction hook return value.\n * Automatically handles loading state and executes the action on click.\n *\n * @example\n * ```tsx\n * const saveAction = useAction({\n *   handler: async (data) => {\n *     await api.save(data);\n *   }\n * }, []);\n *\n * <ActionButton action={saveAction}>\n *   Save\n * </ActionButton>\n * ```\n */\nconst ActionHookButton = (props: ActionHookButtonProps) => {\n  const { action, ...buttonProps } = props;\n\n  return (\n    <Button\n      {...buttonProps}\n      disabled={action.loading || props.disabled}\n      loading={action.loading}\n      onClick={() => action.run()}\n    >\n      {props.children}\n    </Button>\n  );\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n// Action Click\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport interface ActionClickButtonProps extends ButtonProps {\n  onClick: (e: any) => any;\n}\n\n/**\n * Basic action button that handles click events with loading and error handling.\n *\n * @example\n * ```tsx\n * <ActionButton onClick={() => api.doSomething()}>\n *   Do Something\n * </ActionButton>\n * ```\n */\nconst ActionClickButton = (props: ActionClickButtonProps) => {\n  const action = useAction(\n    {\n      handler: async (e: any) => {\n        await props.onClick(e);\n      },\n    },\n    [props.onClick],\n  );\n\n  return (\n    <Button\n      {...props}\n      disabled={action.loading || props.disabled}\n      loading={action.loading}\n      onClick={action.run}\n    >\n      {props.children}\n    </Button>\n  );\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n// Action Navigation\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport interface ActionNavigationButtonProps extends ButtonProps {\n  href: string;\n  active?: Partial<UseActiveOptions> | false;\n  routerGoOptions?: RouterGoOptions;\n  classNameActive?: string;\n  variantActive?: ButtonProps[\"variant\"];\n  target?: string;\n  anchorProps?: AnchorProps;\n}\n\n/**\n * Action for navigation with active state support.\n */\nconst ActionNavigationButton = (props: ActionNavigationButtonProps) => {\n  const {\n    active: options,\n    classNameActive,\n    variantActive,\n    routerGoOptions,\n    ...buttonProps\n  } = props;\n  const router = useRouter();\n  const { isPending, isActive } = useActive(\n    options ? { href: props.href, ...options } : { href: props.href },\n  );\n  const anchorProps = router.anchor(props.href, routerGoOptions);\n\n  const className = buttonProps.className || \"\";\n  if (isActive && options !== false && classNameActive) {\n    buttonProps.className = `${className} ${classNameActive}`.trim();\n  }\n\n  if (props.anchorProps) {\n    return (\n      <Anchor component={\"a\"} {...anchorProps} {...props.anchorProps}>\n        {props.children}\n      </Anchor>\n    );\n  }\n\n  return (\n    <Button\n      component={\"a\"}\n      loading={isPending}\n      {...buttonProps}\n      {...anchorProps}\n      variant={\n        isActive && options !== false\n          ? (variantActive ?? \"filled\")\n          : (buttonProps.variant ?? \"subtle\")\n      }\n    >\n      {props.children}\n    </Button>\n  );\n};\n\nconst ActionHrefButton = (props: ActionNavigationButtonProps) => {\n  const {\n    active: options,\n    classNameActive,\n    variantActive,\n    routerGoOptions,\n    target,\n    ...buttonProps\n  } = props;\n\n  return (\n    <Button component={\"a\"} target={target} {...buttonProps}>\n      {props.children}\n    </Button>\n  );\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport function isComponentType(param: any): param is ComponentType<any> {\n  if (isValidElement(param)) return false;\n  return (\n    typeof param === \"function\" ||\n    (typeof param === \"object\" && param !== null && \"$$typeof\" in param)\n  );\n}\n\nexport const renderIcon = (icon: ReactNode | ComponentType): ReactNode => {\n  if (!icon) return null;\n  if (isValidElement(icon)) return icon;\n  if (isComponentType(icon)) {\n    const IconComponent = icon;\n    return <IconComponent size={ui.sizes.icon.md} />;\n  }\n  return icon as ReactNode;\n};\n","import { useStore } from \"@alepha/react\";\nimport {\n  IconLayoutSidebarLeftCollapse,\n  IconLayoutSidebarRightCollapse,\n} from \"@tabler/icons-react\";\nimport ActionButton from \"./ActionButton.tsx\";\n\nconst ToggleSidebarButton = () => {\n  const [collapsed, setCollapsed] = useStore(\"alepha.ui.sidebar.collapsed\");\n\n  return (\n    <ActionButton\n      icon={\n        collapsed ? (\n          <IconLayoutSidebarRightCollapse />\n        ) : (\n          <IconLayoutSidebarLeftCollapse />\n        )\n      }\n      variant={\"subtle\"}\n      size={\"md\"}\n      onClick={() => setCollapsed(!collapsed)}\n      tooltip={{\n        position: \"right\",\n        label: collapsed ? \"Show sidebar\" : \"Hide sidebar\",\n      }}\n    />\n  );\n};\n\nexport default ToggleSidebarButton;\n","import { NestedView, useRouter } from \"@alepha/react\";\nimport {\n  ActionButton,\n  AdminShell,\n  OmnibarButton,\n  ThemeButton,\n} from \"@alepha/ui\";\nimport { UserButton } from \"@alepha/ui/auth\";\nimport { Flex } from \"@mantine/core\";\nimport { IconArrowLeft } from \"@tabler/icons-react\";\nimport ToggleSidebarButton from \"../../core/components/buttons/ToggleSidebarButton.tsx\";\nimport type { AdminRouter } from \"../AdminRouter.ts\";\n\nconst AdminLayout = () => {\n  const router = useRouter<AdminRouter>();\n  return (\n    <AdminShell\n      appShellMainProps={{\n        bg: \"var(--alepha-surface)\",\n      }}\n      appShellHeaderProps={{\n        bg: \"var(--alepha-background)\",\n      }}\n      appShellNavbarProps={\n        {\n          //  bg: \"var(--alepha-background)\",\n        }\n      }\n      appShellProps={\n        {\n          // withBorder: false,\n        }\n      }\n      appShellFooterProps={{\n        bg: \"var(--alepha-background)\",\n      }}\n      footer={<Flex h={12} />}\n      appBarProps={{\n        items: [\n          {\n            element: <ActionButton icon={IconArrowLeft} href={\"/\"} />,\n            position: \"left\",\n          },\n          {\n            element: <OmnibarButton actionProps={{ variant: \"outline\" }} />,\n            position: \"right\",\n          },\n          {\n            element: <UserButton />,\n            position: \"right\",\n          },\n          {\n            element: <ThemeButton />,\n            position: \"right\",\n          },\n          {\n            type: \"dark\",\n            position: \"right\",\n          },\n        ],\n      }}\n      sidebarProps={{\n        gap: \"xs\",\n        menu: [\n          {\n            element: <ToggleSidebarButton />,\n          },\n          {\n            type: \"spacer\",\n          },\n          {\n            ...router.node(\"adminUsers\"),\n            description: undefined,\n          },\n          {\n            ...router.node(\"adminSessions\"),\n            description: undefined,\n          },\n          {\n            ...router.node(\"adminNotifications\"),\n            description: undefined,\n          },\n          {\n            ...router.node(\"adminFiles\"),\n            description: undefined,\n          },\n        ],\n      }}\n    >\n      <Flex flex={1} bg={\"var(--alepha-surface)\"}>\n        <NestedView />\n      </Flex>\n    </AdminShell>\n  );\n};\n\nexport default AdminLayout;\n"],"mappings":"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"}

package/dist/admin/AdminLayout-qNsIyl30.js

@@ -1,3 +0,0 @@
-import { t as AdminLayout_default } from "./AdminLayout-JakF7ESb.js";
-
-export { AdminLayout_default as default };

package/dist/admin/AdminNotifications-DV-35Fi3.js

@@ -1,3 +0,0 @@
-import { t as AdminNotifications_default } from "./AdminNotifications-BPrxALdS.js";
-
-export { AdminNotifications_default as default };

package/dist/admin/AdminSessions-Df2VYzlE.js

@@ -1,3 +0,0 @@
-import { t as AdminSessions_default } from "./AdminSessions-CMmBtbSw.js";
-
-export { AdminSessions_default as default };

package/dist/admin/AdminUserSessions-A_5KkqTY.js

@@ -1,3 +0,0 @@
-import { t as AdminUserSessions_default } from "./AdminUserSessions-Bcf6-rjG.js";
-
-export { AdminUserSessions_default as default };

package/dist/admin/AdminUserSettings-DAsAhFjX.js

@@ -1,3 +0,0 @@
-import { t as AdminUserSettings_default } from "./AdminUserSettings-DRYVdW6S.js";
-
-export { AdminUserSettings_default as default };

package/dist/admin/AdminUsers-Dd9a5UqO.js

@@ -1,3 +0,0 @@
-import { t as AdminUsers_default } from "./AdminUsers-IN_2yHKt.js";
-
-export { AdminUsers_default as default };

package/dist/auth/Login-DDsyCNAA.js

@@ -1,4 +0,0 @@
-import "./IconGoogle-v_58os2T.js";
-import { t as Login_default } from "./Login-kBfaRgKG.js";
-
-export { Login_default as default };

package/dist/auth/Register-D10MnlQc.js

@@ -1,4 +0,0 @@
-import "./IconGoogle-v_58os2T.js";
-import { t as Register_default } from "./Register-BxJmOqpF.js";
-
-export { Register_default as default };

package/dist/auth/ResetPassword-llBG-STp.js

@@ -1,3 +0,0 @@
-import { t as ResetPassword_default } from "./ResetPassword-BhyZ9ek4.js";
-
-export { ResetPassword_default as default };

package/dist/auth/VerifyEmail-BvOG-IUC.js

@@ -1,3 +0,0 @@
-import { t as VerifyEmail_default } from "./VerifyEmail-DeLct3oQ.js";
-
-export { VerifyEmail_default as default };