@telia/teddy 0.0.9 → 0.0.11

package/dist/utils/layout/grid.js

@@ -0,0 +1,116 @@
+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))` })),
+  { key: "none", value: "none" }
+], s = [
+  ...e,
+  {
+    key: "span-2",
+    value: "span 2"
+  },
+  {
+    key: "span-3",
+    value: "span 3"
+  },
+  {
+    key: "span-4",
+    value: "span 4"
+  },
+  {
+    key: "span-5",
+    value: "span 5"
+  },
+  {
+    key: "span-6",
+    value: "span 6"
+  },
+  {
+    key: "span-7",
+    value: "span 7"
+  },
+  {
+    key: "span-8",
+    value: "span 8"
+  },
+  {
+    key: "span-9",
+    value: "span 9"
+  },
+  {
+    key: "span-10",
+    value: "span 10"
+  },
+  {
+    key: "span-11",
+    value: "span 11"
+  },
+  {
+    key: "span-12",
+    value: "span 12"
+  }
+], u = s, d = [
+  { key: "none", value: "none" },
+  { key: "grid", value: "grid" },
+  { key: "inline-grid", value: "inline-grid" }
+], y = [
+  { 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 },
+  {
+    key: "rows",
+    className: "teddy-gtr",
+    values: l
+  },
+  {
+    key: "columns",
+    className: "teddy-gtc",
+    values: n
+  },
+  {
+    key: "flow",
+    className: "teddy-gaf",
+    values: y
+  }
+], k = [
+  {
+    key: "gridColumnStart",
+    className: "teddy-gcs",
+    values: e
+  },
+  {
+    key: "gridColumnEnd",
+    className: "teddy-gce",
+    values: e
+  },
+  {
+    key: "gridRowStart",
+    className: "teddy-grs",
+    values: e
+  },
+  {
+    key: "gridRowEnd",
+    className: "teddy-gre",
+    values: e
+  },
+  {
+    key: "gridColumn",
+    className: "teddy-gc",
+    values: s
+  },
+  {
+    key: "gridRow",
+    className: "teddy-gr",
+    values: u
+  }
+];
+export {
+  d as displayGridValues,
+  k as gridChildren,
+  r as gridLayout,
+  n as gridTemplateColumnsValues,
+  l as gridTemplateRowsValues
+};

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

@@ -0,0 +1,118 @@
+import { Responsive } from './util';
+
+declare const heightValues: readonly [{
+    readonly key: "bp-sm";
+    readonly value: "0px";
+}, {
+    readonly key: "bp-md";
+    readonly value: "600px";
+}, {
+    readonly key: "bp-lg";
+    readonly value: "1024px";
+}, {
+    readonly key: "bp-xl";
+    readonly value: "1440px";
+}, {
+    readonly key: "auto";
+    readonly value: "auto";
+}, {
+    readonly key: "100%";
+    readonly value: "100%";
+}, {
+    readonly key: "50%";
+    readonly value: "50%";
+}];
+export type HeightProps = {
+    /**
+     * Static height.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/height
+     */
+    height?: Responsive<(typeof heightValues)[number]['key']>;
+    /**
+     * Min height.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+     */
+    minHeight?: Responsive<(typeof heightValues)[number]['key']>;
+    /**
+     * Max height.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
+     */
+    maxHeight?: Responsive<(typeof heightValues)[number]['key']>;
+};
+export declare const heights: readonly [{
+    readonly key: "height";
+    readonly className: "teddy-h";
+    readonly values: readonly [{
+        readonly key: "bp-sm";
+        readonly value: "0px";
+    }, {
+        readonly key: "bp-md";
+        readonly value: "600px";
+    }, {
+        readonly key: "bp-lg";
+        readonly value: "1024px";
+    }, {
+        readonly key: "bp-xl";
+        readonly value: "1440px";
+    }, {
+        readonly key: "auto";
+        readonly value: "auto";
+    }, {
+        readonly key: "100%";
+        readonly value: "100%";
+    }, {
+        readonly key: "50%";
+        readonly value: "50%";
+    }];
+}, {
+    readonly key: "minHeight";
+    readonly className: "teddy-min-h";
+    readonly values: readonly [{
+        readonly key: "bp-sm";
+        readonly value: "0px";
+    }, {
+        readonly key: "bp-md";
+        readonly value: "600px";
+    }, {
+        readonly key: "bp-lg";
+        readonly value: "1024px";
+    }, {
+        readonly key: "bp-xl";
+        readonly value: "1440px";
+    }, {
+        readonly key: "auto";
+        readonly value: "auto";
+    }, {
+        readonly key: "100%";
+        readonly value: "100%";
+    }, {
+        readonly key: "50%";
+        readonly value: "50%";
+    }];
+}, {
+    readonly key: "maxHeight";
+    readonly className: "teddy-max-h";
+    readonly values: readonly [{
+        readonly key: "bp-sm";
+        readonly value: "0px";
+    }, {
+        readonly key: "bp-md";
+        readonly value: "600px";
+    }, {
+        readonly key: "bp-lg";
+        readonly value: "1024px";
+    }, {
+        readonly key: "bp-xl";
+        readonly value: "1440px";
+    }, {
+        readonly key: "auto";
+        readonly value: "auto";
+    }, {
+        readonly key: "100%";
+        readonly value: "100%";
+    }, {
+        readonly key: "50%";
+        readonly value: "50%";
+    }];
+}];
+export {};

package/dist/utils/layout/height.js

@@ -0,0 +1,50 @@
+import { t as a, a as t, b as s, c as l } from "../../variables-BkY5b0io.js";
+const e = [
+  {
+    key: "bp-sm",
+    value: a
+  },
+  {
+    key: "bp-md",
+    value: t
+  },
+  {
+    key: "bp-lg",
+    value: s
+  },
+  {
+    key: "bp-xl",
+    value: l
+  },
+  {
+    key: "auto",
+    value: "auto"
+  },
+  {
+    key: "100%",
+    value: "100%"
+  },
+  {
+    key: "50%",
+    value: "50%"
+  }
+], d = [
+  {
+    key: "height",
+    className: "teddy-h",
+    values: e
+  },
+  {
+    key: "minHeight",
+    className: "teddy-min-h",
+    values: e
+  },
+  {
+    key: "maxHeight",
+    className: "teddy-max-h",
+    values: e
+  }
+];
+export {
+  d as heights
+};

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

@@ -0,0 +1,70 @@
+import { PaddingProps } from './padding';
+import { Justify } from './justify';
+import { GridLayout, GridChildren } from './grid';
+import { GapProps } from './gap';
+import { Align } from './align';
+import { HTMLAttributes } from 'react';
+import { HeightProps } from './height';
+import { WidthProps } from './width';
+import { FlexChildren, FlexLayout } from './flex';
+import { MarginProps } from './margin';
+import { Responsive } from './util';
+
+export declare const displayValues: readonly [{
+    readonly key: "none";
+    readonly value: "none";
+}, {
+    readonly key: "inline-flex";
+    readonly value: "inline-flex";
+}, {
+    readonly key: "flex";
+    readonly value: "flex";
+}, {
+    readonly key: "none";
+    readonly value: "none";
+}, {
+    readonly key: "grid";
+    readonly value: "grid";
+}, {
+    readonly key: "inline-grid";
+    readonly value: "inline-grid";
+}];
+export declare const displayLayout: readonly [{
+    readonly key: "display";
+    readonly className: "teddy-display";
+    readonly values: readonly [{
+        readonly key: "none";
+        readonly value: "none";
+    }, {
+        readonly key: "inline-flex";
+        readonly value: "inline-flex";
+    }, {
+        readonly key: "flex";
+        readonly value: "flex";
+    }, {
+        readonly key: "none";
+        readonly value: "none";
+    }, {
+        readonly key: "grid";
+        readonly value: "grid";
+    }, {
+        readonly key: "inline-grid";
+        readonly value: "inline-grid";
+    }];
+}];
+export type DisplayLayout = Responsive<(typeof displayValues)[number]['key']>;
+export type CommonChildrenLayoutProps = MarginProps & PaddingProps & WidthProps & HeightProps;
+export type ChildrenLayoutProps = FlexChildren & GridChildren & CommonChildrenLayoutProps;
+export type CommonFlexGridLayoutProps = ChildrenLayoutProps & GapProps & {
+    align?: Align;
+    justify?: Justify;
+};
+export type LayoutFlexProps = CommonFlexGridLayoutProps & FlexLayout;
+export type LayoutGridProps = CommonFlexGridLayoutProps & GridLayout;
+export type LayoutProps = Omit<LayoutGridProps, 'display'> & Omit<LayoutFlexProps, 'display'> & {
+    display?: DisplayLayout;
+};
+type InlineStyle = React.CSSProperties | Record<string, string | number | null | undefined> | undefined;
+export declare function mergeStyles(...styles: Array<InlineStyle>): InlineStyle;
+export declare function extractProps<T extends LayoutProps & HTMLAttributes<HTMLElement>>(props: T): Omit<T, keyof LayoutProps>;
+export {};

package/dist/utils/layout/index.js

@@ -0,0 +1,71 @@
+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: G
+  }
+], f = [
+  ...k,
+  ...w,
+  ...j,
+  ...v,
+  ...L,
+  ...$,
+  ...P,
+  ...K,
+  ...b,
+  ...h,
+  ...V,
+  ...C
+];
+function R(o) {
+  return typeof o == "object" && Object.keys(o).some((e) => F.includes(e));
+}
+function u(...o) {
+  let e = {};
+  for (const s of o)
+    s && (e = { ...e, ...s });
+  return Object.keys(e).length ? e : void 0;
+}
+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 {
+  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
+};