@telia/teddy 0.0.9 → 0.0.11

package/dist/tokens/spacing/variables.json.d.ts

@@ -1,34 +0,0 @@
-declare const _default: {
-  "spacing": {
-    "0": "0rem",
-    "10": "0.0625rem",
-    "25": "0.125rem",
-    "50": "0.25rem",
-    "100": "0.5rem",
-    "150": "0.75rem",
-    "200": "1rem",
-    "250": "1.25rem",
-    "300": "1.5rem",
-    "400": "2rem",
-    "600": "3rem",
-    "800": "4rem",
-    "1000": "5rem",
-    "1200": "6rem",
-    "1600": "8rem",
-    "gutter": {
-      "sm": "1rem",
-      "md": "1.5rem",
-      "lg": "1.5rem",
-      "xl": "1.5rem"
-    },
-    "page-padding": {
-      "sm": "1rem",
-      "md": "1.5rem",
-      "lg": "3rem",
-      "xl": "3rem"
-    }
-  }
-}
-;
-
-export default _default;

package/dist/utils/layout.d.ts

@@ -1,150 +0,0 @@
-import { breakpoint } from '../tokens/breakpoint/variables.json';
-
-type Breakpoint = keyof typeof breakpoint;
-export type Responsive<T> = {
-    [key in Breakpoint]?: T;
-} | T;
-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 marginValues: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto"];
-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 declare const flexGrowValues: readonly ["0", "1"];
-export declare const flexShrinkValues: readonly ["0", "1"];
-export declare const flexBasisValues: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto", "100%", "50%"];
-export type CommonChildrenLayoutProps = {
-    /**
-     * The margin of the element.
-     */
-    m?: Responsive<(typeof marginValues)[number]>;
-    /**
-     * The margin-top of the element.
-     */
-    mt?: Responsive<(typeof marginValues)[number]>;
-    /**
-     * The margin-bottom of the element.
-     */
-    mb?: Responsive<(typeof marginValues)[number]>;
-    /**
-     * The margin-right of the element.
-     */
-    mr?: Responsive<(typeof marginValues)[number]>;
-    /**
-     * The margin-left of the element.
-     */
-    ml?: Responsive<(typeof marginValues)[number]>;
-};
-export type FlexChildProps = {
-    flexBasis?: Responsive<(typeof flexBasisValues)[number]>;
-    flexGrow?: Responsive<(typeof flexGrowValues)[number]>;
-    flexShrink?: Responsive<(typeof flexShrinkValues)[number]>;
-};
-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 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 CommonChildrenLayoutProps> & {
-    className: string;
-};
-export declare function extractResponsiveClassName<T>({ responsiveValue, rootClassName, }: {
-    responsiveValue: Responsive<T>;
-    rootClassName: string;
-}): string[] | string[][];
-export {};

package/dist/utils/layout.js

@@ -1,221 +0,0 @@
-import { c as g } from "../clsx-DB4S2d7J.js";
-const p = {
-  0: "0rem",
-  10: "0.0625rem",
-  25: "0.125rem",
-  50: "0.25rem",
-  100: "0.5rem",
-  150: "0.75rem",
-  200: "1rem",
-  250: "1.25rem",
-  300: "1.5rem",
-  400: "2rem",
-  600: "3rem",
-  800: "4rem",
-  1e3: "5rem",
-  1200: "6rem",
-  1600: "8rem",
-  gutter: {
-    sm: "1rem",
-    md: "1.5rem",
-    lg: "1.5rem",
-    xl: "1.5rem"
-  },
-  "page-padding": {
-    sm: "1rem",
-    md: "1.5rem",
-    lg: "3rem",
-    xl: "3rem"
-  }
-}, d = Object.keys(p), t = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], f = ["none", "inline-grid", "grid"], N = ["none", "inline-flex", "flex"], k = [...N, ...f], r = [...d, "auto"], v = ["start", "center", "end", "baseline", "stretch"], w = ["start", "center", "end", "between"], m = d, V = [...t, "none"], x = [...t, "none"], b = ["row", "column", "dense", "row-dense", "column-dense"], C = t, $ = t, j = [
-  ...t,
-  "span-2",
-  "span-3",
-  "span-4",
-  "span-5",
-  "span-6",
-  "span-7",
-  "span-8",
-  "span-9",
-  "span-10",
-  "span-11",
-  "span-12"
-], R = t, S = t, h = ["row", "column", "row-reverse", "column-reverse"], E = ["nowrap", "wrap", "wrap-reverse"], G = ["0", "1"], O = ["0", "1"], P = [...d, "auto", "100%", "50%"], A = [
-  {
-    key: "display",
-    className: "teddy-display",
-    values: k
-  },
-  {
-    key: "m",
-    className: "teddy-m",
-    values: r
-  },
-  {
-    key: "mt",
-    className: "teddy-mt",
-    values: r
-  },
-  {
-    key: "mb",
-    className: "teddy-mb",
-    values: r
-  },
-  {
-    key: "ml",
-    className: "teddy-ml",
-    values: r
-  },
-  {
-    key: "mr",
-    className: "teddy-mr",
-    values: r
-  },
-  {
-    key: "columns",
-    className: "teddy-gtc",
-    values: V
-  },
-  {
-    key: "rows",
-    className: "teddy-gtr",
-    values: x
-  },
-  {
-    key: "flow",
-    className: "teddy-gaf",
-    values: b
-  },
-  {
-    key: "align",
-    className: "teddy-ai",
-    values: v
-  },
-  {
-    key: "justify",
-    className: "teddy-jc",
-    values: w
-  },
-  {
-    key: "gap",
-    className: "teddy-gap",
-    values: m
-  },
-  {
-    key: "gapX",
-    className: "teddy-cg",
-    values: m
-  },
-  {
-    key: "gapY",
-    className: "teddy-rg",
-    values: m
-  },
-  {
-    key: "wrap",
-    className: "teddy-fw",
-    values: E
-  },
-  {
-    key: "direction",
-    className: "teddy-fd",
-    values: h
-  },
-  {
-    key: "flexGrow",
-    className: "teddy-fg",
-    values: G
-  },
-  {
-    key: "flexShrink",
-    className: "teddy-fs",
-    values: O
-  },
-  {
-    key: "flexBasis",
-    className: "teddy-fb",
-    values: P
-  },
-  {
-    key: "gridColumnStart",
-    className: "teddy-gcs",
-    values: C
-  },
-  {
-    key: "gridColumnEnd",
-    className: "teddy-gce",
-    values: $
-  },
-  {
-    key: "gridRowStart",
-    className: "teddy-grs",
-    values: R
-  },
-  {
-    key: "gridRowEnd",
-    className: "teddy-gre",
-    values: S
-  },
-  {
-    key: "gridColumn",
-    className: "teddy-gc",
-    values: j
-  }
-];
-function W(e) {
-  const n = { className: "" };
-  return Object.entries(e).map(([a, s]) => {
-    const l = A.find((c) => c.key === a);
-    return s !== null && l ? [
-      "className",
-      B({
-        responsiveValue: s,
-        rootClassName: `${l.className}`
-      })
-    ] : [a, s];
-  }).reduce(
-    (a, [s, l]) => typeof s != "string" ? a : s === "className" ? { ...a, [s]: g(a.className, l) } : { ...a, [s]: l },
-    n
-  );
-}
-function B({
-  responsiveValue: e,
-  rootClassName: n
-}) {
-  if (!e)
-    return [];
-  if (typeof e == "object" && e !== null)
-    return Object.entries(e).map(([c, u]) => {
-      const i = `${n}`, y = `${c}:${n}--${o(u)}`;
-      return [i, y];
-    });
-  const a = `${n}`, s = `${n}--${o(e)}`;
-  return [a, s];
-}
-function o(e) {
-  return typeof e == "string" && e.endsWith("%") ? e.replace("%", "p") : e;
-}
-export {
-  v as alignValues,
-  N as displayFlexValues,
-  f as displayGridValues,
-  k as displayValues,
-  W as extractPropsResponsiveLayout,
-  B as extractResponsiveClassName,
-  P as flexBasisValues,
-  h as flexDirectionValues,
-  G as flexGrowValues,
-  O as flexShrinkValues,
-  E as flexWrapValues,
-  m as gapValues,
-  $ as gridColumnEndValues,
-  C as gridColumnStartValues,
-  j as gridColumnValues,
-  V as gridColumnsValues,
-  b as gridFlowValues,
-  S as gridRowEndValues,
-  R as gridRowStartValues,
-  x as gridRowsValues,
-  w as justifyValues,
-  r as marginValues
-};