@blerp/design 1.3.17 → 1.4.1

package/dist/esm/neo-components/Grid.js

@@ -0,0 +1,244 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useState, useEffect } from 'react';
+import { withSx } from './withSx.js';
+
+const _excluded = ["container", "item", "spacing", "columns", "xs", "sm", "md", "lg", "xl", "direction", "wrap", "alignItems", "justifyContent", "children", "component", "style"],
+      _excluded2 = ["container", "size", "offset", "spacing", "columns", "rowSpacing", "columnSpacing", "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(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; }
+/**
+ * Hook to get current breakpoint
+ */
+
+const useBreakpoint = () => {
+  const [breakpoint, setBreakpoint] = useState('xs');
+  useEffect(() => {
+    const getBreakpoint = () => {
+      const width = window.innerWidth;
+      if (width >= 1536) return 'xl';
+      if (width >= 1200) return 'lg';
+      if (width >= 900) return 'md';
+      if (width >= 600) return 'sm';
+      return 'xs';
+    };
+
+    setBreakpoint(getBreakpoint());
+
+    const handleResize = () => {
+      setBreakpoint(getBreakpoint());
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return breakpoint;
+};
+/**
+ * Get the active column span based on current breakpoint
+ * Falls back to smaller breakpoints if larger ones aren't defined
+ */
+
+
+const getActiveColSpan = (breakpoint, _ref) => {
+  let {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  } = _ref;
+  const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+  const values = {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  };
+  const currentIndex = breakpoints.indexOf(breakpoint); // Start from current breakpoint and work backwards to find a defined value
+
+  for (let i = currentIndex; i >= 0; i--) {
+    const bp = breakpoints[i];
+
+    if (values[bp] !== undefined) {
+      return values[bp];
+    }
+  }
+
+  return undefined;
+};
+/**
+ * Grid - Responsive grid layout (replaces MUI Grid)
+ * Uses Flexbox for layout with responsive breakpoints
+ * 
+ * Props:
+ * - container: Makes this a grid container
+ * - item: Makes this a grid item
+ * - spacing: Gap between items (uses 8px unit)
+ * - xs, sm, md, lg, xl: Responsive column spans (1-12 or 'auto' or true)
+ * - columns: Total columns in the grid (default 12)
+ */
+
+
+const BaseGrid = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    container = false,
+    item = false,
+    spacing = 0,
+    columns = 12,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    direction = 'row',
+    wrap = 'wrap',
+    alignItems,
+    justifyContent,
+    children,
+    component: Component = 'div',
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  const breakpoint = useBreakpoint(); // Convert spacing to pixels
+
+  const gap = typeof spacing === 'number' ? spacing * 8 : parseInt(spacing) || 0; // Get the active column span for current breakpoint
+
+  const activeColSpan = getActiveColSpan(breakpoint, {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  }); // Convert column span to width
+
+  const getColumnWidth = colSpan => {
+    if (colSpan === true || colSpan === 'auto') {
+      return 'auto';
+    }
+
+    if (typeof colSpan === 'number') {
+      return "".concat(colSpan / columns * 100, "%");
+    }
+
+    return undefined;
+  };
+
+  let gridStyle = _objectSpread({}, style);
+
+  if (container) {
+    // Container styles - use flexbox for MUI compatibility
+    gridStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      display: 'flex',
+      flexWrap: wrap,
+      flexDirection: direction
+    }, alignItems && {
+      alignItems
+    }), justifyContent && {
+      justifyContent
+    }), gap > 0 && {
+      margin: "-".concat(gap / 2, "px"),
+      width: "calc(100% + ".concat(gap, "px)")
+    }), gridStyle);
+  }
+
+  if (item) {
+    // Item styles
+    const columnWidth = getColumnWidth(activeColSpan);
+    gridStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      flexGrow: activeColSpan === true ? 1 : 0,
+      flexShrink: 0
+    }, columnWidth && columnWidth !== 'auto' && {
+      flexBasis: columnWidth,
+      maxWidth: columnWidth
+    }), activeColSpan === 'auto' && {
+      flexBasis: 'auto',
+      flexGrow: 0,
+      maxWidth: 'none'
+    }), activeColSpan === true && {
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: '100%'
+    }), gap > 0 && {
+      padding: "".concat(gap / 2, "px")
+    }), {}, {
+      boxSizing: 'border-box'
+    }, gridStyle);
+  }
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: gridStyle
+  }, props), children);
+});
+BaseGrid.displayName = 'BaseGrid';
+const Grid = withSx(BaseGrid);
+/**
+ * Grid2 alternative using CSS Grid
+ */
+
+const BaseGrid2 = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    container = false,
+    size,
+    offset,
+    spacing = 0,
+    columns = 12,
+    rowSpacing,
+    columnSpacing,
+    children,
+    component: Component = 'div',
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2);
+
+  const breakpoint = useBreakpoint();
+  const gap = typeof spacing === 'number' ? spacing * 8 : parseInt(spacing) || 0;
+  const rowGap = rowSpacing !== undefined ? typeof rowSpacing === 'number' ? rowSpacing * 8 : parseInt(rowSpacing) || 0 : gap;
+  const colGap = columnSpacing !== undefined ? typeof columnSpacing === 'number' ? columnSpacing * 8 : parseInt(columnSpacing) || 0 : gap;
+
+  let gridStyle = _objectSpread({}, style);
+
+  if (container) {
+    gridStyle = _objectSpread({
+      display: 'grid',
+      gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
+      rowGap: "".concat(rowGap, "px"),
+      columnGap: "".concat(colGap, "px")
+    }, gridStyle);
+  } else if (size !== undefined) {
+    // Grid item with size prop
+    const activeSize = typeof size === 'object' ? getActiveColSpan(breakpoint, size) : size;
+    const activeOffset = typeof offset === 'object' ? getActiveColSpan(breakpoint, offset) : offset;
+
+    if (activeSize === 'grow') {
+      gridStyle = _objectSpread({
+        gridColumn: 'span 1 / -1'
+      }, gridStyle);
+    } else if (typeof activeSize === 'number') {
+      gridStyle = _objectSpread({
+        gridColumn: "span ".concat(activeSize)
+      }, gridStyle);
+    }
+
+    if (typeof activeOffset === 'number') {
+      gridStyle = _objectSpread({
+        gridColumnStart: activeOffset + 1
+      }, gridStyle);
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: gridStyle
+  }, props), children);
+});
+BaseGrid2.displayName = 'BaseGrid2';
+withSx(BaseGrid2);
+
+export { Grid, Grid as default };

package/dist/esm/neo-components/IconButton.js

@@ -0,0 +1,99 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import { withSx } from './withSx.js';
+import { useTheme } from './ThemeProvider.js';
+
+const _excluded = ["color", "size", "disabled", "edge", "children", "onClick", "component", "href", "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(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; }
+/**
+ * IconButton - Circular button for icons (replaces MUI IconButton)
+ */
+
+const BaseIconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    color = 'default',
+    size = 'medium',
+    disabled = false,
+    edge,
+    children,
+    onClick,
+    component,
+    href,
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    colors
+  } = useTheme(); // Get color value
+
+  const getColor = () => {
+    if (color === 'default') return 'var(--icons-in-active, rgba(0, 0, 0, 0.54))';
+    if (color === 'inherit') return 'inherit';
+    const colorValue = colors[color];
+    return typeof colorValue === 'object' ? colorValue.main : colorValue || color;
+  }; // Size mappings
+
+
+  const sizeStyles = {
+    small: {
+      padding: '5px',
+      fontSize: '1.125rem'
+    },
+    medium: {
+      padding: '8px',
+      fontSize: '1.5rem'
+    },
+    large: {
+      padding: '12px',
+      fontSize: '1.75rem'
+    }
+  };
+
+  const buttonStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    boxSizing: 'border-box',
+    backgroundColor: 'transparent',
+    outline: 0,
+    border: 0,
+    margin: 0,
+    cursor: disabled ? 'default' : 'pointer',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    textDecoration: 'none',
+    color: getColor(),
+    borderRadius: '50%',
+    overflow: 'visible',
+    transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+  }, sizeStyles[size]), edge === 'start' && {
+    marginLeft: size === 'small' ? '-3px' : '-12px'
+  }), edge === 'end' && {
+    marginRight: size === 'small' ? '-3px' : '-12px'
+  }), disabled && {
+    opacity: 0.5,
+    pointerEvents: 'none'
+  }), style);
+
+  const Component = component || (href ? 'a' : 'button');
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: buttonStyle,
+    disabled: Component === 'button' ? disabled : undefined,
+    "aria-disabled": disabled,
+    onClick: disabled ? undefined : onClick,
+    href: href,
+    type: Component === 'button' ? 'button' : undefined
+  }, props), children);
+});
+BaseIconButton.displayName = 'BaseIconButton';
+const IconButton = withSx(BaseIconButton);
+
+export { IconButton, IconButton as default };