@blerp/design 1.3.17 → 1.4.2

package/dist/esm/neo-utils/sxToStyle.js

@@ -0,0 +1,502 @@
+import '@babel/runtime/helpers/defineProperty';
+
+/**
+ * Converts MUI sx prop to inline styles
+ * Handles spacing shortcuts, theme colors, pseudo-selectors, nested selectors, and responsive values
+ */
+// Spacing multiplier (MUI default is 8px)
+const SPACING_UNIT = 8; // Map of sx shorthand props to CSS properties
+
+const PROP_MAP = {
+  // Margin
+  m: 'margin',
+  mt: 'marginTop',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mx: ['marginLeft', 'marginRight'],
+  my: ['marginTop', 'marginBottom'],
+  // Padding
+  p: 'padding',
+  pt: 'paddingTop',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  pr: 'paddingRight',
+  px: ['paddingLeft', 'paddingRight'],
+  py: ['paddingTop', 'paddingBottom'],
+  // Sizing
+  w: 'width',
+  h: 'height',
+  minW: 'minWidth',
+  maxW: 'maxWidth',
+  minH: 'minHeight',
+  maxH: 'maxHeight',
+  // Flexbox
+  flexGrow: 'flexGrow',
+  flexShrink: 'flexShrink',
+  flexBasis: 'flexBasis',
+  justifyContent: 'justifyContent',
+  alignItems: 'alignItems',
+  alignSelf: 'alignSelf',
+  // Display
+  display: 'display',
+  overflow: 'overflow',
+  overflowX: 'overflowX',
+  overflowY: 'overflowY',
+  // Position
+  position: 'position',
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  zIndex: 'zIndex',
+  // Border
+  border: 'border',
+  borderTop: 'borderTop',
+  borderRight: 'borderRight',
+  borderBottom: 'borderBottom',
+  borderLeft: 'borderLeft',
+  borderColor: 'borderColor',
+  borderRadius: 'borderRadius',
+  borderWidth: 'borderWidth',
+  borderStyle: 'borderStyle',
+  // Background
+  bgcolor: 'backgroundColor',
+  backgroundColor: 'backgroundColor',
+  background: 'background',
+  backgroundImage: 'backgroundImage',
+  backgroundSize: 'backgroundSize',
+  backgroundPosition: 'backgroundPosition',
+  // Typography
+  fontFamily: 'fontFamily',
+  fontSize: 'fontSize',
+  fontStyle: 'fontStyle',
+  fontWeight: 'fontWeight',
+  letterSpacing: 'letterSpacing',
+  lineHeight: 'lineHeight',
+  textAlign: 'textAlign',
+  textDecoration: 'textDecoration',
+  textTransform: 'textTransform',
+  // Color
+  color: 'color',
+  // Shadow
+  boxShadow: 'boxShadow',
+  // Other
+  opacity: 'opacity',
+  cursor: 'cursor',
+  transition: 'transition',
+  transform: 'transform',
+  visibility: 'visibility',
+  whiteSpace: 'whiteSpace',
+  wordBreak: 'wordBreak',
+  boxSizing: 'boxSizing',
+  gap: 'gap',
+  rowGap: 'rowGap',
+  columnGap: 'columnGap',
+  gridTemplateColumns: 'gridTemplateColumns',
+  gridTemplateRows: 'gridTemplateRows',
+  gridColumn: 'gridColumn',
+  gridRow: 'gridRow',
+  flex: 'flex',
+  flexDirection: 'flexDirection',
+  flexWrap: 'flexWrap',
+  order: 'order',
+  // Additional MUI props
+  width: 'width',
+  height: 'height',
+  minWidth: 'minWidth',
+  maxWidth: 'maxWidth',
+  minHeight: 'minHeight',
+  maxHeight: 'maxHeight',
+  // Margin/padding with specific values
+  margin: 'margin',
+  padding: 'padding'
+}; // Props that should resolve theme colors
+
+const COLOR_PROPS = new Set(['color', 'backgroundColor', 'bgcolor', 'borderColor', 'background', 'borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'outlineColor', 'fill', 'stroke']);
+/**
+ * Convert spacing value to pixels
+ * Numbers are multiplied by spacing unit, strings pass through
+ */
+
+function parseSpacing(value) {
+  if (typeof value === 'number') {
+    return "".concat(value * SPACING_UNIT, "px");
+  }
+
+  return value;
+}
+/**
+ * Check if a value looks like a theme color reference
+ * e.g., "primary.main", "ibisRed.main", "grey6.main"
+ */
+
+
+function isThemeColorRef(value) {
+  if (typeof value !== 'string') return false; // Must have a dot, not be a URL, not have common CSS patterns
+
+  if (!value.includes('.')) return false;
+  if (value.startsWith('http') || value.startsWith('url(')) return false;
+  if (value.includes('px') || value.includes('%') || value.includes('rem')) return false;
+  if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl')) return false;
+  return true;
+}
+/**
+ * Resolve a theme color reference to an actual color value
+ * Handles: "ibisRed.main" -> "#FE295C"
+ *          "notBlack.main" -> "#21000C"
+ *          "grey6.main" -> looks up grey6 in colors
+ */
+
+
+function resolveThemeColor(value) {
+  let themeColors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!isThemeColorRef(value)) return value;
+  const parts = value.split('.');
+  let result = themeColors;
+
+  for (const part of parts) {
+    if (result && typeof result === 'object' && part in result) {
+      result = result[part];
+    } else {
+      // Color not found - return original value or a CSS variable fallback
+      const varName = "--".concat(value.replace(/\./g, '-').replace(/([A-Z])/g, '-$1').toLowerCase());
+      return "var(".concat(varName, ", ").concat(value, ")");
+    }
+  } // If we got a string, return it; if still an object, try .main
+
+
+  if (typeof result === 'string') {
+    return result;
+  } else if (result && typeof result === 'object' && 'main' in result) {
+    return result.main;
+  }
+
+  return value;
+}
+/**
+ * Check if a key is a nested CSS selector (class, element, or complex selector)
+ * Examples: ".braintree-method", "& > div", "& .child", ".foo .bar"
+ */
+
+
+function isNestedSelector(key) {
+  // Starts with a dot (class selector)
+  if (key.startsWith('.')) return true; // Starts with & (parent reference)
+
+  if (key.startsWith('&')) return true; // Contains spaces (complex selector)
+
+  if (key.includes(' ')) return true; // Element selectors (common ones)
+
+  const elementSelectors = ['div', 'span', 'p', 'a', 'button', 'input', 'img', 'svg', 'path'];
+  if (elementSelectors.includes(key)) return true;
+  return false;
+}
+/**
+ * Check if a key is a pseudo-selector
+ * Examples: "&:hover", "&:disabled", "&[disabled]", "&::before"
+ */
+
+
+function isPseudoSelector(key) {
+  if (!key.startsWith('&')) return false; // Must have : or [ after the &
+
+  const afterAmpersand = key.slice(1).trim();
+  return afterAmpersand.startsWith(':') || afterAmpersand.startsWith('[');
+}
+/**
+ * Check if a key is a media query
+ */
+
+
+function isMediaQuery(key) {
+  return key.startsWith('@media');
+}
+/**
+ * Extract different types of styles from sx object
+ */
+
+
+function extractSpecialSelectors(sx) {
+  const styles = {}; // Regular inline styles
+
+  const pseudos = {}; // Pseudo-selectors like &:hover
+
+  const nested = {}; // Nested selectors like .braintree-method
+
+  const mediaQueries = {}; // Media queries
+
+  for (const [key, value] of Object.entries(sx)) {
+    if (value === null || value === undefined) {
+      continue;
+    }
+
+    if (isMediaQuery(key)) {
+      mediaQueries[key] = value;
+    } else if (isPseudoSelector(key)) {
+      pseudos[key] = value;
+    } else if (isNestedSelector(key)) {
+      nested[key] = value;
+    } else if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      // Could be responsive values { xs: ..., sm: ..., md: ... }
+      const isResponsive = Object.keys(value).some(k => ['xs', 'sm', 'md', 'lg', 'xl'].includes(k));
+
+      if (isResponsive) {
+        // For now, just use the first value or 'xs'
+        styles[key] = value.xs || value.sm || value.md || Object.values(value)[0];
+      } else {
+        // Unknown object structure - skip for inline styles
+        // This might be a nested selector without & prefix
+        nested[key] = value;
+      }
+    } else {
+      styles[key] = value;
+    }
+  }
+
+  return {
+    styles,
+    pseudos,
+    nested,
+    mediaQueries
+  };
+}
+/**
+ * Convert a single sx value to a style value
+ */
+
+
+function convertValue(key, value, themeColors) {
+  // Handle null/undefined
+  if (value === null || value === undefined) return value; // Handle theme colors for color-related props
+
+  if (COLOR_PROPS.has(key) || COLOR_PROPS.has(PROP_MAP[key])) {
+    return resolveThemeColor(value, themeColors);
+  } // Handle spacing props
+
+
+  const spacingProps = ['m', 'mt', 'mb', 'ml', 'mr', 'mx', 'my', 'p', 'pt', 'pb', 'pl', 'pr', 'px', 'py', 'gap', 'rowGap', 'columnGap'];
+
+  if (spacingProps.includes(key)) {
+    return parseSpacing(value);
+  } // Handle borderRadius with theme spacing
+
+
+  if (key === 'borderRadius' && typeof value === 'number') {
+    return "".concat(value * 4, "px"); // MUI uses 4px for border radius units
+  }
+
+  return value;
+}
+/**
+ * Convert an sx styles object to a flat CSS properties object
+ */
+
+
+function convertStylesToCSS(styles, themeColors) {
+  const result = {};
+
+  for (const [key, value] of Object.entries(styles)) {
+    if (typeof value === 'object' && value !== null) {
+      continue; // Skip nested objects
+    }
+
+    const cssProps = PROP_MAP[key] || key;
+    const convertedValue = convertValue(key, value, themeColors);
+    if (convertedValue === null || convertedValue === undefined) continue;
+
+    if (Array.isArray(cssProps)) {
+      cssProps.forEach(prop => {
+        result[prop] = convertedValue;
+      });
+    } else {
+      result[cssProps] = convertedValue;
+    }
+  }
+
+  return result;
+}
+/**
+ * Main function: Convert sx prop to inline style object
+ * @param {Object} sx - MUI sx prop object
+ * @param {Object} themeColors - Theme color mappings from ThemeProvider
+ * @returns {Object} - { style: {...}, pseudoStyles: {...}, nestedStyles: {...}, pseudoClassName: string }
+ */
+
+
+function sxToStyle(sx) {
+  let themeColors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (!sx || typeof sx !== 'object') {
+    return {
+      style: {},
+      pseudoStyles: {},
+      nestedStyles: {},
+      mediaQueries: {},
+      pseudoClassName: ''
+    };
+  } // Handle array of sx objects (MUI supports this)
+
+
+  if (Array.isArray(sx)) {
+    const merged = sx.reduce((acc, sxObj) => {
+      if (sxObj) {
+        Object.assign(acc, sxObj);
+      }
+
+      return acc;
+    }, {});
+    return sxToStyle(merged, themeColors);
+  }
+
+  const {
+    styles,
+    pseudos,
+    nested,
+    mediaQueries
+  } = extractSpecialSelectors(sx); // Convert main styles
+
+  const result = convertStylesToCSS(styles, themeColors); // Process pseudo-selectors
+
+  const processedPseudos = {};
+
+  for (const [selector, pseudoSx] of Object.entries(pseudos)) {
+    if (typeof pseudoSx === 'object') {
+      processedPseudos[selector] = convertStylesToCSS(pseudoSx, themeColors);
+    }
+  } // Process nested selectors
+
+
+  const processedNested = {};
+
+  for (const [selector, nestedSx] of Object.entries(nested)) {
+    if (typeof nestedSx === 'object') {
+      // Recursively process nested styles (they might have their own pseudos/nested)
+      const {
+        styles: nestedStyles,
+        pseudos: nestedPseudos
+      } = extractSpecialSelectors(nestedSx);
+      processedNested[selector] = {
+        styles: convertStylesToCSS(nestedStyles, themeColors),
+        pseudos: {}
+      }; // Process any pseudo-selectors within the nested selector
+
+      for (const [pSelector, pSx] of Object.entries(nestedPseudos)) {
+        if (typeof pSx === 'object') {
+          processedNested[selector].pseudos[pSelector] = convertStylesToCSS(pSx, themeColors);
+        }
+      }
+    }
+  } // Process media queries
+
+
+  const processedMediaQueries = {};
+
+  for (const [query, querySx] of Object.entries(mediaQueries)) {
+    if (typeof querySx === 'object') {
+      processedMediaQueries[query] = convertStylesToCSS(querySx, themeColors);
+    }
+  }
+
+  const hasSpecialStyles = Object.keys(processedPseudos).length > 0 || Object.keys(processedNested).length > 0 || Object.keys(processedMediaQueries).length > 0;
+  return {
+    style: result,
+    pseudoStyles: processedPseudos,
+    nestedStyles: processedNested,
+    mediaQueries: processedMediaQueries,
+    pseudoClassName: hasSpecialStyles ? "blerp-sx-".concat(Math.random().toString(36).substr(2, 9)) : ''
+  };
+}
+/**
+ * Convert camelCase to kebab-case
+ */
+
+function toKebabCase(str) {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+/**
+ * Convert a styles object to CSS declarations string
+ */
+
+
+function stylesToDeclarations(styles) {
+  return Object.entries(styles).filter(_ref => {
+    let [, val] = _ref;
+    return val !== null && val !== undefined && val !== '';
+  }).map(_ref2 => {
+    let [prop, val] = _ref2;
+    return "".concat(toKebabCase(prop), ": ").concat(val);
+  }).join('; ');
+}
+/**
+ * Generate CSS string from all special styles (pseudos, nested, media queries)
+ */
+
+
+function generatePseudoCSS(className, pseudoStyles) {
+  let nestedStyles = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  let mediaQueries = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+
+  if (!className) {
+    return '';
+  }
+
+  let css = ''; // Generate pseudo-selector CSS
+
+  for (const [selector, styles] of Object.entries(pseudoStyles || {})) {
+    const cssSelector = selector.replace('&', ".".concat(className));
+    const declarations = stylesToDeclarations(styles);
+
+    if (declarations) {
+      css += "".concat(cssSelector, " { ").concat(declarations, " }\n");
+    }
+  } // Generate nested selector CSS
+
+
+  for (const [selector, data] of Object.entries(nestedStyles || {})) {
+    // Handle different selector formats
+    let cssSelector;
+
+    if (selector.startsWith('&')) {
+      // & .child or & > div
+      cssSelector = selector.replace('&', ".".concat(className));
+    } else if (selector.startsWith('.')) {
+      // .braintree-method - scope it under our class
+      cssSelector = ".".concat(className, " ").concat(selector);
+    } else {
+      // element selector like "div" or "span"
+      cssSelector = ".".concat(className, " ").concat(selector);
+    }
+
+    const declarations = stylesToDeclarations(data.styles || data);
+
+    if (declarations) {
+      css += "".concat(cssSelector, " { ").concat(declarations, " }\n");
+    } // Handle pseudo-selectors within nested selectors
+
+
+    if (data.pseudos) {
+      for (const [pSelector, pStyles] of Object.entries(data.pseudos)) {
+        const pCssSelector = "".concat(cssSelector).concat(pSelector.replace('&', ''));
+        const pDeclarations = stylesToDeclarations(pStyles);
+
+        if (pDeclarations) {
+          css += "".concat(pCssSelector, " { ").concat(pDeclarations, " }\n");
+        }
+      }
+    }
+  } // Generate media query CSS
+
+
+  for (const [query, styles] of Object.entries(mediaQueries || {})) {
+    const declarations = stylesToDeclarations(styles);
+
+    if (declarations) {
+      css += "".concat(query, " { .").concat(className, " { ").concat(declarations, " } }\n");
+    }
+  }
+
+  return css;
+}
+
+export { sxToStyle as default, generatePseudoCSS, sxToStyle };

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@blerp/design",
-  "version": "1.3.17",
+  "version": "1.4.2",
   "description": "Blerp UI",
   "main": "dist/esm/index.js",
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "watch": "rollup -c -w"
   },
   "peerDependencies": {
-    "@mui/icons-material": "5.10.16",
     "@mui/material": "5.10.16",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "styled-components": "^5.0.0 || ^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "styled-components": {
+      "optional": true
+    },
+    "@mui/material": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
     "@blerp/wavesurfer": "^6.4.2",
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
-    "@mui/styled-engine-sc": "5.10.16",
-    "react-avatar-editor": "13.0.0",
-    "react-color-extractor": "^1.1.2",
-    "react-dropzone": "14.2.3",
-    "react-palette": "^1.0.2",
-    "styled-components": "5.3.6"
-  },
-  "resolutions": {
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+    "autoprefixer": "^10.4.23"
   },
   "keywords": [
     "react",
@@ -38,12 +38,16 @@
     "@babel/plugin-transform-runtime": "^7.23.9",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
+    "@mui/styled-engine-sc": "5.10.16",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "rollup": "^2.50.5",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-styles": "^3.12.2",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "styled-components": "5.3.6"
   }
 }