@tramo-digital/react-ui 0.0.0-alpha

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../src/ui/compositions/Header/Header.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { HeaderModel } from \"@tramo-digital/types\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport Logo from \"../../primitives/Logo/Logo\";\nimport Button from \"../../primitives/Button/Button\";\nimport Link from \"../../primitives/Link/Link\";\nimport StripBanner from \"../../patterns/StripBanner/StripBanner\";\nimport Drawer from \"../../layout/Drawer/Drawer\";\nimport LinkGroup from \"../LinkGroup/LinkGroup\";\nimport styles from \"./Header.module.css\";\n\nexport interface HeaderProps extends HeaderModel {\n  children?: React.ReactNode;\n}\n\nconst Header: React.FC<HeaderProps> = ({\n  data,\n  events,\n  tokens,\n  className,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  const [internalDrawerOpen, setInternalDrawerOpen] = useState(false);\n  if (!data) return null;\n  const _fingerprint = \"5404b8f9c5f14fe84baccebd381544f6\";\n\n  const tokenStyles = {\n    ...(tokens?.color?.surface && {\n      \"--header-surface\": tokens.color.surface.default,\n    }),\n    ...(tokens?.color?.border && {\n      \"--header-border\": tokens.color.border.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--header-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      \"--header-gap\": tokens.spacing.gap.default,\n    }),\n    ...(tokens?.sizing?.height && {\n      \"--header-height\":\n        typeof tokens.sizing.height.default === \"number\"\n          ? `${tokens.sizing.height.default}px`\n          : tokens.sizing.height.default,\n    }),\n    ...(tokens?.dimension?.height && {\n      \"--header-height\":\n        typeof tokens.dimension.height.default === \"number\"\n          ? `${tokens.dimension.height.default}px`\n          : tokens.dimension.height.default,\n    }),\n    ...(tokens?.sizing?.contentMaxWidth && {\n      \"--header-content-max-width\": tokens.sizing.contentMaxWidth.default,\n    }),\n    ...((tokens?.dimension?.maxWidth || tokens?.dimension?.contentMaxWidth) && {\n      \"--header-content-max-width\": (tokens?.dimension?.maxWidth ||\n        tokens?.dimension?.contentMaxWidth)!.default,\n    }),\n  };\n\n  const {\n    logo,\n    navLinks = [],\n    linkGroups = [],\n    buttons = [],\n    announcement,\n    position = \"static\",\n    mobileDrawerOpen,\n    layout = \"default\",\n    logoPosition = \"left\",\n  } = data;\n  const {\n    onLogoClick,\n    onNavLinkClick,\n    onMobileDrawerToggle,\n    onAnnouncementClose,\n  } = events || {};\n\n  const isDrawerOpen =\n    mobileDrawerOpen !== undefined ? mobileDrawerOpen : internalDrawerOpen;\n\n  const handleDrawerToggle = () => {\n    const nextState = !isDrawerOpen;\n    if (mobileDrawerOpen === undefined) {\n      setInternalDrawerOpen(nextState);\n    }\n    onMobileDrawerToggle?.(nextState);\n  };\n\n  const headerClassName = [\n    styles.tuiHeader,\n    position !== \"static\" ? styles[position] : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const mainNavClassName = [\n    styles.mainNav,\n    styles[`layout-${layout}`],\n    styles[`logo-${logoPosition}`],\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const isSplit = layout === \"split\" && logoPosition === \"center\";\n\n  // ─── Desktop nav content ──────────────────────────────────────────────────\n  // CSS media queries control visibility. No environment checks here.\n  const renderDesktopNav = (\n    items: typeof navLinks,\n    groups: typeof linkGroups,\n  ) => {\n    if (groups && groups.length > 0) {\n      return (\n        <div className={styles.linkGroupsWrapper}>\n          {groups.map((group, idx) => (\n            <LinkGroup\n              key={idx}\n              data={group.data}\n              events={group.events}\n              tokens={tokens?.elements?.linkGroup || group.tokens}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <ul className={styles.navLinks}>\n        {items.map((link, idx) => (\n          <li\n            key={idx}\n            className={`${styles.navItem} ${link.active ? styles.active : \"\"}`}\n          >\n            <Link\n              data={{ text: link.text, href: link.href, size: \"md\" }}\n              events={{ onClick: () => onNavLinkClick?.(link, idx) }}\n              tokens={tokens?.elements?.navLink}\n              className={styles.navLink}\n            />\n            {link.children && link.children.length > 0 && (\n              <ul className={styles.dropdown}>\n                {link.children.map((child, cIdx) => (\n                  <li key={cIdx} className={styles.dropdownItem}>\n                    <Link\n                      data={{ text: child.text, href: child.href, size: \"sm\" }}\n                      className={styles.dropdownLink}\n                    />\n                  </li>\n                ))}\n              </ul>\n            )}\n          </li>\n        ))}\n      </ul>\n    );\n  };\n\n  // ─── Mobile drawer nav content ────────────────────────────────────────────\n  // Always vertical stacking; links close the drawer on click.\n  const renderMobileNav = (\n    items: typeof navLinks,\n    groups: typeof linkGroups,\n  ) => {\n    if (groups && groups.length > 0) {\n      return (\n        <div className={styles.mobileLinkGroupsWrapper}>\n          {groups.map((group, idx) => (\n            <LinkGroup\n              key={idx}\n              data={{ ...group.data, stacking: \"vertical\" }}\n              events={group.events}\n              tokens={tokens?.elements?.linkGroup || group.tokens}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <ul className={styles.mobileNavLinks}>\n        {items.map((link, idx) => (\n          <li\n            key={idx}\n            className={`${styles.mobileNavItem} ${link.active ? styles.active : \"\"}`}\n          >\n            <Link\n              data={{ text: link.text, href: link.href, size: \"lg\" }}\n              events={{\n                onClick: () => {\n                  handleDrawerToggle();\n                  onNavLinkClick?.(link, idx);\n                },\n              }}\n              tokens={tokens?.elements?.navLink}\n              className={styles.mobileNavLink}\n            />\n            {link.children && link.children.length > 0 && (\n              <ul className={styles.mobileSubLinks}>\n                {link.children.map((child, cIdx) => (\n                  <li key={cIdx} className={styles.mobileSubItem}>\n                    <Link\n                      data={{ text: child.text, href: child.href, size: \"md\" }}\n                      events={{ onClick: handleDrawerToggle }}\n                      className={styles.mobileSubLink}\n                    />\n                  </li>\n                ))}\n              </ul>\n            )}\n          </li>\n        ))}\n      </ul>\n    );\n  };\n\n  // ─── Logo ─────────────────────────────────────────────────────────────────\n  const renderLogo = () => (\n    <div className={styles.logoContainer} onClick={onLogoClick}>\n      {logo ? (\n        <Logo data={logo} tokens={tokens?.elements?.logo} />\n      ) : (\n        <span className={styles.brandFallback}>tramo.digital</span>\n      )}\n    </div>\n  );\n\n  // ─── Utilities (CTA buttons + hamburger) ──────────────────────────────────\n  const renderUtilities = () => (\n    <div className={styles.utilities}>\n      {buttons && buttons.length > 0 && (\n        <div className={styles.actions}>\n          {buttons.map((btn, idx) => (\n            <Button\n              key={idx}\n              data={btn.data}\n              events={btn.events}\n              tokens={tokens?.elements?.button}\n            />\n          ))}\n        </div>\n      )}\n      <button\n        type=\"button\"\n        className={styles.hamburger}\n        aria-label={isDrawerOpen ? \"Close menu\" : \"Open menu\"}\n        aria-expanded={isDrawerOpen}\n        onClick={handleDrawerToggle}\n      >\n        <span\n          className={`${styles.bar} ${isDrawerOpen ? styles.barOpenTop : \"\"}`}\n        />\n        <span\n          className={`${styles.bar} ${isDrawerOpen ? styles.barOpenMid : \"\"}`}\n        />\n        <span\n          className={`${styles.bar} ${isDrawerOpen ? styles.barOpenBot : \"\"}`}\n        />\n      </button>\n    </div>\n  );\n\n  return (\n    <Frame\n      data-tui-composition=\"base\"\n      data={{ as: \"header\" }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={headerClassName}\n      style={tokenStyles as React.CSSProperties}\n    >\n      {announcement && (\n        <div className={styles.announcementWrapper}>\n          <StripBanner\n            data={announcement}\n            events={{ onClose: onAnnouncementClose }}\n            tokens={tokens?.elements?.announcement}\n          />\n        </div>\n      )}\n\n      {/* ── Desktop / tablet nav bar (CSS hides/shows at breakpoint) ── */}\n      <div className={mainNavClassName}>\n        {isSplit ? (\n          <>\n            <nav\n              className={`${styles.desktopNav} ${styles.desktopNavLeft}`}\n              aria-label=\"Primary navigation left\"\n            >\n              {renderDesktopNav(\n                navLinks.slice(0, Math.ceil(navLinks.length / 2)),\n                linkGroups.slice(0, Math.ceil(linkGroups.length / 2)),\n              )}\n            </nav>\n            {renderLogo()}\n            <div className={styles.splitRightContainer}>\n              <nav\n                className={`${styles.desktopNav} ${styles.desktopNavRight}`}\n                aria-label=\"Primary navigation right\"\n              >\n                {renderDesktopNav(\n                  navLinks.slice(Math.ceil(navLinks.length / 2)),\n                  linkGroups.slice(Math.ceil(linkGroups.length / 2)),\n                )}\n              </nav>\n              {renderUtilities()}\n            </div>\n          </>\n        ) : (\n          <>\n            {renderLogo()}\n            <nav className={styles.desktopNav} aria-label=\"Primary navigation\">\n              {renderDesktopNav(navLinks, linkGroups)}\n            </nav>\n            {renderUtilities()}\n          </>\n        )}\n      </div>\n\n      {/* ── Mobile off-canvas drawer (CSS hides trigger at ≥768px) ── */}\n      <Drawer\n        data={{\n          isOpen: isDrawerOpen,\n          placement: \"right\",\n          size: \"md\",\n          title: \"Menu\",\n          showCloseButton: true,\n          closeOnBackdropClick: true,\n          closeOnEsc: true,\n          lockScroll: true,\n        }}\n        events={{ onClose: handleDrawerToggle }}\n        tokens={tokens?.elements?.drawer}\n      >\n        <nav\n          className={styles.mobileNav}\n          aria-label=\"Mobile primary navigation\"\n        >\n          {renderMobileNav(navLinks, linkGroups)}\n          {buttons && buttons.length > 0 && (\n            <div className={styles.mobileActions}>\n              {buttons.map((btn, idx) => (\n                <Button\n                  key={idx}\n                  data={btn.data}\n                  events={btn.events}\n                  tokens={tokens?.elements?.button}\n                />\n              ))}\n            </div>\n          )}\n        </nav>\n      </Drawer>\n    </Frame>\n  );\n};\n\nexport default Header;\n"],"names":["Header","data","events","tokens","className","colorPalette","colorSource","customColor","internalDrawerOpen","setInternalDrawerOpen","useState","tokenStyles","logo","navLinks","linkGroups","buttons","announcement","position","mobileDrawerOpen","layout","logoPosition","onLogoClick","onNavLinkClick","onMobileDrawerToggle","onAnnouncementClose","isDrawerOpen","handleDrawerToggle","nextState","headerClassName","styles","mainNavClassName","isSplit","renderDesktopNav","items","groups","jsx","group","idx","LinkGroup","link","jsxs","Link","child","cIdx","renderMobileNav","renderLogo","Logo","renderUtilities","btn","Button","Frame","StripBanner","Fragment","Drawer"],"mappings":"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"}

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

@@ -0,0 +1,103 @@
+const o = "Slm6nPcX", t = "ZkbppgSw", n = "RWeq8RD9", e = "N9iQKyR5", a = "WJhdhV22", i = "NPZqXcVC", s = "oxV3H609", l = "_3niKAGm9", c = "NwwMaatD", r = "_1vj9rKGS", p = "zyeZw4AB", m = "_9lrH1zC0", b = "vEKhkLe7", u = "OmTyfkXN", d = "rKP7j3lI", k = "B50-3oE-", v = "_9e3-vQoD", y = "fPdiUCaW", L = "pyQ4WRgm", g = "aRktPetH", N = "_9L31NrAd", f = "-mgGH9D7", h = "fLde24A5", R = "_5zej8ttl", S = "wbro1hmP", _ = "_2hTjRcmr", w = "-F-06c70", C = "Jf0VoT21", W = "_9Lm-kSDa", I = "_5b4HxtWf", A = "RgpHW-v0", H = "s8Zh7a9N", x = "E3YyR9Ab", D = "AgyS8tto", K = "xlZDHbik", E = "-oqeFKLS", G = "Z7zy4-fI", O = "_9oh0l011", P = "lcltJEU2", T = "VFLxpxVw", V = "_8xiTPBAJ", j = "IjRAUbkn", B = "_6fkv20of", Z = "_6WR2-8RW", z = {
+  tuiHeader: o,
+  sticky: t,
+  fixed: n,
+  announcementWrapper: e,
+  mainNav: a,
+  logoContainer: i,
+  "layout-spaced": "oxV3H609",
+  layoutSpaced: s,
+  "layout-default": "_3niKAGm9",
+  layoutDefault: l,
+  "logo-left": "NwwMaatD",
+  logoLeft: c,
+  desktopNav: r,
+  utilities: p,
+  "layout-centered": "_9lrH1zC0",
+  layoutCentered: m,
+  "layout-even": "vEKhkLe7",
+  layoutEven: b,
+  "layout-compact": "OmTyfkXN",
+  layoutCompact: u,
+  "layout-split": "rKP7j3lI",
+  layoutSplit: d,
+  "logo-right": "B50-3oE-",
+  logoRight: k,
+  "logo-center": "_9e3-vQoD",
+  logoCenter: v,
+  desktopNavLeft: y,
+  splitRightContainer: L,
+  desktopNavRight: g,
+  linkGroupsWrapper: N,
+  mobileLinkGroupsWrapper: f,
+  brandFallback: h,
+  navLinks: R,
+  navItem: S,
+  navLink: _,
+  active: w,
+  dropdown: C,
+  dropdownItem: W,
+  dropdownLink: I,
+  actions: A,
+  hamburger: H,
+  bar: x,
+  barOpenTop: D,
+  barOpenMid: K,
+  barOpenBot: E,
+  mobileNav: G,
+  mobileNavLinks: O,
+  mobileNavItem: P,
+  mobileNavLink: T,
+  mobileSubLinks: V,
+  mobileSubItem: j,
+  mobileSubLink: B,
+  mobileActions: Z
+};
+export {
+  A as actions,
+  w as active,
+  e as announcementWrapper,
+  x as bar,
+  E as barOpenBot,
+  K as barOpenMid,
+  D as barOpenTop,
+  h as brandFallback,
+  z as default,
+  r as desktopNav,
+  y as desktopNavLeft,
+  g as desktopNavRight,
+  C as dropdown,
+  W as dropdownItem,
+  I as dropdownLink,
+  n as fixed,
+  H as hamburger,
+  m as layoutCentered,
+  u as layoutCompact,
+  l as layoutDefault,
+  b as layoutEven,
+  s as layoutSpaced,
+  d as layoutSplit,
+  N as linkGroupsWrapper,
+  v as logoCenter,
+  i as logoContainer,
+  c as logoLeft,
+  k as logoRight,
+  a as mainNav,
+  Z as mobileActions,
+  f as mobileLinkGroupsWrapper,
+  G as mobileNav,
+  P as mobileNavItem,
+  T as mobileNavLink,
+  O as mobileNavLinks,
+  j as mobileSubItem,
+  B as mobileSubLink,
+  V as mobileSubLinks,
+  S as navItem,
+  _ as navLink,
+  R as navLinks,
+  L as splitRightContainer,
+  t as sticky,
+  o as tuiHeader,
+  p as utilities
+};
+//# sourceMappingURL=Header.module.css.js.map

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

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

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

@@ -0,0 +1,128 @@
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import N from "../../primitives/Frame/Frame.js";
+import j from "../../primitives/InterfaceIcon/InterfaceIcon.js";
+import C from "../../primitives/Overlay/Overlay.js";
+import I from "../../primitives/Video/Video.js";
+import P from "../../patterns/Content/Content.js";
+import r from "./Hero.module.css.js";
+import V from "../../primitives/Image/Image.js";
+const O = ({
+  className: u,
+  data: d,
+  tokens: e,
+  events: m,
+  colorPalette: p,
+  colorSource: g,
+  customColor: f
+}) => {
+  if (!d) return null;
+  const y = {
+    ...e?.dimension?.minHeight && {
+      "--hero-min-height": e.dimension.minHeight.default
+    },
+    ...e?.color?.background && {
+      "--hero-background": e.color.background.default
+    },
+    ...e?.color?.overlay && {
+      "--hero-overlay-color": e.color.overlay.default
+    },
+    ...e?.spacing?.padding && {
+      "--hero-padding": e.spacing.padding.default
+    },
+    ...e?.border?.borderRadius && {
+      "--hero-border-radius": e.border.borderRadius.default
+    },
+    ...e?.effect?.opacity && {
+      "--hero-overlay-opacity": e.effect.opacity.default
+    },
+    ...e?.layout?.mediaPosition && {
+      "--hero-media-position": e.layout.mediaPosition.default
+    }
+  }, h = (o) => o.backgroundType === "video" ? /* @__PURE__ */ i(
+    I,
+    {
+      data: {
+        src: o.src,
+        poster: o.backgroundVideoPoster,
+        alt: o.alt,
+        type: o.backgroundVideoType,
+        autoPlay: !0,
+        loop: !0,
+        muted: !0,
+        playsInline: !0
+      },
+      className: r.backgroundVideo
+    }
+  ) : o.src ? /* @__PURE__ */ i("div", { className: r.imageWrapper, children: /* @__PURE__ */ i(
+    V,
+    {
+      data: {
+        src: o.src,
+        alt: o.alt,
+        loading: "eager",
+        objectFit: "cover",
+        fluid: !0
+      },
+      tokens: {
+        border: {
+          borderRadius: {
+            default: "0px"
+          }
+        }
+      }
+    }
+  ) }) : null, {
+    content: a,
+    media: t = {
+      src: void 0,
+      alt: void 0,
+      backgroundType: "image",
+      backgroundVideoSrc: void 0,
+      backgroundVideoPoster: void 0,
+      backgroundVideoType: "video/mp4"
+    },
+    align: c = "center",
+    justify: l = "center",
+    overlay: b
+  } = d || {}, s = (t.backgroundType === "video", t.src), v = [
+    r.tuiHero,
+    a?.contentAlignment ? `${a.contentAlignment}` : "",
+    c ? r[`align-${c}`] : "",
+    l ? r[`justify-${l}`] : "",
+    s ? "" : r.heroNoImage,
+    u ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    N,
+    {
+      "data-tui-composition": "base",
+      data: { as: "div" },
+      colorPalette: p,
+      colorSource: g,
+      customColor: f,
+      className: v,
+      style: y,
+      children: [
+        s && /* @__PURE__ */ n("div", { className: r.mediaContainer, children: [
+          /* @__PURE__ */ i(C, { data: { ...b, isOpen: !0 } }),
+          h(t)
+        ] }),
+        /* @__PURE__ */ n("div", { className: r.heroContent, children: [
+          /* @__PURE__ */ i(
+            P,
+            {
+              data: { ...a },
+              events: m,
+              className: r.leftContentPanel
+            }
+          ),
+          a?.icons && a.icons.length > 0 && /* @__PURE__ */ i("div", { className: r.rightContentPanel, children: /* @__PURE__ */ i("div", { className: r.interactiveIconsContainer, children: /* @__PURE__ */ i("div", { className: r.objectIconsWrapper, children: a.icons.map((o) => /* @__PURE__ */ i(j, { data: o }, o.type)) }) }) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  O as default
+};
+//# sourceMappingURL=Hero.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sources":["../../../../../src/ui/compositions/Hero/Hero.tsx"],"sourcesContent":["import type { HeroModel, IconData } from '@tramo-digital/types';\nimport Frame from '../../primitives/Frame/Frame';\nimport InterfaceIcon from '../../primitives/InterfaceIcon/InterfaceIcon';\nimport Overlay from '../../primitives/Overlay/Overlay';\nimport Video from '../../primitives/Video/Video';\nimport Content from '../../patterns/Content/Content';\nimport styles from './Hero.module.css';\nimport Image from '../../primitives/Image';\n\nexport interface HeroProps extends HeroModel {\n  children?: React.ReactNode;\n}\n\nconst Hero: React.FC<HeroProps> = ({\n  className,\n  data,\n  tokens,\n  events,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = '4362ae16c10259c414d558586b9fda40';\n\n  const tokenStyles = {\n    ...(tokens?.dimension?.minHeight && {\n      '--hero-min-height': tokens.dimension.minHeight.default,\n    }),\n    ...(tokens?.color?.background && {\n      '--hero-background': tokens.color.background.default,\n    }),\n    ...(tokens?.color?.overlay && {\n      '--hero-overlay-color': tokens.color.overlay.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      '--hero-padding': tokens.spacing.padding.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      '--hero-border-radius': tokens.border.borderRadius.default,\n    }),\n    ...(tokens?.effect?.opacity && {\n      '--hero-overlay-opacity': tokens.effect.opacity.default,\n    }),\n    ...(tokens?.layout?.mediaPosition && {\n      '--hero-media-position': tokens.layout.mediaPosition.default,\n    }),\n  };\n\n  /**\n   * Renders the appropriate media element based on backgroundType\n   */\n  const renderMedia = (mediaData: typeof media) => {\n    if (mediaData.backgroundType === 'video') {\n      return (\n        <Video\n          data={{\n            src: mediaData.src,\n            poster: mediaData.backgroundVideoPoster,\n            alt: mediaData.alt,\n            type: mediaData.backgroundVideoType,\n            autoPlay: true,\n            loop: true,\n            muted: true,\n            playsInline: true,\n          }}\n          className={styles.backgroundVideo}\n        />\n      );\n    }\n\n    if (mediaData.src) {\n      return (\n        <div className={styles.imageWrapper}>\n          <Image\n            data={{\n              src: mediaData.src,\n              alt: mediaData.alt,\n              loading: 'eager',\n              objectFit: 'cover',\n              fluid: true,\n            }}\n            tokens={{\n              border: {\n                borderRadius: {\n                  default: '0px',\n                },\n              },\n            }}\n          />\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  const {\n    content,\n    media = {\n      src: undefined,\n      alt: undefined,\n      backgroundType: 'image',\n      backgroundVideoSrc: undefined,\n      backgroundVideoPoster: undefined,\n      backgroundVideoType: 'video/mp4',\n    },\n    align = 'center',\n    justify = 'center',\n    overlay,\n  } = data || {};\n\n  const hasMedia = media.backgroundType === 'video' ? media.src : media.src;\n  const heroClassName = [\n    styles.tuiHero,\n    content?.contentAlignment ? `${content.contentAlignment}` : '',\n    align ? styles[`align-${align}`] : '',\n    justify ? styles[`justify-${justify}`] : '',\n    !hasMedia ? styles.heroNoImage : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .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={heroClassName}\n      style={tokenStyles as React.CSSProperties}\n    >\n      {/* Media container (image or video) */}\n      {hasMedia && (\n        <div className={styles.mediaContainer}>\n          {/* Overlay */}\n          <Overlay data={{ ...overlay, isOpen: true }} />\n          {renderMedia(media)}\n        </div>\n      )}\n      {/* Main content */}\n      <div className={styles.heroContent}>\n        <Content\n          data={{ ...content }}\n          events={events}\n          className={styles.leftContentPanel}\n        />\n        {content?.icons && content.icons.length > 0 && (\n          <div className={styles.rightContentPanel}>\n            <div className={styles.interactiveIconsContainer}>\n              <div className={styles.objectIconsWrapper}>\n                {content.icons.map((icon: IconData) => (\n                  <InterfaceIcon key={icon.type} data={icon} />\n                ))}\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </Frame>\n  );\n};\n\nexport default Hero;\n"],"names":["Hero","className","data","tokens","events","colorPalette","colorSource","customColor","tokenStyles","renderMedia","mediaData","jsx","Video","styles","Image","content","media","align","justify","overlay","hasMedia","heroClassName","jsxs","Frame","Overlay","Content","icon","InterfaceIcon"],"mappings":";;;;;;;;AAaA,MAAMA,IAA4B,CAAC;AAAA,EACjC,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACJ,MAAI,CAACL,EAAM,QAAO;AAGlB,QAAMM,IAAc;AAAA,IAClB,GAAIL,GAAQ,WAAW,aAAa;AAAA,MAClC,qBAAqBA,EAAO,UAAU,UAAU;AAAA,IAAA;AAAA,IAElD,GAAIA,GAAQ,OAAO,cAAc;AAAA,MAC/B,qBAAqBA,EAAO,MAAM,WAAW;AAAA,IAAA;AAAA,IAE/C,GAAIA,GAAQ,OAAO,WAAW;AAAA,MAC5B,wBAAwBA,EAAO,MAAM,QAAQ;AAAA,IAAA;AAAA,IAE/C,GAAIA,GAAQ,SAAS,WAAW;AAAA,MAC9B,kBAAkBA,EAAO,QAAQ,QAAQ;AAAA,IAAA;AAAA,IAE3C,GAAIA,GAAQ,QAAQ,gBAAgB;AAAA,MAClC,wBAAwBA,EAAO,OAAO,aAAa;AAAA,IAAA;AAAA,IAErD,GAAIA,GAAQ,QAAQ,WAAW;AAAA,MAC7B,0BAA0BA,EAAO,OAAO,QAAQ;AAAA,IAAA;AAAA,IAElD,GAAIA,GAAQ,QAAQ,iBAAiB;AAAA,MACnC,yBAAyBA,EAAO,OAAO,cAAc;AAAA,IAAA;AAAA,EACvD,GAMIM,IAAc,CAACC,MACfA,EAAU,mBAAmB,UAE7B,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,QACJ,KAAKF,EAAU;AAAA,QACf,QAAQA,EAAU;AAAA,QAClB,KAAKA,EAAU;AAAA,QACf,MAAMA,EAAU;AAAA,QAChB,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,MAAA;AAAA,MAEf,WAAWG,EAAO;AAAA,IAAA;AAAA,EAAA,IAKpBH,EAAU,MAEV,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAO,cACrB,UAAA,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,QACJ,KAAKJ,EAAU;AAAA,QACf,KAAKA,EAAU;AAAA,QACf,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,cAAc;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EAAA,GAEJ,IAIG,MAGH;AAAA,IACJ,SAAAK;AAAA,IACA,OAAAC,IAAQ;AAAA,MACN,KAAK;AAAA,MACL,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,MACpB,uBAAuB;AAAA,MACvB,qBAAqB;AAAA,IAAA;AAAA,IAEvB,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,EAAA,IACEjB,KAAQ,CAAA,GAENkB,KAAWJ,EAAM,mBAAmB,SAAUA,EAAM,MACpDK,IAAgB;AAAA,IACpBR,EAAO;AAAA,IACPE,GAAS,mBAAmB,GAAGA,EAAQ,gBAAgB,KAAK;AAAA,IAC5DE,IAAQJ,EAAO,SAASI,CAAK,EAAE,IAAI;AAAA,IACnCC,IAAUL,EAAO,WAAWK,CAAO,EAAE,IAAI;AAAA,IACxCE,IAAgC,KAArBP,EAAO;AAAA,IACnBZ,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,MAAM,EAAE,IAAI,MAAA;AAAA,MACZ,cAAAlB;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAWc;AAAA,MACX,OAAOb;AAAA,MAGN,UAAA;AAAA,QAAAY,KACC,gBAAAE,EAAC,OAAA,EAAI,WAAWT,EAAO,gBAErB,UAAA;AAAA,UAAA,gBAAAF,EAACa,KAAQ,MAAM,EAAE,GAAGL,GAAS,QAAQ,MAAQ;AAAA,UAC5CV,EAAYO,CAAK;AAAA,QAAA,GACpB;AAAA,QAGF,gBAAAM,EAAC,OAAA,EAAI,WAAWT,EAAO,aACrB,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAACc;AAAA,YAAA;AAAA,cACC,MAAM,EAAE,GAAGV,EAAA;AAAA,cACX,QAAAX;AAAA,cACA,WAAWS,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UAEnBE,GAAS,SAASA,EAAQ,MAAM,SAAS,KACxC,gBAAAJ,EAAC,OAAA,EAAI,WAAWE,EAAO,mBACrB,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,2BACrB,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,oBACpB,UAAAE,EAAQ,MAAM,IAAI,CAACW,MAClB,gBAAAf,EAACgB,GAAA,EAA8B,MAAMD,KAAjBA,EAAK,IAAkB,CAC5C,GACH,GACF,EAAA,CACF;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,50 @@
+const n = "rwpJntwl", t = "ZX6X2-0z", e = "Bm79Saih", o = "_12NGRMl5", r = "d66o4LCF", a = "PEZq5Txn", i = "_14Z7v6SX", s = "PkmweB99", c = "dxAs2F6K", l = "LaydIPBL", g = "HFXkKUAQ", d = "BBJD0raN", h = "CpIwBNrH", C = "r97vqDwH", p = "_57vq-fNX", f = "hwj8cM77", u = "-Ws06qUh", j = "EQhnSomb", y = "wcghML8w", w = {
+  tuiHero: n,
+  heroNoImage: t,
+  mediaContainer: e,
+  imageWrapper: o,
+  videoWrapper: r,
+  backgroundVideo: a,
+  heroContent: i,
+  container: s,
+  interactiveIconsContainer: c,
+  leftContentPanel: l,
+  heroOverlay: g,
+  rightContentPanel: d,
+  objectIconsWrapper: h,
+  "justify-start": "r97vqDwH",
+  justifyStart: C,
+  "justify-center": "_57vq-fNX",
+  justifyCenter: p,
+  "justify-end": "hwj8cM77",
+  justifyEnd: f,
+  "align-start": "-Ws06qUh",
+  alignStart: u,
+  "align-center": "EQhnSomb",
+  alignCenter: j,
+  "align-end": "wcghML8w",
+  alignEnd: y
+};
+export {
+  j as alignCenter,
+  y as alignEnd,
+  u as alignStart,
+  a as backgroundVideo,
+  s as container,
+  w as default,
+  i as heroContent,
+  t as heroNoImage,
+  g as heroOverlay,
+  o as imageWrapper,
+  c as interactiveIconsContainer,
+  p as justifyCenter,
+  f as justifyEnd,
+  C as justifyStart,
+  l as leftContentPanel,
+  e as mediaContainer,
+  h as objectIconsWrapper,
+  d as rightContentPanel,
+  n as tuiHero,
+  r as videoWrapper
+};
+//# sourceMappingURL=Hero.module.css.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import h from "../../primitives/Frame/Frame.js";
+import g from "../../primitives/Image/Image.js";
+import N from "../../patterns/Content/Content.js";
+import a from "./HeroEnhanced.module.css.js";
+const j = ({
+  className: r,
+  data: c,
+  tokens: n,
+  colorPalette: t,
+  colorSource: s,
+  customColor: l
+}) => {
+  if (!c || !c.content) return null;
+  const d = {
+    ...n?.color?.background && {
+      "--hero-enhanced-background": n.color.background.default
+    },
+    ...n?.spacing?.padding && {
+      "--hero-enhanced-padding": n.spacing.padding.default
+    },
+    ...n?.spacing?.gap && {
+      "--hero-enhanced-gap": n.spacing.gap.default
+    }
+  }, { content: m, image: o } = c, p = [a.heroEnhanced, r ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ i(
+    h,
+    {
+      "data-tui-composition": "base",
+      data: { as: "div" },
+      colorPalette: t,
+      colorSource: s,
+      customColor: l,
+      className: p,
+      style: d,
+      children: [
+        /* @__PURE__ */ e("div", { className: a.mainSurfaceColor }),
+        /* @__PURE__ */ e("div", { className: a.spaceBelowContainer }),
+        /* @__PURE__ */ e("div", { className: a.mainContentContainer, children: /* @__PURE__ */ i("div", { className: a.contentContainer, children: [
+          /* @__PURE__ */ e("div", { className: a.leftContentPanel, children: /* @__PURE__ */ e("div", { className: a.content, children: /* @__PURE__ */ e("div", { className: a.topContentContainer, children: /* @__PURE__ */ e(
+            N,
+            {
+              data: { ...m },
+              className: a.contentSpacing
+            }
+          ) }) }) }),
+          /* @__PURE__ */ e("div", { className: a.rightContentPanel, children: o && /* @__PURE__ */ e("div", { className: a.collageGroup, children: /* @__PURE__ */ e("div", { className: a.imageWrapper, children: /* @__PURE__ */ e(g, { data: o }) }) }) })
+        ] }) }),
+        /* @__PURE__ */ e("div", { className: a.spaceAboveContainer })
+      ]
+    }
+  );
+};
+export {
+  j as default
+};
+//# sourceMappingURL=HeroEnhanced.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeroEnhanced.js","sources":["../../../../../src/ui/compositions/HeroEnhanced/HeroEnhanced.tsx"],"sourcesContent":["import type { HeroEnhancedModel } from \"@tramo-digital/types\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport Image from \"../../primitives/Image/Image\";\nimport Content from \"../../patterns/Content/Content\";\nimport styles from \"./HeroEnhanced.module.css\";\n\nexport interface HeroEnhancedProps extends HeroEnhancedModel {\n  children?: React.ReactNode;\n}\n\nconst HeroEnhanced: React.FC<HeroEnhancedProps> = ({\n  className,\n  data,\n  tokens,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data || !data.content) return null;\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      \"--hero-enhanced-background\": tokens.color.background.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--hero-enhanced-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      \"--hero-enhanced-gap\": tokens.spacing.gap.default,\n    }),\n  };\n\n  const { content, image } = data;\n\n  const heroEnhancedClassName = [styles.heroEnhanced, className ?? \"\"]\n    .filter(Boolean)\n    .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={heroEnhancedClassName}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <div className={styles.mainSurfaceColor} />\n      <div className={styles.spaceBelowContainer} />\n      <div className={styles.mainContentContainer}>\n        <div className={styles.contentContainer}>\n          <div className={styles.leftContentPanel}>\n            <div className={styles.content}>\n              <div className={styles.topContentContainer}>\n                <Content\n                  data={{ ...content }}\n                  className={styles.contentSpacing}\n                />\n              </div>\n            </div>\n          </div>\n          <div className={styles.rightContentPanel}>\n            {image && (\n              <div className={styles.collageGroup}>\n                <div className={styles.imageWrapper}>\n                  <Image data={image} />\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n      <div className={styles.spaceAboveContainer} />\n    </Frame>\n  );\n};\n\nexport default HeroEnhanced;\n"],"names":["HeroEnhanced","className","data","tokens","colorPalette","colorSource","customColor","tokenStyles","content","image","heroEnhancedClassName","styles","jsxs","Frame","jsx","Content","Image"],"mappings":";;;;;AAUA,MAAMA,IAA4C,CAAC;AAAA,EACjD,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACJ,MAAI,CAACJ,KAAQ,CAACA,EAAK,QAAS,QAAO;AAEnC,QAAMK,IAAc;AAAA,IAClB,GAAIJ,GAAQ,OAAO,cAAc;AAAA,MAC/B,8BAA8BA,EAAO,MAAM,WAAW;AAAA,IAAA;AAAA,IAExD,GAAIA,GAAQ,SAAS,WAAW;AAAA,MAC9B,2BAA2BA,EAAO,QAAQ,QAAQ;AAAA,IAAA;AAAA,IAEpD,GAAIA,GAAQ,SAAS,OAAO;AAAA,MAC1B,uBAAuBA,EAAO,QAAQ,IAAI;AAAA,IAAA;AAAA,EAC5C,GAGI,EAAE,SAAAK,GAAS,OAAAC,EAAA,IAAUP,GAErBQ,IAAwB,CAACC,EAAO,cAAcV,KAAa,EAAE,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAW;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;AAAA,QAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWH,EAAO,iBAAA,CAAkB;AAAA,QACzC,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,oBAAA,CAAqB;AAAA,QAC5C,gBAAAG,EAAC,SAAI,WAAWH,EAAO,sBACrB,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,kBACrB,UAAA;AAAA,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,kBACrB,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,SACrB,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,qBACrB,UAAA,gBAAAG;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAM,EAAE,GAAGP,EAAA;AAAA,cACX,WAAWG,EAAO;AAAA,YAAA;AAAA,UAAA,EACpB,CACF,GACF,GACF;AAAA,UACA,gBAAAG,EAAC,SAAI,WAAWH,EAAO,mBACpB,UAAAF,KACC,gBAAAK,EAAC,OAAA,EAAI,WAAWH,EAAO,cACrB,4BAAC,OAAA,EAAI,WAAWA,EAAO,cACrB,UAAA,gBAAAG,EAACE,KAAM,MAAMP,EAAA,CAAO,EAAA,CACtB,EAAA,CACF,EAAA,CAEJ;AAAA,QAAA,EAAA,CACF,EAAA,CACF;AAAA,QACA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,EAAO,oBAAA,CAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;"}

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

@@ -0,0 +1,32 @@
+const n = "L0qFnR2o", t = "_2lYtc-A6", o = "WBYGuDXh", e = "kNsOhU1K", a = "oQ-MqE-y", c = "_8fr53Ohs", r = "_0mXc-yis", s = "IsuHlSyo", i = "m-iiQm-x", C = "_6Sw-pWlF", l = "_61hHnLQB", p = "wfNF-iWI", h = "JR5-h0Lr", m = {
+  heroEnhanced: n,
+  mainSurfaceColor: t,
+  spaceBelowContainer: o,
+  spaceAboveContainer: e,
+  mainContentContainer: a,
+  contentContainer: c,
+  leftContentPanel: r,
+  content: s,
+  contentSpacing: i,
+  topContentContainer: C,
+  rightContentPanel: l,
+  collageGroup: p,
+  imageWrapper: h
+};
+export {
+  p as collageGroup,
+  s as content,
+  c as contentContainer,
+  i as contentSpacing,
+  m as default,
+  n as heroEnhanced,
+  h as imageWrapper,
+  r as leftContentPanel,
+  a as mainContentContainer,
+  t as mainSurfaceColor,
+  l as rightContentPanel,
+  e as spaceAboveContainer,
+  o as spaceBelowContainer,
+  C as topContentContainer
+};
+//# sourceMappingURL=HeroEnhanced.module.css.js.map

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

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

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

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

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

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