@cfx-dev/ui-components 5.0.31 → 5.0.33

package/dist/CarouselControls-Be1j-jxr.js

@@ -0,0 +1,42 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import t from "./components/Flex/Flex.js";
+import { clsx as a } from "./utils/clsx.js";
+import c from "./components/IconButton/IconButton.js";
+const u = "cfxui__Carousel__root__345c8", i = "cfxui__Carousel__carousel__5a3d0", n = "cfxui__Carousel__carouselItem__39b03", m = "cfxui__Carousel__carouselTrack__bda11", f = "cfxui__Carousel__controls__afa33", C = {
+  root: u,
+  carousel: i,
+  carouselItem: n,
+  carouselTrack: m,
+  controls: f
+};
+function b({
+  currentPage: o,
+  pageCount: l,
+  onPageChange: s,
+  className: _
+}) {
+  return /* @__PURE__ */ e(t, { alignToEnd: !0, className: a(C.controls, _), children: [
+    /* @__PURE__ */ r(
+      c,
+      {
+        onClick: () => s(o - 1),
+        disabled: o <= 0,
+        name: "LeftChevron",
+        size: "medium"
+      }
+    ),
+    /* @__PURE__ */ r(
+      c,
+      {
+        onClick: () => s(o + 1),
+        disabled: o >= l - 1,
+        name: "RightChevron",
+        size: "medium"
+      }
+    )
+  ] });
+}
+export {
+  b as C,
+  C as s
+};

package/dist/assets/css/CarouselControls.css

@@ -1 +1 @@
-.cfxui__Carousel__carousel__5a3d0{overflow:hidden;width:100%;margin:0 auto}.cfxui__Carousel__carouselItem__39b03{flex:0 0 auto;min-width:0;width:auto;box-sizing:border-box}.cfxui__Carousel__carouselTrack__bda11{display:flex;gap:calc(var(--quant) * 2);transition:transform .3 ease}.cfxui__Carousel__controls__afa33{display:none}@media (min-width: 1920px){.cfxui__Carousel__controls__afa33{display:flex}}.cfxui__Carousel__controlButton__3de95{padding:calc(var(--quant) * 1.875) calc(var(--quant) * 1.975) calc(var(--quant) * 1.975) calc(var(--quant) * 1.875)}
+.cfxui__Carousel__root__345c8 .cfxui__Carousel__carousel__5a3d0{overflow:hidden;width:100%;margin:0 auto}.cfxui__Carousel__root__345c8 .cfxui__Carousel__carouselItem__39b03{flex:0 0 auto;min-width:0;width:auto;box-sizing:border-box}.cfxui__Carousel__root__345c8 .cfxui__Carousel__carouselTrack__bda11{display:flex;gap:calc(var(--quant) * 2);transition:transform .3 ease}.cfxui__Carousel__root__345c8 .cfxui__Carousel__controls__afa33{display:none}@media (min-width: 1920px){.cfxui__Carousel__root__345c8 .cfxui__Carousel__controls__afa33{display:flex}}.cfxui__Carousel__root__345c8 .cfxui__Carousel__controlButton__3de95{padding:calc(var(--quant) * 1.875) calc(var(--quant) * 1.975) calc(var(--quant) * 1.975) calc(var(--quant) * 1.875)}

package/dist/components/Carousel/Carousel.d.ts

@@ -10,6 +10,7 @@ export interface CarouselProps {
     showControlsTop?: boolean;
     skipFirstItem?: boolean;
     controlsClassName?: string;
+    controlsRootClassName?: string;
     text?: string;
     showDots?: boolean;
     trackClassName?: string;
@@ -19,6 +20,6 @@ export interface CarouselProps {
     currentPage?: number;
     onPageChange?: (page: number) => void;
 }
-declare function Carousel({ items, ImageComponent, visibleItems, onItemClick, showControlsBottom, showControlsTop, skipFirstItem, controlsClassName, text, showDots, trackClassName, className, rootClassName, headerClassName, currentPage: controlledCurrentPage, onPageChange, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+declare function Carousel({ items, ImageComponent, visibleItems, onItemClick, showControlsBottom, showControlsTop, skipFirstItem, controlsClassName, controlsRootClassName, text, showDots, trackClassName, className, rootClassName, headerClassName, currentPage: controlledCurrentPage, onPageChange, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Carousel>;
 export default _default;

package/dist/components/Carousel/Carousel.js

@@ -1,125 +1,129 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import G, { useMemo as H, useState as J, useCallback as B, useEffect as K } from "react";
-import { Dot as L } from "../Dot/Dot.js";
-import u from "../Flex/Flex.js";
-import { clsx as E } from "../../utils/clsx.js";
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import H, { useMemo as J, useState as K, useCallback as Q, useEffect as L } from "react";
+import { Dot as O } from "../Dot/Dot.js";
+import i from "../Flex/Flex.js";
+import { clsx as m } from "../../utils/clsx.js";
 import "../../utils/contexts/MediaQueryContext/MediaQueryContext.js";
 import "../../utils/contexts/MediaQueryContext/MediaQueryContextProvider.js";
-import O from "../../utils/contexts/MediaQueryContext/useMediaQuery.js";
-import { useCarousel as U } from "../../utils/hooks/useCarousel.js";
-import { s as i, C as W } from "../../CarouselControls-CJ3tupLr.js";
-import X from "./CarouselItem.js";
-function F({
-  showDots: n = !1,
-  pageCount: a,
+import U from "../../utils/contexts/MediaQueryContext/useMediaQuery.js";
+import { useCarousel as W } from "../../utils/hooks/useCarousel.js";
+import { s as n, C as X } from "../../CarouselControls-Be1j-jxr.js";
+import Y from "./CarouselItem.js";
+function R({
+  showDots: a = !1,
+  pageCount: f,
   currentPage: t,
   onPageChange: o,
-  controlsClassName: m
+  controlsClassName: d,
+  controlsRootClassName: p
 }) {
-  return a <= 1 ? null : /* @__PURE__ */ p(u, { gap: 2, centered: !0, className: i.controls, children: [
-    n && /* @__PURE__ */ s(u, { centered: !0, gap: 1, children: Array.from({ length: a }).map((y, c) => /* @__PURE__ */ s(
-      L,
+  return f <= 1 ? null : /* @__PURE__ */ h(i, { gap: 2, centered: !0, className: m(n.controls, p), children: [
+    a && /* @__PURE__ */ s(i, { centered: !0, gap: 1, children: Array.from({ length: f }).map((y, c) => /* @__PURE__ */ s(
+      O,
       {
-        className: i.dots,
+        className: n.dots,
         color: c === t ? "primary" : "secondary",
         opacity: c === t ? 1 : 0.2
       },
       c
     )) }),
     /* @__PURE__ */ s(
-      W,
+      X,
       {
         currentPage: t,
-        pageCount: a,
+        pageCount: f,
         onPageChange: o,
-        className: m
+        className: d
       }
     )
   ] });
 }
-function Y({
-  items: n,
-  ImageComponent: a,
+function Z({
+  items: a,
+  ImageComponent: f,
   visibleItems: t = 4,
   onItemClick: o,
-  showControlsBottom: m = !1,
-  showControlsTop: y = !1,
-  skipFirstItem: c = !1,
-  controlsClassName: N,
-  text: h,
-  showDots: S = !1,
-  trackClassName: Q,
-  className: V,
-  rootClassName: $,
-  headerClassName: q,
-  currentPage: d,
+  showControlsBottom: d = !1,
+  showControlsTop: p = !1,
+  skipFirstItem: y = !1,
+  controlsClassName: c,
+  controlsRootClassName: S,
+  text: x,
+  showDots: M = !1,
+  trackClassName: V,
+  className: $,
+  rootClassName: q,
+  headerClassName: w,
+  currentPage: N,
   onPageChange: l
 }) {
   const {
-    isMobile: x,
-    isTablet: M
-  } = O(), T = H(() => typeof t == "number" ? t : x ? t.mobile : M ? t.tablet : t.desktop, [t, x, M]), w = c ? n.slice(1) : n, j = Math.ceil(w.length / T), {
-    carouselRef: z,
+    isMobile: T,
+    isTablet: j
+  } = U(), _ = J(() => typeof t == "number" ? t : T ? t.mobile : j ? t.tablet : t.desktop, [t, T, j]), z = y ? a.slice(1) : a, b = Math.ceil(z.length / _), {
+    carouselRef: A,
     carouselApi: e
-  } = U({
-    slidesToScroll: T
-  }), [A, _] = J(0), b = d ?? A, R = B(
+  } = W({
+    slidesToScroll: _
+  }), [D, B] = K(0), E = N ?? D, F = Q(
     (r) => {
-      e == null || e.scrollTo(r), l == null || l(r), d == null && _(r);
+      e == null || e.scrollTo(r), l == null || l(r), N == null && B(r);
     },
-    [e, l, d]
-  ), D = B(
+    [e, l, N]
+  ), G = Q(
     (r) => {
       o == null || o(r);
     },
     [o]
   );
-  return K(() => {
+  return L(() => {
     if (!e)
       return;
     const r = () => {
-      const f = e.selectedScrollSnap();
-      _(f), l == null || l(f);
+      const u = e.selectedScrollSnap();
+      B(u), l == null || l(u);
     };
     return e.on("select", r), e.on("reInit", r), () => {
       e.off("select", r), e.off("reInit", r);
     };
-  }, [e, l]), /* @__PURE__ */ p("div", { className: $, children: [
-    h && /* @__PURE__ */ p(u, { spaceBetween: !0, alignItems: "center", className: q, children: [
-      /* @__PURE__ */ s("span", { children: h }),
-      y && /* @__PURE__ */ s(
-        F,
+  }, [e, l]), /* @__PURE__ */ h("div", { className: m(n.root, q), children: [
+    x && /* @__PURE__ */ h(i, { spaceBetween: !0, alignItems: "center", className: w, children: [
+      /* @__PURE__ */ s("span", { children: x }),
+      p && /* @__PURE__ */ s(
+        R,
         {
-          showDots: S,
-          pageCount: j,
-          currentPage: b,
-          onPageChange: R,
-          controlsClassName: N
+          showDots: M,
+          pageCount: b,
+          currentPage: E,
+          onPageChange: F,
+          controlsClassName: c,
+          controlsRootClassName: S
         }
       )
     ] }),
-    /* @__PURE__ */ s("div", { className: E(i.carousel, V), ref: z, children: /* @__PURE__ */ s(u, { className: E(i.carouselTrack, Q), gap: 1, children: n.map((r, f) => f === 0 && c ? null : /* @__PURE__ */ s("div", { className: i.carouselItem, children: /* @__PURE__ */ s(
-      X,
+    /* @__PURE__ */ s("div", { className: m(n.carousel, $), ref: A, children: /* @__PURE__ */ s(i, { className: m(n.carouselTrack, V), gap: 1, children: a.map((r, u) => u === 0 && y ? null : /* @__PURE__ */ s("div", { className: n.carouselItem, children: /* @__PURE__ */ s(
+      Y,
       {
-        index: f,
+        index: u,
         item: r,
-        onClick: D,
-        ImageComponent: a
+        onClick: G,
+        ImageComponent: f
       }
     ) }, r.id)) }) }),
-    m && /* @__PURE__ */ s(u, { justifyContent: "flex-end", children: /* @__PURE__ */ s(
-      F,
+    d && /* @__PURE__ */ s(i, { justifyContent: "flex-end", children: /* @__PURE__ */ s(
+      R,
       {
-        showDots: S,
-        pageCount: j,
-        currentPage: b,
-        onPageChange: R,
-        controlsClassName: N
+        showDots: M,
+        pageCount: b,
+        currentPage: E,
+        onPageChange: F,
+        controlsClassName: c,
+        controlsRootClassName: S
       }
     ) })
   ] });
 }
-const lr = G.memo(Y);
+const or = H.memo(Z);
 export {
-  lr as default
+  or as default
 };

package/dist/components/Carousel/CarouselControls.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../Flex/Flex.js";
 import "../../utils/clsx.js";
 import "../IconButton/IconButton.js";
-import { C as a } from "../../CarouselControls-CJ3tupLr.js";
+import { C as a } from "../../CarouselControls-Be1j-jxr.js";
 export {
   a as default
 };

package/dist/components/Carousel/CarouselShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { useState as d, useCallback as r } from "react";
 import l from "../Flex/Flex.js";
 import u from "./Carousel.js";
-import { s as c } from "../../CarouselControls-CJ3tupLr.js";
+import { s as c } from "../../CarouselControls-Be1j-jxr.js";
 const g = [
   {
     id: "1",

package/dist/components/Carousel/index.js

@@ -1,5 +1,5 @@
 import { default as a } from "./Carousel.js";
-import { C as s } from "../../CarouselControls-CJ3tupLr.js";
+import { C as s } from "../../CarouselControls-Be1j-jxr.js";
 export {
   a as Carousel,
   s as CarouselControls

package/dist/main.js

@@ -46,7 +46,7 @@ import { Avatar as Do } from "./components/Avatar/Avatar.js";
 import { BACKDROP_OUTLET_ID as Oo, default as ko } from "./components/BackdropPortal/BackdropPortal.js";
 import { Badge as bo } from "./components/Badge/Badge.js";
 import { default as Mo } from "./components/Carousel/Carousel.js";
-import { C as vo } from "./CarouselControls-CJ3tupLr.js";
+import { C as vo } from "./CarouselControls-Be1j-jxr.js";
 import { default as Uo } from "./components/ControlBox/ControlBox.js";
 import { default as wo } from "./components/Decorate/Decorate.js";
 import { Dot as Ko } from "./components/Dot/Dot.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfx-dev/ui-components",
-  "version": "5.0.31",
+  "version": "5.0.33",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",

package/dist/CarouselControls-CJ3tupLr.js

@@ -1,41 +0,0 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import _ from "./components/Flex/Flex.js";
-import { clsx as t } from "./utils/clsx.js";
-import c from "./components/IconButton/IconButton.js";
-const u = "cfxui__Carousel__carousel__5a3d0", i = "cfxui__Carousel__carouselItem__39b03", n = "cfxui__Carousel__carouselTrack__bda11", m = "cfxui__Carousel__controls__afa33", f = {
-  carousel: u,
-  carouselItem: i,
-  carouselTrack: n,
-  controls: m
-};
-function p({
-  currentPage: o,
-  pageCount: l,
-  onPageChange: s,
-  className: e
-}) {
-  return /* @__PURE__ */ a(_, { alignToEnd: !0, className: t(f.controls, e), children: [
-    /* @__PURE__ */ r(
-      c,
-      {
-        onClick: () => s(o - 1),
-        disabled: o <= 0,
-        name: "LeftChevron",
-        size: "medium"
-      }
-    ),
-    /* @__PURE__ */ r(
-      c,
-      {
-        onClick: () => s(o + 1),
-        disabled: o >= l - 1,
-        name: "RightChevron",
-        size: "medium"
-      }
-    )
-  ] });
-}
-export {
-  p as C,
-  f as s
-};