@kvell-group/ui 1.9.0 → 1.9.1

package/dist/components/Button/Button.js

@@ -1,560 +1,14 @@
-import { jsx as i, Fragment as Q, jsxs as F } from "react/jsx-runtime";
-import { u as it, j as ct, g as mt, r as q } from "../../MantineThemeProvider-kHsOfZUW.js";
-import { useState as j, useRef as L, useEffect as X, forwardRef as I } from "react";
-import { B as g, d as M, f as W, u as N, a as k, c as E, e as _, h as z, b as D, p as pt } from "../../polymorphic-factory-Bvt8Is5k.js";
-import lt from "react-dom";
-import { U as dt } from "../../UnstyledButton-D2QHft3M.js";
-import '../../assets/Button.css';function ut(t, o) {
-  try {
-    return t.addEventListener("change", o), () => t.removeEventListener("change", o);
-  } catch {
-    return t.addListener(o), () => t.removeListener(o);
-  }
-}
-function ft(t, o) {
-  return typeof window < "u" && "matchMedia" in window ? window.matchMedia(t).matches : !1;
-}
-function yt(t, o, { getInitialValueInEffect: r } = {
-  getInitialValueInEffect: !0
-}) {
-  const [s, e] = j(
-    r ? o : ft(t)
-  ), n = L(null);
-  return X(() => {
-    if ("matchMedia" in window)
-      return n.current = window.matchMedia(t), e(n.current.matches), ut(n.current, (a) => e(a.matches));
-  }, [t]), s;
-}
-function gt(t, o) {
-  const r = L(!1);
-  X(
-    () => () => {
-      r.current = !1;
-    },
-    []
-  ), X(() => {
-    if (r.current)
-      return t();
-    r.current = !0;
-  }, o);
-}
-function bt(t, o) {
-  return yt("(prefers-reduced-motion: reduce)", t, o);
-}
-const Y = (t) => ({
-  in: { opacity: 1, transform: "scale(1)" },
-  out: { opacity: 0, transform: `scale(.9) translateY(${t === "bottom" ? 10 : -10}px)` },
-  transitionProperty: "transform, opacity"
-}), C = {
-  fade: {
-    in: { opacity: 1 },
-    out: { opacity: 0 },
-    transitionProperty: "opacity"
-  },
-  "fade-up": {
-    in: { opacity: 1, transform: "translateY(0)" },
-    out: { opacity: 0, transform: "translateY(30px)" },
-    transitionProperty: "opacity, transform"
-  },
-  "fade-down": {
-    in: { opacity: 1, transform: "translateY(0)" },
-    out: { opacity: 0, transform: "translateY(-30px)" },
-    transitionProperty: "opacity, transform"
-  },
-  "fade-left": {
-    in: { opacity: 1, transform: "translateX(0)" },
-    out: { opacity: 0, transform: "translateX(30px)" },
-    transitionProperty: "opacity, transform"
-  },
-  "fade-right": {
-    in: { opacity: 1, transform: "translateX(0)" },
-    out: { opacity: 0, transform: "translateX(-30px)" },
-    transitionProperty: "opacity, transform"
-  },
-  scale: {
-    in: { opacity: 1, transform: "scale(1)" },
-    out: { opacity: 0, transform: "scale(0)" },
-    common: { transformOrigin: "top" },
-    transitionProperty: "transform, opacity"
-  },
-  "scale-y": {
-    in: { opacity: 1, transform: "scaleY(1)" },
-    out: { opacity: 0, transform: "scaleY(0)" },
-    common: { transformOrigin: "top" },
-    transitionProperty: "transform, opacity"
-  },
-  "scale-x": {
-    in: { opacity: 1, transform: "scaleX(1)" },
-    out: { opacity: 0, transform: "scaleX(0)" },
-    common: { transformOrigin: "left" },
-    transitionProperty: "transform, opacity"
-  },
-  "skew-up": {
-    in: { opacity: 1, transform: "translateY(0) skew(0deg, 0deg)" },
-    out: { opacity: 0, transform: "translateY(-20px) skew(-10deg, -5deg)" },
-    common: { transformOrigin: "top" },
-    transitionProperty: "transform, opacity"
-  },
-  "skew-down": {
-    in: { opacity: 1, transform: "translateY(0) skew(0deg, 0deg)" },
-    out: { opacity: 0, transform: "translateY(20px) skew(-10deg, -5deg)" },
-    common: { transformOrigin: "bottom" },
-    transitionProperty: "transform, opacity"
-  },
-  "rotate-left": {
-    in: { opacity: 1, transform: "translateY(0) rotate(0deg)" },
-    out: { opacity: 0, transform: "translateY(20px) rotate(-5deg)" },
-    common: { transformOrigin: "bottom" },
-    transitionProperty: "transform, opacity"
-  },
-  "rotate-right": {
-    in: { opacity: 1, transform: "translateY(0) rotate(0deg)" },
-    out: { opacity: 0, transform: "translateY(20px) rotate(5deg)" },
-    common: { transformOrigin: "top" },
-    transitionProperty: "transform, opacity"
-  },
-  "slide-down": {
-    in: { opacity: 1, transform: "translateY(0)" },
-    out: { opacity: 0, transform: "translateY(-100%)" },
-    common: { transformOrigin: "top" },
-    transitionProperty: "transform, opacity"
-  },
-  "slide-up": {
-    in: { opacity: 1, transform: "translateY(0)" },
-    out: { opacity: 0, transform: "translateY(100%)" },
-    common: { transformOrigin: "bottom" },
-    transitionProperty: "transform, opacity"
-  },
-  "slide-left": {
-    in: { opacity: 1, transform: "translateX(0)" },
-    out: { opacity: 0, transform: "translateX(100%)" },
-    common: { transformOrigin: "left" },
-    transitionProperty: "transform, opacity"
-  },
-  "slide-right": {
-    in: { opacity: 1, transform: "translateX(0)" },
-    out: { opacity: 0, transform: "translateX(-100%)" },
-    common: { transformOrigin: "right" },
-    transitionProperty: "transform, opacity"
-  },
-  pop: {
-    ...Y("bottom"),
-    common: { transformOrigin: "center center" }
-  },
-  "pop-bottom-left": {
-    ...Y("bottom"),
-    common: { transformOrigin: "bottom left" }
-  },
-  "pop-bottom-right": {
-    ...Y("bottom"),
-    common: { transformOrigin: "bottom right" }
-  },
-  "pop-top-left": {
-    ...Y("top"),
-    common: { transformOrigin: "top left" }
-  },
-  "pop-top-right": {
-    ...Y("top"),
-    common: { transformOrigin: "top right" }
-  }
-}, J = {
-  entering: "in",
-  entered: "in",
-  exiting: "out",
-  exited: "out",
-  "pre-exiting": "out",
-  "pre-entering": "out"
-};
-function ht({
-  transition: t,
-  state: o,
-  duration: r,
-  timingFunction: s
-}) {
-  const e = {
-    WebkitBackfaceVisibility: "hidden",
-    willChange: "transform, opacity",
-    transitionDuration: `${r}ms`,
-    transitionTimingFunction: s
-  };
-  return typeof t == "string" ? t in C ? {
-    transitionProperty: C[t].transitionProperty,
-    ...e,
-    ...C[t].common,
-    ...C[t][J[o]]
-  } : {} : {
-    transitionProperty: t.transitionProperty,
-    ...e,
-    ...t.common,
-    ...t[J[o]]
-  };
-}
-function vt({
-  duration: t,
-  exitDuration: o,
-  timingFunction: r,
-  mounted: s,
-  onEnter: e,
-  onExit: n,
-  onEntered: a,
-  onExited: c,
-  enterDelay: m,
-  exitDelay: l
-}) {
-  const u = it(), h = bt(), f = u.respectReducedMotion ? h : !1, [v, p] = j(f ? 0 : t), [S, w] = j(s ? "entered" : "exited"), B = L(-1), $ = L(-1), x = L(-1), O = (d) => {
-    const P = d ? e : n, y = d ? a : c;
-    window.clearTimeout(B.current);
-    const T = f ? 0 : d ? t : o;
-    p(T), T === 0 ? (typeof P == "function" && P(), typeof y == "function" && y(), w(d ? "entered" : "exited")) : x.current = requestAnimationFrame(() => {
-      lt.flushSync(() => {
-        w(d ? "pre-entering" : "pre-exiting");
-      }), x.current = requestAnimationFrame(() => {
-        typeof P == "function" && P(), w(d ? "entering" : "exiting"), B.current = window.setTimeout(() => {
-          typeof y == "function" && y(), w(d ? "entered" : "exited");
-        }, T);
-      });
-    });
-  }, H = (d) => {
-    if (window.clearTimeout($.current), typeof (d ? m : l) != "number") {
-      O(d);
-      return;
-    }
-    $.current = window.setTimeout(
-      () => {
-        O(d);
-      },
-      d ? m : l
-    );
-  };
-  return gt(() => {
-    H(s);
-  }, [s]), X(
-    () => () => {
-      window.clearTimeout(B.current), cancelAnimationFrame(x.current);
-    },
-    []
-  ), {
-    transitionDuration: v,
-    transitionStatus: S,
-    transitionTimingFunction: r || "ease"
-  };
-}
-function tt({
-  keepMounted: t,
-  transition: o = "fade",
-  duration: r = 250,
-  exitDuration: s = r,
-  mounted: e,
-  children: n,
-  timingFunction: a = "ease",
-  onExit: c,
-  onEntered: m,
-  onEnter: l,
-  onExited: u,
-  enterDelay: h,
-  exitDelay: f
-}) {
-  const v = ct(), { transitionDuration: p, transitionStatus: S, transitionTimingFunction: w } = vt({
-    mounted: e,
-    exitDuration: s,
-    duration: r,
-    timingFunction: a,
-    onExit: c,
-    onEntered: m,
-    onEnter: l,
-    onExited: u,
-    enterDelay: h,
-    exitDelay: f
-  });
-  return p === 0 || v === "test" ? e ? /* @__PURE__ */ i(Q, { children: n({}) }) : t ? n({ display: "none" }) : null : S === "exited" ? t ? n({ display: "none" }) : null : /* @__PURE__ */ i(Q, { children: n(
-    ht({
-      transition: o,
-      duration: p,
-      state: S,
-      timingFunction: w
-    })
-  ) });
-}
-tt.displayName = "@mantine/core/Transition";
-var b = { root: "m_5ae2e3c", barsLoader: "m_7a2bd4cd", bar: "m_870bb79", "bars-loader-animation": "m_5d2b3b9d", dotsLoader: "m_4e3f22d7", dot: "m_870c4af", "loader-dots-animation": "m_aac34a1", ovalLoader: "m_b34414df", "oval-loader-animation": "m_f8e89c4b" };
-const ot = I(({ className: t, ...o }, r) => /* @__PURE__ */ F(g, { component: "span", className: M(b.barsLoader, t), ...o, ref: r, children: [
-  /* @__PURE__ */ i("span", { className: b.bar }),
-  /* @__PURE__ */ i("span", { className: b.bar }),
-  /* @__PURE__ */ i("span", { className: b.bar })
-] }));
-ot.displayName = "@mantine/core/Bars";
-const rt = I(({ className: t, ...o }, r) => /* @__PURE__ */ F(g, { component: "span", className: M(b.dotsLoader, t), ...o, ref: r, children: [
-  /* @__PURE__ */ i("span", { className: b.dot }),
-  /* @__PURE__ */ i("span", { className: b.dot }),
-  /* @__PURE__ */ i("span", { className: b.dot })
-] }));
-rt.displayName = "@mantine/core/Dots";
-const nt = I(({ className: t, ...o }, r) => /* @__PURE__ */ i(g, { component: "span", className: M(b.ovalLoader, t), ...o, ref: r }));
-nt.displayName = "@mantine/core/Oval";
-const et = {
-  bars: ot,
-  oval: nt,
-  dots: rt
-}, wt = {
-  loaders: et,
-  type: "oval"
-}, St = E((t, { size: o, color: r }) => ({
-  root: {
-    "--loader-size": _(o, "loader-size"),
-    "--loader-color": r ? mt(r, t) : void 0
-  }
-})), V = W((t, o) => {
-  const r = N("Loader", wt, t), {
-    size: s,
-    color: e,
-    type: n,
-    vars: a,
-    className: c,
-    style: m,
-    classNames: l,
-    styles: u,
-    unstyled: h,
-    loaders: f,
-    variant: v,
-    children: p,
-    ...S
-  } = r, w = k({
-    name: "Loader",
-    props: r,
-    classes: b,
-    className: c,
-    style: m,
-    classNames: l,
-    styles: u,
-    unstyled: h,
-    vars: a,
-    varsResolver: St
-  });
-  return p ? /* @__PURE__ */ i(g, { ...w("root"), ref: o, ...S, children: p }) : /* @__PURE__ */ i(
-    g,
-    {
-      ...w("root"),
-      ref: o,
-      component: f[n],
-      variant: v,
-      size: s,
-      ...S
-    }
-  );
-});
-V.defaultLoaders = et;
-V.classes = b;
-V.displayName = "@mantine/core/Loader";
-var R = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844", groupSection: "m_70be2a01" };
-const K = {
-  orientation: "horizontal"
-}, Pt = E((t, { borderWidth: o }) => ({
-  group: { "--button-border-width": q(o) }
-})), A = W((t, o) => {
-  const r = N("ButtonGroup", K, t), {
-    className: s,
-    style: e,
-    classNames: n,
-    styles: a,
-    unstyled: c,
-    orientation: m,
-    vars: l,
-    borderWidth: u,
-    variant: h,
-    mod: f,
-    ...v
-  } = N("ButtonGroup", K, t), p = k({
-    name: "ButtonGroup",
-    props: r,
-    classes: R,
-    className: s,
-    style: e,
-    classNames: n,
-    styles: a,
-    unstyled: c,
-    vars: l,
-    varsResolver: Pt,
-    rootSelector: "group"
-  });
-  return /* @__PURE__ */ i(
-    g,
-    {
-      ...p("group"),
-      ref: o,
-      variant: h,
-      mod: [{ "data-orientation": m }, f],
-      role: "group",
-      ...v
-    }
-  );
-});
-A.classes = R;
-A.displayName = "@mantine/core/ButtonGroup";
-const Z = {}, xt = E(
-  (t, { radius: o, color: r, gradient: s, variant: e, autoContrast: n, size: a }) => {
-    const c = t.variantColorResolver({
-      color: r || t.primaryColor,
-      theme: t,
-      gradient: s,
-      variant: e || "filled",
-      autoContrast: n
-    });
-    return {
-      groupSection: {
-        "--section-height": _(a, "section-height"),
-        "--section-padding-x": _(a, "section-padding-x"),
-        "--section-fz": a != null && a.includes("compact") ? D(a.replace("compact-", "")) : D(a),
-        "--section-radius": o === void 0 ? void 0 : z(o),
-        "--section-bg": r || e ? c.background : void 0,
-        "--section-color": c.color,
-        "--section-bd": r || e ? c.border : void 0
-      }
-    };
-  }
-), U = W((t, o) => {
-  const r = N("ButtonGroupSection", Z, t), {
-    className: s,
-    style: e,
-    classNames: n,
-    styles: a,
-    unstyled: c,
-    vars: m,
-    variant: l,
-    gradient: u,
-    radius: h,
-    autoContrast: f,
-    ...v
-  } = N("ButtonGroupSection", Z, t), p = k({
-    name: "ButtonGroupSection",
-    props: r,
-    classes: R,
-    className: s,
-    style: e,
-    classNames: n,
-    styles: a,
-    unstyled: c,
-    vars: m,
-    varsResolver: xt,
-    rootSelector: "groupSection"
-  });
-  return /* @__PURE__ */ i(g, { ...p("groupSection"), ref: o, variant: l, ...v });
-});
-U.classes = R;
-U.displayName = "@mantine/core/ButtonGroupSection";
-const Nt = {
-  in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${q(1)}))` },
-  out: { opacity: 0, transform: "translate(-50%, -200%)" },
-  common: { transformOrigin: "center" },
-  transitionProperty: "transform, opacity"
-}, Rt = {}, Bt = E(
-  (t, { radius: o, color: r, gradient: s, variant: e, size: n, justify: a, autoContrast: c }) => {
-    const m = t.variantColorResolver({
-      color: r || t.primaryColor,
-      theme: t,
-      gradient: s,
-      variant: e || "filled",
-      autoContrast: c
-    });
-    return {
-      root: {
-        "--button-justify": a,
-        "--button-height": _(n, "button-height"),
-        "--button-padding-x": _(n, "button-padding-x"),
-        "--button-fz": n != null && n.includes("compact") ? D(n.replace("compact-", "")) : D(n),
-        "--button-radius": o === void 0 ? void 0 : z(o),
-        "--button-bg": r || e ? m.background : void 0,
-        "--button-hover": r || e ? m.hover : void 0,
-        "--button-color": m.color,
-        "--button-bd": r || e ? m.border : void 0,
-        "--button-hover-color": r || e ? m.hoverColor : void 0
-      }
-    };
-  }
-), G = pt((t, o) => {
-  const r = N("Button", Rt, t), {
-    style: s,
-    vars: e,
-    className: n,
-    color: a,
-    disabled: c,
-    children: m,
-    leftSection: l,
-    rightSection: u,
-    fullWidth: h,
-    variant: f,
-    radius: v,
-    loading: p,
-    loaderProps: S,
-    gradient: w,
-    classNames: B,
-    styles: $,
-    unstyled: x,
-    "data-disabled": O,
-    autoContrast: H,
-    mod: d,
-    ...P
-  } = r, y = k({
-    name: "Button",
-    props: r,
-    classes: R,
-    className: n,
-    style: s,
-    classNames: B,
-    styles: $,
-    unstyled: x,
-    vars: e,
-    varsResolver: Bt
-  }), T = !!l, at = !!u;
-  return /* @__PURE__ */ F(
-    dt,
-    {
-      ref: o,
-      ...y("root", { active: !c && !p && !O }),
-      unstyled: x,
-      variant: f,
-      disabled: c || p,
-      mod: [
-        {
-          disabled: c || O,
-          loading: p,
-          block: h,
-          "with-left-section": T,
-          "with-right-section": at
-        },
-        d
-      ],
-      ...P,
-      children: [
-        /* @__PURE__ */ i(tt, { mounted: !!p, transition: Nt, duration: 150, children: (st) => /* @__PURE__ */ i(g, { component: "span", ...y("loader", { style: st }), "aria-hidden": !0, children: /* @__PURE__ */ i(
-          V,
-          {
-            color: "var(--button-color)",
-            size: "calc(var(--button-height) / 1.8)",
-            ...S
-          }
-        ) }) }),
-        /* @__PURE__ */ F("span", { ...y("inner"), children: [
-          l && /* @__PURE__ */ i(g, { component: "span", ...y("section"), mod: { position: "left" }, children: l }),
-          /* @__PURE__ */ i(g, { component: "span", mod: { loading: p }, ...y("label"), children: m }),
-          u && /* @__PURE__ */ i(g, { component: "span", ...y("section"), mod: { position: "right" }, children: u })
-        ] })
-      ]
-    }
-  );
-});
-G.classes = R;
-G.displayName = "@mantine/core/Button";
-G.Group = A;
-G.GroupSection = U;
-const Ot = "_root_arz1h_1", Tt = {
-  root: Ot
-}, Ft = (t) => /* @__PURE__ */ i(
-  G,
+import { jsx as t } from "react/jsx-runtime";
+import { Button as s } from "@mantine/core";
+import '../../assets/Button.css';const r = "_root_arz1h_1", n = {
+  root: r
+}, c = (o) => /* @__PURE__ */ t(
+  s,
   {
-    ...t,
-    classNames: Tt
+    ...o,
+    classNames: n
   }
 );
 export {
-  Ft as Button
+  c as Button
 };