@tramo-digital/react-ui 0.0.0-alpha

package/dist/esm/ui/compositions/Carousel/Carousel.js

@@ -0,0 +1,85 @@
+import { jsx as a, jsxs as T } from "react/jsx-runtime";
+import { useState as m, useRef as W, useCallback as q, useEffect as h, useLayoutEffect as D } from "react";
+import J from "../../patterns/Card/Card.js";
+import K from "../../patterns/Navigation/Navigation.js";
+import f from "./Carousel.module.css.js";
+const Q = typeof window < "u" ? D : h, ne = ({ data: R, events: E }) => {
+  if (!R) return null;
+  const { cards: n } = R, { onSlideNext: b, onSlidePrev: N } = E ?? {}, [s, d] = m(0), [l, x] = m(1), [S, g] = m(0), [v, V] = m(!1), w = W(null), y = W(null), i = q(() => {
+    const t = w.current, r = y.current;
+    if (!t || !r) {
+      x((e) => e === 1 ? e : 1), g((e) => e === 0 ? e : 0);
+      return;
+    }
+    const p = t.getBoundingClientRect(), M = p.width, c = Array.from(r.children);
+    if (c.length === 0) {
+      x((e) => e === 1 ? e : 1), g((e) => e === 0 ? e : 0);
+      return;
+    }
+    let o = 0;
+    c.length > 1 && (o = c[1].offsetLeft - c[0].offsetLeft), o <= 0 && (o = c[0].getBoundingClientRect().width), o <= 0 && (o = M);
+    const F = o > 0 ? Math.max(1, Math.floor((M + 0.5) / o)) : 1, z = c.reduce((e, u) => {
+      const L = u.getBoundingClientRect();
+      return L.left >= p.left - 1 && L.right <= p.right + 1 ? e + 1 : e;
+    }, 0), H = z > 0 ? z : F;
+    g((e) => Math.abs(e - o) > 0.1 ? o : e), x((e) => {
+      const u = Math.max(1, Math.min(n.length, H));
+      return u === e ? e : u;
+    });
+    const I = r.scrollWidth - M > 1;
+    V((e) => e === I ? e : I), I || d((e) => e === 0 ? e : 0);
+  }, [n.length]);
+  Q(() => {
+    i();
+  }, [n.length, i]), h(() => {
+    if (typeof window > "u") return;
+    const t = () => i();
+    return window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
+    };
+  }, [i]), h(() => {
+    if (typeof ResizeObserver > "u") return;
+    const t = w.current;
+    if (!t) return;
+    const r = new ResizeObserver(() => i());
+    return r.observe(t), () => {
+      r.disconnect();
+    };
+  }, [i]), h(() => {
+    d((t) => {
+      const r = Math.max(0, n.length - l);
+      return Math.min(t, r);
+    });
+  }, [n.length, l]);
+  const C = Math.max(0, n.length - l), O = s > 0, P = s < C, j = () => {
+    if (!P) return;
+    const t = Math.min(s + 1, C);
+    t !== s && (d(t), b && b());
+  }, B = () => {
+    if (!O) return;
+    const t = Math.max(s - 1, 0);
+    t !== s && (d(t), N && N());
+  }, k = n.length > 0 ? s + 1 : 0, A = n.length > 0 ? Math.min(s + l, n.length) : 0, G = n.length === 0 ? 0 : l > 1 ? { min: k, max: A } : k, X = -(s * (S || 0)), $ = {
+    transform: v ? `translateX(${X}px)` : "none",
+    justifyContent: v ? void 0 : "center"
+  };
+  return /* @__PURE__ */ a("div", { className: f.carouselWrapper, children: /* @__PURE__ */ T("div", { className: f.contentPanel, children: [
+    /* @__PURE__ */ a("div", { className: f.cardsWrapper, ref: w, children: /* @__PURE__ */ a("div", { className: f.cardsTrack, ref: y, style: $, children: n.map((t, r) => /* @__PURE__ */ a("div", { className: f.cardItem, children: /* @__PURE__ */ a(J, { ...t }) }, `Card-${r}`)) }) }),
+    v && /* @__PURE__ */ a(
+      K,
+      {
+        data: {
+          totalItems: n.length,
+          currentItem: G,
+          disableNext: !P,
+          disablePrev: !O
+        },
+        events: { onNext: j, onPrev: B }
+      }
+    )
+  ] }) });
+};
+export {
+  ne as default
+};
+//# sourceMappingURL=Carousel.js.map

package/dist/esm/ui/compositions/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../../../../../src/ui/compositions/Carousel/Carousel.tsx"],"sourcesContent":["import type { CarouselModel } from \"@tramo-digital/types\";\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\";\nimport Card from \"../../patterns/Card/Card\";\nimport Navigation from \"../../patterns/Navigation/Navigation\";\nimport styles from \"./Carousel.module.css\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nconst Carousel: React.FC<CarouselModel> = ({ data, events }) => {\n  if (!data) return null;\n  const _fingerprint = \"13e461a554ac5c4124e4fcafb3fb2169\";\n\n  const { cards } = data;\n  const { onSlideNext, onSlidePrev } = events ?? {};\n\n  const [carouselIndex, setCarouselIndex] = useState<number>(0);\n  const [itemsPerView, setItemsPerView] = useState<number>(1);\n  const [itemOffset, setItemOffset] = useState<number>(0);\n  const [hasOverflow, setHasOverflow] = useState<boolean>(false);\n\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const updateMeasurements = useCallback(() => {\n    const viewport = viewportRef.current;\n    const track = trackRef.current;\n\n    if (!viewport || !track) {\n      setItemsPerView((prev) => (prev === 1 ? prev : 1));\n      setItemOffset((prev) => (prev === 0 ? prev : 0));\n      return;\n    }\n\n    const viewportRect = viewport.getBoundingClientRect();\n    const viewportWidth = viewportRect.width;\n    const items = Array.from(track.children) as HTMLElement[];\n\n    if (items.length === 0) {\n      setItemsPerView((prev) => (prev === 1 ? prev : 1));\n      setItemOffset((prev) => (prev === 0 ? prev : 0));\n      return;\n    }\n\n    let step = 0;\n\n    if (items.length > 1) {\n      step = items[1].offsetLeft - items[0].offsetLeft;\n    }\n\n    if (step <= 0) {\n      const firstRect = items[0].getBoundingClientRect();\n      step = firstRect.width;\n    }\n\n    if (step <= 0) {\n      step = viewportWidth;\n    }\n\n    const approxVisible =\n      step > 0 ? Math.max(1, Math.floor((viewportWidth + 0.5) / step)) : 1;\n    const visibleFromRects = items.reduce((count, item) => {\n      const rect = item.getBoundingClientRect();\n      if (\n        rect.left >= viewportRect.left - 1 &&\n        rect.right <= viewportRect.right + 1\n      ) {\n        return count + 1;\n      }\n      return count;\n    }, 0);\n\n    const computedVisible =\n      visibleFromRects > 0 ? visibleFromRects : approxVisible;\n\n    setItemOffset((prev) => (Math.abs(prev - step) > 0.1 ? step : prev));\n    setItemsPerView((prev) => {\n      const next = Math.max(1, Math.min(cards.length, computedVisible));\n      return next === prev ? prev : next;\n    });\n\n    const trackWidth = track.scrollWidth;\n    const isOverflowing = trackWidth - viewportWidth > 1;\n\n    setHasOverflow((prev) => (prev === isOverflowing ? prev : isOverflowing));\n\n    if (!isOverflowing) {\n      setCarouselIndex((prev) => (prev === 0 ? prev : 0));\n    }\n  }, [cards.length]);\n\n  useIsomorphicLayoutEffect(() => {\n    updateMeasurements();\n  }, [cards.length, updateMeasurements]);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const handleResize = () => updateMeasurements();\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [updateMeasurements]);\n\n  useEffect(() => {\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    const viewport = viewportRef.current;\n\n    if (!viewport) return;\n\n    const resizeObserver = new ResizeObserver(() => updateMeasurements());\n    resizeObserver.observe(viewport);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [updateMeasurements]);\n\n  useEffect(() => {\n    setCarouselIndex((prev) => {\n      const maxAllowedIndex = Math.max(0, cards.length - itemsPerView);\n      return Math.min(prev, maxAllowedIndex);\n    });\n  }, [cards.length, itemsPerView]);\n\n  const maxIndex = Math.max(0, cards.length - itemsPerView);\n  const canGoPrev = carouselIndex > 0;\n  const canGoNext = carouselIndex < maxIndex;\n\n  const handleNext = () => {\n    if (!canGoNext) return;\n\n    const nextIndex = Math.min(carouselIndex + 1, maxIndex);\n\n    if (nextIndex !== carouselIndex) {\n      setCarouselIndex(nextIndex);\n      if (onSlideNext) onSlideNext();\n    }\n  };\n\n  const handlePrev = () => {\n    if (!canGoPrev) return;\n\n    const prevIndex = Math.max(carouselIndex - 1, 0);\n\n    if (prevIndex !== carouselIndex) {\n      setCarouselIndex(prevIndex);\n      if (onSlidePrev) onSlidePrev();\n    }\n  };\n\n  const rangeMin = cards.length > 0 ? carouselIndex + 1 : 0;\n  const rangeMax =\n    cards.length > 0 ? Math.min(carouselIndex + itemsPerView, cards.length) : 0;\n  const navigationCurrentItem =\n    cards.length === 0\n      ? 0\n      : itemsPerView > 1\n        ? { min: rangeMin, max: rangeMax }\n        : rangeMin;\n\n  const translateX = -(carouselIndex * (itemOffset || 0));\n  const trackStyle: CSSProperties = {\n    transform: hasOverflow ? `translateX(${translateX}px)` : \"none\",\n    justifyContent: hasOverflow ? undefined : \"center\",\n  };\n\n  return (\n    <div className={styles.carouselWrapper}>\n      <div className={styles.contentPanel}>\n        <div className={styles.cardsWrapper} ref={viewportRef}>\n          <div className={styles.cardsTrack} ref={trackRef} style={trackStyle}>\n            {cards.map((card, index) => (\n              <div className={styles.cardItem} key={`Card-${index}`}>\n                <Card {...card} />\n              </div>\n            ))}\n          </div>\n        </div>\n        {hasOverflow && (\n          <Navigation\n            data={{\n              totalItems: cards.length,\n              currentItem: navigationCurrentItem,\n              disableNext: !canGoNext,\n              disablePrev: !canGoPrev,\n            }}\n            events={{ onNext: handleNext, onPrev: handlePrev }}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Carousel;\n"],"names":["useIsomorphicLayoutEffect","useLayoutEffect","useEffect","Carousel","data","events","cards","onSlideNext","onSlidePrev","carouselIndex","setCarouselIndex","useState","itemsPerView","setItemsPerView","itemOffset","setItemOffset","hasOverflow","setHasOverflow","viewportRef","useRef","trackRef","updateMeasurements","useCallback","viewport","track","prev","viewportRect","viewportWidth","items","step","approxVisible","visibleFromRects","count","item","rect","computedVisible","next","isOverflowing","handleResize","resizeObserver","maxAllowedIndex","maxIndex","canGoPrev","canGoNext","handleNext","nextIndex","handlePrev","prevIndex","rangeMin","rangeMax","navigationCurrentItem","translateX","trackStyle","jsx","styles","jsxs","card","index","Card","Navigation"],"mappings":"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"}

package/dist/esm/ui/compositions/Carousel/Carousel.module.css.js

@@ -0,0 +1,16 @@
+const a = "syqYPhpb", c = "ihxiI24Y", r = "_22aQhkSt", t = "PSFcpfJn", s = "yIt9tJwm", e = {
+  carouselWrapper: a,
+  contentPanel: c,
+  cardsWrapper: r,
+  cardsTrack: t,
+  cardItem: s
+};
+export {
+  s as cardItem,
+  t as cardsTrack,
+  r as cardsWrapper,
+  a as carouselWrapper,
+  c as contentPanel,
+  e as default
+};
+//# sourceMappingURL=Carousel.module.css.js.map

package/dist/esm/ui/compositions/Carousel/Carousel.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/esm/ui/compositions/Carousel/index.js

@@ -0,0 +1,5 @@
+import r from "./Carousel.js";
+export {
+  r as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/compositions/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/ui/compositions/Collage/Collage.js

@@ -0,0 +1,60 @@
+import { jsx as l, jsxs as f } from "react/jsx-runtime";
+import h from "../../primitives/Frame/Frame.js";
+import N from "../../primitives/Image/Image.js";
+import x from "../../patterns/Content/Content.js";
+import e from "./Collage.module.css.js";
+const G = ({
+  data: i,
+  tokens: a,
+  className: m,
+  colorPalette: n,
+  colorSource: r,
+  customColor: o
+}) => {
+  if (!i) return null;
+  const s = {
+    ...a?.color?.background && {
+      "--collage-surface": a.color.background.default
+    },
+    ...a?.spacing?.padding && {
+      "--collage-padding-y": a.spacing.padding.default
+    },
+    ...a?.spacing?.gap && {
+      "--collage-main-gap": a.spacing.gap.default
+    },
+    ...a?.spacing?.mediaGap && {
+      "--collage-media-gap": a.spacing.mediaGap.default
+    },
+    ...a?.border?.radius && {
+      "--collage-media-radius": a.border.radius.default
+    },
+    ...a?.dimension?.maxWidth && {
+      "--collage-max-width": a.dimension.maxWidth.default
+    }
+  }, { content: d, collageImages: c = [], alignment: t = "left" } = i, g = [e.collage, m].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l(
+    h,
+    {
+      "data-tui-composition": "base",
+      colorPalette: n,
+      colorSource: r,
+      customColor: o,
+      className: g,
+      style: s,
+      children: /* @__PURE__ */ f("div", { className: e.inner, children: [
+        d && /* @__PURE__ */ l("div", { className: e.textPanel, children: /* @__PURE__ */ l(
+          x,
+          {
+            data: { ...d, contentAlignment: t },
+            className: e.content
+          }
+        ) }),
+        c.length > 0 && /* @__PURE__ */ l("div", { className: e.mediaPanel, "aria-label": "Collage images", children: /* @__PURE__ */ l("div", { className: e.mediaGrid, children: c.slice(0, 6).map((p, u) => /* @__PURE__ */ l("div", { className: e.media, children: /* @__PURE__ */ l(N, { data: p, className: e.mediaImage }) }, u)) }) })
+      ] })
+    }
+  );
+};
+export {
+  G as default
+};
+//# sourceMappingURL=Collage.js.map

package/dist/esm/ui/compositions/Collage/Collage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collage.js","sources":["../../../../../src/ui/compositions/Collage/Collage.tsx"],"sourcesContent":["import type { CollageModel } from \"@tramo-digital/types\";\nimport React from \"react\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport Image from \"../../primitives/Image/Image\";\nimport Content from \"../../patterns/Content/Content\";\nimport styles from \"./Collage.module.css\";\n\nconst Collage: React.FC<CollageModel> = ({\n  data,\n  tokens,\n  className,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n\n  const _fingerprint = \"f09f88f85798a4071e1dab06d09518c3\";\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      \"--collage-surface\": tokens.color.background.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--collage-padding-y\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      \"--collage-main-gap\": tokens.spacing.gap.default,\n    }),\n    ...(tokens?.spacing?.mediaGap && {\n      \"--collage-media-gap\": tokens.spacing.mediaGap.default,\n    }),\n    ...(tokens?.border?.radius && {\n      \"--collage-media-radius\": tokens.border.radius.default,\n    }),\n    ...(tokens?.dimension?.maxWidth && {\n      \"--collage-max-width\": tokens.dimension.maxWidth.default,\n    }),\n  } as React.CSSProperties;\n\n  const { content, collageImages = [], alignment = \"left\" } = data;\n\n  const rootClassName = [styles.collage, className].filter(Boolean).join(\" \");\n\n  return (\n    <Frame\n      data-tui-composition=\"base\"\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={rootClassName}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <div className={styles.inner}>\n        {content && (\n          <div className={styles.textPanel}>\n            <Content\n              data={{ ...content, contentAlignment: alignment }}\n              className={styles.content}\n            />\n          </div>\n        )}\n\n        {collageImages.length > 0 && (\n          <div className={styles.mediaPanel} aria-label=\"Collage images\">\n            <div className={styles.mediaGrid}>\n              {collageImages.slice(0, 6).map((image, index) => (\n                <div key={index} className={styles.media}>\n                  <Image data={image} className={styles.mediaImage} />\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </Frame>\n  );\n};\n\nexport default Collage;\n"],"names":["Collage","data","tokens","className","colorPalette","colorSource","customColor","tokenStyles","content","collageImages","alignment","rootClassName","styles","jsx","Frame","jsxs","Content","image","index","Image"],"mappings":";;;;;AAOA,MAAMA,IAAkC,CAAC;AAAA,EACvC,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACJ,MAAI,CAACL,EAAM,QAAO;AAIlB,QAAMM,IAAc;AAAA,IAClB,GAAIL,GAAQ,OAAO,cAAc;AAAA,MAC/B,qBAAqBA,EAAO,MAAM,WAAW;AAAA,IAAA;AAAA,IAE/C,GAAIA,GAAQ,SAAS,WAAW;AAAA,MAC9B,uBAAuBA,EAAO,QAAQ,QAAQ;AAAA,IAAA;AAAA,IAEhD,GAAIA,GAAQ,SAAS,OAAO;AAAA,MAC1B,sBAAsBA,EAAO,QAAQ,IAAI;AAAA,IAAA;AAAA,IAE3C,GAAIA,GAAQ,SAAS,YAAY;AAAA,MAC/B,uBAAuBA,EAAO,QAAQ,SAAS;AAAA,IAAA;AAAA,IAEjD,GAAIA,GAAQ,QAAQ,UAAU;AAAA,MAC5B,0BAA0BA,EAAO,OAAO,OAAO;AAAA,IAAA;AAAA,IAEjD,GAAIA,GAAQ,WAAW,YAAY;AAAA,MACjC,uBAAuBA,EAAO,UAAU,SAAS;AAAA,IAAA;AAAA,EACnD,GAGI,EAAE,SAAAM,GAAS,eAAAC,IAAgB,CAAA,GAAI,WAAAC,IAAY,WAAWT,GAEtDU,IAAgB,CAACC,EAAO,SAAST,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1E,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,cAAAV;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAWK;AAAA,MACX,OAAOJ;AAAA,MAEP,UAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAWH,EAAO,OACpB,UAAA;AAAA,QAAAJ,KACC,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,WACrB,UAAA,gBAAAC;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,MAAM,EAAE,GAAGR,GAAS,kBAAkBE,EAAA;AAAA,YACtC,WAAWE,EAAO;AAAA,UAAA;AAAA,QAAA,GAEtB;AAAA,QAGDH,EAAc,SAAS,uBACrB,OAAA,EAAI,WAAWG,EAAO,YAAY,cAAW,kBAC5C,UAAA,gBAAAC,EAAC,SAAI,WAAWD,EAAO,WACpB,UAAAH,EAAc,MAAM,GAAG,CAAC,EAAE,IAAI,CAACQ,GAAOC,MACrC,gBAAAL,EAAC,SAAgB,WAAWD,EAAO,OACjC,UAAA,gBAAAC,EAACM,GAAA,EAAM,MAAMF,GAAO,WAAWL,EAAO,WAAA,CAAY,KAD1CM,CAEV,CACD,GACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/ui/compositions/Collage/Collage.module.css.js

@@ -0,0 +1,22 @@
+const e = "_4sJ1qm2V", n = "ocETzA2R", t = "nDCAir0A", a = "vWikq7vA", c = "aId2prSI", o = "arE2UBqX", i = "KDe8tX6P", s = "_8Vcswzqm", d = {
+  collage: e,
+  inner: n,
+  textPanel: t,
+  content: a,
+  mediaPanel: c,
+  mediaGrid: o,
+  media: i,
+  mediaImage: s
+};
+export {
+  e as collage,
+  a as content,
+  d as default,
+  n as inner,
+  i as media,
+  o as mediaGrid,
+  s as mediaImage,
+  c as mediaPanel,
+  t as textPanel
+};
+//# sourceMappingURL=Collage.module.css.js.map

package/dist/esm/ui/compositions/Collage/Collage.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collage.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/ui/compositions/Collage/index.js

@@ -0,0 +1,5 @@
+import a from "./Collage.js";
+export {
+  a as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/compositions/Collage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/ui/compositions/ContentGrid/ContentGrid.js

@@ -0,0 +1,108 @@
+import { jsx as e, Fragment as w, jsxs as x } from "react/jsx-runtime";
+import j from "../../primitives/Frame/Frame.js";
+import A from "../../primitives/Image/Image.js";
+import B from "../../patterns/Content/Content.js";
+import a from "./ContentGrid.module.css.js";
+const h = 3, E = (n, t) => t || (n === 1 ? "single" : n % 2 === 0 ? "evens" : "odds"), F = (n, t) => {
+  const d = [];
+  for (let i = 0; i < n.length; i += t)
+    d.push(n.slice(i, i + t));
+  return d;
+}, M = ({
+  data: n,
+  tokens: t,
+  events: d,
+  className: i,
+  colorPalette: m,
+  colorSource: u,
+  customColor: p
+}) => {
+  if (!n) return null;
+  const y = {
+    ...t?.color?.background && {
+      "--content-grid-background": t.color.background.default
+    },
+    ...t?.spacing?.padding && {
+      "--content-grid-padding": t.spacing.padding.default
+    },
+    ...t?.spacing?.gap && {
+      "--content-grid-gap": t.spacing.gap.default
+    },
+    ...t?.spacing?.marginBottom && {
+      "--content-grid-margin-bottom": t.spacing.marginBottom.default
+    },
+    ...t?.dimension?.minWidth && {
+      "--content-grid-item-min-width": t.dimension.minWidth.default
+    },
+    ...t?.effect?.opacity && {
+      "--content-grid-overlay-opacity": t.effect.opacity.default
+    }
+  }, {
+    items: r = [],
+    itemsPerRow: f = h,
+    layout: v,
+    alignment: s = "left"
+  } = n, g = [1, 2, 3].includes(f) ? f : h;
+  if (r.length > g) {
+    const o = F(r, g);
+    return /* @__PURE__ */ e(w, { children: o.map((c, l) => /* @__PURE__ */ e(
+      M,
+      {
+        data: {
+          ...n,
+          items: c,
+          itemsPerRow: g,
+          alignment: s
+        },
+        events: d,
+        className: i,
+        colorPalette: m,
+        colorSource: u,
+        customColor: p
+      },
+      `content-grid-chunk-${l}`
+    )) });
+  }
+  const b = E(r.length, v), C = {
+    left: "tui-align-start",
+    center: "tui-align-center",
+    right: "tui-align-end"
+  }[s] || "tui-align-start", I = (o, c) => {
+    const { image: l, content: R } = o;
+    return /* @__PURE__ */ x("div", { className: a.item, children: [
+      l && /* @__PURE__ */ e("div", { className: a.imageContainer, children: /* @__PURE__ */ e(A, { data: l }) }),
+      /* @__PURE__ */ e(
+        B,
+        {
+          data: {
+            ...R,
+            contentAlignment: s
+          },
+          className: a.contentContainer
+        }
+      )
+    ] }, `content-grid-item-${c}`);
+  }, N = [
+    a.contentGrid,
+    a[b],
+    C,
+    i
+  ].filter(Boolean).join(" ");
+  return r.length === 0 ? null : /* @__PURE__ */ e(
+    j,
+    {
+      "data-tui-composition": "base",
+      data: { as: "div" },
+      colorPalette: m,
+      colorSource: u,
+      customColor: p,
+      className: N,
+      style: y,
+      children: /* @__PURE__ */ e("div", { className: a.contentContainer, children: r.map((o, c) => I(o, c)) })
+    }
+  );
+};
+export {
+  M as default
+};
+//# sourceMappingURL=ContentGrid.js.map

package/dist/esm/ui/compositions/ContentGrid/ContentGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentGrid.js","sources":["../../../../../src/ui/compositions/ContentGrid/ContentGrid.tsx"],"sourcesContent":["import type { ContentGridItem, ContentGridModel } from \"@tramo-digital/types\";\nimport React from \"react\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport Image from \"../../primitives/Image/Image\";\nimport Content from \"../../patterns/Content/Content\";\nimport styles from \"./ContentGrid.module.css\";\n\nconst DEFAULT_ITEMS_PER_ROW = 3;\n\n/**\n * Determines the layout based on item count\n */\nconst getLayout = (itemCount: number, specifiedLayout?: string): string => {\n  if (specifiedLayout) return specifiedLayout;\n  if (itemCount === 1) return \"single\";\n\n  return itemCount % 2 === 0 ? \"evens\" : \"odds\";\n};\n\n/**\n * Split items into chunks based on itemsPerRow\n */\nconst chunkItems = (\n  items: ContentGridItem[],\n  chunkSize: number,\n): ContentGridItem[][] => {\n  const chunks: ContentGridItem[][] = [];\n  for (let i = 0; i < items.length; i += chunkSize) {\n    chunks.push(items.slice(i, i + chunkSize));\n  }\n  return chunks;\n};\n\n/**\n * ContentGrid composition - Renders a 1-row grid that adjusts items' layout based on count.\n *\n * - 1 item: Renders with image and content as 2 columns (image left, content right) - unchanged across breakpoints\n * - Multiple items (2-3): Each item has image on top and content below, sharing equal space in row\n * - Recursively splits items into rows based on itemsPerRow (1, 2, or 3)\n */\nconst ContentGrid: React.FC<ContentGridModel> = ({\n  data,\n  tokens,\n  events,\n  className,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n\n  const _fingerprint = \"f527c99f8602466c95593faf2e525011\";\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      \"--content-grid-background\": tokens.color.background.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--content-grid-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      \"--content-grid-gap\": tokens.spacing.gap.default,\n    }),\n    ...(tokens?.spacing?.marginBottom && {\n      \"--content-grid-margin-bottom\": tokens.spacing.marginBottom.default,\n    }),\n    ...(tokens?.dimension?.minWidth && {\n      \"--content-grid-item-min-width\": tokens.dimension.minWidth.default,\n    }),\n    ...(tokens?.effect?.opacity && {\n      \"--content-grid-overlay-opacity\": tokens.effect.opacity.default,\n    }),\n  };\n\n  const {\n    items = [],\n    itemsPerRow = DEFAULT_ITEMS_PER_ROW,\n    layout: specifiedLayout,\n    alignment = \"left\",\n  } = data;\n  const validItemsPerRow = [1, 2, 3].includes(itemsPerRow)\n    ? itemsPerRow\n    : DEFAULT_ITEMS_PER_ROW;\n\n  if (items.length > validItemsPerRow) {\n    const chunks = chunkItems(items, validItemsPerRow);\n    return (\n      <>\n        {chunks.map((chunk, chunkIndex) => (\n          <ContentGrid\n            key={`content-grid-chunk-${chunkIndex}`}\n            data={{\n              ...data,\n              items: chunk,\n              itemsPerRow: validItemsPerRow,\n              alignment,\n            }}\n            events={events}\n            className={className}\n            colorPalette={colorPalette}\n            colorSource={colorSource}\n            customColor={customColor}\n          />\n        ))}\n      </>\n    );\n  }\n\n  const layout = getLayout(items.length, specifiedLayout);\n\n  // Map alignment to flex alignment utility classes\n  const alignmentMap: Record<string, string> = {\n    left: \"tui-align-start\",\n    center: \"tui-align-center\",\n    right: \"tui-align-end\",\n  };\n  const flexAlignmentClass = alignmentMap[alignment] || \"tui-align-start\";\n\n  const renderItem = (\n    item: ContentGridItem,\n    index: number,\n  ): React.ReactNode => {\n    const { image, content } = item;\n\n    return (\n      <div key={`content-grid-item-${index}`} className={styles.item}>\n        {image && (\n          <div className={styles.imageContainer}>\n            <Image data={image} />\n          </div>\n        )}\n        <Content\n          data={{\n            ...content,\n            contentAlignment: alignment,\n          }}\n          className={styles.contentContainer}\n        />\n      </div>\n    );\n  };\n\n  const rootClassName = [\n    styles.contentGrid,\n    styles[layout as keyof typeof styles],\n    flexAlignmentClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  if (items.length === 0) return null;\n\n  return (\n    <Frame\n      data-tui-composition=\"base\"\n      data={{ as: \"div\" }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={rootClassName}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <div className={styles.contentContainer}>\n        {items.map((item, index) => renderItem(item, index))}\n      </div>\n    </Frame>\n  );\n};\n\nexport default ContentGrid;\n"],"names":["DEFAULT_ITEMS_PER_ROW","getLayout","itemCount","specifiedLayout","chunkItems","items","chunkSize","chunks","ContentGrid","data","tokens","events","className","colorPalette","colorSource","customColor","tokenStyles","itemsPerRow","alignment","validItemsPerRow","jsx","Fragment","chunk","chunkIndex","layout","flexAlignmentClass","renderItem","item","index","image","content","jsxs","styles","Image","Content","rootClassName","Frame"],"mappings":"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"}

package/dist/esm/ui/compositions/ContentGrid/ContentGrid.module.css.js

@@ -0,0 +1,24 @@
+const n = "mpgr6JHp", t = "YHPRHiWM", o = "_9BHRkDYN", e = "DmYnmHu6", s = "_4fKTc5L7", c = "ywhWs1Yb", a = "E-jd8QIU", i = "vVvcj911", r = "Wpw9QuS0", d = {
+  contentGrid: n,
+  hasBackground: t,
+  imageContainer: o,
+  overlay: e,
+  contentContainer: s,
+  item: c,
+  single: a,
+  evens: i,
+  odds: r
+};
+export {
+  s as contentContainer,
+  n as contentGrid,
+  d as default,
+  i as evens,
+  t as hasBackground,
+  o as imageContainer,
+  c as item,
+  r as odds,
+  e as overlay,
+  a as single
+};
+//# sourceMappingURL=ContentGrid.module.css.js.map

package/dist/esm/ui/compositions/ContentGrid/ContentGrid.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentGrid.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/esm/ui/compositions/ContentGrid/index.js

@@ -0,0 +1,5 @@
+import o from "./ContentGrid.js";
+export {
+  o as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/compositions/ContentGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/ui/compositions/Faq/Faq.js

@@ -0,0 +1,102 @@
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import g from "../../primitives/Frame/Frame.js";
+import u from "../../patterns/Content/Content.js";
+import b from "../Accordion/Accordion.js";
+import n from "./Faq.module.css.js";
+import h from "../../layout/Stack/Stack.js";
+const G = ({
+  className: c,
+  data: e,
+  tokens: t,
+  events: o,
+  colorPalette: l,
+  colorSource: d,
+  customColor: r
+}) => {
+  if (!e) return null;
+  const f = {
+    ...t?.color?.background && {
+      "--faq-surface-color": t.color.background.default
+    },
+    ...t?.border?.borderRadius && {
+      "--faq-border-radius": t.border?.borderRadius.default
+    },
+    ...t?.spacing?.padding && {
+      "--faq-padding": t.spacing?.padding.default
+    },
+    ...t?.dimension?.leftContentMinWidth && {
+      "--faq-content-left-min-width": t.dimension.leftContentMinWidth.default
+    },
+    ...t?.dimension?.rightContentMinWidth && {
+      "--faq-content-right-min-width": t.dimension.rightContentMinWidth.default
+    },
+    ...t?.spacing?.gap && { "--faq-gap": t.spacing?.gap.default }
+  }, { content: s, accordionItems: i } = e || {}, p = [n.faq, c ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
+    g,
+    {
+      "data-tui-composition": "base",
+      data: { as: "div" },
+      colorPalette: l,
+      colorSource: d,
+      customColor: r,
+      className: p,
+      style: f,
+      children: /* @__PURE__ */ m(
+        h,
+        {
+          data: { direction: "row", wrap: "wrap" },
+          className: n.faqContent,
+          children: [
+            /* @__PURE__ */ a("div", { className: n.leftContentPanel, children: /* @__PURE__ */ a(
+              u,
+              {
+                data: {
+                  ...s,
+                  contentAlignment: "left"
+                },
+                tokens: {
+                  spacing: {
+                    titleGap: {
+                      default: "var(--composition-faq-default-spacing-textblock-headings)"
+                    },
+                    contentGap: {
+                      default: "var(--composition-faq-default-spacing-contentblock-ctablock)"
+                    },
+                    containerGap: {
+                      default: "var(--composition-faq-default-spacing-contentblock-logo-icon-textblock)"
+                    },
+                    textGap: {
+                      default: "var(--composition-faq-default-spacing-textblock-eyebrow-headings-body)"
+                    },
+                    ctaGap: {
+                      default: "var(--composition-faq-default-spacing-ctablock-buttons-textlink)"
+                    },
+                    textlinksGap: {
+                      default: "var(--composition-faq-default-spacing-textlinks)"
+                    }
+                  }
+                },
+                events: {
+                  onButtonClick: o?.onButtonClick,
+                  onLinkClick: o?.onLinkClick
+                }
+              }
+            ) }),
+            /* @__PURE__ */ a("div", { className: n.rightContentPanel, children: i && i.length > 0 && /* @__PURE__ */ a(
+              b,
+              {
+                data: { items: i },
+                events: { onToggle: o?.onAccordionToggle }
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  G as default
+};
+//# sourceMappingURL=Faq.js.map

package/dist/esm/ui/compositions/Faq/Faq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Faq.js","sources":["../../../../../src/ui/compositions/Faq/Faq.tsx"],"sourcesContent":["import type { FaqModel } from '@tramo-digital/types';\nimport Frame from '../../primitives/Frame/Frame';\nimport Content from '../../patterns/Content/Content';\nimport Accordion from '../Accordion/Accordion';\nimport styles from './Faq.module.css';\nimport { ReactNode } from 'react';\nimport Stack from '../../layout/Stack';\n\nexport type FaqProps = FaqModel;\n\nconst Faq = ({\n  className,\n  data,\n  tokens,\n  events,\n  colorPalette,\n  colorSource,\n  customColor,\n}: FaqProps): ReactNode => {\n  if (!data) return null;\n  const _fingerprint = '1912bc114f70278b6a520c20748366ec';\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      '--faq-surface-color': tokens.color.background.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      '--faq-border-radius': tokens.border?.borderRadius.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      '--faq-padding': tokens.spacing?.padding.default,\n    }),\n    ...(tokens?.dimension?.leftContentMinWidth && {\n      '--faq-content-left-min-width':\n        tokens.dimension.leftContentMinWidth.default,\n    }),\n    ...(tokens?.dimension?.rightContentMinWidth && {\n      '--faq-content-right-min-width':\n        tokens.dimension.rightContentMinWidth.default,\n    }),\n    ...(tokens?.spacing?.gap && { '--faq-gap': tokens.spacing?.gap.default }),\n  };\n\n  const { content, accordionItems } = data || {};\n\n  const faqClassName = [styles.faq, className ?? ''].filter(Boolean).join(' ');\n\n  return (\n    <Frame\n      data-tui-composition=\"base\"\n      data={{ as: 'div' }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={faqClassName}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <Stack\n        data={{ direction: 'row', wrap: 'wrap' }}\n        className={styles.faqContent}\n      >\n        <div className={styles.leftContentPanel}>\n          <Content\n            data={{\n              ...content,\n              contentAlignment: 'left',\n            }}\n            tokens={{\n              spacing: {\n                titleGap: {\n                  default:\n                    'var(--composition-faq-default-spacing-textblock-headings)',\n                },\n                contentGap: {\n                  default:\n                    'var(--composition-faq-default-spacing-contentblock-ctablock)',\n                },\n                containerGap: {\n                  default:\n                    'var(--composition-faq-default-spacing-contentblock-logo-icon-textblock)',\n                },\n                textGap: {\n                  default:\n                    'var(--composition-faq-default-spacing-textblock-eyebrow-headings-body)',\n                },\n                ctaGap: {\n                  default:\n                    'var(--composition-faq-default-spacing-ctablock-buttons-textlink)',\n                },\n                textlinksGap: {\n                  default: 'var(--composition-faq-default-spacing-textlinks)',\n                },\n              },\n            }}\n            events={{\n              onButtonClick: events?.onButtonClick,\n              onLinkClick: events?.onLinkClick,\n            }}\n          />\n        </div>\n        <div className={styles.rightContentPanel}>\n          {accordionItems && accordionItems.length > 0 && (\n            <Accordion\n              data={{ items: accordionItems }}\n              events={{ onToggle: events?.onAccordionToggle }}\n            />\n          )}\n        </div>\n      </Stack>\n    </Frame>\n  );\n};\n\nexport default Faq;\n"],"names":["Faq","className","data","tokens","events","colorPalette","colorSource","customColor","tokenStyles","content","accordionItems","faqClassName","styles","jsx","Frame","jsxs","Stack","Content","Accordion"],"mappings":";;;;;;AAUA,MAAMA,IAAM,CAAC;AAAA,EACX,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,MAA2B;AACzB,MAAI,CAACL,EAAM,QAAO;AAGlB,QAAMM,IAAc;AAAA,IAClB,GAAIL,GAAQ,OAAO,cAAc;AAAA,MAC/B,uBAAuBA,EAAO,MAAM,WAAW;AAAA,IAAA;AAAA,IAEjD,GAAIA,GAAQ,QAAQ,gBAAgB;AAAA,MAClC,uBAAuBA,EAAO,QAAQ,aAAa;AAAA,IAAA;AAAA,IAErD,GAAIA,GAAQ,SAAS,WAAW;AAAA,MAC9B,iBAAiBA,EAAO,SAAS,QAAQ;AAAA,IAAA;AAAA,IAE3C,GAAIA,GAAQ,WAAW,uBAAuB;AAAA,MAC5C,gCACEA,EAAO,UAAU,oBAAoB;AAAA,IAAA;AAAA,IAEzC,GAAIA,GAAQ,WAAW,wBAAwB;AAAA,MAC7C,iCACEA,EAAO,UAAU,qBAAqB;AAAA,IAAA;AAAA,IAE1C,GAAIA,GAAQ,SAAS,OAAO,EAAE,aAAaA,EAAO,SAAS,IAAI,QAAA;AAAA,EAAQ,GAGnE,EAAE,SAAAM,GAAS,gBAAAC,EAAA,IAAmBR,KAAQ,CAAA,GAEtCS,IAAe,CAACC,EAAO,KAAKX,KAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE3E,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,MAAM,EAAE,IAAI,MAAA;AAAA,MACZ,cAAAT;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAWI;AAAA,MACX,OAAOH;AAAA,MAEP,UAAA,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAM,EAAE,WAAW,OAAO,MAAM,OAAA;AAAA,UAChC,WAAWJ,EAAO;AAAA,UAElB,UAAA;AAAA,YAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,kBACrB,UAAA,gBAAAC;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,kBACJ,GAAGR;AAAA,kBACH,kBAAkB;AAAA,gBAAA;AAAA,gBAEpB,QAAQ;AAAA,kBACN,SAAS;AAAA,oBACP,UAAU;AAAA,sBACR,SACE;AAAA,oBAAA;AAAA,oBAEJ,YAAY;AAAA,sBACV,SACE;AAAA,oBAAA;AAAA,oBAEJ,cAAc;AAAA,sBACZ,SACE;AAAA,oBAAA;AAAA,oBAEJ,SAAS;AAAA,sBACP,SACE;AAAA,oBAAA;AAAA,oBAEJ,QAAQ;AAAA,sBACN,SACE;AAAA,oBAAA;AAAA,oBAEJ,cAAc;AAAA,sBACZ,SAAS;AAAA,oBAAA;AAAA,kBACX;AAAA,gBACF;AAAA,gBAEF,QAAQ;AAAA,kBACN,eAAeL,GAAQ;AAAA,kBACvB,aAAaA,GAAQ;AAAA,gBAAA;AAAA,cACvB;AAAA,YAAA,GAEJ;AAAA,YACA,gBAAAS,EAAC,SAAI,WAAWD,EAAO,mBACpB,UAAAF,KAAkBA,EAAe,SAAS,KACzC,gBAAAG;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,MAAM,EAAE,OAAOR,EAAA;AAAA,gBACf,QAAQ,EAAE,UAAUN,GAAQ,kBAAA;AAAA,cAAkB;AAAA,YAAA,EAChD,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/esm/ui/compositions/Faq/Faq.module.css.js

@@ -0,0 +1,14 @@
+const t = "XuFwbfzi", n = "RK2T24Lb", e = "iPY4o-w1", o = "RqfP2NKb", a = {
+  faq: t,
+  faqContent: n,
+  leftContentPanel: e,
+  rightContentPanel: o
+};
+export {
+  a as default,
+  t as faq,
+  n as faqContent,
+  e as leftContentPanel,
+  o as rightContentPanel
+};
+//# sourceMappingURL=Faq.module.css.js.map

package/dist/esm/ui/compositions/Faq/Faq.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Faq.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/ui/compositions/Faq/index.js

@@ -0,0 +1,5 @@
+import o from "./Faq.js";
+export {
+  o as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/compositions/Faq/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}