recastui/cjs/Box/index.js

Solidjs components library focused on usability, whitelabel theming, accessibility and developer experience

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var goober = require('goober');
var solidJs = require('solid-js');
var web = require('solid-js/web');
var system_index = require('../system/index.js');
var utils = require('../utils.js');
var theme_index = require('../theme/index.js');

/**
 * Use the Box component as a layout primitive to add margin, padding, and colors to content.
 * @see https://recastui.com/components/box
 */
function Box(props) {
  const theme = theme_index.useTheme();
  const withTheme = solidJs.mergeProps({
    as: 'div',
    __themeKey: 'variants',
    theme
  }, props); // Get all used system style props

  const usedSystemStylePropNames = utils.getAllUsedStyleProps(props);
  const baseStyles = {
    boxSizing: 'border-box',
    margin: 0,
    minWidth: 0
  };
  const [__themeKey, __css, variant, sxProp, systemStyleProps, otherProps] = solidJs.splitProps(withTheme, ['__themeKey'], ['__css'], ['variant'], ['sx'], usedSystemStylePropNames);
  const variantInTheme = system_index.get(theme, `${__themeKey}.${variant}`) || system_index.get(theme, variant);
  /*
   * Style injection order (first to last)
   * - class prop (least specific)
   * - baseStyle
   * - variants
   * - __css
   * - styled system props
   * - sx (override all)
   */

  const baseStylesClass = goober.css(system_index.systemCss(baseStyles)(theme));
  const variantStyles = variantInTheme && system_index.systemCss(variantInTheme)(theme);

  const __cssStylesStyles = system_index.systemCss(__css)(theme);

  const systemPropsStyles = system_index.systemCss(systemStyleProps)(theme);
  const sxPropStyles = system_index.systemCss(sxProp)(theme);
  const clone = solidJs.mergeProps(otherProps, {
    get class() {
      return [otherProps.class, baseStylesClass, ...[variantStyles, __cssStylesStyles, systemPropsStyles, sxPropStyles].map(styles => styles && !utils.isEmptyObject(styles) ? goober.css(styles) : '')].filter(Boolean).join(' ');
    }

  });
  const [local, newProps] = solidJs.splitProps(clone, ['as', 'theme']);
  let component;

  if (typeof local.as === 'function') {
    component = local.as(newProps);
  } else if (web.isServer) {
    const [children, others] = solidJs.splitProps(newProps, ['children']);
    component = web.Dynamic({
      component: local.as,

      get children() {
        return children;
      },

      ...others
    });
  } else {
    component = web.Dynamic(solidJs.mergeProps({
      component: local.as
    }, newProps));
  }

  return component;
}

exports.Box = Box;