@cfx-dev/ui-components 5.0.22 → 5.0.23

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

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { CarouselItemData, VisibleItems, ImageComponentProps } from './Carousel.types';
+
+export interface CarouselProps {
+    items: CarouselItemData[];
+    ImageComponent: React.ComponentType<ImageComponentProps>;
+    visibleItems?: number | VisibleItems;
+    onItemClick?: (index: number) => void;
+    showControlsBottom?: boolean;
+    showControlsTop?: boolean;
+    skipFirstItem?: boolean;
+    controlsClassName?: string;
+    text?: string;
+    showDots?: boolean;
+    trackClassName?: string;
+    className?: string;
+    rootClassName?: string;
+    headerClassName?: string;
+    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 const _default: React.MemoExoticComponent<typeof Carousel>;
+export default _default;

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,125 @@
+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 "../../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,
+  currentPage: t,
+  onPageChange: o,
+  controlsClassName: m
+}) {
+  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,
+      {
+        className: i.dots,
+        color: c === t ? "primary" : "secondary",
+        opacity: c === t ? 1 : 0.2
+      },
+      c
+    )) }),
+    /* @__PURE__ */ s(
+      W,
+      {
+        currentPage: t,
+        pageCount: a,
+        onPageChange: o,
+        className: m
+      }
+    )
+  ] });
+}
+function Y({
+  items: n,
+  ImageComponent: a,
+  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,
+  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,
+    carouselApi: e
+  } = U({
+    slidesToScroll: T
+  }), [A, _] = J(0), b = d ?? A, R = B(
+    (r) => {
+      e == null || e.scrollTo(r), l == null || l(r), d == null && _(r);
+    },
+    [e, l, d]
+  ), D = B(
+    (r) => {
+      o == null || o(r);
+    },
+    [o]
+  );
+  return K(() => {
+    if (!e)
+      return;
+    const r = () => {
+      const f = e.selectedScrollSnap();
+      _(f), l == null || l(f);
+    };
+    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,
+        {
+          showDots: S,
+          pageCount: j,
+          currentPage: b,
+          onPageChange: R,
+          controlsClassName: N
+        }
+      )
+    ] }),
+    /* @__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,
+      {
+        index: f,
+        item: r,
+        onClick: D,
+        ImageComponent: a
+      }
+    ) }, r.id)) }) }),
+    m && /* @__PURE__ */ s(u, { justifyContent: "flex-end", children: /* @__PURE__ */ s(
+      F,
+      {
+        showDots: S,
+        pageCount: j,
+        currentPage: b,
+        onPageChange: R,
+        controlsClassName: N
+      }
+    ) })
+  ] });
+}
+const lr = G.memo(Y);
+export {
+  lr as default
+};

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

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+
+export interface ImageCarouselItem {
+    id: string;
+    type: 'image';
+    src: string;
+    alt?: string;
+    blurDataURL?: string;
+    height?: number;
+    width?: number;
+}
+export interface VideoCarouselItem {
+    id: string;
+    type: 'video';
+    videoUrl: string;
+    alt?: string;
+    thumbnail?: string;
+    blurDataURL?: string;
+    height?: number;
+    width?: number;
+}
+export interface ComponentCarouselItem {
+    id: string;
+    type: 'component';
+    component: React.ReactNode;
+}
+export type CarouselItemData = ImageCarouselItem | VideoCarouselItem | ComponentCarouselItem;
+export type VisibleItems = {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+};
+export interface ImageComponentProps {
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    placeholder?: 'blur' | 'empty';
+    blurDataURL?: string;
+}

package/dist/components/Carousel/Carousel.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,8 @@
+interface CarouselControlsProps {
+    currentPage: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    className?: string;
+}
+export default function CarouselControls({ currentPage, pageCount, onPageChange, className, }: CarouselControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Carousel/CarouselControls.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "../Flex/Flex.js";
+import "../../utils/clsx.js";
+import "../IconButton/IconButton.js";
+import { C as a } from "../../CarouselControls-CJ3tupLr.js";
+export {
+  a as default
+};

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { CarouselItemData, ImageComponentProps } from './Carousel.types';
+
+interface CarouselItemProps {
+    item: CarouselItemData;
+    index: number;
+    onClick?: (index: number) => void;
+    ImageComponent: React.ComponentType<ImageComponentProps>;
+}
+declare function CarouselItem({ item, index, onClick, ImageComponent, }: CarouselItemProps): import("react/jsx-runtime").JSX.Element;
+export default CarouselItem;

package/dist/components/Carousel/CarouselItem.js

@@ -0,0 +1,85 @@
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import i from "react";
+import { Interactive as u } from "../Interactive/Interactive.js";
+import { clsx as p } from "../../utils/clsx.js";
+import b from "./playIcon.js";
+const y = "cfxui__CarouselItem__slideWrapper__ce3bc", f = "cfxui__CarouselItem__clickable__1b1df", h = "cfxui__CarouselItem__playButtonOverlay__124b4", I = "cfxui__CarouselItem__playIcon__ecb3e", m = "cfxui__CarouselItem__slideImg__a8fc1", g = "cfxui__CarouselItem__slideVideo__d039c", a = {
+  slideWrapper: y,
+  clickable: f,
+  default: "cfxui__CarouselItem__default__860c3",
+  playButtonOverlay: h,
+  playIcon: I,
+  slideImg: m,
+  slideVideo: g
+};
+function x({
+  item: e,
+  ImageComponent: t
+}) {
+  return e.type === "image" ? /* @__PURE__ */ l(
+    t,
+    {
+      src: e.src,
+      alt: e.alt ?? `Image ${e.id}`,
+      width: e.width,
+      height: e.height,
+      placeholder: e.blurDataURL ? "blur" : "empty",
+      blurDataURL: e.blurDataURL,
+      className: a.slideImg
+    }
+  ) : e.type === "video" ? /* @__PURE__ */ l(
+    t,
+    {
+      src: e.thumbnail || "/missing_image.png",
+      alt: e.alt ?? `Video ${e.id}`,
+      width: e.width,
+      height: e.height,
+      placeholder: e.blurDataURL ? "blur" : "empty",
+      blurDataURL: e.blurDataURL,
+      className: a.slideVideo
+    }
+  ) : null;
+}
+function L({
+  item: e,
+  index: t,
+  onClick: r,
+  ImageComponent: _
+}) {
+  const o = i.useCallback(() => {
+    r == null || r(t);
+  }, [t, r]), s = i.useCallback((n) => {
+    (n.key === "Enter" || n.key === " ") && o();
+  }, [o]), c = p(
+    a.slideWrapper,
+    r ? a.clickable : a.default
+  );
+  return e.type === "component" ? /* @__PURE__ */ l(
+    u,
+    {
+      className: c,
+      onClick: o,
+      onKeyDown: s,
+      role: "button",
+      tabIndex: 0,
+      children: e.component
+    }
+  ) : /* @__PURE__ */ d(
+    u,
+    {
+      className: c,
+      onClick: o,
+      onKeyDown: s,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": e.type === "video" ? "Open video in lightbox" : "Open image in lightbox",
+      children: [
+        /* @__PURE__ */ l(x, { item: e, ImageComponent: _ }),
+        e.type === "video" && /* @__PURE__ */ l("div", { className: a.playButtonOverlay, children: /* @__PURE__ */ l(b, { className: a.playIcon }) })
+      ]
+    }
+  );
+}
+export {
+  L as default
+};

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

@@ -0,0 +1,6 @@
+import { CarouselItemData } from './Carousel.types';
+
+declare const items: CarouselItemData[];
+declare function CarouselShowcase(): import("react/jsx-runtime").JSX.Element;
+export default CarouselShowcase;
+export { items };

package/dist/components/Carousel/CarouselShowcase.js

@@ -0,0 +1,177 @@
+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";
+const g = [
+  {
+    id: "1",
+    type: "image",
+    src: "https://picsum.photos/400/225?1",
+    alt: "Image 1"
+  },
+  {
+    id: "2",
+    type: "image",
+    src: "https://picsum.photos/400/225?2",
+    alt: "Image 2"
+  },
+  {
+    id: "3",
+    type: "video",
+    videoUrl: "https://example.com/video.mp4",
+    thumbnail: "https://picsum.photos/400/225?3",
+    alt: "Video 1"
+  },
+  {
+    id: "4",
+    type: "image",
+    src: "https://picsum.photos/400/225?4",
+    alt: "Image 4"
+  },
+  {
+    id: "5",
+    type: "image",
+    src: "https://picsum.photos/400/225?5",
+    alt: "Image 5"
+  },
+  {
+    id: "6",
+    type: "image",
+    src: "https://picsum.photos/400/225?6",
+    alt: "Image 6"
+  },
+  {
+    id: "7",
+    type: "video",
+    videoUrl: "https://example.com/video2.mp4",
+    thumbnail: "https://picsum.photos/400/225?7",
+    alt: "Video 2"
+  },
+  {
+    id: "8",
+    type: "image",
+    src: "https://picsum.photos/400/225?8",
+    alt: "Image 8"
+  },
+  {
+    id: "9",
+    type: "image",
+    src: "https://picsum.photos/400/225?9",
+    alt: "Image 9"
+  },
+  {
+    id: "10",
+    type: "image",
+    src: "https://picsum.photos/400/225?10",
+    alt: "Image 10"
+  },
+  {
+    id: "1",
+    type: "image",
+    src: "https://picsum.photos/400/225?1",
+    alt: "Image 1"
+  },
+  {
+    id: "2",
+    type: "image",
+    src: "https://picsum.photos/400/225?2",
+    alt: "Image 2"
+  },
+  {
+    id: "3",
+    type: "video",
+    videoUrl: "https://example.com/video.mp4",
+    thumbnail: "https://picsum.photos/400/225?3",
+    alt: "Video 1"
+  },
+  {
+    id: "4",
+    type: "image",
+    src: "https://picsum.photos/400/225?4",
+    alt: "Image 4"
+  },
+  {
+    id: "5",
+    type: "image",
+    src: "https://picsum.photos/400/225?5",
+    alt: "Image 5"
+  },
+  {
+    id: "6",
+    type: "image",
+    src: "https://picsum.photos/400/225?6",
+    alt: "Image 6"
+  },
+  {
+    id: "7",
+    type: "video",
+    videoUrl: "https://example.com/video2.mp4",
+    thumbnail: "https://picsum.photos/400/225?7",
+    alt: "Video 2"
+  },
+  {
+    id: "8",
+    type: "image",
+    src: "https://picsum.photos/400/225?8",
+    alt: "Image 8"
+  },
+  {
+    id: "9",
+    type: "image",
+    src: "https://picsum.photos/400/225?9",
+    alt: "Image 9"
+  },
+  {
+    id: "10",
+    type: "image",
+    src: "https://picsum.photos/400/225?10",
+    alt: "Image 10"
+  }
+];
+function n({
+  src: e,
+  alt: s,
+  width: o,
+  height: i,
+  className: p
+}) {
+  return /* @__PURE__ */ t("img", { src: e, alt: s, width: o, height: i, className: p, style: { objectFit: "cover" } });
+}
+function h({
+  visibleItems: e
+}) {
+  const [s, o] = d(0), i = r((a) => o(a), []), p = r((a) => console.log("Clicked item", a), []);
+  return /* @__PURE__ */ t(
+    u,
+    {
+      items: g,
+      ImageComponent: n,
+      visibleItems: e,
+      showDots: !0,
+      showControlsBottom: !0,
+      trackClassName: c.carouselTrack,
+      className: c.carousel,
+      controlsClassName: c.controls,
+      currentPage: s,
+      onPageChange: i,
+      onItemClick: p
+    }
+  );
+}
+function x() {
+  return /* @__PURE__ */ m(l, { direction: "column", gap: "large", children: [
+    /* @__PURE__ */ m(l, { direction: "column", gap: "small", children: [
+      /* @__PURE__ */ t("h4", { children: "Default Full Width (Responsive)" }),
+      /* @__PURE__ */ t(h, {})
+    ] }),
+    /* @__PURE__ */ m(l, { direction: "column", gap: "small", children: [
+      /* @__PURE__ */ t("h4", { children: "Fixed Width Parent" }),
+      /* @__PURE__ */ t("div", { style: { width: 800 }, children: /* @__PURE__ */ t(h, {}) })
+    ] })
+  ] });
+}
+export {
+  x as default,
+  g as items
+};

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

@@ -0,0 +1,4 @@
+export { default as Carousel } from './Carousel';
+export { default as CarouselControls } from './CarouselControls';
+export type { CarouselItemData } from './Carousel.types';
+export type { CarouselProps } from './Carousel';

package/dist/components/Carousel/index.js

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

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

@@ -0,0 +1,6 @@
+interface PlayIconProps {
+    className?: string;
+    fill?: string;
+}
+declare function PlayIcon({ className, fill, }: PlayIconProps): import("react/jsx-runtime").JSX.Element;
+export default PlayIcon;

package/dist/components/Carousel/playIcon.js

@@ -0,0 +1,25 @@
+import { jsx as C } from "react/jsx-runtime";
+function t({
+  className: e,
+  fill: n = "#F1F1E4"
+}) {
+  return /* @__PURE__ */ C(
+    "svg",
+    {
+      className: e,
+      viewBox: "0 0 62 66",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ C(
+        "path",
+        {
+          d: "M58.7027 27.599L10.2747 0.846534C9.23892 0.29496 8.06461 0.00311084 6.86857 2.23594e-05C5.67252 -0.00306612 4.49645 0.282713 3.45735 0.82893C2.41825 1.37515 1.55234 2.16276 0.945782 3.11341C0.339222 4.06406 0.0131452 5.14461 -2.73089e-07 6.24756L-2.61186e-06 59.7524C0.0131428 60.8554 0.339219 61.9359 0.945779 62.8866C1.55234 63.8372 2.41824 64.6248 3.45735 65.1711C4.49645 65.7173 5.67252 66.0031 6.86857 66C8.06461 65.9969 9.23892 65.705 10.2747 65.1535L58.7027 38.401C59.7093 37.838 60.5415 37.0452 61.119 36.0991C61.6966 35.153 62 34.0857 62 33C62 31.9143 61.6966 30.847 61.119 29.9009C60.5415 28.9548 59.7093 28.162 58.7027 27.599Z",
+          fill: n
+        }
+      )
+    }
+  );
+}
+export {
+  t as default
+};

package/dist/components/Checkbox/Checkbox.js

@@ -1,9 +1,9 @@
 import { jsx as m, jsxs as U, Fragment as V } from "react/jsx-runtime";
 import * as f from "react";
 import R from "react";
-import { c as W, P as w, u as Y, b as A, a as T, d as Z } from "../../index-CfQtbUfi.js";
+import { P as w, u as W, a as A, c as T, b as Y, d as Z } from "../../index-8cuIcSMB.js";
 import { u as ee } from "../../index-BZPx6jYI.js";
-import { P as oe } from "../../index-3ctv5u9o.js";
+import { P as oe } from "../../index-DwdZ_SPo.js";
 import "../Icons/cfx-icons/Close.js";
 import "../Icons/cfx-icons/Controller.js";
 import "../Icons/cfx-icons/Copy.js";
@@ -110,7 +110,7 @@ import "../Icons/cfx-iconsXLarge/UpvotesBurst.js";
 import "../Icons/cfx-iconsXLarge/UpvotesRecurring.js";
 import { clsx as P } from "../../utils/clsx.js";
 import { getColor as ie } from "../../utils/color.js";
-var q = "Checkbox", [ce, yt] = W(q), [ne, F] = ce(q);
+var q = "Checkbox", [ce] = Z(q), [ne, F] = ce(q);
 function se(o) {
   const {
     __scopeCheckbox: a,
@@ -125,7 +125,7 @@ function se(o) {
     value: x = "on",
     // @ts-expect-error
     internal_do_not_use_render: u
-  } = o, [n, y] = Y({
+  } = o, [n, y] = W({
     prop: c,
     defaultProp: r ?? !1,
     onChange: d,
@@ -285,7 +285,7 @@ var $ = "CheckboxBubbleInput", G = f.forwardRef(
       form: u,
       bubbleInput: n,
       setBubbleInput: y
-    } = F($, o), l = A(c, y), k = ee(e), C = Z(p);
+    } = F($, o), l = A(c, y), k = ee(e), C = Y(p);
     f.useEffect(() => {
       const t = n;
       if (!t) return;
@@ -440,7 +440,7 @@ function ke(o) {
     }
   );
 }
-const Nt = R.memo(ke);
+const yt = R.memo(ke);
 export {
-  Nt as default
+  yt as default
 };

package/dist/components/Checkbox/CheckboxShowcase.js

@@ -106,12 +106,12 @@ import "../Icons/cfx-iconsXLarge/Verified.js";
 import "../Icons/cfx-iconsXLarge/UpvotesBurst.js";
 import "../Icons/cfx-iconsXLarge/UpvotesRecurring.js";
 import t from "./Checkbox.js";
-const h = "cfxui__CheckboxShowcase__root__5c0e0", d = "cfxui__CheckboxShowcase__checked__e49f9", s = "cfxui__CheckboxShowcase__icon__686ec", m = {
-  root: h,
-  checked: d,
+const d = "cfxui__CheckboxShowcase__root__5c0e0", h = "cfxui__CheckboxShowcase__checked__e49f9", s = "cfxui__CheckboxShowcase__icon__686ec", m = {
+  root: d,
+  checked: h,
   icon: s
 };
-function ki(l) {
+function _i(l) {
   const [e, p] = a.useState(!1);
   return /* @__PURE__ */ i(r, { direction: "column", gap: "large", children: [
     /* @__PURE__ */ i(r, { direction: "column", gap: "small", children: [
@@ -170,5 +170,5 @@ function ki(l) {
   ] });
 }
 export {
-  ki as default
+  _i as default
 };

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -7,7 +7,7 @@ import { Title as f } from "../Title/Title.js";
 import { noop as u } from "../../utils/functional.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
-import "../../index-Cl_RnsqN.js";
+import "../../index-CUyjBl1Y.js";
 import { useClipboardComponent as b } from "../../utils/hooks/useClipboardComponent.js";
 const x = "cfxui__ClipboardButton__root__e8251", k = "cfxui__ClipboardButton__copied__6e0b9", e = {
   root: x,
@@ -18,27 +18,27 @@ function h(o) {
     hoverTitle: B,
     copiedTitle: T,
     textToCopy: j,
-    fixedOn: n,
+    fixedOn: l,
     onClick: t = u,
-    ...p
+    ...n
   } = o, {
-    copied: l,
+    copied: p,
     handleClick: i,
     title: m
   } = b(o), d = c.useCallback((s) => {
     t(s), i();
-  }, [i, t]), a = _(e.root, { [e.copied]: l });
+  }, [i, t]), a = _(e.root, { [e.copied]: p });
   return /* @__PURE__ */ r(
     f,
     {
       title: m,
-      fixedOn: n,
+      fixedOn: l,
       rootClassName: a,
-      children: /* @__PURE__ */ r(C, { ...p, onClick: d })
+      children: /* @__PURE__ */ r(C, { ...n, onClick: d })
     }
   );
 }
-const A = c.memo(h);
+const D = c.memo(h);
 export {
-  A as default
+  D as default
 };