@blerp/design 1.3.17 → 1.4.2

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

@@ -0,0 +1,277 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useMemo } from 'react';
+import { withSx } from './withSx.js';
+import { useTheme } from './ThemeProvider.js';
+
+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(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.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(_ref, _excluded);
+
+  const {
+    colors,
+    mode
+  } = 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 = 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 = 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 = 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.createElement(Component, _extends({
+    ref: ref,
+    style: textStyle
+  }, props), children);
+});
+BaseText.displayName = "BaseText";
+const Text = withSx(BaseText);
+const Typography = Text; // Alias for MUI compatibility
+
+export { Text, Typography, Text as default };