@telia/teddy 0.0.10 → 0.0.12

package/dist/utils/layout/index.js

@@ -1,156 +1,71 @@
-import { c as m } from "../../clsx-DB4S2d7J.js";
-import { spacingValues as y, numberIterator as n } from "./util.js";
-import { margins as p } from "./margin.js";
-import { flexLayout as g } from "./flex.js";
-import { widths as f } from "./width.js";
-const N = ["none", "inline-grid", "grid"], w = ["none", "inline-flex", "flex"], v = [...w, ...N], V = ["start", "center", "end", "baseline", "stretch"], k = ["start", "center", "end", "between"], o = y, x = [...n, "none"], C = [...n, "none"], $ = ["row", "column", "dense", "row-dense", "column-dense"], R = n, b = n, j = [
-  ...n,
-  "span-2",
-  "span-3",
-  "span-4",
-  "span-5",
-  "span-6",
-  "span-7",
-  "span-8",
-  "span-9",
-  "span-10",
-  "span-11",
-  "span-12"
-], E = n, S = n, h = ["row", "column", "row-reverse", "column-reverse"], P = ["nowrap", "wrap", "wrap-reverse"], A = [
+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 y } 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";
+const E = {
+  sm: "0px",
+  md: "600px",
+  lg: "1024px",
+  xl: "1440px"
+}, F = ["initial", ...Object.keys(E)], G = [...N, ...O], K = [
   {
     key: "display",
     className: "teddy-display",
-    values: v
-  },
-  {
-    key: "columns",
-    className: "teddy-gtc",
-    values: x
-  },
-  {
-    key: "rows",
-    className: "teddy-gtr",
-    values: C
-  },
-  {
-    key: "flow",
-    className: "teddy-gaf",
-    values: $
-  },
-  {
-    key: "align",
-    className: "teddy-ai",
-    values: V
-  },
-  {
-    key: "justify",
-    className: "teddy-jc",
-    values: k
-  },
-  {
-    key: "gap",
-    className: "teddy-gap",
-    values: o
-  },
-  {
-    key: "gapX",
-    className: "teddy-cg",
-    values: o
-  },
-  {
-    key: "gapY",
-    className: "teddy-rg",
-    values: o
-  },
-  {
-    key: "wrap",
-    className: "teddy-fw",
-    values: P
-  },
-  {
-    key: "direction",
-    className: "teddy-fd",
-    values: h
-  },
-  {
-    key: "gridColumnStart",
-    className: "teddy-gcs",
-    values: R
-  },
-  {
-    key: "gridColumnEnd",
-    className: "teddy-gce",
-    values: b
-  },
-  {
-    key: "gridRowStart",
-    className: "teddy-grs",
-    values: E
-  },
-  {
-    key: "gridRowEnd",
-    className: "teddy-gre",
-    values: S
-  },
-  {
-    key: "gridColumn",
-    className: "teddy-gc",
-    values: j
-  },
-  ...p,
-  ...g,
-  ...f
+    values: G
+  }
+], f = [
+  ...k,
+  ...w,
+  ...j,
+  ...v,
+  ...L,
+  ...$,
+  ...P,
+  ...K,
+  ...b,
+  ...h,
+  ...V,
+  ...C
 ];
-function I(e) {
-  const t = { className: "" };
-  return Object.entries(e).map(([a, s]) => {
-    const r = A.find((l) => l.key === a);
-    return s !== null && r ? [
-      "className",
-      F({
-        responsiveValue: s,
-        rootClassName: `${r.className}`
-      })
-    ] : [a, s];
-  }).reduce(
-    (a, [s, r]) => typeof s != "string" ? a : s === "className" ? { ...a, [s]: m(a.className, r) } : { ...a, [s]: r },
-    t
-  );
+function R(o) {
+  return typeof o == "object" && Object.keys(o).some((e) => F.includes(e));
 }
-function F({
-  responsiveValue: e,
-  rootClassName: t
-}) {
-  if (!e)
-    return [];
-  if (typeof e == "object" && e !== null)
-    return Object.entries(e).map(([l, d]) => {
-      const i = `${t}`, u = `${l}:${t}--${c(d)}`;
-      return [i, u];
-    });
-  const a = `${t}`, s = `${t}--${c(e)}`;
-  return [a, s];
+function u(...o) {
+  let e = {};
+  for (const s of o)
+    s && (e = { ...e, ...s });
+  return Object.keys(e).length ? e : void 0;
 }
-function c(e) {
-  return typeof e == "string" && e.endsWith("%") ? e.replace("%", "p") : e;
+function Q(o) {
+  var m;
+  const e = { ...o };
+  let s = e.style, r = e.className;
+  for (const d in f) {
+    const t = f[d], n = t.key, a = e[n];
+    if (a && (R(a) && Object.entries(a).forEach(([i, l]) => {
+      var p;
+      const c = ((p = t.values.find((g) => g.key === l)) == null ? void 0 : p.value) ?? l;
+      s = u(s, { [`--${t.className}-${i}`]: c });
+      const x = `${i}:${t.className}`;
+      r = y(r, x), delete e[n];
+    }), typeof a == "string")) {
+      const i = ((m = t.values.find((c) => c.key === a)) == null ? void 0 : m.value) ?? a;
+      s = u(s, { [`--${t.className}`]: i });
+      const l = `${t.className}`;
+      r = y(r, l), delete e[n];
+    }
+  }
+  return { ...e, className: r, style: s };
 }
 export {
-  V as alignValues,
-  w as displayFlexValues,
-  N as displayGridValues,
-  v as displayValues,
-  I as extractPropsResponsiveLayout,
-  F as extractResponsiveClassName,
-  h as flexDirectionValues,
-  P as flexWrapValues,
-  o as gapValues,
-  b as gridColumnEndValues,
-  R as gridColumnStartValues,
-  j as gridColumnValues,
-  x as gridColumnsValues,
-  $ as gridFlowValues,
-  S as gridRowEndValues,
-  E as gridRowStartValues,
-  C as gridRowsValues,
-  k as justifyValues
+  K as displayLayout,
+  G as displayValues,
+  Q as extractProps,
+  u as mergeStyles
 };

package/dist/utils/layout/justify.d.ts

@@ -0,0 +1,39 @@
+import { Responsive } from './util';
+
+export declare const justifyValues: readonly [{
+    readonly key: "start";
+    readonly value: "flex-start";
+}, {
+    readonly key: "center";
+    readonly value: "center";
+}, {
+    readonly key: "end";
+    readonly value: "flex-end";
+}, {
+    readonly key: "between";
+    readonly value: "space-between";
+}];
+export declare const justify: readonly [{
+    readonly key: "justify";
+    readonly className: "teddy-jc";
+    readonly values: readonly [{
+        readonly key: "start";
+        readonly value: "flex-start";
+    }, {
+        readonly key: "center";
+        readonly value: "center";
+    }, {
+        readonly key: "end";
+        readonly value: "flex-end";
+    }, {
+        readonly key: "between";
+        readonly value: "space-between";
+    }];
+}];
+/**
+ * The alignment of the grid items. It can be  or a responsive value.
+ * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+ * @example align={{ sm: 'start', md: 'center' }}
+ * @default 'start'
+ */
+export type Justify = Responsive<(typeof justifyValues)[number]['key']>;

package/dist/utils/layout/justify.js

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