@tramo-digital/react-ui 0.0.0-alpha

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../../src/ui/primitives/Badge/Badge.tsx"],"sourcesContent":["import type { BadgeModel } from \"@tramo-digital/types\";\nimport React from \"react\";\nimport Frame from \"../Frame/Frame\";\nimport styles from \"./Badge.module.css\";\n\nexport interface BadgeProps extends BadgeModel {\n  children?: React.ReactNode;\n}\n\nconst Badge: React.FC<BadgeProps> = ({\n  className,\n  data,\n  tokens,\n  children,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = \"5509e18d04e003f383df1eafe14d2c48\";\n\n  const { text, status = \"information\" } = data;\n\n  const tokenStyles = {\n    ...(tokens?.color?.background && {\n      \"--badge-bg\": tokens.color.background.default,\n    }),\n    ...(tokens?.color?.text && {\n      \"--badge-text\": tokens.color.text.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--badge-padding\": tokens.spacing.padding.default,\n    }),\n  };\n\n  return (\n    <Frame\n      data={{ as: \"span\" }}\n      data-tui-status={status}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={`${styles.tuiBadge} ${className ? className : \"\"}`}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <span className={styles.text}>{text ?? children}</span>\n    </Frame>\n  );\n};\n\nexport default Badge;\n"],"names":["Badge","className","data","tokens","children","colorPalette","colorSource","customColor","text","status","tokenStyles","jsx","Frame","styles"],"mappings":";;;AASA,MAAMA,IAA8B,CAAC;AAAA,EACnC,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACJ,MAAI,CAACL,EAAM,QAAO;AAGlB,QAAM,EAAE,MAAAM,GAAM,QAAAC,IAAS,cAAA,IAAkBP,GAEnCQ,IAAc;AAAA,IAClB,GAAIP,GAAQ,OAAO,cAAc;AAAA,MAC/B,cAAcA,EAAO,MAAM,WAAW;AAAA,IAAA;AAAA,IAExC,GAAIA,GAAQ,OAAO,QAAQ;AAAA,MACzB,gBAAgBA,EAAO,MAAM,KAAK;AAAA,IAAA;AAAA,IAEpC,GAAIA,GAAQ,SAAS,WAAW;AAAA,MAC9B,mBAAmBA,EAAO,QAAQ,QAAQ;AAAA,IAAA;AAAA,EAC5C;AAGF,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAM,EAAE,IAAI,OAAA;AAAA,MACZ,mBAAiBH;AAAA,MACjB,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAW,GAAGM,EAAO,QAAQ,IAAIZ,KAAwB,EAAE;AAAA,MAC3D,OAAOS;AAAA,MAEP,4BAAC,QAAA,EAAK,WAAWG,EAAO,MAAO,eAAQT,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGtD;"}

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

@@ -0,0 +1,10 @@
+const t = "vWDg8EWz", e = "zx0lMATz", s = {
+  tuiBadge: t,
+  text: e
+};
+export {
+  s as default,
+  e as text,
+  t as tuiBadge
+};
+//# sourceMappingURL=Badge.module.css.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { jsxs as S, jsx as o } from "react/jsx-runtime";
+import C from "../Frame/Frame.js";
+import c from "../InterfaceIcon/InterfaceIcon.js";
+import i from "./Button.module.css.js";
+const I = ({
+  children: g,
+  data: t,
+  events: l,
+  tokens: a,
+  colorPalette: d,
+  colorSource: b,
+  customColor: u,
+  className: f,
+  ...m
+}) => {
+  if (!t) return;
+  const {
+    positioning: p = "left",
+    size: h = "md",
+    variant: y = "primary",
+    text: j = ""
+  } = t, s = {};
+  [
+    { group: a?.spacing?.padding, base: "padding" },
+    { group: a?.spacing?.paddingTopBottom, base: "padding-top-bottom" },
+    { group: a?.spacing?.paddingLeftRight, base: "padding-left-right" },
+    { group: a?.spacing?.gap, base: "gap" },
+    { group: a?.border?.borderRadius, base: "border-radius" },
+    { group: a?.border?.borderWidth, base: "border-width" },
+    { group: a?.color?.border, base: "border-color" },
+    { group: a?.color?.background, base: "background" },
+    { group: a?.typography?.fontFamily, base: "label-font-family" },
+    { group: a?.typography?.fontSize, base: "label-font-size" },
+    { group: a?.typography?.fontWeight, base: "label-font-weight" },
+    { group: a?.typography?.lineHeight, base: "label-line-height" },
+    { group: a?.typography?.letterSpacing, base: "label-letter-spacing" }
+  ].forEach(({ group: e, base: x }) => {
+    e && typeof e == "object" && Object.entries(e).forEach(
+      ([z, n]) => {
+        n != null && (s[`--button-${z}-${x}`] = String(n));
+      }
+    );
+  });
+  const B = i[`button-${h}`], r = t.icon && t.icon.type ? {
+    ...t.icon
+  } : void 0, N = [i.tuiButton, B, f].filter(Boolean).join(" ").trim();
+  return /* @__PURE__ */ S(
+    C,
+    {
+      data: { as: "button" },
+      colorPalette: d,
+      colorSource: b,
+      customColor: u,
+      "data-tui-dynamic-states": "default",
+      "data-tui-primitive": "base",
+      "data-tui-appearance-buttons": y,
+      className: N,
+      onClick: l?.onClick,
+      style: s,
+      ...m,
+      children: [
+        r && p === "left" && /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(c, { data: r, className: i.icon }) }),
+        /* @__PURE__ */ o("span", { className: i.label, children: g ?? j }),
+        r && p === "right" && /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(c, { data: r, className: i.icon }) })
+      ]
+    }
+  );
+};
+export {
+  I as default
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../src/ui/primitives/Button/Button.tsx"],"sourcesContent":["import type { ButtonModel, InterfaceIconData } from \"@tramo-digital/types\";\nimport React from \"react\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport InterfaceIcon from \"../../primitives/InterfaceIcon/InterfaceIcon\";\nimport styles from \"./Button.module.css\";\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  id?: ButtonModel[\"id\"];\n  data?: ButtonModel[\"data\"];\n  events?: ButtonModel[\"events\"];\n  tokens?: ButtonModel[\"tokens\"];\n  className?: ButtonModel[\"className\"];\n  colorPalette?: ButtonModel[\"colorPalette\"];\n  colorSource?: ButtonModel[\"colorSource\"];\n  customColor?: ButtonModel[\"customColor\"];\n  children?: React.ReactNode;\n}\n\nconst ButtonBase: React.FC<ButtonProps> = ({\n  children,\n  data,\n  events,\n  tokens,\n  colorPalette,\n  colorSource,\n  customColor,\n  className,\n  ...rest\n}) => {\n  if (!data) return;\n  const _fingerprint = \"e9dcaf2f098aea0b50b1257726763774\";\n  const {\n    positioning = \"left\",\n    size = \"md\",\n    variant = \"primary\",\n    text = \"\",\n  } = data;\n\n  const tokenStyles: Record<string, string> = {};\n\n  const tokenMappings = [\n    { group: tokens?.spacing?.padding, base: \"padding\" },\n    { group: tokens?.spacing?.paddingTopBottom, base: \"padding-top-bottom\" },\n    { group: tokens?.spacing?.paddingLeftRight, base: \"padding-left-right\" },\n    { group: tokens?.spacing?.gap, base: \"gap\" },\n    { group: tokens?.border?.borderRadius, base: \"border-radius\" },\n    { group: tokens?.border?.borderWidth, base: \"border-width\" },\n    { group: tokens?.color?.border, base: \"border-color\" },\n    { group: tokens?.color?.background, base: \"background\" },\n    { group: tokens?.typography?.fontFamily, base: \"label-font-family\" },\n    { group: tokens?.typography?.fontSize, base: \"label-font-size\" },\n    { group: tokens?.typography?.fontWeight, base: \"label-font-weight\" },\n    { group: tokens?.typography?.lineHeight, base: \"label-line-height\" },\n    { group: tokens?.typography?.letterSpacing, base: \"label-letter-spacing\" },\n  ];\n\n  tokenMappings.forEach(({ group, base }) => {\n    if (group && typeof group === \"object\") {\n      Object.entries(group as Record<string, unknown>).forEach(\n        ([scale, value]) => {\n          if (value !== undefined && value !== null) {\n            tokenStyles[`--button-${scale}-${base}`] = String(value);\n          }\n        },\n      );\n    }\n  });\n\n  const sizeClassname = styles[`button-${size}`];\n\n  const iconData: InterfaceIconData | undefined =\n    data.icon && data.icon.type\n      ? {\n          ...data.icon,\n        }\n      : undefined;\n\n  const classNames = [styles.tuiButton, sizeClassname, className]\n    .filter(Boolean)\n    .join(\" \")\n    .trim();\n\n  return (\n    <Frame\n      data={{ as: \"button\" }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      data-tui-dynamic-states=\"default\"\n      data-tui-primitive=\"base\"\n      data-tui-appearance-buttons={variant}\n      className={classNames}\n      onClick={events?.onClick}\n      style={tokenStyles as React.CSSProperties}\n      {...rest}\n    >\n      {iconData && positioning === \"left\" && (\n        <span>\n          <InterfaceIcon data={iconData} className={styles.icon} />\n        </span>\n      )}\n      <span className={styles.label}>{children ?? text}</span>\n      {iconData && positioning === \"right\" && (\n        <span>\n          <InterfaceIcon data={iconData} className={styles.icon} />\n        </span>\n      )}\n    </Frame>\n  );\n};\n\nexport default ButtonBase;\n"],"names":["ButtonBase","children","data","events","tokens","colorPalette","colorSource","customColor","className","rest","positioning","size","variant","text","tokenStyles","group","base","scale","value","sizeClassname","styles","iconData","classNames","jsxs","Frame","jsx","InterfaceIcon"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+const t = "_8eo-lN1b", o = "oEDrMWZO", n = "XaFiX3qc", b = "_6STnjb-q", u = "jjgS0jGH", s = "_617stgQM", c = {
+  tuiButton: t,
+  label: o,
+  icon: n,
+  "button-lg": "_6STnjb-q",
+  buttonLg: b,
+  "button-md": "jjgS0jGH",
+  buttonMd: u,
+  "button-sm": "_617stgQM",
+  buttonSm: s
+};
+export {
+  b as buttonLg,
+  u as buttonMd,
+  s as buttonSm,
+  c as default,
+  n as icon,
+  o as label,
+  t as tuiButton
+};
+//# sourceMappingURL=Button.module.css.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,134 @@
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { useRef as N, useId as z, useEffect as B } from "react";
+import R from "../Frame/Frame.js";
+import e from "./Checkbox.module.css.js";
+const q = ({
+  data: l,
+  events: b,
+  tokens: r,
+  className: n,
+  colorPalette: u,
+  colorSource: f,
+  customColor: x
+}) => {
+  if (!l) return null;
+  const {
+    name: i,
+    checked: m = !1,
+    value: p,
+    disabled: c = !1,
+    required: t = !1,
+    id: g,
+    indeterminate: a = !1,
+    errorMessage: w
+  } = l, d = N(null), k = z(), v = g ?? i ?? k, s = !!w;
+  B(() => {
+    d.current && (d.current.indeterminate = a);
+  }, [a]);
+  const C = {
+    ...r?.color?.box && {
+      "--checkbox-color-box": r.color.box.default
+    },
+    ...r?.color?.boxChecked && {
+      "--checkbox-color-box-checked": r.color.boxChecked.default
+    },
+    ...r?.color?.checkmark && {
+      "--checkbox-color-checkmark": r.color.checkmark.default
+    },
+    ...r?.color?.border && {
+      "--checkbox-color-border": r.color.border.default
+    },
+    ...r?.color?.borderChecked && {
+      "--checkbox-color-border-checked": r.color.borderChecked.default
+    },
+    ...r?.color?.error && {
+      "--checkbox-color-error": r.color.error.default
+    },
+    ...r?.border?.borderRadius && {
+      "--checkbox-border-radius": r.border.borderRadius.default
+    },
+    ...r?.border?.borderWidth && {
+      "--checkbox-border-width": r.border.borderWidth.default
+    },
+    ...r?.dimension?.size && {
+      "--checkbox-size": r.dimension.size.default
+    }
+  };
+  return /* @__PURE__ */ y(
+    R,
+    {
+      data: { as: "span" },
+      "data-tui-primitive": "base",
+      "data-tui-dynamic-states": "default",
+      colorPalette: u,
+      colorSource: f,
+      customColor: x,
+      className: [
+        e.checkboxWrapper,
+        s ? e.hasError : "",
+        c ? e.disabled : "",
+        n ?? ""
+      ].filter(Boolean).join(" "),
+      style: C,
+      children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            ref: d,
+            id: v,
+            name: i,
+            type: "checkbox",
+            checked: m,
+            value: p,
+            disabled: c,
+            required: t,
+            "aria-required": t,
+            "aria-disabled": c,
+            "aria-invalid": s,
+            className: e.input,
+            onChange: (h) => b?.onChange?.(h.target.checked, h)
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: e.customBox, "aria-hidden": "true", children: a ? /* @__PURE__ */ o(
+          "svg",
+          {
+            className: e.icon,
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ o(
+              "rect",
+              {
+                x: "3",
+                y: "7",
+                width: "10",
+                height: "2",
+                rx: "1",
+                fill: "currentColor"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ o(
+          "svg",
+          {
+            className: e.icon,
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ o(
+              "path",
+              {
+                d: "M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z",
+                fill: "currentColor"
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  q as default
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/ui/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useId, useRef, useEffect } from \"react\";\nimport type { CheckboxModel } from \"@tramo-digital/types\";\nimport Frame from \"../Frame/Frame\";\nimport styles from \"./Checkbox.module.css\";\n\nexport interface CheckboxProps {\n  id?: CheckboxModel[\"id\"];\n  data: CheckboxModel[\"data\"];\n  events?: CheckboxModel[\"events\"];\n  tokens?: CheckboxModel[\"tokens\"];\n  className?: CheckboxModel[\"className\"];\n  colorPalette?: CheckboxModel[\"colorPalette\"];\n  colorSource?: CheckboxModel[\"colorSource\"];\n  customColor?: CheckboxModel[\"customColor\"];\n}\n\nconst Checkbox: React.FC<CheckboxProps> = ({\n  data,\n  events,\n  tokens,\n  className,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  if (!data) return null;\n  const _fingerprint = \"f1682b49626fe5bd1b24c436bf8b72fe\";\n\n  const {\n    name,\n    checked = false,\n    value,\n    disabled = false,\n    required = false,\n    id,\n    indeterminate = false,\n    errorMessage,\n  } = data;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const fieldId = id ?? name ?? generatedId;\n  const hasError = !!errorMessage;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate]);\n\n  const tokenStyles = {\n    ...(tokens?.color?.box && {\n      \"--checkbox-color-box\": tokens.color.box.default,\n    }),\n    ...(tokens?.color?.boxChecked && {\n      \"--checkbox-color-box-checked\": tokens.color.boxChecked.default,\n    }),\n    ...(tokens?.color?.checkmark && {\n      \"--checkbox-color-checkmark\": tokens.color.checkmark.default,\n    }),\n    ...(tokens?.color?.border && {\n      \"--checkbox-color-border\": tokens.color.border.default,\n    }),\n    ...(tokens?.color?.borderChecked && {\n      \"--checkbox-color-border-checked\": tokens.color.borderChecked.default,\n    }),\n    ...(tokens?.color?.error && {\n      \"--checkbox-color-error\": tokens.color.error.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      \"--checkbox-border-radius\": tokens.border.borderRadius.default,\n    }),\n    ...(tokens?.border?.borderWidth && {\n      \"--checkbox-border-width\": tokens.border.borderWidth.default,\n    }),\n    ...(tokens?.dimension?.size && {\n      \"--checkbox-size\": tokens.dimension.size.default,\n    }),\n  };\n\n  return (\n    <Frame\n      data={{ as: \"span\" }}\n      data-tui-primitive=\"base\"\n      data-tui-dynamic-states=\"default\"\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={[\n        styles.checkboxWrapper,\n        hasError ? styles.hasError : \"\",\n        disabled ? styles.disabled : \"\",\n        className ?? \"\",\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <input\n        ref={inputRef}\n        id={fieldId}\n        name={name}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        disabled={disabled}\n        required={required}\n        aria-required={required}\n        aria-disabled={disabled}\n        aria-invalid={hasError}\n        className={styles.input}\n        onChange={(e) => events?.onChange?.(e.target.checked, e)}\n      />\n      <span className={styles.customBox} aria-hidden=\"true\">\n        {indeterminate ? (\n          <svg\n            className={styles.icon}\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <rect\n              x=\"3\"\n              y=\"7\"\n              width=\"10\"\n              height=\"2\"\n              rx=\"1\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        ) : (\n          <svg\n            className={styles.icon}\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        )}\n      </span>\n    </Frame>\n  );\n};\n\nexport default Checkbox;\n"],"names":["Checkbox","data","events","tokens","className","colorPalette","colorSource","customColor","name","checked","value","disabled","required","id","indeterminate","errorMessage","inputRef","useRef","generatedId","useId","fieldId","hasError","useEffect","tokenStyles","jsxs","Frame","styles","jsx","e"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+const o = "kXD43XPG", s = "q380Is0r", c = "jB45drck", t = "oIAbTQYG", r = "hH9ZEggS", n = "qptMp3s0", e = {
+  checkboxWrapper: o,
+  input: s,
+  customBox: c,
+  disabled: t,
+  hasError: r,
+  icon: n
+};
+export {
+  o as checkboxWrapper,
+  c as customBox,
+  e as default,
+  t as disabled,
+  r as hasError,
+  n as icon,
+  s as input
+};
+//# sourceMappingURL=Checkbox.module.css.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,263 @@
+import { jsx as y } from "react/jsx-runtime";
+import c from "./Frame.module.css.js";
+const x = ({
+  data: d = { as: "div" },
+  tokens: a,
+  children: e,
+  className: r,
+  colorPalette: f,
+  colorSource: l = "palette",
+  customColor: t,
+  opacity: o,
+  style: i,
+  ...m
+}) => {
+  const { as: u = "div" } = d, g = {
+    /* Color */
+    ...a?.color?.background && {
+      "--frame-background-color": a.color.background.default
+    },
+    ...a?.color?.border && {
+      "--frame-border-color": a.color.border.default
+    },
+    ...a?.color?.text && {
+      "--frame-text-color": a.color.text.default
+    },
+    ...a?.color?.outline && {
+      "--frame-outline": a.color.outline.default
+    },
+    /* Background */
+    ...a?.background?.background && {
+      "--frame-background": a.background.background.default
+    },
+    ...a?.background?.backgroundColor && {
+      "--frame-background-color": a.background.backgroundColor.default
+    },
+    ...a?.background?.backgroundImage && {
+      "--frame-background-image": a.background.backgroundImage.default
+    },
+    ...a?.background?.backgroundPosition && {
+      "--frame-background-position": a.background.backgroundPosition.default
+    },
+    ...a?.background?.backgroundRepeat && {
+      "--frame-background-repeat": a.background.backgroundRepeat.default
+    },
+    ...a?.background?.backgroundSize && {
+      "--frame-background-size": a.background.backgroundSize.default
+    },
+    /* Spacing */
+    ...a?.spacing?.padding && {
+      "--frame-padding": a.spacing.padding.default
+    },
+    ...a?.spacing?.paddingTop && {
+      "--frame-padding-top": a.spacing.paddingTop.default
+    },
+    ...a?.spacing?.paddingRight && {
+      "--frame-padding-right": a.spacing.paddingRight.default
+    },
+    ...a?.spacing?.paddingBottom && {
+      "--frame-padding-bottom": a.spacing.paddingBottom.default
+    },
+    ...a?.spacing?.paddingLeft && {
+      "--frame-padding-left": a.spacing.paddingLeft.default
+    },
+    ...a?.spacing?.margin && {
+      "--frame-margin": a.spacing.margin.default
+    },
+    ...a?.spacing?.marginTop && {
+      "--frame-margin-top": a.spacing.marginTop.default
+    },
+    ...a?.spacing?.marginRight && {
+      "--frame-margin-right": a.spacing.marginRight.default
+    },
+    ...a?.spacing?.marginBottom && {
+      "--frame-margin-bottom": a.spacing.marginBottom.default
+    },
+    ...a?.spacing?.marginLeft && {
+      "--frame-margin-left": a.spacing.marginLeft.default
+    },
+    ...a?.spacing?.gap && { "--frame-gap": a.spacing.gap.default },
+    /* Border */
+    ...a?.border?.border && {
+      "--frame-border": a.border.border.default
+    },
+    ...a?.border?.borderTop && {
+      "--frame-border-top": a.border.borderTop.default
+    },
+    ...a?.border?.borderRight && {
+      "--frame-border-right": a.border.borderRight.default
+    },
+    ...a?.border?.borderBottom && {
+      "--frame-border-bottom": a.border.borderBottom.default
+    },
+    ...a?.border?.borderLeft && {
+      "--frame-border-left": a.border.borderLeft.default
+    },
+    ...a?.border?.borderWidth && {
+      "--frame-border-width": a.border.borderWidth.default
+    },
+    ...a?.border?.borderStyle && {
+      "--frame-border-style": a.border.borderStyle.default
+    },
+    ...a?.border?.borderRadius && {
+      "--frame-border-radius": a.border.borderRadius.default
+    },
+    /* Dimension */
+    ...a?.dimension?.width && {
+      "--frame-width": a.dimension.width.default
+    },
+    ...a?.dimension?.minWidth && {
+      "--frame-min-width": a.dimension.minWidth.default
+    },
+    ...a?.dimension?.maxWidth && {
+      "--frame-max-width": a.dimension.maxWidth.default
+    },
+    ...a?.dimension?.height && {
+      "--frame-height": a.dimension.height.default
+    },
+    ...a?.dimension?.minHeight && {
+      "--frame-min-height": a.dimension.minHeight.default
+    },
+    ...a?.dimension?.maxHeight && {
+      "--frame-max-height": a.dimension.maxHeight.default
+    },
+    ...a?.dimension?.boxSizing && {
+      "--frame-box-sizing": a.dimension.boxSizing.default
+    },
+    ...a?.dimension?.overflow && {
+      "--frame-overflow": a.dimension.overflow.default
+    },
+    ...a?.dimension?.overflowX && {
+      "--frame-overflow-x": a.dimension.overflowX.default
+    },
+    ...a?.dimension?.overflowY && {
+      "--frame-overflow-y": a.dimension.overflowY.default
+    },
+    /* Layout */
+    ...a?.layout?.display && {
+      "--frame-display": a.layout.display.default
+    },
+    ...a?.layout?.position && {
+      "--frame-position": a.layout.position.default
+    },
+    ...a?.layout?.top && { "--frame-top": a.layout.top.default },
+    ...a?.layout?.right && {
+      "--frame-right": a.layout.right.default
+    },
+    ...a?.layout?.bottom && {
+      "--frame-bottom": a.layout.bottom.default
+    },
+    ...a?.layout?.left && { "--frame-left": a.layout.left.default },
+    ...a?.layout?.flex && { "--frame-flex": a.layout.flex.default },
+    ...a?.layout?.flexDirection && {
+      "--frame-flex-direction": a.layout.flexDirection.default
+    },
+    ...a?.layout?.alignItems && {
+      "--frame-align-items": a.layout.alignItems.default
+    },
+    ...a?.layout?.justifyContent && {
+      "--frame-justify-content": a.layout.justifyContent.default
+    },
+    ...a?.layout?.flexWrap && {
+      "--frame-flex-wrap": a.layout.flexWrap.default
+    },
+    ...a?.layout?.flexGrow && {
+      "--frame-flex-grow": a.layout.flexGrow.default
+    },
+    ...a?.layout?.flexShrink && {
+      "--frame-flex-shrink": a.layout.flexShrink.default
+    },
+    ...a?.layout?.flexBasis && {
+      "--frame-flex-basis": a.layout.flexBasis.default
+    },
+    ...a?.layout?.alignSelf && {
+      "--frame-align-self": a.layout.alignSelf.default
+    },
+    ...a?.layout?.justifySelf && {
+      "--frame-justify-self": a.layout.justifySelf.default
+    },
+    ...a?.layout?.grid && { "--frame-grid": a.layout.grid.default },
+    ...a?.layout?.gridArea && {
+      "--frame-grid-area": a.layout.gridArea.default
+    },
+    ...a?.layout?.gridTemplateAreas && {
+      "--frame-grid-template-areas": a.layout.gridTemplateAreas.default
+    },
+    ...a?.layout?.gridTemplateColumns && {
+      "--frame-grid-template-columns": a.layout.gridTemplateColumns.default
+    },
+    ...a?.layout?.gridTemplateRows && {
+      "--frame-grid-template-rows": a.layout.gridTemplateRows.default
+    },
+    /* Typography */
+    ...a?.typography?.fontFamily && {
+      "--frame-font-family": Array.isArray(a.typography.fontFamily.default) ? a.typography.fontFamily.default.join(", ") : a.typography.fontFamily.default
+    },
+    ...a?.typography?.fontSize && {
+      "--frame-font-size": a.typography.fontSize.default
+    },
+    ...a?.typography?.fontWeight && {
+      "--frame-font-weight": a.typography.fontWeight.default
+    },
+    ...a?.typography?.lineHeight && {
+      "--frame-line-height": a.typography.lineHeight.default
+    },
+    ...a?.typography?.letterSpacing && {
+      "--frame-letter-spacing": a.typography.letterSpacing.default
+    },
+    ...a?.typography?.textAlign && {
+      "--frame-text-align": a.typography.textAlign.default
+    },
+    ...a?.typography?.textTransform && {
+      "--frame-text-transform": a.typography.textTransform.default
+    },
+    ...a?.typography?.textDecoration && {
+      "--frame-text-decoration": a.typography.textDecoration.default
+    },
+    /* Effect */
+    ...a?.effect?.opacity && {
+      "--frame-opacity": a.effect.opacity.default
+    },
+    ...a?.effect?.filter && {
+      "--frame-filter": a.effect.filter.default
+    },
+    ...a?.effect?.transition && {
+      "--frame-transition": a.effect.transition.default
+    },
+    ...a?.elevation?.boxShadow && {
+      "--frame-shadow": a.elevation.boxShadow.default
+    },
+    ...a?.elevation?.zIndex && {
+      "--frame-z-index": a.elevation.zIndex.default
+    },
+    /* Motion */
+    ...a?.motion?.animation && {
+      "--frame-animation": a.motion.animation.default
+    },
+    ...a?.motion?.transform && {
+      "--frame-transform": a.motion.transform.default
+    },
+    ...a?.motion?.transformOrigin && {
+      "--frame-transform-origin": a.motion.transformOrigin.default
+    },
+    ...i && { ...i }
+  }, p = `${c.frame} ${r ? `${r}` : ""}`.trim();
+  return /* @__PURE__ */ y(
+    u || "div",
+    {
+      "data-tui-semantic": "base",
+      "data-tui-color-source": l,
+      "data-tui-color-palette": f,
+      "data-tui-custom-color": t,
+      "data-tui-opacity": o,
+      className: p,
+      style: g,
+      ...m,
+      children: e
+    }
+  );
+};
+export {
+  x as default
+};
+//# sourceMappingURL=Frame.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.js","sources":["../../../../../src/ui/primitives/Frame/Frame.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./Frame.module.css\";\nimport type { FrameModel } from \"@tramo-digital/types\";\n\nexport interface FrameProps extends React.HTMLAttributes<HTMLElement> {\n  tokens?: FrameModel[\"tokens\"];\n  events?: FrameModel[\"events\"];\n  children?: React.ReactNode;\n  className?: string;\n  data?: FrameModel[\"data\"];\n  colorPalette?: FrameModel[\"colorPalette\"];\n  colorSource?: FrameModel[\"colorSource\"];\n  customColor?: FrameModel[\"customColor\"];\n  opacity?: 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;\n  [key: string]: unknown;\n}\n\nconst Frame: React.FC<FrameProps> = ({\n  data = { as: \"div\" },\n  tokens,\n  children,\n  className,\n  colorPalette,\n  colorSource = \"palette\",\n  customColor,\n  opacity,\n  style,\n  ...rest\n}) => {\n  const { as = \"div\" } = data;\n  const tokenStyles = {\n    /* Color */\n    ...(tokens?.color?.background && {\n      \"--frame-background-color\": tokens.color.background.default,\n    }),\n    ...(tokens?.color?.border && {\n      \"--frame-border-color\": tokens.color.border.default,\n    }),\n    ...(tokens?.color?.text && {\n      \"--frame-text-color\": tokens.color.text.default,\n    }),\n    ...(tokens?.color?.outline && {\n      \"--frame-outline\": tokens.color.outline.default,\n    }),\n\n    /* Background */\n    ...(tokens?.background?.background && {\n      \"--frame-background\": tokens.background.background.default,\n    }),\n    ...(tokens?.background?.backgroundColor && {\n      \"--frame-background-color\": tokens.background.backgroundColor.default,\n    }),\n    ...(tokens?.background?.backgroundImage && {\n      \"--frame-background-image\": tokens.background.backgroundImage.default,\n    }),\n    ...(tokens?.background?.backgroundPosition && {\n      \"--frame-background-position\":\n        tokens.background.backgroundPosition.default,\n    }),\n    ...(tokens?.background?.backgroundRepeat && {\n      \"--frame-background-repeat\": tokens.background.backgroundRepeat.default,\n    }),\n    ...(tokens?.background?.backgroundSize && {\n      \"--frame-background-size\": tokens.background.backgroundSize.default,\n    }),\n\n    /* Spacing */\n    ...(tokens?.spacing?.padding && {\n      \"--frame-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.paddingTop && {\n      \"--frame-padding-top\": tokens.spacing.paddingTop.default,\n    }),\n    ...(tokens?.spacing?.paddingRight && {\n      \"--frame-padding-right\": tokens.spacing.paddingRight.default,\n    }),\n    ...(tokens?.spacing?.paddingBottom && {\n      \"--frame-padding-bottom\": tokens.spacing.paddingBottom.default,\n    }),\n    ...(tokens?.spacing?.paddingLeft && {\n      \"--frame-padding-left\": tokens.spacing.paddingLeft.default,\n    }),\n    ...(tokens?.spacing?.margin && {\n      \"--frame-margin\": tokens.spacing.margin.default,\n    }),\n    ...(tokens?.spacing?.marginTop && {\n      \"--frame-margin-top\": tokens.spacing.marginTop.default,\n    }),\n    ...(tokens?.spacing?.marginRight && {\n      \"--frame-margin-right\": tokens.spacing.marginRight.default,\n    }),\n    ...(tokens?.spacing?.marginBottom && {\n      \"--frame-margin-bottom\": tokens.spacing.marginBottom.default,\n    }),\n    ...(tokens?.spacing?.marginLeft && {\n      \"--frame-margin-left\": tokens.spacing.marginLeft.default,\n    }),\n    ...(tokens?.spacing?.gap && { \"--frame-gap\": tokens.spacing.gap.default }),\n\n    /* Border */\n    ...(tokens?.border?.border && {\n      \"--frame-border\": tokens.border.border.default,\n    }),\n    ...(tokens?.border?.borderTop && {\n      \"--frame-border-top\": tokens.border.borderTop.default,\n    }),\n    ...(tokens?.border?.borderRight && {\n      \"--frame-border-right\": tokens.border.borderRight.default,\n    }),\n    ...(tokens?.border?.borderBottom && {\n      \"--frame-border-bottom\": tokens.border.borderBottom.default,\n    }),\n    ...(tokens?.border?.borderLeft && {\n      \"--frame-border-left\": tokens.border.borderLeft.default,\n    }),\n    ...(tokens?.border?.borderWidth && {\n      \"--frame-border-width\": tokens.border.borderWidth.default,\n    }),\n    ...(tokens?.border?.borderStyle && {\n      \"--frame-border-style\": tokens.border.borderStyle.default,\n    }),\n    ...(tokens?.border?.borderRadius && {\n      \"--frame-border-radius\": tokens.border.borderRadius.default,\n    }),\n\n    /* Dimension */\n    ...(tokens?.dimension?.width && {\n      \"--frame-width\": tokens.dimension.width.default,\n    }),\n    ...(tokens?.dimension?.minWidth && {\n      \"--frame-min-width\": tokens.dimension.minWidth.default,\n    }),\n    ...(tokens?.dimension?.maxWidth && {\n      \"--frame-max-width\": tokens.dimension.maxWidth.default,\n    }),\n    ...(tokens?.dimension?.height && {\n      \"--frame-height\": tokens.dimension.height.default,\n    }),\n    ...(tokens?.dimension?.minHeight && {\n      \"--frame-min-height\": tokens.dimension.minHeight.default,\n    }),\n    ...(tokens?.dimension?.maxHeight && {\n      \"--frame-max-height\": tokens.dimension.maxHeight.default,\n    }),\n    ...(tokens?.dimension?.boxSizing && {\n      \"--frame-box-sizing\": tokens.dimension.boxSizing.default,\n    }),\n    ...(tokens?.dimension?.overflow && {\n      \"--frame-overflow\": tokens.dimension.overflow.default,\n    }),\n    ...(tokens?.dimension?.overflowX && {\n      \"--frame-overflow-x\": tokens.dimension.overflowX.default,\n    }),\n    ...(tokens?.dimension?.overflowY && {\n      \"--frame-overflow-y\": tokens.dimension.overflowY.default,\n    }),\n\n    /* Layout */\n    ...(tokens?.layout?.display && {\n      \"--frame-display\": tokens.layout.display.default,\n    }),\n    ...(tokens?.layout?.position && {\n      \"--frame-position\": tokens.layout.position.default,\n    }),\n    ...(tokens?.layout?.top && { \"--frame-top\": tokens.layout.top.default }),\n    ...(tokens?.layout?.right && {\n      \"--frame-right\": tokens.layout.right.default,\n    }),\n    ...(tokens?.layout?.bottom && {\n      \"--frame-bottom\": tokens.layout.bottom.default,\n    }),\n    ...(tokens?.layout?.left && { \"--frame-left\": tokens.layout.left.default }),\n    ...(tokens?.layout?.flex && { \"--frame-flex\": tokens.layout.flex.default }),\n    ...(tokens?.layout?.flexDirection && {\n      \"--frame-flex-direction\": tokens.layout.flexDirection.default,\n    }),\n    ...(tokens?.layout?.alignItems && {\n      \"--frame-align-items\": tokens.layout.alignItems.default,\n    }),\n    ...(tokens?.layout?.justifyContent && {\n      \"--frame-justify-content\": tokens.layout.justifyContent.default,\n    }),\n    ...(tokens?.layout?.flexWrap && {\n      \"--frame-flex-wrap\": tokens.layout.flexWrap.default,\n    }),\n    ...(tokens?.layout?.flexGrow && {\n      \"--frame-flex-grow\": tokens.layout.flexGrow.default,\n    }),\n    ...(tokens?.layout?.flexShrink && {\n      \"--frame-flex-shrink\": tokens.layout.flexShrink.default,\n    }),\n    ...(tokens?.layout?.flexBasis && {\n      \"--frame-flex-basis\": tokens.layout.flexBasis.default,\n    }),\n    ...(tokens?.layout?.alignSelf && {\n      \"--frame-align-self\": tokens.layout.alignSelf.default,\n    }),\n    ...(tokens?.layout?.justifySelf && {\n      \"--frame-justify-self\": tokens.layout.justifySelf.default,\n    }),\n    ...(tokens?.layout?.grid && { \"--frame-grid\": tokens.layout.grid.default }),\n    ...(tokens?.layout?.gridArea && {\n      \"--frame-grid-area\": tokens.layout.gridArea.default,\n    }),\n    ...(tokens?.layout?.gridTemplateAreas && {\n      \"--frame-grid-template-areas\": tokens.layout.gridTemplateAreas.default,\n    }),\n    ...(tokens?.layout?.gridTemplateColumns && {\n      \"--frame-grid-template-columns\":\n        tokens.layout.gridTemplateColumns.default,\n    }),\n    ...(tokens?.layout?.gridTemplateRows && {\n      \"--frame-grid-template-rows\": tokens.layout.gridTemplateRows.default,\n    }),\n\n    /* Typography */\n    ...(tokens?.typography?.fontFamily && {\n      \"--frame-font-family\": Array.isArray(tokens.typography.fontFamily.default)\n        ? tokens.typography.fontFamily.default.join(\", \")\n        : tokens.typography.fontFamily.default,\n    }),\n    ...(tokens?.typography?.fontSize && {\n      \"--frame-font-size\": tokens.typography.fontSize.default,\n    }),\n    ...(tokens?.typography?.fontWeight && {\n      \"--frame-font-weight\": tokens.typography.fontWeight.default,\n    }),\n    ...(tokens?.typography?.lineHeight && {\n      \"--frame-line-height\": tokens.typography.lineHeight.default,\n    }),\n    ...(tokens?.typography?.letterSpacing && {\n      \"--frame-letter-spacing\": tokens.typography.letterSpacing.default,\n    }),\n    ...(tokens?.typography?.textAlign && {\n      \"--frame-text-align\": tokens.typography.textAlign.default,\n    }),\n    ...(tokens?.typography?.textTransform && {\n      \"--frame-text-transform\": tokens.typography.textTransform.default,\n    }),\n    ...(tokens?.typography?.textDecoration && {\n      \"--frame-text-decoration\": tokens.typography.textDecoration.default,\n    }),\n\n    /* Effect */\n    ...(tokens?.effect?.opacity && {\n      \"--frame-opacity\": tokens.effect.opacity.default,\n    }),\n    ...(tokens?.effect?.filter && {\n      \"--frame-filter\": tokens.effect.filter.default,\n    }),\n    ...(tokens?.effect?.transition && {\n      \"--frame-transition\": tokens.effect.transition.default,\n    }),\n    ...(tokens?.elevation?.boxShadow && {\n      \"--frame-shadow\": tokens.elevation.boxShadow.default,\n    }),\n    ...(tokens?.elevation?.zIndex && {\n      \"--frame-z-index\": tokens.elevation.zIndex.default,\n    }),\n\n    /* Motion */\n    ...(tokens?.motion?.animation && {\n      \"--frame-animation\": tokens.motion.animation.default,\n    }),\n    ...(tokens?.motion?.transform && {\n      \"--frame-transform\": tokens.motion.transform.default,\n    }),\n    ...(tokens?.motion?.transformOrigin && {\n      \"--frame-transform-origin\": tokens.motion.transformOrigin.default,\n    }),\n\n    ...(style && { ...style }),\n  } as React.CSSProperties;\n\n  const classNames =\n    `${styles.frame} ${className ? `${className}` : \"\"}`.trim();\n  const Component = as || \"div\";\n\n  return (\n    <Component\n      data-tui-semantic=\"base\"\n      data-tui-color-source={colorSource}\n      data-tui-color-palette={colorPalette}\n      data-tui-custom-color={customColor}\n      data-tui-opacity={opacity}\n      className={classNames}\n      style={tokenStyles}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Frame;\n"],"names":["Frame","data","tokens","children","className","colorPalette","colorSource","customColor","opacity","style","rest","as","tokenStyles","classNames","styles","jsx"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+const e = "CRegYAAa", a = {
+  frame: e
+};
+export {
+  a as default,
+  e as frame
+};
+//# sourceMappingURL=Frame.module.css.js.map