@blerp/design 1.3.17 → 1.4.2

package/dist/cjs/neo-components/Paper.js

@@ -0,0 +1,256 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var withSx = require('./withSx.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const _excluded = ["elevation", "variant", "square", "children", "component", "style"],
+      _excluded2 = ["raised", "children", "style"],
+      _excluded3 = ["children", "component", "style"],
+      _excluded4 = ["disableSpacing", "children", "component", "style"],
+      _excluded5 = ["title", "subheader", "avatar", "action", "component", "style"],
+      _excluded6 = ["image", "src", "component", "alt", "height", "style", "children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Paper - Surface component with elevation (replaces MUI Paper)
+ */
+
+const BasePaper = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    elevation = 1,
+    variant = 'elevation',
+    square = false,
+    children,
+    component: Component = 'div',
+    style
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  // Box shadow values for different elevations
+  const elevationShadows = {
+    0: 'none',
+    1: '0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)',
+    2: '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+    3: '0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12)',
+    4: '0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)',
+    6: '0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)',
+    8: '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
+    12: '0px 7px 8px -4px rgba(0,0,0,0.2), 0px 12px 17px 2px rgba(0,0,0,0.14), 0px 5px 22px 4px rgba(0,0,0,0.12)',
+    16: '0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)',
+    24: '0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)'
+  };
+
+  const paperStyle = _objectSpread(_objectSpread(_objectSpread({
+    backgroundColor: 'var(--flyout-background, #fff)',
+    color: 'var(--body-text, #000)',
+    transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+  }, !square && {
+    borderRadius: '4px'
+  }), variant === 'outlined' ? {
+    border: '1px solid var(--border-color, rgba(0, 0, 0, 0.12))'
+  } : {
+    boxShadow: elevationShadows[elevation] || elevationShadows[1]
+  }), style);
+
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref,
+    style: paperStyle
+  }, props), children);
+});
+BasePaper.displayName = 'BasePaper';
+const Paper = withSx.withSx(BasePaper);
+/**
+ * Card - Card component built on Paper (replaces MUI Card)
+ */
+
+const BaseCard = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
+  let {
+    raised = false,
+    children,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+
+  const cardStyle = _objectSpread({
+    overflow: 'hidden'
+  }, style);
+
+  return /*#__PURE__*/React__default["default"].createElement(BasePaper, _extends__default["default"]({
+    ref: ref,
+    elevation: raised ? 8 : 1,
+    style: cardStyle
+  }, props), children);
+});
+BaseCard.displayName = 'BaseCard';
+const Card = withSx.withSx(BaseCard);
+/**
+ * CardContent - Content area for cards
+ */
+
+const BaseCardContent = /*#__PURE__*/React__default["default"].forwardRef((_ref3, ref) => {
+  let {
+    children,
+    component: Component = 'div',
+    style
+  } = _ref3,
+      props = _objectWithoutProperties__default["default"](_ref3, _excluded3);
+
+  const contentStyle = _objectSpread({
+    padding: '16px',
+    '&:last-child': {
+      paddingBottom: '24px'
+    }
+  }, style);
+
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref,
+    style: contentStyle
+  }, props), children);
+});
+BaseCardContent.displayName = 'BaseCardContent';
+withSx.withSx(BaseCardContent);
+/**
+ * CardActions - Action area for cards
+ */
+
+const BaseCardActions = /*#__PURE__*/React__default["default"].forwardRef((_ref4, ref) => {
+  let {
+    disableSpacing = false,
+    children,
+    component: Component = 'div',
+    style
+  } = _ref4,
+      props = _objectWithoutProperties__default["default"](_ref4, _excluded4);
+
+  const actionsStyle = _objectSpread(_objectSpread({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px'
+  }, !disableSpacing && {
+    gap: '8px'
+  }), style);
+
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref,
+    style: actionsStyle
+  }, props), children);
+});
+BaseCardActions.displayName = 'BaseCardActions';
+withSx.withSx(BaseCardActions);
+/**
+ * CardHeader - Header area for cards
+ */
+
+const BaseCardHeader = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref) => {
+  let {
+    title,
+    subheader,
+    avatar,
+    action,
+    component: Component = 'div',
+    style
+  } = _ref5,
+      props = _objectWithoutProperties__default["default"](_ref5, _excluded5);
+
+  const headerStyle = _objectSpread({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '16px'
+  }, style);
+
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref,
+    style: headerStyle
+  }, props), avatar && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginRight: '16px'
+    }
+  }, avatar), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, title && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      fontWeight: 500,
+      fontSize: '1rem'
+    }
+  }, title), subheader && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      color: 'var(--secondary-text)',
+      fontSize: '0.875rem'
+    }
+  }, subheader)), action && /*#__PURE__*/React__default["default"].createElement("div", null, action));
+});
+BaseCardHeader.displayName = 'BaseCardHeader';
+withSx.withSx(BaseCardHeader);
+/**
+ * CardMedia - Media area for cards (images, videos, etc.)
+ */
+
+const BaseCardMedia = /*#__PURE__*/React__default["default"].forwardRef((_ref6, ref) => {
+  let {
+    image,
+    src,
+    component = 'div',
+    alt = '',
+    height,
+    style,
+    children
+  } = _ref6,
+      props = _objectWithoutProperties__default["default"](_ref6, _excluded6);
+
+  const imageSrc = image || src; // If component is img, render as img
+
+  if (component === 'img') {
+    return /*#__PURE__*/React__default["default"].createElement("img", _extends__default["default"]({
+      ref: ref,
+      src: imageSrc,
+      alt: alt,
+      style: _objectSpread({
+        display: 'block',
+        width: '100%',
+        height,
+        objectFit: 'cover'
+      }, style)
+    }, props));
+  } // Otherwise render as div with background image
+
+
+  const Component = component;
+
+  const mediaStyle = _objectSpread(_objectSpread(_objectSpread({
+    display: 'block',
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center'
+  }, imageSrc && {
+    backgroundImage: "url(\"".concat(imageSrc, "\")")
+  }), height && {
+    height
+  }), style);
+
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref,
+    style: mediaStyle
+  }, props), children);
+});
+BaseCardMedia.displayName = 'BaseCardMedia';
+withSx.withSx(BaseCardMedia);
+
+exports.Card = Card;
+exports.Paper = Paper;
+exports["default"] = Paper;

package/dist/cjs/neo-components/Stack.js

@@ -0,0 +1,194 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var withSx = require('./withSx.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const _excluded = ["direction", "spacing", "alignItems", "justifyContent", "flexWrap", "divider", "useFlexGap", "children", "component", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Props that MUI Stack accepts directly and converts to styles
+ * These get extracted from props and merged into the style object
+ */
+
+const STYLE_PROPS = [// Sizing
+'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', // Margin (MUI shorthand)
+'m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', // Padding (MUI shorthand)
+'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', // Positioning
+'position', 'top', 'right', 'bottom', 'left', 'zIndex', // Display/Visibility
+'display', 'overflow', 'overflowX', 'overflowY', 'visibility', // Flex item props
+'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'alignSelf', 'order', // Background
+'bgcolor', 'backgroundColor', 'background', // Border
+'border', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'borderColor', 'borderRadius', // Other common ones
+'boxShadow', 'opacity', 'cursor', 'gap']; // MUI spacing shorthand mapping
+
+const SPACING_MAP = {
+  m: 'margin',
+  mt: 'marginTop',
+  mr: 'marginRight',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  bgcolor: 'backgroundColor'
+}; // Props that need mx/my expansion
+
+const AXIS_PROPS = {
+  mx: ['marginLeft', 'marginRight'],
+  my: ['marginTop', 'marginBottom'],
+  px: ['paddingLeft', 'paddingRight'],
+  py: ['paddingTop', 'paddingBottom']
+};
+const SPACING_UNIT = 8;
+/**
+ * Convert a spacing value - numbers get multiplied by 8px
+ */
+
+function parseSpacingValue(value) {
+  if (typeof value === 'number') {
+    return "".concat(value * SPACING_UNIT, "px");
+  }
+
+  return value;
+}
+/**
+ * Extract style props from props object
+ * Returns { styleProps, otherProps }
+ */
+
+
+function extractStyleProps(props) {
+  const styleProps = {};
+  const otherProps = {};
+
+  for (const [key, value] of Object.entries(props)) {
+    if (value === undefined || value === null) {
+      continue;
+    }
+
+    if (STYLE_PROPS.includes(key)) {
+      // Map shorthand to full property name
+      const cssKey = SPACING_MAP[key] || key; // Handle spacing values (numbers become px)
+
+      const isSpacingProp = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'gap'].includes(key);
+      const processedValue = isSpacingProp ? parseSpacingValue(value) : value;
+      styleProps[cssKey] = processedValue;
+    } else if (AXIS_PROPS[key]) {
+      // Handle mx, my, px, py - expand to both axes
+      const [prop1, prop2] = AXIS_PROPS[key];
+      const processedValue = parseSpacingValue(value);
+      styleProps[prop1] = processedValue;
+      styleProps[prop2] = processedValue;
+    } else {
+      otherProps[key] = value;
+    }
+  }
+
+  return {
+    styleProps,
+    otherProps
+  };
+}
+/**
+ * Stack - Flexbox layout component (replaces MUI Stack)
+ * Arranges children in a row or column with consistent spacing
+ * 
+ * @param {string} direction - 'row' | 'column' | 'row-reverse' | 'column-reverse'
+ * @param {number|string} spacing - Gap between children (number = multiplied by 8px)
+ * @param {string} alignItems - CSS align-items value
+ * @param {string} justifyContent - CSS justify-content value
+ * @param {string} flexWrap - CSS flex-wrap value
+ * @param {ReactNode} divider - Element to render between children
+ * @param {boolean} useFlexGap - Whether to use CSS gap (default: true)
+ * @param {string|Component} component - The root element type (default: 'div')
+ * 
+ * Also accepts direct style props like MUI:
+ * - Sizing: width, height, minWidth, maxWidth, minHeight, maxHeight
+ * - Spacing: m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py (numbers = 8px units)
+ * - Position: position, top, right, bottom, left, zIndex
+ * - And more: bgcolor, border, borderRadius, boxShadow, opacity, etc.
+ */
+
+
+const BaseStack = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    direction = 'column',
+    spacing = 0,
+    alignItems,
+    justifyContent,
+    flexWrap,
+    divider,
+    useFlexGap = true,
+    children,
+    component: Component = 'div',
+    style
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  // Extract style props from remaining props
+  const {
+    styleProps,
+    otherProps
+  } = React.useMemo(() => extractStyleProps(props), [props]); // Convert spacing to pixels (MUI uses 8px unit)
+
+  const gap = typeof spacing === 'number' ? "".concat(spacing * SPACING_UNIT, "px") : spacing;
+  const stackStyle = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: 'flex',
+    flexDirection: direction
+  }, useFlexGap && spacing ? {
+    gap
+  } : {}), alignItems && {
+    alignItems
+  }), justifyContent && {
+    justifyContent
+  }), flexWrap && {
+    flexWrap
+  }), styleProps), style), [direction, gap, alignItems, justifyContent, flexWrap, styleProps, style, useFlexGap, spacing]); // Handle divider prop - insert divider between each child
+
+  if (divider && React__default["default"].Children.count(children) > 1) {
+    const childArray = React__default["default"].Children.toArray(children).filter(Boolean);
+    const childrenWithDividers = [];
+    childArray.forEach((child, index) => {
+      childrenWithDividers.push(child);
+
+      if (index < childArray.length - 1) {
+        childrenWithDividers.push( /*#__PURE__*/React__default["default"].cloneElement(divider, {
+          key: "divider-".concat(index),
+          'aria-hidden': true
+        }));
+      }
+    });
+    return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+      ref: ref,
+      style: stackStyle
+    }, otherProps), childrenWithDividers);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref,
+    style: stackStyle
+  }, otherProps), children);
+});
+BaseStack.displayName = 'BaseStack'; // Export with sx prop support
+
+const Stack = withSx.withSx(BaseStack);
+
+exports.Stack = Stack;
+exports["default"] = Stack;