@cfx-dev/ui-components 5.0.26 → 5.0.28

package/dist/assets/all_css.css

@@ -33,6 +33,7 @@
 @import "./css/Interactive.css";
 @import "./css/Island.css";
 @import "./css/ItemPreview.css";
+@import "./css/Lightbox.css";
 @import "./css/Link.css";
 @import "./css/Loaf.css";
 @import "./css/Modal.css";

package/dist/assets/css/Lightbox.css

@@ -0,0 +1 @@
+.cfxui__Lightbox__lightboxOverlay__dc0eb{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;background:rgba(var(--color-bg),.9);align-items:center;justify-content:center;z-index:2;cursor:pointer}.cfxui__Lightbox__lightboxContainer__26f04{position:relative;width:100%;height:100%;max-width:calc(var(--quant) * 160);max-height:calc(var(--quant) * 100);cursor:default}.cfxui__Lightbox__lightboxImageContainer__eea35{position:relative;width:100%;height:100%;padding:calc(var(--quant) * 7) 0;display:flex;align-items:center;justify-content:center;overflow:hidden}.cfxui__Lightbox__lightboxImage__0f73c{object-fit:contain;width:100%;height:100%;max-width:100%;max-height:100%;position:absolute;left:0;top:0;opacity:1}.cfxui__Lightbox__lightboxVideo__cffdb{width:100%;height:calc(100% - 2 * var(--spacer-large));object-fit:contain;border:none;max-width:100%;max-height:100%;position:absolute;left:0;top:var(--spacer-large)}.cfxui__Lightbox__lightboxControlBtn__41c50{display:flex;align-items:center;justify-content:center;z-index:9000;width:calc(var(--quant) * 6);height:calc(var(--quant) * 6);border-radius:var(--border-radius-pill)}.cfxui__Lightbox__lightboxControlBtn__41c50:not(:disabled):hover{background-color:rgba(var(--color-secondary),.2)}.cfxui__Lightbox__lightboxClose__b2b96{position:absolute;top:calc(var(--quant) * .5);right:calc(var(--quant) * .5)}.cfxui__Lightbox__lightboxNav__60d29{position:absolute}.cfxui__Lightbox__lightboxPrev__35acc{left:calc(var(--quant) * .5);bottom:calc(var(--quant) * .5)}.cfxui__Lightbox__lightboxNext__09f51{right:calc(var(--quant) * .5);bottom:calc(var(--quant) * .5)}.cfxui__Lightbox__lightboxCounter__8824a{position:absolute;left:50%;bottom:calc(var(--quant) * 2);transform:translate(-50%);padding:calc(var(--quant) * .5) var(--quant);white-space:nowrap}.cfxui__Lightbox__lightboxEmbla__546be{overflow:hidden;width:100%;height:100%}.cfxui__Lightbox__lightboxEmblaContainer__3b54b{height:100%}.cfxui__Lightbox__lightboxEmblaSlide__64f0b{flex:0 0 calc(100% - calc(var(--quant) * 4));min-width:calc(100% - calc(var(--quant) * 4));height:100%;position:relative;overflow:hidden;margin:0 calc(var(--quant) * 4 / 2)}

package/dist/components/Lightbox/Lightbox.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { LightboxImageComponentProps, LightboxProps, VideoComponentProps } from './types';
+
+interface LightboxComponentProps extends LightboxProps {
+    LightboxImageComponent: React.ComponentType<LightboxImageComponentProps>;
+    VideoComponent: React.ComponentType<VideoComponentProps>;
+}
+declare function Lightbox({ LightboxImageComponent, VideoComponent, ...props }: LightboxComponentProps): import("react/jsx-runtime").JSX.Element | null;
+export default Lightbox;

package/dist/components/Lightbox/Lightbox.js

@@ -0,0 +1,172 @@
+import { jsx as t, jsxs as b, Fragment as P } from "react/jsx-runtime";
+import l from "react";
+import d from "../Flex/Flex.js";
+import { clsx as x } from "../../utils/clsx.js";
+import m from "../IconButton/IconButton.js";
+import { Text as S } from "../Text/Text.js";
+import "../../utils/ui/ui.js";
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import { useKeyboardClose as K } from "../../utils/hooks/useKeyboardClose.js";
+import "../../index-CUyjBl1Y.js";
+import { useKeyboardArrows as M } from "../../utils/hooks/useKeyboardArrows.js";
+import { useLightbox as z } from "../../utils/hooks/useLightbox.js";
+const V = "cfxui__Lightbox__lightboxOverlay__dc0eb", A = "cfxui__Lightbox__lightboxContainer__26f04", F = "cfxui__Lightbox__lightboxImageContainer__eea35", $ = "cfxui__Lightbox__lightboxImage__0f73c", j = "cfxui__Lightbox__lightboxVideo__cffdb", T = "cfxui__Lightbox__lightboxControlBtn__41c50", q = "cfxui__Lightbox__lightboxClose__b2b96", G = "cfxui__Lightbox__lightboxNav__60d29", H = "cfxui__Lightbox__lightboxPrev__35acc", J = "cfxui__Lightbox__lightboxNext__09f51", Q = "cfxui__Lightbox__lightboxCounter__8824a", W = "cfxui__Lightbox__lightboxEmbla__546be", X = "cfxui__Lightbox__lightboxEmblaContainer__3b54b", Y = "cfxui__Lightbox__lightboxEmblaSlide__64f0b", o = {
+  lightboxOverlay: V,
+  lightboxContainer: A,
+  lightboxImageContainer: F,
+  lightboxImage: $,
+  lightboxVideo: j,
+  lightboxControlBtn: T,
+  lightboxClose: q,
+  lightboxNav: G,
+  lightboxPrev: H,
+  lightboxNext: J,
+  lightboxCounter: Q,
+  lightboxEmbla: W,
+  lightboxEmblaContainer: X,
+  lightboxEmblaSlide: Y
+};
+function he({
+  LightboxImageComponent: v,
+  VideoComponent: p,
+  ...N
+}) {
+  const {
+    lightboxItems: i,
+    currentIndex: a,
+    isOpen: r,
+    onClose: c,
+    onIndexChange: y,
+    className: L,
+    showNavigation: I = !0,
+    showCounter: w = !0,
+    showCloseButton: E = !0
+  } = N, n = l.useRef(null), h = l.useRef(null), g = l.useRef(!1), {
+    emblaRef: R,
+    getSelectedIndex: O,
+    handlePrevious: s,
+    handleNext: _,
+    handleOverlayClick: f,
+    handleOverlayKeyDown: D
+  } = z({
+    currentIndex: a,
+    isOpen: r,
+    onClose: c,
+    onIndexChange: y,
+    initialIndex: n.current ?? a
+  }), C = O(), k = l.useCallback((e) => {
+    e.target === h.current && (g.current = !0);
+  }, []), B = l.useCallback((e) => {
+    e.target === h.current && g.current && f(e), g.current = !1;
+  }, [f]), U = l.useCallback((e) => {
+    e === "left" ? s() : e === "right" && _();
+  }, [s, _]);
+  return M(U), K(c), l.useEffect(() => {
+    r && n.current === null && (n.current = a), r || (n.current = null);
+  }, [r, a]), !r || !i.length ? null : /* @__PURE__ */ t(
+    "div",
+    {
+      className: x(o.lightboxOverlay, L),
+      onMouseDown: k,
+      onMouseUp: B,
+      onKeyDown: D,
+      role: "button",
+      "aria-label": "Close lightbox",
+      tabIndex: 0,
+      ref: h,
+      children: /* @__PURE__ */ b("div", { className: o.lightboxContainer, children: [
+        " ",
+        E && /* @__PURE__ */ t(
+          m,
+          {
+            name: "Close",
+            className: x(o.lightboxClose, o.lightboxControlBtn),
+            onClick: c,
+            "aria-label": "Close lightbox",
+            size: "medium"
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: o.lightboxImageContainer, children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: o.lightboxEmbla,
+            ref: R,
+            children: /* @__PURE__ */ t(d, { className: o.lightboxEmblaContainer, children: i.map((e, u) => /* @__PURE__ */ b(
+              d,
+              {
+                centered: !0,
+                className: o.lightboxEmblaSlide,
+                children: [
+                  e.type === "video" && e.videoUrl && /* @__PURE__ */ t(
+                    p,
+                    {
+                      src: e.videoUrl,
+                      title: e.videoTitle,
+                      className: o.lightboxVideo,
+                      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                      allowFullScreen: !0,
+                      isActive: u === C
+                    }
+                  ),
+                  e.type === "image" && e.src && /* @__PURE__ */ t(
+                    v,
+                    {
+                      src: e.src,
+                      alt: e.alt ?? `Image ${u + 1} of ${i.length}`,
+                      placeholder: e.blurDataURL ? "blur" : "empty",
+                      blurDataURL: e.blurDataURL,
+                      fill: !0,
+                      className: o.lightboxImage
+                    }
+                  )
+                ]
+              },
+              e.id ?? u
+            )) })
+          },
+          r && n.current !== null ? `open-${n.current}` : "closed"
+        ) }),
+        " ",
+        I && i.length > 1 && /* @__PURE__ */ b(P, { children: [
+          /* @__PURE__ */ t(
+            m,
+            {
+              name: "LeftChevron",
+              className: x(o.lightboxNav, o.lightboxPrev, o.lightboxControlBtn),
+              onClick: s,
+              "aria-label": "Previous image",
+              size: "large"
+            }
+          ),
+          /* @__PURE__ */ t(
+            m,
+            {
+              name: "RightChevron",
+              className: x(o.lightboxNav, o.lightboxNext, o.lightboxControlBtn),
+              onClick: _,
+              "aria-label": "Next image",
+              size: "large"
+            }
+          )
+        ] }),
+        w && i.length > 1 && /* @__PURE__ */ b(
+          S,
+          {
+            color: "primary",
+            size: "xsmall",
+            className: o.lightboxCounter,
+            children: [
+              C + 1,
+              " ",
+              "/",
+              i.length
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  he as default
+};

package/dist/components/Lightbox/LightboxShowcase.d.ts

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

package/dist/components/Lightbox/LightboxShowcase.js

@@ -0,0 +1,137 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import c from "react";
+import s from "../Flex/Flex.js";
+import { Interactive as m } from "../Interactive/Interactive.js";
+import h from "./Lightbox.js";
+const a = [
+  {
+    id: "1",
+    type: "image",
+    src: "https://picsum.photos/1200/800?1",
+    alt: "Image 1"
+  },
+  {
+    id: "2",
+    type: "image",
+    src: "https://picsum.photos/1200/800?2",
+    alt: "Image 2"
+  },
+  {
+    id: "3",
+    type: "image",
+    src: "https://picsum.photos/1200/800?3",
+    alt: "Image 3"
+  },
+  {
+    id: "4",
+    type: "video",
+    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+    videoTitle: "YouTube Demo Video"
+  }
+];
+function p({
+  src: r,
+  alt: o,
+  width: n,
+  height: i,
+  className: t
+}) {
+  return /* @__PURE__ */ e(
+    "img",
+    {
+      src: r,
+      alt: o,
+      width: n,
+      height: i,
+      className: t,
+      style: {
+        objectFit: "cover",
+        width: "100%",
+        height: "100%"
+      }
+    }
+  );
+}
+function u({
+  src: r,
+  className: o,
+  title: n,
+  allow: i,
+  allowFullScreen: t
+}) {
+  return /* @__PURE__ */ e(
+    "iframe",
+    {
+      src: r,
+      title: n,
+      className: o,
+      allow: i,
+      allowFullScreen: t,
+      style: {
+        width: "100%",
+        height: "100%",
+        border: 0
+      }
+    }
+  );
+}
+function I() {
+  const [r, o] = c.useState(!1), [n, i] = c.useState(0);
+  return /* @__PURE__ */ e(s, { direction: "column", gap: "large", children: /* @__PURE__ */ d(s, { direction: "column", gap: "small", children: [
+    /* @__PURE__ */ e("h4", { children: "Default" }),
+    /* @__PURE__ */ e(s, { gap: "small", children: a.map((t, l) => /* @__PURE__ */ e(
+      m,
+      {
+        onClick: () => {
+          i(l), o(!0);
+        },
+        children: t.type === "image" ? /* @__PURE__ */ e(
+          "img",
+          {
+            src: t.src,
+            alt: t.alt,
+            width: 150,
+            height: 100,
+            style: {
+              cursor: "pointer",
+              objectFit: "cover"
+            }
+          }
+        ) : /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: 150,
+              height: 100,
+              background: "#000",
+              color: "#fff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 14,
+              cursor: "pointer"
+            },
+            children: "YouTube Video"
+          }
+        )
+      },
+      t.id
+    )) }),
+    /* @__PURE__ */ e(
+      h,
+      {
+        lightboxItems: a,
+        currentIndex: n,
+        isOpen: r,
+        onClose: () => o(!1),
+        onIndexChange: i,
+        LightboxImageComponent: p,
+        VideoComponent: u
+      }
+    )
+  ] }) });
+}
+export {
+  I as default,
+  a as items
+};

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

@@ -0,0 +1,2 @@
+export { default as Lightbox } from './Lightbox';
+export type { LightboxProps, LightboxImageItem, SwipeDirection, } from './types';

package/dist/components/Lightbox/index.js

@@ -0,0 +1,4 @@
+import { default as a } from "./Lightbox.js";
+export {
+  a as Lightbox
+};

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

@@ -0,0 +1,51 @@
+export type LightboxImageItem = {
+    type: 'image';
+    src: string;
+    alt?: string;
+    id?: string | number;
+    blurDataURL?: string;
+};
+export type LightboxVideoItem = {
+    type: 'video';
+    videoUrl: string;
+    videoTitle?: string;
+    id?: string | number;
+};
+export type MediaItem = LightboxImageItem | LightboxVideoItem;
+export interface UseLightboxOptions {
+    lightboxItems: MediaItem[];
+    currentIndex: number;
+    isOpen: boolean;
+    onClose: () => void;
+    onIndexChange: (idx: number) => void;
+}
+export interface LightboxProps {
+    lightboxItems: MediaItem[];
+    currentIndex: number;
+    isOpen: boolean;
+    onClose: () => void;
+    onIndexChange: (index: number) => void;
+    className?: string;
+    showNavigation?: boolean;
+    showCounter?: boolean;
+    showCloseButton?: boolean;
+}
+export type SwipeDirection = 'left' | 'right';
+export interface LightboxImageComponentProps {
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    placeholder?: 'blur' | 'empty';
+    blurDataURL?: string;
+    fill?: boolean;
+}
+export interface VideoComponentProps {
+    src: string;
+    title?: string;
+    className?: string;
+    allow: string;
+    allowFullScreen?: boolean;
+    isActive?: boolean;
+}

package/dist/components/Lightbox/types.js

@@ -0,0 +1 @@
+