@telia/teddy 0.0.10 → 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

@@ -1,118 +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 { FlexChildProps } from './flex';
+import { FlexChildren, FlexLayout } from './flex';
 import { MarginProps } from './margin';
 import { Responsive } from './util';
 
-export declare const displayGridValues: readonly ["none", "inline-grid", "grid"];
-export declare const displayFlexValues: readonly ["none", "inline-flex", "flex"];
-export declare const displayValues: readonly ["none", "inline-flex", "flex", "none", "inline-grid", "grid"];
-export declare const alignValues: readonly ["start", "center", "end", "baseline", "stretch"];
-export declare const justifyValues: readonly ["start", "center", "end", "between"];
-export declare const gapValues: ("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[];
-export declare const gridColumnsValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none"];
-export declare const gridRowsValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none"];
-export declare const gridFlowValues: readonly ["row", "column", "dense", "row-dense", "column-dense"];
-export declare const gridColumnStartValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
-export declare const gridColumnEndValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
-export declare const gridColumnValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "span-2", "span-3", "span-4", "span-5", "span-6", "span-7", "span-8", "span-9", "span-10", "span-11", "span-12"];
-export declare const gridRowStartValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
-export declare const gridRowEndValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
-export declare const flexDirectionValues: readonly ["row", "column", "row-reverse", "column-reverse"];
-export declare const flexWrapValues: readonly ["nowrap", "wrap", "wrap-reverse"];
-export type CommonChildrenLayoutProps = MarginProps & WidthProps;
-export type GridChildProps = {
-    gridColumnStart?: Responsive<(typeof gridColumnStartValues)[number]>;
-    gridColumnEnd?: Responsive<(typeof gridColumnEndValues)[number]>;
-    gridRowStart?: Responsive<(typeof gridRowStartValues)[number]>;
-    gridRowEnd?: Responsive<(typeof gridRowEndValues)[number]>;
-    gridColumn?: Responsive<(typeof gridColumnValues)[number]>;
-};
-export type ChildrenLayoutProps = FlexChildProps & GridChildProps & CommonChildrenLayoutProps;
-export type CommonFlexGridLayoutProps = ChildrenLayoutProps & {
-    /**
-     * The alignment of the grid items. It can be 'start', 'center', 'end', 'baseline', 'stretch' 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 'stretch'
-     */
-    align?: Responsive<(typeof alignValues)[number]>;
-    /**
-     * 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'
-     */
-    justify?: Responsive<(typeof justifyValues)[number]>;
-    /**
-     * The gap between items in horizontal and vertical directions. It can be a number, 'none' 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 gap={{ sm: '100', md: '200' }}
-     * @default '100'
-     */
-    gap?: Responsive<(typeof gapValues)[number]>;
-    /**
-     * The gap between grid items in horizontal direction. It can be a number, 'none' 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 gap={{ sm: '100', md: '200' }}
-     * @default '100'
-     */
-    gapX?: Responsive<(typeof gapValues)[number]>;
-    /**
-     * The gap between grid items in vertical direction. It can be a number, 'none' 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 gap={{ sm: '100', md: '200' }}
-     * @default '100'
-     */
-    gapY?: Responsive<(typeof gapValues)[number]>;
-};
-export type LayoutFlexProps = CommonFlexGridLayoutProps & {
-    /**
-     * The display of the flex. It can be 'none', 'inline-flex', 'flex' or a responsive value.
-     * @default 'flex'
-     */
-    display?: (typeof displayFlexValues)[number];
-    /**
-     * The direction of the flex items. It can be 'row', 'column', 'row-reverse', 'column-reverse' 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 direction={{ sm: 'row', md: 'column' }}
-     */
-    direction?: Responsive<(typeof flexDirectionValues)[number]>;
-    /**
-     *
-     */
-    wrap?: Responsive<(typeof flexWrapValues)[number]>;
-};
-export type LayoutGridProps = CommonFlexGridLayoutProps & {
-    /**
-     * The display of the grid. It can be 'none', 'inline-grid', 'grid' or a responsive value.
-     * @default 'grid'
-     */
-    display?: (typeof displayGridValues)[number];
-    /**
-     * The number of columns in the grid. It can be a number, 'none' 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 columns={{ sm: '3', md: '5' }}
-     */
-    columns?: Responsive<(typeof gridColumnsValues)[number]> | 'string';
-    /**
-     * The number of rows in the grid. It can be a number, 'none' 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 rows={{ sm: '3', md: '5' }}
-     */
-    rows?: Responsive<(typeof gridRowsValues)[number]> | 'string';
-    /**
-     * The flow direction of the grid. It can be 'row', 'column', 'dense', 'row-dense' or 'column-dense'.
-     * @example flow='row'
-     */
-    flow?: Responsive<(typeof gridFlowValues)[number]>;
+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?: (typeof displayValues)[number];
-};
-export declare function extractPropsResponsiveLayout<T extends LayoutProps>(args: T): Omit<T, "direction" | "display" | "align" | "rows" | "wrap" | "columns" | "flow" | "justify" | "gap" | "gapX" | "gapY" | keyof FlexChildProps | keyof GridChildProps | keyof MarginProps | keyof WidthProps> & {
-    className: string;
+    display?: DisplayLayout;
 };
-export declare function extractResponsiveClassName<T>({ responsiveValue, rootClassName, }: {
-    responsiveValue: Responsive<T>;
-    rootClassName: string;
-}): string[] | string[][];
+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 {};