@telia/teddy 0.0.15 → 0.0.16

package/dist/utils/layout/flex.js

@@ -1,60 +1,67 @@
-import { spacingValues as l } from "./util.js";
-const e = [
+import { spacingValues } from "./util.js";
+const flexGrowValues = [
   { key: "0", value: "0" },
   { key: "1", value: "1" }
-], a = e, s = [
-  ...l,
+];
+const flexShrinkValues = flexGrowValues;
+const flexBasisValues = [
+  ...spacingValues,
   { key: "auto", value: "auto" },
   { key: "full", value: "100%" },
   { key: "1/2", value: "50%" }
-], u = [
+];
+const flexDirectionValues = [
   { key: "row", value: "row" },
   { key: "row-reverse", value: "row-reverse" },
   { key: "column", value: "column" },
   { key: "column-reverse", value: "column-reverse" }
-], r = [
+];
+const displayFlexValues = [
   { key: "none", value: "none" },
   { key: "inline-flex", value: "inline-flex" },
   { key: "flex", value: "flex" }
-], y = [
+];
+const flexWrapValues = [
   { key: "nowrap", value: "nowrap" },
   { key: "wrap", value: "wrap" },
   { key: "wrap-reverse", value: "wrap-reverse" }
-], n = [
+];
+const flexLayout = [
   {
     key: "display",
     className: "teddy-display",
-    values: r
+    values: displayFlexValues
   },
   {
     key: "wrap",
     className: "teddy-fw",
-    values: y
+    values: flexWrapValues
   },
   {
     key: "direction",
     className: "teddy-fd",
-    values: u
+    values: flexDirectionValues
   }
-], v = [
+];
+const flexChildren = [
   {
     key: "flexGrow",
     className: "teddy-fg",
-    values: e
+    values: flexGrowValues
   },
   {
     key: "flexShrink",
     className: "teddy-fs",
-    values: a
+    values: flexShrinkValues
   },
   {
     key: "flexBasis",
     className: "teddy-fb",
-    values: s
+    values: flexBasisValues
   }
 ];
 export {
-  r as displayFlexValues,
-  v as flexChildren,
-  n as flexLayout
+  displayFlexValues,
+  flexChildren,
+  flexLayout
 };

package/dist/utils/layout/gap.js

@@ -1,21 +1,22 @@
-import { spacingValues as e } from "./util.js";
-const a = e, g = [
+import { spacingValues } from "./util.js";
+const gapValues = spacingValues;
+const gap = [
   {
     key: "gap",
     className: "teddy-gap",
-    values: a
+    values: gapValues
   },
   {
     key: "gapX",
     className: "teddy-cg",
-    values: a
+    values: gapValues
   },
   {
     key: "gapY",
     className: "teddy-rg",
-    values: a
+    values: gapValues
   }
 ];
 export {
-  g as gap
+  gap
 };

package/dist/utils/layout/grid.js

@@ -1,9 +1,11 @@
-import { numberIterator as e } from "./util.js";
-const l = [...e, { key: "none", value: "none" }], n = [
-  ...e.map((a) => ({ key: a.key, value: `repeat(${a.value}, minmax(0, 1fr))` })),
+import { numberIterator } from "./util.js";
+const gridTemplateRowsValues = [...numberIterator, { key: "none", value: "none" }];
+const gridTemplateColumnsValues = [
+  ...numberIterator.map((v) => ({ key: v.key, value: `repeat(${v.value}, minmax(0, 1fr))` })),
   { key: "none", value: "none" }
-], s = [
-  ...e,
+];
+const gridColumnValues = [
+  ...numberIterator,
   {
     key: "span-2",
     value: "span 2"
@@ -48,69 +50,74 @@ const l = [...e, { key: "none", value: "none" }], n = [
     key: "span-12",
     value: "span 12"
   }
-], u = s, d = [
+];
+const gridRowValues = gridColumnValues;
+const displayGridValues = [
   { key: "none", value: "none" },
   { key: "grid", value: "grid" },
   { key: "inline-grid", value: "inline-grid" }
-], y = [
+];
+const gridFlowValues = [
   { key: "row", value: "row" },
   { key: "column", value: "column" },
   { key: "dense", value: "dense" },
   { key: "row-dense", value: "row-dense" },
   { key: "column-dense", value: "column-dense" }
-], r = [
-  { key: "display", className: "teddy-display", values: d },
+];
+const gridLayout = [
+  { key: "display", className: "teddy-display", values: displayGridValues },
   {
     key: "rows",
     className: "teddy-gtr",
-    values: l
+    values: gridTemplateRowsValues
   },
   {
     key: "columns",
     className: "teddy-gtc",
-    values: n
+    values: gridTemplateColumnsValues
   },
   {
     key: "flow",
     className: "teddy-gaf",
-    values: y
+    values: gridFlowValues
   }
-], k = [
+];
+const gridChildren = [
   {
     key: "gridColumnStart",
     className: "teddy-gcs",
-    values: e
+    values: numberIterator
   },
   {
     key: "gridColumnEnd",
     className: "teddy-gce",
-    values: e
+    values: numberIterator
   },
   {
     key: "gridRowStart",
     className: "teddy-grs",
-    values: e
+    values: numberIterator
   },
   {
     key: "gridRowEnd",
     className: "teddy-gre",
-    values: e
+    values: numberIterator
   },
   {
     key: "gridColumn",
     className: "teddy-gc",
-    values: s
+    values: gridColumnValues
   },
   {
     key: "gridRow",
     className: "teddy-gr",
-    values: u
+    values: gridRowValues
   }
 ];
 export {
-  d as displayGridValues,
-  k as gridChildren,
-  r as gridLayout,
-  n as gridTemplateColumnsValues,
-  l as gridTemplateRowsValues
+  displayGridValues,
+  gridChildren,
+  gridLayout,
+  gridTemplateColumnsValues,
+  gridTemplateRowsValues
 };

package/dist/utils/layout/height.js

@@ -1,20 +1,20 @@
-import { t as a, a as t, b as s, c as l } from "../../variables-BkY5b0io.js";
-const e = [
+import { teddyBreakpointSm, teddyBreakpointMd, teddyBreakpointLg, teddyBreakpointXl } from "../../tokens/breakpoint/variables.js";
+const heightValues = [
   {
     key: "bp-sm",
-    value: a
+    value: teddyBreakpointSm
   },
   {
     key: "bp-md",
-    value: t
+    value: teddyBreakpointMd
   },
   {
     key: "bp-lg",
-    value: s
+    value: teddyBreakpointLg
   },
   {
     key: "bp-xl",
-    value: l
+    value: teddyBreakpointXl
   },
   {
     key: "auto",
@@ -28,23 +28,24 @@ const e = [
     key: "50%",
     value: "50%"
   }
-], d = [
+];
+const heights = [
   {
     key: "height",
     className: "teddy-h",
-    values: e
+    values: heightValues
   },
   {
     key: "minHeight",
     className: "teddy-min-h",
-    values: e
+    values: heightValues
   },
   {
     key: "maxHeight",
     className: "teddy-max-h",
-    values: e
+    values: heightValues
   }
 ];
 export {
-  d as heights
+  heights
 };

package/dist/utils/layout/index.js

@@ -1,75 +1,92 @@
-import { margins as k } from "./margin.js";
-import { displayFlexValues as N, flexChildren as b, flexLayout as h } from "./flex.js";
-import { widths as j } from "./width.js";
-import { heights as v } from "./height.js";
-import { c as f } from "../../clsx-DB4S2d7J.js";
-import { align as $ } from "./align.js";
-import { gap as L } from "./gap.js";
-import { displayGridValues as O, gridLayout as V, gridChildren as C } from "./grid.js";
-import { justify as P } from "./justify.js";
-import { paddings as w } from "./padding.js";
-import { position as E } from "./position.js";
-import { inset as F } from "./inset.js";
-const G = {
+import { margins } from "./margin.js";
+import { displayFlexValues, flexChildren, flexLayout } from "./flex.js";
+import { widths } from "./width.js";
+import { heights } from "./height.js";
+import clsx from "clsx";
+import { align } from "./align.js";
+import { gap } from "./gap.js";
+import { displayGridValues, gridLayout, gridChildren } from "./grid.js";
+import { justify } from "./justify.js";
+import { paddings } from "./padding.js";
+import { position } from "./position.js";
+import { inset } from "./inset.js";
+const breakpoint = {
   sm: "0px",
   md: "600px",
   lg: "1024px",
   xl: "1440px"
-}, K = ["initial", ...Object.keys(G)], R = [...N, ...O], S = [
+};
+const breakpoints = ["initial", ...Object.keys(breakpoint)];
+const displayValues = [...displayFlexValues, ...displayGridValues];
+const displayLayout = [
   {
     key: "display",
     className: "teddy-display",
-    values: R
+    values: displayValues
   }
-], y = [
-  ...E,
-  ...F,
-  ...k,
-  ...w,
-  ...j,
-  ...v,
-  ...L,
-  ...$,
-  ...P,
-  ...S,
-  ...b,
-  ...h,
-  ...V,
-  ...C
 ];
-function q(o) {
-  return typeof o == "object" && Object.keys(o).some((e) => K.includes(e));
+const layout = [
+  ...position,
+  ...inset,
+  ...margins,
+  ...paddings,
+  ...widths,
+  ...heights,
+  ...gap,
+  ...align,
+  ...justify,
+  ...displayLayout,
+  ...flexChildren,
+  ...flexLayout,
+  ...gridLayout,
+  ...gridChildren
+];
+function isResponsiveObject(obj) {
+  return typeof obj === "object" && Object.keys(obj).some((key) => breakpoints.includes(key));
 }
-function u(...o) {
-  let e = {};
-  for (const s of o)
-    s && (e = { ...e, ...s });
-  return Object.keys(e).length ? e : void 0;
+function mergeStyles(...styles) {
+  let result = {};
+  for (const style of styles) {
+    if (style) {
+      result = { ...result, ...style };
+    }
+  }
+  return Object.keys(result).length ? result : void 0;
 }
-function X(o) {
-  var m;
-  const e = { ...o };
-  let s = e.style, i = e.className;
-  for (const d in y) {
-    const t = y[d], n = t.key, r = e[n];
-    if (r && (q(r) && Object.entries(r).forEach(([a, l]) => {
-      var p;
-      const c = ((p = t.values.find((g) => g.key === l)) == null ? void 0 : p.value) ?? l;
-      s = u(s, { [`--${t.className}-${a}`]: c });
-      const x = `${a}:${t.className}`;
-      i = f(i, x), delete e[n];
-    }), typeof r == "string")) {
-      const a = ((m = t.values.find((c) => c.key === r)) == null ? void 0 : m.value) ?? r;
-      s = u(s, { [`--${t.className}`]: a });
-      const l = `${t.className}`;
-      i = f(i, l), delete e[n];
+function extractProps(props) {
+  var _a;
+  const extractedProps = { ...props };
+  let style = extractedProps.style;
+  let className = extractedProps.className;
+  for (const key in layout) {
+    const currentLayout = layout[key];
+    const currentLayoutKey = currentLayout.key;
+    const layoutProp = extractedProps[currentLayoutKey];
+    if (layoutProp) {
+      if (isResponsiveObject(layoutProp)) {
+        Object.entries(layoutProp).forEach(([bp, value]) => {
+          var _a2;
+          const cssValue = ((_a2 = currentLayout.values.find((v) => v.key === value)) == null ? void 0 : _a2.value) ?? value;
+          style = mergeStyles(style, { [`--${currentLayout.className}-${bp}`]: cssValue });
+          const bpClassName = `${bp}:${currentLayout.className}`;
+          className = clsx(className, bpClassName);
+          delete extractedProps[currentLayoutKey];
+        });
+      }
+      if (typeof layoutProp === "string") {
+        const cssValue = ((_a = currentLayout.values.find((v) => v.key === layoutProp)) == null ? void 0 : _a.value) ?? layoutProp;
+        style = mergeStyles(style, { [`--${currentLayout.className}`]: cssValue });
+        const bpClassName = `${currentLayout.className}`;
+        className = clsx(className, bpClassName);
+        delete extractedProps[currentLayoutKey];
+      }
     }
   }
-  return { ...e, className: i, style: s };
+  return { ...extractedProps, className, style };
 }
 export {
-  S as displayLayout,
-  R as displayValues,
-  X as extractProps,
-  u as mergeStyles
+  displayLayout,
+  displayValues,
+  extractProps,
+  mergeStyles
 };

package/dist/utils/layout/inset.js

@@ -1,32 +1,33 @@
-import { spacingValues as t } from "./util.js";
-const e = [...t, { key: "auto", value: "auto" }], a = [
+import { spacingValues } from "./util.js";
+const insetValues = [...spacingValues, { key: "auto", value: "auto" }];
+const inset = [
   {
     key: "inset",
     className: "teddy-inset",
-    values: e
+    values: insetValues
   },
   {
     key: "top",
     className: "teddy-top",
-    values: e
+    values: insetValues
   },
   {
     key: "bottom",
     className: "teddy-bottom",
-    values: e
+    values: insetValues
   },
   {
     key: "left",
     className: "teddy-left",
-    values: e
+    values: insetValues
   },
   {
     key: "right",
     className: "teddy-right",
-    values: e
+    values: insetValues
   }
 ];
 export {
-  a as inset,
-  e as insetValues
+  inset,
+  insetValues
 };

package/dist/utils/layout/justify.js

@@ -1,16 +1,17 @@
-const e = [
+const justifyValues = [
   { key: "start", value: "flex-start" },
   { key: "center", value: "center" },
   { key: "end", value: "flex-end" },
   { key: "between", value: "space-between" }
-], t = [
+];
+const justify = [
   {
     key: "justify",
     className: "teddy-jc",
-    values: e
+    values: justifyValues
   }
 ];
 export {
-  t as justify,
-  e as justifyValues
+  justify,
+  justifyValues
 };

package/dist/utils/layout/margin.js

@@ -1,32 +1,33 @@
-import { spacingValues as a } from "./util.js";
-const e = [...a, { key: "auto", value: "auto" }], m = [
+import { spacingValues } from "./util.js";
+const marginValues = [...spacingValues, { key: "auto", value: "auto" }];
+const margins = [
   {
     key: "m",
     className: "teddy-m",
-    values: e
+    values: marginValues
   },
   {
     key: "mt",
     className: "teddy-mt",
-    values: e
+    values: marginValues
   },
   {
     key: "mb",
     className: "teddy-mb",
-    values: e
+    values: marginValues
   },
   {
     key: "ml",
     className: "teddy-ml",
-    values: e
+    values: marginValues
   },
   {
     key: "mr",
     className: "teddy-mr",
-    values: e
+    values: marginValues
   }
 ];
 export {
-  e as marginValues,
-  m as margins
+  marginValues,
+  margins
 };

package/dist/utils/layout/padding.js

@@ -1,32 +1,33 @@
-import { spacingValues as a } from "./util.js";
-const e = [...a, { key: "auto", value: "auto" }], l = [
+import { spacingValues } from "./util.js";
+const paddingValues = [...spacingValues, { key: "auto", value: "auto" }];
+const paddings = [
   {
     key: "p",
     className: "teddy-p",
-    values: e
+    values: paddingValues
   },
   {
     key: "pt",
     className: "teddy-pt",
-    values: e
+    values: paddingValues
   },
   {
     key: "pb",
     className: "teddy-pb",
-    values: e
+    values: paddingValues
   },
   {
     key: "pl",
     className: "teddy-pl",
-    values: e
+    values: paddingValues
   },
   {
     key: "pr",
     className: "teddy-pr",
-    values: e
+    values: paddingValues
   }
 ];
 export {
-  e as paddingValues,
-  l as paddings
+  paddingValues,
+  paddings
 };

package/dist/utils/layout/position.js

@@ -1,4 +1,4 @@
-const e = [
+const positionValues = [
   { key: "relative", value: "relative" },
   { key: "absolute", value: "absolute" },
   { key: "fixed", value: "fixed" },
@@ -7,14 +7,15 @@ const e = [
   { key: "inherit", value: "inherit" },
   { key: "initial", value: "initial" },
   { key: "unset", value: "unset" }
-], i = [
+];
+const position = [
   {
     key: "position",
     className: "teddy-position",
-    values: e
+    values: positionValues
   }
 ];
 export {
-  i as position,
-  e as positionValues
+  position,
+  positionValues
 };

package/dist/utils/layout/util.js

@@ -1,4 +1,4 @@
-const a = [
+const spacingValues = [
   { key: "0", value: "var(--teddy-spacing-0)" },
   { key: "10", value: "var(--teddy-spacing-10)" },
   { key: "25", value: "var(--teddy-spacing-25)" },
@@ -22,11 +22,12 @@ const a = [
   { key: "page-padding-md", value: "var(--teddy-spacing-page-padding-md)" },
   { key: "page-padding-lg", value: "var(--teddy-spacing-page-padding-lg)" },
   { key: "page-padding-xl", value: "var(--teddy-spacing-page-padding-xl)" }
-], d = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"].map((e) => ({
-  key: e,
-  value: e
+];
+const numberIterator = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"].map((v) => ({
+  key: v,
+  value: v
 }));
 export {
-  d as numberIterator,
-  a as spacingValues
+  numberIterator,
+  spacingValues
 };

package/dist/utils/layout/width.js

@@ -1,25 +1,26 @@
-const e = [
+const widthValues = [
   { key: "auto", value: "auto" },
   { key: "100%", value: "100%" },
   { key: "50%", value: "50%" }
-], a = [
+];
+const widths = [
   {
     key: "width",
     className: "teddy-w",
-    values: e
+    values: widthValues
   },
   {
     key: "minWidth",
     className: "teddy-min-w",
-    values: e
+    values: widthValues
   },
   {
     key: "maxWidth",
     className: "teddy-max-w",
-    values: e
+    values: widthValues
   }
 ];
 export {
-  e as widthValues,
-  a as widths
+  widthValues,
+  widths
 };