@telia/teddy 0.1.0 → 0.1.2

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

@@ -0,0 +1,165 @@
+import { Responsive } from './util';
+
+declare const radiusValues: readonly [{
+    readonly key: "none";
+    readonly value: "0";
+}, {
+    readonly key: "xs";
+    readonly value: "var(--teddy-border-radius-xs)";
+}, {
+    readonly key: "sm";
+    readonly value: "var(--teddy-border-radius-sm)";
+}, {
+    readonly key: "md";
+    readonly value: "var(--teddy-border-radius-md)";
+}, {
+    readonly key: "lg";
+    readonly value: "var(--teddy-border-radius-lg)";
+}, {
+    readonly key: "full";
+    readonly value: "var(--teddy-border-radius-full)";
+}];
+export declare const radius: readonly [{
+    readonly key: "radius";
+    readonly className: "teddy-radius";
+    readonly values: readonly [{
+        readonly key: "none";
+        readonly value: "0";
+    }, {
+        readonly key: "xs";
+        readonly value: "var(--teddy-border-radius-xs)";
+    }, {
+        readonly key: "sm";
+        readonly value: "var(--teddy-border-radius-sm)";
+    }, {
+        readonly key: "md";
+        readonly value: "var(--teddy-border-radius-md)";
+    }, {
+        readonly key: "lg";
+        readonly value: "var(--teddy-border-radius-lg)";
+    }, {
+        readonly key: "full";
+        readonly value: "var(--teddy-border-radius-full)";
+    }];
+}, {
+    readonly key: "radiusTL";
+    readonly className: "teddy-radius-tl";
+    readonly values: readonly [{
+        readonly key: "none";
+        readonly value: "0";
+    }, {
+        readonly key: "xs";
+        readonly value: "var(--teddy-border-radius-xs)";
+    }, {
+        readonly key: "sm";
+        readonly value: "var(--teddy-border-radius-sm)";
+    }, {
+        readonly key: "md";
+        readonly value: "var(--teddy-border-radius-md)";
+    }, {
+        readonly key: "lg";
+        readonly value: "var(--teddy-border-radius-lg)";
+    }, {
+        readonly key: "full";
+        readonly value: "var(--teddy-border-radius-full)";
+    }];
+}, {
+    readonly key: "radiusTR";
+    readonly className: "teddy-radius-tr";
+    readonly values: readonly [{
+        readonly key: "none";
+        readonly value: "0";
+    }, {
+        readonly key: "xs";
+        readonly value: "var(--teddy-border-radius-xs)";
+    }, {
+        readonly key: "sm";
+        readonly value: "var(--teddy-border-radius-sm)";
+    }, {
+        readonly key: "md";
+        readonly value: "var(--teddy-border-radius-md)";
+    }, {
+        readonly key: "lg";
+        readonly value: "var(--teddy-border-radius-lg)";
+    }, {
+        readonly key: "full";
+        readonly value: "var(--teddy-border-radius-full)";
+    }];
+}, {
+    readonly key: "radiusBL";
+    readonly className: "teddy-radius-bl";
+    readonly values: readonly [{
+        readonly key: "none";
+        readonly value: "0";
+    }, {
+        readonly key: "xs";
+        readonly value: "var(--teddy-border-radius-xs)";
+    }, {
+        readonly key: "sm";
+        readonly value: "var(--teddy-border-radius-sm)";
+    }, {
+        readonly key: "md";
+        readonly value: "var(--teddy-border-radius-md)";
+    }, {
+        readonly key: "lg";
+        readonly value: "var(--teddy-border-radius-lg)";
+    }, {
+        readonly key: "full";
+        readonly value: "var(--teddy-border-radius-full)";
+    }];
+}, {
+    readonly key: "radiusBR";
+    readonly className: "teddy-radius-br";
+    readonly values: readonly [{
+        readonly key: "none";
+        readonly value: "0";
+    }, {
+        readonly key: "xs";
+        readonly value: "var(--teddy-border-radius-xs)";
+    }, {
+        readonly key: "sm";
+        readonly value: "var(--teddy-border-radius-sm)";
+    }, {
+        readonly key: "md";
+        readonly value: "var(--teddy-border-radius-md)";
+    }, {
+        readonly key: "lg";
+        readonly value: "var(--teddy-border-radius-lg)";
+    }, {
+        readonly key: "full";
+        readonly value: "var(--teddy-border-radius-full)";
+    }];
+}];
+export type RadiusProps = {
+    /**
+     * The radius of the element. 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 radius={{ sm: 'xs', md: 'sm' }}
+     */
+    radius?: Responsive<(typeof radiusValues)[number]['key']>;
+    /**
+     * The radius of the top-left corner of the element. 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 radius={{ sm: 'xs', md: 'sm' }}
+     */
+    radiusTL?: Responsive<(typeof radiusValues)[number]['key']>;
+    /**
+     * The radius of the top-right corner of the element. 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 radius={{ sm: 'xs', md: 'sm' }}
+     */
+    radiusTR?: Responsive<(typeof radiusValues)[number]['key']>;
+    /**
+     * The radius of the bottom-left corner of the element. 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 radius={{ sm: 'xs', md: 'sm' }}
+     */
+    radiusBL?: Responsive<(typeof radiusValues)[number]['key']>;
+    /**
+     * The radius of the bottom-right corner of the element. 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 radius={{ sm: 'xs', md: 'sm' }}
+     */
+    radiusBR?: Responsive<(typeof radiusValues)[number]['key']>;
+};
+export {};

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

@@ -0,0 +1,38 @@
+const radiusValues = [
+  { key: "none", value: "0" },
+  { key: "xs", value: "var(--teddy-border-radius-xs)" },
+  { key: "sm", value: "var(--teddy-border-radius-sm)" },
+  { key: "md", value: "var(--teddy-border-radius-md)" },
+  { key: "lg", value: "var(--teddy-border-radius-lg)" },
+  { key: "full", value: "var(--teddy-border-radius-full)" }
+];
+const radius = [
+  {
+    key: "radius",
+    className: "teddy-radius",
+    values: radiusValues
+  },
+  {
+    key: "radiusTL",
+    className: "teddy-radius-tl",
+    values: radiusValues
+  },
+  {
+    key: "radiusTR",
+    className: "teddy-radius-tr",
+    values: radiusValues
+  },
+  {
+    key: "radiusBL",
+    className: "teddy-radius-bl",
+    values: radiusValues
+  },
+  {
+    key: "radiusBR",
+    className: "teddy-radius-br",
+    values: radiusValues
+  }
+];
+export {
+  radius
+};

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

@@ -76,7 +76,7 @@ export type Responsive<T> = {
     [key in Breakpoint]?: T | AnyCssValue;
 } | (T | AnyCssValue);
 export declare const numberIterator: {
-    key: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
-    value: "1" | "10" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
+    value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
 }[];
 export {};

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.2",
   "sideEffects": [
     "**/*.css"
   ],