mada-design-system 0.2.6 → 0.2.8

package/index.es49.js

@@ -1,52 +1,210 @@
-import { jsx as u } from "react/jsx-runtime";
-import { Slot as f } from "@radix-ui/react-slot";
-import { cva as p } from "./index.es100.js";
-import * as m from "react";
-import { cn as x } from "./index.es79.js";
-const v = p(
-  "inline-flex items-center gap-space-02 justify-center transition-colors focus:outline focus:outline-2 focus:outline-offset-1",
-  {
-    variants: {
-      size: {
-        default: "text-body-02 [&>svg]:size-[20px]",
-        sm: "text-body-01 [&>svg]:size-space-04"
-      },
-      colors: {
-        primary: "text-link-primary hover:text-link-primary-hovered focus:text-link-primary-focused active:text-link-primary-pressed visited:text-link-primary-visited focus:outline-border-black",
-        neutral: "text-link-neutral hover:text-link-neutral-hovered focus:text-link-neutral-focused active:text-link-neutral-pressed visited:text-link-neutral-visited focus:outline-border-black",
-        oncolor: "text-link-oncolor hover:text-link-oncolor-hovered focus:text-link-oncolor-focused active:text-link-oncolor-pressed visited:text-link-oncolor-visited focus:outline-border-white"
-      },
-      underline: {
-        hover: "underline-offset-2 hover:underline",
-        always: "underline-offset-2 underline"
-      },
-      disabled: {
-        true: "pointer-events-none cursor-not-allowed !text-disabled-text-default-disabled"
+import { jsx as o, jsxs as v, Fragment as P } from "react/jsx-runtime";
+import * as g from "react";
+import * as C from "recharts";
+import { cn as i } from "./index.es82.js";
+const I = { light: "", dark: ".dark" }, j = g.createContext(null);
+function $() {
+  const s = g.useContext(j);
+  if (!s)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return s;
+}
+const S = g.forwardRef(({ id: s, className: r, children: n, config: t, ...a }, f) => {
+  const l = g.useId(), c = `chart-${s || l.replace(/:/g, "")}`;
+  return /* @__PURE__ */ o(j.Provider, { value: { config: t }, children: /* @__PURE__ */ v(
+    "div",
+    {
+      "data-chart": c,
+      ref: f,
+      className: i(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+        r
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ o(E, { id: c, config: t }),
+        /* @__PURE__ */ o(C.ResponsiveContainer, { children: n })
+      ]
+    }
+  ) });
+});
+S.displayName = "Chart";
+const E = ({ id: s, config: r }) => {
+  const n = Object.entries(r).filter(
+    ([, t]) => t.theme || t.color
+  );
+  return n.length ? /* @__PURE__ */ o(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(I).map(
+          ([t, a]) => `
+${a} [data-chart=${s}] {
+${n.map(([f, l]) => {
+            var h;
+            const c = ((h = l.theme) == null ? void 0 : h[t]) || l.color;
+            return c ? `  --color-${f}: ${c};` : null;
+          }).join(`
+`)}
+}
+`
+        ).join(`
+`)
       }
-    },
-    compoundVariants: [],
-    defaultVariants: {
-      size: "default",
-      colors: "primary",
-      underline: "hover"
     }
-  }
-), k = m.forwardRef(
-  ({ className: e, size: t, underline: o, target: r, colors: i, disabled: n = !1, asChild: l = !1, ...s }, a) => {
-    const d = l ? f : "a", c = r === "_blank" ? "noopener noreferrer" : "";
-    return /* @__PURE__ */ u(
-      d,
+  ) : null;
+}, q = C.Tooltip, K = g.forwardRef(
+  ({
+    active: s,
+    payload: r,
+    className: n,
+    indicator: t = "dot",
+    hideLabel: a = !1,
+    hideIndicator: f = !1,
+    label: l,
+    labelFormatter: c,
+    labelClassName: h,
+    formatter: u,
+    color: L,
+    nameKey: R,
+    labelKey: _
+  }, T) => {
+    const { config: p } = $(), N = g.useMemo(() => {
+      var x;
+      if (a || !(r != null && r.length))
+        return null;
+      const [e] = r, w = `${_ || (e == null ? void 0 : e.dataKey) || (e == null ? void 0 : e.name) || "value"}`, m = k(p, e, w), d = !_ && typeof l == "string" ? ((x = p[l]) == null ? void 0 : x.label) || l : m == null ? void 0 : m.label;
+      return c ? /* @__PURE__ */ o("div", { className: i("font-medium", h), children: c(d, r) }) : d ? /* @__PURE__ */ o("div", { className: i("font-medium", h), children: d }) : null;
+    }, [
+      l,
+      c,
+      r,
+      a,
+      h,
+      p,
+      _
+    ]);
+    if (!s || !(r != null && r.length))
+      return null;
+    const b = r.length === 1 && t !== "dot";
+    return /* @__PURE__ */ v(
+      "div",
       {
-        className: x("text-link-primary", v({ size: t, underline: o, disabled: n, colors: i, className: e })),
-        ref: a,
-        rel: c,
-        ...s
+        ref: T,
+        className: i(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          n
+        ),
+        children: [
+          b ? null : N,
+          /* @__PURE__ */ o("div", { className: "grid gap-1.5", children: r.map((e, w) => {
+            const m = `${R || e.name || e.dataKey || "value"}`, d = k(p, e, m), x = L || e.payload.fill || e.color;
+            return /* @__PURE__ */ o(
+              "div",
+              {
+                className: i(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  t === "dot" && "items-center"
+                ),
+                children: u && (e == null ? void 0 : e.value) !== void 0 && e.name ? u(e.value, e.name, e, w, e.payload) : /* @__PURE__ */ v(P, { children: [
+                  d != null && d.icon ? /* @__PURE__ */ o(d.icon, {}) : !f && /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: i(
+                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                        {
+                          "h-2.5 w-2.5": t === "dot",
+                          "w-1": t === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent": t === "dashed",
+                          "my-0.5": b && t === "dashed"
+                        }
+                      ),
+                      style: {
+                        "--color-bg": x,
+                        "--color-border": x
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ v(
+                    "div",
+                    {
+                      className: i(
+                        "flex flex-1 justify-between leading-none",
+                        b ? "items-end" : "items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ v("div", { className: "grid gap-1.5", children: [
+                          b ? N : null,
+                          /* @__PURE__ */ o("span", { className: "text-muted-foreground", children: (d == null ? void 0 : d.label) || e.name })
+                        ] }),
+                        e.value && /* @__PURE__ */ o("span", { className: "font-mono font-medium tabular-nums text-foreground", children: e.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              e.dataKey
+            );
+          }) })
+        ]
       }
     );
   }
 );
-k.displayName = "Link";
+K.displayName = "ChartTooltip";
+const y = C.Legend, M = g.forwardRef(
+  ({ className: s, hideIcon: r = !1, payload: n, verticalAlign: t = "bottom", nameKey: a }, f) => {
+    const { config: l } = $();
+    return n != null && n.length ? /* @__PURE__ */ o(
+      "div",
+      {
+        ref: f,
+        className: i(
+          "flex items-center justify-center gap-4",
+          t === "top" ? "pb-3" : "pt-3",
+          s
+        ),
+        children: n.map((c) => {
+          const h = `${a || c.dataKey || "value"}`, u = k(l, c, h);
+          return /* @__PURE__ */ v(
+            "div",
+            {
+              className: i(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              ),
+              children: [
+                u != null && u.icon && !r ? /* @__PURE__ */ o(u.icon, {}) : /* @__PURE__ */ o(
+                  "div",
+                  {
+                    className: "h-2 w-2 shrink-0 rounded-[2px]",
+                    style: {
+                      backgroundColor: c.color
+                    }
+                  }
+                ),
+                u == null ? void 0 : u.label
+              ]
+            },
+            c.value
+          );
+        })
+      }
+    ) : null;
+  }
+);
+M.displayName = "ChartLegend";
+function k(s, r, n) {
+  if (typeof r != "object" || r === null)
+    return;
+  const t = "payload" in r && typeof r.payload == "object" && r.payload !== null ? r.payload : void 0;
+  let a = n;
+  return n in r && typeof r[n] == "string" ? a = r[n] : t && n in t && typeof t[n] == "string" && (a = t[n]), a in s ? s[a] : s[n];
+}
 export {
-  k as Link,
-  v as linkVariants
+  S as ChartContainer,
+  y as ChartLegend,
+  M as ChartLegendContent,
+  E as ChartStyle,
+  q as ChartTooltip,
+  K as ChartTooltipContent
 };

package/index.es50.js

@@ -1,79 +1,52 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import * as a from "react";
-import { cn as p } from "./index.es79.js";
-import { cva as b } from "./index.es100.js";
-import { ShouldRender as x } from "./index.es14.js";
-import h from "./index.es152.js";
-const f = b("group relative flex shrink-0 items-start justify-start ", {
-  variants: {
-    variant: {
-      circle: "peer border border-border-primary-default text-text-primary items-center justify-center rounded-full w-space-06 h-space-06 text-body-02 font-medium data-[state=upcoming]:border-border-neutral-primary data-[state=upcoming]:text-border-neutral-primary data-[state=complete]:bg-background-primary  data-[state=complete]:text-icon-oncolor",
-      dot: "peer items-center justify-center rounded-full w-space-06 h-space-06 "
+import { jsx as u } from "react/jsx-runtime";
+import { Slot as f } from "@radix-ui/react-slot";
+import { cva as p } from "./index.es107.js";
+import * as m from "react";
+import { cn as x } from "./index.es82.js";
+const v = p(
+  "inline-flex items-center gap-space-02 justify-center transition-colors focus:outline focus:outline-2 focus:outline-offset-1",
+  {
+    variants: {
+      size: {
+        default: "text-body-02 [&>svg]:size-[20px]",
+        sm: "text-body-01 [&>svg]:size-space-04"
+      },
+      colors: {
+        primary: "text-link-primary hover:text-link-primary-hovered focus:text-link-primary-focused active:text-link-primary-pressed visited:text-link-primary-visited focus:outline-border-black",
+        neutral: "text-link-neutral hover:text-link-neutral-hovered focus:text-link-neutral-focused active:text-link-neutral-pressed visited:text-link-neutral-visited focus:outline-border-black",
+        oncolor: "text-link-oncolor hover:text-link-oncolor-hovered focus:text-link-oncolor-focused active:text-link-oncolor-pressed visited:text-link-oncolor-visited focus:outline-border-white"
+      },
+      underline: {
+        hover: "underline-offset-2 hover:underline",
+        always: "underline-offset-2 underline"
+      },
+      disabled: {
+        true: "pointer-events-none cursor-not-allowed !text-disabled-text-default-disabled"
+      }
     },
-    orientation: {
-      vertical: "flex-col   ",
-      horizontal: "flex-row  "
+    compoundVariants: [],
+    defaultVariants: {
+      size: "default",
+      colors: "primary",
+      underline: "hover"
     }
   }
-}), g = a.createContext({
-  variant: "circle",
-  orientation: "horizontal",
-  activeStep: 0
-}), S = ({ activeStep: o, variant: t, orientation: e, children: n }) => /* @__PURE__ */ r(g.Provider, { value: { activeStep: o, variant: t, orientation: e }, children: n }), w = a.forwardRef(
-  ({ activeStep: o = 0, orientation: t = "horizontal", variant: e = "circle", className: n, children: i, ...s }, c) => {
-    const d = a.useMemo(() => {
-      let u = 0;
-      const y = a.Children.count(i);
-      return a.Children.map(i, (l) => a.isValidElement(l) && l.type.displayName === "Step" ? a.cloneElement(l, {
-        "data-index": ++u,
-        lastStep: y === u
-      }) : l);
-    }, [i]);
-    return /* @__PURE__ */ r("div", { ref: c, className: p(f({ orientation: t }), n), ...s, "data-orientation": t, children: /* @__PURE__ */ r(S, { activeStep: o, variant: e, orientation: t, children: d }) });
+), k = m.forwardRef(
+  ({ className: e, size: t, underline: o, target: r, colors: i, disabled: n = !1, asChild: l = !1, ...s }, a) => {
+    const d = l ? f : "a", c = r === "_blank" ? "noopener noreferrer" : "";
+    return /* @__PURE__ */ u(
+      d,
+      {
+        className: x("text-link-primary", v({ size: t, underline: o, disabled: n, colors: i, className: e })),
+        ref: a,
+        rel: c,
+        ...s
+      }
+    );
   }
 );
-w.displayName = "Stepper";
-const N = a.forwardRef(({ className: o, children: t, ...e }, n) => {
-  const { activeStep: i, variant: s } = a.useContext(g), c = (e == null ? void 0 : e["data-index"]) ?? 0, d = p({
-    upcoming: i < c,
-    current: i === c,
-    complete: i > c
-  });
-  return /* @__PURE__ */ m("div", { className: "relative flex min-w-space-08 max-w-space-12 flex-col gap-space-02 group-data-[orientation=vertical]:min-h-space-08 group-data-[orientation=vertical]:flex-row ", children: [
-    /* @__PURE__ */ m("div", { ref: n, "data-state": d, className: p(f({ variant: s }), o), ...e, children: [
-      /* @__PURE__ */ m(x, { shouldRender: s === "circle", children: [
-        d !== "complete" && /* @__PURE__ */ r("span", { children: c }),
-        d === "complete" && /* @__PURE__ */ r(h, { size: 20 })
-      ] }),
-      /* @__PURE__ */ r(x, { shouldRender: s === "dot", children: /* @__PURE__ */ r("div", { className: "size-space-02 bg-border-neutral-primary group-data-[state=current]:border-2 group-data-[state=current]:border-primary  group-data-[state=complete]:bg-background-primary   rounded-full" }) })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "me-space-04 hidden flex-col gap-space-01 md:flex ", children: t }),
-    !e.lastStep && /* @__PURE__ */ r(v, {})
-  ] });
-});
-N.displayName = "Step";
-const C = a.forwardRef(({ className: o, children: t, ...e }, n) => /* @__PURE__ */ r("span", { ref: n, className: p("text-body-02 font-medium text-text-display", o), ...e, children: t }));
-C.displayName = "StepTitle";
-const R = a.forwardRef(
-  ({ className: o, children: t, ...e }, n) => /* @__PURE__ */ r("p", { ref: n, className: p("text-wrap text-body-01 text-text-paragraph-primary", o), ...e, children: t })
-);
-R.displayName = "StepDescription";
-const v = a.forwardRef(({ className: o, children: t, ...e }, n) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: n,
-    className: p(
-      "absolute start-space-06 top-space-04 h-[2px] w-[calc(100%_-_32px)] bg-border-background-neutral group-data-[orientation=vertical]:start-space-04  group-data-[orientation=vertical]:top-space-06  group-data-[orientation=vertical]:h-[calc(100%_-_32px)] group-data-[orientation=vertical]:w-[2px] peer-data-[state=complete]:bg-background-primary",
-      o
-    ),
-    ...e,
-    children: t
-  }
-));
-v.displayName = "StepConnector";
+k.displayName = "Link";
 export {
-  N as Step,
-  R as StepDescription,
-  C as StepTitle,
-  w as Stepper
+  k as Link,
+  v as linkVariants
 };

package/index.es51.js

@@ -1,241 +1,45 @@
-import { jsx as a, jsxs as L } from "react/jsx-runtime";
-import J from "./index.es153.js";
-import * as r from "react";
-import { Button as T } from "./index.es22.js";
-import O from "./index.es109.js";
-import Q from "./index.es110.js";
-import { cn as N } from "./index.es79.js";
-const j = r.createContext(null);
-function U() {
-  const o = r.useContext(j);
-  if (!o)
-    throw new Error("useCarousel must be used within a <Carousel />");
-  return o;
-}
-const D = r.forwardRef(
-  ({ orientation: o = "horizontal", opts: c, setApi: v, plugins: x, className: g, children: u, ...P }, $) => {
-    const [R, t] = J(
-      {
-        ...c,
-        axis: o === "horizontal" ? "x" : "y"
-      },
-      x
-    ), [S, k] = r.useState(!1), [w, I] = r.useState(!1), e = r.useCallback((l) => {
-      l && (k(l.canScrollPrev()), I(l.canScrollNext()));
-    }, []), y = r.useCallback(() => {
-      t == null || t.scrollPrev();
-    }, [t]), n = r.useCallback(() => {
-      t == null || t.scrollNext();
-    }, [t]), z = r.useCallback(
-      (l) => {
-        l.key === "ArrowLeft" ? (l.preventDefault(), y()) : l.key === "ArrowRight" && (l.preventDefault(), n());
+import { jsx as o } from "react/jsx-runtime";
+import { Slot as l } from "@radix-ui/react-slot";
+import { cva as g } from "./index.es107.js";
+import * as f from "react";
+import { cn as t } from "./index.es82.js";
+const m = g(
+  "inline-flex items-center rounded-full gap-space-02 [&>svg]:size-space-05 font-medium text-body-02 justify-center focus:outline-border-black focus:outline focus:outline-2 focus:outline-offset-1 transition-colors  disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-disabled-text-default-disabled disabled:bg-disabled-background-disabled",
+  {
+    variants: {
+      size: {
+        default: "p-[20px] ",
+        sm: "p-space-04"
       },
-      [y, n]
-    );
-    return r.useEffect(() => {
-      !t || !v || v(t);
-    }, [t, v]), r.useEffect(() => {
-      if (t)
-        return e(t), t.on("reInit", e), t.on("select", e), () => {
-          t == null || t.off("select", e);
-        };
-    }, [t, e]), /* @__PURE__ */ a(
-      j.Provider,
+      colors: {
+        primary: "bg-button-background-primary text-icon-oncolor hover:bg-button-background-primary-hovered active:bg-button-background-primary-pressed focus:bg-button-background-primary-focused ",
+        neutral: "bg-button-background-black text-icon-oncolor hover:bg-button-background-black-hovered active:bg-button-background-black-pressed focus:bg-button-background-black-focused",
+        oncolor: "bg-button-background-oncolor text-icon-default hover:bg-button-background-oncolor-hovered active:bg-button-background-oncolor-pressed focus:bg-button-background-oncolor-focused disabled:text-disabled-icon-default-oncolor-disabled disabled:bg-button-background-disabled-oncolor",
+        "Secondary-Solid": "bg-button-background-neutral text-icon-default hover:bg-button-background-neutral-pressed active:bg-button-background-neutral-selected focus:bg-button-background-neutral-focused"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      colors: "primary"
+    }
+  }
+), p = f.forwardRef(
+  ({ className: e, size: n, colors: a, children: r, asChild: b = !1, position: d, ...c }, u) => {
+    const s = b ? l : "button", i = "floating-button";
+    return /* @__PURE__ */ o(
+      "div",
       {
-        value: {
-          carouselRef: R,
-          api: t,
-          opts: c,
-          orientation: o || ((c == null ? void 0 : c.axis) === "y" ? "vertical" : "horizontal"),
-          scrollPrev: y,
-          scrollNext: n,
-          canScrollPrev: S,
-          canScrollNext: w
-        },
-        children: /* @__PURE__ */ a(
-          "div",
-          {
-            ref: $,
-            onKeyDownCapture: z,
-            className: N("relative", g),
-            role: "region",
-            "aria-roledescription": "carousel",
-            ...P,
-            children: u
-          }
-        )
+        className: t(
+          "fixed m-space-03 duration-300 animate-in slide-in-from-bottom-10",
+          d === "bottomRight" ? "bottom-0 end-0" : "bottom-0 start-0"
+        ),
+        children: /* @__PURE__ */ o(s, { className: t(m({ size: n, colors: a, className: e })), ref: u, "aria-label": i, ...c, children: r })
       }
     );
   }
 );
-D.displayName = "CarouselPrimitive";
-const G = r.forwardRef(({ className: o, ...c }, v) => {
-  const { carouselRef: x, orientation: g } = U();
-  return /* @__PURE__ */ a("div", { ref: x, className: "overflow-hidden", children: /* @__PURE__ */ a("div", { ref: v, className: N("flex", g === "horizontal" ? "ml-4" : "-mt-4 flex-col", o), ...c }) });
-});
-G.displayName = "CarouselContent";
-const K = r.forwardRef(({ className: o, ...c }, v) => /* @__PURE__ */ a("div", { ref: v, role: "group", "aria-roledescription": "slide", className: N("min-w-0 shrink-0 grow-0 basis-full", o), ...c }));
-K.displayName = "CarouselItem";
-function re({
-  children: o,
-  className: c,
-  itemClassName: v,
-  showDots: x = !0,
-  showArrows: g = !0,
-  loop: u = !0,
-  autoplay: P = !1,
-  autoplayInterval: $ = 5e3,
-  containerClassName: R,
-  maxDots: t = null,
-  itemWidth: S = 230,
-  slidesToShow: k,
-  showPartial: w = !0,
-  dir: I = "rtl"
-}) {
-  const [e, y] = r.useState(), [n, z] = r.useState(0), [l, B] = r.useState(0), [f, C] = r.useState(!1), [F, _] = r.useState(!0), E = r.useId(), M = r.useMemo(() => k ? `calc(${100 / k}% - ${w ? "1rem" : "0px"})` : typeof S == "number" ? `${S}px` : S, [S, k, w]), h = r.useCallback(
-    (s) => {
-      if (!e || f)
-        return;
-      C(!0);
-      const d = e.selectedScrollSnap();
-      if (d === s) {
-        C(!1);
-        return;
-      }
-      const b = d < s ? 1 : -1;
-      if (Math.abs(d - s) === 1) {
-        b > 0 ? e.scrollNext() : e.scrollPrev(), setTimeout(() => C(!1), 300);
-        return;
-      }
-      let m = 0;
-      const i = Math.abs(d - s), p = () => {
-        m < i ? (b > 0 ? e.scrollNext() : e.scrollPrev(), m++, setTimeout(p, 150)) : C(!1);
-      };
-      p();
-    },
-    [e, f]
-  ), A = r.useCallback(() => {
-    !e || f || (u && n === l - 1 ? h(0) : (C(!0), e.scrollNext(), setTimeout(() => C(!1), 300)));
-  }, [e, f, u, n, l, h]), q = r.useCallback(() => {
-    !e || f || (C(!0), u && n === 0 ? h(l - 1) : (e.scrollPrev(), setTimeout(() => C(!1), 300)));
-  }, [e, f, u, n, l, h]);
-  r.useEffect(() => {
-    if (!e)
-      return;
-    B(e.scrollSnapList().length);
-    const s = () => {
-      z(e.selectedScrollSnap());
-    };
-    return z(e.selectedScrollSnap()), e.on("select", s), e.on("reInit", s), () => {
-      e.off("select", s), e.off("reInit", s);
-    };
-  }, [e]), r.useEffect(() => {
-    if (!e)
-      return;
-    const s = e.scrollSnapList().length, d = e.canScrollNext(), b = e.canScrollPrev();
-    _(d || b || s > 1);
-  }, [e, l, n]), r.useEffect(() => {
-    if (!e || !P)
-      return;
-    const s = setInterval(() => {
-      f || A();
-    }, $);
-    return () => clearInterval(s);
-  }, [e, P, $, f, A]);
-  const H = () => {
-    if (!t || l <= t)
-      return Array.from({ length: l }).map((m, i) => /* @__PURE__ */ a(
-        "button",
-        {
-          className: `size-space-04 rounded-full transition-colors focus:outline-none ${n === i ? "bg-primary" : "bg-background-neutral-200"}`,
-          onClick: () => h(i),
-          disabled: f,
-          "aria-label": `Go to slide ${i + 1}`
-        },
-        `${E}-dot-${i}`
-      ));
-    const s = [], d = l - (t - 1), b = Math.max(1, d);
-    for (let m = 0; m < t; m++) {
-      let i, p;
-      m === t - 1 ? (i = l - 1, p = n >= l - b) : (i = m, p = n === m), s.push(
-        /* @__PURE__ */ a(
-          "button",
-          {
-            className: `size-space-04 rounded-full transition-colors focus:outline-none ${p ? "bg-primary" : "bg-background-neutral-200"}`,
-            onClick: () => h(i),
-            disabled: f,
-            "aria-label": `Go to slide ${i + 1}`
-          },
-          `${E}-dot-${m}`
-        )
-      );
-    }
-    return s;
-  };
-  return /* @__PURE__ */ a("div", { className: N("w-full ", R), children: /* @__PURE__ */ L(
-    D,
-    {
-      dir: I,
-      setApi: y,
-      opts: {
-        align: "start",
-        loop: !1,
-        skipSnaps: !1,
-        containScroll: "trimSnaps",
-        dragFree: !1,
-        direction: I,
-        slidesToScroll: 1
-      },
-      className: N("w-full", c),
-      children: [
-        /* @__PURE__ */ a(G, { className: "gap-space-04", children: r.Children.map(o, (s, d) => /* @__PURE__ */ a(
-          K,
-          {
-            className: N("transition-transform duration-300", v),
-            style: {
-              flex: `0 0 ${M}`,
-              maxWidth: M
-            },
-            children: s
-          },
-          `${E}-item-${d}`
-        )) }),
-        F && /* @__PURE__ */ L("div", { className: "container mt-space-05 flex items-center justify-between", children: [
-          g && /* @__PURE__ */ L("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ a(
-              T,
-              {
-                onClick: q,
-                colors: "primary",
-                variant: !u && n === 0 ? "outline" : "default",
-                size: "icon",
-                "aria-label": "Previous slide",
-                className: N(!u && n === 0 && "!pointer-events-none"),
-                children: /* @__PURE__ */ a(O, { className: "ltr:rotate-180" })
-              }
-            ),
-            /* @__PURE__ */ a(
-              T,
-              {
-                onClick: A,
-                colors: "primary",
-                variant: !u && n === l - 1 ? "outline" : "default",
-                size: "icon",
-                "aria-label": "Next slide",
-                className: N(!u && n === l - 1 && "!pointer-events-none"),
-                children: /* @__PURE__ */ a(Q, { className: "ltr:rotate-180" })
-              }
-            )
-          ] }),
-          x && l > 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: H() })
-        ] })
-      ]
-    }
-  ) });
-}
+p.displayName = "FloatingButton";
 export {
-  re as Carousel,
-  G as CarouselContent,
-  K as CarouselItem,
-  D as CarouselPrimitive
+  p as FloatingButton,
+  m as floatingButtonVariants
 };