@zenpatient-org/healthspan-marketing-ui 0.2.4 → 0.2.5

package/dist/components/ImageGallery/ImageGallery.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("swiper/modules"),c=require("swiper/react"),g=require("react"),q=require("../../utils/useSwiper/useSwiper.cjs.js"),w=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),j=require("../Label/Label.cjs.js"),x=require("../GalleryPagination/GalleryPagination.cjs.js"),y=[m.Navigation],_=({images:r,label:a,className:o})=>{const{activeIndex:u,handleSlideTo:l,handleSlideChange:d,onSwiperInit:S,handleSwiperResize:h,handleUserInteraction:n}=q.useSwiperWithAutoPlay(3e3),p=g.useCallback(s=>{n(),l(s)},[n,l]);return e.jsxs("div",{className:w.cn(i.root,o),children:[a&&e.jsx("div",{className:i.labelWrap,children:e.jsx(j.Label,{color:"black",size:"sm",children:a})}),e.jsx(c.Swiper,{onSwiper:S,onResize:h,onSlideChange:d,onTouchStart:n,onTouchEnd:n,modules:y,spaceBetween:0,slidesPerView:1,className:i.swiper,children:r.map((s,t)=>e.jsx(c.SwiperSlide,{children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:s,alt:"product image",className:i.image,onClick:n},t)})},t))}),r.length>1&&e.jsx(x.GalleryPagination,{count:r.length,activeIndex:u,onSelect:p})]})};exports.ImageGallery=_;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("swiper/modules"),d=require("swiper/react"),q=require("react"),w=require("../../utils/useSwiper/useSwiper.cjs.js"),j=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),y=require("../Label/Label.cjs.js"),x=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),P=require("../GalleryPagination/GalleryPagination.cjs.js"),_=[m.Navigation],v=({images:n,label:a,className:p,pagination:s="preview"})=>{const{activeIndex:t,handleSlideTo:c,handleSlideChange:S,onSwiperInit:h,handleSwiperResize:g,handleUserInteraction:r}=w.useSwiperWithAutoPlay(3e3),o=q.useCallback(l=>{r(),c(l)},[r,c]);return e.jsxs("div",{className:j.cn(i.root,p),children:[a&&e.jsx("div",{className:i.labelWrap,children:e.jsx(y.Label,{color:"black",size:"sm",children:a})}),e.jsx(d.Swiper,{onSwiper:h,onResize:g,onSlideChange:S,onTouchStart:r,onTouchEnd:r,modules:_,spaceBetween:0,slidesPerView:1,className:i.swiper,children:n.map((l,u)=>e.jsx(d.SwiperSlide,{children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:l,alt:"product image",className:i.image,onClick:r},u)})},u))}),s==="preview"&&n.length>1&&e.jsx(x.ImageGalleryPagination,{images:n,activeIndex:t,onSelect:o}),s==="plain"&&n.length>1&&e.jsx(P.GalleryPagination,{count:n.length,activeIndex:t,onSelect:o})]})};exports.ImageGallery=v;

package/dist/components/ImageGallery/ImageGallery.d.ts

@@ -3,6 +3,7 @@ type ImageGalleryProps = {
     images: Array<string>;
     label?: string;
     className?: string;
+    pagination?: 'plain' | 'preview';
 };
-export declare const ImageGallery: ({ images, label, className }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageGallery: ({ images, label, className, pagination }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ImageGallery/ImageGallery.es.js

@@ -1,52 +1,54 @@
 "use client";
-import { jsxs as S, jsx as e } from "react/jsx-runtime";
-import { Navigation as g } from "swiper/modules";
-import { Swiper as u, SwiperSlide as f } from "swiper/react";
-import { useCallback as w } from "react";
-import { useSwiperWithAutoPlay as N } from "../../utils/useSwiper/useSwiper.es.js";
-import { cn as v } from "../../utils/cn/cn.es.js";
+import { jsxs as w, jsx as e } from "react/jsx-runtime";
+import { Navigation as f } from "swiper/modules";
+import { Swiper as g, SwiperSlide as u } from "swiper/react";
+import { useCallback as v } from "react";
+import { useSwiperWithAutoPlay as I } from "../../utils/useSwiper/useSwiper.es.js";
+import { cn as N } from "../../utils/cn/cn.es.js";
 /* empty css                                      */
 /* empty css                                                  */
 /* empty css                                                  */
-import r from "../../components/ImageGallery/imageGallery.module.css";
-import { Label as I } from "../Label/Label.es.js";
-import { GalleryPagination as P } from "../GalleryPagination/GalleryPagination.es.js";
-const y = [g], U = ({ images: o, label: a, className: m }) => {
-  const { activeIndex: c, handleSlideTo: l, handleSlideChange: s, onSwiperInit: p, handleSwiperResize: d, handleUserInteraction: i } = N(3e3), h = w(
-    (n) => {
-      i(), l(n);
+import o from "../../components/ImageGallery/imageGallery.module.css";
+import { Label as P } from "../Label/Label.es.js";
+import { ImageGalleryPagination as y } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
+import { GalleryPagination as C } from "../GalleryPagination/GalleryPagination.es.js";
+const W = [f], D = ({ images: r, label: n, className: s, pagination: t = "preview" }) => {
+  const { activeIndex: a, handleSlideTo: m, handleSlideChange: d, onSwiperInit: h, handleSwiperResize: S, handleUserInteraction: i } = I(3e3), c = v(
+    (l) => {
+      i(), m(l);
     },
-    [i, l]
+    [i, m]
   );
-  return /* @__PURE__ */ S("div", { className: v(r.root, m), children: [
-    a && /* @__PURE__ */ e("div", { className: r.labelWrap, children: /* @__PURE__ */ e(I, { color: "black", size: "sm", children: a }) }),
+  return /* @__PURE__ */ w("div", { className: N(o.root, s), children: [
+    n && /* @__PURE__ */ e("div", { className: o.labelWrap, children: /* @__PURE__ */ e(P, { color: "black", size: "sm", children: n }) }),
     /* @__PURE__ */ e(
-      u,
+      g,
       {
-        onSwiper: p,
-        onResize: d,
-        onSlideChange: s,
+        onSwiper: h,
+        onResize: S,
+        onSlideChange: d,
         onTouchStart: i,
         onTouchEnd: i,
-        modules: y,
+        modules: W,
         spaceBetween: 0,
         slidesPerView: 1,
-        className: r.swiper,
-        children: o.map((n, t) => /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e("div", { className: r.imageWrapper, children: /* @__PURE__ */ e(
+        className: o.swiper,
+        children: r.map((l, p) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e("div", { className: o.imageWrapper, children: /* @__PURE__ */ e(
           "img",
           {
-            src: n,
+            src: l,
             alt: "product image",
-            className: r.image,
+            className: o.image,
             onClick: i
           },
-          t
-        ) }) }, t))
+          p
+        ) }) }, p))
       }
     ),
-    o.length > 1 && /* @__PURE__ */ e(P, { count: o.length, activeIndex: c, onSelect: h })
+    t === "preview" && r.length > 1 && /* @__PURE__ */ e(y, { images: r, activeIndex: a, onSelect: c }),
+    t === "plain" && r.length > 1 && /* @__PURE__ */ e(C, { count: r.length, activeIndex: a, onSelect: c })
   ] });
 };
 export {
-  U as ImageGallery
+  D as ImageGallery
 };

package/dist/components/ImageGallery/components/ImageGalleryPagination/ImageGalleryPagination.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../utils/cn/cn.cjs.js"),t=require("../../../../src/components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css"),c=({images:s,activeIndex:l,onSelect:i})=>n.jsx("div",{className:t.root,children:s.map((a,e)=>n.jsx("button",{type:"button",className:r.cn(t.thumbnailButton,{[t.active]:e===l}),onClick:()=>i(e),children:n.jsx("img",{src:a,alt:`thumbnail ${e+1}`,className:t.thumbnailImage})},a))});exports.ImageGalleryPagination=c;

package/dist/components/ImageGallery/components/ImageGalleryPagination/ImageGalleryPagination.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+type ImageGalleryPaginationProps = {
+    images: string[];
+    activeIndex: number;
+    onSelect: (index: number) => void;
+};
+export declare const ImageGalleryPagination: React.FC<ImageGalleryPaginationProps>;
+export {};

package/dist/components/ImageGallery/components/ImageGalleryPagination/ImageGalleryPagination.es.js

@@ -0,0 +1,16 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as e } from "../../../../utils/cn/cn.es.js";
+import t from "../../../../components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css";
+const u = ({ images: n, activeIndex: r, onSelect: l }) => /* @__PURE__ */ m("div", { className: t.root, children: n.map((o, a) => /* @__PURE__ */ m(
+  "button",
+  {
+    type: "button",
+    className: e(t.thumbnailButton, { [t.active]: a === r }),
+    onClick: () => l(a),
+    children: /* @__PURE__ */ m("img", { src: o, alt: `thumbnail ${a + 1}`, className: t.thumbnailImage })
+  },
+  o
+)) });
+export {
+  u as ImageGalleryPagination
+};

package/dist/components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css

@@ -0,0 +1,30 @@
+.root {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    padding: 0 24px;
+}
+
+.thumbnailButton {
+    width: 64px;
+    height: 64px;
+    padding: 0;
+    border: 1px solid var(--color-neutral-200);
+    border-radius: var(--border-radius-xs);
+    background: none;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+    overflow: hidden;
+}
+
+.thumbnailButton.active {
+    opacity: 1;
+    border-color: var(--color-neutral-200);
+}
+
+.thumbnailImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

package/dist/components/ImageGallery/components/ImageGalleryPagination/index.d.ts

@@ -0,0 +1 @@
+export * from './ImageGalleryPagination';

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

@@ -0,0 +1 @@
+export * from './ImageGalleryPagination';

package/dist/components/ImageGallery/imageGallery.module.css

@@ -9,13 +9,13 @@
     overflow: hidden;
     border-radius: var(--border-radius-md);
     background-color: var(--color-bg-neutral-light);
+    gap: 24px;
 }
 
 .labelWrap {
     width: 100%;
     display: flex;
     align-items: flex-start;
-    margin-bottom: 12px;
     padding: 0 24px;
 }
 
@@ -43,15 +43,15 @@
 @media (width <= 768px) {
     .root {
         padding: 16px 0;
+        gap: 16px;
     }
 
     .labelWrap {
         padding: 0 16px;
-        margin-bottom: 14px;
     }
 
     .swiper {
-        margin-bottom: 14px;
+        margin-bottom: 0;
     }
 
     .imageWrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.4",
+    "version": "0.2.5",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",