@zenpatient-org/healthspan-marketing-ui 0.1.90 → 0.1.91

package/dist/modules/ThreeItemsPlainCarousel/ThreeItemsPlainCarousel.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),i=require("../../components/Typography/Typography.cjs.js"),g=require("../../components/ProgressButton/ProgressButton.cjs.js"),s=require("./threeItemsPlainCarousel.module.css.cjs.js"),y=require("../../utils/cn/cn.cjs.js"),f=3,j=({title:p,cards:d})=>{const[r,u]=c.useState(0),l=c.useMemo(()=>d.slice(0,f),[d]),b=c.useMemo(()=>l.length===0?[]:[...l,...l].slice(r,r+f),[l,r]),o=l.length,a=o>1,m=()=>{a&&u(t=>t===0?o-1:t-1)},h=()=>{a&&u(t=>t===o-1?0:t+1)};return e.jsxs("section",{className:s.default.root,children:[e.jsxs("div",{className:s.default.topContainer,children:[e.jsx(i.Typography,{defaultVariant:"displayMd",mobileVariant:"headingXl",className:s.default.title,children:p}),e.jsx("div",{className:s.default.topButton,children:e.jsx(g.ProgressButton,{left:{disabled:!a,onClick:m},right:{disabled:!a,onClick:h}})})]}),e.jsx("div",{className:s.default.bottomContainer,children:e.jsx(e.Fragment,{children:b.map((t,n)=>e.jsxs("div",{className:y.cn({[s.default.mainCard]:n===0,[s.default.minorCard]:n!==0}),children:[e.jsx("img",{src:t.image,alt:t.title}),e.jsxs("div",{className:s.default.cardContent,children:[e.jsx(i.Typography,{defaultVariant:"headingMd",mobileVariant:"headingXs",children:t.title}),t.subtitle&&e.jsx(i.Typography,{defaultVariant:"labelLg",mobileVariant:"labelSm",className:s.default.subtitle,children:t.subtitle})]}),t.description&&n===0&&e.jsx(i.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodySm",className:s.default.descriptionText,children:t.description})]},`${t.title}-${n}`))})}),e.jsx("div",{className:s.default.bottomButton,children:e.jsx(g.ProgressButton,{left:{disabled:!a,onClick:m},right:{disabled:!a,onClick:h}})})]})};exports.ThreeItemsPlainCarousel=j;

package/dist/modules/ThreeItemsPlainCarousel/ThreeItemsPlainCarousel.d.ts

@@ -0,0 +1,14 @@
+export type Card = {
+    title: string;
+    description: string;
+};
+export type ThreeItemsPlainCarouselProps = {
+    title: string;
+    cards: Array<{
+        image: string;
+        title: string;
+        subtitle?: string;
+        description: string;
+    }>;
+};
+export declare const ThreeItemsPlainCarousel: ({ title, cards: rawCards }: ThreeItemsPlainCarouselProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/ThreeItemsPlainCarousel/ThreeItemsPlainCarousel.es.js

@@ -0,0 +1,81 @@
+import { jsxs as r, jsx as e, Fragment as N } from "react/jsx-runtime";
+import { useState as V, useMemo as b } from "react";
+import { Typography as s } from "../../components/Typography/Typography.es.js";
+import { ProgressButton as f } from "../../components/ProgressButton/ProgressButton.es.js";
+import i from "./threeItemsPlainCarousel.module.css.es.js";
+import { cn as y } from "../../utils/cn/cn.es.js";
+const p = 3, T = ({ title: g, cards: d }) => {
+  const [o, m] = V(0), a = b(() => d.slice(0, p), [d]), C = b(() => a.length === 0 ? [] : [...a, ...a].slice(o, o + p), [a, o]), c = a.length, l = c > 1, h = () => {
+    l && m((t) => t === 0 ? c - 1 : t - 1);
+  }, u = () => {
+    l && m((t) => t === c - 1 ? 0 : t + 1);
+  };
+  return /* @__PURE__ */ r("section", { className: i.root, children: [
+    /* @__PURE__ */ r("div", { className: i.topContainer, children: [
+      /* @__PURE__ */ e(s, { defaultVariant: "displayMd", mobileVariant: "headingXl", className: i.title, children: g }),
+      /* @__PURE__ */ e("div", { className: i.topButton, children: /* @__PURE__ */ e(
+        f,
+        {
+          left: {
+            disabled: !l,
+            onClick: h
+          },
+          right: {
+            disabled: !l,
+            onClick: u
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: i.bottomContainer, children: /* @__PURE__ */ e(N, { children: C.map((t, n) => /* @__PURE__ */ r(
+      "div",
+      {
+        className: y({
+          [i.mainCard]: n === 0,
+          [i.minorCard]: n !== 0
+        }),
+        children: [
+          /* @__PURE__ */ e("img", { src: t.image, alt: t.title }),
+          /* @__PURE__ */ r("div", { className: i.cardContent, children: [
+            /* @__PURE__ */ e(s, { defaultVariant: "headingMd", mobileVariant: "headingXs", children: t.title }),
+            t.subtitle && /* @__PURE__ */ e(
+              s,
+              {
+                defaultVariant: "labelLg",
+                mobileVariant: "labelSm",
+                className: i.subtitle,
+                children: t.subtitle
+              }
+            )
+          ] }),
+          t.description && n === 0 && /* @__PURE__ */ e(
+            s,
+            {
+              defaultVariant: "bodyLg",
+              mobileVariant: "bodySm",
+              className: i.descriptionText,
+              children: t.description
+            }
+          )
+        ]
+      },
+      `${t.title}-${n}`
+    )) }) }),
+    /* @__PURE__ */ e("div", { className: i.bottomButton, children: /* @__PURE__ */ e(
+      f,
+      {
+        left: {
+          disabled: !l,
+          onClick: h
+        },
+        right: {
+          disabled: !l,
+          onClick: u
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  T as ThreeItemsPlainCarousel
+};

package/dist/modules/ThreeItemsPlainCarousel/index.d.ts

@@ -0,0 +1 @@
+export { ThreeItemsPlainCarousel } from './ThreeItemsPlainCarousel';

package/dist/modules/ThreeItemsPlainCarousel/threeItemsPlainCarousel.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="threeItemsPlainCarousel-module__root___xtgoy",o="threeItemsPlainCarousel-module__topContainer___f6h9T",e="threeItemsPlainCarousel-module__bottomContainer___Pn1eW",n="threeItemsPlainCarousel-module__subtitle___xYJAD",r="threeItemsPlainCarousel-module__mainCard___F40fV",_="threeItemsPlainCarousel-module__minorCard___yYs9x",a="threeItemsPlainCarousel-module__cardContent___93PTA",s="threeItemsPlainCarousel-module__bottomButton___aII2h",i="threeItemsPlainCarousel-module__topButton___kBUHb",l="threeItemsPlainCarousel-module__descriptionText___7gS89",u={root:t,topContainer:o,bottomContainer:e,subtitle:n,mainCard:r,minorCard:_,cardContent:a,bottomButton:s,topButton:i,descriptionText:l};exports.bottomButton=s;exports.bottomContainer=e;exports.cardContent=a;exports.default=u;exports.descriptionText=l;exports.mainCard=r;exports.minorCard=_;exports.root=t;exports.subtitle=n;exports.topButton=i;exports.topContainer=o;

package/dist/modules/ThreeItemsPlainCarousel/threeItemsPlainCarousel.module.css.es.js

@@ -0,0 +1,25 @@
+const t = "threeItemsPlainCarousel-module__root___xtgoy", o = "threeItemsPlainCarousel-module__topContainer___f6h9T", e = "threeItemsPlainCarousel-module__bottomContainer___Pn1eW", n = "threeItemsPlainCarousel-module__subtitle___xYJAD", _ = "threeItemsPlainCarousel-module__mainCard___F40fV", r = "threeItemsPlainCarousel-module__minorCard___yYs9x", a = "threeItemsPlainCarousel-module__cardContent___93PTA", s = "threeItemsPlainCarousel-module__bottomButton___aII2h", l = "threeItemsPlainCarousel-module__topButton___kBUHb", m = "threeItemsPlainCarousel-module__descriptionText___7gS89", i = {
+  root: t,
+  topContainer: o,
+  bottomContainer: e,
+  subtitle: n,
+  mainCard: _,
+  minorCard: r,
+  cardContent: a,
+  bottomButton: s,
+  topButton: l,
+  descriptionText: m
+};
+export {
+  s as bottomButton,
+  e as bottomContainer,
+  a as cardContent,
+  i as default,
+  m as descriptionText,
+  _ as mainCard,
+  r as minorCard,
+  t as root,
+  n as subtitle,
+  l as topButton,
+  o as topContainer
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.1.90",
+    "version": "0.1.91",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -511,6 +511,11 @@
             "import": "./dist/modules/TextBlockAnimated/TextBlockAnimated.es.js",
             "require": "./dist/modules/TextBlockAnimated/TextBlockAnimated.cjs.js"
         },
+        "./ThreeItemsPlainCarousel": {
+            "types": "./dist/modules/ThreeItemsPlainCarousel/ThreeItemsPlainCarousel.d.ts",
+            "import": "./dist/modules/ThreeItemsPlainCarousel/ThreeItemsPlainCarousel.es.js",
+            "require": "./dist/modules/ThreeItemsPlainCarousel/ThreeItemsPlainCarousel.cjs.js"
+        },
         "./CallToAction": {
             "types": "./dist/modules/CallToAction/CallToAction.d.ts",
             "import": "./dist/modules/CallToAction/CallToAction.es.js",