dn-react-router-toolkit 0.1.1 → 0.1.3

package/dist/components/modal/hooks.mjs

@@ -0,0 +1,204 @@
+// src/components/modal/hooks.tsx
+import { createContext, useCallback, useEffect as useEffect3, useRef as useRef3, useState } from "react";
+import { createPortal } from "react-dom";
+
+// src/components/modal/modal.tsx
+import React2, {
+  useEffect as useEffect2,
+  useRef as useRef2
+} from "react";
+
+// src/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+
+// src/components/modal/fullscreen_container.tsx
+import React from "react";
+import {
+  useEffect,
+  useRef
+} from "react";
+function useFullscreen(ref) {
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) {
+      return;
+    }
+    const scroll = () => {
+      if (scrollY > 0) {
+        window.scrollTo({
+          top: 0,
+          behavior: "instant"
+        });
+      }
+    };
+    const resize = () => {
+      if (!visualViewport) {
+        return;
+      }
+      container.classList.remove("bottom-0");
+      container.style.height = `${visualViewport?.height}px`;
+      if (visualViewport.height < window.innerHeight) {
+        window.addEventListener("scroll", scroll);
+      } else {
+        window.removeEventListener("scroll", scroll);
+      }
+    };
+    resize();
+    visualViewport?.addEventListener("resize", resize);
+    scroll();
+    return () => {
+      window.removeEventListener("scroll", scroll);
+      visualViewport?.removeEventListener("resize", resize);
+    };
+  }, [ref]);
+  return "fixed inset-0";
+}
+
+// src/components/modal/modal.tsx
+function Modal({
+  open,
+  className,
+  background = "bg-gray-500/25",
+  onBackgroundClick,
+  children,
+  ...props
+}) {
+  const containerRef = useRef2(null);
+  const fullscreen = useFullscreen(containerRef);
+  const [mounted, setMounted] = React2.useState(false);
+  useEffect2(() => {
+    if (open) {
+      setMounted(true);
+    } else {
+      setTimeout(() => {
+        setMounted(false);
+      }, 200);
+    }
+    return () => {
+    };
+  }, [open]);
+  const onBackgroundMouseDown = (event) => {
+    event.preventDefault();
+    onBackgroundClick?.();
+  };
+  const onModalMouseDown = (event) => {
+    event.stopPropagation();
+  };
+  const onBackgroundTouchStart = (event) => {
+    event.preventDefault();
+    onBackgroundClick?.();
+  };
+  const onModalTouchStart = (event) => {
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        fullscreen,
+        "z-[999] flex flex-col justify-center transition-bg duration-200 md:px-6 overflow-hidden print:px-0 print:block print:overflow-auto",
+        open && mounted ? cn(background, "ease-out") : "bg-transparent ease-in pointer-events-none"
+      ),
+      onMouseDown: onBackgroundMouseDown,
+      onTouchStart: onBackgroundTouchStart
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        className: cn(
+          "relative flex-1 flex flex-col justify-end md:justify-center items-center transition-[opacity transform] duration-200 print:block",
+          open && mounted ? "translate-y-[0px] opacity-100 ease-out" : "translate-y-[100%] md:translate-y-[50px] opacity-0 ease-in"
+        )
+      },
+      (open || mounted) && /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          ...props,
+          className: cn(
+            className,
+            "w-full max-h-[92vh] print:w-[unset] print:max-h-[unset] rounded-tl-lg rounded-tr-lg md:rounded-lg overflow-auto print:rounded-none"
+          ),
+          onMouseDown: onModalMouseDown,
+          onTouchStart: onModalTouchStart
+        },
+        children
+      )
+    )
+  );
+}
+
+// src/components/modal/hooks.tsx
+import React3 from "react";
+function useModalRoot() {
+  const [container, setContainer] = useState(null);
+  useEffect3(() => {
+    const container2 = document.getElementById("modal-root");
+    if (container2) {
+      setContainer(container2);
+    }
+    return () => {
+      setContainer(null);
+    };
+  }, []);
+  return container;
+}
+function useModalPortal() {
+  const container = useModalRoot();
+  if (!container) {
+    return (children) => null;
+  }
+  return (children) => {
+    return createPortal(children, container);
+  };
+}
+var ModalContext = createContext({});
+function useModal() {
+  const ch2 = useRef3(
+    null
+  );
+  const open = () => {
+    ch2.current?.(true);
+  };
+  const close = () => {
+    ch2.current?.(false);
+  };
+  const Component = useCallback(
+    function Component2(props) {
+      const [isOpen, setIsOpen] = useState(false);
+      const createPortal2 = useModalPortal();
+      useEffect3(() => {
+        ch2.current = (v) => {
+          setIsOpen(v);
+        };
+        return () => {
+          ch2.current = null;
+        };
+      }, []);
+      useEffect3(() => {
+        if (isOpen) {
+        } else {
+        }
+        return () => {
+        };
+      }, [isOpen]);
+      return /* @__PURE__ */ React3.createElement(ModalContext.Provider, { value: { open, close, isOpen } }, createPortal2(
+        /* @__PURE__ */ React3.createElement(Modal, { ...props, open: isOpen, onBackgroundClick: close })
+      ));
+    },
+    []
+  );
+  return {
+    open,
+    close,
+    Modal: Component
+  };
+}
+export {
+  ModalContext,
+  useModal,
+  useModalPortal,
+  useModalRoot
+};

package/dist/components/modal/index.d.mts

@@ -0,0 +1,4 @@
+export { Props, useFullscreen } from './fullscreen_container.mjs';
+export { ModalContext, ModalContextProps, useModal, useModalPortal, useModalRoot } from './hooks.mjs';
+export { ModalProps } from './modal.mjs';
+import 'react';

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

@@ -0,0 +1,4 @@
+export { Props, useFullscreen } from './fullscreen_container.js';
+export { ModalContext, ModalContextProps, useModal, useModalPortal, useModalRoot } from './hooks.js';
+export { ModalProps } from './modal.js';
+import 'react';

package/dist/components/modal/index.js

@@ -0,0 +1,238 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/modal/index.ts
+var modal_exports = {};
+__export(modal_exports, {
+  ModalContext: () => ModalContext,
+  useFullscreen: () => useFullscreen,
+  useModal: () => useModal,
+  useModalPortal: () => useModalPortal,
+  useModalRoot: () => useModalRoot
+});
+module.exports = __toCommonJS(modal_exports);
+
+// src/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+
+// src/components/modal/fullscreen_container.tsx
+var import_react = __toESM(require("react"));
+var import_react2 = require("react");
+function useFullscreen(ref) {
+  (0, import_react2.useEffect)(() => {
+    const container = ref.current;
+    if (!container) {
+      return;
+    }
+    const scroll = () => {
+      if (scrollY > 0) {
+        window.scrollTo({
+          top: 0,
+          behavior: "instant"
+        });
+      }
+    };
+    const resize = () => {
+      if (!visualViewport) {
+        return;
+      }
+      container.classList.remove("bottom-0");
+      container.style.height = `${visualViewport?.height}px`;
+      if (visualViewport.height < window.innerHeight) {
+        window.addEventListener("scroll", scroll);
+      } else {
+        window.removeEventListener("scroll", scroll);
+      }
+    };
+    resize();
+    visualViewport?.addEventListener("resize", resize);
+    scroll();
+    return () => {
+      window.removeEventListener("scroll", scroll);
+      visualViewport?.removeEventListener("resize", resize);
+    };
+  }, [ref]);
+  return "fixed inset-0";
+}
+
+// src/components/modal/hooks.tsx
+var import_react4 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/components/modal/modal.tsx
+var import_react3 = __toESM(require("react"));
+function Modal({
+  open,
+  className,
+  background = "bg-gray-500/25",
+  onBackgroundClick,
+  children,
+  ...props
+}) {
+  const containerRef = (0, import_react3.useRef)(null);
+  const fullscreen = useFullscreen(containerRef);
+  const [mounted, setMounted] = import_react3.default.useState(false);
+  (0, import_react3.useEffect)(() => {
+    if (open) {
+      setMounted(true);
+    } else {
+      setTimeout(() => {
+        setMounted(false);
+      }, 200);
+    }
+    return () => {
+    };
+  }, [open]);
+  const onBackgroundMouseDown = (event) => {
+    event.preventDefault();
+    onBackgroundClick?.();
+  };
+  const onModalMouseDown = (event) => {
+    event.stopPropagation();
+  };
+  const onBackgroundTouchStart = (event) => {
+    event.preventDefault();
+    onBackgroundClick?.();
+  };
+  const onModalTouchStart = (event) => {
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        fullscreen,
+        "z-[999] flex flex-col justify-center transition-bg duration-200 md:px-6 overflow-hidden print:px-0 print:block print:overflow-auto",
+        open && mounted ? cn(background, "ease-out") : "bg-transparent ease-in pointer-events-none"
+      ),
+      onMouseDown: onBackgroundMouseDown,
+      onTouchStart: onBackgroundTouchStart
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        className: cn(
+          "relative flex-1 flex flex-col justify-end md:justify-center items-center transition-[opacity transform] duration-200 print:block",
+          open && mounted ? "translate-y-[0px] opacity-100 ease-out" : "translate-y-[100%] md:translate-y-[50px] opacity-0 ease-in"
+        )
+      },
+      (open || mounted) && /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          ...props,
+          className: cn(
+            className,
+            "w-full max-h-[92vh] print:w-[unset] print:max-h-[unset] rounded-tl-lg rounded-tr-lg md:rounded-lg overflow-auto print:rounded-none"
+          ),
+          onMouseDown: onModalMouseDown,
+          onTouchStart: onModalTouchStart
+        },
+        children
+      )
+    )
+  );
+}
+
+// src/components/modal/hooks.tsx
+var import_react5 = __toESM(require("react"));
+function useModalRoot() {
+  const [container, setContainer] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    const container2 = document.getElementById("modal-root");
+    if (container2) {
+      setContainer(container2);
+    }
+    return () => {
+      setContainer(null);
+    };
+  }, []);
+  return container;
+}
+function useModalPortal() {
+  const container = useModalRoot();
+  if (!container) {
+    return (children) => null;
+  }
+  return (children) => {
+    return (0, import_react_dom.createPortal)(children, container);
+  };
+}
+var ModalContext = (0, import_react4.createContext)({});
+function useModal() {
+  const ch2 = (0, import_react4.useRef)(
+    null
+  );
+  const open = () => {
+    ch2.current?.(true);
+  };
+  const close = () => {
+    ch2.current?.(false);
+  };
+  const Component = (0, import_react4.useCallback)(
+    function Component2(props) {
+      const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
+      const createPortal2 = useModalPortal();
+      (0, import_react4.useEffect)(() => {
+        ch2.current = (v) => {
+          setIsOpen(v);
+        };
+        return () => {
+          ch2.current = null;
+        };
+      }, []);
+      (0, import_react4.useEffect)(() => {
+        if (isOpen) {
+        } else {
+        }
+        return () => {
+        };
+      }, [isOpen]);
+      return /* @__PURE__ */ import_react5.default.createElement(ModalContext.Provider, { value: { open, close, isOpen } }, createPortal2(
+        /* @__PURE__ */ import_react5.default.createElement(Modal, { ...props, open: isOpen, onBackgroundClick: close })
+      ));
+    },
+    []
+  );
+  return {
+    open,
+    close,
+    Modal: Component
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalContext,
+  useFullscreen,
+  useModal,
+  useModalPortal,
+  useModalRoot
+});

package/dist/components/modal/index.mjs

@@ -0,0 +1,203 @@
+// src/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+
+// src/components/modal/fullscreen_container.tsx
+import React from "react";
+import {
+  useEffect,
+  useRef
+} from "react";
+function useFullscreen(ref) {
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) {
+      return;
+    }
+    const scroll = () => {
+      if (scrollY > 0) {
+        window.scrollTo({
+          top: 0,
+          behavior: "instant"
+        });
+      }
+    };
+    const resize = () => {
+      if (!visualViewport) {
+        return;
+      }
+      container.classList.remove("bottom-0");
+      container.style.height = `${visualViewport?.height}px`;
+      if (visualViewport.height < window.innerHeight) {
+        window.addEventListener("scroll", scroll);
+      } else {
+        window.removeEventListener("scroll", scroll);
+      }
+    };
+    resize();
+    visualViewport?.addEventListener("resize", resize);
+    scroll();
+    return () => {
+      window.removeEventListener("scroll", scroll);
+      visualViewport?.removeEventListener("resize", resize);
+    };
+  }, [ref]);
+  return "fixed inset-0";
+}
+
+// src/components/modal/hooks.tsx
+import { createContext, useCallback, useEffect as useEffect3, useRef as useRef3, useState } from "react";
+import { createPortal } from "react-dom";
+
+// src/components/modal/modal.tsx
+import React2, {
+  useEffect as useEffect2,
+  useRef as useRef2
+} from "react";
+function Modal({
+  open,
+  className,
+  background = "bg-gray-500/25",
+  onBackgroundClick,
+  children,
+  ...props
+}) {
+  const containerRef = useRef2(null);
+  const fullscreen = useFullscreen(containerRef);
+  const [mounted, setMounted] = React2.useState(false);
+  useEffect2(() => {
+    if (open) {
+      setMounted(true);
+    } else {
+      setTimeout(() => {
+        setMounted(false);
+      }, 200);
+    }
+    return () => {
+    };
+  }, [open]);
+  const onBackgroundMouseDown = (event) => {
+    event.preventDefault();
+    onBackgroundClick?.();
+  };
+  const onModalMouseDown = (event) => {
+    event.stopPropagation();
+  };
+  const onBackgroundTouchStart = (event) => {
+    event.preventDefault();
+    onBackgroundClick?.();
+  };
+  const onModalTouchStart = (event) => {
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        fullscreen,
+        "z-[999] flex flex-col justify-center transition-bg duration-200 md:px-6 overflow-hidden print:px-0 print:block print:overflow-auto",
+        open && mounted ? cn(background, "ease-out") : "bg-transparent ease-in pointer-events-none"
+      ),
+      onMouseDown: onBackgroundMouseDown,
+      onTouchStart: onBackgroundTouchStart
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        className: cn(
+          "relative flex-1 flex flex-col justify-end md:justify-center items-center transition-[opacity transform] duration-200 print:block",
+          open && mounted ? "translate-y-[0px] opacity-100 ease-out" : "translate-y-[100%] md:translate-y-[50px] opacity-0 ease-in"
+        )
+      },
+      (open || mounted) && /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          ...props,
+          className: cn(
+            className,
+            "w-full max-h-[92vh] print:w-[unset] print:max-h-[unset] rounded-tl-lg rounded-tr-lg md:rounded-lg overflow-auto print:rounded-none"
+          ),
+          onMouseDown: onModalMouseDown,
+          onTouchStart: onModalTouchStart
+        },
+        children
+      )
+    )
+  );
+}
+
+// src/components/modal/hooks.tsx
+import React3 from "react";
+function useModalRoot() {
+  const [container, setContainer] = useState(null);
+  useEffect3(() => {
+    const container2 = document.getElementById("modal-root");
+    if (container2) {
+      setContainer(container2);
+    }
+    return () => {
+      setContainer(null);
+    };
+  }, []);
+  return container;
+}
+function useModalPortal() {
+  const container = useModalRoot();
+  if (!container) {
+    return (children) => null;
+  }
+  return (children) => {
+    return createPortal(children, container);
+  };
+}
+var ModalContext = createContext({});
+function useModal() {
+  const ch2 = useRef3(
+    null
+  );
+  const open = () => {
+    ch2.current?.(true);
+  };
+  const close = () => {
+    ch2.current?.(false);
+  };
+  const Component = useCallback(
+    function Component2(props) {
+      const [isOpen, setIsOpen] = useState(false);
+      const createPortal2 = useModalPortal();
+      useEffect3(() => {
+        ch2.current = (v) => {
+          setIsOpen(v);
+        };
+        return () => {
+          ch2.current = null;
+        };
+      }, []);
+      useEffect3(() => {
+        if (isOpen) {
+        } else {
+        }
+        return () => {
+        };
+      }, [isOpen]);
+      return /* @__PURE__ */ React3.createElement(ModalContext.Provider, { value: { open, close, isOpen } }, createPortal2(
+        /* @__PURE__ */ React3.createElement(Modal, { ...props, open: isOpen, onBackgroundClick: close })
+      ));
+    },
+    []
+  );
+  return {
+    open,
+    close,
+    Modal: Component
+  };
+}
+export {
+  ModalContext,
+  useFullscreen,
+  useModal,
+  useModalPortal,
+  useModalRoot
+};

package/dist/components/modal/modal.d.mts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+
+type ModalProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    open: boolean;
+    children?: ReactNode;
+    onBackgroundClick?: () => void;
+    embeded?: boolean;
+    always?: boolean;
+    background?: string;
+};
+declare function Modal({ open, className, background, onBackgroundClick, children, ...props }: ModalProps): React.JSX.Element;
+
+export { type ModalProps, Modal as default };

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+
+type ModalProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    open: boolean;
+    children?: ReactNode;
+    onBackgroundClick?: () => void;
+    embeded?: boolean;
+    always?: boolean;
+    background?: string;
+};
+declare function Modal({ open, className, background, onBackgroundClick, children, ...props }: ModalProps): React.JSX.Element;
+
+export { type ModalProps, Modal as default };