@telia/teddy 0.0.18 → 0.0.20

package/dist/utils/generate-styling/color.d.ts

@@ -0,0 +1,15 @@
+import { Responsive } from './util';
+
+export declare const colorValues: readonly [];
+export declare const color: readonly [{
+    readonly key: "color";
+    readonly className: "teddy-color";
+    readonly values: readonly [];
+}];
+/**
+ * The color. 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.
+ */
+export type ColorProps = {
+    color?: Responsive<(typeof colorValues)[number]['key']>;
+};

package/dist/utils/generate-styling/color.js

@@ -0,0 +1,12 @@
+const colorValues = [];
+const color = [
+  {
+    key: "color",
+    className: "teddy-color",
+    values: colorValues
+  }
+];
+export {
+  color,
+  colorValues
+};

package/dist/utils/{layout → generate-styling}/index.d.ts

@@ -1,16 +1,18 @@
-import { InsetProps } from './inset';
-import { PositionProps } from './position';
-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';
+import { MarginProps } from './margin';
+import { FlexChildren, FlexLayout } from './flex';
+import { WidthProps } from './width';
+import { HeightProps } from './height';
+import { HTMLAttributes } from 'react';
+import { Align } from './align';
+import { GapProps } from './gap';
+import { GridLayout, GridChildren } from './grid';
+import { Justify } from './justify';
+import { PaddingProps } from './padding';
+import { PositionProps } from './position';
+import { InsetProps } from './inset';
+import { ColorProps } from './color';
+import { ObjectFitProps } from './object-fit';
 
 export declare const displayValues: readonly [{
     readonly key: "none";
@@ -55,7 +57,7 @@ export declare const displayLayout: readonly [{
     }];
 }];
 export type DisplayLayout = Responsive<(typeof displayValues)[number]['key']>;
-export declare const layout: readonly [{
+export declare const stylings: readonly [{
     readonly key: "position";
     readonly className: "teddy-position";
     readonly values: readonly [{
@@ -83,6 +85,25 @@ export declare const layout: readonly [{
         readonly key: "unset";
         readonly value: "unset";
     }];
+}, {
+    readonly key: "objectFit";
+    readonly className: "teddy-object-fit";
+    readonly values: readonly [{
+        readonly key: "fill";
+        readonly value: "fill";
+    }, {
+        readonly key: "contain";
+        readonly value: "contain";
+    }, {
+        readonly key: "cover";
+        readonly value: "cover";
+    }, {
+        readonly key: "none";
+        readonly value: "none";
+    }, {
+        readonly key: "scale-down";
+        readonly value: "scale-down";
+    }];
 }, {
     readonly key: "inset";
     readonly className: "teddy-inset";
@@ -1556,6 +1577,10 @@ export declare const layout: readonly [{
         readonly key: "page-padding-xl";
         readonly value: "var(--teddy-spacing-page-padding-xl)";
     }];
+}, {
+    readonly key: "color";
+    readonly className: "teddy-color";
+    readonly values: readonly [];
 }, {
     readonly key: "align";
     readonly className: "teddy-ai";
@@ -1590,6 +1615,9 @@ export declare const layout: readonly [{
     }, {
         readonly key: "between";
         readonly value: "space-between";
+    }, {
+        readonly key: "stretch";
+        readonly value: "stretch";
     }];
 }, {
     readonly key: "display";
@@ -1918,7 +1946,8 @@ export declare const layout: readonly [{
         readonly value: "span 12";
     }];
 }];
-export type CommonChildrenLayoutProps = PositionProps & InsetProps & MarginProps & PaddingProps & WidthProps & HeightProps;
+export type CommonChildrenLayoutProps = PositionProps & InsetProps & MarginProps & PaddingProps & WidthProps & HeightProps & ColorProps;
+export type ImageStylingProps = CommonChildrenLayoutProps & ObjectFitProps;
 export type ChildrenLayoutProps = FlexChildren & GridChildren & CommonChildrenLayoutProps;
 export type CommonFlexGridLayoutProps = ChildrenLayoutProps & GapProps & {
     align?: Align;
@@ -1926,7 +1955,7 @@ export type CommonFlexGridLayoutProps = ChildrenLayoutProps & GapProps & {
 };
 export type LayoutFlexProps = CommonFlexGridLayoutProps & FlexLayout;
 export type LayoutGridProps = CommonFlexGridLayoutProps & GridLayout;
-export type LayoutProps = Omit<LayoutGridProps, 'display'> & Omit<LayoutFlexProps, 'display'> & {
+export type LayoutProps = Omit<LayoutGridProps, 'display'> & Omit<ImageStylingProps, 'display'> & Omit<LayoutFlexProps, 'display'> & {
     display?: DisplayLayout;
 };
 type InlineStyle = React.CSSProperties | Record<string, string | number | null | undefined> | undefined;

package/dist/utils/{layout → generate-styling}/index.js

@@ -10,6 +10,8 @@ import { justify } from "./justify.js";
 import { paddings } from "./padding.js";
 import { position } from "./position.js";
 import { inset } from "./inset.js";
+import { color } from "./color.js";
+import { objectFit } from "./object-fit.js";
 const breakpoint = {
   sm: "0px",
   md: "600px",
@@ -25,14 +27,16 @@ const displayLayout = [
     values: displayValues
   }
 ];
-const layout = [
+const stylings = [
   ...position,
+  ...objectFit,
   ...inset,
   ...margins,
   ...paddings,
   ...widths,
   ...heights,
   ...gap,
+  ...color,
   ...align,
   ...justify,
   ...displayLayout,
@@ -58,8 +62,8 @@ function extractProps(props) {
   const extractedProps = { ...props };
   let style = extractedProps.style;
   let className = extractedProps.className;
-  for (const key in layout) {
-    const currentLayout = layout[key];
+  for (const key in stylings) {
+    const currentLayout = stylings[key];
     const currentLayoutKey = currentLayout.key;
     const layoutProp = extractedProps[currentLayoutKey];
     if (layoutProp) {
@@ -88,6 +92,6 @@ export {
   displayLayout,
   displayValues,
   extractProps,
-  layout,
-  mergeStyles
+  mergeStyles,
+  stylings
 };

package/dist/utils/{layout → generate-styling}/justify.d.ts

@@ -12,6 +12,9 @@ export declare const justifyValues: readonly [{
 }, {
     readonly key: "between";
     readonly value: "space-between";
+}, {
+    readonly key: "stretch";
+    readonly value: "stretch";
 }];
 export declare const justify: readonly [{
     readonly key: "justify";
@@ -28,6 +31,9 @@ export declare const justify: readonly [{
     }, {
         readonly key: "between";
         readonly value: "space-between";
+    }, {
+        readonly key: "stretch";
+        readonly value: "stretch";
     }];
 }];
 /**

package/dist/utils/{layout → generate-styling}/justify.js

@@ -2,7 +2,8 @@ const justifyValues = [
   { key: "start", value: "flex-start" },
   { key: "center", value: "center" },
   { key: "end", value: "flex-end" },
-  { key: "between", value: "space-between" }
+  { key: "between", value: "space-between" },
+  { key: "stretch", value: "stretch" }
 ];
 const justify = [
   {

package/dist/utils/generate-styling/object-fit.d.ts

@@ -0,0 +1,45 @@
+import { Responsive } from './util';
+
+export declare const objectFitValues: readonly [{
+    readonly key: "fill";
+    readonly value: "fill";
+}, {
+    readonly key: "contain";
+    readonly value: "contain";
+}, {
+    readonly key: "cover";
+    readonly value: "cover";
+}, {
+    readonly key: "none";
+    readonly value: "none";
+}, {
+    readonly key: "scale-down";
+    readonly value: "scale-down";
+}];
+export declare const objectFit: readonly [{
+    readonly key: "objectFit";
+    readonly className: "teddy-object-fit";
+    readonly values: readonly [{
+        readonly key: "fill";
+        readonly value: "fill";
+    }, {
+        readonly key: "contain";
+        readonly value: "contain";
+    }, {
+        readonly key: "cover";
+        readonly value: "cover";
+    }, {
+        readonly key: "none";
+        readonly value: "none";
+    }, {
+        readonly key: "scale-down";
+        readonly value: "scale-down";
+    }];
+}];
+/**
+ * ObjectFit. 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.
+ */
+export type ObjectFitProps = {
+    objectFit?: Responsive<(typeof objectFitValues)[number]['key']>;
+};

package/dist/utils/generate-styling/object-fit.js

@@ -0,0 +1,18 @@
+const objectFitValues = [
+  { key: "fill", value: "fill" },
+  { key: "contain", value: "contain" },
+  { key: "cover", value: "cover" },
+  { key: "none", value: "none" },
+  { key: "scale-down", value: "scale-down" }
+];
+const objectFit = [
+  {
+    key: "objectFit",
+    className: "teddy-object-fit",
+    values: objectFitValues
+  }
+];
+export {
+  objectFit,
+  objectFitValues
+};

package/package.json

@@ -18,7 +18,7 @@
     "pnpm": ">=8"
   },
   "private": false,
-  "version": "0.0.18",
+  "version": "0.0.20",
   "sideEffects": [
     "**/*.css"
   ],