@roochnetwork/rooch-sdk-kit/dist/esm/components/ui/Modal.js

Rooch SDK Kit

// src/components/ui/Modal.tsx
import { useState as useState2 } from "react";
import * as Dialog from "@radix-ui/react-dialog";

// src/components/ui/Modal.css.ts
var closeButtonContainer = "Modal_closeButtonContainer__1c5z17f2";
var content = "Modal_content__1c5z17f1";
var overlay = "Modal_overlay__1c5z17f0";

// src/components/styling/StyleMarker.tsx
import { Slot } from "@radix-ui/react-slot";
import { forwardRef } from "react";

// src/constants/styleDataAttribute.ts
var styleDataAttributeName = "data-sdk-kit";
var styleDataAttributeSelector = `[${styleDataAttributeName}]`;
var styleDataAttribute = { [styleDataAttributeName]: "" };

// src/components/styling/StyleMarker.tsx
import { jsx } from "react/jsx-runtime";
var StyleMarker = forwardRef(({ children, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Slot, { ref: forwardedRef, ...props, ...styleDataAttribute, children }));
StyleMarker.displayName = "StyleMarker";

// src/components/ProgressProvider.tsx
import { createContext, useCallback, useContext, useState } from "react";

// src/components/fauct-modal/views/FaucetView.css.ts
var progressBar = "FaucetView_progressBar__1ff62y03";

// src/components/ui/Progress.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
function Progress() {
  const { progress } = useProgress();
  return /* @__PURE__ */ jsx2("div", { className: progressBar, style: { width: `${progress}%` } });
}

// src/components/ProgressProvider.tsx
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var ProgressProviderContext = createContext(null);
var ProgressProvider = ({ children }) => {
  const [progress, setProgress] = useState(0);
  const [loading, setLoading] = useState(false);
  const start = useCallback(() => {
    setLoading(true);
    setProgress(0);
    const interval = setInterval(() => {
      setProgress((prev) => {
        const nextProgress = prev + 10;
        if (nextProgress >= 70) {
          clearInterval(interval);
        }
        return Math.min(nextProgress, 70);
      });
    }, 100);
  }, []);
  const finish = useCallback((callback) => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        const nextProgress = prev + 5;
        if (nextProgress >= 100) {
          clearInterval(interval);
          setTimeout(() => {
            setLoading(false);
            if (callback) {
              callback();
            }
          }, 300);
        }
        return Math.min(nextProgress, 100);
      });
    }, 50);
  }, []);
  return /* @__PURE__ */ jsxs(ProgressProviderContext.Provider, { value: { loading, progress, start, finish }, children: [
    children,
    loading && /* @__PURE__ */ jsx3(Progress, {})
  ] });
};
var useProgress = () => {
  const ctx = useContext(ProgressProviderContext);
  if (!ctx) {
    throw new Error("useSubscribeToError must be used within a GlobalProvider");
  }
  return ctx;
};

// src/components/ui/IconButton.tsx
import { Slot as Slot2 } from "@radix-ui/react-slot";
import clsx from "clsx";
import { forwardRef as forwardRef2 } from "react";

// src/components/ui/IconButton.css.ts
var container = "IconButton_container__5zr4fg0";

// src/components/ui/IconButton.tsx
import { jsx as jsx4 } from "react/jsx-runtime";
var IconButton = forwardRef2(
  ({ className, asChild = false, ...props }, forwardedRef) => {
    const Comp = asChild ? Slot2 : "button";
    return /* @__PURE__ */ jsx4(Comp, { ...props, className: clsx(container, className), ref: forwardedRef });
  }
);
IconButton.displayName = "Button";

// src/components/icons/CloseIcon.tsx
import { jsx as jsx5 } from "react/jsx-runtime";
function CloseIcon(props) {
  return /* @__PURE__ */ jsx5("svg", { width: 10, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx5(
    "path",
    {
      d: "M9.708.292a.999.999 0 0 0-1.413 0l-3.289 3.29L1.717.291A.999.999 0 0 0 .305 1.705l3.289 3.289-3.29 3.289a.999.999 0 1 0 1.413 1.412l3.29-3.289 3.288 3.29a.999.999 0 0 0 1.413-1.413l-3.29-3.29 3.29-3.288a.999.999 0 0 0 0-1.413Z",
      fill: "currentColor"
    }
  ) });
}

// src/components/ui/Modal.tsx
import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
function Modal({ trigger, children, open, defaultOpen, onOpenChange }) {
  const [isModalOpen, setModalOpen] = useState2(open ?? defaultOpen);
  const handleOpenChange = (open2) => {
    setModalOpen(open2);
    onOpenChange?.(open2);
  };
  return /* @__PURE__ */ jsxs2(Dialog.Root, { open: open ?? isModalOpen, onOpenChange: handleOpenChange, children: [
    /* @__PURE__ */ jsx6(Dialog.Trigger, { asChild: true, children: trigger }),
    /* @__PURE__ */ jsx6(Dialog.Portal, { children: /* @__PURE__ */ jsx6(StyleMarker, { children: /* @__PURE__ */ jsx6(Dialog.Overlay, { className: overlay, children: /* @__PURE__ */ jsxs2(Dialog.Content, { className: content, "aria-describedby": void 0, children: [
      /* @__PURE__ */ jsx6(ProgressProvider, { children }),
      /* @__PURE__ */ jsx6(Dialog.Close, { className: closeButtonContainer, asChild: true, children: /* @__PURE__ */ jsx6(IconButton, { type: "button", "aria-label": "Close", children: /* @__PURE__ */ jsx6(CloseIcon, {}) }) })
    ] }) }) }) })
  ] });
}
export {
  Modal
};
//# sourceMappingURL=Modal.js.map