@telia/teddy 0.0.24 → 0.0.25

package/dist/utils/generate-styling/grid.cjs

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_generateStyling_util = require("./util.cjs");
+const gridTemplateRowsValues = [...utils_generateStyling_util.numberIterator, { key: "none", value: "none" }];
+const gridTemplateColumnsValues = [
+  ...utils_generateStyling_util.numberIterator.map((v) => ({ key: v.key, value: `repeat(${v.value}, minmax(0, 1fr))` })),
+  { key: "none", value: "none" }
+];
+const gridColumnValues = [
+  ...utils_generateStyling_util.numberIterator,
+  {
+    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"
+  }
+];
+const gridRowValues = gridColumnValues;
+const displayGridValues = [
+  { key: "none", value: "none" },
+  { key: "grid", value: "grid" },
+  { key: "inline-grid", value: "inline-grid" }
+];
+const gridFlowValues = [
+  { key: "row", value: "row" },
+  { key: "column", value: "column" },
+  { key: "dense", value: "dense" },
+  { key: "row-dense", value: "row-dense" },
+  { key: "column-dense", value: "column-dense" }
+];
+const gridLayout = [
+  { key: "display", className: "teddy-display", values: displayGridValues },
+  {
+    key: "rows",
+    className: "teddy-gtr",
+    values: gridTemplateRowsValues
+  },
+  {
+    key: "columns",
+    className: "teddy-gtc",
+    values: gridTemplateColumnsValues
+  },
+  {
+    key: "flow",
+    className: "teddy-gaf",
+    values: gridFlowValues
+  }
+];
+const gridChildren = [
+  {
+    key: "gridColumnStart",
+    className: "teddy-gcs",
+    values: utils_generateStyling_util.numberIterator
+  },
+  {
+    key: "gridColumnEnd",
+    className: "teddy-gce",
+    values: utils_generateStyling_util.numberIterator
+  },
+  {
+    key: "gridRowStart",
+    className: "teddy-grs",
+    values: utils_generateStyling_util.numberIterator
+  },
+  {
+    key: "gridRowEnd",
+    className: "teddy-gre",
+    values: utils_generateStyling_util.numberIterator
+  },
+  {
+    key: "gridColumn",
+    className: "teddy-gc",
+    values: gridColumnValues
+  },
+  {
+    key: "gridRow",
+    className: "teddy-gr",
+    values: gridRowValues
+  }
+];
+exports.displayGridValues = displayGridValues;
+exports.gridChildren = gridChildren;
+exports.gridLayout = gridLayout;
+exports.gridTemplateColumnsValues = gridTemplateColumnsValues;
+exports.gridTemplateRowsValues = gridTemplateRowsValues;

package/dist/utils/generate-styling/height.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tokens_breakpoint_variables = require("../../tokens/breakpoint/variables.cjs");
+const heightValues = [
+  {
+    key: "bp-sm",
+    value: tokens_breakpoint_variables.teddyBreakpointSm
+  },
+  {
+    key: "bp-md",
+    value: tokens_breakpoint_variables.teddyBreakpointMd
+  },
+  {
+    key: "bp-lg",
+    value: tokens_breakpoint_variables.teddyBreakpointLg
+  },
+  {
+    key: "bp-xl",
+    value: tokens_breakpoint_variables.teddyBreakpointXl
+  },
+  {
+    key: "auto",
+    value: "auto"
+  },
+  {
+    key: "100%",
+    value: "100%"
+  },
+  {
+    key: "50%",
+    value: "50%"
+  }
+];
+const heights = [
+  {
+    key: "height",
+    className: "teddy-h",
+    values: heightValues
+  },
+  {
+    key: "minHeight",
+    className: "teddy-min-h",
+    values: heightValues
+  },
+  {
+    key: "maxHeight",
+    className: "teddy-max-h",
+    values: heightValues
+  }
+];
+exports.heights = heights;

package/dist/utils/generate-styling/index.cjs

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_generateStyling_margin = require("./margin.cjs");
+const utils_generateStyling_flex = require("./flex.cjs");
+const utils_generateStyling_width = require("./width.cjs");
+const utils_generateStyling_height = require("./height.cjs");
+const clsx = require("clsx");
+const utils_generateStyling_align = require("./align.cjs");
+const utils_generateStyling_gap = require("./gap.cjs");
+const utils_generateStyling_grid = require("./grid.cjs");
+const utils_generateStyling_justify = require("./justify.cjs");
+const utils_generateStyling_padding = require("./padding.cjs");
+const utils_generateStyling_position = require("./position.cjs");
+const utils_generateStyling_inset = require("./inset.cjs");
+const utils_generateStyling_color = require("./color.cjs");
+const utils_generateStyling_objectFit = require("./object-fit.cjs");
+const breakpoint = {
+  sm: "0px",
+  md: "600px",
+  lg: "1024px",
+  xl: "1440px"
+};
+const breakpoints = ["initial", ...Object.keys(breakpoint)];
+const displayValues = [...utils_generateStyling_flex.displayFlexValues, ...utils_generateStyling_grid.displayGridValues];
+const displayLayout = [
+  {
+    key: "display",
+    className: "teddy-display",
+    values: displayValues
+  }
+];
+const stylings = [
+  ...utils_generateStyling_position.position,
+  ...utils_generateStyling_objectFit.objectFit,
+  ...utils_generateStyling_inset.inset,
+  ...utils_generateStyling_margin.margins,
+  ...utils_generateStyling_padding.paddings,
+  ...utils_generateStyling_width.widths,
+  ...utils_generateStyling_height.heights,
+  ...utils_generateStyling_gap.gap,
+  ...utils_generateStyling_color.color,
+  ...utils_generateStyling_align.align,
+  ...utils_generateStyling_justify.justify,
+  ...displayLayout,
+  ...utils_generateStyling_flex.flexChildren,
+  ...utils_generateStyling_flex.flexLayout,
+  ...utils_generateStyling_grid.gridLayout,
+  ...utils_generateStyling_grid.gridChildren
+];
+function isResponsiveObject(obj) {
+  return typeof obj === "object" && Object.keys(obj).some((key) => breakpoints.includes(key));
+}
+function mergeStyles(...styles) {
+  let result = {};
+  for (const style of styles) {
+    if (style) {
+      result = { ...result, ...style };
+    }
+  }
+  return Object.keys(result).length ? result : void 0;
+}
+function extractProps(props) {
+  var _a;
+  const extractedProps = { ...props };
+  let style = extractedProps.style;
+  let className = extractedProps.className;
+  for (const key in stylings) {
+    const currentLayout = stylings[key];
+    const currentLayoutKey = currentLayout.key;
+    const layoutProp = extractedProps[currentLayoutKey];
+    if (layoutProp) {
+      if (isResponsiveObject(layoutProp)) {
+        Object.entries(layoutProp).forEach(([bp, value]) => {
+          var _a2;
+          const cssValue = ((_a2 = currentLayout.values.find((v) => v.key === value)) == null ? void 0 : _a2.value) ?? value;
+          style = mergeStyles(style, { [`--${currentLayout.className}-${bp}`]: cssValue });
+          const bpClassName = `${bp}:${currentLayout.className}`;
+          className = clsx(className, bpClassName);
+          delete extractedProps[currentLayoutKey];
+        });
+      }
+      if (typeof layoutProp === "string") {
+        const cssValue = ((_a = currentLayout.values.find((v) => v.key === layoutProp)) == null ? void 0 : _a.value) ?? layoutProp;
+        style = mergeStyles(style, { [`--${currentLayout.className}`]: cssValue });
+        const bpClassName = `${currentLayout.className}`;
+        className = clsx(className, bpClassName);
+        delete extractedProps[currentLayoutKey];
+      }
+    }
+  }
+  return { ...extractedProps, className, style };
+}
+exports.displayLayout = displayLayout;
+exports.displayValues = displayValues;
+exports.extractProps = extractProps;
+exports.mergeStyles = mergeStyles;
+exports.stylings = stylings;

package/dist/utils/generate-styling/inset.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_generateStyling_util = require("./util.cjs");
+const insetValues = [...utils_generateStyling_util.spacingValues, { key: "auto", value: "auto" }];
+const inset = [
+  {
+    key: "inset",
+    className: "teddy-inset",
+    values: insetValues
+  },
+  {
+    key: "top",
+    className: "teddy-top",
+    values: insetValues
+  },
+  {
+    key: "bottom",
+    className: "teddy-bottom",
+    values: insetValues
+  },
+  {
+    key: "left",
+    className: "teddy-left",
+    values: insetValues
+  },
+  {
+    key: "right",
+    className: "teddy-right",
+    values: insetValues
+  }
+];
+exports.inset = inset;
+exports.insetValues = insetValues;

package/dist/utils/generate-styling/justify.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const justifyValues = [
+  { key: "start", value: "flex-start" },
+  { key: "center", value: "center" },
+  { key: "end", value: "flex-end" },
+  { key: "between", value: "space-between" },
+  { key: "stretch", value: "stretch" }
+];
+const justify = [
+  {
+    key: "justify",
+    className: "teddy-jc",
+    values: justifyValues
+  }
+];
+exports.justify = justify;
+exports.justifyValues = justifyValues;

package/dist/utils/generate-styling/margin.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_generateStyling_util = require("./util.cjs");
+const marginValues = [...utils_generateStyling_util.spacingValues, { key: "auto", value: "auto" }];
+const margins = [
+  {
+    key: "m",
+    className: "teddy-m",
+    values: marginValues
+  },
+  {
+    key: "mt",
+    className: "teddy-mt",
+    values: marginValues
+  },
+  {
+    key: "mb",
+    className: "teddy-mb",
+    values: marginValues
+  },
+  {
+    key: "ml",
+    className: "teddy-ml",
+    values: marginValues
+  },
+  {
+    key: "mr",
+    className: "teddy-mr",
+    values: marginValues
+  }
+];
+exports.marginValues = marginValues;
+exports.margins = margins;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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
+  }
+];
+exports.objectFit = objectFit;
+exports.objectFitValues = objectFitValues;

package/dist/utils/generate-styling/padding.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_generateStyling_util = require("./util.cjs");
+const paddingValues = [...utils_generateStyling_util.spacingValues, { key: "auto", value: "auto" }];
+const paddings = [
+  {
+    key: "p",
+    className: "teddy-p",
+    values: paddingValues
+  },
+  {
+    key: "pt",
+    className: "teddy-pt",
+    values: paddingValues
+  },
+  {
+    key: "pb",
+    className: "teddy-pb",
+    values: paddingValues
+  },
+  {
+    key: "pl",
+    className: "teddy-pl",
+    values: paddingValues
+  },
+  {
+    key: "pr",
+    className: "teddy-pr",
+    values: paddingValues
+  }
+];
+exports.paddingValues = paddingValues;
+exports.paddings = paddings;

package/dist/utils/generate-styling/position.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const positionValues = [
+  { key: "relative", value: "relative" },
+  { key: "absolute", value: "absolute" },
+  { key: "fixed", value: "fixed" },
+  { key: "sticky", value: "sticky" },
+  { key: "static", value: "static" },
+  { key: "inherit", value: "inherit" },
+  { key: "initial", value: "initial" },
+  { key: "unset", value: "unset" }
+];
+const position = [
+  {
+    key: "position",
+    className: "teddy-position",
+    values: positionValues
+  }
+];
+exports.position = position;
+exports.positionValues = positionValues;

package/dist/utils/generate-styling/util.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const spacingValues = [
+  { key: "0", value: "var(--teddy-spacing-0)" },
+  { key: "10", value: "var(--teddy-spacing-10)" },
+  { key: "25", value: "var(--teddy-spacing-25)" },
+  { key: "50", value: "var(--teddy-spacing-50)" },
+  { key: "100", value: "var(--teddy-spacing-100)" },
+  { key: "150", value: "var(--teddy-spacing-150)" },
+  { key: "200", value: "var(--teddy-spacing-200)" },
+  { key: "250", value: "var(--teddy-spacing-250)" },
+  { key: "300", value: "var(--teddy-spacing-300)" },
+  { key: "400", value: "var(--teddy-spacing-400)" },
+  { key: "600", value: "var(--teddy-spacing-600)" },
+  { key: "800", value: "var(--teddy-spacing-800)" },
+  { key: "1000", value: "var(--teddy-spacing-1000)" },
+  { key: "1200", value: "var(--teddy-spacing-1200)" },
+  { key: "1600", value: "var(--teddy-spacing-1600)" },
+  { key: "gutter-sm", value: "var(--teddy-spacing-gutter-sm)" },
+  { key: "gutter-md", value: "var(--teddy-spacing-gutter-md)" },
+  { key: "gutter-lg", value: "var(--teddy-spacing-gutter-lg)" },
+  { key: "gutter-xl", value: "var(--teddy-spacing-gutter-xl)" },
+  { key: "page-padding-sm", value: "var(--teddy-spacing-page-padding-sm)" },
+  { key: "page-padding-md", value: "var(--teddy-spacing-page-padding-md)" },
+  { key: "page-padding-lg", value: "var(--teddy-spacing-page-padding-lg)" },
+  { key: "page-padding-xl", value: "var(--teddy-spacing-page-padding-xl)" }
+];
+const numberIterator = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"].map((v) => ({
+  key: v,
+  value: v
+}));
+exports.numberIterator = numberIterator;
+exports.spacingValues = spacingValues;

package/dist/utils/generate-styling/width.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const widthValues = [
+  { key: "auto", value: "auto" },
+  { key: "100%", value: "100%" },
+  { key: "50%", value: "50%" }
+];
+const widths = [
+  {
+    key: "width",
+    className: "teddy-w",
+    values: widthValues
+  },
+  {
+    key: "minWidth",
+    className: "teddy-min-w",
+    values: widthValues
+  },
+  {
+    key: "maxWidth",
+    className: "teddy-max-w",
+    values: widthValues
+  }
+];
+exports.widthValues = widthValues;
+exports.widths = widths;

package/dist/vite-env.d.cjs

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@telia/teddy",
-  "type": "module",
-  "main": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "main": "./dist/main.cjs",
+  "module": "./dist/main.js",
+  "types": "./dist/main.d.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
       "import": "./dist/main.js",
+      "require": "./dist/main.cjs",
       "types": "./dist/main.d.ts"
     },
     "./styles.css": "./dist/style.css"
   },
+  "type": "module",
   "devEngines": {
     "node": "18.x || 20.x || 21.x",
     "pnpm": ">=8"
   },
   "private": false,
-  "version": "0.0.24",
+  "version": "0.0.25",
   "sideEffects": [
     "**/*.css"
   ],

package/dist/components/text-field/tex-field-label.js

@@ -1 +0,0 @@
-