flexery/index.js

Flex modifier utilities for working with React

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.js
var src_exports = {};
__export(src_exports, {
  Flexery: () => Flexery,
  modsToStyle: () => modsToStyle,
  withFlexery: () => withFlexery
});
module.exports = __toCommonJS(src_exports);

// src/components/flexery.js
var import_react = __toESM(require("react"));

// src/lib/mods-to-style.js
var flexRegex = /^flex$/;
var flexBasisRegex = /^flex-(\d*)/;
var alignRegex = /^align(Top|Center|Bottom|Start|End|Baseline)$/;
var justifyRegex = /^just(Top|Center|Bottom|Start|End|Baseline|Between|Around|Evenly|Stretch)$/;
var centerRegex = /^center(X|Y)?$/;
var flexDirectionRegex = /^(row|column)(Reverse)?$/;
var applyFlex = (prop, o = {}) => {
  if (!flexRegex.test(prop))
    return false;
  o.display = "flex";
  return true;
};
var applyBasis = (prop, o = {}) => {
  if (!flexBasisRegex.test(prop))
    return false;
  const matches = flexBasisRegex.exec(prop);
  o.flex = matches[1];
  return true;
};
var applyAlignments = (prop, o = {}) => {
  if (!alignRegex.test(prop))
    return false;
  const matches = alignRegex.exec(prop);
  let cleanValue = matches[1].toLowerCase();
  if (["start", "end"].includes(cleanValue))
    cleanValue = "flex-" + cleanValue;
  o.alignItems = cleanValue;
  return true;
};
var applyJustifications = (prop, o = {}) => {
  if (!justifyRegex.test(prop))
    return false;
  const matches = justifyRegex.exec(prop);
  let cleanValue = matches[1].toLowerCase();
  if (["start", "end"].includes(cleanValue))
    cleanValue = "flex-" + cleanValue;
  if (["between", "around", "evenly"].includes(cleanValue))
    cleanValue = "space-" + cleanValue;
  switch (cleanValue) {
    case "space-around": {
      o.WebkitJustifyContent = "space-around";
      break;
    }
    case "space-evenly": {
      o.WebkitJustifyContent = "space-evenly";
      break;
    }
    case "stretch": {
      o.WebkitJustifyContent = "stretch";
      break;
    }
  }
  o.justifyContent = cleanValue;
  return true;
};
var applyDirections = (prop, o = {}) => {
  if (!flexDirectionRegex.test(prop))
    return false;
  const matches = flexDirectionRegex.exec(prop);
  const direction = matches[1].toLowerCase();
  const reverse = matches[2] && matches[2].length && matches[2].toLowerCase();
  let cleanDirection = direction;
  if (reverse)
    cleanDirection += "-reverse";
  o.flexDirection = cleanDirection;
  o.WebkitBoxOrient = direction === "row" ? "horizontal" : "vertical";
  o.WebkitBoxDirection = reverse ? "reverse" : "normal";
  return true;
};
var applyCenter = (prop, o = {}) => {
  if (!centerRegex.test(prop))
    return false;
  const matches = centerRegex.exec(prop);
  if (matches[1] === void 0) {
    o.alignItems = "center";
    o.justifyContent = "center";
  }
  if (matches[1] === "X")
    o.justifyContent = "center";
  if (matches[1] === "Y")
    o.alignItems = "center";
  return true;
};
function modsToStyle(mods) {
  const style = {};
  const sanitizedProps = __spreadValues({}, mods);
  for (const key of Object.keys(mods)) {
    if (!(applyFlex(key, style) || applyBasis(key, style) || applyAlignments(key, style) || applyDirections(key, style) || applyJustifications(key, style) || applyCenter(key, style)))
      continue;
    delete sanitizedProps[key];
  }
  return { style, sanitizedProps };
}

// src/components/flexery.js
var Flexery = (_a) => {
  var _b = _a, { children, style } = _b, props = __objRest(_b, ["children", "style"]);
  const { style: modifiersStyle, sanitizedProps } = modsToStyle(props);
  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({
    style: __spreadValues(__spreadValues({}, modifiersStyle), style)
  }, sanitizedProps), children);
};

// src/hoc/with-flexery.js
var import_react2 = __toESM(require("react"));
function withFlexery(Component) {
  return (_a) => {
    var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
    const { style: modifiersStyle, sanitizedProps } = modsToStyle(props);
    return /* @__PURE__ */ import_react2.default.createElement(Component, __spreadValues({
      style: __spreadValues(__spreadValues({}, modifiersStyle), style)
    }, sanitizedProps));
  };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Flexery,
  modsToStyle,
  withFlexery
});