@kloudlite/design-system/mjs/atoms/progress-bar.js

A design system for building ambitious products.

"use client";

// components/atoms/progress-bar.tsx
import { motion } from "framer-motion";
import {
  createContext,
  useContext,
  useMemo,
  useState as useState2
} from "react";

// components/hooks/useScreen.ts
import { useEffect, useState } from "react";
var useScreenSize = () => {
  const [screenSize, setScreenSize] = useState({ width: 0, height: 0 });
  function onResize(event) {
    setScreenSize({
      width: event.target.innerWidth,
      height: event.target.innerHeight
    });
  }
  useEffect(() => {
    if (typeof window !== "undefined") {
      if (screenSize.width === 0 && screenSize.height === 0) {
        onResize({ target: window });
      }
      window.addEventListener("resize", onResize, true);
      return () => {
        window.removeEventListener("resize", onResize);
      };
    }
    return () => {
    };
  }, []);
  return screenSize;
};
var useScreen_default = useScreenSize;

// components/atoms/progress-bar.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var context = createContext({
  count: 0,
  setCount: () => {
  }
});
var PBar = ({ duration }) => {
  return /* @__PURE__ */ jsx(motion.div, { className: "kl-fixed kl-top-0 kl-left-0 kl-right-0 kl-z-[999]", children: /* @__PURE__ */ jsx(
    motion.div,
    {
      className: "kl-absolute",
      initial: {
        left: "0%"
      },
      animate: {
        left: "100%"
      },
      transition: {
        repeat: Infinity,
        duration,
        ease: "linear"
      },
      children: /* @__PURE__ */ jsx(
        motion.div,
        {
          className: "kl-bg-surface-primary-default kl-h-sm kl-animate-pulse",
          initial: {
            width: "12vw"
          },
          animate: {
            width: "20vw"
          },
          transition: {
            repeat: Infinity,
            repeatType: "reverse",
            duration: 1,
            ease: "easeInOut"
          }
        }
      )
    }
  ) });
};
var ProgressContainer = ({ children }) => {
  const { width } = useScreen_default();
  const duration = Math.ceil(width / (2240 / 3));
  const [count, setCount] = useState2(0);
  return /* @__PURE__ */ jsxs(
    context.Provider,
    {
      value: useMemo(
        () => ({
          count,
          setCount
        }),
        [count, setCount]
      ),
      children: [
        count > 0 ? /* @__PURE__ */ jsx(PBar, { duration }, duration) : null,
        children
      ]
    }
  );
};
var useProgress = () => {
  const { setCount, count } = useContext(context);
  const increment = () => setCount((c) => c + 1);
  const decrement = () => setCount((c) => c - 1);
  const reset = () => setCount(0);
  return {
    show: increment,
    hide: decrement,
    reset,
    visible: count > 0
  };
};
var progress_bar_default = ProgressContainer;
export {
  progress_bar_default as default,
  useProgress
};