@trap_stevo/legendarybuilderproreact-ui
Version: 
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
224 lines • 7.42 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
export var centerContent = function centerContent() {
  return {
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  };
};
export var toggle = function toggle(condition) {
  var toggleConfigurationSettings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var configurationSettings = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  return condition ? toggleConfigurationSettings : configurationSettings;
};
export var enableScrolling = function enableScrolling() {
  var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "both";
  var scrollStyles = {
    overflowX: direction === "horizontal" || direction === "both" ? "auto" : "hidden",
    overflowY: direction === "vertical" || direction === "both" ? "auto" : "hidden"
  };
  return scrollStyles;
};
export var equalColumns = function equalColumns(count) {
  var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "10px";
  return {
    display: "grid",
    gridTemplateColumns: "repeat(".concat(count, ", 1fr)"),
    gap: gap
  };
};
export var adjustSpacing = function adjustSpacing() {
  var gap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "10px";
  return {
    gap: gap
  };
};
export var responsiveFlex = function responsiveFlex() {
  var justifyContent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "center";
  var alignItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "center";
  return {
    display: "flex",
    justifyContent: justifyContent,
    alignItems: alignItems,
    flexWrap: "wrap"
  };
};
export var responsiveGrid = function responsiveGrid(minColumnWidth) {
  var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "10px";
  return {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(".concat(minColumnWidth, ", 1fr))"),
    gap: gap
  };
};
export var fixedSidebarLayout = function fixedSidebarLayout() {
  var sidebarWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "250px";
  var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "10px";
  return {
    display: "grid",
    gridTemplateColumns: "".concat(sidebarWidth, " 1fr"),
    gap: gap
  };
};
export var stackedLayout = function stackedLayout() {
  return {
    display: "grid",
    gridTemplateRows: "auto auto auto",
    gap: "10px"
  };
};
export var fullHeightLayout = function fullHeightLayout() {
  return {
    height: "100vh",
    display: "grid",
    gridTemplateRows: "1fr",
    gridTemplateColumns: "1fr"
  };
};
export var aspectRatio = function aspectRatio() {
  var ratio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "16:9";
  var _ratio$split = ratio.split(":"),
    _ratio$split2 = _slicedToArray(_ratio$split, 2),
    width = _ratio$split2[0],
    height = _ratio$split2[1];
  return {
    position: "relative",
    paddingBottom: "".concat(height / width * 100, "%"),
    height: 0,
    overflow: "hidden",
    '& > *': {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%"
    }
  };
};
export var alignStart = function alignStart() {
  return {
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "flex-start"
  };
};
export var alignEnd = function alignEnd() {
  return {
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "flex-end"
  };
};
export var alignCenter = function alignCenter() {
  return {
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  };
};
export var applyGridGap = function applyGridGap() {
  var gap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "10px";
  return {
    display: "grid",
    gap: gap
  };
};
export var autoRowsGrid = function autoRowsGrid() {
  var rowHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "auto";
  var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "10px";
  return {
    display: "grid",
    gridAutoRows: rowHeight,
    gap: gap
  };
};
export var autoFlow = function autoFlow() {
  var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "row";
  var dense = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  return {
    gridAutoFlow: "".concat(direction).concat(dense ? ' dense' : '')
  };
};
export var updateGridAreas = function updateGridAreas(currentAreas, newAreas) {
  return newAreas || currentAreas;
};
export var fixedFlexibleGrid = function fixedFlexibleGrid() {
  var fixedWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "200px";
  var flexibleWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1fr";
  var gap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "10px";
  return {
    display: "grid",
    gridTemplateColumns: "".concat(fixedWidth, " ").concat(flexibleWidth),
    gap: gap
  };
};
export var cardLayout = function cardLayout() {
  var cardHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "300px";
  var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "20px";
  return {
    display: "grid",
    gridTemplateRows: "repeat(auto-fill, ".concat(cardHeight, ")"),
    gridAutoFlow: "dense",
    gap: gap
  };
};
export var overlayGrid = function overlayGrid() {
  var gap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "10px";
  return {
    display: "grid",
    gridTemplateAreas: "'main main' 'overlay overlay'",
    gap: gap
  };
};
export var overlay = function overlay() {
  var zIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
  var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "rgba(0, 0, 0, 0.5)";
  return {
    position: "relative",
    zIndex: zIndex,
    backgroundColor: backgroundColor
  };
};
export var gradientBackground = function gradientBackground(startColor, endColor) {
  return {
    background: "linear-gradient(135deg, ".concat(startColor, ", ").concat(endColor, ")"),
    color: "#ffffff",
    padding: "20px",
    borderRadius: "10px",
    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)"
  };
};
export var gridWithBackground = function gridWithBackground(backgroundColor) {
  return {
    display: "grid",
    backgroundColor: backgroundColor,
    padding: "20px",
    borderRadius: "10px"
  };
};
export var circularGrid = function circularGrid() {
  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "100px";
  var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "20px";
  return {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(".concat(size, ", 1fr))"),
    gap: gap,
    alignItems: "center",
    justifyItems: "center"
  };
};
export var itemCursor = function itemCursor() {
  var cursorStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "pointer";
  return {
    cursor: cursorStyle
  };
};
export var hoverEffectGrid = function hoverEffectGrid() {
  return {
    display: "grid",
    transition: "transform 0.3s ease-in-out",
    '&:hover': {
      transform: "scale(1.05)"
    }
  };
};