@tramo-digital/react-ui 0.0.0-alpha

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

@@ -0,0 +1,18 @@
+const t = "N-CEN-JA", s = "Zc9YoKBg", e = "_95iEB9nb", a = "i41mHhaT", c = "XZwtLPgp", i = "bE9naHMP", n = {
+  tuiBreadcrumb: t,
+  list: s,
+  item: e,
+  link: a,
+  activeText: c,
+  separator: i
+};
+export {
+  c as activeText,
+  n as default,
+  e as item,
+  a as link,
+  s as list,
+  i as separator,
+  t as tuiBreadcrumb
+};
+//# sourceMappingURL=Breadcrumb.module.css.js.map

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

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

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

@@ -0,0 +1,75 @@
+import { jsxs as l, jsx as d } from "react/jsx-runtime";
+import s from "../../primitives/Frame/Frame.js";
+import m from "../../primitives/Image/Image.js";
+import u from "../Content/Content.js";
+import r from "./Card.module.css.js";
+const w = ({
+  data: i,
+  colorPalette: n,
+  colorSource: c,
+  customColor: o,
+  tokens: a
+}) => {
+  if (!i) return null;
+  const { content: t, src: e, alt: g } = i, p = {
+    ...a?.dimension?.width && {
+      "--card-sizing-card-width": a.dimension.width.default
+    },
+    ...a?.dimension?.imageHeight && {
+      "--card-sizing-image-height": a.dimension.imageHeight.default
+    },
+    ...a?.border?.borderRadius && {
+      "--card-border-radius": a.border.borderRadius.default
+    },
+    ...a?.color?.background && {
+      "--card-background-color": a.color.background.default
+    },
+    ...a?.spacing?.padding && {
+      "--card-padding": a.spacing.padding.default
+    },
+    ...a?.spacing?.gap && {
+      "--card-gap": a.spacing.gap.default
+    }
+  };
+  return /* @__PURE__ */ l(
+    s,
+    {
+      data: { as: "div" },
+      colorPalette: n,
+      colorSource: c,
+      customColor: o,
+      "data-tui-pattern": "base",
+      className: r.card,
+      style: p,
+      children: [
+        e && /* @__PURE__ */ d("div", { className: r.media, children: /* @__PURE__ */ d(
+          m,
+          {
+            data: {
+              src: e,
+              alt: g || "Card background"
+            },
+            tokens: { border: { borderRadius: { default: "0px" } } }
+          }
+        ) }),
+        t && /* @__PURE__ */ d("div", { className: r.contentWrapper, children: /* @__PURE__ */ d(
+          u,
+          {
+            data: t,
+            tokens: {
+              spacing: {
+                padding: {
+                  default: "var(--pattern-card-default-spacing-content-padding-top-bottom) var(--pattern-card-default-spacing-content-padding-left-right)"
+                }
+              }
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  w as default
+};
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../src/ui/patterns/Card/Card.tsx"],"sourcesContent":["import React from \"react\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport Image from \"../../primitives/Image/Image\";\nimport Content from \"../Content/Content\";\nimport styles from \"./Card.module.css\";\n\nimport type { CardModel } from \"@tramo-digital/types\";\n\nexport type CardProps = CardModel;\n\nconst Card: React.FC<CardProps> = ({\n  data,\n  colorPalette,\n  colorSource,\n  customColor,\n  tokens,\n}) => {\n  if (!data) return null;\n  const { content, src, alt } = data;\n\n  const cardStyles = {\n    ...(tokens?.dimension?.width && {\n      \"--card-sizing-card-width\": tokens.dimension.width.default,\n    }),\n    ...(tokens?.dimension?.imageHeight && {\n      \"--card-sizing-image-height\": tokens.dimension.imageHeight.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      \"--card-border-radius\": tokens.border.borderRadius.default,\n    }),\n    ...(tokens?.color?.background && {\n      \"--card-background-color\": tokens.color.background.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--card-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      \"--card-gap\": tokens.spacing.gap.default,\n    }),\n  } as React.CSSProperties;\n\n  return (\n    <Frame\n      data={{ as: \"div\" }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      data-tui-pattern=\"base\"\n      className={styles.card}\n      style={cardStyles}\n    >\n      {src && (\n        <div className={styles.media}>\n          <Image\n            data={{\n              src: src,\n              alt: alt || \"Card background\",\n            }}\n            tokens={{ border: { borderRadius: { default: \"0px\" } } }}\n          />\n        </div>\n      )}\n      {content && (\n        <div className={styles.contentWrapper}>\n          <Content\n            data={content}\n            tokens={{\n              spacing: {\n                padding: {\n                  default:\n                    \"var(--pattern-card-default-spacing-content-padding-top-bottom) var(--pattern-card-default-spacing-content-padding-left-right)\",\n                },\n              },\n            }}\n          />\n        </div>\n      )}\n    </Frame>\n  );\n};\n\nexport default Card;\n"],"names":["Card","data","colorPalette","colorSource","customColor","tokens","content","src","alt","cardStyles","jsxs","Frame","styles","jsx","Image","Content"],"mappings":";;;;;AAUA,MAAMA,IAA4B,CAAC;AAAA,EACjC,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AACF,MAAM;AACJ,MAAI,CAACJ,EAAM,QAAO;AAClB,QAAM,EAAE,SAAAK,GAAS,KAAAC,GAAK,KAAAC,EAAA,IAAQP,GAExBQ,IAAa;AAAA,IACjB,GAAIJ,GAAQ,WAAW,SAAS;AAAA,MAC9B,4BAA4BA,EAAO,UAAU,MAAM;AAAA,IAAA;AAAA,IAErD,GAAIA,GAAQ,WAAW,eAAe;AAAA,MACpC,8BAA8BA,EAAO,UAAU,YAAY;AAAA,IAAA;AAAA,IAE7D,GAAIA,GAAQ,QAAQ,gBAAgB;AAAA,MAClC,wBAAwBA,EAAO,OAAO,aAAa;AAAA,IAAA;AAAA,IAErD,GAAIA,GAAQ,OAAO,cAAc;AAAA,MAC/B,2BAA2BA,EAAO,MAAM,WAAW;AAAA,IAAA;AAAA,IAErD,GAAIA,GAAQ,SAAS,WAAW;AAAA,MAC9B,kBAAkBA,EAAO,QAAQ,QAAQ;AAAA,IAAA;AAAA,IAE3C,GAAIA,GAAQ,SAAS,OAAO;AAAA,MAC1B,cAAcA,EAAO,QAAQ,IAAI;AAAA,IAAA;AAAA,EACnC;AAGF,SACE,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAM,EAAE,IAAI,MAAA;AAAA,MACZ,cAAAT;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,oBAAiB;AAAA,MACjB,WAAWQ,EAAO;AAAA,MAClB,OAAOH;AAAA,MAEN,UAAA;AAAA,QAAAF,KACC,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,OACrB,UAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,cACJ,KAAAP;AAAA,cACA,KAAKC,KAAO;AAAA,YAAA;AAAA,YAEd,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,QAAM,EAAE;AAAA,UAAE;AAAA,QAAA,GAE3D;AAAA,QAEDF,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,gBACrB,UAAA,gBAAAC;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,MAAMT;AAAA,YACN,QAAQ;AAAA,cACN,SAAS;AAAA,gBACP,SAAS;AAAA,kBACP,SACE;AAAA,gBAAA;AAAA,cACJ;AAAA,YACF;AAAA,UACF;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1,12 @@
+const t = "_1rhv8HkN", e = "wgO7OtdS", a = "OXkSeC9P", c = {
+  card: t,
+  media: e,
+  contentWrapper: a
+};
+export {
+  t as card,
+  a as contentWrapper,
+  c as default,
+  e as media
+};
+//# sourceMappingURL=Card.module.css.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,191 @@
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import E from "../../primitives/Frame/Frame.js";
+import M from "../../primitives/Icon/Icon.js";
+import R from "../../primitives/Logo/Logo.js";
+import D from "../../primitives/TextBody/TextBody.js";
+import F from "../../primitives/TextEyebrow/TextEyebrow.js";
+import w from "../../primitives/TextHeading/TextHeading.js";
+import K from "../../primitives/Button/Button.js";
+import O from "../../primitives/Link/Link.js";
+import e from "./Content.module.css.js";
+import q from "../../primitives/TextDisplay/TextDisplay.js";
+const J = (...o) => o.filter(Boolean).join(" "), g = (o, ...t) => `${o}-${t.filter(Boolean).join("-")}`, at = ({
+  data: o,
+  tokens: t,
+  style: u,
+  className: G,
+  colorPalette: v,
+  colorSource: C,
+  customColor: $
+}) => {
+  const N = {
+    ...t?.dimension?.width && {
+      "--content-width": t.dimension.width.default
+    },
+    ...t?.dimension?.height && {
+      "--content-height": t.dimension.height.default
+    },
+    ...t?.spacing?.padding && {
+      "--content-padding": t.spacing.padding.default
+    },
+    ...t?.spacing?.margin && {
+      "--content-margin": t.spacing.margin.default
+    },
+    ...t?.border?.borderRadius && {
+      "--content-border-radius": t.border.borderRadius.default
+    },
+    ...t?.border?.border && {
+      "--content-border": t.border.border.default
+    },
+    ...t?.elevation?.boxShadow && {
+      "--content-box-shadow": t.elevation.boxShadow.default
+    },
+    ...t?.dimension?.boxSizing && {
+      "--content-box-sizing": t.dimension.boxSizing.default
+    },
+    ...t?.dimension?.height && {
+      "--content-height": t.dimension.height.default
+    },
+    ...t?.dimension?.width && {
+      "--content-width": t.dimension.width.default
+    },
+    ...t?.dimension?.minHeight && {
+      "--content-min-height": t.dimension.minHeight.default
+    },
+    ...t?.dimension?.minWidth && {
+      "--content-min-width": t.dimension.minWidth.default
+    },
+    ...t?.dimension?.maxHeight && {
+      "--content-max-height": t.dimension.maxHeight.default
+    },
+    ...t?.dimension?.maxWidth && {
+      "--content-max-width": t.dimension.maxWidth.default
+    },
+    ...t?.dimension?.overflow && {
+      "--content-overflow": t.dimension.overflow.default
+    },
+    // Gap overrides for content-level tokens
+    ...t?.spacing?.contentGap && {
+      "--content-gap": t.spacing.contentGap.default
+    },
+    ...t?.spacing?.ctaGap && {
+      "--content-cta-gap": t.spacing.ctaGap.default
+    },
+    ...t?.spacing?.containerGap && {
+      "--content-container-gap": t.spacing.containerGap.default
+    },
+    ...t?.spacing?.textGap && {
+      "--content-text-gap": t.spacing.textGap.default
+    },
+    ...t?.spacing?.buttonsGap && {
+      "--content-buttons-gap": t.spacing.buttonsGap.default
+    },
+    ...t?.spacing?.textlinksGap && {
+      "--content-textlinks-gap": t.spacing.textlinksGap.default
+    },
+    ...t?.spacing?.titleGap && {
+      "--content-heading-gap": t.spacing.titleGap.default
+    },
+    ...t?.spacing?.iconsGap && {
+      "--content-icons-gap": t.spacing.iconsGap.default
+    },
+    // Preserve any inline style overrides
+    ...u && { ...u }
+  };
+  if (!o) return null;
+  const {
+    contentAlignment: r = "left",
+    placement: j = "top",
+    logo: h,
+    icons: f = [],
+    textBody: x,
+    textEyebrow: b,
+    headline: d,
+    subheadline: c,
+    links: m = [],
+    buttons: p = []
+  } = o, B = {
+    left: "tui-align-start",
+    center: "tui-align-center",
+    right: "tui-align-end"
+  }, y = {
+    left: "tui-justify-start",
+    center: "tui-justify-center",
+    right: "tui-justify-end"
+  }[r] || "tui-justify-start", s = B[r] || "tui-align-start", T = () => h ? /* @__PURE__ */ i("div", { className: `${e.logoContainer} ${s}`, children: /* @__PURE__ */ i(R, { data: h }) }) : null, S = () => f.length === 0 ? null : /* @__PURE__ */ i("div", { className: `${e.objectIconsWrapper} ${s}`, children: f.map((n, a) => /* @__PURE__ */ i(
+    M,
+    {
+      data: { ...n, type: n.type }
+    },
+    g("icon", n.type, a)
+  )) }), W = () => !d && !c ? null : /* @__PURE__ */ l("div", { className: e.titleContainer, children: [
+    d && (d.type === "display" ? /* @__PURE__ */ i(q, { data: { ...d, alignment: r } }) : /* @__PURE__ */ i(w, { data: { ...d, alignment: r } })),
+    c ? /* @__PURE__ */ i(w, { data: { ...c, alignment: r } }) : null
+  ] }), H = () => {
+    const n = !!b, a = !!x;
+    return !n && !!!(d || c) && !a ? null : /* @__PURE__ */ l("div", { className: e.textContainer, children: [
+      n && /* @__PURE__ */ i(F, { data: { ...b, alignment: r } }),
+      W(),
+      a && /* @__PURE__ */ i(D, { data: { ...x, alignment: r } })
+    ] });
+  }, I = () => p.length === 0 ? null : /* @__PURE__ */ i(
+    "div",
+    {
+      className: `${e.buttonsWrapper} ${s} ${y}`,
+      children: p.map((n, a) => /* @__PURE__ */ i(
+        K,
+        {
+          ...n
+        },
+        g("button", n.id ? n.id : a)
+      ))
+    }
+  ), L = () => m.length === 0 ? null : /* @__PURE__ */ i(
+    "div",
+    {
+      className: `${e.linksWrapper} ${s} ${y}`,
+      children: m.map((n, a) => /* @__PURE__ */ i(
+        O,
+        {
+          ...n
+        },
+        g("link", (n.data || {}).text, (n.data || {}).href, a)
+      ))
+    }
+  ), A = () => {
+    const n = p.length > 0, a = m.length > 0;
+    return !n && !a ? null : /* @__PURE__ */ l("div", { className: e.ctaContainer, children: [
+      I(),
+      L()
+    ] });
+  }, z = J(
+    e.tuiContent,
+    e[r],
+    e[j],
+    G
+  );
+  return /* @__PURE__ */ l(
+    E,
+    {
+      "data-tui-pattern": "base",
+      data: { as: "div" },
+      colorPalette: v,
+      colorSource: C,
+      customColor: $,
+      className: z,
+      style: N,
+      children: [
+        /* @__PURE__ */ l("div", { className: e.container, children: [
+          T(),
+          S(),
+          H()
+        ] }),
+        A()
+      ]
+    }
+  );
+};
+export {
+  at as default
+};
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../../src/ui/patterns/Content/Content.tsx"],"sourcesContent":["import { SvgIconName } from \"@tramo-digital/icons\";\nimport type {\n  ButtonModel,\n  ContentModel,\n  IconData,\n  LinkModel,\n} from \"@tramo-digital/types\";\nimport React from \"react\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport Icon from \"../../primitives/Icon/Icon\";\nimport Logo from \"../../primitives/Logo/Logo\";\nimport TextBody from \"../../primitives/TextBody/TextBody\";\nimport TextEyebrow from \"../../primitives/TextEyebrow/TextEyebrow\";\nimport TextHeading from \"../../primitives/TextHeading/TextHeading\";\nimport Button from \"../../primitives/Button/Button\";\nimport Link from \"../../primitives/Link/Link\";\nimport styles from \"./Content.module.css\";\nimport TextDisplay from \"../../primitives/TextDisplay/TextDisplay\";\n\nexport interface ContentProps extends React.HTMLAttributes<HTMLElement> {\n  data?: ContentModel[\"data\"];\n  tokens?: ContentModel[\"tokens\"];\n  className?: ContentModel[\"className\"];\n  events?: ContentModel[\"events\"];\n  colorPalette?: ContentModel[\"colorPalette\"];\n  colorSource?: ContentModel[\"colorSource\"];\n  customColor?: ContentModel[\"customColor\"];\n}\n\n/**\n * Combines class names safely\n */\nconst combineClassNames = (\n  ...classes: (string | undefined | false)[]\n): string => {\n  return classes.filter(Boolean).join(\" \");\n};\n\n/**\n * Generates a unique key for list items\n */\nconst generateKey = (\n  prefix: string,\n  ...values: (string | number | undefined)[]\n): string => {\n  return `${prefix}-${values.filter(Boolean).join(\"-\")}`;\n};\n\nconst Content: React.FC<ContentProps> = ({\n  data,\n  tokens,\n  style,\n  className,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  const contentStyles: React.CSSProperties = {\n    ...(tokens?.dimension?.width && {\n      \"--content-width\": tokens.dimension.width.default,\n    }),\n    ...(tokens?.dimension?.height && {\n      \"--content-height\": tokens.dimension.height.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--content-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.margin && {\n      \"--content-margin\": tokens.spacing.margin.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      \"--content-border-radius\": tokens.border.borderRadius.default,\n    }),\n    ...(tokens?.border?.border && {\n      \"--content-border\": tokens.border.border.default,\n    }),\n    ...(tokens?.elevation?.boxShadow && {\n      \"--content-box-shadow\": tokens.elevation.boxShadow.default,\n    }),\n    ...(tokens?.dimension?.boxSizing && {\n      \"--content-box-sizing\": tokens.dimension.boxSizing.default,\n    }),\n    ...(tokens?.dimension?.height && {\n      \"--content-height\": tokens.dimension.height.default,\n    }),\n    ...(tokens?.dimension?.width && {\n      \"--content-width\": tokens.dimension.width.default,\n    }),\n    ...(tokens?.dimension?.minHeight && {\n      \"--content-min-height\": tokens.dimension.minHeight.default,\n    }),\n    ...(tokens?.dimension?.minWidth && {\n      \"--content-min-width\": tokens.dimension.minWidth.default,\n    }),\n    ...(tokens?.dimension?.maxHeight && {\n      \"--content-max-height\": tokens.dimension.maxHeight.default,\n    }),\n    ...(tokens?.dimension?.maxWidth && {\n      \"--content-max-width\": tokens.dimension.maxWidth.default,\n    }),\n    ...(tokens?.dimension?.overflow && {\n      \"--content-overflow\": tokens.dimension.overflow.default,\n    }),\n    // Gap overrides for content-level tokens\n    ...(tokens?.spacing?.contentGap && {\n      \"--content-gap\": tokens.spacing.contentGap.default,\n    }),\n    ...(tokens?.spacing?.ctaGap && {\n      \"--content-cta-gap\": tokens.spacing.ctaGap.default,\n    }),\n    ...(tokens?.spacing?.containerGap && {\n      \"--content-container-gap\": tokens.spacing.containerGap.default,\n    }),\n    ...(tokens?.spacing?.textGap && {\n      \"--content-text-gap\": tokens.spacing.textGap.default,\n    }),\n    ...(tokens?.spacing?.buttonsGap && {\n      \"--content-buttons-gap\": tokens.spacing.buttonsGap.default,\n    }),\n    ...(tokens?.spacing?.textlinksGap && {\n      \"--content-textlinks-gap\": tokens.spacing.textlinksGap.default,\n    }),\n    ...(tokens?.spacing?.titleGap && {\n      \"--content-heading-gap\": tokens.spacing.titleGap.default,\n    }),\n    ...(tokens?.spacing?.iconsGap && {\n      \"--content-icons-gap\": tokens.spacing.iconsGap.default,\n    }),\n    // Preserve any inline style overrides\n    ...(style && { ...style }),\n  };\n\n  if (!data) return null;\n\n  const _fingerprint = \"cbe6017fff64a6e0c4c5dce1f95da277\";\n\n  const {\n    contentAlignment = \"left\",\n    placement = \"top\",\n    logo,\n    icons = [],\n    textBody,\n    textEyebrow,\n    headline,\n    subheadline,\n    links = [],\n    buttons = [],\n  } = data;\n\n  const alignmentMap: Record<string, string> = {\n    left: \"tui-align-start\",\n    center: \"tui-align-center\",\n    right: \"tui-align-end\",\n  };\n\n  const alignmentItemsMap: Record<string, string> = {\n    left: \"tui-justify-start\",\n    center: \"tui-justify-center\",\n    right: \"tui-justify-end\",\n  };\n\n  const contentAlignmentClass =\n    alignmentItemsMap[contentAlignment] || \"tui-justify-start\";\n  const flexAlignmentClass =\n    alignmentMap[contentAlignment] || \"tui-align-start\";\n\n  const renderLogo = (): React.ReactNode => {\n    if (!logo) return null;\n    return (\n      <div className={`${styles.logoContainer} ${flexAlignmentClass}`}>\n        <Logo data={logo} />\n      </div>\n    );\n  };\n\n  const renderObjectIcons = (): React.ReactNode => {\n    if (icons.length === 0) return null;\n\n    return (\n      <div className={`${styles.objectIconsWrapper} ${flexAlignmentClass}`}>\n        {icons.map((icon: IconData, index: number) => (\n          <Icon\n            key={generateKey(\"icon\", icon.type, index)}\n            data={{ ...icon, type: icon.type as SvgIconName }}\n          />\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitleSection = (): React.ReactNode => {\n    if (!headline && !subheadline) return null;\n\n    return (\n      <div className={styles.titleContainer}>\n        {headline &&\n          (headline.type === \"display\" ? (\n            <TextDisplay data={{ ...headline, alignment: contentAlignment }} />\n          ) : (\n            <TextHeading data={{ ...headline, alignment: contentAlignment }} />\n          ))}\n        {subheadline ? (\n          <TextHeading data={{ ...subheadline, alignment: contentAlignment }} />\n        ) : null}\n      </div>\n    );\n  };\n\n  const renderTextContent = (): React.ReactNode => {\n    const hasEyebrow = !!textEyebrow;\n    const hasBody = !!textBody;\n    const hasTitleSection = !!(headline || subheadline);\n\n    if (!hasEyebrow && !hasTitleSection && !hasBody) return null;\n\n    return (\n      <div className={styles.textContainer}>\n        {hasEyebrow && (\n          <TextEyebrow data={{ ...textEyebrow, alignment: contentAlignment }} />\n        )}\n        {renderTitleSection()}\n        {hasBody && (\n          <TextBody data={{ ...textBody, alignment: contentAlignment }} />\n        )}\n      </div>\n    );\n  };\n\n  const renderButtons = (): React.ReactNode => {\n    if (buttons.length === 0) return null;\n\n    return (\n      <div\n        className={`${styles.buttonsWrapper} ${flexAlignmentClass} ${contentAlignmentClass}`}\n      >\n        {buttons.map((button: ButtonModel, index: number) => (\n          <Button\n            key={generateKey(\"button\", button.id ? button.id : index)}\n            {...button}\n          />\n        ))}\n      </div>\n    );\n  };\n\n  const renderLinks = (): React.ReactNode => {\n    if (links.length === 0) return null;\n\n    return (\n      <div\n        className={`${styles.linksWrapper} ${flexAlignmentClass} ${contentAlignmentClass}`}\n      >\n        {links.map((link: LinkModel, index: number) => (\n          <Link\n            key={generateKey(\"link\", (link.data || {}).text, (link.data || {}).href, index)}\n            {...link}\n          />\n        ))}\n      </div>\n    );\n  };\n\n  const renderCTAContainer = (): React.ReactNode => {\n    const hasButtons = buttons.length > 0;\n    const hasLinks = links.length > 0;\n\n    if (!hasButtons && !hasLinks) return null;\n\n    return (\n      <div className={styles.ctaContainer}>\n        {renderButtons()}\n        {renderLinks()}\n      </div>\n    );\n  };\n\n  const rootClassName = combineClassNames(\n    styles.tuiContent,\n    styles[contentAlignment],\n    styles[placement],\n    className,\n  );\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={rootClassName}\n      style={contentStyles}\n    >\n      <div className={styles.container}>\n        {renderLogo()}\n        {renderObjectIcons()}\n        {renderTextContent()}\n      </div>\n      {renderCTAContainer()}\n    </Frame>\n  );\n};\n\nexport default Content;\n"],"names":["combineClassNames","classes","generateKey","prefix","values","Content","data","tokens","style","className","colorPalette","colorSource","customColor","contentStyles","contentAlignment","placement","logo","icons","textBody","textEyebrow","headline","subheadline","links","buttons","alignmentMap","contentAlignmentClass","flexAlignmentClass","renderLogo","jsx","styles","Logo","renderObjectIcons","icon","index","Icon","renderTitleSection","jsxs","TextDisplay","TextHeading","renderTextContent","hasEyebrow","hasBody","TextEyebrow","TextBody","renderButtons","button","Button","renderLinks","link","Link","renderCTAContainer","hasButtons","hasLinks","rootClassName","Frame"],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+const t = "yBq2SyBP", n = "_00RBslLu", o = "z-FcFwey", e = "YIxxhHka", c = "cYksWnBz", r = "DCsTY83-", s = "_5v7YOb6j", i = "lY8O2pnK", a = "_0EbGitmq", p = "DjzwRN2T", l = "YYV9rcwP", C = "mO2zh10V", b = "QA-9qf6W", u = "c6xpmHOr", W = "_0xEkcn-p", Y = "sq0Ny3sV", g = {
+  tuiContent: t,
+  logoContainer: n,
+  container: o,
+  textContainer: e,
+  ctaContainer: c,
+  buttonsWrapper: r,
+  "tui-align-center": "_5v7YOb6j",
+  tuiAlignCenter: s,
+  linksWrapper: i,
+  titleContainer: a,
+  objectIconsWrapper: p,
+  left: l,
+  center: C,
+  right: b,
+  top: u,
+  middle: W,
+  bottom: Y
+};
+export {
+  Y as bottom,
+  r as buttonsWrapper,
+  C as center,
+  o as container,
+  c as ctaContainer,
+  g as default,
+  l as left,
+  i as linksWrapper,
+  n as logoContainer,
+  W as middle,
+  p as objectIconsWrapper,
+  b as right,
+  e as textContainer,
+  a as titleContainer,
+  u as top,
+  s as tuiAlignCenter,
+  t as tuiContent
+};
+//# sourceMappingURL=Content.module.css.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,153 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import B from "../../primitives/Frame/Frame.js";
+import D from "../../primitives/Input/Input.js";
+import j from "../../primitives/Textarea/Textarea.js";
+import C from "../../primitives/Select/Select.js";
+import L from "../../primitives/Checkbox/Checkbox.js";
+import R from "../../primitives/Radio/Radio.js";
+import W from "../../primitives/Button/Button.js";
+import r from "./FormGroup.module.css.js";
+const O = ({
+  data: u,
+  events: h,
+  tokens: t,
+  className: v,
+  colorPalette: k,
+  colorSource: x,
+  customColor: M
+}) => {
+  if (!u) return null;
+  const {
+    action: T,
+    method: F = "post",
+    fields: S = [],
+    submitButton: b,
+    successMessage: g,
+    errorMessage: N
+  } = u, y = (e) => {
+    if (h?.onSubmit) {
+      e.preventDefault();
+      const l = new FormData(e.currentTarget), s = {};
+      l.forEach((o, n) => {
+        s[n] = o;
+      }), h.onSubmit(s, e);
+    }
+  }, E = (e, l) => {
+    const s = e.props.data, o = s.id ?? s.name ?? `form-field-${l}`, n = s.label, f = s.required, m = s.errorMessage, i = s.helperText, d = !!m;
+    let p = null;
+    switch (e.type) {
+      case "input":
+        p = /* @__PURE__ */ a(
+          D,
+          {
+            data: { ...e.props.data, id: o },
+            events: e.props.events,
+            tokens: e.props.tokens,
+            className: e.props.className
+          }
+        );
+        break;
+      case "textarea":
+        p = /* @__PURE__ */ a(
+          j,
+          {
+            data: { ...e.props.data, id: o },
+            events: e.props.events,
+            tokens: e.props.tokens,
+            className: e.props.className
+          }
+        );
+        break;
+      case "select":
+        p = /* @__PURE__ */ a(
+          C,
+          {
+            data: { ...e.props.data, id: o },
+            events: e.props.events,
+            tokens: e.props.tokens,
+            className: e.props.className
+          }
+        );
+        break;
+      case "checkbox":
+        p = /* @__PURE__ */ a(
+          L,
+          {
+            data: { ...e.props.data, id: o },
+            events: e.props.events,
+            tokens: e.props.tokens,
+            className: e.props.className
+          }
+        );
+        break;
+      case "radio":
+        p = /* @__PURE__ */ a(
+          R,
+          {
+            data: { ...e.props.data, id: o },
+            events: e.props.events,
+            tokens: e.props.tokens,
+            className: e.props.className
+          }
+        );
+        break;
+      default:
+        return null;
+    }
+    return e.type === "checkbox" ? /* @__PURE__ */ c("div", { className: r.fieldWrapper, children: [
+      /* @__PURE__ */ c("label", { htmlFor: o, className: r.checkboxLabelWrapper, children: [
+        p,
+        n && /* @__PURE__ */ c("span", { className: r.fieldLabelText, children: [
+          n,
+          f && /* @__PURE__ */ a("span", { className: r.required, "aria-hidden": "true", children: "*" })
+        ] })
+      ] }),
+      d && /* @__PURE__ */ a("span", { className: r.fieldErrorMessage, role: "alert", children: m }),
+      !d && i && /* @__PURE__ */ a("span", { className: r.fieldHelperText, children: i })
+    ] }, l) : /* @__PURE__ */ c("div", { className: r.fieldWrapper, children: [
+      n && /* @__PURE__ */ c("label", { htmlFor: o, className: r.fieldLabel, children: [
+        n,
+        f && /* @__PURE__ */ a("span", { className: r.required, "aria-hidden": "true", children: "*" })
+      ] }),
+      p,
+      d && /* @__PURE__ */ a("span", { className: r.fieldErrorMessage, role: "alert", children: m }),
+      !d && i && /* @__PURE__ */ a("span", { className: r.fieldHelperText, children: i })
+    ] }, l);
+  }, q = {
+    ...t?.color?.background && {
+      "--formgroup-bg": t.color.background.default
+    },
+    ...t?.spacing?.gap && {
+      "--formgroup-gap": t.spacing.gap.default
+    },
+    ...t?.spacing?.padding && {
+      "--formgroup-padding": t.spacing.padding.default
+    },
+    ...t?.border?.borderRadius && {
+      "--formgroup-border-radius": t.border.borderRadius.default
+    }
+  };
+  return /* @__PURE__ */ c(
+    B,
+    {
+      "data-tui-pattern": "base",
+      data: { as: "form", action: T, method: F },
+      colorPalette: k,
+      colorSource: x,
+      customColor: M,
+      className: [r.formGroup, v ?? ""].filter(Boolean).join(" "),
+      style: q,
+      events: { onSubmit: y },
+      children: [
+        g && /* @__PURE__ */ a("div", { className: r.successMessage, role: "status", "aria-live": "polite", children: g }),
+        N && /* @__PURE__ */ a("div", { className: r.errorMessage, role: "alert", "aria-live": "assertive", children: N }),
+        /* @__PURE__ */ a("div", { className: r.fieldsContainer, children: S.map(E) }),
+        b && /* @__PURE__ */ a("div", { className: r.actionsContainer, children: /* @__PURE__ */ a(W, { ...b }) })
+      ]
+    }
+  );
+};
+export {
+  O as default
+};
+//# sourceMappingURL=FormGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sources":["../../../../../src/ui/patterns/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\nimport type { FormGroupModel, FormFieldDescriptor } from '@tramo-digital/types';\nimport Frame from '../../primitives/Frame/Frame';\nimport Input from '../../primitives/Input/Input';\nimport Textarea from '../../primitives/Textarea/Textarea';\nimport Select from '../../primitives/Select/Select';\nimport Checkbox from '../../primitives/Checkbox/Checkbox';\nimport Radio from '../../primitives/Radio/Radio';\nimport Button from '../../primitives/Button/Button';\nimport styles from './FormGroup.module.css';\n\nexport interface FormGroupProps {\n  id?: FormGroupModel['id'];\n  data: FormGroupModel['data'];\n  events?: FormGroupModel['events'];\n  tokens?: FormGroupModel['tokens'];\n  className?: FormGroupModel['className'];\n  colorPalette?: FormGroupModel['colorPalette'];\n  colorSource?: FormGroupModel['colorSource'];\n  customColor?: FormGroupModel['customColor'];\n}\n\nconst FormGroup: React.FC<FormGroupProps> = ({\n  data,\n  events,\n  tokens,\n  className,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = '6f4ad4e62e350f295c6b15e56e26d66d';\n\n  const {\n    action,\n    method = 'post',\n    fields = [],\n    submitButton,\n    successMessage,\n    errorMessage,\n  } = data;\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    if (events?.onSubmit) {\n      e.preventDefault();\n      const formData = new FormData(e.currentTarget);\n      const values: Record<string, unknown> = {};\n      formData.forEach((value, key) => {\n        values[key] = value;\n      });\n      events.onSubmit(values, e);\n    }\n  };\n\n  const renderField = (field: FormFieldDescriptor, idx: number) => {\n    const fieldData = field.props.data as {\n      name?: string;\n      id?: string;\n      label?: string;\n      required?: boolean;\n      errorMessage?: string;\n      helperText?: string;\n    };\n    const fieldId = fieldData.id ?? fieldData.name ?? `form-field-${idx}`;\n    const label = fieldData.label;\n    const required = fieldData.required;\n    const fieldErrorMessage = fieldData.errorMessage;\n    const helperText = fieldData.helperText;\n    const hasError = !!fieldErrorMessage;\n\n    let control: React.ReactNode = null;\n    switch (field.type) {\n      case 'input':\n        control = (\n          <Input\n            data={{ ...field.props.data, id: fieldId } as any}\n            events={field.props.events as any}\n            tokens={field.props.tokens as any}\n            className={field.props.className}\n          />\n        );\n        break;\n      case 'textarea':\n        control = (\n          <Textarea\n            data={{ ...field.props.data, id: fieldId } as any}\n            events={field.props.events as any}\n            tokens={field.props.tokens as any}\n            className={field.props.className}\n          />\n        );\n        break;\n      case 'select':\n        control = (\n          <Select\n            data={{ ...field.props.data, id: fieldId } as any}\n            events={field.props.events as any}\n            tokens={field.props.tokens as any}\n            className={field.props.className}\n          />\n        );\n        break;\n      case 'checkbox':\n        control = (\n          <Checkbox\n            data={{ ...field.props.data, id: fieldId } as any}\n            events={field.props.events as any}\n            tokens={field.props.tokens as any}\n            className={field.props.className}\n          />\n        );\n        break;\n      case 'radio':\n        control = (\n          <Radio\n            data={{ ...field.props.data, id: fieldId } as any}\n            events={field.props.events as any}\n            tokens={field.props.tokens as any}\n            className={field.props.className}\n          />\n        );\n        break;\n      default:\n        return null;\n    }\n\n    if (field.type === 'checkbox') {\n      return (\n        <div key={idx} className={styles.fieldWrapper}>\n          <label htmlFor={fieldId} className={styles.checkboxLabelWrapper}>\n            {control}\n            {label && (\n              <span className={styles.fieldLabelText}>\n                {label}\n                {required && (\n                  <span className={styles.required} aria-hidden=\"true\">\n                    *\n                  </span>\n                )}\n              </span>\n            )}\n          </label>\n          {hasError && (\n            <span className={styles.fieldErrorMessage} role=\"alert\">\n              {fieldErrorMessage}\n            </span>\n          )}\n          {!hasError && helperText && (\n            <span className={styles.fieldHelperText}>{helperText}</span>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div key={idx} className={styles.fieldWrapper}>\n        {label && (\n          <label htmlFor={fieldId} className={styles.fieldLabel}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n        {control}\n        {hasError && (\n          <span className={styles.fieldErrorMessage} role=\"alert\">\n            {fieldErrorMessage}\n          </span>\n        )}\n        {!hasError && helperText && (\n          <span className={styles.fieldHelperText}>{helperText}</span>\n        )}\n      </div>\n    );\n  };\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      '--formgroup-bg': tokens.color.background.default,\n    }),\n    ...(tokens?.spacing?.gap && {\n      '--formgroup-gap': tokens.spacing.gap.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      '--formgroup-padding': tokens.spacing.padding.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      '--formgroup-border-radius': tokens.border.borderRadius.default,\n    }),\n  };\n\n  return (\n    <Frame\n      data-tui-pattern=\"base\"\n      data={{ as: 'form', action, method }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={[styles.formGroup, className ?? ''].filter(Boolean).join(' ')}\n      style={tokenStyles as React.CSSProperties}\n      events={{ onSubmit: handleSubmit as unknown as Record<string, unknown> }}\n    >\n      {successMessage && (\n        <div className={styles.successMessage} role=\"status\" aria-live=\"polite\">\n          {successMessage}\n        </div>\n      )}\n\n      {errorMessage && (\n        <div className={styles.errorMessage} role=\"alert\" aria-live=\"assertive\">\n          {errorMessage}\n        </div>\n      )}\n\n      <div className={styles.fieldsContainer}>{fields.map(renderField)}</div>\n\n      {submitButton && (\n        <div className={styles.actionsContainer}>\n          <Button {...submitButton} />\n        </div>\n      )}\n    </Frame>\n  );\n};\n\nexport default FormGroup;\n"],"names":["FormGroup","data","events","tokens","className","colorPalette","colorSource","customColor","action","method","fields","submitButton","successMessage","errorMessage","handleSubmit","formData","values","value","key","renderField","field","idx","fieldData","fieldId","label","required","fieldErrorMessage","helperText","hasError","control","jsx","Input","Textarea","Select","Checkbox","Radio","jsxs","styles","tokenStyles","Frame","Button"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+const e = "eVNf2c-W", s = "rGoYWDTP", r = "TD1aT0Z4", o = "-k1WSSHI", a = "pJ6feoQA", c = "pvl6VefE", n = "_2AX1A3GR", t = "elJp8ve1", l = "anpNApoP", i = "cQKTcn5V", p = "TV5nz3wD", f = "ErMKXWp5", d = {
+  formGroup: e,
+  fieldsContainer: s,
+  actionsContainer: r,
+  successMessage: o,
+  errorMessage: a,
+  fieldWrapper: c,
+  fieldLabel: n,
+  checkboxLabelWrapper: t,
+  fieldLabelText: l,
+  required: i,
+  fieldErrorMessage: p,
+  fieldHelperText: f
+};
+export {
+  r as actionsContainer,
+  t as checkboxLabelWrapper,
+  d as default,
+  a as errorMessage,
+  p as fieldErrorMessage,
+  f as fieldHelperText,
+  n as fieldLabel,
+  l as fieldLabelText,
+  c as fieldWrapper,
+  s as fieldsContainer,
+  e as formGroup,
+  i as required,
+  o as successMessage
+};
+//# sourceMappingURL=FormGroup.module.css.js.map

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

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

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

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

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

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