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

A design system for building ambitious products.

"use strict";
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// components/atoms/progress-bar.tsx
var progress_bar_exports = {};
__export(progress_bar_exports, {
  default: () => progress_bar_default,
  useProgress: () => useProgress
});
module.exports = __toCommonJS(progress_bar_exports);
var import_framer_motion = require("framer-motion");
var import_react2 = require("react");

// components/hooks/useScreen.ts
var import_react = require("react");
var useScreenSize = () => {
  const [screenSize, setScreenSize] = (0, import_react.useState)({ width: 0, height: 0 });
  function onResize(event) {
    setScreenSize({
      width: event.target.innerWidth,
      height: event.target.innerHeight
    });
  }
  (0, import_react.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
var import_jsx_runtime = require("react/jsx-runtime");
var context = (0, import_react2.createContext)({
  count: 0,
  setCount: () => {
  }
});
var PBar = ({ duration }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { className: "kl-fixed kl-top-0 kl-left-0 kl-right-0 kl-z-[999]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_framer_motion.motion.div,
    {
      className: "kl-absolute",
      initial: {
        left: "0%"
      },
      animate: {
        left: "100%"
      },
      transition: {
        repeat: Infinity,
        duration,
        ease: "linear"
      },
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_framer_motion.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] = (0, import_react2.useState)(0);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    context.Provider,
    {
      value: (0, import_react2.useMemo)(
        () => ({
          count,
          setCount
        }),
        [count, setCount]
      ),
      children: [
        count > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PBar, { duration }, duration) : null,
        children
      ]
    }
  );
};
var useProgress = () => {
  const { setCount, count } = (0, import_react2.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;