@janbox/storefront-ui 1.0.0

package/dist/lib/input-range/input-range.js

@@ -0,0 +1,179 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, Fragment } from "react";
+import { getInputRangeProps } from "./helpers.js";
+import classes from "./input-range.module.scss.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import LongArrowRightIcon from "../../assets/svg/long-arrow-right.svg.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { InputNumber } from "../input-number/input-number.js";
+import { Icon } from "../icon/icon.js";
+import { cn } from "../../utils/stylesheet.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const InputRange = (_props) => {
+  const {
+    error,
+    helperText,
+    inputs,
+    xs,
+    md,
+    sm,
+    lg,
+    className,
+    onChange,
+    prefix,
+    suffix,
+    startIcon,
+    endIcon,
+    ...props
+  } = getInputRangeProps(_props);
+  const containerRef = useRef(null);
+  const inputRefs = useRef([]);
+  const iconProps = {
+    xs: {
+      size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize
+    },
+    sm: {
+      size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+    },
+    md: {
+      size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+    },
+    lg: {
+      size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+    }
+  };
+  const onInputFocus = (e) => {
+    var _a, _b;
+    e.target.select();
+    (_b = (_a = inputs == null ? void 0 : inputs.at(Number(e.currentTarget.dataset.index))) == null ? void 0 : _a.onFocus) == null ? void 0 : _b.call(_a, e);
+  };
+  const onInputChange = (e) => {
+    var _a, _b;
+    const edge = e.currentTarget.dataset.edge;
+    onChange == null ? void 0 : onChange(e, edge);
+    (_b = (_a = inputs == null ? void 0 : inputs.at(Number(e.currentTarget.dataset.index))) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, e);
+  };
+  const css = [
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { css: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs("div", { css, className: cn(classes.input_range, className), ...props, ref: containerRef, children: [
+      prefix,
+      !!startIcon && /* @__PURE__ */ jsx(
+        Icon,
+        {
+          ...startIcon,
+          css: { flexShrink: 0 },
+          className: cn(startIcon.className),
+          xs: {
+            size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+            ...startIcon.xs
+          },
+          sm: {
+            size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+            ...startIcon.sm
+          },
+          md: {
+            size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+            ...startIcon.md
+          },
+          lg: {
+            size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+            ...startIcon.lg
+          }
+        }
+      ),
+      ["from", "to"].map((edge, index, array) => {
+        const inputProps = (inputs == null ? void 0 : inputs.at(index)) ?? {};
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            InputNumber,
+            {
+              ref: (el) => {
+                inputRefs.current[index] = el;
+              },
+              "data-edge": edge,
+              "data-index": index,
+              className: cn(inputProps.className),
+              css: { textAlign: "center" },
+              mainProps: {
+                style: {
+                  borderWidth: 0,
+                  boxShadow: "none",
+                  paddingLeft: 0,
+                  paddingRight: 0
+                }
+              },
+              mode: "onBlur",
+              ...inputProps,
+              onChange: onInputChange,
+              onFocus: onInputFocus,
+              xs: {
+                size: xs == null ? void 0 : xs.size,
+                ...inputProps.xs
+              },
+              sm: {
+                size: sm == null ? void 0 : sm.size,
+                ...inputProps.sm
+              },
+              md: {
+                size: md == null ? void 0 : md.size,
+                ...inputProps.md
+              },
+              lg: {
+                size: lg == null ? void 0 : lg.size,
+                ...inputProps.lg
+              }
+            },
+            index
+          ),
+          index < array.length - 1 && /* @__PURE__ */ jsx(Icon, { ...iconProps, css: { flexShrink: 0 }, source: LongArrowRightIcon })
+        ] }, index);
+      }),
+      !!endIcon && /* @__PURE__ */ jsx(
+        Icon,
+        {
+          ...endIcon,
+          css: { flexShrink: 0 },
+          className: cn(endIcon.className),
+          xs: {
+            size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
+            ...endIcon.xs
+          },
+          sm: {
+            size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+            ...endIcon.sm
+          },
+          md: {
+            size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+            ...endIcon.md
+          },
+          lg: {
+            size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+            ...endIcon.lg
+          }
+        }
+      ),
+      suffix
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+  ] });
+};
+const createStyle = ({ size } = {}) => {
+  const { inputPaddingX } = getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX
+    }
+  ];
+};
+export {
+  InputRange
+};

package/dist/lib/input-range/input-range.module.scss.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const input_range = "_input_range_1yrkm_1";
+const classes = {
+  input_range
+};
+exports.default = classes;
+exports.input_range = input_range;

package/dist/lib/input-range/input-range.module.scss.js

@@ -0,0 +1,8 @@
+const input_range = "_input_range_1yrkm_1";
+const classes = {
+  input_range
+};
+export {
+  classes as default,
+  input_range
+};

package/dist/lib/input-range/types.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, JSX } from 'react';
+import { IconProps } from '../icon';
+import { InputNumberProps } from '../input-number/types';
+import { SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types';
+export interface InputRangeResponsiveProps {
+    size?: SizeVariant;
+}
+export type InputWrapperProps = HTMLAttributes<HTMLDivElement>;
+export type InputRangeEdge = 'from' | 'to';
+interface InputRangeExtendedProps extends ResponsiveDesign<InputRangeResponsiveProps> {
+    inputs?: [InputNumberProps, InputNumberProps];
+    error?: boolean;
+    helperText?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, edge: InputRangeEdge) => void;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    startIcon?: IconProps;
+    endIcon?: IconProps;
+}
+export type InputRangeProps = ShallowMerge<JSX.IntrinsicElements['div'], InputRangeExtendedProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/input-range/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input-range/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAExE,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,IAAI,CAAC;AAE3C,UAAU,uBAAwB,SAAQ,gBAAgB,CAAC,yBAAyB,CAAC;IACnF,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAClF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,uBAAuB,CAAC,CAAC"}

package/dist/lib/lightbox/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lightbox';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/lightbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/lightbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/lib/lightbox/lightbox.cjs

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const lodashEs = require("lodash-es");
+const react$1 = require("motion/react");
+const ReactPlayer = require("react-player");
+const reactZoomPanPinch = require("react-zoom-pan-pinch");
+const arrowLeft = require("../../assets/svg/arrow-left.svg.cjs");
+const arrowRight = require("../../assets/svg/arrow-right.svg.cjs");
+const searchAddPlusMiddle = require("../../assets/svg/search-add-plus-middle.svg.cjs");
+const searchMinus = require("../../assets/svg/search-minus.svg.cjs");
+const timesCloseDelete = require("../../assets/svg/times-close-delete.svg.cjs");
+const theme_index = require("../../theme/index.cjs");
+const swiper = require("../swiper/swiper/swiper.cjs");
+const swiperSlide = require("../swiper/swiper-slide/swiper-slide.cjs");
+const floating = require("../floating/floating/floating.cjs");
+const floatingContent = require("../floating/floating-content/floating-content.cjs");
+const image = require("../image/image.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+const floatingClose = require("../floating/floating-close/floating-close.cjs");
+const iconButton = require("../icon-button/icon-button.cjs");
+const LightboxIconButton = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    {
+      color: "neutral",
+      css: {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "white",
+        borderRadius: "50%",
+        ":hover": {
+          backgroundColor: "rgba(255, 255, 255, 0.2)"
+        }
+      },
+      ...props
+    }
+  );
+};
+const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
+  const [mainApi, setMainApi] = react.useState();
+  const zoomPanPinchRef = react.useRef(null);
+  const contentElementRef = react.useRef(null);
+  const [activeIndex, setActiveIndex] = react.useState(defaultActiveIndex);
+  const activeSlide = slides.at(activeIndex);
+  const handlePrevious = () => {
+    mainApi == null ? void 0 : mainApi.scrollPrev();
+  };
+  const handleNext = () => {
+    mainApi == null ? void 0 : mainApi.scrollNext();
+  };
+  react.useEffect(() => {
+    const onSelect = () => {
+      if (!mainApi) return;
+      setActiveIndex(mainApi.selectedScrollSnap());
+    };
+    mainApi == null ? void 0 : mainApi.on("select", onSelect);
+    return () => {
+      mainApi == null ? void 0 : mainApi.off("select", onSelect);
+    };
+  }, [mainApi]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: { position: "relative", width: "100%", flex: 1, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", paddingTop: 24, paddingBottom: 24, paddingLeft: 16, paddingRight: 16, [theme_screens.mediaQuery("md")]: { paddingLeft: 32, paddingRight: 32 } }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { position: "relative", width: "100%", height: "100%", paddingTop: 20, paddingBottom: 20, paddingLeft: 0, paddingRight: 0, [theme_screens.mediaQuery("md")]: { paddingLeft: 20, paddingRight: 20 } }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      swiper.Swiper,
+      {
+        options: {
+          loop: true,
+          startIndex: defaultActiveIndex,
+          watchDrag: (_, event) => {
+            var _a;
+            return !((_a = contentElementRef.current) == null ? void 0 : _a.contains(event.target));
+          }
+        },
+        onApi: setMainApi,
+        xs: { slidesPerView: 1 },
+        css: { width: "100%", height: "100%" },
+        children: lodashEs.times(slides.length).map((index) => /* @__PURE__ */ jsxRuntime.jsx(swiperSlide.SwiperSlide, { children: activeIndex === index && /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.motion.div,
+          {
+            css: { display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center" },
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: contentElementRef, children: [
+              (activeSlide == null ? void 0 : activeSlide.source.type) === "image" && /* @__PURE__ */ jsxRuntime.jsx(
+                reactZoomPanPinch.TransformWrapper,
+                {
+                  ref: zoomPanPinchRef,
+                  wheel: {
+                    smoothStep: 0.02
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(reactZoomPanPinch.TransformComponent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    image.Image,
+                    {
+                      src: activeSlide == null ? void 0 : activeSlide.source.src,
+                      alt: activeSlide == null ? void 0 : activeSlide.title,
+                      xs: {
+                        css: {
+                          maxWidth: "100%",
+                          maxHeight: "100%",
+                          objectFit: "contain",
+                          userSelect: "none"
+                        }
+                      }
+                    }
+                  ) })
+                }
+              ),
+              (activeSlide == null ? void 0 : activeSlide.source.type) === "video" && /* @__PURE__ */ jsxRuntime.jsx("div", { css: { aspectRatio: "16/9", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                ReactPlayer,
+                {
+                  light: activeSlide.source.thumbnail,
+                  src: activeSlide.source.src,
+                  width: "100%",
+                  height: "100%",
+                  controls: true
+                }
+              ) })
+            ] })
+          }
+        ) }, index))
+      }
+    ) }),
+    slides.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { display: "none", [theme_screens.mediaQuery("md")]: { display: "contents" } }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { css: { position: "absolute", left: 0, top: "50%", transform: "translateY(-50%) translateX(-50%)" }, children: /* @__PURE__ */ jsxRuntime.jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handlePrevious, icon: { source: arrowLeft } }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { css: { position: "absolute", right: 0, top: "50%", transform: "translateY(-50%) translateX(50%)" }, children: /* @__PURE__ */ jsxRuntime.jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handleNext, icon: { source: arrowRight } }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css: { position: "absolute", left: -4, top: 0, transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 8, [theme_screens.mediaQuery("md")]: { left: -10 } }, children: slides.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      activeIndex + 1,
+      " / ",
+      slides.length
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { position: "absolute", right: -4, top: 0, transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 8, [theme_screens.mediaQuery("md")]: { right: -10 } }, children: [
+      slides.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { display: "contents", [theme_screens.mediaQuery("md")]: { display: "none" } }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handlePrevious, icon: { source: arrowLeft } }),
+        /* @__PURE__ */ jsxRuntime.jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handleNext, icon: { source: arrowRight } })
+      ] }),
+      (activeSlide == null ? void 0 : activeSlide.source.type) === "image" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LightboxIconButton,
+          {
+            xs: { size: "sm" },
+            onClick: () => {
+              var _a;
+              return (_a = zoomPanPinchRef.current) == null ? void 0 : _a.zoomOut(0.5);
+            },
+            icon: { source: searchMinus }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LightboxIconButton,
+          {
+            xs: { size: "sm" },
+            onClick: () => {
+              var _a;
+              return (_a = zoomPanPinchRef.current) == null ? void 0 : _a.zoomIn(0.5);
+            },
+            icon: { source: searchAddPlusMiddle }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(floatingClose.FloatingClose, { children: /* @__PURE__ */ jsxRuntime.jsx(LightboxIconButton, { xs: { size: "sm" }, icon: { source: timesCloseDelete } }) })
+    ] }),
+    (activeSlide == null ? void 0 : activeSlide.title) && /* @__PURE__ */ jsxRuntime.jsx("div", { css: { position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)", borderRadius: 8, fontSize: "0.75rem", lineHeight: "1rem", textAlign: "center" }, children: activeSlide.title })
+  ] }) }) });
+};
+const Lightbox = ({ slides, defaultActiveIndex, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    floating.Floating,
+    {
+      dismissProps: {
+        enabled: true
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        floatingContent.FloatingContent,
+        {
+          floatingOverlayProps: {
+            disabled: false,
+            lockScroll: true,
+            style: {
+              zIndex: theme_index.FLOATING_Z_INDEX,
+              backdropFilter: "blur(4px)"
+            },
+            css: {
+              position: "fixed",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.9)",
+              color: "white"
+            }
+          },
+          css: { width: "100%", height: "100%" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(LightboxContent, { slides, defaultActiveIndex })
+        }
+      )
+    }
+  );
+};
+exports.Lightbox = Lightbox;

package/dist/lib/lightbox/lightbox.d.ts

@@ -0,0 +1,3 @@
+import { LightboxProps } from './types';
+export declare const Lightbox: ({ slides, defaultActiveIndex, ...props }: LightboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=lightbox.d.ts.map

package/dist/lib/lightbox/lightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox.d.ts","sourceRoot":"","sources":["../../../src/lib/lightbox/lightbox.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA+LxC,eAAO,MAAM,QAAQ,6CAA8C,aAAa,qDA6B/E,CAAC"}

package/dist/lib/lightbox/lightbox.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { times } from "lodash-es";
+import { motion } from "motion/react";
+import ReactPlayer from "react-player";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import ArrowLeftIcon from "../../assets/svg/arrow-left.svg.js";
+import ArrowRightIcon from "../../assets/svg/arrow-right.svg.js";
+import ZoomPlusIcon from "../../assets/svg/search-add-plus-middle.svg.js";
+import ZoomMinusIcon from "../../assets/svg/search-minus.svg.js";
+import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import { FLOATING_Z_INDEX } from "../../theme/index.js";
+import { Swiper } from "../swiper/swiper/swiper.js";
+import { SwiperSlide } from "../swiper/swiper-slide/swiper-slide.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { Image } from "../image/image.js";
+import { mediaQuery } from "../../theme/screens.js";
+import { FloatingClose } from "../floating/floating-close/floating-close.js";
+import { IconButton } from "../icon-button/icon-button.js";
+const LightboxIconButton = (props) => {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      color: "neutral",
+      css: {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "white",
+        borderRadius: "50%",
+        ":hover": {
+          backgroundColor: "rgba(255, 255, 255, 0.2)"
+        }
+      },
+      ...props
+    }
+  );
+};
+const LightboxContent = ({ slides, defaultActiveIndex = 0 }) => {
+  const [mainApi, setMainApi] = useState();
+  const zoomPanPinchRef = useRef(null);
+  const contentElementRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
+  const activeSlide = slides.at(activeIndex);
+  const handlePrevious = () => {
+    mainApi == null ? void 0 : mainApi.scrollPrev();
+  };
+  const handleNext = () => {
+    mainApi == null ? void 0 : mainApi.scrollNext();
+  };
+  useEffect(() => {
+    const onSelect = () => {
+      if (!mainApi) return;
+      setActiveIndex(mainApi.selectedScrollSnap());
+    };
+    mainApi == null ? void 0 : mainApi.on("select", onSelect);
+    return () => {
+      mainApi == null ? void 0 : mainApi.off("select", onSelect);
+    };
+  }, [mainApi]);
+  return /* @__PURE__ */ jsx("div", { css: { width: "100%", height: "100%", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx("div", { css: { position: "relative", width: "100%", flex: 1, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", paddingTop: 24, paddingBottom: 24, paddingLeft: 16, paddingRight: 16, [mediaQuery("md")]: { paddingLeft: 32, paddingRight: 32 } }, children: /* @__PURE__ */ jsxs("div", { css: { position: "relative", width: "100%", height: "100%", paddingTop: 20, paddingBottom: 20, paddingLeft: 0, paddingRight: 0, [mediaQuery("md")]: { paddingLeft: 20, paddingRight: 20 } }, children: [
+    /* @__PURE__ */ jsx("div", { css: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+      Swiper,
+      {
+        options: {
+          loop: true,
+          startIndex: defaultActiveIndex,
+          watchDrag: (_, event) => {
+            var _a;
+            return !((_a = contentElementRef.current) == null ? void 0 : _a.contains(event.target));
+          }
+        },
+        onApi: setMainApi,
+        xs: { slidesPerView: 1 },
+        css: { width: "100%", height: "100%" },
+        children: times(slides.length).map((index) => /* @__PURE__ */ jsx(SwiperSlide, { children: activeIndex === index && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            css: { display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center" },
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            children: /* @__PURE__ */ jsxs("div", { ref: contentElementRef, children: [
+              (activeSlide == null ? void 0 : activeSlide.source.type) === "image" && /* @__PURE__ */ jsx(
+                TransformWrapper,
+                {
+                  ref: zoomPanPinchRef,
+                  wheel: {
+                    smoothStep: 0.02
+                  },
+                  children: /* @__PURE__ */ jsx(TransformComponent, { children: /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      src: activeSlide == null ? void 0 : activeSlide.source.src,
+                      alt: activeSlide == null ? void 0 : activeSlide.title,
+                      xs: {
+                        css: {
+                          maxWidth: "100%",
+                          maxHeight: "100%",
+                          objectFit: "contain",
+                          userSelect: "none"
+                        }
+                      }
+                    }
+                  ) })
+                }
+              ),
+              (activeSlide == null ? void 0 : activeSlide.source.type) === "video" && /* @__PURE__ */ jsx("div", { css: { aspectRatio: "16/9", width: "100%" }, children: /* @__PURE__ */ jsx(
+                ReactPlayer,
+                {
+                  light: activeSlide.source.thumbnail,
+                  src: activeSlide.source.src,
+                  width: "100%",
+                  height: "100%",
+                  controls: true
+                }
+              ) })
+            ] })
+          }
+        ) }, index))
+      }
+    ) }),
+    slides.length > 1 && /* @__PURE__ */ jsxs("div", { css: { display: "none", [mediaQuery("md")]: { display: "contents" } }, children: [
+      /* @__PURE__ */ jsx("div", { css: { position: "absolute", left: 0, top: "50%", transform: "translateY(-50%) translateX(-50%)" }, children: /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handlePrevious, icon: { source: ArrowLeftIcon } }) }),
+      /* @__PURE__ */ jsx("div", { css: { position: "absolute", right: 0, top: "50%", transform: "translateY(-50%) translateX(50%)" }, children: /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handleNext, icon: { source: ArrowRightIcon } }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { css: { position: "absolute", left: -4, top: 0, transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 8, [mediaQuery("md")]: { left: -10 } }, children: slides.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      activeIndex + 1,
+      " / ",
+      slides.length
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { css: { position: "absolute", right: -4, top: 0, transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 8, [mediaQuery("md")]: { right: -10 } }, children: [
+      slides.length > 1 && /* @__PURE__ */ jsxs("div", { css: { display: "contents", [mediaQuery("md")]: { display: "none" } }, children: [
+        /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handlePrevious, icon: { source: ArrowLeftIcon } }),
+        /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, onClick: handleNext, icon: { source: ArrowRightIcon } })
+      ] }),
+      (activeSlide == null ? void 0 : activeSlide.source.type) === "image" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          LightboxIconButton,
+          {
+            xs: { size: "sm" },
+            onClick: () => {
+              var _a;
+              return (_a = zoomPanPinchRef.current) == null ? void 0 : _a.zoomOut(0.5);
+            },
+            icon: { source: ZoomMinusIcon }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LightboxIconButton,
+          {
+            xs: { size: "sm" },
+            onClick: () => {
+              var _a;
+              return (_a = zoomPanPinchRef.current) == null ? void 0 : _a.zoomIn(0.5);
+            },
+            icon: { source: ZoomPlusIcon }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(FloatingClose, { children: /* @__PURE__ */ jsx(LightboxIconButton, { xs: { size: "sm" }, icon: { source: CloseIcon } }) })
+    ] }),
+    (activeSlide == null ? void 0 : activeSlide.title) && /* @__PURE__ */ jsx("div", { css: { position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)", borderRadius: 8, fontSize: "0.75rem", lineHeight: "1rem", textAlign: "center" }, children: activeSlide.title })
+  ] }) }) });
+};
+const Lightbox = ({ slides, defaultActiveIndex, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Floating,
+    {
+      dismissProps: {
+        enabled: true
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        FloatingContent,
+        {
+          floatingOverlayProps: {
+            disabled: false,
+            lockScroll: true,
+            style: {
+              zIndex: FLOATING_Z_INDEX,
+              backdropFilter: "blur(4px)"
+            },
+            css: {
+              position: "fixed",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.9)",
+              color: "white"
+            }
+          },
+          css: { width: "100%", height: "100%" },
+          children: /* @__PURE__ */ jsx(LightboxContent, { slides, defaultActiveIndex })
+        }
+      )
+    }
+  );
+};
+export {
+  Lightbox
+};

package/dist/lib/lightbox/types.d.ts

@@ -0,0 +1,21 @@
+import { FloatingProps } from '../floating';
+import { ShallowMerge } from '../../types';
+type ImageSource = {
+    type: 'image';
+    src: string;
+};
+type VideoSource = {
+    type: 'video';
+    src: string;
+    thumbnail?: string;
+};
+export type LightboxSlide = {
+    source: ImageSource | VideoSource;
+    title?: string;
+};
+export type LightboxProps = ShallowMerge<FloatingProps, {
+    slides: LightboxSlide[];
+    defaultActiveIndex?: number;
+}>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/lightbox/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/lightbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,WAAW,GAAG,WAAW,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CACtC,aAAa,EACb;IACE,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CACF,CAAC"}