@hoosei/voxweave-react/dist/esm/index13.js

A customizable and interactive voice UI component for React applications

import { useState as m, useEffect as E } from "react";
import { motion as d, AnimatePresence as x } from "framer-motion";
import { cn as p } from "./index8.js";
import { isAuroraAnimation as c } from "./index58.js";
import { jsx as n } from "react/jsx-runtime";
const O = ({
  darkMode: a = !1,
  size: t = 200,
  containerPosition: s
}) => /* @__PURE__ */ n(d.div, {
  className: "vox:flex vox:items-center vox:justify-center",
  initial: {
    opacity: 0,
    height: 0
  },
  animate: {
    opacity: 1,
    width: s === "bottom" ? t / 1.6 : t,
    height: s === "bottom" ? t / 1.6 : t
  },
  exit: {
    opacity: 0,
    height: 0
  },
  transition: {
    duration: 0.5,
    ease: "easeInOut",
    height: {
      duration: 0.5,
      ease: "easeInOut"
    }
  },
  children: /* @__PURE__ */ n("div", {
    className: p("vox:animate-spin vox:rounded-full vox:h-8 vox:w-8 vox:border-b-2 vox:border-gray-900", a ? "vox:border-white/50" : "vox:border-gray-900/50")
  })
});
function N(a) {
  const [t, s] = m(null), [f, h] = m(!0), {
    size: o = 200,
    darkMode: u = !1,
    containerPosition: i,
    isVertical: e,
    animation: l
  } = a;
  return E(() => {
    typeof window < "u" && import("react").then((r) => {
      const _ = r;
      return _.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED || (_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {}), _.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner || (_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner = {
        current: null
      }), import("./index57.js");
    }).then((r) => {
      s(() => r.VoxweaveThreeJS), setTimeout(() => h(!1), 100);
    }).catch((r) => {
      console.error("Failed to load Three.js component:", r);
    });
  }, []), /* @__PURE__ */ n(d.div, {
    className: "vox:overflow-hidden",
    initial: {
      height: i === "bottom" ? o / 1.8 : o,
      width: c(l) ? 0 : i === "bottom" && !e ? o * 0.8 : "auto",
      display: e ? "block" : "flex",
      justifyContent: e ? "flex-start" : "center",
      alignItems: e ? "flex-start" : "center"
    },
    animate: {
      height: i === "bottom" ? o / 1.8 : o,
      width: c(l) ? 0 : i === "bottom" && !e ? o * 0.8 : "auto",
      display: e ? "block" : "flex",
      justifyContent: e ? "flex-start" : "center",
      alignItems: e ? "flex-start" : "center"
    },
    transition: {
      duration: 0.6,
      ease: "easeInOut"
    },
    children: /* @__PURE__ */ n(x, {
      mode: "wait",
      children: f ? /* @__PURE__ */ n(O, {
        darkMode: u,
        size: o,
        containerPosition: i
      }, "loader") : t ? /* @__PURE__ */ n(t, {
        ...a
      }) : null
    })
  }, "three-wrapper");
}
export {
  N as ThreeWrapper
};
//# sourceMappingURL=index13.js.map