@duskmoon-dev/components 0.3.1 → 0.4.0

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

@@ -1,5 +1,8 @@
 "use client";
 
+// src/components/dm-page-header/DmPageHeader.tsx
+import React5, { useMemo as useMemo2 } from "react";
+
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -25,104 +28,25 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
-// src/classes/button.ts
-var buttonBaseClass = "btn";
-var buttonColorClasses = {
-  primary: "btn-primary",
-  secondary: "btn-secondary",
-  tertiary: "btn-tertiary",
-  accent: "btn-accent",
-  neutral: "btn-neutral",
-  base: "btn-base",
-  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,
+// 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(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+  return cn(dmPageHeaderBaseClass, hasExtra && "dm-page-header-has-extra", 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";
 
@@ -155,7 +79,7 @@ function getBreadcrumbLinkClasses({
 }
 
 // src/components/breadcrumb/Breadcrumb.tsx
-import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 var defaultSeparator = "/";
 function isSeparatorItem(item) {
   return "type" in item && item.type === "separator";
@@ -208,9 +132,9 @@ function activateOnKeyboard(event) {
 }
 function renderItemBody(item) {
   const title = getItemTitle(item);
-  return /* @__PURE__ */ jsxs2(Fragment, {
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      item.icon ? /* @__PURE__ */ jsx2("span", {
+      item.icon ? /* @__PURE__ */ jsx("span", {
         className: breadcrumbIconClass,
         "aria-hidden": "true",
         children: item.icon
@@ -257,7 +181,7 @@ function renderMenuItems(menu, items = []) {
       item.onClick?.(event);
       menu.onClick?.({ key, item, domEvent: event });
     }
-    const content = item.disabled ? /* @__PURE__ */ jsx2("span", {
+    const content = item.disabled ? /* @__PURE__ */ jsx("span", {
       role: "menuitem",
       "aria-disabled": "true",
       className: getBreadcrumbLinkClasses({
@@ -265,23 +189,23 @@ function renderMenuItems(menu, items = []) {
         className: breadcrumbMenuItemClass
       }),
       children: label
-    }) : href ? /* @__PURE__ */ jsx2("a", {
+    }) : href ? /* @__PURE__ */ jsx("a", {
       role: "menuitem",
       className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
       href,
       onClick: handleClick,
       children: label
-    }) : /* @__PURE__ */ jsx2("button", {
+    }) : /* @__PURE__ */ jsx("button", {
       type: "button",
       role: "menuitem",
       className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
       onClick: handleClick,
       children: label
     });
-    return /* @__PURE__ */ jsxs2("li", {
+    return /* @__PURE__ */ jsxs("li", {
       children: [
         content,
-        item.children?.length ? /* @__PURE__ */ jsx2("ul", {
+        item.children?.length ? /* @__PURE__ */ jsx("ul", {
           className: breadcrumbMenuListClass,
           role: "menu",
           children: renderMenuItems(menu, item.children)
@@ -297,7 +221,7 @@ function renderDefaultItemContent(item, paths, active) {
   }
   const href = item.href ?? (!active ? getHref(item, paths) : undefined);
   if (href) {
-    return /* @__PURE__ */ jsx2("a", {
+    return /* @__PURE__ */ jsx("a", {
       className: getBreadcrumbLinkClasses({}),
       href,
       onClick: item.onClick,
@@ -305,7 +229,7 @@ function renderDefaultItemContent(item, paths, active) {
     });
   }
   if (item.onClick) {
-    return /* @__PURE__ */ jsx2("span", {
+    return /* @__PURE__ */ jsx("span", {
       role: "button",
       tabIndex: 0,
       className: getBreadcrumbLinkClasses({}),
@@ -317,18 +241,18 @@ function renderDefaultItemContent(item, paths, active) {
   return body;
 }
 function renderMenuItem(item, menu, children, disabled) {
-  return /* @__PURE__ */ jsxs2("details", {
+  return /* @__PURE__ */ jsxs("details", {
     className: getBreadcrumbItemClasses({
       disabled,
       className: cn(breadcrumbMenuClass, item.className)
     }),
     "aria-disabled": disabled || undefined,
     children: [
-      /* @__PURE__ */ jsx2("summary", {
+      /* @__PURE__ */ jsx("summary", {
         className: getBreadcrumbLinkClasses({ disabled }),
         children
       }),
-      /* @__PURE__ */ jsx2("ul", {
+      /* @__PURE__ */ jsx("ul", {
         className: breadcrumbMenuListClass,
         role: "menu",
         children: renderMenuItems(menu, menu.items)
@@ -349,7 +273,7 @@ var Breadcrumb = forwardRef(({
 }, ref) => {
   const entries = items ?? routes;
   if (!entries?.length) {
-    return /* @__PURE__ */ jsx2("nav", {
+    return /* @__PURE__ */ jsx("nav", {
       ...props,
       ref,
       "aria-label": ariaLabel,
@@ -360,7 +284,7 @@ var Breadcrumb = forwardRef(({
   const routeEntries = entries.filter((item) => !isSeparatorItem(item));
   let routeIndex = -1;
   let previousRenderedItemWasSeparator = true;
-  return /* @__PURE__ */ jsx2("nav", {
+  return /* @__PURE__ */ jsx("nav", {
     ...props,
     ref,
     "aria-label": ariaLabel,
@@ -368,7 +292,7 @@ var Breadcrumb = forwardRef(({
     children: entries.map((entry, index) => {
       if (isSeparatorItem(entry)) {
         previousRenderedItemWasSeparator = true;
-        return /* @__PURE__ */ jsx2("span", {
+        return /* @__PURE__ */ jsx("span", {
           className: cn(breadcrumbSeparatorClass, entry.className),
           "aria-hidden": "true",
           children: entry.separator ?? separator
@@ -383,14 +307,14 @@ var Breadcrumb = forwardRef(({
       const applyActiveClass = active && !itemRender && !entry.href && !entry.onClick;
       const insertSeparator = !previousRenderedItemWasSeparator;
       previousRenderedItemWasSeparator = false;
-      return /* @__PURE__ */ jsxs2(React.Fragment, {
+      return /* @__PURE__ */ jsxs(React.Fragment, {
         children: [
-          insertSeparator ? /* @__PURE__ */ jsx2("span", {
+          insertSeparator ? /* @__PURE__ */ jsx("span", {
             className: breadcrumbSeparatorClass,
             "aria-hidden": "true",
             children: separator
           }) : null,
-          menu?.items?.length ? renderMenuItem(entry, menu, content, entry.disabled) : /* @__PURE__ */ jsx2("span", {
+          menu?.items?.length ? renderMenuItem(entry, menu, content, entry.disabled) : /* @__PURE__ */ jsx("span", {
             className: getBreadcrumbItemClasses({
               active: applyActiveClass,
               disabled: entry.disabled,
@@ -406,39 +330,383 @@ var Breadcrumb = forwardRef(({
   });
 });
 Breadcrumb.displayName = "Breadcrumb";
+// 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/button/Button.tsx
+import React2 from "react";
+import { createPortal } from "react-dom";
+
+// src/classes/button.ts
+var buttonBaseClass = "btn";
+var buttonColorClasses = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  tertiary: "btn-tertiary",
+  accent: "btn-accent",
+  neutral: "btn-neutral",
+  base: "btn-base",
+  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 btn-icon",
+  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], shape === "circle" && size === "xs" && "btn-icon-sm", shape === "circle" && size === "sm" && "btn-icon-sm", shape === "circle" && size === "lg" && "btn-icon-lg", block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+}
+
+// src/components/button/Button.tsx
+import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+function isPromiseLike(value) {
+  return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+}
+function Button({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  disabled,
+  ref,
+  confirm,
+  onClick,
+  ...props
+}) {
+  const buttonRef = React2.useRef(null);
+  const popoverRef = React2.useRef(null);
+  const cancelRef = React2.useRef(null);
+  const approvalRef = React2.useRef("idle");
+  const pendingRef = React2.useRef(false);
+  const actionRef = React2.useRef(0);
+  const operationRef = React2.useRef(0);
+  const mountedRef = React2.useRef(false);
+  const [portalTarget, setPortalTarget] = React2.useState(null);
+  const [confirmLoading, setConfirmLoading] = React2.useState(false);
+  const [confirmError, setConfirmError] = React2.useState(false);
+  const generatedId = React2.useId().replace(/:/g, "");
+  const popoverId = `button-confirm-${generatedId}`;
+  const titleId = `${popoverId}-title`;
+  const descriptionId = `${popoverId}-description`;
+  const anchor = `--${popoverId}-anchor`;
+  const hasConfirm = Boolean(confirm);
+  const confirmation = confirm && typeof confirm === "object" ? confirm : undefined;
+  const title = confirmation ? confirmation.title : "Confirm action";
+  const hasTitle = title !== undefined && title !== null && title !== false && title !== "";
+  const content = confirmation?.component ?? confirmation?.message ?? confirmation?.description;
+  const hasContent = content !== undefined && content !== null && content !== false && content !== "";
+  const mergedRef = React2.useCallback((node) => {
+    buttonRef.current = node;
+    if (!node) {
+      if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+      return;
+    }
+    const cleanup = typeof ref === "function" ? ref(node) : undefined;
+    if (ref && typeof ref !== "function")
+      ref.current = node;
+    return () => {
+      buttonRef.current = null;
+      if (typeof cleanup === "function")
+        cleanup();
+      else if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+    };
+  }, [ref]);
+  React2.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      operationRef.current += 1;
+    };
+  }, []);
+  React2.useEffect(() => {
+    operationRef.current += 1;
+    approvalRef.current = "idle";
+    setConfirmError(false);
+    setPortalTarget(hasConfirm ? document.body : null);
+  }, [hasConfirm]);
+  function closePopover() {
+    if (popoverRef.current?.matches(":popover-open")) {
+      popoverRef.current.hidePopover();
+    }
+    buttonRef.current?.focus();
+  }
+  function handleClick(event) {
+    if (!confirm) {
+      onClick?.(event);
+      return;
+    }
+    if (approvalRef.current === "native") {
+      approvalRef.current = "idle";
+      return;
+    }
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      let result;
+      try {
+        result = onClick?.(event);
+      } catch {
+        event.preventDefault();
+        pendingRef.current = false;
+        setConfirmError(true);
+        return;
+      }
+      if (!isPromiseLike(result)) {
+        pendingRef.current = false;
+        closePopover();
+        return;
+      }
+      const userPreventedDefault = event.defaultPrevented;
+      event.preventDefault();
+      setConfirmLoading(true);
+      const action = actionRef.current;
+      const operation = operationRef.current;
+      Promise.resolve(result).then(() => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        closePopover();
+        if (!userPreventedDefault && !buttonRef.current?.disabled) {
+          approvalRef.current = "native";
+          buttonRef.current?.click();
+          approvalRef.current = "idle";
+        }
+      }, () => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        setConfirmError(true);
+        cancelRef.current?.focus();
+      });
+      return;
+    }
+    event.preventDefault();
+    if (disabled || isLoading || pendingRef.current)
+      return;
+    if (popoverRef.current?.matches(":popover-open")) {
+      closePopover();
+      return;
+    }
+    setConfirmError(false);
+    popoverRef.current?.showPopover();
+    cancelRef.current?.focus();
+  }
+  function handleConfirm(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const trigger = buttonRef.current;
+    if (disabled || isLoading || pendingRef.current || !trigger || trigger.disabled || !event.currentTarget.matches(":popover-open"))
+      return;
+    setConfirmError(false);
+    pendingRef.current = true;
+    actionRef.current += 1;
+    approvalRef.current = "action";
+    trigger.click();
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      pendingRef.current = false;
+    }
+  }
+  const classes = getButtonClasses({
+    color,
+    appearance,
+    shape,
+    size,
+    block,
+    isLoading,
+    className
+  });
+  const confirmClasses = getButtonClasses({
+    color,
+    size: "sm",
+    isLoading: confirmLoading
+  });
+  return /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxs2("button", {
+        ref: confirm ? mergedRef : ref,
+        className: classes,
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-disabled": disabled || isLoading,
+        ...props,
+        style: confirm ? { ...props.style, anchorName: anchor } : props.style,
+        "aria-haspopup": confirm ? "dialog" : props["aria-haspopup"],
+        "aria-controls": confirm ? popoverId : props["aria-controls"],
+        onClick: confirm ? handleClick : onClick,
+        children: [
+          isLoading && /* @__PURE__ */ jsx2("span", {
+            className: "btn-spinner"
+          }),
+          !isLoading && leftIcon && /* @__PURE__ */ jsx2("span", {
+            className: "btn-icon-left",
+            children: leftIcon
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            className: "btn-content",
+            children
+          }),
+          !isLoading && rightIcon && /* @__PURE__ */ jsx2("span", {
+            className: "btn-icon-right",
+            children: rightIcon
+          })
+        ]
+      }),
+      confirm && portalTarget && createPortal(/* @__PURE__ */ jsxs2("form", {
+        id: popoverId,
+        ref: popoverRef,
+        popover: "auto",
+        role: "dialog",
+        "aria-labelledby": hasTitle ? titleId : undefined,
+        "aria-label": hasTitle ? undefined : "Confirm action",
+        "aria-describedby": hasContent ? descriptionId : undefined,
+        className: "popover popover-confirm popover-bottom",
+        style: { positionAnchor: anchor },
+        onSubmit: handleConfirm,
+        onClick: (event) => event.stopPropagation(),
+        onToggle: (event) => {
+          if (!event.currentTarget.matches(":popover-open")) {
+            operationRef.current += 1;
+            if (event.currentTarget.contains(document.activeElement) || document.activeElement === document.body) {
+              buttonRef.current?.focus();
+            }
+          }
+        },
+        children: [
+          hasTitle && /* @__PURE__ */ jsx2("div", {
+            className: "popover-header",
+            children: /* @__PURE__ */ jsx2("h3", {
+              id: titleId,
+              className: "popover-title",
+              children: title
+            })
+          }),
+          hasContent && /* @__PURE__ */ jsx2("div", {
+            id: descriptionId,
+            className: "popover-body",
+            children: content
+          }),
+          confirmError && /* @__PURE__ */ jsx2("div", {
+            role: "alert",
+            className: "popover-body",
+            children: "The action failed. Please try again."
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            className: "popover-footer",
+            children: [
+              /* @__PURE__ */ jsx2("button", {
+                ref: cancelRef,
+                type: "button",
+                className: "btn btn-text btn-sm",
+                popoverTarget: popoverId,
+                popoverTargetAction: "hide",
+                disabled: confirmLoading,
+                children: confirmation?.cancelText ?? "Cancel"
+              }),
+              /* @__PURE__ */ jsx2("button", {
+                type: "submit",
+                className: confirmClasses,
+                disabled: disabled || isLoading || confirmLoading,
+                "aria-busy": confirmLoading,
+                children: confirmation?.confirmText ?? "Confirm"
+              })
+            ]
+          })
+        ]
+      }), portalTarget)
+    ]
+  });
+}
 // src/components/dropdown/Dropdown.tsx
 import {
   cloneElement,
   forwardRef as forwardRef2,
   isValidElement,
+  useEffect,
   useId,
+  useRef,
   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 dropdownWrapperClass = "dropdown";
+var dropdownBaseClass = "dropdown-content";
+var dropdownArrowClass = "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"
+  top: "dropdown-block-start",
+  bottom: "dropdown-block-end",
+  left: "dropdown-inline-start",
+  right: "dropdown-inline-end",
+  topLeft: "dropdown-block-start",
+  topRight: "dropdown-block-start",
+  bottomLeft: "dropdown-block-end",
+  bottomRight: "dropdown-block-end"
 };
 function getDropdownClasses({
-  placement = "bottomLeft",
-  open,
-  arrow,
   className
 }) {
-  return cn(dropdownBaseClass, dropdownPlacementClasses[placement], open && dropdownOpenClass, !arrow && "popover-no-arrow dropdown-no-arrow", className);
+  return cn(dropdownBaseClass, className);
 }
 
 // src/classes/menu.ts
@@ -491,9 +759,6 @@ function getMenuItemClasses({
 
 // 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);
 }
@@ -545,85 +810,103 @@ var DropdownRoot = forwardRef2(({
   ...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)
+  const [nativeOpen, setNativeOpen] = useState(Boolean(open ?? defaultOpen));
+  const visible = open ?? internalOpen;
+  const popupRef = useRef(null);
+  const popupId = useId();
+  const anchorName = `--dm-dropdown-${popupId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const clickTrigger = trigger.includes("click") || trigger.includes("hover");
+  useEffect(() => {
+    const popup = popupRef.current;
+    if (!popup?.showPopover || !popup?.hidePopover)
       return;
-    if (!isControlled) {
+    if (visible && !popup.matches(":popover-open"))
+      popup.showPopover();
+    if (!visible && popup.matches(":popover-open"))
+      popup.hidePopover();
+  }, [visible]);
+  function setVisible(nextOpen) {
+    if (open === undefined)
       setInternalOpen(nextOpen);
-    }
     onOpenChange?.(nextOpen);
   }
-  const close = () => setVisible(false);
-  const toggleVisible = () => setVisible(!visible);
+  function close() {
+    const popup = popupRef.current;
+    if (popup?.matches(":popover-open"))
+      popup.hidePopover();
+    else
+      setVisible(false);
+  }
   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 show = () => !disabled && popupRef.current?.showPopover?.();
+  const hide = () => !disabled && popupRef.current?.hidePopover?.();
+  const toggle = () => {
+    if (disabled)
+      return;
+    if (popupRef.current?.matches(":popover-open"))
+      hide();
+    else
+      show();
   };
+  const childIsButton = isValidElement(children) && (children.type === "button" || children.type === Button);
   const triggerNode = isValidElement(children) ? cloneElement(children, {
-    "aria-controls": triggerProps["aria-controls"] ?? children.props["aria-controls"],
-    "aria-expanded": triggerProps["aria-expanded"] ?? children.props["aria-expanded"],
+    popoverTarget: childIsButton && clickTrigger && !disabled ? popupId : undefined,
+    style: {
+      ...children.props.style,
+      anchorName
+    },
+    "aria-controls": popupId,
+    "aria-expanded": nativeOpen,
+    disabled: disabled || children.props.disabled,
     onMouseEnter: (event) => {
       callHandler(children.props.onMouseEnter, event);
-      triggerProps.onMouseEnter?.();
+      if (trigger.includes("hover"))
+        show();
       onMouseEnter?.(event);
     },
     onMouseLeave: (event) => {
       callHandler(children.props.onMouseLeave, event);
-      triggerProps.onMouseLeave?.();
       onMouseLeave?.(event);
     },
     onClick: (event) => {
       callHandler(children.props.onClick, event);
-      triggerProps.onClick?.();
       onClick?.(event);
+      if (!childIsButton && clickTrigger && !event.defaultPrevented)
+        toggle();
     },
     onContextMenu: (event) => {
       callHandler(children.props.onContextMenu, event);
-      triggerProps.onContextMenu?.(event);
+      if (trigger.includes("contextMenu")) {
+        event.preventDefault();
+        toggle();
+      }
       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"],
+  }) : /* @__PURE__ */ jsx3("button", {
+    type: "button",
+    disabled,
+    popoverTarget: clickTrigger && !disabled ? popupId : undefined,
+    style: { anchorName },
+    "aria-controls": popupId,
+    "aria-expanded": nativeOpen,
     onMouseEnter: (event) => {
-      triggerProps.onMouseEnter?.();
+      if (trigger.includes("hover"))
+        show();
       onMouseEnter?.(event);
     },
     onMouseLeave: (event) => {
-      triggerProps.onMouseLeave?.();
       onMouseLeave?.(event);
     },
-    onClick: (event) => {
-      triggerProps.onClick?.();
-      onClick?.(event);
-    },
-    onKeyDown: (event) => {
-      if (event.key === "Enter" || event.key === " ") {
+    onClick,
+    onContextMenu: (event) => {
+      if (trigger.includes("contextMenu")) {
         event.preventDefault();
-        triggerProps.onClick?.();
+        toggle();
       }
-    },
-    onContextMenu: (event) => {
-      triggerProps.onContextMenu?.(event);
       onContextMenu?.(event);
     },
     children
@@ -631,25 +914,30 @@ var DropdownRoot = forwardRef2(({
   return /* @__PURE__ */ jsxs3("span", {
     ...props,
     ref,
-    className: dropdownWrapperClass,
+    className: cn(dropdownWrapperClass, dropdownPlacementClasses[placement]),
+    onMouseLeave: trigger.includes("hover") ? hide : undefined,
     children: [
       triggerNode,
-      shouldRenderPopup ? /* @__PURE__ */ jsxs3("span", {
-        id: overlayId,
-        role: "menu",
-        className: getDropdownClasses({
-          placement,
-          open: visible,
-          arrow,
-          className
-        }),
+      /* @__PURE__ */ jsxs3("span", {
+        id: popupId,
+        ref: popupRef,
+        popover: "auto",
+        style: { positionAnchor: anchorName },
+        className: getDropdownClasses({ className, arrow }),
+        onToggle: (event) => {
+          if (event.target !== event.currentTarget)
+            return;
+          const nextOpen = event.nativeEvent.newState === "open";
+          setNativeOpen(nextOpen);
+          setVisible(nextOpen);
+        },
         children: [
-          popup,
+          !destroyPopupOnHide || visible ? popup : null,
           arrow ? /* @__PURE__ */ jsx3("span", {
             className: dropdownArrowClass
           }) : null
         ]
-      }) : null
+      })
     ]
   });
 });
@@ -661,56 +949,80 @@ var DropdownButton = forwardRef2(({
   menu,
   onClick,
   trigger = ["click"],
+  color = "base",
+  appearance = "outline",
+  size,
+  shape,
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  confirm,
   ...props
 }, ref) => {
+  const buttonStyle = { color, appearance, size, shape };
   const buttons = [
     /* @__PURE__ */ jsx3(Button, {
+      ...buttonStyle,
       disabled,
+      isLoading,
+      leftIcon,
+      rightIcon,
+      confirm,
       onClick,
       children
     }, "primary"),
     /* @__PURE__ */ jsx3(Button, {
+      ...buttonStyle,
+      type: "button",
       "aria-label": "Open dropdown",
-      disabled,
-      children: "v"
+      disabled: disabled || isLoading,
+      children: /* @__PURE__ */ jsxs3("svg", {
+        "aria-hidden": "true",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        children: [
+          /* @__PURE__ */ jsx3("circle", {
+            cx: "5",
+            cy: "12",
+            r: "1.75"
+          }),
+          /* @__PURE__ */ jsx3("circle", {
+            cx: "12",
+            cy: "12",
+            r: "1.75"
+          }),
+          /* @__PURE__ */ jsx3("circle", {
+            cx: "19",
+            cy: "12",
+            r: "1.75"
+          })
+        ]
+      })
     }, "trigger")
   ];
   const renderedButtons = buttonsRender ? buttonsRender(buttons) : buttons;
-  return /* @__PURE__ */ jsx3(DropdownRoot, {
-    ...props,
+  return /* @__PURE__ */ jsxs3("span", {
     ref,
-    menu,
-    trigger,
-    disabled,
-    children: /* @__PURE__ */ jsx3("span", {
-      className: dropdownButtonClass,
-      children: renderedButtons
-    })
+    className: cn(dropdownButtonClass, block && "dropdown-button-block"),
+    children: [
+      renderedButtons[0],
+      /* @__PURE__ */ jsx3(DropdownRoot, {
+        ...props,
+        menu,
+        trigger,
+        disabled: disabled || isLoading,
+        children: renderedButtons[1]
+      })
+    ]
   });
 });
 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) {
@@ -764,12 +1076,12 @@ function DmToolbar({
   maxVisibleSecondaryItems
 }) {
   const { visibleSecondaryItems, overflowSecondaryItems, primaryItems } = useMemo(() => {
-    const primaryItems2 = items.filter(isPrimary);
+    const primaryItems = 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 };
+    const visibleSecondaryItems = visibleLimit === 0 ? [] : secondaryItems.slice(-visibleLimit);
+    const overflowSecondaryItems = visibleLimit >= secondaryItems.length ? [] : secondaryItems.slice(0, secondaryItems.length - visibleLimit);
+    return { visibleSecondaryItems, overflowSecondaryItems, primaryItems };
   }, [items, maxVisibleSecondaryItems]);
   const showMore = overflowSecondaryItems.length > 0;
   return /* @__PURE__ */ jsxs4("div", {
@@ -800,34 +1112,12 @@ function DmToolbar({
 }
 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";
+import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment3 } 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);
+  return Boolean(extra && typeof extra === "object" && !React5.isValidElement(extra) && "items" in extra);
 }
 function DmPageHeader({
   backClick,
@@ -881,7 +1171,7 @@ function DmPageHeader({
       /* @__PURE__ */ jsxs5("div", {
         className: dmPageHeaderMainClass,
         children: [
-          handleBack ? /* @__PURE__ */ jsxs5(Fragment2, {
+          handleBack ? /* @__PURE__ */ jsxs5(Fragment3, {
             children: [
               /* @__PURE__ */ jsx5("button", {
                 type: "button",