@duskmoon-dev/components 0.3.3 → 0.4.0

package/dist/components/popconfirm/index.js

@@ -67,6 +67,10 @@ function getPopconfirmClasses({
   return cn(popconfirmBaseClass, popconfirmPlacementClasses[placement], open && popconfirmOpenClass, !arrow && popconfirmNoArrowClass, className);
 }
 
+// src/components/button/Button.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+
 // src/classes/button.ts
 var buttonBaseClass = "btn";
 var buttonColorClasses = {
@@ -90,7 +94,7 @@ var buttonAppearanceClasses = {
 };
 var buttonShapeClasses = {
   rect: "",
-  circle: "btn-circle",
+  circle: "btn-circle btn-icon",
   square: "btn-square"
 };
 var buttonSizeClasses = {
@@ -110,11 +114,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",
@@ -128,8 +135,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,
@@ -139,29 +293,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)
     ]
   });
 }
@@ -173,7 +402,7 @@ function normalizeTriggers(trigger) {
 function hasTrigger(triggers, trigger) {
   return normalizeTriggers(triggers).includes(trigger);
 }
-function isPromiseLike(value) {
+function isPromiseLike2(value) {
   return Boolean(value && (typeof value === "object" || typeof value === "function") && "then" in value && typeof value.then === "function");
 }
 var Popconfirm = forwardRef(({
@@ -228,7 +457,7 @@ var Popconfirm = forwardRef(({
     event.preventDefault();
     event.stopPropagation();
     const result = action?.(event);
-    if (!isPromiseLike(result)) {
+    if (!isPromiseLike2(result)) {
       close();
       return;
     }

package/dist/components/popover/index.js

@@ -6,6 +6,8 @@ import {
   forwardRef,
   isValidElement,
   useId,
+  useLayoutEffect,
+  useRef,
   useState
 } from "react";
 
@@ -37,7 +39,6 @@ function cn(...inputs) {
 // src/classes/popover.ts
 var popoverWrapperClass = "popover-wrapper";
 var popoverBaseClass = "popover";
-var popoverShowClass = "popover-show";
 var popoverArrowClass = "popover-arrow";
 var popoverNoArrowClass = "popover-no-arrow";
 var popoverPlacementClasses = {
@@ -48,11 +49,10 @@ var popoverPlacementClasses = {
 };
 function getPopoverClasses({
   placement = "top",
-  open,
   arrow = true,
   className
 }) {
-  return cn(popoverBaseClass, popoverPlacementClasses[placement], open && popoverShowClass, !arrow && popoverNoArrowClass, className);
+  return cn(popoverBaseClass, popoverPlacementClasses[placement], !arrow && popoverNoArrowClass, className);
 }
 
 // src/components/popover/Popover.tsx
@@ -110,7 +110,19 @@ var Popover = forwardRef(({
   const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
   const generatedId = useId();
   const tooltipId = id ? `${id}-popover` : generatedId;
+  const anchorName = `--dm-popover-${generatedId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const popoverRef = useRef(null);
   const visible = isControlled ? open : internalOpen;
+  useLayoutEffect(() => {
+    const popover = popoverRef.current;
+    if (!popover || typeof popover.showPopover !== "function")
+      return;
+    if (visible && !popover.matches(":popover-open")) {
+      popover.showPopover();
+    } else if (!visible && popover.matches(":popover-open")) {
+      popover.hidePopover();
+    }
+  }, [visible, destroyTooltipOnHide]);
   function updateOpen(nextOpen) {
     if (!isControlled) {
       setInternalOpen(nextOpen);
@@ -189,14 +201,22 @@ var Popover = forwardRef(({
     ...props,
     ref,
     className: popoverWrapperClass,
+    style: { ...props.style, anchorName },
     children: [
       triggerNode,
       shouldRenderContent ? /* @__PURE__ */ jsxs("span", {
+        ref: popoverRef,
         id: tooltipId,
+        popover: "auto",
         role: "tooltip",
+        style: { positionAnchor: anchorName },
+        onToggle: (event) => {
+          const nextOpen = event.newState === "open";
+          if (nextOpen !== visible)
+            updateOpen(nextOpen);
+        },
         className: getPopoverClasses({
           placement,
-          open: visible,
           arrow,
           className
         }),

package/dist/components/swap/Swap.d.ts

@@ -0,0 +1,3 @@
+import type { SwapButtonProps, SwapProps } from "./Swap.types";
+export declare const Swap: import("react").ForwardRefExoticComponent<Omit<SwapProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const SwapButton: import("react").ForwardRefExoticComponent<Omit<SwapButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/swap/Swap.types.d.ts

@@ -0,0 +1,22 @@
+import type { ChangeEventHandler, ComponentProps, ReactNode } from "react";
+export interface SwapProps extends Omit<ComponentProps<"input">, "checked" | "children" | "className" | "defaultChecked" | "onChange" | "size" | "type"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Decorative, noninteractive content shown while unchecked. */
+    off?: ReactNode;
+    /** Decorative, noninteractive content shown while checked. */
+    on?: ReactNode;
+    rotate?: boolean;
+    /** Additional class names for the wrapping label. */
+    wrapperClassName?: string;
+    /** Additional class names for the native checkbox. */
+    className?: string;
+}
+export interface SwapButtonProps extends Omit<ComponentProps<"button">, "children" | "aria-pressed"> {
+    "aria-label": string;
+    on: ReactNode;
+    off: ReactNode;
+    rotate?: boolean;
+    pressed: boolean;
+}

package/dist/components/swap/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Swap";
+export * from "./Swap.types";

package/dist/components/swap/index.js

@@ -0,0 +1,109 @@
+"use client";
+
+// src/components/swap/Swap.tsx
+import { forwardRef } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/swap.ts
+var swapBaseClass = "swap";
+var swapInputClass = "swap-input";
+var swapOffClass = "swap-off";
+var swapOnClass = "swap-on";
+var swapRotateClass = "swap-rotate";
+function getSwapClasses({
+  rotate = false,
+  wrapperClassName
+}) {
+  return cn(swapBaseClass, rotate && swapRotateClass, wrapperClassName);
+}
+function getSwapInputClasses({ className }) {
+  return cn(swapInputClass, className);
+}
+
+// src/components/swap/Swap.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Swap = forwardRef(({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  off,
+  on,
+  rotate = false,
+  wrapperClassName,
+  className,
+  ...inputProps
+}, ref) => /* @__PURE__ */ jsxs("label", {
+  className: getSwapClasses({ rotate, wrapperClassName }),
+  children: [
+    /* @__PURE__ */ jsx("input", {
+      ...inputProps,
+      ref,
+      type: "checkbox",
+      className: getSwapInputClasses({ className }),
+      checked,
+      defaultChecked,
+      onChange,
+      disabled
+    }),
+    /* @__PURE__ */ jsx("span", {
+      className: swapOffClass,
+      "aria-hidden": "true",
+      children: off
+    }),
+    /* @__PURE__ */ jsx("span", {
+      className: swapOnClass,
+      "aria-hidden": "true",
+      children: on
+    })
+  ]
+}));
+Swap.displayName = "Swap";
+var SwapButton = forwardRef(({ on, off, rotate, className, pressed, type = "button", ...buttonProps }, ref) => /* @__PURE__ */ jsxs("button", {
+  ...buttonProps,
+  ref,
+  type,
+  "aria-pressed": pressed,
+  className: getSwapClasses({ rotate, wrapperClassName: className }),
+  children: [
+    /* @__PURE__ */ jsx("span", {
+      className: swapOffClass,
+      "aria-hidden": "true",
+      children: off
+    }),
+    /* @__PURE__ */ jsx("span", {
+      className: swapOnClass,
+      "aria-hidden": "true",
+      children: on
+    })
+  ]
+}));
+SwapButton.displayName = "SwapButton";
+export {
+  Swap,
+  SwapButton
+};

package/dist/components/time-picker/TimePicker.types.d.ts

@@ -12,6 +12,7 @@ export interface DisabledTimeConfig {
     disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
 }
 export interface TimePickerProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onBlur" | "onChange" | "onFocus"> {
+    inputProps?: ComponentProps<"input">;
     value?: TimePickerValue;
     defaultValue?: TimePickerValue;
     format?: string;