@duskmoon-dev/components 0.1.2

package/dist/components/dm-page-header/index.js

@@ -0,0 +1,925 @@
+"use client";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/button.ts
+var buttonBaseClass = "btn";
+var buttonColorClasses = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  tertiary: "btn-tertiary",
+  info: "btn-info",
+  success: "btn-success",
+  warning: "btn-warning",
+  error: "btn-error"
+};
+var buttonAppearanceClasses = {
+  filled: "",
+  outline: "btn-outline",
+  tonal: "btn-tonal",
+  ghost: "btn-ghost",
+  text: "btn-text"
+};
+var buttonShapeClasses = {
+  rect: "",
+  circle: "btn-circle",
+  square: "btn-square"
+};
+var buttonSizeClasses = {
+  xs: "btn-xs",
+  sm: "btn-sm",
+  md: "btn-md",
+  lg: "btn-lg"
+};
+var buttonBlockClass = "btn-block";
+var buttonIsLoadingClass = "btn-loading";
+function getButtonClasses({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  className
+}) {
+  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+}
+
+// src/components/button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Button({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  disabled,
+  ref,
+  ...props
+}) {
+  const classes = getButtonClasses({
+    color,
+    appearance,
+    shape,
+    size,
+    block,
+    isLoading,
+    className
+  });
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    className: classes,
+    disabled: disabled || isLoading,
+    "aria-busy": isLoading,
+    "aria-disabled": disabled || isLoading,
+    ...props,
+    children: [
+      isLoading && /* @__PURE__ */ jsx("span", {
+        className: "btn-spinner"
+      }),
+      !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
+        className: "btn-icon-left",
+        children: leftIcon
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "btn-content",
+        children
+      }),
+      !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
+        className: "btn-icon-right",
+        children: rightIcon
+      })
+    ]
+  });
+}
+// src/components/breadcrumb/Breadcrumb.tsx
+import React, { forwardRef } from "react";
+
+// src/classes/breadcrumb.ts
+var breadcrumbBaseClass = "breadcrumbs";
+var breadcrumbItemClass = "breadcrumb-item";
+var breadcrumbItemActiveClass = "breadcrumb-item-active";
+var breadcrumbItemDisabledClass = "breadcrumb-item-disabled";
+var breadcrumbLinkClass = "breadcrumb-link";
+var breadcrumbSeparatorClass = "breadcrumb-separator";
+var breadcrumbIconClass = "breadcrumb-icon";
+var breadcrumbMenuClass = "breadcrumb-menu";
+var breadcrumbMenuListClass = "breadcrumb-menu-list";
+var breadcrumbMenuItemClass = "breadcrumb-menu-item";
+function getBreadcrumbClasses({ className }) {
+  return cn(breadcrumbBaseClass, className);
+}
+function getBreadcrumbItemClasses({
+  active,
+  disabled,
+  className
+}) {
+  return cn(breadcrumbItemClass, active && breadcrumbItemActiveClass, disabled && breadcrumbItemDisabledClass, className);
+}
+function getBreadcrumbLinkClasses({
+  disabled,
+  className
+}) {
+  return cn(breadcrumbLinkClass, disabled && breadcrumbItemDisabledClass, className);
+}
+
+// src/components/breadcrumb/Breadcrumb.tsx
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+var defaultSeparator = "/";
+function isSeparatorItem(item) {
+  return "type" in item && item.type === "separator";
+}
+function hasNode(node) {
+  return node !== undefined && node !== null && node !== false;
+}
+function getItemTitle(item) {
+  if ("breadcrumbName" in item && hasNode(item.breadcrumbName)) {
+    return item.breadcrumbName;
+  }
+  return item.title ?? item.label;
+}
+function replacePathParams(path, params) {
+  return path.replace(/:([^/]+)/g, (token, key) => {
+    const value = params?.[key];
+    return value === undefined ? token : encodeURIComponent(String(value));
+  });
+}
+function normalizePathSegment(path) {
+  return path.replace(/^\/+|\/+$/g, "");
+}
+function buildPaths(routes, routeIndex, params) {
+  return routes.slice(0, routeIndex + 1).reduce((paths, route) => {
+    if (!route.path) {
+      return paths;
+    }
+    const path = normalizePathSegment(replacePathParams(route.path, params));
+    if (path) {
+      paths.push(path);
+    }
+    return paths;
+  }, []);
+}
+function getHref(item, paths) {
+  if (item.href) {
+    return item.href;
+  }
+  if (!item.path || paths.length === 0) {
+    return;
+  }
+  return `/${paths.join("/")}`;
+}
+function activateOnKeyboard(event) {
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+  event.preventDefault();
+  event.currentTarget.click();
+}
+function renderItemBody(item) {
+  const title = getItemTitle(item);
+  return /* @__PURE__ */ jsxs2(Fragment, {
+    children: [
+      item.icon ? /* @__PURE__ */ jsx2("span", {
+        className: breadcrumbIconClass,
+        "aria-hidden": "true",
+        children: item.icon
+      }) : null,
+      hasNode(title) ? title : null
+    ]
+  });
+}
+function routeChildrenToMenu(children) {
+  if (!children?.length) {
+    return;
+  }
+  return {
+    items: children.map((child, index) => ({
+      key: child.key ?? child.path ?? index,
+      label: getItemTitle(child),
+      href: child.href,
+      path: child.path,
+      icon: child.icon,
+      disabled: child.disabled,
+      onClick: child.onClick,
+      children: child.children?.map((nested, nestedIndex) => ({
+        key: nested.key ?? nested.path ?? nestedIndex,
+        label: getItemTitle(nested),
+        href: nested.href,
+        path: nested.path,
+        icon: nested.icon,
+        disabled: nested.disabled,
+        onClick: nested.onClick
+      }))
+    }))
+  };
+}
+function renderMenuItems(menu, items = []) {
+  return items.map((item, index) => {
+    const key = item.key ?? item.path ?? index;
+    const href = item.href ?? item.path;
+    const label = renderItemBody(item);
+    function handleClick(event) {
+      if (item.disabled) {
+        event.preventDefault();
+        return;
+      }
+      item.onClick?.(event);
+      menu.onClick?.({ key, item, domEvent: event });
+    }
+    const content = item.disabled ? /* @__PURE__ */ jsx2("span", {
+      role: "menuitem",
+      "aria-disabled": "true",
+      className: getBreadcrumbLinkClasses({
+        disabled: true,
+        className: breadcrumbMenuItemClass
+      }),
+      children: label
+    }) : href ? /* @__PURE__ */ jsx2("a", {
+      role: "menuitem",
+      className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
+      href,
+      onClick: handleClick,
+      children: label
+    }) : /* @__PURE__ */ jsx2("button", {
+      type: "button",
+      role: "menuitem",
+      className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
+      onClick: handleClick,
+      children: label
+    });
+    return /* @__PURE__ */ jsxs2("li", {
+      children: [
+        content,
+        item.children?.length ? /* @__PURE__ */ jsx2("ul", {
+          className: breadcrumbMenuListClass,
+          role: "menu",
+          children: renderMenuItems(menu, item.children)
+        }) : null
+      ]
+    }, key);
+  });
+}
+function renderDefaultItemContent(item, paths, active) {
+  const body = renderItemBody(item);
+  if (item.disabled) {
+    return body;
+  }
+  const href = item.href ?? (!active ? getHref(item, paths) : undefined);
+  if (href) {
+    return /* @__PURE__ */ jsx2("a", {
+      className: getBreadcrumbLinkClasses({}),
+      href,
+      onClick: item.onClick,
+      children: body
+    });
+  }
+  if (item.onClick) {
+    return /* @__PURE__ */ jsx2("span", {
+      role: "button",
+      tabIndex: 0,
+      className: getBreadcrumbLinkClasses({}),
+      onClick: item.onClick,
+      onKeyDown: activateOnKeyboard,
+      children: body
+    });
+  }
+  return body;
+}
+function renderMenuItem(item, menu, children, disabled) {
+  return /* @__PURE__ */ jsxs2("details", {
+    className: getBreadcrumbItemClasses({
+      disabled,
+      className: cn(breadcrumbMenuClass, item.className)
+    }),
+    "aria-disabled": disabled || undefined,
+    children: [
+      /* @__PURE__ */ jsx2("summary", {
+        className: getBreadcrumbLinkClasses({ disabled }),
+        children
+      }),
+      /* @__PURE__ */ jsx2("ul", {
+        className: breadcrumbMenuListClass,
+        role: "menu",
+        children: renderMenuItems(menu, menu.items)
+      })
+    ]
+  });
+}
+var Breadcrumb = forwardRef(({
+  items,
+  routes,
+  params = {},
+  separator = defaultSeparator,
+  itemRender,
+  className,
+  children,
+  "aria-label": ariaLabel = "Breadcrumb",
+  ...props
+}, ref) => {
+  const entries = items ?? routes;
+  if (!entries?.length) {
+    return /* @__PURE__ */ jsx2("nav", {
+      ...props,
+      ref,
+      "aria-label": ariaLabel,
+      className: getBreadcrumbClasses({ className }),
+      children
+    });
+  }
+  const routeEntries = entries.filter((item) => !isSeparatorItem(item));
+  let routeIndex = -1;
+  let previousRenderedItemWasSeparator = true;
+  return /* @__PURE__ */ jsx2("nav", {
+    ...props,
+    ref,
+    "aria-label": ariaLabel,
+    className: getBreadcrumbClasses({ className }),
+    children: entries.map((entry, index) => {
+      if (isSeparatorItem(entry)) {
+        previousRenderedItemWasSeparator = true;
+        return /* @__PURE__ */ jsx2("span", {
+          className: cn(breadcrumbSeparatorClass, entry.className),
+          "aria-hidden": "true",
+          children: entry.separator ?? separator
+        }, entry.key ?? `separator-${index}`);
+      }
+      routeIndex += 1;
+      const currentRouteIndex = routeIndex;
+      const paths = buildPaths(routeEntries, currentRouteIndex, params);
+      const active = currentRouteIndex === routeEntries.length - 1;
+      const menu = entry.menu ?? routeChildrenToMenu(entry.children);
+      const content = itemRender?.(entry, params, routeEntries, paths) ?? renderDefaultItemContent(entry, paths, active);
+      const applyActiveClass = active && !itemRender && !entry.href && !entry.onClick;
+      const insertSeparator = !previousRenderedItemWasSeparator;
+      previousRenderedItemWasSeparator = false;
+      return /* @__PURE__ */ jsxs2(React.Fragment, {
+        children: [
+          insertSeparator ? /* @__PURE__ */ jsx2("span", {
+            className: breadcrumbSeparatorClass,
+            "aria-hidden": "true",
+            children: separator
+          }) : null,
+          menu?.items?.length ? renderMenuItem(entry, menu, content, entry.disabled) : /* @__PURE__ */ jsx2("span", {
+            className: getBreadcrumbItemClasses({
+              active: applyActiveClass,
+              disabled: entry.disabled,
+              className: entry.className
+            }),
+            "aria-current": active ? "page" : undefined,
+            "aria-disabled": entry.disabled || undefined,
+            children: content
+          })
+        ]
+      }, entry.key ?? entry.href ?? entry.path ?? currentRouteIndex);
+    })
+  });
+});
+Breadcrumb.displayName = "Breadcrumb";
+// src/components/dropdown/Dropdown.tsx
+import {
+  cloneElement,
+  forwardRef as forwardRef2,
+  isValidElement,
+  useId,
+  useState
+} from "react";
+
+// src/classes/dropdown.ts
+var dropdownWrapperClass = "dropdown-wrapper";
+var dropdownBaseClass = "popover dropdown";
+var dropdownOpenClass = "popover-show dropdown-open";
+var dropdownArrowClass = "popover-arrow dropdown-arrow";
+var dropdownMenuClass = "menu dropdown-menu";
+var dropdownButtonClass = "dropdown-button";
+var dropdownPlacementClasses = {
+  top: "popover-top dropdown-top",
+  bottom: "popover-bottom dropdown-bottom",
+  left: "popover-left dropdown-left",
+  right: "popover-right dropdown-right",
+  topLeft: "popover-top dropdown-top-left",
+  topRight: "popover-top dropdown-top-right",
+  bottomLeft: "popover-bottom dropdown-bottom-left",
+  bottomRight: "popover-bottom dropdown-bottom-right"
+};
+function getDropdownClasses({
+  placement = "bottomLeft",
+  open,
+  arrow,
+  className
+}) {
+  return cn(dropdownBaseClass, dropdownPlacementClasses[placement], open && dropdownOpenClass, !arrow && "popover-no-arrow dropdown-no-arrow", className);
+}
+
+// src/classes/menu.ts
+var menuBaseClass = "menu";
+var menuShowClass = "menu-show";
+var menuItemClass = "menu-item";
+var menuItemActiveClass = "menu-item-active";
+var menuItemDisabledClass = "menu-item-disabled";
+var menuItemIconClass = "menu-item-icon";
+var menuItemTrailingClass = "menu-item-trailing";
+var menuItemSubmenuClass = "menu-item-submenu";
+var menuDividerClass = "menu-divider";
+var menuLabelClass = "menu-label";
+var menuSubmenuClass = "menu-submenu";
+var menuCompactClass = "menu-compact";
+var menuWideClass = "menu-wide";
+var menuModeClasses = {
+  vertical: "menu-vertical",
+  horizontal: "menu-horizontal",
+  inline: "menu-inline"
+};
+var menuThemeClasses = {
+  light: "",
+  dark: "menu-dark menu-surface-container-highest"
+};
+var menuSizeClasses = {
+  sm: menuCompactClass,
+  md: "",
+  lg: menuWideClass
+};
+function getMenuClasses({
+  mode = "vertical",
+  theme = "light",
+  size = "md",
+  inlineCollapsed,
+  disabled,
+  className
+}) {
+  return cn(menuBaseClass, menuShowClass, menuModeClasses[mode], menuThemeClasses[theme], menuSizeClasses[size], inlineCollapsed && "menu-inline-collapsed", disabled && menuItemDisabledClass, className);
+}
+function getMenuItemClasses({
+  active,
+  disabled,
+  danger,
+  submenu,
+  className
+}) {
+  return cn(menuItemClass, active && menuItemActiveClass, disabled && menuItemDisabledClass, danger && "menu-item-danger", submenu && menuItemSubmenuClass, className);
+}
+
+// src/components/dropdown/Dropdown.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function hasTrigger(triggers, trigger) {
+  return (triggers ?? ["hover"]).includes(trigger);
+}
+function callHandler(handler, event) {
+  handler?.(event);
+}
+function renderMenuItem2(item, onClick, close) {
+  if (item.type === "divider") {
+    return /* @__PURE__ */ jsx3("li", {
+      className: menuDividerClass
+    }, String(item.key));
+  }
+  return /* @__PURE__ */ jsx3("li", {
+    children: /* @__PURE__ */ jsxs3("button", {
+      type: "button",
+      className: cn(menuItemClass, item.danger && "menu-item-danger", item.className),
+      disabled: item.disabled,
+      onClick: (event) => {
+        onClick?.({ key: String(item.key), item, domEvent: event });
+        close();
+      },
+      children: [
+        item.icon ? /* @__PURE__ */ jsx3("span", {
+          className: "menu-item-icon",
+          children: item.icon
+        }) : null,
+        /* @__PURE__ */ jsx3("span", {
+          children: item.label
+        })
+      ]
+    })
+  }, String(item.key));
+}
+var DropdownRoot = forwardRef2(({
+  arrow,
+  children,
+  className,
+  defaultOpen,
+  destroyPopupOnHide,
+  disabled,
+  dropdownRender,
+  menu,
+  onContextMenu,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onOpenChange,
+  open,
+  overlay,
+  placement = "bottomLeft",
+  trigger = ["hover"],
+  ...props
+}, ref) => {
+  const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
+  const isControlled = open !== undefined;
+  const visible = isControlled ? open : internalOpen;
+  const overlayId = useId();
+  function setVisible(nextOpen) {
+    if (disabled)
+      return;
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  const close = () => setVisible(false);
+  const toggleVisible = () => setVisible(!visible);
+  const menuNode = overlay ?? (menu?.items ? /* @__PURE__ */ jsx3("ul", {
+    className: dropdownMenuClass,
+    children: menu.items.map((item) => renderMenuItem2(item, menu.onClick, close))
+  }) : null);
+  const popup = dropdownRender ? dropdownRender(menuNode) : menuNode;
+  const shouldRenderPopup = !destroyPopupOnHide || visible;
+  const triggerProps = {
+    "aria-controls": visible ? overlayId : undefined,
+    "aria-expanded": visible || undefined,
+    onMouseEnter: hasTrigger(trigger, "hover") ? () => setVisible(true) : undefined,
+    onMouseLeave: hasTrigger(trigger, "hover") ? () => setVisible(false) : undefined,
+    onClick: hasTrigger(trigger, "click") ? toggleVisible : undefined,
+    onContextMenu: hasTrigger(trigger, "contextMenu") ? (event) => {
+      event.preventDefault();
+      toggleVisible();
+    } : undefined
+  };
+  const triggerNode = isValidElement(children) ? cloneElement(children, {
+    "aria-controls": triggerProps["aria-controls"] ?? children.props["aria-controls"],
+    "aria-expanded": triggerProps["aria-expanded"] ?? children.props["aria-expanded"],
+    onMouseEnter: (event) => {
+      callHandler(children.props.onMouseEnter, event);
+      triggerProps.onMouseEnter?.();
+      onMouseEnter?.(event);
+    },
+    onMouseLeave: (event) => {
+      callHandler(children.props.onMouseLeave, event);
+      triggerProps.onMouseLeave?.();
+      onMouseLeave?.(event);
+    },
+    onClick: (event) => {
+      callHandler(children.props.onClick, event);
+      triggerProps.onClick?.();
+      onClick?.(event);
+    },
+    onContextMenu: (event) => {
+      callHandler(children.props.onContextMenu, event);
+      triggerProps.onContextMenu?.(event);
+      onContextMenu?.(event);
+    }
+  }) : /* @__PURE__ */ jsx3("span", {
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled || undefined,
+    "aria-controls": triggerProps["aria-controls"],
+    "aria-expanded": triggerProps["aria-expanded"],
+    onMouseEnter: (event) => {
+      triggerProps.onMouseEnter?.();
+      onMouseEnter?.(event);
+    },
+    onMouseLeave: (event) => {
+      triggerProps.onMouseLeave?.();
+      onMouseLeave?.(event);
+    },
+    onClick: (event) => {
+      triggerProps.onClick?.();
+      onClick?.(event);
+    },
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        triggerProps.onClick?.();
+      }
+    },
+    onContextMenu: (event) => {
+      triggerProps.onContextMenu?.(event);
+      onContextMenu?.(event);
+    },
+    children
+  });
+  return /* @__PURE__ */ jsxs3("span", {
+    ...props,
+    ref,
+    className: dropdownWrapperClass,
+    children: [
+      triggerNode,
+      shouldRenderPopup ? /* @__PURE__ */ jsxs3("span", {
+        id: overlayId,
+        role: "menu",
+        className: getDropdownClasses({
+          placement,
+          open: visible,
+          arrow,
+          className
+        }),
+        children: [
+          popup,
+          arrow ? /* @__PURE__ */ jsx3("span", {
+            className: dropdownArrowClass
+          }) : null
+        ]
+      }) : null
+    ]
+  });
+});
+DropdownRoot.displayName = "Dropdown";
+var DropdownButton = forwardRef2(({
+  buttonsRender,
+  children,
+  disabled,
+  menu,
+  onClick,
+  trigger = ["click"],
+  ...props
+}, ref) => {
+  const buttons = [
+    /* @__PURE__ */ jsx3(Button, {
+      disabled,
+      onClick,
+      children
+    }, "primary"),
+    /* @__PURE__ */ jsx3(Button, {
+      "aria-label": "Open dropdown",
+      disabled,
+      children: "v"
+    }, "trigger")
+  ];
+  const renderedButtons = buttonsRender ? buttonsRender(buttons) : buttons;
+  return /* @__PURE__ */ jsx3(DropdownRoot, {
+    ...props,
+    ref,
+    menu,
+    trigger,
+    disabled,
+    children: /* @__PURE__ */ jsx3("span", {
+      className: dropdownButtonClass,
+      children: renderedButtons
+    })
+  });
+});
+DropdownButton.displayName = "Dropdown.Button";
+var Dropdown = Object.assign(DropdownRoot, {
+  Button: DropdownButton
+});
+// src/components/dm-toolbar/DmToolbar.tsx
+import { useMemo } from "react";
+
+// src/classes/dm-toolbar.ts
+var dmToolbarBaseClass = "dm-toolbar";
+var dmToolbarItemClass = "dm-toolbar-item";
+var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
+var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
+var dmToolbarMoreClass = "dm-toolbar-more";
+function getDmToolbarClasses({
+  className
+}) {
+  return cn(dmToolbarBaseClass, className);
+}
+function getDmToolbarItemClasses({
+  primary,
+  className
+}) {
+  return cn(dmToolbarItemClass, primary ? dmToolbarPrimaryItemClass : dmToolbarSecondaryItemClass, className);
+}
+
+// src/components/dm-toolbar/DmToolbar.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function isPrimary(item) {
+  return item.type === "primary";
+}
+function renderToolbarItem(item, index) {
+  const {
+    title,
+    menu,
+    type,
+    htmlType = "button",
+    color,
+    appearance,
+    ...buttonPropsWithKey
+  } = item;
+  const buttonProps = { ...buttonPropsWithKey };
+  delete buttonProps.key;
+  const button = /* @__PURE__ */ jsx4(Button, {
+    ...buttonProps,
+    type: htmlType,
+    color: color ?? (type === "primary" ? "primary" : "secondary"),
+    appearance: appearance ?? (type === "primary" ? "filled" : "outline"),
+    children: title
+  });
+  if (!menu?.items?.length)
+    return button;
+  return /* @__PURE__ */ jsx4(Dropdown, {
+    trigger: ["click"],
+    menu,
+    children: button
+  }, `dropdown-${index}`);
+}
+function toOverflowMenu(items) {
+  return {
+    items: items.map((item, index) => ({
+      key: item.key ?? index,
+      label: item.title,
+      disabled: item.disabled
+    })),
+    onClick: ({ key, domEvent }) => {
+      const target = items.find((item, index) => String(item.key ?? index) === key);
+      target?.onClick?.(domEvent);
+    }
+  };
+}
+function DmToolbar({
+  items = [],
+  className,
+  style,
+  moreText = "More",
+  maxVisibleSecondaryItems
+}) {
+  const { visibleSecondaryItems, overflowSecondaryItems, primaryItems } = useMemo(() => {
+    const primaryItems2 = items.filter(isPrimary);
+    const secondaryItems = items.filter((item) => !isPrimary(item));
+    const visibleLimit = maxVisibleSecondaryItems === undefined ? secondaryItems.length : Math.max(0, maxVisibleSecondaryItems);
+    const visibleSecondaryItems2 = visibleLimit === 0 ? [] : secondaryItems.slice(-visibleLimit);
+    const overflowSecondaryItems2 = visibleLimit >= secondaryItems.length ? [] : secondaryItems.slice(0, secondaryItems.length - visibleLimit);
+    return { visibleSecondaryItems: visibleSecondaryItems2, overflowSecondaryItems: overflowSecondaryItems2, primaryItems: primaryItems2 };
+  }, [items, maxVisibleSecondaryItems]);
+  const showMore = overflowSecondaryItems.length > 0;
+  return /* @__PURE__ */ jsxs4("div", {
+    className: getDmToolbarClasses({ className }),
+    style,
+    children: [
+      visibleSecondaryItems.map((item, index) => /* @__PURE__ */ jsx4("span", {
+        className: getDmToolbarItemClasses({}),
+        children: renderToolbarItem(item, index)
+      }, item.key ?? `secondary-${index}`)),
+      showMore ? /* @__PURE__ */ jsx4(Dropdown, {
+        trigger: ["click"],
+        menu: toOverflowMenu(overflowSecondaryItems),
+        children: /* @__PURE__ */ jsx4(Button, {
+          type: "button",
+          className: dmToolbarMoreClass,
+          color: "secondary",
+          appearance: "outline",
+          children: moreText
+        })
+      }) : null,
+      primaryItems.map((item, index) => /* @__PURE__ */ jsx4("span", {
+        className: getDmToolbarItemClasses({ primary: true }),
+        children: renderToolbarItem(item, index)
+      }, item.key ?? `primary-${index}`))
+    ]
+  });
+}
+DmToolbar.displayName = "DmToolbar";
+// src/components/dm-page-header/DmPageHeader.tsx
+import React4, { useMemo as useMemo2 } from "react";
+
+// src/classes/dm-page-header.ts
+var dmPageHeaderBaseClass = "dm-page-header";
+var dmPageHeaderMainClass = "dm-page-header-main";
+var dmPageHeaderBackClass = "dm-page-header-back";
+var dmPageHeaderDividerClass = "dm-page-header-divider";
+var dmPageHeaderContentClass = "dm-page-header-content";
+var dmPageHeaderTitleClass = "dm-page-header-title";
+var dmPageHeaderTitleListClass = "dm-page-header-title-list";
+var dmPageHeaderTitleItemClass = "dm-page-header-title-item";
+var dmPageHeaderExtraClass = "dm-page-header-extra";
+var dmPageHeaderBodyClass = "dm-page-header-body";
+var dmPageHeaderBreadcrumbClass = "dm-page-header-breadcrumb";
+function getDmPageHeaderClasses({
+  hasExtra,
+  className
+}) {
+  return cn(dmPageHeaderBaseClass, hasExtra && "dm-page-header-has-extra", className);
+}
+
+// src/components/dm-page-header/DmPageHeader.tsx
+import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
+function isTitleList(title) {
+  return Array.isArray(title);
+}
+function isToolbarProps(extra) {
+  return Boolean(extra && typeof extra === "object" && !React4.isValidElement(extra) && "items" in extra);
+}
+function DmPageHeader({
+  backClick,
+  onBack,
+  title,
+  extra,
+  breadcrumb,
+  className,
+  style,
+  children,
+  titleSeparator = ":",
+  backIcon = "<"
+}) {
+  const handleBack = onBack ?? backClick;
+  const hasExtra = extra !== undefined && extra !== null;
+  const titleNode = useMemo2(() => {
+    if (isTitleList(title)) {
+      return /* @__PURE__ */ jsx5("div", {
+        className: dmPageHeaderTitleListClass,
+        children: title.map((item, index) => /* @__PURE__ */ jsxs5("div", {
+          className: dmPageHeaderTitleItemClass,
+          children: [
+            /* @__PURE__ */ jsx5("span", {
+              children: item.title
+            }),
+            /* @__PURE__ */ jsx5("span", {
+              children: titleSeparator
+            }),
+            /* @__PURE__ */ jsx5("span", {
+              children: item.value
+            })
+          ]
+        }, index))
+      });
+    }
+    return title === undefined || title === null ? null : /* @__PURE__ */ jsx5("span", {
+      title: typeof title === "string" ? title : undefined,
+      children: title
+    });
+  }, [title, titleSeparator]);
+  return /* @__PURE__ */ jsxs5("section", {
+    className: getDmPageHeaderClasses({ hasExtra, className }),
+    style,
+    children: [
+      breadcrumb ? /* @__PURE__ */ jsx5("div", {
+        className: dmPageHeaderBreadcrumbClass,
+        children: /* @__PURE__ */ jsx5(Breadcrumb, {
+          ...breadcrumb
+        })
+      }) : null,
+      /* @__PURE__ */ jsxs5("div", {
+        className: dmPageHeaderMainClass,
+        children: [
+          handleBack ? /* @__PURE__ */ jsxs5(Fragment2, {
+            children: [
+              /* @__PURE__ */ jsx5("button", {
+                type: "button",
+                className: dmPageHeaderBackClass,
+                "aria-label": "Back",
+                onClick: handleBack,
+                children: backIcon
+              }),
+              /* @__PURE__ */ jsx5("span", {
+                className: dmPageHeaderDividerClass,
+                "aria-hidden": "true"
+              })
+            ]
+          }) : null,
+          /* @__PURE__ */ jsxs5("div", {
+            className: dmPageHeaderContentClass,
+            children: [
+              /* @__PURE__ */ jsx5("div", {
+                className: dmPageHeaderTitleClass,
+                children: titleNode
+              }),
+              hasExtra ? /* @__PURE__ */ jsx5("div", {
+                className: dmPageHeaderExtraClass,
+                children: isToolbarProps(extra) ? /* @__PURE__ */ jsx5(DmToolbar, {
+                  ...extra
+                }) : extra
+              }) : null
+            ]
+          })
+        ]
+      }),
+      children ? /* @__PURE__ */ jsx5("div", {
+        className: dmPageHeaderBodyClass,
+        children
+      }) : null
+    ]
+  });
+}
+DmPageHeader.displayName = "DmPageHeader";
+export {
+  DmPageHeader
+};