@blerp/design 1.3.17 → 1.4.1

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

@@ -0,0 +1,291 @@
+'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 = ["activeStep", "alternativeLabel", "children", "connector", "nonLinear", "orientation", "className", "style"],
+      _excluded2 = ["active", "completed", "disabled", "index", "alternativeLabel", "orientation", "children", "className", "style"],
+      _excluded3 = ["active", "completed", "disabled", "index", "icon", "optional", "StepIconComponent", "StepIconProps", "children", "className", "style"],
+      _excluded4 = ["active", "children", "TransitionComponent", "transitionDuration", "className", "style"],
+      _excluded5 = ["active", "completed", "disabled", "index", "icon", "optional", "children", "onClick", "className", "style"],
+      _excluded6 = ["orientation", "className", "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; }
+/**
+ * Stepper - displays progress through a sequence of steps
+ */
+
+const StepperBase = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    activeStep = 0,
+    alternativeLabel = false,
+    children,
+    connector,
+    nonLinear = false,
+    orientation = "horizontal",
+    className,
+    style
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    alignItems: alternativeLabel ? "flex-start" : "center"
+  }, style);
+
+  const steps = React__default["default"].Children.toArray(children);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), steps.map((step, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+    key: index
+  }, /*#__PURE__*/React__default["default"].cloneElement(step, {
+    index,
+    active: activeStep === index,
+    completed: activeStep > index,
+    disabled: !nonLinear && activeStep < index,
+    alternativeLabel,
+    orientation
+  }), index < steps.length - 1 && (connector || /*#__PURE__*/React__default["default"].createElement(StepConnector, {
+    orientation: orientation
+  })))));
+});
+StepperBase.displayName = "Stepper";
+const Stepper = withSx.withSx(StepperBase);
+/**
+ * Step - individual step in a Stepper
+ */
+
+const StepBase = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
+  let {
+    active = false,
+    completed = false,
+    disabled = false,
+    index,
+    alternativeLabel,
+    orientation,
+    children,
+    className,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    flexDirection: alternativeLabel ? "column" : "row",
+    alignItems: "center",
+    flex: orientation === "horizontal" ? 1 : undefined,
+    opacity: disabled ? 0.5 : 1
+  }, style);
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), React__default["default"].Children.map(children, child => /*#__PURE__*/React__default["default"].isValidElement(child) ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+    active,
+    completed,
+    disabled,
+    index
+  }) : child));
+});
+StepBase.displayName = "Step";
+withSx.withSx(StepBase);
+/**
+ * StepLabel - label for a Step
+ */
+
+const StepLabelBase = /*#__PURE__*/React__default["default"].forwardRef((_ref3, ref) => {
+  let {
+    active,
+    completed,
+    disabled,
+    index,
+    icon,
+    optional,
+    StepIconComponent,
+    StepIconProps,
+    children,
+    className,
+    style
+  } = _ref3,
+      props = _objectWithoutProperties__default["default"](_ref3, _excluded3);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  }, style);
+
+  const iconStyle = {
+    width: 24,
+    height: 24,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 12,
+    fontWeight: 600,
+    backgroundColor: completed ? "#7C4DFF" : active ? "#7C4DFF" : "#BDBDBD",
+    color: "#FFFFFF"
+  };
+  const labelStyle = {
+    color: disabled ? "#BDBDBD" : active ? "#000000" : "#757575",
+    fontWeight: active ? 600 : 400
+  };
+  const IconComponent = StepIconComponent;
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), IconComponent ? /*#__PURE__*/React__default["default"].createElement(IconComponent, _extends__default["default"]({
+    active: active,
+    completed: completed,
+    icon: index + 1
+  }, StepIconProps)) : icon ? icon : /*#__PURE__*/React__default["default"].createElement("span", {
+    style: iconStyle
+  }, completed ? "✓" : index + 1), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
+    style: labelStyle
+  }, children), optional && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      fontSize: 12,
+      color: "#757575"
+    }
+  }, optional)));
+});
+StepLabelBase.displayName = "StepLabel";
+const StepLabel = withSx.withSx(StepLabelBase);
+/**
+ * StepContent - content for vertical steppers
+ */
+
+const StepContentBase = /*#__PURE__*/React__default["default"].forwardRef((_ref4, ref) => {
+  let {
+    active,
+    children,
+    TransitionComponent,
+    transitionDuration,
+    className,
+    style
+  } = _ref4,
+      props = _objectWithoutProperties__default["default"](_ref4, _excluded4);
+
+  const baseStyle = _objectSpread({
+    marginLeft: 12,
+    paddingLeft: 20,
+    borderLeft: "1px solid #BDBDBD",
+    display: active ? "block" : "none"
+  }, style);
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), children);
+});
+StepContentBase.displayName = "StepContent";
+withSx.withSx(StepContentBase);
+/**
+ * StepButton - clickable step for non-linear steppers
+ */
+
+const StepButtonBase = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref) => {
+  let {
+    active,
+    completed,
+    disabled,
+    index,
+    icon,
+    optional,
+    children,
+    onClick,
+    className,
+    style
+  } = _ref5,
+      props = _objectWithoutProperties__default["default"](_ref5, _excluded5);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    background: "none",
+    border: "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    padding: 8,
+    borderRadius: 4,
+    transition: "background-color 0.2s"
+  }, style);
+
+  return /*#__PURE__*/React__default["default"].createElement("button", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle,
+    onClick: onClick,
+    disabled: disabled
+  }, props), /*#__PURE__*/React__default["default"].createElement(StepLabel, {
+    active: active,
+    completed: completed,
+    disabled: disabled,
+    index: index,
+    icon: icon,
+    optional: optional
+  }, children));
+});
+StepButtonBase.displayName = "StepButton";
+withSx.withSx(StepButtonBase);
+/**
+ * StepConnector - line between steps
+ */
+
+const StepConnectorBase = /*#__PURE__*/React__default["default"].forwardRef((_ref6, ref) => {
+  let {
+    orientation = "horizontal",
+    className,
+    style
+  } = _ref6,
+      props = _objectWithoutProperties__default["default"](_ref6, _excluded6);
+
+  const baseStyle = _objectSpread({
+    flex: orientation === "horizontal" ? 1 : undefined,
+    height: orientation === "vertical" ? 24 : undefined,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, style);
+
+  const lineStyle = {
+    width: orientation === "horizontal" ? "100%" : 1,
+    height: orientation === "horizontal" ? 1 : "100%",
+    backgroundColor: "#BDBDBD",
+    margin: orientation === "horizontal" ? "0 8px" : "8px 0"
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: lineStyle
+  }));
+});
+StepConnectorBase.displayName = "StepConnector";
+const StepConnector = withSx.withSx(StepConnectorBase);
+
+exports.StepConnector = StepConnector;
+exports.StepLabel = StepLabel;
+exports.Stepper = Stepper;

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

@@ -0,0 +1,290 @@
+'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", "component", "align", "color", "gutterBottom", "noWrap", "paragraph", "children", "style", "fontSize", "fontColor", "fontWeight"];
+
+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; }
+/**
+ * Typography variants matching MUI defaults
+ */
+
+const VARIANT_STYLES = {
+  h1: {
+    fontSize: "6rem",
+    fontWeight: 300,
+    lineHeight: 1.167,
+    letterSpacing: "-0.01562em"
+  },
+  h2: {
+    fontSize: "3.75rem",
+    fontWeight: 300,
+    lineHeight: 1.2,
+    letterSpacing: "-0.00833em"
+  },
+  h3: {
+    fontSize: "3rem",
+    fontWeight: 400,
+    lineHeight: 1.167,
+    letterSpacing: "0em"
+  },
+  h4: {
+    fontSize: "2.125rem",
+    fontWeight: 400,
+    lineHeight: 1.235,
+    letterSpacing: "0.00735em"
+  },
+  h5: {
+    fontSize: "1.5rem",
+    fontWeight: 400,
+    lineHeight: 1.334,
+    letterSpacing: "0em"
+  },
+  h6: {
+    fontSize: "1.25rem",
+    fontWeight: 500,
+    lineHeight: 1.6,
+    letterSpacing: "0.0075em"
+  },
+  subtitle1: {
+    fontSize: "1rem",
+    fontWeight: 400,
+    lineHeight: 1.75,
+    letterSpacing: "0.00938em"
+  },
+  subtitle2: {
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    lineHeight: 1.57,
+    letterSpacing: "0.00714em"
+  },
+  body1: {
+    fontSize: "1rem",
+    fontWeight: 400,
+    lineHeight: 1.5,
+    letterSpacing: "0.00938em"
+  },
+  body2: {
+    fontSize: "0.875rem",
+    fontWeight: 400,
+    lineHeight: 1.43,
+    letterSpacing: "0.01071em"
+  },
+  button: {
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    lineHeight: 1.75,
+    letterSpacing: "0.02857em",
+    textTransform: "uppercase"
+  },
+  caption: {
+    fontSize: "0.75rem",
+    fontWeight: 400,
+    lineHeight: 1.66,
+    letterSpacing: "0.03333em"
+  },
+  overline: {
+    fontSize: "0.75rem",
+    fontWeight: 400,
+    lineHeight: 2.66,
+    letterSpacing: "0.08333em",
+    textTransform: "uppercase"
+  },
+  inherit: {}
+}; // Map variant to semantic HTML element
+
+const VARIANT_MAPPING = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "h6",
+  subtitle2: "h6",
+  body1: "p",
+  body2: "p",
+  button: "span",
+  caption: "span",
+  overline: "span",
+  inherit: "span"
+}; // Map fontWeight string values to CSS values
+
+const FONT_WEIGHT_MAP = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+/**
+ * Typography/Text component (replaces MUI Typography)
+ *
+ * Supports legacy @blerp/design props:
+ * - fontSize: string (e.g., "42px", "1.5rem")
+ * - fontColor: string (theme color name like "grey7" or direct color)
+ * - fontWeight: string | number (e.g., "light", "bold", 400)
+ */
+
+const BaseText = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    variant = "body1",
+    component,
+    align,
+    color,
+    gutterBottom = false,
+    noWrap = false,
+    paragraph = false,
+    children,
+    style,
+    // Legacy @blerp/design props
+    fontSize,
+    fontColor,
+    fontWeight
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const {
+    colors,
+    mode
+  } = ThemeProvider.useTheme(); // Determine the HTML element to use
+
+  const Component = component || (paragraph ? "p" : VARIANT_MAPPING[variant] || "span"); // Resolve color from theme - check both color and fontColor props
+
+  const resolvedColor = React.useMemo(() => {
+    var _props$sx, _props$sx2, _props$sx3, _props$sx4, _props$sx5, _props$sx6, _props$sx7, _props$sx8;
+
+    // fontColor takes precedence if provided (legacy support)
+    const colorValue = fontColor || color || (props === null || props === void 0 ? void 0 : (_props$sx = props.sx) === null || _props$sx === void 0 ? void 0 : _props$sx.color);
+
+    if (!colorValue) {
+      // Default text color based on theme mode
+      return mode === "dark" ? "#FFFFFF" : "#FFFFFF"; // "#21000C";
+    }
+
+    if ((props === null || props === void 0 ? void 0 : (_props$sx2 = props.sx) === null || _props$sx2 === void 0 ? void 0 : _props$sx2.color) === "whiteOverride.main") return "#FFFFFF";
+    if ((props === null || props === void 0 ? void 0 : (_props$sx3 = props.sx) === null || _props$sx3 === void 0 ? void 0 : _props$sx3.color) === "white.real") return "#FFFFFF";
+    if ((props === null || props === void 0 ? void 0 : (_props$sx4 = props.sx) === null || _props$sx4 === void 0 ? void 0 : _props$sx4.color) === "grey2.real") return "#FFFFFF";
+    if ((props === null || props === void 0 ? void 0 : (_props$sx5 = props.sx) === null || _props$sx5 === void 0 ? void 0 : _props$sx5.color) === "grey6.main") return "#FFFFFF";
+    if ((props === null || props === void 0 ? void 0 : (_props$sx6 = props.sx) === null || _props$sx6 === void 0 ? void 0 : _props$sx6.color) === "grey7.main") return "#FFFFFF";
+    if ((props === null || props === void 0 ? void 0 : (_props$sx7 = props.sx) === null || _props$sx7 === void 0 ? void 0 : _props$sx7.color) === "notBlack.main") return "#FFFFFF";
+    if ((props === null || props === void 0 ? void 0 : (_props$sx8 = props.sx) === null || _props$sx8 === void 0 ? void 0 : _props$sx8.color) === "notBlack") return "#FFFFFF";
+    if (color === "grey3") return "#FFFFFF";
+    if (fontColor === "grey7") return "#FFFFFF";
+    if (color === "grey7.main" || colorValue === "grey7.main") return "#FFFFFF";
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "grey6") return "#FFFFFF";
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "grey6.main") return "#FFFFFF";
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "black.main") return "#FFFFFF";
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack") return "#FFFFFF";
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack.main") return "#FFFFFF"; // Hardcode plain white / black detection
+
+    if (colorValue.toLowerCase() === "white") return "#FFFFFF";
+    if (colorValue.toLowerCase() === "black") return "#000000"; // Handle "white.override" or similar
+
+    if (colorValue === "white.override" || colorValue === "whiteOverride") {
+      var _colors$whiteOverride;
+
+      return ((_colors$whiteOverride = colors.whiteOverride) === null || _colors$whiteOverride === void 0 ? void 0 : _colors$whiteOverride.main) || colors.whiteText || "#FFFFFF";
+    } // Handle theme color references like "ibisRed.main"
+
+
+    if (typeof colorValue === "string" && colorValue.includes(".")) {
+      var _colors$colorName;
+
+      const [colorName, variant = "main"] = colorValue.split(".");
+      return ((_colors$colorName = colors[colorName]) === null || _colors$colorName === void 0 ? void 0 : _colors$colorName[variant]) || colors[colorName] || colorValue;
+    } // Handle direct color names like "primary", "error", "grey7"
+
+
+    if (colors[colorValue]) {
+      const themeColor = colors[colorValue];
+
+      if (typeof themeColor === "object") {
+        return themeColor.main || themeColor.real || themeColor.override;
+      }
+
+      return themeColor;
+    } // Return as-is (hex, rgb, etc.)
+
+
+    return colorValue;
+  }, [color, fontColor, colors, mode]); // Resolve fontWeight - handle string values like "light", "bold"
+
+  const resolvedFontWeight = React.useMemo(() => {
+    if (fontWeight === undefined || fontWeight === null) {
+      return undefined; // Let variant default apply
+    }
+
+    if (typeof fontWeight === "number") {
+      return fontWeight;
+    }
+
+    if (typeof fontWeight === "string") {
+      // Check if it's a named weight
+      const mappedWeight = FONT_WEIGHT_MAP[fontWeight.toLowerCase()];
+
+      if (mappedWeight) {
+        return mappedWeight;
+      } // Maybe it's a numeric string like "400"
+
+
+      const parsed = parseInt(fontWeight, 10);
+
+      if (!isNaN(parsed)) {
+        return parsed;
+      }
+    }
+
+    return fontWeight;
+  }, [fontWeight]);
+  const textStyle = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    margin: 0,
+    fontFamily: "Open Sans, Inter, Odudo, Arial, sans-serif"
+  }, VARIANT_STYLES[variant]), align && {
+    textAlign: align
+  }), gutterBottom && {
+    marginBottom: "0.35em"
+  }), noWrap && {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }), paragraph && {
+    marginBottom: "16px"
+  }), {}, {
+    // Apply resolved color
+    color: resolvedColor
+  }, fontSize && {
+    fontSize
+  }), resolvedFontWeight !== undefined && {
+    fontWeight: resolvedFontWeight
+  }), style), {}, {
+    color: resolvedColor
+  }), [variant, align, gutterBottom, noWrap, paragraph, style, resolvedColor, fontSize, resolvedFontWeight]);
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref,
+    style: textStyle
+  }, props), children);
+});
+BaseText.displayName = "BaseText";
+const Text = withSx.withSx(BaseText);
+const Typography = Text; // Alias for MUI compatibility
+
+exports.Text = Text;
+exports.Typography = Typography;
+exports["default"] = Text;