@duskmoon-dev/components 0.3.1 → 0.4.0

package/dist/components/dm-layout/index.js

@@ -1,7 +1,7 @@
 "use client";
 
-// src/components/breadcrumb/Breadcrumb.tsx
-import React, { forwardRef } from "react";
+// src/components/dm-layout/DmLayout.tsx
+import { forwardRef as forwardRef6, useEffect as useEffect2, useMemo as useMemo3, useState as useState4 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -28,6 +28,150 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/dm-layout.ts
+var dmLayoutClass = "dm-layout";
+var dmLayoutShellClass = "dm-layout-shell";
+var dmLayoutMainClass = "dm-layout-main";
+var dmLayoutSiderClass = "dm-layout-sider";
+var dmLayoutBodyClass = "dm-layout-body";
+var dmLayoutBreadcrumbClass = "dm-layout-breadcrumb";
+var dmLayoutContentClass = "dm-layout-content";
+var dmLayoutAuxiliaryClass = "dm-layout-auxiliary";
+function getDmLayoutClasses({ className }) {
+  return cn(dmLayoutClass, className);
+}
+
+// src/components/layout/Layout.tsx
+import { forwardRef, useState } from "react";
+
+// src/classes/layout.ts
+var layoutBaseClass = "layout";
+var layoutHasSiderClass = "layout-has-sider";
+var layoutHeaderClass = "layout-header";
+var layoutSiderClass = "layout-sider";
+var layoutSiderCollapsedClass = "layout-sider-collapsed";
+var layoutContentClass = "layout-content";
+var layoutFooterClass = "layout-footer";
+var layoutTriggerClass = "layout-trigger";
+function getLayoutClasses({
+  hasSider,
+  className
+}) {
+  return cn(layoutBaseClass, hasSider && layoutHasSiderClass, className);
+}
+function getLayoutSiderClasses({
+  collapsed,
+  className
+}) {
+  return cn(layoutSiderClass, collapsed && layoutSiderCollapsedClass, className);
+}
+
+// src/components/layout/Layout.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function toSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Header = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(layoutHeaderClass, className)
+}));
+Header.displayName = "Layout.Header";
+var Content = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(layoutContentClass, className)
+}));
+Content.displayName = "Layout.Content";
+var Footer = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(layoutFooterClass, className)
+}));
+Footer.displayName = "Layout.Footer";
+var Sider = forwardRef(({
+  children,
+  collapsible,
+  collapsed,
+  defaultCollapsed,
+  onCollapse,
+  width = 200,
+  collapsedWidth = 80,
+  trigger,
+  breakpoint,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const controlled = collapsed !== undefined;
+  const [internalCollapsed, setInternalCollapsed] = useState(() => defaultCollapsed ?? false);
+  const mergedCollapsed = controlled ? collapsed : internalCollapsed;
+  const siderWidth = toSize(mergedCollapsed ? collapsedWidth : width);
+  function toggleCollapsed() {
+    const nextCollapsed = !mergedCollapsed;
+    if (!controlled) {
+      setInternalCollapsed(nextCollapsed);
+    }
+    onCollapse?.(nextCollapsed, "clickTrigger");
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    "data-breakpoint": breakpoint,
+    className: getLayoutSiderClasses({
+      collapsed: mergedCollapsed,
+      className
+    }),
+    style: {
+      flex: `0 0 ${siderWidth}`,
+      maxWidth: siderWidth,
+      minWidth: siderWidth,
+      width: siderWidth,
+      ...style
+    },
+    children: [
+      children,
+      collapsible && trigger !== null ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: layoutTriggerClass,
+        "aria-label": mergedCollapsed ? "Expand sider" : "Collapse sider",
+        onClick: toggleCollapsed,
+        children: trigger ?? (mergedCollapsed ? ">" : "<")
+      }) : null
+    ]
+  });
+});
+Sider.displayName = "Layout.Sider";
+var LayoutRoot = forwardRef(({ hasSider, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: getLayoutClasses({ hasSider, className })
+}));
+LayoutRoot.displayName = "Layout";
+LayoutRoot.Header = Header;
+LayoutRoot.Sider = Sider;
+LayoutRoot.Content = Content;
+LayoutRoot.Footer = Footer;
+var Layout = LayoutRoot;
+// src/components/dm-breadcrumb/DmBreadcrumb.tsx
+import { forwardRef as forwardRef3, useEffect, useMemo, useState as useState2 } from "react";
+
+// src/classes/dm-breadcrumb.ts
+var dmBreadcrumbClass = "dm-breadcrumb";
+var dmBreadcrumbCompactClass = "dm-breadcrumb-compact";
+var dmBreadcrumbRecentClass = "dm-breadcrumb-recent";
+var dmBreadcrumbValueClass = "dm-breadcrumb-value";
+function getDmBreadcrumbClasses({
+  compact,
+  recent,
+  className
+}) {
+  return cn(dmBreadcrumbClass, compact && dmBreadcrumbCompactClass, recent && dmBreadcrumbRecentClass, className);
+}
+
+// src/components/breadcrumb/Breadcrumb.tsx
+import React2, { forwardRef as forwardRef2 } from "react";
+
 // src/classes/breadcrumb.ts
 var breadcrumbBaseClass = "breadcrumbs";
 var breadcrumbItemClass = "breadcrumb-item";
@@ -57,7 +201,7 @@ function getBreadcrumbLinkClasses({
 }
 
 // src/components/breadcrumb/Breadcrumb.tsx
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
 var defaultSeparator = "/";
 function isSeparatorItem(item) {
   return "type" in item && item.type === "separator";
@@ -110,9 +254,9 @@ function activateOnKeyboard(event) {
 }
 function renderItemBody(item) {
   const title = getItemTitle(item);
-  return /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ jsxs2(Fragment, {
     children: [
-      item.icon ? /* @__PURE__ */ jsx("span", {
+      item.icon ? /* @__PURE__ */ jsx2("span", {
         className: breadcrumbIconClass,
         "aria-hidden": "true",
         children: item.icon
@@ -159,7 +303,7 @@ function renderMenuItems(menu, items = []) {
       item.onClick?.(event);
       menu.onClick?.({ key, item, domEvent: event });
     }
-    const content = item.disabled ? /* @__PURE__ */ jsx("span", {
+    const content = item.disabled ? /* @__PURE__ */ jsx2("span", {
       role: "menuitem",
       "aria-disabled": "true",
       className: getBreadcrumbLinkClasses({
@@ -167,23 +311,23 @@ function renderMenuItems(menu, items = []) {
         className: breadcrumbMenuItemClass
       }),
       children: label
-    }) : href ? /* @__PURE__ */ jsx("a", {
+    }) : href ? /* @__PURE__ */ jsx2("a", {
       role: "menuitem",
       className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
       href,
       onClick: handleClick,
       children: label
-    }) : /* @__PURE__ */ jsx("button", {
+    }) : /* @__PURE__ */ jsx2("button", {
       type: "button",
       role: "menuitem",
       className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
       onClick: handleClick,
       children: label
     });
-    return /* @__PURE__ */ jsxs("li", {
+    return /* @__PURE__ */ jsxs2("li", {
       children: [
         content,
-        item.children?.length ? /* @__PURE__ */ jsx("ul", {
+        item.children?.length ? /* @__PURE__ */ jsx2("ul", {
           className: breadcrumbMenuListClass,
           role: "menu",
           children: renderMenuItems(menu, item.children)
@@ -199,7 +343,7 @@ function renderDefaultItemContent(item, paths, active) {
   }
   const href = item.href ?? (!active ? getHref(item, paths) : undefined);
   if (href) {
-    return /* @__PURE__ */ jsx("a", {
+    return /* @__PURE__ */ jsx2("a", {
       className: getBreadcrumbLinkClasses({}),
       href,
       onClick: item.onClick,
@@ -207,7 +351,7 @@ function renderDefaultItemContent(item, paths, active) {
     });
   }
   if (item.onClick) {
-    return /* @__PURE__ */ jsx("span", {
+    return /* @__PURE__ */ jsx2("span", {
       role: "button",
       tabIndex: 0,
       className: getBreadcrumbLinkClasses({}),
@@ -219,18 +363,18 @@ function renderDefaultItemContent(item, paths, active) {
   return body;
 }
 function renderMenuItem(item, menu, children, disabled) {
-  return /* @__PURE__ */ jsxs("details", {
+  return /* @__PURE__ */ jsxs2("details", {
     className: getBreadcrumbItemClasses({
       disabled,
       className: cn(breadcrumbMenuClass, item.className)
     }),
     "aria-disabled": disabled || undefined,
     children: [
-      /* @__PURE__ */ jsx("summary", {
+      /* @__PURE__ */ jsx2("summary", {
         className: getBreadcrumbLinkClasses({ disabled }),
         children
       }),
-      /* @__PURE__ */ jsx("ul", {
+      /* @__PURE__ */ jsx2("ul", {
         className: breadcrumbMenuListClass,
         role: "menu",
         children: renderMenuItems(menu, menu.items)
@@ -238,7 +382,7 @@ function renderMenuItem(item, menu, children, disabled) {
     ]
   });
 }
-var Breadcrumb = forwardRef(({
+var Breadcrumb = forwardRef2(({
   items,
   routes,
   params = {},
@@ -251,7 +395,7 @@ var Breadcrumb = forwardRef(({
 }, ref) => {
   const entries = items ?? routes;
   if (!entries?.length) {
-    return /* @__PURE__ */ jsx("nav", {
+    return /* @__PURE__ */ jsx2("nav", {
       ...props,
       ref,
       "aria-label": ariaLabel,
@@ -262,7 +406,7 @@ var Breadcrumb = forwardRef(({
   const routeEntries = entries.filter((item) => !isSeparatorItem(item));
   let routeIndex = -1;
   let previousRenderedItemWasSeparator = true;
-  return /* @__PURE__ */ jsx("nav", {
+  return /* @__PURE__ */ jsx2("nav", {
     ...props,
     ref,
     "aria-label": ariaLabel,
@@ -270,7 +414,7 @@ var Breadcrumb = forwardRef(({
     children: entries.map((entry, index) => {
       if (isSeparatorItem(entry)) {
         previousRenderedItemWasSeparator = true;
-        return /* @__PURE__ */ jsx("span", {
+        return /* @__PURE__ */ jsx2("span", {
           className: cn(breadcrumbSeparatorClass, entry.className),
           "aria-hidden": "true",
           children: entry.separator ?? separator
@@ -285,14 +429,14 @@ var Breadcrumb = forwardRef(({
       const applyActiveClass = active && !itemRender && !entry.href && !entry.onClick;
       const insertSeparator = !previousRenderedItemWasSeparator;
       previousRenderedItemWasSeparator = false;
-      return /* @__PURE__ */ jsxs(React.Fragment, {
+      return /* @__PURE__ */ jsxs2(React2.Fragment, {
         children: [
-          insertSeparator ? /* @__PURE__ */ jsx("span", {
+          insertSeparator ? /* @__PURE__ */ jsx2("span", {
             className: breadcrumbSeparatorClass,
             "aria-hidden": "true",
             children: separator
           }) : null,
-          menu?.items?.length ? renderMenuItem(entry, menu, content, entry.disabled) : /* @__PURE__ */ jsx("span", {
+          menu?.items?.length ? renderMenuItem(entry, menu, content, entry.disabled) : /* @__PURE__ */ jsx2("span", {
             className: getBreadcrumbItemClasses({
               active: applyActiveClass,
               disabled: entry.disabled,
@@ -309,23 +453,7 @@ var Breadcrumb = forwardRef(({
 });
 Breadcrumb.displayName = "Breadcrumb";
 // src/components/dm-breadcrumb/DmBreadcrumb.tsx
-import { forwardRef as forwardRef2, useEffect, useMemo, useState } from "react";
-
-// src/classes/dm-breadcrumb.ts
-var dmBreadcrumbClass = "dm-breadcrumb";
-var dmBreadcrumbCompactClass = "dm-breadcrumb-compact";
-var dmBreadcrumbRecentClass = "dm-breadcrumb-recent";
-var dmBreadcrumbValueClass = "dm-breadcrumb-value";
-function getDmBreadcrumbClasses({
-  compact,
-  recent,
-  className
-}) {
-  return cn(dmBreadcrumbClass, compact && dmBreadcrumbCompactClass, recent && dmBreadcrumbRecentClass, className);
-}
-
-// src/components/dm-breadcrumb/DmBreadcrumb.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultStorageKey = "dm-breadcrumb-history-list";
 var defaultMaxHistoryLength = 10;
 function canUseSessionStorage() {
@@ -369,11 +497,11 @@ function resolveRecentUrl(item, history, isStoragePath) {
 function renderTitle(item, index) {
   if (item.itemRender)
     return item.itemRender(item);
-  return /* @__PURE__ */ jsxs2("span", {
+  return /* @__PURE__ */ jsxs3("span", {
     title: typeof item.title === "string" ? item.title : undefined,
     children: [
       item.title,
-      item.value !== undefined && index > 0 ? /* @__PURE__ */ jsxs2("span", {
+      item.value !== undefined && index > 0 ? /* @__PURE__ */ jsxs3("span", {
         className: dmBreadcrumbValueClass,
         children: [
           "(",
@@ -396,7 +524,7 @@ function collapseItems(items, maxVisibleItems) {
     ...items.slice(-tailCount)
   ];
 }
-var DmBreadcrumb = forwardRef2(({
+var DmBreadcrumb = forwardRef3(({
   items,
   isStoragePath = true,
   storageKey = defaultStorageKey,
@@ -408,7 +536,7 @@ var DmBreadcrumb = forwardRef2(({
   separator,
   ...props
 }, ref) => {
-  const [currentHistory, setCurrentHistory] = useState(() => history ?? readHistory(storageKey));
+  const [currentHistory, setCurrentHistory] = useState2(() => history ?? readHistory(storageKey));
   useEffect(() => {
     if (history) {
       setCurrentHistory(history);
@@ -442,7 +570,7 @@ var DmBreadcrumb = forwardRef2(({
     });
     return collapseItems(mappedItems, maxVisibleItems);
   }, [currentHistory, isStoragePath, items, maxVisibleItems]);
-  return /* @__PURE__ */ jsx2(Breadcrumb, {
+  return /* @__PURE__ */ jsx3(Breadcrumb, {
     ...props,
     ref,
     items: breadcrumbItems,
@@ -455,118 +583,26 @@ var DmBreadcrumb = forwardRef2(({
   });
 });
 DmBreadcrumb.displayName = "DmBreadcrumb";
-// src/components/layout/Layout.tsx
-import { forwardRef as forwardRef3, useState as useState2 } from "react";
+// src/components/dm-menu/DmMenu.tsx
+import { forwardRef as forwardRef5, useMemo as useMemo2 } from "react";
 
-// src/classes/layout.ts
-var layoutBaseClass = "layout";
-var layoutHasSiderClass = "layout-has-sider";
-var layoutHeaderClass = "layout-header";
-var layoutSiderClass = "layout-sider";
-var layoutSiderCollapsedClass = "layout-sider-collapsed";
-var layoutContentClass = "layout-content";
-var layoutFooterClass = "layout-footer";
-var layoutTriggerClass = "layout-trigger";
-function getLayoutClasses({
-  hasSider,
-  className
-}) {
-  return cn(layoutBaseClass, hasSider && layoutHasSiderClass, className);
-}
-function getLayoutSiderClasses({
-  collapsed,
+// src/classes/dm-menu.ts
+var dmMenuClass = "dm-menu";
+var dmMenuNoHeaderClass = "dm-menu-no-header";
+var dmMenuCollapsedClass = "dm-menu-collapsed";
+var dmMenuHeaderClass = "dm-menu-header";
+var dmMenuProductIconClass = "dm-menu-product-icon";
+var dmMenuContentClass = "dm-menu-content";
+var dmMenuFooterClass = "dm-menu-footer";
+var dmMenuCollapseButtonClass = "dm-menu-collapse-button";
+function getDmMenuClasses({
+  hideProductHeader,
+  inlineCollapsed,
   className
 }) {
-  return cn(layoutSiderClass, collapsed && layoutSiderCollapsedClass, className);
+  return cn(dmMenuClass, hideProductHeader && dmMenuNoHeaderClass, inlineCollapsed && dmMenuCollapsedClass, className);
 }
 
-// src/components/layout/Layout.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function toSize(value) {
-  return typeof value === "number" ? `${value}px` : value;
-}
-var Header = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
-  ...props,
-  ref,
-  className: cn(layoutHeaderClass, className)
-}));
-Header.displayName = "Layout.Header";
-var Content = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
-  ...props,
-  ref,
-  className: cn(layoutContentClass, className)
-}));
-Content.displayName = "Layout.Content";
-var Footer = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
-  ...props,
-  ref,
-  className: cn(layoutFooterClass, className)
-}));
-Footer.displayName = "Layout.Footer";
-var Sider = forwardRef3(({
-  children,
-  collapsible,
-  collapsed,
-  defaultCollapsed,
-  onCollapse,
-  width = 200,
-  collapsedWidth = 80,
-  trigger,
-  breakpoint,
-  className,
-  style,
-  ...props
-}, ref) => {
-  const controlled = collapsed !== undefined;
-  const [internalCollapsed, setInternalCollapsed] = useState2(() => defaultCollapsed ?? false);
-  const mergedCollapsed = controlled ? collapsed : internalCollapsed;
-  const siderWidth = toSize(mergedCollapsed ? collapsedWidth : width);
-  function toggleCollapsed() {
-    const nextCollapsed = !mergedCollapsed;
-    if (!controlled) {
-      setInternalCollapsed(nextCollapsed);
-    }
-    onCollapse?.(nextCollapsed, "clickTrigger");
-  }
-  return /* @__PURE__ */ jsxs3("div", {
-    ...props,
-    ref,
-    "data-breakpoint": breakpoint,
-    className: getLayoutSiderClasses({
-      collapsed: mergedCollapsed,
-      className
-    }),
-    style: {
-      flex: `0 0 ${siderWidth}`,
-      maxWidth: siderWidth,
-      minWidth: siderWidth,
-      width: siderWidth,
-      ...style
-    },
-    children: [
-      children,
-      collapsible && trigger !== null ? /* @__PURE__ */ jsx3("button", {
-        type: "button",
-        className: layoutTriggerClass,
-        "aria-label": mergedCollapsed ? "Expand sider" : "Collapse sider",
-        onClick: toggleCollapsed,
-        children: trigger ?? (mergedCollapsed ? ">" : "<")
-      }) : null
-    ]
-  });
-});
-Sider.displayName = "Layout.Sider";
-var LayoutRoot = forwardRef3(({ hasSider, className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
-  ...props,
-  ref,
-  className: getLayoutClasses({ hasSider, className })
-}));
-LayoutRoot.displayName = "Layout";
-LayoutRoot.Header = Header;
-LayoutRoot.Sider = Sider;
-LayoutRoot.Content = Content;
-LayoutRoot.Footer = Footer;
-var Layout = LayoutRoot;
 // src/components/menu/Menu.tsx
 import { forwardRef as forwardRef4, useState as useState3 } from "react";
 
@@ -854,35 +890,342 @@ MenuRoot.Item = MenuItem;
 MenuRoot.Divider = MenuDivider;
 MenuRoot.ItemGroup = MenuItemGroup;
 var Menu = MenuRoot;
-// src/components/dm-menu/DmMenu.tsx
-import { forwardRef as forwardRef5, useMemo as useMemo2 } from "react";
+// src/components/button/Button.tsx
+import React5 from "react";
+import { createPortal } from "react-dom";
 
-// src/classes/dm-menu.ts
-var dmMenuClass = "dm-menu";
-var dmMenuNoHeaderClass = "dm-menu-no-header";
-var dmMenuCollapsedClass = "dm-menu-collapsed";
-var dmMenuHeaderClass = "dm-menu-header";
-var dmMenuProductIconClass = "dm-menu-product-icon";
-var dmMenuContentClass = "dm-menu-content";
-var dmMenuFooterClass = "dm-menu-footer";
-var dmMenuCollapseButtonClass = "dm-menu-collapse-button";
-function getDmMenuClasses({
-  hideProductHeader,
-  inlineCollapsed,
+// 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(dmMenuClass, hideProductHeader && dmMenuNoHeaderClass, inlineCollapsed && dmMenuCollapsedClass, 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 jsx5, jsxs as jsxs5, 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 = React5.useRef(null);
+  const popoverRef = React5.useRef(null);
+  const cancelRef = React5.useRef(null);
+  const approvalRef = React5.useRef("idle");
+  const pendingRef = React5.useRef(false);
+  const actionRef = React5.useRef(0);
+  const operationRef = React5.useRef(0);
+  const mountedRef = React5.useRef(false);
+  const [portalTarget, setPortalTarget] = React5.useState(null);
+  const [confirmLoading, setConfirmLoading] = React5.useState(false);
+  const [confirmError, setConfirmError] = React5.useState(false);
+  const generatedId = React5.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 = React5.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]);
+  React5.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      operationRef.current += 1;
+    };
+  }, []);
+  React5.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__ */ jsxs5(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxs5("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__ */ jsx5("span", {
+            className: "btn-spinner"
+          }),
+          !isLoading && leftIcon && /* @__PURE__ */ jsx5("span", {
+            className: "btn-icon-left",
+            children: leftIcon
+          }),
+          /* @__PURE__ */ jsx5("span", {
+            className: "btn-content",
+            children
+          }),
+          !isLoading && rightIcon && /* @__PURE__ */ jsx5("span", {
+            className: "btn-icon-right",
+            children: rightIcon
+          })
+        ]
+      }),
+      confirm && portalTarget && createPortal(/* @__PURE__ */ jsxs5("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__ */ jsx5("div", {
+            className: "popover-header",
+            children: /* @__PURE__ */ jsx5("h3", {
+              id: titleId,
+              className: "popover-title",
+              children: title
+            })
+          }),
+          hasContent && /* @__PURE__ */ jsx5("div", {
+            id: descriptionId,
+            className: "popover-body",
+            children: content
+          }),
+          confirmError && /* @__PURE__ */ jsx5("div", {
+            role: "alert",
+            className: "popover-body",
+            children: "The action failed. Please try again."
+          }),
+          /* @__PURE__ */ jsxs5("div", {
+            className: "popover-footer",
+            children: [
+              /* @__PURE__ */ jsx5("button", {
+                ref: cancelRef,
+                type: "button",
+                className: "btn btn-text btn-sm",
+                popoverTarget: popoverId,
+                popoverTargetAction: "hide",
+                disabled: confirmLoading,
+                children: confirmation?.cancelText ?? "Cancel"
+              }),
+              /* @__PURE__ */ jsx5("button", {
+                type: "submit",
+                className: confirmClasses,
+                disabled: disabled || isLoading || confirmLoading,
+                "aria-busy": confirmLoading,
+                children: confirmation?.confirmText ?? "Confirm"
+              })
+            ]
+          })
+        ]
+      }), portalTarget)
+    ]
+  });
+}
 // src/components/dm-menu/DmMenu.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function getMenuLabel(menu, locale) {
   return locale === "en-US" && menu.menuNameEn ? menu.menuNameEn : menu.menuName;
 }
 function renderIcon(icon) {
   if (!icon)
     return;
-  return typeof icon === "string" ? /* @__PURE__ */ jsx5("span", {
+  return typeof icon === "string" ? /* @__PURE__ */ jsx6("span", {
     className: dmMenuProductIconClass,
     "aria-hidden": "true",
     children: icon
@@ -907,6 +1250,28 @@ function toMenuItems(menus, locale, byKey) {
 function createDmMenuItems(menus, locale) {
   return toMenuItems(menus, locale);
 }
+function presentMenuItem(item, collapsed) {
+  if (item.type === "divider")
+    return item;
+  const label = item.label ?? item.title;
+  const initial = typeof label === "string" ? label.trim().slice(0, 1) : "";
+  return {
+    ...item,
+    label: /* @__PURE__ */ jsx6("span", {
+      className: "dm-menu-item-label",
+      children: label
+    }),
+    icon: item.icon || collapsed ? /* @__PURE__ */ jsx6("span", {
+      "aria-hidden": "true",
+      className: "dm-menu-item-symbol",
+      children: item.icon || /* @__PURE__ */ jsx6("span", {
+        className: "dm-menu-item-initial",
+        children: initial || "•"
+      })
+    }) : undefined,
+    children: item.children?.map((child) => presentMenuItem(child, collapsed))
+  };
+}
 var DmMenu = forwardRef5(({
   menus = [],
   items,
@@ -925,14 +1290,14 @@ var DmMenu = forwardRef5(({
     menuByKey.clear();
     return toMenuItems(menus, locale, menuByKey);
   }, [locale, menuByKey, menus]);
-  const contentItems = items ?? schemaItems;
+  const contentItems = (items ?? schemaItems).map((item) => presentMenuItem(item, inlineCollapsed));
   function handleClick(info) {
     onClick?.({
       ...info,
       menu: menuByKey.get(info.key)
     });
   }
-  return /* @__PURE__ */ jsxs5("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     ref,
     className: getDmMenuClasses({
       hideProductHeader,
@@ -940,25 +1305,25 @@ var DmMenu = forwardRef5(({
       className
     }),
     children: [
-      hideProductHeader ? null : /* @__PURE__ */ jsx5("div", {
+      hideProductHeader ? null : /* @__PURE__ */ jsx6("div", {
         className: dmMenuHeaderClass,
-        children: /* @__PURE__ */ jsx5(Menu, {
+        children: /* @__PURE__ */ jsx6(Menu, {
           mode: "inline",
           inlineCollapsed,
           selectable: false,
           items: [
-            {
+            presentMenuItem({
               key: "__product",
               label: productTitle,
               title: productTitle,
               icon: renderIcon(productIcon)
-            }
+            }, inlineCollapsed)
           ]
         })
       }),
-      /* @__PURE__ */ jsx5("div", {
+      /* @__PURE__ */ jsx6("div", {
         className: dmMenuContentClass,
-        children: /* @__PURE__ */ jsx5(Menu, {
+        children: /* @__PURE__ */ jsx6(Menu, {
           ...props,
           mode: props.mode ?? "inline",
           items: contentItems,
@@ -966,14 +1331,32 @@ var DmMenu = forwardRef5(({
           onClick: handleClick
         })
       }),
-      onCollapsed ? /* @__PURE__ */ jsx5("div", {
+      onCollapsed ? /* @__PURE__ */ jsx6("div", {
         className: dmMenuFooterClass,
-        children: /* @__PURE__ */ jsx5("button", {
+        children: /* @__PURE__ */ jsx6(Button, {
           type: "button",
+          color: "base",
+          appearance: "ghost",
+          shape: "square",
+          size: "sm",
           className: dmMenuCollapseButtonClass,
           "aria-label": inlineCollapsed ? "Expand menu" : "Collapse menu",
           onClick: onCollapsed,
-          children: inlineCollapsed ? ">" : "<"
+          children: /* @__PURE__ */ jsx6("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
+            width: "18",
+            height: "18",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx6("path", {
+              d: inlineCollapsed ? "m9 18 6-6-6-6" : "m15 18-6-6 6-6"
+            })
+          })
         })
       }) : null
     ]
@@ -981,23 +1364,7 @@ var DmMenu = forwardRef5(({
 });
 DmMenu.displayName = "DmMenu";
 // src/components/dm-layout/DmLayout.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect2, useMemo as useMemo3, useState as useState4 } from "react";
-
-// src/classes/dm-layout.ts
-var dmLayoutClass = "dm-layout";
-var dmLayoutShellClass = "dm-layout-shell";
-var dmLayoutMainClass = "dm-layout-main";
-var dmLayoutSiderClass = "dm-layout-sider";
-var dmLayoutBodyClass = "dm-layout-body";
-var dmLayoutBreadcrumbClass = "dm-layout-breadcrumb";
-var dmLayoutContentClass = "dm-layout-content";
-var dmLayoutAuxiliaryClass = "dm-layout-auxiliary";
-function getDmLayoutClasses({ className }) {
-  return cn(dmLayoutClass, className);
-}
-
-// src/components/dm-layout/DmLayout.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function getLabel(menu, locale) {
   return locale === "en-US" && menu.menuNameEn ? menu.menuNameEn : menu.menuName;
 }
@@ -1120,23 +1487,23 @@ var DmLayout = forwardRef6(({
     }
     onCollapse?.(nextCollapsed);
   }
-  return /* @__PURE__ */ jsx6(Layout, {
+  return /* @__PURE__ */ jsx7(Layout, {
     ...props,
     ref,
     hasSider: true,
     className: getDmLayoutClasses({ className }),
-    children: /* @__PURE__ */ jsxs6(Layout, {
+    children: /* @__PURE__ */ jsxs7(Layout, {
       className: dmLayoutShellClass,
       hasSider: true,
       children: [
-        /* @__PURE__ */ jsx6(Layout.Sider, {
+        /* @__PURE__ */ jsx7(Layout.Sider, {
           className: dmLayoutSiderClass,
           collapsible: true,
           collapsed: mergedCollapsed,
           collapsedWidth: 60,
           width: 230,
           trigger: null,
-          children: /* @__PURE__ */ jsx6(DmMenu, {
+          children: /* @__PURE__ */ jsx7(DmMenu, {
             ...menuProps,
             hideProductHeader,
             productTitle,
@@ -1151,23 +1518,23 @@ var DmLayout = forwardRef6(({
             onClick: (info) => onMenuClick?.(info.key, info.menu)
           })
         }),
-        /* @__PURE__ */ jsxs6(Layout, {
+        /* @__PURE__ */ jsxs7(Layout, {
           className: dmLayoutMainClass,
           children: [
-            mergedBreadcrumbItems.length ? /* @__PURE__ */ jsx6("div", {
+            mergedBreadcrumbItems.length ? /* @__PURE__ */ jsx7("div", {
               className: dmLayoutBreadcrumbClass,
-              children: /* @__PURE__ */ jsx6(DmBreadcrumb, {
+              children: /* @__PURE__ */ jsx7(DmBreadcrumb, {
                 items: mergedBreadcrumbItems
               })
             }) : null,
-            /* @__PURE__ */ jsxs6(Layout.Content, {
+            /* @__PURE__ */ jsxs7(Layout.Content, {
               className: dmLayoutBodyClass,
               children: [
-                mergedTips ? /* @__PURE__ */ jsx6("div", {
+                mergedTips ? /* @__PURE__ */ jsx7("div", {
                   className: dmLayoutAuxiliaryClass,
                   children: mergedTips
                 }) : null,
-                /* @__PURE__ */ jsx6("div", {
+                /* @__PURE__ */ jsx7("div", {
                   className: dmLayoutContentClass,
                   children
                 })
@@ -1181,6 +1548,6 @@ var DmLayout = forwardRef6(({
 });
 DmLayout.displayName = "DmLayout";
 export {
-  deriveDmLayoutSelection,
-  DmLayout
+  DmLayout,
+  deriveDmLayoutSelection
 };