@alepha/ui 0.11.3 → 0.11.5

package/src/services/ToastService.tsx

@@ -29,7 +29,10 @@ export class ToastService {
     });
   }
 
-  public info(options: Partial<NotificationData>) {
+  public info(options: Partial<NotificationData> | string) {
+    if (typeof options === "string") {
+      options = { message: options };
+    }
     this.show({
       color: "blue",
       icon: <IconInfoCircle size={20} />,
@@ -39,7 +42,10 @@ export class ToastService {
     });
   }
 
-  public success(options: Partial<NotificationData>) {
+  public success(options: Partial<NotificationData> | string) {
+    if (typeof options === "string") {
+      options = { message: options };
+    }
     this.show({
       color: "green",
       icon: <IconCheck size={16} />,
@@ -49,7 +55,10 @@ export class ToastService {
     });
   }
 
-  public warning(options: Partial<NotificationData>) {
+  public warning(options: Partial<NotificationData> | string) {
+    if (typeof options === "string") {
+      options = { message: options };
+    }
     this.show({
       color: "yellow",
       icon: <IconAlertTriangle size={20} />,
@@ -59,7 +68,10 @@ export class ToastService {
     });
   }
 
-  public danger(options: Partial<NotificationData>) {
+  public danger(options: Partial<NotificationData> | string) {
+    if (typeof options === "string") {
+      options = { message: options };
+    }
     this.show({
       color: "red",
       icon: <IconX size={20} />,

package/src/utils/parseInput.ts

@@ -1,7 +1,7 @@
 import { type TObject, TypeBoxError } from "@alepha/core";
 import type { InputField } from "@alepha/react-form";
 import type { ReactNode } from "react";
-import type { ControlProps } from "../components/Control.tsx";
+import type { ControlProps } from "../components/form/Control.tsx";
 import { getDefaultIcon } from "./icons.tsx";
 import { prettyName } from "./string.ts";
 

package/dist/AlephaMantineProvider-DDbIijPF.js

@@ -1,96 +0,0 @@
-import { NestedView, useRouterEvents } from "@alepha/react";
-import { ModalsProvider } from "@mantine/modals";
-import { ColorSchemeScript, MantineProvider } from "@mantine/core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Notifications } from "@mantine/notifications";
-import { IconDashboard, IconFileText, IconHome, IconSearch, IconSettings, IconUser } from "@tabler/icons-react";
-import { NavigationProgress, nprogress } from "@mantine/nprogress";
-import { Spotlight } from "@mantine/spotlight";
-
-//#region src/components/Omnibar.tsx
-const defaultActions = [
-	{
-		id: "home",
-		label: "Home",
-		description: "Go to home page",
-		onClick: () => console.log("Home"),
-		leftSection: /* @__PURE__ */ jsx(IconHome, { size: 20 })
-	},
-	{
-		id: "dashboard",
-		label: "Dashboard",
-		description: "View your dashboard",
-		onClick: () => console.log("Dashboard"),
-		leftSection: /* @__PURE__ */ jsx(IconDashboard, { size: 20 })
-	},
-	{
-		id: "documents",
-		label: "Documents",
-		description: "Browse all documents",
-		onClick: () => console.log("Documents"),
-		leftSection: /* @__PURE__ */ jsx(IconFileText, { size: 20 })
-	},
-	{
-		id: "profile",
-		label: "Profile",
-		description: "View and edit your profile",
-		onClick: () => console.log("Profile"),
-		leftSection: /* @__PURE__ */ jsx(IconUser, { size: 20 })
-	},
-	{
-		id: "settings",
-		label: "Settings",
-		description: "Manage application settings",
-		onClick: () => console.log("Settings"),
-		leftSection: /* @__PURE__ */ jsx(IconSettings, { size: 20 })
-	}
-];
-const Omnibar = (props) => {
-	const actions = props.actions ?? defaultActions;
-	const shortcut = props.shortcut ?? "mod+K";
-	const searchPlaceholder = props.searchPlaceholder ?? "Search...";
-	const nothingFound = props.nothingFound ?? "Nothing found...";
-	return /* @__PURE__ */ jsx(Spotlight, {
-		actions,
-		shortcut,
-		searchProps: {
-			leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 20 }),
-			placeholder: searchPlaceholder
-		},
-		nothingFound
-	});
-};
-var Omnibar_default = Omnibar;
-
-//#endregion
-//#region src/components/AlephaMantineProvider.tsx
-const AlephaMantineProvider = (props) => {
-	useRouterEvents({
-		onBegin: () => {
-			nprogress.start();
-		},
-		onEnd: () => {
-			nprogress.complete();
-		}
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
-		defaultColorScheme: props.mantine?.defaultColorScheme,
-		...props.colorSchemeScript
-	}), /* @__PURE__ */ jsxs(MantineProvider, {
-		...props.mantine,
-		children: [
-			/* @__PURE__ */ jsx(Notifications, { ...props.notifications }),
-			/* @__PURE__ */ jsx(NavigationProgress, { ...props.navigationProgress }),
-			/* @__PURE__ */ jsxs(ModalsProvider, {
-				...props.modals,
-				children: [/* @__PURE__ */ jsx(Omnibar_default, { ...props.omnibar }), props.children ?? /* @__PURE__ */ jsx(NestedView, {})]
-			})
-		]
-	})] });
-};
-var AlephaMantineProvider_default = AlephaMantineProvider;
-
-//#endregion
-export { Omnibar_default as n, AlephaMantineProvider_default as t };
-//# sourceMappingURL=AlephaMantineProvider-DDbIijPF.js.map

package/dist/AlephaMantineProvider-DDbIijPF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AlephaMantineProvider-DDbIijPF.js","names":["defaultActions: SpotlightActionData[]","Omnibar"],"sources":["../src/components/Omnibar.tsx","../src/components/AlephaMantineProvider.tsx"],"sourcesContent":["import { Spotlight, type SpotlightActionData } from \"@mantine/spotlight\";\nimport {\n  IconDashboard,\n  IconFileText,\n  IconHome,\n  IconSearch,\n  IconSettings,\n  IconUser,\n} from \"@tabler/icons-react\";\n// biome-ignore lint/correctness/noUnusedImports: required\nimport React, { type ReactNode } from \"react\";\n\nexport interface OmnibarProps {\n  actions?: SpotlightActionData[];\n  shortcut?: string | string[];\n  searchPlaceholder?: string;\n  nothingFound?: ReactNode;\n}\n\nconst defaultActions: SpotlightActionData[] = [\n  {\n    id: \"home\",\n    label: \"Home\",\n    description: \"Go to home page\",\n    onClick: () => console.log(\"Home\"),\n    leftSection: <IconHome size={20} />,\n  },\n  {\n    id: \"dashboard\",\n    label: \"Dashboard\",\n    description: \"View your dashboard\",\n    onClick: () => console.log(\"Dashboard\"),\n    leftSection: <IconDashboard size={20} />,\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n    description: \"Browse all documents\",\n    onClick: () => console.log(\"Documents\"),\n    leftSection: <IconFileText size={20} />,\n  },\n  {\n    id: \"profile\",\n    label: \"Profile\",\n    description: \"View and edit your profile\",\n    onClick: () => console.log(\"Profile\"),\n    leftSection: <IconUser size={20} />,\n  },\n  {\n    id: \"settings\",\n    label: \"Settings\",\n    description: \"Manage application settings\",\n    onClick: () => console.log(\"Settings\"),\n    leftSection: <IconSettings size={20} />,\n  },\n];\n\nconst Omnibar = (props: OmnibarProps) => {\n  const actions = props.actions ?? defaultActions;\n  const shortcut = props.shortcut ?? \"mod+K\";\n  const searchPlaceholder = props.searchPlaceholder ?? \"Search...\";\n  const nothingFound = props.nothingFound ?? \"Nothing found...\";\n\n  return (\n    <Spotlight\n      actions={actions}\n      shortcut={shortcut}\n      searchProps={{\n        leftSection: <IconSearch size={20} />,\n        placeholder: searchPlaceholder,\n      }}\n      nothingFound={nothingFound}\n    />\n  );\n};\n\nexport default Omnibar;\n","import { NestedView, useRouterEvents } from \"@alepha/react\";\nimport type {\n  ColorSchemeScriptProps,\n  MantineProviderProps,\n} from \"@mantine/core\";\nimport { ColorSchemeScript, MantineProvider } from \"@mantine/core\";\nimport { ModalsProvider, type ModalsProviderProps } from \"@mantine/modals\";\nimport { Notifications, type NotificationsProps } from \"@mantine/notifications\";\nimport type { NavigationProgressProps } from \"@mantine/nprogress\";\nimport { NavigationProgress, nprogress } from \"@mantine/nprogress\";\nimport type { ReactNode } from \"react\";\nimport Omnibar, { type OmnibarProps } from \"./Omnibar\";\n\nexport interface AlephaMantineProviderProps {\n  children?: ReactNode;\n  mantine?: MantineProviderProps;\n  colorSchemeScript?: ColorSchemeScriptProps;\n  navigationProgress?: NavigationProgressProps;\n  notifications?: NotificationsProps;\n  modals?: ModalsProviderProps;\n  omnibar?: OmnibarProps;\n}\n\nconst AlephaMantineProvider = (props: AlephaMantineProviderProps) => {\n  useRouterEvents({\n    onBegin: () => {\n      nprogress.start();\n    },\n    onEnd: () => {\n      nprogress.complete();\n    },\n  });\n\n  return (\n    <>\n      <ColorSchemeScript\n        defaultColorScheme={props.mantine?.defaultColorScheme}\n        {...props.colorSchemeScript}\n      />\n      <MantineProvider {...props.mantine}>\n        <Notifications {...props.notifications} />\n        <NavigationProgress {...props.navigationProgress} />\n        <ModalsProvider {...props.modals}>\n          <Omnibar {...props.omnibar} />\n          {props.children ?? <NestedView />}\n        </ModalsProvider>\n      </MantineProvider>\n    </>\n  );\n};\n\nexport default AlephaMantineProvider;\n"],"mappings":";;;;;;;;;;;AAmBA,MAAMA,iBAAwC;CAC5C;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,OAAO;EAClC,aAAa,oBAAC,YAAS,MAAM,KAAM;EACpC;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,YAAY;EACvC,aAAa,oBAAC,iBAAc,MAAM,KAAM;EACzC;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,YAAY;EACvC,aAAa,oBAAC,gBAAa,MAAM,KAAM;EACxC;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,UAAU;EACrC,aAAa,oBAAC,YAAS,MAAM,KAAM;EACpC;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,WAAW;EACtC,aAAa,oBAAC,gBAAa,MAAM,KAAM;EACxC;CACF;AAED,MAAM,WAAW,UAAwB;CACvC,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,oBAAoB,MAAM,qBAAqB;CACrD,MAAM,eAAe,MAAM,gBAAgB;AAE3C,QACE,oBAAC;EACU;EACC;EACV,aAAa;GACX,aAAa,oBAAC,cAAW,MAAM,KAAM;GACrC,aAAa;GACd;EACa;GACd;;AAIN,sBAAe;;;;ACrDf,MAAM,yBAAyB,UAAsC;AACnE,iBAAgB;EACd,eAAe;AACb,aAAU,OAAO;;EAEnB,aAAa;AACX,aAAU,UAAU;;EAEvB,CAAC;AAEF,QACE,4CACE,oBAAC;EACC,oBAAoB,MAAM,SAAS;EACnC,GAAI,MAAM;GACV,EACF,qBAAC;EAAgB,GAAI,MAAM;;GACzB,oBAAC,iBAAc,GAAI,MAAM,gBAAiB;GAC1C,oBAAC,sBAAmB,GAAI,MAAM,qBAAsB;GACpD,qBAAC;IAAe,GAAI,MAAM;eACxB,oBAACC,mBAAQ,GAAI,MAAM,UAAW,EAC7B,MAAM,YAAY,oBAAC,eAAa;KAClB;;GACD,IACjB;;AAIP,oCAAe"}

package/dist/AlephaMantineProvider-pOu8hOzK.js

@@ -1,3 +0,0 @@
-import { t as AlephaMantineProvider_default } from "./AlephaMantineProvider-DDbIijPF.js";
-
-export { AlephaMantineProvider_default as default };

package/src/components/Action.tsx

@@ -1,345 +0,0 @@
-import {
-  type RouterGoOptions,
-  type UseActiveOptions,
-  useActive,
-  useAlepha,
-  useRouter,
-} from "@alepha/react";
-import { type FormModel, useFormState } from "@alepha/react-form";
-import {
-  Button,
-  type ButtonProps,
-  Flex,
-  Menu,
-  Tooltip,
-  type TooltipProps,
-} from "@mantine/core";
-import { IconChevronRight } from "@tabler/icons-react";
-import { type ReactNode, useState } from "react";
-
-export interface ActionMenuItem {
-  /**
-   * Menu item type
-   */
-  type?: "item" | "divider" | "label";
-
-  /**
-   * Label text for the menu item
-   */
-  label?: string;
-
-  /**
-   * Icon element to display before the label
-   */
-  icon?: ReactNode;
-
-  /**
-   * Click handler for menu items
-   */
-  onClick?: () => void;
-
-  /**
-   * Color for the menu item (e.g., "red" for danger actions)
-   */
-  color?: string;
-
-  /**
-   * Nested submenu items
-   */
-  children?: ActionMenuItem[];
-}
-
-export interface ActionMenuConfig {
-  /**
-   * Array of menu items to display
-   */
-  items: ActionMenuItem[];
-
-  /**
-   * Menu position relative to the button
-   */
-  position?:
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end"
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "left"
-    | "right";
-
-  /**
-   * Menu width
-   */
-  width?: number | string;
-
-  /**
-   * Menu shadow
-   */
-  shadow?: "xs" | "sm" | "md" | "lg" | "xl";
-}
-
-export interface ActionCommonProps extends ButtonProps {
-  children?: ReactNode;
-  textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
-
-  /**
-   * Tooltip to display on hover. Can be a string for simple tooltips
-   * or a TooltipProps object for advanced configuration.
-   */
-  tooltip?: string | TooltipProps;
-
-  /**
-   * Menu configuration. When provided, the action will display a dropdown menu.
-   */
-  menu?: ActionMenuConfig;
-
-  /**
-   * If set, a confirmation dialog will be shown before performing the action.
-   * If `true`, a default title and message will be used.
-   * If a string, it will be used as the message with a default title.
-   * If an object, it can contain `title` and `message` properties to customize the dialog.
-   */
-  confirm?: boolean | string | { title?: string; message: string };
-}
-
-export type ActionProps = ActionCommonProps &
-  (ActiveHrefProps | ActionClickProps | ActionSubmitProps | {});
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-// Helper function to render menu items recursively
-const renderMenuItem = (item: ActionMenuItem, index: number): ReactNode => {
-  // Render divider
-  if (item.type === "divider") {
-    return <Menu.Divider key={index} />;
-  }
-
-  // Render label
-  if (item.type === "label") {
-    return <Menu.Label key={index}>{item.label}</Menu.Label>;
-  }
-
-  // Render submenu if has children
-  if (item.children && item.children.length > 0) {
-    return (
-      <Menu key={index} trigger="hover" position="right-start" offset={2}>
-        <Menu.Target>
-          <Menu.Item
-            leftSection={item.icon}
-            rightSection={<IconChevronRight size={14} />}
-          >
-            {item.label}
-          </Menu.Item>
-        </Menu.Target>
-        <Menu.Dropdown>
-          {item.children.map((child, childIndex) =>
-            renderMenuItem(child, childIndex),
-          )}
-        </Menu.Dropdown>
-      </Menu>
-    );
-  }
-
-  // Render regular menu item
-  return (
-    <Menu.Item
-      key={index}
-      leftSection={item.icon}
-      onClick={item.onClick}
-      color={item.color}
-    >
-      {item.label}
-    </Menu.Item>
-  );
-};
-
-const Action = (_props: ActionProps) => {
-  const props = { variant: "subtle", ..._props };
-  const { tooltip, menu, ...restProps } = props;
-
-  if (props.leftSection && !props.children) {
-    restProps.className ??= "mantine-Action-iconOnly";
-    restProps.p ??= "xs";
-  }
-
-  if (props.textVisibleFrom) {
-    const { children, textVisibleFrom, leftSection, ...rest } = restProps;
-    return (
-      <>
-        <Flex w={"100%"} visibleFrom={textVisibleFrom}>
-          <Action
-            flex={1}
-            {...rest}
-            leftSection={leftSection}
-            tooltip={tooltip}
-            menu={menu}
-          >
-            {children}
-          </Action>
-        </Flex>
-        <Flex w={"100%"} hiddenFrom={textVisibleFrom}>
-          <Action px={"xs"} {...rest} tooltip={tooltip} menu={menu}>
-            {leftSection}
-          </Action>
-        </Flex>
-      </>
-    );
-  }
-
-  const renderAction = () => {
-    if ("href" in restProps && restProps.href) {
-      return (
-        <ActionHref {...restProps} href={restProps.href}>
-          {restProps.children}
-        </ActionHref>
-      );
-    }
-
-    if ("onClick" in restProps && restProps.onClick) {
-      return (
-        <ActionClick {...restProps} onClick={restProps.onClick}>
-          {restProps.children}
-        </ActionClick>
-      );
-    }
-
-    if ("form" in restProps && restProps.form) {
-      return (
-        <ActionSubmit {...restProps} form={restProps.form}>
-          {restProps.children}
-        </ActionSubmit>
-      );
-    }
-
-    return <Button {...(restProps as any)}>{restProps.children}</Button>;
-  };
-
-  let actionElement = renderAction();
-
-  // Wrap with Menu if provided
-  if (menu) {
-    actionElement = (
-      <Menu
-        position={menu.position || "bottom-start"}
-        width={menu.width || 200}
-        shadow={menu.shadow || "md"}
-      >
-        <Menu.Target>{actionElement}</Menu.Target>
-        <Menu.Dropdown>
-          {menu.items.map((item, index) => renderMenuItem(item, index))}
-        </Menu.Dropdown>
-      </Menu>
-    );
-  }
-
-  // Wrap with Tooltip if provided
-  if (tooltip) {
-    const tooltipProps: TooltipProps =
-      typeof tooltip === "string"
-        ? { label: tooltip, children: actionElement }
-        : { ...tooltip, children: actionElement };
-
-    return <Tooltip {...tooltipProps} />;
-  }
-
-  return actionElement;
-};
-
-export default Action;
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-export interface ActionSubmitProps extends ButtonProps {
-  form: FormModel<any>;
-}
-
-/**
- * Action button that submits a form with loading and disabled state handling.
- */
-const ActionSubmit = (props: ActionSubmitProps) => {
-  const { form, ...buttonProps } = props;
-  const state = useFormState(form);
-  return (
-    <Button
-      {...buttonProps}
-      loading={state.loading}
-      disabled={state.loading}
-      type={"submit"}
-    >
-      {props.children}
-    </Button>
-  );
-};
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-export interface ActionClickProps extends ButtonProps {
-  onClick: (e: any) => any;
-}
-
-/**
- * Basic action button that handles click events with loading and error handling.
- */
-const ActionClick = (props: ActionClickProps) => {
-  const [pending, setPending] = useState(false);
-  const alepha = useAlepha();
-
-  const onClick = async (e: any) => {
-    setPending(true);
-    try {
-      await props.onClick(e);
-    } catch (e) {
-      console.error(e);
-      await alepha.events.emit("form:submit:error", {
-        id: "action",
-        error: e as Error,
-      });
-    } finally {
-      setPending(false);
-    }
-  };
-
-  return (
-    <Button
-      {...props}
-      disabled={pending || props.disabled}
-      loading={pending}
-      onClick={onClick}
-    >
-      {props.children}
-    </Button>
-  );
-};
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-export interface ActiveHrefProps extends ButtonProps {
-  href: string;
-  active?: Partial<UseActiveOptions> | false;
-  routerGoOptions?: RouterGoOptions;
-}
-
-/**
- * Action for navigation with active state support.
- */
-const ActionHref = (props: ActiveHrefProps) => {
-  const { active: options, 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);
-
-  return (
-    <Button
-      component={"a"}
-      loading={isPending}
-      {...anchorProps}
-      {...buttonProps}
-      variant={isActive && options !== false ? "filled" : "subtle"}
-    >
-      {props.children}
-    </Button>
-  );
-};