'use client';
import { jsx as n, jsxs as b } from "react/jsx-runtime";
import "@emotion/styled";
import { Spinner as E } from "../../ui/spinner/spinner.js";
import { motion as m } from "framer-motion";
import h from "react";
import { useConfig as y } from "../../../hooks/use-config.js";
import { useTheme as P } from "../../../hooks/use-theme.js";
const _ = ({
  size: e,
  color: s,
  duration: t = 1
}) => /* @__PURE__ */ n(
  m.div,
  {
    className: `border-2 border-transparent border-t-current border-r-current rounded-full ${e}`,
    animate: { rotate: 360 },
    transition: { duration: t, repeat: Number.POSITIVE_INFINITY, ease: "linear" },
    style: { color: `var(--${s})` }
  }
), Y = ({
  size: e,
  color: s,
  duration: t = 1.4
}) => {
  const r = {
    "w-2 h-2": "w-2 h-2",
    "w-3 h-3": "w-3 h-3",
    "w-4 h-4": "w-4 h-4",
    "w-6 h-6": "w-6 h-6"
  }[e] || "w-3 h-3";
  return /* @__PURE__ */ n("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ n(
    m.div,
    {
      className: `${r} rounded-full bg-current`,
      style: { color: `var(--${s})` },
      animate: { scale: [1, 1.2, 1], opacity: [0.5, 1, 0.5] },
      transition: {
        duration: t,
        repeat: Number.POSITIVE_INFINITY,
        delay: i * 0.2,
        ease: "easeInOut"
      }
    },
    i
  )) });
}, k = ({
  size: e,
  color: s,
  duration: t = 1.5
}) => /* @__PURE__ */ n(
  m.div,
  {
    className: `rounded-full bg-current ${e}`,
    style: { color: `var(--${s})` },
    animate: { scale: [1, 1.2, 1], opacity: [0.5, 1, 0.5] },
    transition: {
      duration: t,
      repeat: Number.POSITIVE_INFINITY,
      ease: "easeInOut"
    }
  }
), B = ({
  size: e,
  color: s,
  duration: t = 1.2
}) => {
  const r = {
    "w-2 h-2": "w-1 h-4",
    "w-3 h-3": "w-1 h-6",
    "w-4 h-4": "w-1 h-8",
    "w-6 h-6": "w-2 h-12"
  }[e] || "w-1 h-6";
  return /* @__PURE__ */ n("div", { className: "flex items-end gap-1", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ n(
    m.div,
    {
      className: `${r} bg-current rounded-sm`,
      style: { color: `var(--${s})` },
      animate: { scaleY: [1, 2, 1] },
      transition: {
        duration: t,
        repeat: Number.POSITIVE_INFINITY,
        delay: i * 0.1,
        ease: "easeInOut"
      }
    },
    i
  )) });
};
function v({
  variant: e = "spinner",
  size: s = "md",
  color: t = "primary",
  text: a = "Loading...",
  showText: r = !1,
  textPosition: i = "bottom",
  centered: o = !1,
  overlay: c = !1,
  className: g = "",
  children: p,
  duration: l = 1,
  backdrop: f = !1,
  backdropOpacity: x = 0.5
}) {
  const { getColorValue: N } = P(), { components: S } = y(), w = S.LoadingSpinner;
  if (w)
    return /* @__PURE__ */ n(
      w,
      {
        variant: e,
        size: s,
        color: t,
        text: a,
        showText: r,
        textPosition: i,
        centered: o,
        overlay: c,
        className: g,
        children: p,
        duration: l,
        backdrop: f,
        backdropOpacity: x
      }
    );
  const L = {
    sm: "w-4 h-4",
    md: "w-6 h-6",
    lg: "w-8 h-8",
    xl: "w-12 h-12"
  }, C = {
    sm: "text-xs",
    md: "text-sm",
    lg: "text-base",
    xl: "text-lg"
  };
  N(t);
  const z = () => {
    const d = L[s], u = `text-${t}-600 dark:text-${t}-400`;
    switch (e) {
      case "dots":
        return /* @__PURE__ */ n(
          Y,
          {
            size: d,
            color: u,
            duration: l
          }
        );
      case "pulse":
        return /* @__PURE__ */ n(
          k,
          {
            size: d,
            color: u,
            duration: l
          }
        );
      case "bars":
        return /* @__PURE__ */ n(
          B,
          {
            size: d,
            color: u,
            duration: l
          }
        );
      case "custom":
        return p || /* @__PURE__ */ n(
          _,
          {
            size: d,
            color: u,
            duration: l
          }
        );
      case "spinner":
      default:
        return /* @__PURE__ */ n(E, { size: s, color: t });
    }
  }, T = () => !r || !a ? null : /* @__PURE__ */ n(
    "span",
    {
      className: `${C[s]} text-${t}-600 dark:text-${t}-400 font-medium`,
      children: a
    }
  ), V = () => {
    const d = z(), u = T();
    if (!r)
      return d;
    const O = {
      top: "flex-col-reverse",
      bottom: "flex-col",
      left: "flex-row-reverse",
      right: "flex-row"
    }, j = {
      top: "gap-2",
      bottom: "gap-2",
      left: "gap-3",
      right: "gap-3"
    };
    return /* @__PURE__ */ b(
      "div",
      {
        className: `flex items-center justify-center ${O[i]} ${j[i]}`,
        children: [
          d,
          u
        ]
      }
    );
  }, $ = /* @__PURE__ */ n(
    "div",
    {
      className: `
      ${o ? "flex items-center justify-center" : ""}
      ${g}
    `,
      children: V()
    }
  );
  return c ? /* @__PURE__ */ b("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
    f && /* @__PURE__ */ n(
      m.div,
      {
        initial: { opacity: 0 },
        animate: { opacity: x },
        exit: { opacity: 0 },
        className: "absolute inset-0 bg-background/80 backdrop-blur-sm"
      }
    ),
    /* @__PURE__ */ n(
      m.div,
      {
        initial: { opacity: 0, scale: 0.8 },
        animate: { opacity: 1, scale: 1 },
        exit: { opacity: 0, scale: 0.8 },
        className: "relative z-10",
        children: $
      }
    )
  ] }) : $;
}
function G({
  isLoading: e = !1,
  loadingText: s = "Loading...",
  spinnerProps: t = {},
  variant: a = "solid",
  color: r = "primary",
  size: i = "md",
  children: o,
  disabled: c,
  className: g = "",
  ...p
}) {
  const { components: l } = y(), f = l.LoadingButton;
  if (f)
    return /* @__PURE__ */ n(
      f,
      {
        isLoading: e,
        loadingText: s,
        spinnerProps: t,
        variant: a,
        color: r,
        size: i,
        children: o,
        disabled: c,
        className: g,
        ...p
      }
    );
  const x = {
    sm: "sm",
    md: "sm",
    lg: "md"
  };
  return /* @__PURE__ */ b(
    "button",
    {
      ...p,
      disabled: c || e,
      className: `
        relative inline-flex items-center justify-center gap-2 px-4 py-2 
        text-sm font-medium rounded-md transition-colors
        ${a === "solid" ? `bg-${r}-600 text-white hover:bg-${r}-700` : ""}
        ${a === "bordered" ? `border border-${r}-600 text-${r}-600 hover:bg-${r}-50` : ""}
        ${a === "light" ? `text-${r}-600 hover:bg-${r}-50` : ""}
        disabled:opacity-50 disabled:cursor-not-allowed
        ${g}
      `,
      children: [
        e && /* @__PURE__ */ n(
          v,
          {
            variant: "spinner",
            size: x[i],
            color: a === "solid" ? "default" : r,
            ...t
          }
        ),
        /* @__PURE__ */ n("span", { className: e ? "opacity-70" : "", children: e ? s : o })
      ]
    }
  );
}
const J = {
  signIn: {
    text: "Signing in...",
    variant: "spinner"
  },
  signUp: {
    text: "Creating account...",
    variant: "spinner"
  },
  signOut: {
    text: "Signing out...",
    variant: "dots"
  },
  verifying: {
    text: "Verifying...",
    variant: "pulse"
  },
  processing: {
    text: "Processing...",
    variant: "bars"
  },
  loading: {
    text: "Loading...",
    variant: "spinner"
  },
  sending: {
    text: "Sending...",
    variant: "dots"
  },
  redirecting: {
    text: "Redirecting...",
    variant: "pulse"
  }
}, I = h.createContext(null);
function K({ children: e }) {
  const [s, t] = h.useState(!1), [a, r] = h.useState("Loading..."), i = h.useCallback(
    (o, c = "Loading...") => {
      t(o), r(c);
    },
    []
  );
  return /* @__PURE__ */ b(I.Provider, { value: { isLoading: s, loadingText: a, setLoading: i }, children: [
    e,
    s && /* @__PURE__ */ n(
      v,
      {
        overlay: !0,
        backdrop: !0,
        showText: !0,
        text: a,
        variant: "spinner",
        size: "lg",
        color: "primary"
      }
    )
  ] });
}
function M() {
  const e = h.useContext(I);
  if (!e)
    throw new Error("useLoading must be used within a LoadingProvider");
  return e;
}
var Q = v;
export {
  G as LoadingButton,
  K as LoadingProvider,
  v as LoadingSpinner,
  J as LoadingStates,
  Q as default,
  M as useLoading
};
//# sourceMappingURL=loading-spinner.js.map
