@tramo-digital/react-ui 0.0.0-alpha

package/dist/esm/ui/patterns/Navigation/Navigation.js

@@ -0,0 +1,108 @@
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import I from "../../primitives/Frame/Frame.js";
+import u from "../../primitives/InterfaceIcon/InterfaceIcon.js";
+import i from "./Navigation.module.css.js";
+import { SVG_ARROW_LEFT_LARGE as R, SVG_ARROW_RIGHT_LARGE as A } from "../../../icons/src/types/svg.js";
+const E = ({
+  data: n,
+  tokens: t,
+  events: s,
+  className: b,
+  colorPalette: m,
+  colorSource: g,
+  customColor: p
+}) => {
+  if (!n) return null;
+  const h = {
+    ...t?.color?.track && {
+      "--navigation-track-color": t.color.track.default
+    },
+    ...t?.color?.thumb && {
+      "--navigation-thumb-color": t.color.thumb.default
+    },
+    ...t?.color?.buttonBackground && {
+      "--navigation-button-background": t.color.buttonBackground.default
+    },
+    ...t?.color?.buttonBorder && {
+      "--navigation-button-border-color": t.color.buttonBorder.default
+    },
+    ...t?.dimension?.trackHeight && {
+      "--navigation-track-height": t.dimension.trackHeight.default
+    },
+    ...t?.dimension?.thumbHeight && {
+      "--navigation-thumb-height": t.dimension.thumbHeight.default
+    },
+    ...t?.dimension?.buttonWidth && {
+      "--navigation-button-width": t.dimension.buttonWidth.default
+    },
+    ...t?.dimension?.buttonHeight && {
+      "--navigation-button-height": t.dimension.buttonHeight.default
+    },
+    ...t?.spacing?.gap && {
+      "--navigation-wrapper-gap": t.spacing.gap.default
+    },
+    ...t?.spacing?.padding && {
+      "--navigation-button-padding": t.spacing.padding.default
+    },
+    ...t?.border?.borderRadius && {
+      "--navigation-progress-border-radius": t.border.borderRadius.default
+    },
+    ...t?.border?.borderWidth && {
+      "--navigation-button-border-width": t.border.borderWidth.default
+    }
+  }, { totalItems: v, currentItem: r, disableNext: f, disablePrev: N } = n, { onNext: W, onPrev: x } = s ?? {}, B = Array.from({ length: v }).map((H, c) => {
+    const o = c + 1;
+    let e = !1;
+    return typeof r == "number" ? e = o === r : r && (e = o >= r.min && o <= r.max), /* @__PURE__ */ a(
+      "div",
+      {
+        className: `${i.dot} ${e ? i.dotActive : ""}`
+      },
+      c
+    );
+  }), d = !!N, l = !!f;
+  return /* @__PURE__ */ a(
+    I,
+    {
+      "data-tui-pattern": "base",
+      "data-tui-primitive": "base",
+      data: { as: "div" },
+      colorPalette: m,
+      colorSource: g,
+      customColor: p,
+      className: `${i.navigationWrapper} ${b}`,
+      style: h,
+      children: /* @__PURE__ */ y("div", { className: i.navigationIndicatorsWrapper, children: [
+        /* @__PURE__ */ a("div", { className: i.indicatorsPrevButtonWrapper, children: /* @__PURE__ */ a(
+          "button",
+          {
+            className: i.indicatorsPrevButton,
+            "aria-label": "Previous Item",
+            type: "button",
+            disabled: d,
+            "aria-disabled": d,
+            onClick: x,
+            children: /* @__PURE__ */ a(u, { data: { type: R } })
+          }
+        ) }),
+        /* @__PURE__ */ a("div", { className: i.dotsWrapper, children: B }),
+        /* @__PURE__ */ a("div", { className: i.indicatorsNextButtonWrapper, children: /* @__PURE__ */ a(
+          "button",
+          {
+            className: i.indicatorsNextButton,
+            "aria-label": "Next Item",
+            type: "button",
+            disabled: l,
+            "aria-disabled": l,
+            onClick: W,
+            children: /* @__PURE__ */ a(u, { data: { type: A } })
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  E as default
+};
+//# sourceMappingURL=Navigation.js.map

package/dist/esm/ui/patterns/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/ui/patterns/Navigation/Navigation.tsx"],"sourcesContent":["import type { NavigationModel } from \"@tramo-digital/types\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport InterfaceIcon from \"../../primitives/InterfaceIcon/InterfaceIcon\";\nimport styles from \"./Navigation.module.css\";\nimport {\n  SVG_ARROW_RIGHT_LARGE,\n  SVG_ARROW_LEFT_LARGE,\n} from \"@tramo-digital/icons\";\n\nexport type NavigationProps = NavigationModel;\n\nconst Navigation: React.FC<NavigationProps> = ({\n  data,\n  tokens,\n  events,\n  className,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = \"a606466578b350db674760c8344a6667\";\n\n  const tokenStyles = {\n    ...(tokens?.color?.track && {\n      \"--navigation-track-color\": tokens.color.track.default,\n    }),\n    ...(tokens?.color?.thumb && {\n      \"--navigation-thumb-color\": tokens.color.thumb.default,\n    }),\n    ...(tokens?.color?.buttonBackground && {\n      \"--navigation-button-background\": tokens.color.buttonBackground.default,\n    }),\n    ...(tokens?.color?.buttonBorder && {\n      \"--navigation-button-border-color\": tokens.color.buttonBorder.default,\n    }),\n    ...(tokens?.dimension?.trackHeight && {\n      \"--navigation-track-height\": tokens.dimension.trackHeight.default,\n    }),\n    ...(tokens?.dimension?.thumbHeight && {\n      \"--navigation-thumb-height\": tokens.dimension.thumbHeight.default,\n    }),\n    ...(tokens?.dimension?.buttonWidth && {\n      \"--navigation-button-width\": tokens.dimension.buttonWidth.default,\n    }),\n    ...(tokens?.dimension?.buttonHeight && {\n      \"--navigation-button-height\": tokens.dimension.buttonHeight.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      \"--navigation-wrapper-gap\": tokens.spacing.gap.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--navigation-button-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      \"--navigation-progress-border-radius\": tokens.border.borderRadius.default,\n    }),\n    ...(tokens?.border?.borderWidth && {\n      \"--navigation-button-border-width\": tokens.border.borderWidth.default,\n    }),\n  };\n\n  const { totalItems, currentItem, disableNext, disablePrev } = data;\n  const { onNext, onPrev } = events ?? {};\n\n  const dots = Array.from({ length: totalItems }).map((_, index) => {\n    const dotIndex = index + 1;\n    let isActive = false;\n    if (typeof currentItem === \"number\") {\n      isActive = dotIndex === currentItem;\n    } else if (currentItem) {\n      isActive = dotIndex >= currentItem.min && dotIndex <= currentItem.max;\n    }\n\n    return (\n      <div\n        key={index}\n        className={`${styles.dot} ${isActive ? styles.dotActive : \"\"}`}\n      />\n    );\n  });\n\n  const isPrevDisabled = Boolean(disablePrev);\n  const isNextDisabled = Boolean(disableNext);\n\n  return (\n    <Frame\n      data-tui-pattern=\"base\"\n      data-tui-primitive=\"base\"\n      data={{ as: \"div\" }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={`${styles.navigationWrapper} ${className}`}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <div className={styles.navigationIndicatorsWrapper}>\n        <div className={styles.indicatorsPrevButtonWrapper}>\n          <button\n            className={styles.indicatorsPrevButton}\n            aria-label=\"Previous Item\"\n            type=\"button\"\n            disabled={isPrevDisabled}\n            aria-disabled={isPrevDisabled}\n            onClick={onPrev}\n          >\n            <InterfaceIcon data={{ type: SVG_ARROW_LEFT_LARGE }} />\n          </button>\n        </div>\n        <div className={styles.dotsWrapper}>{dots}</div>\n        <div className={styles.indicatorsNextButtonWrapper}>\n          <button\n            className={styles.indicatorsNextButton}\n            aria-label=\"Next Item\"\n            type=\"button\"\n            disabled={isNextDisabled}\n            aria-disabled={isNextDisabled}\n            onClick={onNext}\n          >\n            <InterfaceIcon data={{ type: SVG_ARROW_RIGHT_LARGE }} />\n          </button>\n        </div>\n      </div>\n    </Frame>\n  );\n};\n\nexport default Navigation;\n"],"names":["Navigation","data","tokens","events","className","colorPalette","colorSource","customColor","tokenStyles","totalItems","currentItem","disableNext","disablePrev","onNext","onPrev","dots","_","index","dotIndex","isActive","jsx","styles","isPrevDisabled","isNextDisabled","Frame","jsxs","InterfaceIcon","SVG_ARROW_LEFT_LARGE","SVG_ARROW_RIGHT_LARGE"],"mappings":"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"}

package/dist/esm/ui/patterns/Navigation/Navigation.module.css.js

@@ -0,0 +1,24 @@
+const t = "OHqfaI6y", o = "ObUE8WZm", n = "_1UWdKf75", r = "EyH0tedM", a = "XVN5sDeO", i = "ifew6bF8", e = "c-25zBwZ", s = "dhRPFeaw", c = "zQsPmD8A", p = {
+  navigationWrapper: t,
+  dotsWrapper: o,
+  dot: n,
+  dotActive: r,
+  navigationIndicatorsWrapper: a,
+  indicatorsPrevButtonWrapper: i,
+  indicatorsNextButtonWrapper: e,
+  indicatorsNextButton: s,
+  indicatorsPrevButton: c
+};
+export {
+  p as default,
+  n as dot,
+  r as dotActive,
+  o as dotsWrapper,
+  s as indicatorsNextButton,
+  e as indicatorsNextButtonWrapper,
+  c as indicatorsPrevButton,
+  i as indicatorsPrevButtonWrapper,
+  a as navigationIndicatorsWrapper,
+  t as navigationWrapper
+};
+//# sourceMappingURL=Navigation.module.css.js.map

package/dist/esm/ui/patterns/Navigation/Navigation.module.css.js.map

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

package/dist/esm/ui/patterns/Navigation/index.js

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

package/dist/esm/ui/patterns/Navigation/index.js.map

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

package/dist/esm/ui/patterns/StripBanner/StripBanner.js

@@ -0,0 +1,113 @@
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import C from "../../primitives/Frame/Frame.js";
+import W from "../../primitives/TextBody/TextBody.js";
+import v from "../../primitives/TextEyebrow/TextEyebrow.js";
+import i from "./StripBanner.module.css.js";
+const A = ({
+  data: r,
+  events: o,
+  tokens: e,
+  className: c,
+  children: m,
+  colorPalette: p,
+  colorSource: g,
+  customColor: h
+}) => {
+  if (!r) return null;
+  const b = {
+    ...e?.color?.background && {
+      "--strip-banner-background": e.color.background.default
+    },
+    ...e?.color?.border && {
+      "--strip-banner-border": e.color.border.default
+    },
+    ...e?.spacing?.padding && {
+      "--strip-banner-padding": e.spacing.padding.default
+    },
+    ...e?.spacing?.gap && {
+      "--strip-banner-gap": e.spacing.gap.default
+    },
+    ...e?.sizing?.minHeight && {
+      "--strip-banner-min-height": typeof e.sizing.minHeight.default == "number" ? `${e.sizing.minHeight.default}px` : e.sizing.minHeight.default
+    },
+    ...e?.dimension?.minHeight && {
+      "--strip-banner-min-height": typeof e.dimension.minHeight.default == "number" ? `${e.dimension.minHeight.default}px` : e.dimension.minHeight.default
+    },
+    ...e?.sizing?.contentMaxWidth && {
+      "--strip-banner-content-max-width": e.sizing.contentMaxWidth.default
+    },
+    ...(e?.dimension?.maxWidth || e?.dimension?.contentMaxWidth) && {
+      "--strip-banner-content-max-width": (e?.dimension?.maxWidth || e?.dimension?.contentMaxWidth).default
+    }
+  }, {
+    eyebrow: u,
+    title: f,
+    text: x,
+    message: y,
+    description: w,
+    closable: z = !1,
+    align: a = "center",
+    type: t
+  } = r, d = u || f, s = m || x || y || w, { onClose: H } = o || {}, N = [
+    i.tuiStripBanner,
+    i[`align${a.charAt(0).toUpperCase() + a.slice(1)}`],
+    t ? i[`type${t.charAt(0).toUpperCase() + t.slice(1)}`] : "",
+    c ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    C,
+    {
+      "data-tui-pattern": "base",
+      data: { as: "div" },
+      colorPalette: p,
+      colorSource: g,
+      customColor: h,
+      className: N,
+      style: b,
+      children: /* @__PURE__ */ l("div", { className: i.container, children: [
+        /* @__PURE__ */ l("div", { className: i.content, children: [
+          d && /* @__PURE__ */ n("div", { className: i.eyebrowRow, children: /* @__PURE__ */ n(
+            v,
+            {
+              data: {
+                text: d,
+                size: "sm",
+                weight: "bold",
+                alignment: "center"
+              },
+              tokens: e?.elements?.eyebrow
+            }
+          ) }),
+          s && /* @__PURE__ */ n("div", { className: i.bodyRow, children: /* @__PURE__ */ n(
+            W,
+            {
+              data: {
+                alignment: a,
+                size: "sm",
+                weight: "regular",
+                as: "span"
+              },
+              tokens: e?.elements?.text,
+              className: i.message,
+              children: s
+            }
+          ) })
+        ] }),
+        z && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close announcement",
+            onClick: H,
+            className: i.closeButton,
+            children: /* @__PURE__ */ n("span", { "aria-hidden": "true", children: "×" })
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  A as default
+};
+//# sourceMappingURL=StripBanner.js.map

package/dist/esm/ui/patterns/StripBanner/StripBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StripBanner.js","sources":["../../../../../src/ui/patterns/StripBanner/StripBanner.tsx"],"sourcesContent":["import React from 'react';\nimport type { StripBannerModel } from '@tramo-digital/types';\nimport Frame from '../../primitives/Frame/Frame';\nimport TextBody from '../../primitives/TextBody/TextBody';\nimport TextEyebrow from '../../primitives/TextEyebrow/TextEyebrow';\nimport styles from './StripBanner.module.css';\n\nexport interface StripBannerProps extends StripBannerModel {\n  children?: React.ReactNode;\n}\n\nconst StripBanner: React.FC<StripBannerProps> = ({\n  data,\n  events,\n  tokens,\n  className,\n  children,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = '233a50e9d4018a32d573bcdbf2eeaf73';\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      '--strip-banner-background': tokens.color.background.default,\n    }),\n    ...(tokens?.color?.border && {\n      '--strip-banner-border': tokens.color.border.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      '--strip-banner-padding': tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      '--strip-banner-gap': tokens.spacing.gap.default,\n    }),\n    ...(tokens?.sizing?.minHeight && {\n      '--strip-banner-min-height':\n        typeof tokens.sizing.minHeight.default === 'number'\n          ? `${tokens.sizing.minHeight.default}px`\n          : tokens.sizing.minHeight.default,\n    }),\n    ...(tokens?.dimension?.minHeight && {\n      '--strip-banner-min-height':\n        typeof tokens.dimension.minHeight.default === 'number'\n          ? `${tokens.dimension.minHeight.default}px`\n          : tokens.dimension.minHeight.default,\n    }),\n    ...(tokens?.sizing?.contentMaxWidth && {\n      '--strip-banner-content-max-width': tokens.sizing.contentMaxWidth.default,\n    }),\n    ...((tokens?.dimension?.maxWidth || tokens?.dimension?.contentMaxWidth) && {\n      '--strip-banner-content-max-width': (tokens?.dimension?.maxWidth ||\n        tokens?.dimension?.contentMaxWidth)!.default,\n    }),\n  };\n\n  const {\n    eyebrow,\n    title,\n    text,\n    message,\n    description,\n    closable = false,\n    align = 'center',\n    type,\n  } = data;\n  const displayEyebrow = eyebrow || title;\n  const displayMessage = children || text || message || description;\n  const { onClose } = events || {};\n\n  const bannerClassName = [\n    styles.tuiStripBanner,\n    styles[`align${align.charAt(0).toUpperCase() + align.slice(1)}`],\n    type ? styles[`type${type.charAt(0).toUpperCase() + type.slice(1)}`] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Frame\n      data-tui-pattern=\"base\"\n      data={{ as: 'div' }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={bannerClassName}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <div className={styles.container}>\n        <div className={styles.content}>\n          {displayEyebrow && (\n            <div className={styles.eyebrowRow}>\n              <TextEyebrow\n                data={{\n                  text: displayEyebrow,\n                  size: 'sm',\n                  weight: 'bold',\n                  alignment: 'center',\n                }}\n                tokens={tokens?.elements?.eyebrow}\n              />\n            </div>\n          )}\n          {displayMessage && (\n            <div className={styles.bodyRow}>\n              <TextBody\n                data={{\n                  alignment: align,\n                  size: 'sm',\n                  weight: 'regular',\n                  as: 'span',\n                }}\n                tokens={tokens?.elements?.text}\n                className={styles.message}\n              >\n                {displayMessage}\n              </TextBody>\n            </div>\n          )}\n        </div>\n        {closable && (\n          <button\n            type=\"button\"\n            aria-label=\"Close announcement\"\n            onClick={onClose}\n            className={styles.closeButton}\n          >\n            <span aria-hidden=\"true\">×</span>\n          </button>\n        )}\n      </div>\n    </Frame>\n  );\n};\n\nexport default StripBanner;\n"],"names":["StripBanner","data","events","tokens","className","children","colorPalette","colorSource","customColor","tokenStyles","eyebrow","title","text","message","description","closable","align","type","displayEyebrow","displayMessage","onClose","bannerClassName","styles","jsx","Frame","jsxs","TextEyebrow","TextBody"],"mappings":"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"}

package/dist/esm/ui/patterns/StripBanner/StripBanner.module.css.js

@@ -0,0 +1,28 @@
+const n = "_1vQe3f9v", t = "_2yAMgEFR", e = "WQezvKdn", o = "rAa3tU46", s = "m-qKGIxh", a = "nU0Sg-gE", c = "Dq1iKOFJ", i = "Batv3ssz", r = "VljiwhQx", g = "WwIAbVLu", l = "jZL6g2Gh", w = {
+  tuiStripBanner: n,
+  container: t,
+  content: e,
+  eyebrowRow: o,
+  alignLeft: s,
+  alignCenter: a,
+  alignRight: c,
+  bodyRow: i,
+  message: r,
+  linkWrapper: g,
+  closeButton: l
+};
+export {
+  a as alignCenter,
+  s as alignLeft,
+  c as alignRight,
+  i as bodyRow,
+  l as closeButton,
+  t as container,
+  e as content,
+  w as default,
+  o as eyebrowRow,
+  g as linkWrapper,
+  r as message,
+  n as tuiStripBanner
+};
+//# sourceMappingURL=StripBanner.module.css.js.map

package/dist/esm/ui/patterns/StripBanner/StripBanner.module.css.js.map

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

package/dist/esm/ui/patterns/Teaser/Teaser.js

@@ -0,0 +1,154 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import z from "../../primitives/Frame/Frame.js";
+import g from "../../primitives/Image/Image.js";
+import C from "../../primitives/TextEyebrow/TextEyebrow.js";
+import R from "../../primitives/TextHeading/TextHeading.js";
+import T from "../../primitives/TextBody/TextBody.js";
+import j from "../../primitives/Button/Button.js";
+import H from "../../primitives/Link/Link.js";
+import a from "./Teaser.module.css.js";
+const F = ({
+  data: n,
+  events: f,
+  tokens: e,
+  className: u,
+  colorPalette: h,
+  colorSource: b,
+  customColor: x
+}) => {
+  if (!n) return null;
+  const {
+    pretitle: d,
+    title: s,
+    description: c,
+    image: r,
+    primaryAction: i,
+    secondaryAction: o,
+    layout: y = "stacked",
+    contentAlignment: m = "left"
+  } = n, { onPrimaryAction: v, onSecondaryAction: N, onImageClick: p } = f || {}, B = {
+    ...e?.color?.background && {
+      "--teaser-bg": e.color.background.default
+    },
+    ...e?.color?.overlay && {
+      "--teaser-overlay": e.color.overlay.default
+    },
+    ...e?.spacing?.padding && {
+      "--teaser-padding": e.spacing.padding.default
+    },
+    ...e?.spacing?.gap && { "--teaser-gap": e.spacing.gap.default },
+    ...e?.spacing?.contentGap && {
+      "--teaser-content-gap": e.spacing.contentGap.default
+    },
+    ...e?.border?.borderRadius && {
+      "--teaser-image-border-radius": e.border.borderRadius.default
+    },
+    ...e?.dimension?.minHeight && {
+      "--teaser-min-height": e.dimension.minHeight.default
+    }
+  }, A = () => r ? /* @__PURE__ */ t("div", { className: a.imageWrapper, children: r.href ? /* @__PURE__ */ t(
+    "a",
+    {
+      href: r.href,
+      className: a.imageLink,
+      onClick: (w) => {
+        p && (w.preventDefault(), p(r.href));
+      },
+      children: /* @__PURE__ */ t(
+        g,
+        {
+          data: { src: r.src, alt: r.alt, fluid: !0 },
+          tokens: { border: { borderRadius: { default: "0px" } } }
+        }
+      )
+    }
+  ) : /* @__PURE__ */ t(
+    g,
+    {
+      data: { src: r.src, alt: r.alt, fluid: !0 },
+      tokens: { border: { borderRadius: { default: "0px" } } }
+    }
+  ) }) : null;
+  return /* @__PURE__ */ l(
+    z,
+    {
+      "data-tui-pattern": "base",
+      data: { as: "article" },
+      colorPalette: h,
+      colorSource: b,
+      customColor: x,
+      className: [
+        a.teaser,
+        a[`layout-${y}`],
+        a[`align-${m}`],
+        u ?? ""
+      ].filter(Boolean).join(" "),
+      style: B,
+      children: [
+        A(),
+        /* @__PURE__ */ l("div", { className: a.contentWrapper, children: [
+          /* @__PURE__ */ l("div", { className: a.textBlock, children: [
+            d && /* @__PURE__ */ t(
+              C,
+              {
+                data: { text: d, size: "md", weight: "bold" },
+                className: a.pretitle
+              }
+            ),
+            s && /* @__PURE__ */ t(
+              R,
+              {
+                data: {
+                  text: s,
+                  as: "h3",
+                  size: "lg",
+                  weight: "bold",
+                  alignment: m
+                },
+                className: a.title
+              }
+            ),
+            c && /* @__PURE__ */ t(
+              T,
+              {
+                data: { text: c, size: "md", weight: "regular" },
+                className: a.description
+              }
+            )
+          ] }),
+          (i || o) && /* @__PURE__ */ l("div", { className: a.actionsBlock, children: [
+            i && /* @__PURE__ */ t(
+              j,
+              {
+                data: {
+                  text: i.text,
+                  variant: (i.variant === "ghost" ? "tertiary" : i.variant) || "primary"
+                },
+                events: {
+                  onClick: () => v?.(i.href)
+                }
+              }
+            ),
+            o && /* @__PURE__ */ t(
+              H,
+              {
+                data: {
+                  text: o.text,
+                  href: o.href,
+                  size: "md"
+                },
+                events: {
+                  onClick: () => N?.(o.href)
+                }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  F as default
+};
+//# sourceMappingURL=Teaser.js.map

package/dist/esm/ui/patterns/Teaser/Teaser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Teaser.js","sources":["../../../../../src/ui/patterns/Teaser/Teaser.tsx"],"sourcesContent":["import React from 'react';\nimport type { TeaserModel } from '@tramo-digital/types';\nimport Frame from '../../primitives/Frame/Frame';\nimport Image from '../../primitives/Image/Image';\nimport TextEyebrow from '../../primitives/TextEyebrow/TextEyebrow';\nimport TextHeading from '../../primitives/TextHeading/TextHeading';\nimport TextBody from '../../primitives/TextBody/TextBody';\nimport Button from '../../primitives/Button/Button';\nimport Link from '../../primitives/Link/Link';\nimport styles from './Teaser.module.css';\n\nexport interface TeaserProps {\n  id?: TeaserModel['id'];\n  data: TeaserModel['data'];\n  events?: TeaserModel['events'];\n  tokens?: TeaserModel['tokens'];\n  className?: TeaserModel['className'];\n  colorPalette?: TeaserModel['colorPalette'];\n  colorSource?: TeaserModel['colorSource'];\n  customColor?: TeaserModel['customColor'];\n}\n\nconst Teaser: React.FC<TeaserProps> = ({\n  data,\n  events,\n  tokens,\n  className,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = '93cbee886c36603d8ac39dc56bd8792e';\n\n  const {\n    pretitle,\n    title,\n    description,\n    image,\n    primaryAction,\n    secondaryAction,\n    layout = 'stacked',\n    contentAlignment = 'left',\n  } = data;\n\n  const { onPrimaryAction, onSecondaryAction, onImageClick } = events || {};\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      '--teaser-bg': tokens.color.background.default,\n    }),\n    ...(tokens?.color?.overlay && {\n      '--teaser-overlay': tokens.color.overlay.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      '--teaser-padding': tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.gap && { '--teaser-gap': tokens.spacing.gap.default }),\n    ...(tokens?.spacing?.contentGap && {\n      '--teaser-content-gap': tokens.spacing.contentGap.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      '--teaser-image-border-radius': tokens.border.borderRadius.default,\n    }),\n    ...(tokens?.dimension?.minHeight && {\n      '--teaser-min-height': tokens.dimension.minHeight.default,\n    }),\n  };\n\n  const renderImage = () => {\n    if (!image) return null;\n\n    return (\n      <div className={styles.imageWrapper}>\n        {image.href ? (\n          <a\n            href={image.href}\n            className={styles.imageLink}\n            onClick={(e) => {\n              if (onImageClick) {\n                e.preventDefault();\n                onImageClick(image.href!);\n              }\n            }}\n          >\n            <Image\n              data={{ src: image.src, alt: image.alt, fluid: true }}\n              tokens={{ border: { borderRadius: { default: '0px' } } }}\n            />\n          </a>\n        ) : (\n          <Image\n            data={{ src: image.src, alt: image.alt, fluid: true }}\n            tokens={{ border: { borderRadius: { default: '0px' } } }}\n          />\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <Frame\n      data-tui-pattern=\"base\"\n      data={{ as: 'article' }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={[\n        styles.teaser,\n        styles[`layout-${layout}`],\n        styles[`align-${contentAlignment}`],\n        className ?? '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={tokenStyles as React.CSSProperties}\n    >\n      {renderImage()}\n\n      <div className={styles.contentWrapper}>\n        <div className={styles.textBlock}>\n          {pretitle && (\n            <TextEyebrow\n              data={{ text: pretitle, size: 'md', weight: 'bold' }}\n              className={styles.pretitle}\n            />\n          )}\n\n          {title && (\n            <TextHeading\n              data={{\n                text: title,\n                as: 'h3',\n                size: 'lg',\n                weight: 'bold',\n                alignment: contentAlignment,\n              }}\n              className={styles.title}\n            />\n          )}\n\n          {description && (\n            <TextBody\n              data={{ text: description, size: 'md', weight: 'regular' }}\n              className={styles.description}\n            />\n          )}\n        </div>\n\n        {(primaryAction || secondaryAction) && (\n          <div className={styles.actionsBlock}>\n            {primaryAction && (\n              <Button\n                data={{\n                  text: primaryAction.text,\n                  variant:\n                    (primaryAction.variant === 'ghost'\n                      ? 'tertiary'\n                      : primaryAction.variant) || 'primary',\n                }}\n                events={{\n                  onClick: () => onPrimaryAction?.(primaryAction.href),\n                }}\n              />\n            )}\n            {secondaryAction && (\n              <Link\n                data={{\n                  text: secondaryAction.text,\n                  href: secondaryAction.href,\n                  size: 'md',\n                }}\n                events={{\n                  onClick: () => onSecondaryAction?.(secondaryAction.href),\n                }}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    </Frame>\n  );\n};\n\nexport default Teaser;\n"],"names":["Teaser","data","events","tokens","className","colorPalette","colorSource","customColor","pretitle","title","description","image","primaryAction","secondaryAction","layout","contentAlignment","onPrimaryAction","onSecondaryAction","onImageClick","tokenStyles","renderImage","styles","jsx","e","Image","jsxs","Frame","TextEyebrow","TextHeading","TextBody","Button","Link"],"mappings":";;;;;;;;;AAsBA,MAAMA,IAAgC,CAAC;AAAA,EACrC,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACJ,MAAI,CAACN,EAAM,QAAO;AAGlB,QAAM;AAAA,IACJ,UAAAO;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,kBAAAC,IAAmB;AAAA,EAAA,IACjBd,GAEE,EAAE,iBAAAe,GAAiB,mBAAAC,GAAmB,cAAAC,EAAA,IAAiBhB,KAAU,CAAA,GAEjEiB,IAAc;AAAA,IAClB,GAAIhB,GAAQ,OAAO,cAAc;AAAA,MAC/B,eAAeA,EAAO,MAAM,WAAW;AAAA,IAAA;AAAA,IAEzC,GAAIA,GAAQ,OAAO,WAAW;AAAA,MAC5B,oBAAoBA,EAAO,MAAM,QAAQ;AAAA,IAAA;AAAA,IAE3C,GAAIA,GAAQ,SAAS,WAAW;AAAA,MAC9B,oBAAoBA,EAAO,QAAQ,QAAQ;AAAA,IAAA;AAAA,IAE7C,GAAIA,GAAQ,SAAS,OAAO,EAAE,gBAAgBA,EAAO,QAAQ,IAAI,QAAA;AAAA,IACjE,GAAIA,GAAQ,SAAS,cAAc;AAAA,MACjC,wBAAwBA,EAAO,QAAQ,WAAW;AAAA,IAAA;AAAA,IAEpD,GAAIA,GAAQ,QAAQ,gBAAgB;AAAA,MAClC,gCAAgCA,EAAO,OAAO,aAAa;AAAA,IAAA;AAAA,IAE7D,GAAIA,GAAQ,WAAW,aAAa;AAAA,MAClC,uBAAuBA,EAAO,UAAU,UAAU;AAAA,IAAA;AAAA,EACpD,GAGIiB,IAAc,MACbT,sBAGF,OAAA,EAAI,WAAWU,EAAO,cACpB,YAAM,OACL,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAMX,EAAM;AAAA,MACZ,WAAWU,EAAO;AAAA,MAClB,SAAS,CAACE,MAAM;AACd,QAAIL,MACFK,EAAE,eAAA,GACFL,EAAaP,EAAM,IAAK;AAAA,MAE5B;AAAA,MAEA,UAAA,gBAAAW;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAM,EAAE,KAAKb,EAAM,KAAK,KAAKA,EAAM,KAAK,OAAO,GAAA;AAAA,UAC/C,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,QAAM,EAAE;AAAA,QAAE;AAAA,MAAA;AAAA,IACzD;AAAA,EAAA,IAGF,gBAAAW;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,MAAM,EAAE,KAAKb,EAAM,KAAK,KAAKA,EAAM,KAAK,OAAO,GAAA;AAAA,MAC/C,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,QAAM,EAAE;AAAA,IAAE;AAAA,EAAA,GAG7D,IA1BiB;AA8BrB,SACE,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,oBAAiB;AAAA,MACjB,MAAM,EAAE,IAAI,UAAA;AAAA,MACZ,cAAArB;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAW;AAAA,QACTc,EAAO;AAAA,QACPA,EAAO,UAAUP,CAAM,EAAE;AAAA,QACzBO,EAAO,SAASN,CAAgB,EAAE;AAAA,QAClCX,KAAa;AAAA,MAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAOe;AAAA,MAEN,UAAA;AAAA,QAAAC,EAAA;AAAA,QAED,gBAAAK,EAAC,OAAA,EAAI,WAAWJ,EAAO,gBACrB,UAAA;AAAA,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWJ,EAAO,WACpB,UAAA;AAAA,YAAAb,KACC,gBAAAc;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,MAAM,EAAE,MAAMnB,GAAU,MAAM,MAAM,QAAQ,OAAA;AAAA,gBAC5C,WAAWa,EAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAIrBZ,KACC,gBAAAa;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,kBACJ,MAAMnB;AAAA,kBACN,IAAI;AAAA,kBACJ,MAAM;AAAA,kBACN,QAAQ;AAAA,kBACR,WAAWM;AAAA,gBAAA;AAAA,gBAEb,WAAWM,EAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAIrBX,KACC,gBAAAY;AAAA,cAACO;AAAA,cAAA;AAAA,gBACC,MAAM,EAAE,MAAMnB,GAAa,MAAM,MAAM,QAAQ,UAAA;AAAA,gBAC/C,WAAWW,EAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACpB,GAEJ;AAAA,WAEET,KAAiBC,MACjB,gBAAAY,EAAC,OAAA,EAAI,WAAWJ,EAAO,cACpB,UAAA;AAAA,YAAAT,KACC,gBAAAU;AAAA,cAACQ;AAAAA,cAAA;AAAA,gBACC,MAAM;AAAA,kBACJ,MAAMlB,EAAc;AAAA,kBACpB,UACGA,EAAc,YAAY,UACvB,aACAA,EAAc,YAAY;AAAA,gBAAA;AAAA,gBAElC,QAAQ;AAAA,kBACN,SAAS,MAAMI,IAAkBJ,EAAc,IAAI;AAAA,gBAAA;AAAA,cACrD;AAAA,YAAA;AAAA,YAGHC,KACC,gBAAAS;AAAA,cAACS;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,kBACJ,MAAMlB,EAAgB;AAAA,kBACtB,MAAMA,EAAgB;AAAA,kBACtB,MAAM;AAAA,gBAAA;AAAA,gBAER,QAAQ;AAAA,kBACN,SAAS,MAAMI,IAAoBJ,EAAgB,IAAI;AAAA,gBAAA;AAAA,cACzD;AAAA,YAAA;AAAA,UACF,EAAA,CAEJ;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/ui/patterns/Teaser/Teaser.module.css.js

@@ -0,0 +1,36 @@
+const t = "OfLL8vOe", e = "l1lfUyWl", n = "kkrJG6a3", o = "_77rLoDlQ", l = "e0TJ1PdM", a = "Ak9Boab-", i = "fAT3evPd", c = "_51iONDKr", r = "djPnUn5R", s = "OpC-guYp", p = "_02y1BCZd", g = "yhRnvWjD", y = "cEPQ8LGz", k = {
+  teaser: t,
+  imageWrapper: e,
+  imageLink: n,
+  contentWrapper: o,
+  textBlock: l,
+  actionsBlock: a,
+  "layout-inline": "fAT3evPd",
+  layoutInline: i,
+  "layout-overlay": "_51iONDKr",
+  layoutOverlay: c,
+  title: r,
+  description: s,
+  pretitle: p,
+  "align-center": "yhRnvWjD",
+  alignCenter: g,
+  "align-right": "cEPQ8LGz",
+  alignRight: y
+};
+export {
+  a as actionsBlock,
+  g as alignCenter,
+  y as alignRight,
+  o as contentWrapper,
+  k as default,
+  s as description,
+  n as imageLink,
+  e as imageWrapper,
+  i as layoutInline,
+  c as layoutOverlay,
+  p as pretitle,
+  t as teaser,
+  l as textBlock,
+  r as title
+};
+//# sourceMappingURL=Teaser.module.css.js.map

package/dist/esm/ui/patterns/Teaser/Teaser.module.css.js.map

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

package/dist/esm/ui/patterns/Teaser/index.js

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

package/dist/esm/ui/patterns/Teaser/index.js.map

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

package/dist/esm/ui/primitives/Avatar/Avatar.js

@@ -0,0 +1,31 @@
+import { jsx as i } from "react/jsx-runtime";
+import e from "./Avatar.module.css.js";
+import d from "../Frame/Frame.js";
+const l = ({ data: r, tokens: a }) => {
+  const t = {
+    ...a?.dimension?.width && {
+      "--avatar-width": a.dimension.width.default
+    },
+    ...a?.dimension?.height && {
+      "--avatar-height": a.dimension.height.default
+    },
+    ...a?.border?.borderRadius && {
+      "--avatar-border-radius": a.border.borderRadius.default
+    }
+  };
+  return /* @__PURE__ */ i(
+    d,
+    {
+      "data-tui-primitive": "base",
+      data: { as: "img" },
+      src: r?.src,
+      alt: r?.alt,
+      className: e.avatar,
+      style: t
+    }
+  );
+};
+export {
+  l as default
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/ui/primitives/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../../../src/ui/primitives/Avatar/Avatar.tsx"],"sourcesContent":["import type { AvatarModel } from \"@tramo-digital/types\";\nimport React from \"react\";\nimport styles from \"./Avatar.module.css\";\nimport Frame from \"../Frame/Frame\";\n\nexport type AvatarProps = Omit<AvatarModel, \"_type\">;\n\nconst AvatarBase: React.FC<AvatarProps> = ({ data, tokens }) => {\n  const _fingerprint = \"12440bbd3b15fb3158e93a09bdaea2fe\";\n\n  const tokenStyles = {\n    ...(tokens?.dimension?.width && {\n      \"--avatar-width\": tokens.dimension.width.default,\n    }),\n    ...(tokens?.dimension?.height && {\n      \"--avatar-height\": tokens.dimension.height.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      \"--avatar-border-radius\": tokens.border.borderRadius.default,\n    }),\n  };\n\n  return (\n    <Frame\n      data-tui-primitive=\"base\"\n      data={{ as: \"img\" }}\n      src={data?.src}\n      alt={data?.alt}\n      className={styles.avatar}\n      style={tokenStyles as React.CSSProperties}\n    />\n  );\n};\n\nexport default AvatarBase;\n"],"names":["AvatarBase","data","tokens","tokenStyles","jsx","Frame","styles"],"mappings":";;;AAOA,MAAMA,IAAoC,CAAC,EAAE,MAAAC,GAAM,QAAAC,QAAa;AAG9D,QAAMC,IAAc;AAAA,IAClB,GAAID,GAAQ,WAAW,SAAS;AAAA,MAC9B,kBAAkBA,EAAO,UAAU,MAAM;AAAA,IAAA;AAAA,IAE3C,GAAIA,GAAQ,WAAW,UAAU;AAAA,MAC/B,mBAAmBA,EAAO,UAAU,OAAO;AAAA,IAAA;AAAA,IAE7C,GAAIA,GAAQ,QAAQ,gBAAgB;AAAA,MAClC,0BAA0BA,EAAO,OAAO,aAAa;AAAA,IAAA;AAAA,EACvD;AAGF,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,sBAAmB;AAAA,MACnB,MAAM,EAAE,IAAI,MAAA;AAAA,MACZ,KAAKJ,GAAM;AAAA,MACX,KAAKA,GAAM;AAAA,MACX,WAAWK,EAAO;AAAA,MAClB,OAAOH;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/esm/ui/primitives/Avatar/Avatar.module.css.js

@@ -0,0 +1,8 @@
+const a = "agPi8SmC", t = {
+  avatar: a
+};
+export {
+  a as avatar,
+  t as default
+};
+//# sourceMappingURL=Avatar.module.css.js.map

package/dist/esm/ui/primitives/Avatar/Avatar.module.css.js.map

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

package/dist/esm/ui/primitives/Avatar/index.js

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

package/dist/esm/ui/primitives/Avatar/index.js.map

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

package/dist/esm/ui/primitives/Badge/Badge.js

@@ -0,0 +1,42 @@
+import { jsx as d } from "react/jsx-runtime";
+import u from "../Frame/Frame.js";
+import e from "./Badge.module.css.js";
+const x = ({
+  className: a,
+  data: r,
+  tokens: t,
+  children: o,
+  colorPalette: l,
+  colorSource: i,
+  customColor: n
+}) => {
+  if (!r) return null;
+  const { text: s, status: c = "information" } = r, g = {
+    ...t?.color?.background && {
+      "--badge-bg": t.color.background.default
+    },
+    ...t?.color?.text && {
+      "--badge-text": t.color.text.default
+    },
+    ...t?.spacing?.padding && {
+      "--badge-padding": t.spacing.padding.default
+    }
+  };
+  return /* @__PURE__ */ d(
+    u,
+    {
+      data: { as: "span" },
+      "data-tui-status": c,
+      colorPalette: l,
+      colorSource: i,
+      customColor: n,
+      className: `${e.tuiBadge} ${a || ""}`,
+      style: g,
+      children: /* @__PURE__ */ d("span", { className: e.text, children: s ?? o })
+    }
+  );
+};
+export {
+  x as default
+};
+//# sourceMappingURL=Badge.js.map