@duskmoon-dev/components 0.3.1 → 0.4.0

package/dist/components/tour/index.js

@@ -1,5 +1,13 @@
 "use client";
 
+// src/components/tour/Tour.tsx
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useState
+} from "react";
+
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -25,6 +33,64 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/tour.ts
+var tourRootClass = "tour-root";
+var tourOpenClass = "tour-open";
+var tourMaskClass = "tour-mask";
+var tourMaskHiddenClass = "tour-mask-hidden";
+var tourTargetClass = "tour-target";
+var tourPanelClass = "tour-panel popover";
+var tourArrowClass = "tour-arrow popover-arrow";
+var tourHeaderClass = "tour-header";
+var tourTitleClass = "tour-title";
+var tourCloseClass = "tour-close";
+var tourBodyClass = "tour-body";
+var tourCoverClass = "tour-cover";
+var tourFooterClass = "tour-footer";
+var tourIndicatorsClass = "tour-indicators";
+var tourIndicatorClass = "tour-indicator";
+var tourIndicatorActiveClass = "tour-indicator-active";
+var tourActionsClass = "tour-actions";
+var tourPlacementClasses = {
+  top: "popover-top tour-top",
+  bottom: "popover-bottom tour-bottom",
+  left: "popover-left tour-left",
+  right: "popover-right tour-right",
+  topLeft: "popover-top tour-top-left",
+  topRight: "popover-top tour-top-right",
+  bottomLeft: "popover-bottom tour-bottom-left",
+  bottomRight: "popover-bottom tour-bottom-right",
+  leftTop: "popover-left tour-left-top",
+  leftBottom: "popover-left tour-left-bottom",
+  rightTop: "popover-right tour-right-top",
+  rightBottom: "popover-right tour-right-bottom"
+};
+function getTourRootClasses({
+  open,
+  className
+}) {
+  return cn(tourRootClass, open && tourOpenClass, className);
+}
+function getTourMaskClasses({
+  visible,
+  className
+}) {
+  return cn(tourMaskClass, !visible && tourMaskHiddenClass, className);
+}
+function getTourPanelClasses({
+  placement = "bottom",
+  className
+}) {
+  return cn(tourPanelClass, "popover-show", tourPlacementClasses[placement], className);
+}
+function getTourIndicatorClasses({ active }) {
+  return cn(tourIndicatorClass, active && tourIndicatorActiveClass);
+}
+
+// src/components/button/Button.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+
 // src/classes/button.ts
 var buttonBaseClass = "btn";
 var buttonColorClasses = {
@@ -48,7 +114,7 @@ var buttonAppearanceClasses = {
 };
 var buttonShapeClasses = {
   rect: "",
-  circle: "btn-circle",
+  circle: "btn-circle btn-icon",
   square: "btn-square"
 };
 var buttonSizeClasses = {
@@ -68,11 +134,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 +155,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,94 +313,107 @@ 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)
     ]
   });
 }
-// src/components/tour/Tour.tsx
-import {
-  forwardRef,
-  useEffect,
-  useId,
-  useState
-} from "react";
-
-// src/classes/tour.ts
-var tourRootClass = "tour-root";
-var tourOpenClass = "tour-open";
-var tourMaskClass = "tour-mask";
-var tourMaskHiddenClass = "tour-mask-hidden";
-var tourTargetClass = "tour-target";
-var tourPanelClass = "tour-panel popover";
-var tourArrowClass = "tour-arrow popover-arrow";
-var tourHeaderClass = "tour-header";
-var tourTitleClass = "tour-title";
-var tourCloseClass = "tour-close";
-var tourBodyClass = "tour-body";
-var tourCoverClass = "tour-cover";
-var tourFooterClass = "tour-footer";
-var tourIndicatorsClass = "tour-indicators";
-var tourIndicatorClass = "tour-indicator";
-var tourIndicatorActiveClass = "tour-indicator-active";
-var tourActionsClass = "tour-actions";
-var tourPlacementClasses = {
-  top: "popover-top tour-top",
-  bottom: "popover-bottom tour-bottom",
-  left: "popover-left tour-left",
-  right: "popover-right tour-right",
-  topLeft: "popover-top tour-top-left",
-  topRight: "popover-top tour-top-right",
-  bottomLeft: "popover-bottom tour-bottom-left",
-  bottomRight: "popover-bottom tour-bottom-right",
-  leftTop: "popover-left tour-left-top",
-  leftBottom: "popover-left tour-left-bottom",
-  rightTop: "popover-right tour-right-top",
-  rightBottom: "popover-right tour-right-bottom"
-};
-function getTourRootClasses({
-  open,
-  className
-}) {
-  return cn(tourRootClass, open && tourOpenClass, className);
-}
-function getTourMaskClasses({
-  visible,
-  className
-}) {
-  return cn(tourMaskClass, !visible && tourMaskHiddenClass, className);
-}
-function getTourPanelClasses({
-  placement = "bottom",
-  className
-}) {
-  return cn(tourPanelClass, "popover-show", tourPlacementClasses[placement], className);
-}
-function getTourIndicatorClasses({ active }) {
-  return cn(tourIndicatorClass, active && tourIndicatorActiveClass);
-}
-
 // src/components/tour/Tour.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultCloseIcon = "x";

package/dist/components/tree-select/index.js

@@ -34,36 +34,36 @@ var treeSelectBaseClass = "tree-select";
 var treeSelectOpenClass = "tree-select-open";
 var treeSelectDisabledClass = "tree-select-disabled";
 var treeSelectMultipleClass = "tree-select-multiple";
-var treeSelectSelectionClass = "tree-select-selection";
+var treeSelectSelectionClass = "tree-select-selection tree-select-value";
 var treeSelectPlaceholderClass = "tree-select-placeholder";
 var treeSelectTagClass = "tree-select-tag";
 var treeSelectClearClass = "tree-select-clear";
-var treeSelectIconClass = "tree-select-icon";
+var treeSelectIconClass = "tree-select-icon tree-select-arrow";
 var treeSelectDropdownClass = "tree-select-dropdown";
-var treeSelectSearchClass = "tree-select-search";
-var treeSelectListClass = "tree-select-list";
+var treeSelectSearchClass = "tree-select-search-input";
+var treeSelectListClass = "tree-select-list tree-select-options";
 var treeSelectEmptyClass = "tree-select-empty";
 var treeSelectNodeClass = "tree-select-node";
 var treeSelectNodeSelectedClass = "tree-select-node-selected";
 var treeSelectNodeCheckedClass = "tree-select-node-checked";
 var treeSelectNodeExpandedClass = "tree-select-node-expanded";
 var treeSelectNodeDisabledClass = "tree-select-node-disabled";
-var treeSelectSwitcherClass = "tree-select-switcher";
+var treeSelectSwitcherClass = "tree-select-switcher tree-select-node-toggle";
 var treeSelectCheckboxClass = "tree-select-checkbox";
-var treeSelectTitleClass = "tree-select-title";
+var treeSelectTitleClass = "tree-select-title tree-select-node-label";
 function getTreeSelectContainerClasses({
   open,
   disabled,
   multiple,
   className
 }) {
-  return cn(treeSelectContainerClass, open && treeSelectOpenClass, disabled && treeSelectDisabledClass, multiple && treeSelectMultipleClass, className);
+  return cn(treeSelectContainerClass, treeSelectBaseClass, open && treeSelectOpenClass, disabled && treeSelectDisabledClass, multiple && treeSelectMultipleClass, className);
 }
 function getTreeSelectClasses({
   disabled,
   className
 }) {
-  return cn(treeSelectBaseClass, disabled && treeSelectDisabledClass, className);
+  return cn("tree-select-trigger", disabled && treeSelectDisabledClass, className);
 }
 function getTreeSelectNodeClasses({
   selected,

package/dist/components/typography/index.js

@@ -675,9 +675,9 @@ var Typography = Object.assign(TypographyRoot, {
   Link
 });
 export {
-  Typography,
-  Title,
-  Text,
+  Link,
   Paragraph,
-  Link
+  Text,
+  Title,
+  Typography
 };

package/dist/components/upload/Upload.types.d.ts

@@ -34,6 +34,7 @@ export interface UploadRequestOption<T = unknown> {
 export type UploadBeforeUploadResult = boolean | File | Blob | UploadListIgnore | Promise<boolean | File | Blob | UploadListIgnore>;
 export type UploadListIgnore = symbol;
 export interface UploadProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> {
+    inputProps?: ComponentProps<"input">;
     accept?: string;
     action?: string;
     beforeUpload?: (file: File, fileList: File[]) => UploadBeforeUploadResult;

package/dist/components/upload/index.js

@@ -118,6 +118,7 @@ function UploadRoot({
   disabled,
   fileList,
   listType = "text",
+  inputProps,
   multiple,
   onChange,
   onPreview,
@@ -185,12 +186,12 @@ function UploadRoot({
         }
         const uploadFile = fileToUploadFile(sourceFile);
         if (result === false) {
-          const nextFile3 = {
+          const nextFile = {
             ...uploadFile,
             status: undefined,
             percent: undefined
           };
-          commitFileList([...currentFileListRef.current, nextFile3], nextFile3);
+          commitFileList([...currentFileListRef.current, nextFile], nextFile);
           continue;
         }
         if (result instanceof File) {
@@ -200,9 +201,9 @@ function UploadRoot({
             type: result.type || sourceFile.type
           });
         }
-        const nextFile2 = fileToUploadFile(uploadSource);
-        commitFileList([...currentFileListRef.current, nextFile2], nextFile2);
-        startRequest(nextFile2, uploadSource);
+        const nextFile = fileToUploadFile(uploadSource);
+        commitFileList([...currentFileListRef.current, nextFile], nextFile);
+        startRequest(nextFile, uploadSource);
         continue;
       }
       const nextFile = fileToUploadFile(uploadSource);
@@ -302,6 +303,7 @@ function UploadRoot({
     }),
     children: [
       /* @__PURE__ */ jsx("input", {
+        ...inputProps,
         ref: inputRef,
         className: uploadInputClass,
         type: "file",

package/dist/generated/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.1";
+export declare const version = "0.4.0";

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export type { Breakpoint } from "./components/grid";
 export * from "./components/button";
 export * from "./components/calendar";
 export * from "./components/card";
+export * from "./components/chat";
+export * from "./components/console-page";
 export * from "./components/carousel";
 export * from "./components/cascader";
 export * from "./components/badge";
@@ -53,6 +55,7 @@ export * from "./components/dropdown";
 export * from "./components/empty";
 export * from "./components/flex";
 export * from "./components/float-button";
+export * from "./components/fab";
 export * from "./components/form";
 export * from "./components/grid";
 export * from "./components/image";
@@ -62,9 +65,11 @@ export * from "./components/layout";
 export * from "./components/list";
 export * from "./components/mentions";
 export * from "./components/menu";
+export * from "./components/megamenu";
 export * from "./components/message";
 export * from "./components/modal";
 export * from "./components/notification";
+export * from "./components/otp-input";
 export * from "./components/pagination";
 export * from "./components/popover";
 export * from "./components/popconfirm";
@@ -84,6 +89,7 @@ export * from "./components/splitter";
 export * from "./components/statistic";
 export * from "./components/steps";
 export * from "./components/switch";
+export * from "./components/swap";
 export * from "./components/tabs";
 export * from "./components/tag";
 export * from "./components/table";