@alepha/ui 0.13.1 → 0.13.3

package/dist/admin/AdminLayout-JakF7ESb.js

@@ -0,0 +1,388 @@
+import { ActionButton, AdminShell, OmnibarButton, ThemeButton } from "@alepha/ui";
+import { UserButton } from "@alepha/ui/auth";
+import { NestedView, useAction, useActive, useRouter, useStore } from "@alepha/react";
+import { IconArrowLeft, IconCheck, IconChevronRight, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse } from "@tabler/icons-react";
+import { Anchor, Button, Flex as Flex$1, Menu, ThemeIcon, Tooltip } from "@mantine/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFormState } from "@alepha/react/form";
+import { Children, isValidElement } from "react";
+
+//#region src/core/constants/ui.ts
+const ui = {
+	colors: {
+		transparent: "transparent",
+		background: "var(--alepha-background)",
+		surface: "var(--alepha-surface)",
+		elevated: "var(--alepha-elevated)",
+		border: "var(--alepha-border)"
+	},
+	sizes: { icon: {
+		xs: 12,
+		sm: 16,
+		md: 20,
+		lg: 24,
+		xl: 32
+	} }
+};
+
+//#endregion
+//#region src/core/components/buttons/ActionButton.tsx
+const ActionMenuItem = (props) => {
+	const { item, index } = props;
+	const router = useRouter();
+	const action = useAction({ handler: async (e) => {
+		await item.onClick?.();
+	} }, [item.onClick]);
+	if (item.type === "divider") return /* @__PURE__ */ jsx(Menu.Divider, {}, index);
+	if (item.type === "label") return /* @__PURE__ */ jsx(Menu.Label, { children: item.label }, index);
+	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsxs(Menu, {
+		trigger: "hover",
+		position: "right-start",
+		offset: 2,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Menu.Item, {
+			leftSection: item.icon,
+			rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }),
+			children: item.label
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx(ActionMenuItem, {
+			item: child,
+			index: childIndex
+		}, childIndex)) })]
+	}, index);
+	const menuItemProps = {};
+	if (props.item.onClick) menuItemProps.onClick = action.run;
+	else if (props.item.href) Object.assign(menuItemProps, router.anchor(props.item.href));
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		leftSection: item.icon,
+		onClick: item.onClick,
+		color: item.color,
+		rightSection: item.active ? /* @__PURE__ */ jsx(ThemeIcon, {
+			size: "xs",
+			variant: "transparent",
+			children: /* @__PURE__ */ jsx(IconCheck, {})
+		}) : void 0,
+		...menuItemProps,
+		children: item.label
+	}, index);
+};
+const ActionButton$1 = (_props) => {
+	const props = {
+		variant: "subtle",
+		..._props
+	};
+	const { tooltip, menu, icon, ...restProps } = props;
+	restProps.color ??= "gray";
+	if (props.icon) {
+		const icon$1 = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: ui.sizes.icon.md }) : /* @__PURE__ */ jsx(ThemeIcon, {
+			w: 24,
+			variant: "transparent",
+			size: "sm",
+			c: "var(--mantine-color-text)",
+			...props.themeIconProps,
+			children: props.icon
+		});
+		if (!props.children) {
+			restProps.children = Children.only(icon$1);
+			restProps.px ??= "xs";
+		} else restProps.leftSection = icon$1;
+	}
+	if (props.leftSection && !props.children) restProps.px ??= "xs";
+	if (props.textVisibleFrom) {
+		const { children, textVisibleFrom, leftSection, ...rest } = restProps;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
+			w: "100%",
+			visibleFrom: textVisibleFrom,
+			children: /* @__PURE__ */ jsx(ActionButton$1, {
+				flex: 1,
+				...rest,
+				leftSection,
+				tooltip,
+				menu,
+				children
+			})
+		}), /* @__PURE__ */ jsx(Flex$1, {
+			w: "100%",
+			hiddenFrom: textVisibleFrom,
+			children: /* @__PURE__ */ jsx(ActionButton$1, {
+				px: "xs",
+				...rest,
+				tooltip,
+				menu,
+				children: leftSection
+			})
+		})] });
+	}
+	const renderAction = () => {
+		if ("href" in restProps && restProps.href) {
+			if (restProps.href.startsWith("http") || restProps.target) return /* @__PURE__ */ jsx(ActionHrefButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ jsx(ActionNavigationButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+		}
+		delete restProps.classNameActive;
+		delete restProps.variantActive;
+		if ("action" in restProps && restProps.action) return /* @__PURE__ */ jsx(ActionHookButton, {
+			...restProps,
+			action: restProps.action,
+			children: restProps.children
+		});
+		if ("onClick" in restProps && restProps.onClick) return /* @__PURE__ */ jsx(ActionClickButton, {
+			...restProps,
+			onClick: restProps.onClick,
+			children: restProps.children
+		});
+		if ("form" in restProps && restProps.form) {
+			if (restProps.type === "reset") return /* @__PURE__ */ jsx(ActionResetButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ jsx(ActionSubmitButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+		}
+		return /* @__PURE__ */ jsx(Button, {
+			...restProps,
+			children: restProps.children
+		});
+	};
+	let actionElement = renderAction();
+	if (menu) actionElement = /* @__PURE__ */ jsxs(Menu, {
+		position: menu.position || "bottom-start",
+		width: menu.width || 200,
+		shadow: menu.shadow || "md",
+		trigger: menu.on === "hover" ? "hover" : "click",
+		...menu.menuProps,
+		children: [/* @__PURE__ */ jsx(Menu.Target, {
+			...menu.targetProps,
+			children: actionElement
+		}), /* @__PURE__ */ jsx(Menu.Dropdown, { children: menu.items.map((item, index) => /* @__PURE__ */ jsx(ActionMenuItem, {
+			item,
+			index
+		}, index)) })]
+	});
+	if (tooltip) {
+		const defaultTooltipProps = { openDelay: 1e3 };
+		return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" ? {
+			...defaultTooltipProps,
+			label: tooltip,
+			children: actionElement
+		} : {
+			...defaultTooltipProps,
+			...tooltip,
+			children: actionElement
+		} });
+	}
+	return actionElement;
+};
+var ActionButton_default = ActionButton$1;
+/**
+* Action button that submits a form with loading and disabled state handling.
+*/
+const ActionSubmitButton = (props) => {
+	const { form, ...buttonProps } = props;
+	const state = useFormState(form);
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		loading: state.loading,
+		disabled: state.loading,
+		type: "submit",
+		children: props.children
+	});
+};
+const ActionResetButton = (props) => {
+	const { form, ...buttonProps } = props;
+	const state = useFormState(form);
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		disabled: state.loading,
+		type: "reset",
+		children: props.children
+	});
+};
+/**
+* Action button that integrates with useAction hook return value.
+* Automatically handles loading state and executes the action on click.
+*
+* @example
+* ```tsx
+* const saveAction = useAction({
+*   handler: async (data) => {
+*     await api.save(data);
+*   }
+* }, []);
+*
+* <ActionButton action={saveAction}>
+*   Save
+* </ActionButton>
+* ```
+*/
+const ActionHookButton = (props) => {
+	const { action, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		disabled: action.loading || props.disabled,
+		loading: action.loading,
+		onClick: () => action.run(),
+		children: props.children
+	});
+};
+/**
+* Basic action button that handles click events with loading and error handling.
+*
+* @example
+* ```tsx
+* <ActionButton onClick={() => api.doSomething()}>
+*   Do Something
+* </ActionButton>
+* ```
+*/
+const ActionClickButton = (props) => {
+	const action = useAction({ handler: async (e) => {
+		await props.onClick(e);
+	} }, [props.onClick]);
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		disabled: action.loading || props.disabled,
+		loading: action.loading,
+		onClick: action.run,
+		children: props.children
+	});
+};
+/**
+* Action for navigation with active state support.
+*/
+const ActionNavigationButton = (props) => {
+	const { active: options, classNameActive, variantActive, routerGoOptions, ...buttonProps } = props;
+	const router = useRouter();
+	const { isPending, isActive } = useActive(options ? {
+		href: props.href,
+		...options
+	} : { href: props.href });
+	const anchorProps = router.anchor(props.href, routerGoOptions);
+	const className = buttonProps.className || "";
+	if (isActive && options !== false && classNameActive) buttonProps.className = `${className} ${classNameActive}`.trim();
+	if (props.anchorProps) return /* @__PURE__ */ jsx(Anchor, {
+		component: "a",
+		...anchorProps,
+		...props.anchorProps,
+		children: props.children
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		component: "a",
+		loading: isPending,
+		...buttonProps,
+		...anchorProps,
+		variant: isActive && options !== false ? variantActive ?? "filled" : buttonProps.variant ?? "subtle",
+		children: props.children
+	});
+};
+const ActionHrefButton = (props) => {
+	const { active: options, classNameActive, variantActive, routerGoOptions, target, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx(Button, {
+		component: "a",
+		target,
+		...buttonProps,
+		children: props.children
+	});
+};
+function isComponentType(param) {
+	if (isValidElement(param)) return false;
+	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
+}
+
+//#endregion
+//#region src/core/components/buttons/ToggleSidebarButton.tsx
+const ToggleSidebarButton = () => {
+	const [collapsed, setCollapsed] = useStore("alepha.ui.sidebar.collapsed");
+	return /* @__PURE__ */ jsx(ActionButton_default, {
+		icon: collapsed ? /* @__PURE__ */ jsx(IconLayoutSidebarRightCollapse, {}) : /* @__PURE__ */ jsx(IconLayoutSidebarLeftCollapse, {}),
+		variant: "subtle",
+		size: "md",
+		onClick: () => setCollapsed(!collapsed),
+		tooltip: {
+			position: "right",
+			label: collapsed ? "Show sidebar" : "Hide sidebar"
+		}
+	});
+};
+var ToggleSidebarButton_default = ToggleSidebarButton;
+
+//#endregion
+//#region src/admin/components/AdminLayout.tsx
+const AdminLayout = () => {
+	const router = useRouter();
+	return /* @__PURE__ */ jsx(AdminShell, {
+		appShellMainProps: { bg: "var(--alepha-surface)" },
+		appShellHeaderProps: { bg: "var(--alepha-background)" },
+		appShellNavbarProps: {},
+		appShellProps: {},
+		appShellFooterProps: { bg: "var(--alepha-background)" },
+		footer: /* @__PURE__ */ jsx(Flex$1, { h: 12 }),
+		appBarProps: { items: [
+			{
+				element: /* @__PURE__ */ jsx(ActionButton, {
+					icon: IconArrowLeft,
+					href: "/"
+				}),
+				position: "left"
+			},
+			{
+				element: /* @__PURE__ */ jsx(OmnibarButton, { actionProps: { variant: "outline" } }),
+				position: "right"
+			},
+			{
+				element: /* @__PURE__ */ jsx(UserButton, {}),
+				position: "right"
+			},
+			{
+				element: /* @__PURE__ */ jsx(ThemeButton, {}),
+				position: "right"
+			},
+			{
+				type: "dark",
+				position: "right"
+			}
+		] },
+		sidebarProps: {
+			gap: "xs",
+			menu: [
+				{ element: /* @__PURE__ */ jsx(ToggleSidebarButton_default, {}) },
+				{ type: "spacer" },
+				{
+					...router.node("adminUsers"),
+					description: void 0
+				},
+				{
+					...router.node("adminSessions"),
+					description: void 0
+				},
+				{
+					...router.node("adminNotifications"),
+					description: void 0
+				},
+				{
+					...router.node("adminFiles"),
+					description: void 0
+				}
+			]
+		},
+		children: /* @__PURE__ */ jsx(Flex$1, {
+			flex: 1,
+			bg: "var(--alepha-surface)",
+			children: /* @__PURE__ */ jsx(NestedView, {})
+		})
+	});
+};
+var AdminLayout_default = AdminLayout;
+
+//#endregion
+export { AdminLayout_default as t };
+//# sourceMappingURL=AdminLayout-JakF7ESb.js.map

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

@@ -0,0 +1 @@
+{"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

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

package/dist/admin/AdminNotifications-BPrxALdS.js

@@ -0,0 +1,154 @@
+import { DataTable, Flex, Text } from "@alepha/ui";
+import { t } from "alepha";
+import { useClient } from "@alepha/react";
+import { IconAlertCircle, IconCheck, IconClock, IconMail, IconMessage } from "@tabler/icons-react";
+import { useI18n } from "@alepha/react/i18n";
+import { Badge, Tooltip } from "@mantine/core";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/admin/components/AdminNotifications.tsx
+const AdminNotifications = () => {
+	const client = useClient();
+	const { l } = useI18n();
+	const filters = t.object({
+		type: t.optional(t.enum(["email", "sms"], { title: "Type" })),
+		status: t.optional(t.enum([
+			"pending",
+			"sent",
+			"failed"
+		], { title: "Status" })),
+		template: t.optional(t.string({ title: "Template" })),
+		contact: t.optional(t.string({ title: "Contact" }))
+	});
+	const getStatus = (item) => {
+		if (item.error) return "failed";
+		if (item.sentAt) return "sent";
+		return "pending";
+	};
+	const getStatusBadge = (item) => {
+		switch (getStatus(item)) {
+			case "sent": return /* @__PURE__ */ jsx(Badge, {
+				size: "sm",
+				variant: "light",
+				color: "green",
+				leftSection: /* @__PURE__ */ jsx(IconCheck, { size: 12 }),
+				children: "Sent"
+			});
+			case "failed": return /* @__PURE__ */ jsx(Tooltip, {
+				label: item.error?.message,
+				multiline: true,
+				maw: 300,
+				children: /* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					variant: "light",
+					color: "red",
+					leftSection: /* @__PURE__ */ jsx(IconAlertCircle, { size: 12 }),
+					children: "Failed"
+				})
+			});
+			default: return /* @__PURE__ */ jsx(Badge, {
+				size: "sm",
+				variant: "light",
+				color: "yellow",
+				leftSection: /* @__PURE__ */ jsx(IconClock, { size: 12 }),
+				children: "Pending"
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx(Flex, {
+		flex: 1,
+		direction: "column",
+		children: /* @__PURE__ */ jsx(DataTable, {
+			submitOnInit: true,
+			defaultSize: 10,
+			typeFormProps: {
+				skipSubmitButton: true,
+				columns: 4
+			},
+			tableProps: {
+				horizontalSpacing: "xs",
+				verticalSpacing: "xs"
+			},
+			onFilterChange: (_key, _value, form) => {
+				return form.submit();
+			},
+			filters,
+			tableTrProps: (item) => {
+				if (getStatus(item) === "failed") return { bg: "var(--mantine-color-red-light)" };
+				return {};
+			},
+			items: async (filters$1) => {
+				return await client.findNotifications({ query: filters$1 });
+			},
+			columns: {
+				type: {
+					label: "Type",
+					fit: true,
+					value: (item) => /* @__PURE__ */ jsx(Badge, {
+						size: "sm",
+						variant: "outline",
+						leftSection: item.type === "email" ? /* @__PURE__ */ jsx(IconMail, { size: 12 }) : /* @__PURE__ */ jsx(IconMessage, { size: 12 }),
+						children: item.type.toUpperCase()
+					})
+				},
+				template: {
+					label: "Template",
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						fw: 500,
+						children: item.template
+					})
+				},
+				contact: {
+					label: "Contact",
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						ff: "monospace",
+						children: item.contact
+					})
+				},
+				category: {
+					label: "Category",
+					fit: true,
+					value: (item) => item.category ? /* @__PURE__ */ jsx(Badge, {
+						size: "xs",
+						variant: "light",
+						children: item.category
+					}) : /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: "-"
+					})
+				},
+				status: {
+					label: "Status",
+					fit: true,
+					value: (item) => getStatusBadge(item)
+				},
+				sentAt: {
+					label: "Sent",
+					fit: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: item.sentAt ? l(item.sentAt, { date: "fromNow" }) : "-"
+					})
+				},
+				createdAt: {
+					label: "Created",
+					fit: true,
+					value: (item) => /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: l(item.createdAt, { date: "fromNow" })
+					})
+				}
+			}
+		})
+	});
+};
+var AdminNotifications_default = AdminNotifications;
+
+//#endregion
+export { AdminNotifications_default as t };
+//# sourceMappingURL=AdminNotifications-BPrxALdS.js.map

package/dist/admin/AdminNotifications-BPrxALdS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminNotifications-BPrxALdS.js","names":["filters"],"sources":["../../src/admin/components/AdminNotifications.tsx"],"sourcesContent":["import { useClient } from \"@alepha/react\";\nimport { useI18n } from \"@alepha/react/i18n\";\nimport { DataTable, Flex, Text } from \"@alepha/ui\";\nimport { Badge, Tooltip } from \"@mantine/core\";\nimport {\n  IconAlertCircle,\n  IconCheck,\n  IconClock,\n  IconMail,\n  IconMessage,\n} from \"@tabler/icons-react\";\nimport { type Page, t } from \"alepha\";\nimport type {\n  NotificationController,\n  NotificationEntity,\n} from \"alepha/api/notifications\";\n\nconst AdminNotifications = () => {\n  const client = useClient<NotificationController>();\n  const { l } = useI18n();\n\n  const filters = t.object({\n    type: t.optional(\n      t.enum([\"email\", \"sms\"], {\n        title: \"Type\",\n      }),\n    ),\n    status: t.optional(\n      t.enum([\"pending\", \"sent\", \"failed\"], {\n        title: \"Status\",\n      }),\n    ),\n    template: t.optional(\n      t.string({\n        title: \"Template\",\n      }),\n    ),\n    contact: t.optional(\n      t.string({\n        title: \"Contact\",\n      }),\n    ),\n  });\n\n  const getStatus = (item: NotificationEntity) => {\n    if (item.error) return \"failed\";\n    if (item.sentAt) return \"sent\";\n    return \"pending\";\n  };\n\n  const getStatusBadge = (item: NotificationEntity) => {\n    const status = getStatus(item);\n    switch (status) {\n      case \"sent\":\n        return (\n          <Badge\n            size=\"sm\"\n            variant=\"light\"\n            color=\"green\"\n            leftSection={<IconCheck size={12} />}\n          >\n            Sent\n          </Badge>\n        );\n      case \"failed\":\n        return (\n          <Tooltip label={item.error?.message} multiline maw={300}>\n            <Badge\n              size=\"sm\"\n              variant=\"light\"\n              color=\"red\"\n              leftSection={<IconAlertCircle size={12} />}\n            >\n              Failed\n            </Badge>\n          </Tooltip>\n        );\n      default:\n        return (\n          <Badge\n            size=\"sm\"\n            variant=\"light\"\n            color=\"yellow\"\n            leftSection={<IconClock size={12} />}\n          >\n            Pending\n          </Badge>\n        );\n    }\n  };\n\n  return (\n    <Flex flex={1} direction=\"column\">\n      <DataTable<NotificationEntity, typeof filters>\n        submitOnInit\n        defaultSize={10}\n        typeFormProps={{\n          skipSubmitButton: true,\n          columns: 4,\n        }}\n        tableProps={{\n          horizontalSpacing: \"xs\",\n          verticalSpacing: \"xs\",\n        }}\n        onFilterChange={(_key, _value, form) => {\n          return form.submit();\n        }}\n        filters={filters}\n        tableTrProps={(item) => {\n          const status = getStatus(item);\n          if (status === \"failed\") {\n            return {\n              bg: \"var(--mantine-color-red-light)\",\n            };\n          }\n          return {};\n        }}\n        items={async (filters) => {\n          const response = await client.findNotifications({\n            query: filters,\n          });\n\n          return response as Page<NotificationEntity>;\n        }}\n        columns={{\n          type: {\n            label: \"Type\",\n            fit: true,\n            value: (item) => (\n              <Badge\n                size=\"sm\"\n                variant=\"outline\"\n                leftSection={\n                  item.type === \"email\" ? (\n                    <IconMail size={12} />\n                  ) : (\n                    <IconMessage size={12} />\n                  )\n                }\n              >\n                {item.type.toUpperCase()}\n              </Badge>\n            ),\n          },\n          template: {\n            label: \"Template\",\n            value: (item) => (\n              <Text size=\"sm\" fw={500}>\n                {item.template}\n              </Text>\n            ),\n          },\n          contact: {\n            label: \"Contact\",\n            value: (item) => (\n              <Text size=\"sm\" ff=\"monospace\">\n                {item.contact}\n              </Text>\n            ),\n          },\n          category: {\n            label: \"Category\",\n            fit: true,\n            value: (item) =>\n              item.category ? (\n                <Badge size=\"xs\" variant=\"light\">\n                  {item.category}\n                </Badge>\n              ) : (\n                <Text size=\"xs\" c=\"dimmed\">\n                  -\n                </Text>\n              ),\n          },\n          status: {\n            label: \"Status\",\n            fit: true,\n            value: (item) => getStatusBadge(item),\n          },\n          sentAt: {\n            label: \"Sent\",\n            fit: true,\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\">\n                {item.sentAt ? l(item.sentAt, { date: \"fromNow\" }) : \"-\"}\n              </Text>\n            ),\n          },\n          createdAt: {\n            label: \"Created\",\n            fit: true,\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\">\n                {l(item.createdAt, { date: \"fromNow\" })}\n              </Text>\n            ),\n          },\n        }}\n      />\n    </Flex>\n  );\n};\n\nexport default AdminNotifications;\n"],"mappings":"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"}

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

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