@duskmoon-dev/components 0.3.1 → 0.4.0

package/dist/classes/megamenu.d.ts

@@ -0,0 +1,10 @@
+export declare const megamenuClass = "megamenu";
+export declare const megamenuBarClass = "megamenu-bar";
+export declare const megamenuItemClass = "megamenu-item";
+export declare const megamenuTriggerClass = "megamenu-trigger";
+export declare const megamenuPanelClass = "megamenu-panel";
+export declare const megamenuGridClass = "megamenu-grid";
+export declare const megamenuGroupClass = "megamenu-group";
+export declare const megamenuHeadingClass = "megamenu-heading";
+export declare const megamenuSupportingClass = "megamenu-supporting";
+export declare const megamenuMobileClass = "megamenu-mobile";

package/dist/classes/otp-input.d.ts

@@ -0,0 +1,12 @@
+import type { OtpInputColor, OtpInputSize, OtpInputVariant } from "../components/otp-input/OtpInput.types";
+export declare const otpInputBaseClass = "otp-input";
+export declare const otpInputCodeClass = "otp-code";
+export declare function getOtpInputClasses({ size, variant, color, wrapperClassName, }: {
+    size?: OtpInputSize;
+    variant?: OtpInputVariant;
+    color?: OtpInputColor;
+    wrapperClassName?: string;
+}): string;
+export declare function getOtpInputCodeClasses({ className }: {
+    className?: string;
+}): string;

package/dist/classes/popover.d.ts

@@ -1,13 +1,11 @@
 import type { PopoverPlacement } from "../components/popover/Popover.types";
 export declare const popoverWrapperClass = "popover-wrapper";
 export declare const popoverBaseClass = "popover";
-export declare const popoverShowClass = "popover-show";
 export declare const popoverArrowClass = "popover-arrow";
 export declare const popoverNoArrowClass = "popover-no-arrow";
 export declare const popoverPlacementClasses: Record<PopoverPlacement, string>;
-export declare function getPopoverClasses({ placement, open, arrow, className, }: {
+export declare function getPopoverClasses({ placement, arrow, className, }: {
     placement?: PopoverPlacement;
-    open?: boolean;
     arrow?: boolean;
     className?: string;
 }): string;

package/dist/classes/swap.d.ts

@@ -0,0 +1,12 @@
+export declare const swapBaseClass = "swap";
+export declare const swapInputClass = "swap-input";
+export declare const swapOffClass = "swap-off";
+export declare const swapOnClass = "swap-on";
+export declare const swapRotateClass = "swap-rotate";
+export declare function getSwapClasses({ rotate, wrapperClassName, }: {
+    rotate?: boolean;
+    wrapperClassName?: string;
+}): string;
+export declare function getSwapInputClasses({ className }: {
+    className?: string;
+}): string;

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/anchor/index.js

@@ -235,6 +235,6 @@ var Anchor = forwardRef(({
 Anchor.displayName = "Anchor";
 Anchor.Link = AnchorLink;
 export {
-  AnchorLink,
-  Anchor
+  Anchor,
+  AnchorLink
 };

package/dist/components/app/index.js

@@ -1,7 +1,13 @@
 "use client";
 
-// src/components/message/Message.tsx
-import React, { useSyncExternalStore } from "react";
+// src/components/app/App.tsx
+import {
+  createContext,
+  forwardRef as forwardRef2,
+  useContext,
+  useEffect as useEffect3,
+  useMemo as useMemo2
+} from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -28,6 +34,20 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/app.ts
+var appClass = "app";
+var appRootClass = "app-root";
+var appHolderClass = "app-holder";
+function getAppClasses({ className }) {
+  return cn(appClass, className);
+}
+function getAppRootClasses({ className }) {
+  return cn(appRootClass, className);
+}
+
+// src/components/message/Message.tsx
+import React, { useSyncExternalStore } from "react";
+
 // src/classes/message.ts
 var messageHolderClass = "message-holder";
 var messageBaseClass = "message";
@@ -154,13 +174,13 @@ function config(nextConfig) {
   emit();
 }
 function MessageHolder({ className }) {
-  const snapshot2 = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   return /* @__PURE__ */ jsx("div", {
     className: getMessageHolderClasses({
-      placement: snapshot2.config.placement,
+      placement: snapshot.config.placement,
       className
     }),
-    children: snapshot2.messages.map((item) => /* @__PURE__ */ jsxs("div", {
+    children: snapshot.messages.map((item) => /* @__PURE__ */ jsxs("div", {
       className: getMessageClasses({
         type: item.type,
         className: item.className
@@ -204,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: open2,
-  centered,
-  className
-}) {
-  return cn(modalBackdropClass, open2 && modalOpenClass, centered && modalBackdropCenterClass, className);
-}
 function getModalClasses({ className }) {
   return cn(modalClass, className);
 }
@@ -233,8 +244,8 @@ function getModalClasses({ className }) {
 import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
 var defaultCloseIcon = "x";
 var serviceHandles = new Set;
-function createServiceHandle(config2) {
-  let currentConfig = config2;
+function createServiceHandle(config) {
+  let currentConfig = config;
   const handle = {
     destroy: () => {
       serviceHandles.delete(handle);
@@ -255,8 +266,15 @@ 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: open2,
+  open,
   defaultOpen = false,
   title,
   children,
@@ -277,15 +295,41 @@ var ModalBase = forwardRef(({
   maskClassName,
   closeIcon = defaultCloseIcon,
   style,
-  role = "dialog",
+  role,
   ...props
 }, ref) => {
-  const controlled = open2 !== undefined;
+  const controlled = open !== undefined;
   const [innerOpen, setInnerOpen] = useState(defaultOpen);
-  const mergedOpen = controlled ? Boolean(open2) : innerOpen;
+  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;
@@ -302,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";
@@ -425,10 +505,10 @@ function getNotificationHolderClasses({
 }
 function getNotificationNoticeClasses({
   type = "info",
-  open: open2 = true,
+  open = true,
   className
 }) {
-  return cn("toast", "alert", notificationNoticeClass, notificationTypeClasses[type], open2 && "toast-show", open2 && notificationNoticeOpenClass, className);
+  return cn("toast", "alert", notificationNoticeClass, notificationTypeClasses[type], open && "toast-show", open && notificationNoticeOpenClass, className);
 }
 
 // src/components/notification/Notification.tsx
@@ -457,11 +537,11 @@ function getKey(key) {
   globalCounter += 1;
   return `notification-${globalCounter}`;
 }
-function getDuration(config2, holderConfig) {
-  return config2.duration ?? holderConfig.duration ?? defaultConfig.duration;
+function getDuration(config, holderConfig) {
+  return config.duration ?? holderConfig.duration ?? defaultConfig.duration;
 }
-function getPlacement(config2, holderConfig) {
-  return config2.placement ?? holderConfig.placement ?? defaultConfig.placement;
+function getPlacement(config, holderConfig) {
+  return config.placement ?? holderConfig.placement ?? defaultConfig.placement;
 }
 function applyMaxCount(notices, maxCount) {
   if (!maxCount || notices.length <= maxCount) {
@@ -539,42 +619,42 @@ function destroyGlobal(key) {
   globalNotices = [];
   emitGlobal();
 }
-function openGlobal(config2) {
-  const key = getKey(config2.key);
+function openGlobal(config) {
+  const key = getKey(config.key);
   const notice = {
-    ...config2,
+    ...config,
     key,
-    placement: getPlacement(config2, globalConfig2),
-    type: config2.type ?? "info"
+    placement: getPlacement(config, globalConfig2),
+    type: config.type ?? "info"
   };
   clearTimer2(key);
   globalNotices = applyMaxCount([...globalNotices.filter((item) => item.key !== key), notice], globalConfig2.maxCount);
-  const duration = getDuration(config2, globalConfig2);
+  const duration = getDuration(config, globalConfig2);
   if (duration && duration > 0) {
     globalTimers.set(key, setTimeout(() => closeGlobal(key), duration * 1000));
   }
   emitGlobal();
 }
-function withType(type, config2) {
-  openGlobal({ ...config2, type });
+function withType(type, config) {
+  openGlobal({ ...config, type });
 }
 var globalApi = {
   open: openGlobal,
-  success: (config2) => withType("success", config2),
-  info: (config2) => withType("info", config2),
-  warning: (config2) => withType("warning", config2),
-  error: (config2) => withType("error", config2),
+  success: (config) => withType("success", config),
+  info: (config) => withType("info", config),
+  warning: (config) => withType("warning", config),
+  error: (config) => withType("error", config),
   close: closeGlobal,
   destroy: destroyGlobal,
-  config: (config2) => {
-    globalConfig2 = { ...globalConfig2, ...config2 };
+  config: (config) => {
+    globalConfig2 = { ...globalConfig2, ...config };
     emitGlobal();
   },
   useNotification
 };
 function NotificationHolder({
   notices,
-  config: config2,
+  config,
   onClose
 }) {
   const groups = groupByPlacement(notices);
@@ -583,7 +663,7 @@ function NotificationHolder({
       if (group.length === 0) {
         return null;
       }
-      const offsetStyle = placement.startsWith("bottom") && config2.bottom !== undefined ? { bottom: config2.bottom } : config2.top !== undefined ? { top: config2.top } : undefined;
+      const offsetStyle = placement.startsWith("bottom") && config.bottom !== undefined ? { bottom: config.bottom } : config.top !== undefined ? { top: config.top } : undefined;
       return /* @__PURE__ */ jsx3("div", {
         className: getNotificationHolderClasses({
           placement
@@ -591,7 +671,7 @@ function NotificationHolder({
         style: offsetStyle,
         children: group.map((notice) => /* @__PURE__ */ jsx3(NotificationNotice, {
           notice,
-          fallbackCloseIcon: config2.closeIcon,
+          fallbackCloseIcon: config.closeIcon,
           onClose
         }, notice.key))
       }, placement);
@@ -678,30 +758,30 @@ function createScopedApi({
       return current.filter((item) => item.key !== key);
     });
   }
-  function open2(config2) {
-    const key = getKey(config2.key);
+  function open(config) {
+    const key = getKey(config.key);
     const notice = {
-      ...config2,
+      ...config,
       key,
-      placement: getPlacement(config2, holderConfig),
-      type: config2.type ?? "info"
+      placement: getPlacement(config, holderConfig),
+      type: config.type ?? "info"
     };
     clearScopedTimer(key);
     setNotices((current) => applyMaxCount([...current.filter((item) => item.key !== key), notice], holderConfig.maxCount));
-    const duration = getDuration(config2, holderConfig);
+    const duration = getDuration(config, holderConfig);
     if (duration && duration > 0) {
       timerMap.set(key, setTimeout(() => close(key), duration * 1000));
     }
   }
-  function typed(type, config2) {
-    open2({ ...config2, type });
+  function typed(type, config) {
+    open({ ...config, type });
   }
   return {
-    open: open2,
-    success: (config2) => typed("success", config2),
-    info: (config2) => typed("info", config2),
-    warning: (config2) => typed("warning", config2),
-    error: (config2) => typed("error", config2),
+    open,
+    success: (config) => typed("success", config),
+    info: (config) => typed("info", config),
+    warning: (config) => typed("warning", config),
+    error: (config) => typed("error", config),
     close,
     destroy: (key) => {
       if (key !== undefined) {
@@ -720,24 +800,24 @@ function createScopedApi({
     }
   };
 }
-function useNotification(config2 = {}) {
+function useNotification(config = {}) {
   const holderConfig = useMemo(() => ({
     ...defaultConfig,
-    bottom: config2.bottom,
-    closeIcon: config2.closeIcon,
-    duration: config2.duration ?? defaultConfig.duration,
-    getContainer: config2.getContainer,
-    maxCount: config2.maxCount,
-    placement: config2.placement ?? defaultConfig.placement,
-    top: config2.top
+    bottom: config.bottom,
+    closeIcon: config.closeIcon,
+    duration: config.duration ?? defaultConfig.duration,
+    getContainer: config.getContainer,
+    maxCount: config.maxCount,
+    placement: config.placement ?? defaultConfig.placement,
+    top: config.top
   }), [
-    config2.bottom,
-    config2.closeIcon,
-    config2.duration,
-    config2.getContainer,
-    config2.maxCount,
-    config2.placement,
-    config2.top
+    config.bottom,
+    config.closeIcon,
+    config.duration,
+    config.getContainer,
+    config.maxCount,
+    config.placement,
+    config.top
   ]);
   const [notices, setNotices] = useState2([]);
   const [timerMap] = useState2(() => new Map);
@@ -772,26 +852,6 @@ function useNotification(config2 = {}) {
   ];
 }
 var notification = globalApi;
-// src/components/app/App.tsx
-import {
-  createContext,
-  forwardRef as forwardRef2,
-  useContext,
-  useEffect as useEffect3,
-  useMemo as useMemo2
-} from "react";
-
-// src/classes/app.ts
-var appClass = "app";
-var appRootClass = "app-root";
-var appHolderClass = "app-holder";
-function getAppClasses({ className }) {
-  return cn(appClass, className);
-}
-function getAppRootClasses({ className }) {
-  return cn(appRootClass, className);
-}
-
 // src/components/app/App.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var fallbackContext = {
@@ -877,7 +937,7 @@ function AppRoot({ className, ...props }) {
   });
 }
 export {
-  AppRoot,
+  App,
   AppContext,
-  App
+  AppRoot
 };

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"
 };