@bgord/design 0.26.0 → 0.27.2

package/dist/design.cjs.development.js

@@ -1680,6 +1680,7 @@ var LetterSpacingsGenerator = /*#__PURE__*/function () {
 var FlexGrowsGenerator = /*#__PURE__*/function () {
   function FlexGrowsGenerator(config) {
     this.flexGrows = config.flexGrows;
+    this.breakpoints = config.breakpoints;
   }
 
   var _proto = FlexGrowsGenerator.prototype;
@@ -1698,6 +1699,22 @@ var FlexGrowsGenerator = /*#__PURE__*/function () {
       output += "*[data-grow='" + key + "'] {\n  flex-grow: " + value + ";\n}\n";
     }
 
+    for (var _i2 = 0, _Object$entries2 = Object.entries(this.breakpoints); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _Object$entries2[_i2],
+          name = _Object$entries2$_i[0],
+          _value = _Object$entries2$_i[1];
+      output += "@media (max-width: " + _value + "px) {\n";
+
+      for (var _i3 = 0, _Object$entries3 = Object.entries(this.flexGrows); _i3 < _Object$entries3.length; _i3++) {
+        var _Object$entries3$_i = _Object$entries3[_i3],
+            _key = _Object$entries3$_i[0],
+            _value2 = _Object$entries3$_i[1];
+        output += "  *[data-" + name + "-grow='" + _key + "'] {\n    flex-grow: " + _value2 + ";\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
     return output;
   };
 
@@ -1888,6 +1905,68 @@ var BorderRadiusesGenerator = /*#__PURE__*/function () {
   return BorderRadiusesGenerator;
 }();
 
+var MaxWidthsGenerator = /*#__PURE__*/function () {
+  function MaxWidthsGenerator(config) {
+    this.maxWidths = config.maxWidths;
+  }
+
+  var _proto = MaxWidthsGenerator.prototype;
+
+  _proto.generateHeader = function generateHeader() {
+    return '/* Max widths */\n\n';
+  };
+
+  _proto.generateCss = function generateCss() {
+    var output = ''; // Regular display: data-max-width="*"
+
+    for (var _i = 0, _Object$entries = Object.entries(this.maxWidths); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-max-width='" + key + "'] {\n  max-width: " + value + ";\n}\n";
+    }
+
+    return output;
+  };
+
+  _proto.generateFooter = function generateFooter() {
+    return '/* ===================== */\n\n';
+  };
+
+  return MaxWidthsGenerator;
+}();
+
+var TransformsGenerator = /*#__PURE__*/function () {
+  function TransformsGenerator(config) {
+    this.transforms = config.transforms;
+  }
+
+  var _proto = TransformsGenerator.prototype;
+
+  _proto.generateHeader = function generateHeader() {
+    return '/* Transforms */\n\n';
+  };
+
+  _proto.generateCss = function generateCss() {
+    var output = ''; // Regular display: data-transform="*"
+
+    for (var _i = 0, _Object$entries = Object.entries(this.transforms); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-transform='" + key + "'] {\n  text-transform: " + value + ";\n}\n";
+    }
+
+    return output;
+  };
+
+  _proto.generateFooter = function generateFooter() {
+    return '/* ===================== */\n\n';
+  };
+
+  return TransformsGenerator;
+}();
+
 var Spacing = {
   '0': '0',
   '3': '3px',
@@ -2042,6 +2121,17 @@ var BorderRadiuses = {
   '4': '4px',
   '50%': '50%'
 };
+var MaxWidths = {
+  '100%': '100%',
+  '768': '768px',
+  unset: 'unset'
+};
+var Transforms = {
+  uppercase: 'uppercase',
+  lowercase: 'lowercase',
+  capitalize: 'capitalize',
+  none: 'none'
+};
 
 var GeneratorProcessor = /*#__PURE__*/function () {
   function GeneratorProcessor() {}
@@ -2148,10 +2238,12 @@ function _main() {
               flexGrows: FlexGrows,
               borderWidths: BorderWidths,
               borderColors: BorderColors,
-              borderRadiuses: BorderRadiuses
+              borderRadiuses: BorderRadiuses,
+              maxWidths: MaxWidths,
+              transforms: Transforms
             };
             _context2.next = 3;
-            return new GeneratorProcessor().process([new Margins(config), new Paddings(config), new DisplaysGenerator(config), new AxisPlacementsGenerator(config), new FlexWrapGenerator(config), new FlexDirectionsGenerator(config), new FlexGrowsGenerator(config), new WidthsGenerator(config), new PositionsGenerator(config), new ZIndexGenerator(config), new FontSizeGenerator(config), new FontWeightGenerator(config), new FontColorsGenerator(config), new LineHeightsGenerator(config), new LetterSpacingsGenerator(config), new BackgroundsGenerator(config), new BorderWidthsGenerator(config), new BorderColorsGenerator(config), new BorderRadiusesGenerator(config)]);
+            return new GeneratorProcessor().process([new Margins(config), new Paddings(config), new DisplaysGenerator(config), new AxisPlacementsGenerator(config), new FlexWrapGenerator(config), new FlexDirectionsGenerator(config), new FlexGrowsGenerator(config), new WidthsGenerator(config), new PositionsGenerator(config), new ZIndexGenerator(config), new FontSizeGenerator(config), new FontWeightGenerator(config), new FontColorsGenerator(config), new LineHeightsGenerator(config), new LetterSpacingsGenerator(config), new BackgroundsGenerator(config), new BorderWidthsGenerator(config), new BorderColorsGenerator(config), new BorderRadiusesGenerator(config), new MaxWidthsGenerator(config), new TransformsGenerator(config)]);
 
           case 3:
           case "end":