@duskmoon-dev/components 0.3.3 → 0.4.0

package/dist/classes/tree-select.d.ts

@@ -3,23 +3,23 @@ export declare const treeSelectBaseClass = "tree-select";
 export declare const treeSelectOpenClass = "tree-select-open";
 export declare const treeSelectDisabledClass = "tree-select-disabled";
 export declare const treeSelectMultipleClass = "tree-select-multiple";
-export declare const treeSelectSelectionClass = "tree-select-selection";
+export declare const treeSelectSelectionClass = "tree-select-selection tree-select-value";
 export declare const treeSelectPlaceholderClass = "tree-select-placeholder";
 export declare const treeSelectTagClass = "tree-select-tag";
 export declare const treeSelectClearClass = "tree-select-clear";
-export declare const treeSelectIconClass = "tree-select-icon";
+export declare const treeSelectIconClass = "tree-select-icon tree-select-arrow";
 export declare const treeSelectDropdownClass = "tree-select-dropdown";
-export declare const treeSelectSearchClass = "tree-select-search";
-export declare const treeSelectListClass = "tree-select-list";
+export declare const treeSelectSearchClass = "tree-select-search-input";
+export declare const treeSelectListClass = "tree-select-list tree-select-options";
 export declare const treeSelectEmptyClass = "tree-select-empty";
 export declare const treeSelectNodeClass = "tree-select-node";
 export declare const treeSelectNodeSelectedClass = "tree-select-node-selected";
 export declare const treeSelectNodeCheckedClass = "tree-select-node-checked";
 export declare const treeSelectNodeExpandedClass = "tree-select-node-expanded";
 export declare const treeSelectNodeDisabledClass = "tree-select-node-disabled";
-export declare const treeSelectSwitcherClass = "tree-select-switcher";
+export declare const treeSelectSwitcherClass = "tree-select-switcher tree-select-node-toggle";
 export declare const treeSelectCheckboxClass = "tree-select-checkbox";
-export declare const treeSelectTitleClass = "tree-select-title";
+export declare const treeSelectTitleClass = "tree-select-title tree-select-node-label";
 export declare function getTreeSelectContainerClasses({ open, disabled, multiple, className, }: {
     open?: boolean;
     disabled?: boolean;

package/dist/components/app/index.js

@@ -224,27 +224,18 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useRef,
   useState
 } from "react";
 
 // src/classes/modal.ts
-var modalBackdropClass = "modal-backdrop";
-var modalOpenClass = "modal-open";
-var modalBackdropCenterClass = "modal-backdrop-center";
 var modalClass = "modal";
 var modalHeaderClass = "modal-header";
 var modalTitleClass = "modal-title";
 var modalCloseClass = "modal-close";
 var modalBodyClass = "modal-body";
 var modalFooterClass = "modal-footer";
-function getModalBackdropClasses({
-  open,
-  centered,
-  className
-}) {
-  return cn(modalBackdropClass, open && modalOpenClass, centered && modalBackdropCenterClass, className);
-}
 function getModalClasses({ className }) {
   return cn(modalClass, className);
 }
@@ -275,6 +266,13 @@ function getModalStyle({
     ...width !== undefined ? { width } : undefined
   };
 }
+function showNativeModal(dialog) {
+  if (!dialog.isConnected || dialog.matches(":modal"))
+    return;
+  if (dialog.open)
+    dialog.close();
+  dialog.showModal();
+}
 var ModalBase = forwardRef(({
   open,
   defaultOpen = false,
@@ -297,15 +295,41 @@ var ModalBase = forwardRef(({
   maskClassName,
   closeIcon = defaultCloseIcon,
   style,
-  role = "dialog",
+  role,
   ...props
 }, ref) => {
   const controlled = open !== undefined;
   const [innerOpen, setInnerOpen] = useState(defaultOpen);
   const mergedOpen = controlled ? Boolean(open) : innerOpen;
   const previousOpen = useRef(mergedOpen);
+  const desiredOpen = useRef(mergedOpen);
+  desiredOpen.current = mergedOpen;
+  const dialogRef = useRef(null);
+  const cancelRequestRef = useRef(null);
+  const programmaticClose = useRef(false);
+  const titleId = useId();
+  const surfaceWidth = width ?? style?.width;
+  const callerNamed = props["aria-label"] != null || props["aria-labelledby"] != null;
   const showClose = closable && closeIcon !== null && closeIcon !== false;
   const body = children ?? content;
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog)
+      return;
+    if (mergedOpen) {
+      programmaticClose.current = false;
+      showNativeModal(dialog);
+    } else if (dialog.open) {
+      programmaticClose.current = true;
+      dialog.close();
+    }
+    return () => {
+      if (dialog.open) {
+        programmaticClose.current = true;
+        dialog.close();
+      }
+    };
+  }, [mergedOpen]);
   useEffect(() => {
     if (previousOpen.current === mergedOpen) {
       return;
@@ -322,73 +346,109 @@ var ModalBase = forwardRef(({
   const handleOk = useCallback((event) => {
     onOk?.(event);
   }, [onOk]);
-  const handleMaskClick = useCallback((event) => {
-    if (event.target !== event.currentTarget || !maskClosable) {
+  const requestCancel = useCallback(() => {
+    cancelRequestRef.current?.click();
+  }, []);
+  const handleNativeClose = useCallback(() => {
+    const dialog = dialogRef.current;
+    if (!dialog || dialog.open || programmaticClose.current) {
+      programmaticClose.current = false;
       return;
     }
-    close(event);
-  }, [close, maskClosable]);
+    if (desiredOpen.current) {
+      requestCancel();
+      if (controlled) {
+        queueMicrotask(() => {
+          if (desiredOpen.current) {
+            showNativeModal(dialog);
+          }
+        });
+      }
+    }
+  }, [controlled, requestCancel]);
   if (!mergedOpen && destroyOnClose) {
     return null;
   }
-  return /* @__PURE__ */ jsx2("div", {
-    "aria-hidden": mergedOpen ? undefined : true,
-    role: "presentation",
-    className: getModalBackdropClasses({
-      open: mergedOpen,
-      centered,
-      className: maskClassName
-    }),
-    onMouseDown: handleMaskClick,
-    children: /* @__PURE__ */ jsxs2("div", {
-      ...props,
-      ref,
-      role,
-      "aria-modal": mergedOpen ? true : undefined,
-      className: getModalClasses({ className }),
-      style: getModalStyle({ width, style }),
-      children: [
-        title !== undefined || showClose ? /* @__PURE__ */ jsxs2("div", {
-          className: modalHeaderClass,
-          children: [
-            title !== undefined ? /* @__PURE__ */ jsx2("h2", {
-              className: modalTitleClass,
-              children: title
-            }) : null,
-            showClose ? /* @__PURE__ */ jsx2("button", {
-              type: "button",
-              className: modalCloseClass,
-              "aria-label": "Close",
-              onClick: close,
-              children: closeIcon
-            }) : null
-          ]
-        }) : null,
-        /* @__PURE__ */ jsx2("div", {
-          className: modalBodyClass,
-          children: body
-        }),
-        footer === null ? null : /* @__PURE__ */ jsx2("div", {
-          className: modalFooterClass,
-          children: footer !== undefined ? footer : /* @__PURE__ */ jsxs2(Fragment, {
+  return /* @__PURE__ */ jsxs2("dialog", {
+    ref: dialogRef,
+    role: role === "alertdialog" ? role : undefined,
+    "aria-label": props["aria-label"] ?? (!callerNamed && title == null ? "Modal" : undefined),
+    "aria-labelledby": props["aria-labelledby"] ?? (!callerNamed && title != null ? titleId : undefined),
+    "aria-describedby": props["aria-describedby"],
+    className: getModalClasses({ className: cn(maskClassName, centered ? "modal-middle" : "modal-top") }),
+    style: surfaceWidth !== undefined ? { width: surfaceWidth, maxWidth: surfaceWidth } : undefined,
+    onCancel: (event) => {
+      event.preventDefault();
+      requestCancel();
+    },
+    onClose: handleNativeClose,
+    onMouseDown: (event) => {
+      if (!maskClosable || event.target !== event.currentTarget)
+        return;
+      const { left, right, top, bottom } = event.currentTarget.getBoundingClientRect();
+      if (event.clientX < left || event.clientX > right || event.clientY < top || event.clientY > bottom) {
+        requestCancel();
+      }
+    },
+    children: [
+      /* @__PURE__ */ jsx2("button", {
+        ref: cancelRequestRef,
+        type: "button",
+        hidden: true,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        onClick: close
+      }),
+      /* @__PURE__ */ jsxs2("div", {
+        ...props,
+        ref,
+        role,
+        className: cn("modal-box", "react-modal-box", className),
+        style: getModalStyle({ width, style }),
+        children: [
+          title !== undefined || showClose ? /* @__PURE__ */ jsxs2("div", {
+            className: modalHeaderClass,
             children: [
-              /* @__PURE__ */ jsx2("button", {
+              title !== undefined ? /* @__PURE__ */ jsx2("h2", {
+                id: titleId,
+                className: modalTitleClass,
+                children: title
+              }) : null,
+              showClose ? /* @__PURE__ */ jsx2("button", {
                 type: "button",
+                className: modalCloseClass,
+                "aria-label": "Close",
                 onClick: close,
-                children: cancelText
-              }),
-              /* @__PURE__ */ jsx2("button", {
-                type: "button",
-                "aria-busy": confirmLoading,
-                disabled: confirmLoading,
-                onClick: handleOk,
-                children: okText
-              })
+                children: closeIcon
+              }) : null
             ]
+          }) : null,
+          /* @__PURE__ */ jsx2("div", {
+            className: modalBodyClass,
+            children: body
+          }),
+          footer === null ? null : /* @__PURE__ */ jsx2("div", {
+            className: modalFooterClass,
+            children: footer !== undefined ? footer : /* @__PURE__ */ jsxs2(Fragment, {
+              children: [
+                /* @__PURE__ */ jsx2("button", {
+                  type: "button",
+                  onClick: close,
+                  children: cancelText
+                }),
+                /* @__PURE__ */ jsx2("button", {
+                  type: "button",
+                  "aria-busy": confirmLoading,
+                  disabled: confirmLoading,
+                  onClick: handleOk,
+                  children: okText
+                })
+              ]
+            })
           })
-        })
-      ]
-    })
+        ]
+      })
+    ]
   });
 });
 ModalBase.displayName = "Modal";

package/dist/components/avatar/Avatar.types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export type AvatarShape = "circle" | "square";
 export interface AvatarProps extends ComponentProps<"span"> {
     size?: AvatarSize;

package/dist/components/avatar/index.js

@@ -35,7 +35,8 @@ var avatarSizeClasses = {
   sm: "avatar-sm",
   md: "avatar-md",
   lg: "avatar-lg",
-  xl: "avatar-xl"
+  xl: "avatar-xl",
+  "2xl": "avatar-2xl"
 };
 var avatarShapeClasses = {
   circle: "avatar-circle",

package/dist/components/badge/index.js

@@ -41,7 +41,7 @@ var badgeColorClasses = {
 };
 var badgeAppearanceClasses = {
   filled: "",
-  outline: "badge-outline",
+  outline: "badge-outlined badge-outline",
   tonal: "badge-tonal",
   ghost: "badge-ghost"
 };

package/dist/components/button/Button.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ButtonProps } from "./Button.types";
-export declare function Button({ color, appearance, shape, size, block, isLoading, leftIcon, rightIcon, className, children, disabled, ref, ...props }: ButtonProps): React.JSX.Element;
+export declare function Button({ color, appearance, shape, size, block, isLoading, leftIcon, rightIcon, className, children, disabled, ref, confirm, onClick, ...props }: ButtonProps): React.JSX.Element;

package/dist/components/button/Button.types.d.ts

@@ -12,4 +12,12 @@ export interface ButtonProps extends ComponentProps<"button"> {
     isLoading?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    confirm?: boolean | {
+        title?: React.ReactNode;
+        component?: React.ReactElement;
+        message?: React.ReactNode;
+        description?: React.ReactNode;
+        confirmText?: React.ReactNode;
+        cancelText?: React.ReactNode;
+    };
 }

package/dist/components/button/index.js

@@ -1,5 +1,9 @@
 "use client";
 
+// src/components/button/Button.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -48,7 +52,7 @@ var buttonAppearanceClasses = {
 };
 var buttonShapeClasses = {
   rect: "",
-  circle: "btn-circle",
+  circle: "btn-circle btn-icon",
   square: "btn-square"
 };
 var buttonSizeClasses = {
@@ -68,11 +72,14 @@ function getButtonClasses({
   isLoading,
   className
 }) {
-  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], block && buttonBlockClass, isLoading && buttonIsLoadingClass, 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, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } 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",
@@ -86,8 +93,155 @@ function Button({
   children,
   disabled,
   ref,
+  confirm,
+  onClick,
   ...props
 }) {
+  const buttonRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const cancelRef = React.useRef(null);
+  const approvalRef = React.useRef("idle");
+  const pendingRef = React.useRef(false);
+  const actionRef = React.useRef(0);
+  const operationRef = React.useRef(0);
+  const mountedRef = React.useRef(false);
+  const [portalTarget, setPortalTarget] = React.useState(null);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const [confirmError, setConfirmError] = React.useState(false);
+  const generatedId = React.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 = React.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]);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      operationRef.current += 1;
+    };
+  }, []);
+  React.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,
@@ -97,29 +251,104 @@ function Button({
     isLoading,
     className
   });
-  return /* @__PURE__ */ jsxs("button", {
-    ref,
-    className: classes,
-    disabled: disabled || isLoading,
-    "aria-busy": isLoading,
-    "aria-disabled": disabled || isLoading,
-    ...props,
+  const confirmClasses = getButtonClasses({
+    color,
+    size: "sm",
+    isLoading: confirmLoading
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
     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
+      /* @__PURE__ */ jsxs("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__ */ 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
+          })
+        ]
       }),
-      !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
-        className: "btn-icon-right",
-        children: rightIcon
-      })
+      confirm && portalTarget && createPortal(/* @__PURE__ */ jsxs("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__ */ jsx("div", {
+            className: "popover-header",
+            children: /* @__PURE__ */ jsx("h3", {
+              id: titleId,
+              className: "popover-title",
+              children: title
+            })
+          }),
+          hasContent && /* @__PURE__ */ jsx("div", {
+            id: descriptionId,
+            className: "popover-body",
+            children: content
+          }),
+          confirmError && /* @__PURE__ */ jsx("div", {
+            role: "alert",
+            className: "popover-body",
+            children: "The action failed. Please try again."
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "popover-footer",
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                ref: cancelRef,
+                type: "button",
+                className: "btn btn-text btn-sm",
+                popoverTarget: popoverId,
+                popoverTargetAction: "hide",
+                disabled: confirmLoading,
+                children: confirmation?.cancelText ?? "Cancel"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "submit",
+                className: confirmClasses,
+                disabled: disabled || isLoading || confirmLoading,
+                "aria-busy": confirmLoading,
+                children: confirmation?.confirmText ?? "Confirm"
+              })
+            ]
+          })
+        ]
+      }), portalTarget)
     ]
   });
 }