@blerp/design 1.3.17 → 1.4.1

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

@@ -0,0 +1,206 @@
+'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');
+var ThemeProvider = require('./ThemeProvider.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 = ["variant", "color", "size", "disabled", "fullWidth", "startIcon", "endIcon", "href", "component", "children", "style", "onClick", "type", "disableElevation", "disableRipple", "className"];
+
+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; }
+/**
+ * Button component (replaces MUI Button)
+ * Supports variant, color, size, and other MUI Button props
+ */
+
+const BaseButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    variant = "text",
+    color = "primary",
+    size = "medium",
+    disabled = false,
+    fullWidth = false,
+    startIcon,
+    endIcon,
+    href,
+    component,
+    children,
+    style,
+    onClick,
+    type = "button",
+    disableElevation = false,
+    disableRipple = false,
+    className = ""
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const {
+    colors
+  } = ThemeProvider.useTheme(); // Resolve color from theme palette
+
+  const colorPalette = React.useMemo(() => {
+    if (typeof color === "string") {
+      if (color === "grey7" || color === "notBlack") {
+        return {
+          main: "#FFFFFF",
+          contrastText: "#21000C",
+          dark: "#F5F5F5",
+          light: "#FFFFFF"
+        };
+      }
+
+      const paletteColor = colors[color];
+
+      if (paletteColor && typeof paletteColor === "object") {
+        return paletteColor;
+      }
+
+      return {
+        main: "#FFFFFF",
+        contrastText: "#21000C",
+        dark: "#E0E0E0",
+        light: "#FFFFFF"
+      };
+    }
+
+    return {
+      main: "#FFFFFF",
+      contrastText: "#21000C",
+      dark: "#E0E0E0",
+      light: "#FFFFFF"
+    };
+  }, [color, colors]); // Size configurations
+
+  const sizeConfig = React.useMemo(() => {
+    switch (size) {
+      case "small":
+        return {
+          padding: "4px 10px",
+          fontSize: "0.8125rem",
+          iconSize: "18px"
+        };
+
+      case "large":
+        return {
+          padding: "8px 22px",
+          fontSize: "0.9375rem",
+          iconSize: "24px"
+        };
+
+      case "medium":
+      default:
+        return {
+          padding: "6px 16px",
+          fontSize: "0.875rem",
+          iconSize: "20px"
+        };
+    }
+  }, [size]);
+  const main = colorPalette.main || "#FFFFFF";
+  const contrastText = colorPalette.contrastText || "#21000C";
+  const dark = colorPalette.dark || main; // Generate unique class name for this button instance
+
+  const buttonId = React.useMemo(() => "neo-btn-".concat(Math.random().toString(36).slice(2, 9)), []); // Build CSS for hover/active states
+
+  const dynamicStyles = React.useMemo(() => {
+    let baseStyles = "";
+    let hoverStyles = "";
+    let activeStyles = "";
+    const shadow = disableElevation ? "none" : "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)";
+    const hoverShadow = disableElevation ? "none" : "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)";
+    const activeShadow = disableElevation ? "none" : "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)";
+
+    switch (variant) {
+      case "contained":
+        baseStyles = "background-color: ".concat(main, "; color: ").concat(contrastText, "; border: none; box-shadow: ").concat(shadow, ";");
+        hoverStyles = "background-color: ".concat(dark, "; box-shadow: ").concat(hoverShadow, ";");
+        activeStyles = "background-color: ".concat(dark, "; box-shadow: ").concat(activeShadow, ";");
+        break;
+
+      case "outlined":
+        baseStyles = "background-color: transparent; color: ".concat(main, "; border: 2px solid ").concat(main, "; box-shadow: none;");
+        hoverStyles = "background-color: ".concat(main, "14;");
+        activeStyles = "background-color: ".concat(main, "24;");
+        break;
+
+      case "text":
+      default:
+        baseStyles = "background-color: transparent; color: ".concat(main, "; border: none; box-shadow: none;");
+        hoverStyles = "background-color: ".concat(main, "14;");
+        activeStyles = "background-color: ".concat(main, "24;");
+        break;
+    }
+
+    return "\n        .".concat(buttonId, " { ").concat(baseStyles, " }\n        .").concat(buttonId, ":hover:not(:disabled) { ").concat(hoverStyles, " }\n        .").concat(buttonId, ":active:not(:disabled) { ").concat(activeStyles, " }\n      ");
+  }, [buttonId, variant, main, contrastText, dark, disableElevation]); // Base button styles (static)
+
+  const buttonStyle = _objectSpread({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    position: "relative",
+    boxSizing: "border-box",
+    outline: 0,
+    margin: 0,
+    cursor: disabled ? "default" : "pointer",
+    userSelect: "none",
+    verticalAlign: "middle",
+    textDecoration: "none",
+    fontFamily: "Open Sans, Inter, Odudo, Arial, sans-serif",
+    fontWeight: 600,
+    letterSpacing: "0.05rem",
+    textTransform: "capitalize",
+    minWidth: "64px",
+    borderRadius: "6px",
+    transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)",
+    padding: sizeConfig.padding,
+    fontSize: sizeConfig.fontSize,
+    width: fullWidth ? "100%" : undefined,
+    opacity: disabled ? 0.5 : 1,
+    pointerEvents: disabled ? "none" : undefined
+  }, style);
+
+  const iconStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    width: sizeConfig.iconSize,
+    height: sizeConfig.iconSize,
+    lineHeight: 0
+  }; // Determine component type
+
+  const Component = component || (href ? "a" : "button");
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("style", null, dynamicStyles), /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref,
+    type: Component === "button" ? type : undefined,
+    href: href,
+    disabled: disabled,
+    style: buttonStyle,
+    className: "".concat(buttonId, " ").concat(className).trim(),
+    onClick: onClick
+  }, props), startIcon && /*#__PURE__*/React__default["default"].createElement("span", {
+    style: iconStyle
+  }, startIcon), children, endIcon && /*#__PURE__*/React__default["default"].createElement("span", {
+    style: iconStyle
+  }, endIcon)));
+});
+BaseButton.displayName = "BaseButton";
+const Button = withSx.withSx(BaseButton);
+
+exports.Button = Button;
+exports["default"] = Button;

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

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const _excluded = ["size", "thickness", "color", "variant", "value", "style", "className"];
+
+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; }
+const CircularProgress = _ref => {
+  let {
+    size = 40,
+    thickness = 3.6,
+    color = 'primary',
+    variant = 'indeterminate',
+    value = 0,
+    style,
+    className
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const colorMap = {
+    primary: '#FE295C',
+    // your pandaPink
+    secondary: '#49bea0',
+    // pandaNewTeal
+    inherit: 'currentColor'
+  };
+  const strokeColor = colorMap[color] || color;
+  const circumference = 2 * Math.PI * 20; // radius of 20
+
+  if (variant === 'determinate') {
+    const offset = circumference - value / 100 * circumference;
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
+      width: size,
+      height: size,
+      viewBox: "0 0 44 44",
+      className: className,
+      style: style
+    }, props), /*#__PURE__*/React__default["default"].createElement("circle", {
+      cx: "22",
+      cy: "22",
+      r: "20",
+      fill: "none",
+      stroke: strokeColor,
+      strokeWidth: thickness,
+      strokeDasharray: circumference,
+      strokeDashoffset: offset,
+      strokeLinecap: "round",
+      style: {
+        transform: 'rotate(-90deg)',
+        transformOrigin: 'center',
+        transition: 'stroke-dashoffset 0.3s ease'
+      }
+    }));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
+    width: size,
+    height: size,
+    viewBox: "0 0 44 44",
+    className: className,
+    style: _objectSpread({
+      animation: 'neo-circular-rotate 1.4s linear infinite'
+    }, style)
+  }, props), /*#__PURE__*/React__default["default"].createElement("style", null, "\n        @keyframes neo-circular-rotate {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n        @keyframes neo-circular-dash {\n          0% {\n            stroke-dasharray: 1, 200;\n            stroke-dashoffset: 0;\n          }\n          50% {\n            stroke-dasharray: 100, 200;\n            stroke-dashoffset: -15;\n          }\n          100% {\n            stroke-dasharray: 100, 200;\n            stroke-dashoffset: -125;\n          }\n        }\n      "), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "22",
+    cy: "22",
+    r: "20",
+    fill: "none",
+    stroke: strokeColor,
+    strokeWidth: thickness,
+    strokeLinecap: "round",
+    style: {
+      animation: 'neo-circular-dash 1.4s ease-in-out infinite'
+    }
+  }));
+};
+
+exports.CircularProgress = CircularProgress;

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

@@ -0,0 +1,75 @@
+'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 = ["maxWidth", "fixed", "disableGutters", "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; }
+/**
+ * Container - Centered content container (replaces MUI Container)
+ * Centers content horizontally with max-width constraints
+ */
+
+const BaseContainer = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    maxWidth = 'lg',
+    fixed = false,
+    disableGutters = false,
+    children,
+    component: Component = 'div',
+    style
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  // Max-width breakpoints (matching MUI defaults)
+  const maxWidthValues = {
+    xs: '444px',
+    sm: '600px',
+    md: '900px',
+    lg: '1200px',
+    xl: '1536px',
+    false: 'none'
+  };
+
+  const containerStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    width: '100%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    boxSizing: 'border-box',
+    display: 'block'
+  }, !disableGutters && {
+    paddingLeft: '16px',
+    paddingRight: '16px'
+  }), maxWidth && {
+    maxWidth: maxWidthValues[maxWidth] || maxWidth
+  }), fixed && {
+    // Fixed uses exact breakpoint widths instead of max
+    width: maxWidthValues[maxWidth] || maxWidth,
+    maxWidth: 'none'
+  }), style);
+
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref,
+    style: containerStyle
+  }, props), children);
+});
+BaseContainer.displayName = 'BaseContainer';
+const Container = withSx.withSx(BaseContainer);
+
+exports.Container = Container;
+exports["default"] = Container;