@react-hive/honey-style 1.7.0 → 1.8.1

package/dist/index.dev.cjs

@@ -1975,7 +1975,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   assert: () => (/* binding */ assert),
 /* harmony export */   boolFilter: () => (/* binding */ boolFilter),
+/* harmony export */   checkIsThemeColorValue: () => (/* binding */ checkIsThemeColorValue),
 /* harmony export */   combineClassNames: () => (/* binding */ combineClassNames),
+/* harmony export */   convertHexToHexWithAlpha: () => (/* binding */ convertHexToHexWithAlpha),
 /* harmony export */   filterNonHtmlAttrs: () => (/* binding */ filterNonHtmlAttrs),
 /* harmony export */   generateId: () => (/* binding */ generateId),
 /* harmony export */   isFunction: () => (/* binding */ isFunction),
@@ -1984,12 +1986,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   isString: () => (/* binding */ isString),
 /* harmony export */   isStyledComponent: () => (/* binding */ isStyledComponent),
 /* harmony export */   processCss: () => (/* binding */ processCss),
+/* harmony export */   pxToRem: () => (/* binding */ pxToRem),
 /* harmony export */   resolveClassName: () => (/* binding */ resolveClassName),
+/* harmony export */   resolveColor: () => (/* binding */ resolveColor),
+/* harmony export */   resolveDimension: () => (/* binding */ resolveDimension),
+/* harmony export */   resolveFont: () => (/* binding */ resolveFont),
 /* harmony export */   toKebabCase: () => (/* binding */ toKebabCase)
 /* harmony export */ });
-/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Serializer.js");
-/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Parser.js");
+/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Serializer.js");
+/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Parser.js");
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/constants.ts");
+/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./css */ "./src/css.ts");
+
 
 
 function assert(condition, message) {
@@ -2064,7 +2072,7 @@ const resolveClassName = (css) => `hscn-${hashString(css)}`;
 const isStyledComponent = (component) => _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLED_COMPONENT_ID_PROP in component;
 const processCss = (rawCss, selector) => {
     const scopedCss = selector ? `${selector}{${rawCss}}` : rawCss;
-    return (0,stylis__WEBPACK_IMPORTED_MODULE_1__.serialize)((0,stylis__WEBPACK_IMPORTED_MODULE_2__.compile)(scopedCss), stylis__WEBPACK_IMPORTED_MODULE_1__.stringify);
+    return (0,stylis__WEBPACK_IMPORTED_MODULE_2__.serialize)((0,stylis__WEBPACK_IMPORTED_MODULE_3__.compile)(scopedCss), stylis__WEBPACK_IMPORTED_MODULE_2__.stringify);
 };
 /**
  * Filters out non-standard HTML attributes from a props object intended for a native HTML element.
@@ -2089,6 +2097,107 @@ const filterNonHtmlAttrs = (attrs) => Object.entries(attrs).reduce((allowedAttrs
     }
     return allowedAttrs;
 }, {});
+/**
+ * Converts a pixel value to rem.
+ *
+ * @param px - The pixel value to be converted to rem.
+ * @param base - The base value for conversion. Default is 16, which is the typical root font size.
+ *
+ * @returns The value in rem as a string.
+ */
+const pxToRem = (px, base = 16) => `${px / base}rem`;
+/**
+ * Type guard function to check if a string value follows the pattern of a theme color value.
+ *
+ * A theme color value is assumed to be a string containing exactly one dot (e.g., 'primary.main').
+ *
+ * @param propertyValue - The string value to check.
+ *
+ * @returns True if the string value is a theme color value, false otherwise.
+ */
+const checkIsThemeColorValue = (propertyValue) => propertyValue.split('.').length === 2;
+/**
+ * Resolves the font styles based on the provided font name from the theme.
+ *
+ * @param fontName - The name of the font to be resolved from the theme.
+ *
+ * @returns A style function that takes a theme object and returns the CSS styles for the specified font.
+ */
+const resolveFont = (fontName) => ({ theme }) => {
+    const font = theme.fonts[fontName];
+    return (0,_css__WEBPACK_IMPORTED_MODULE_1__.css) `
+      font-family: ${font.family};
+      font-size: ${pxToRem(font.size)};
+      font-weight: ${font.weight};
+      line-height: ${font.lineHeight !== undefined && pxToRem(font.lineHeight)};
+      letter-spacing: ${font.letterSpacing !== undefined && pxToRem(font.letterSpacing)};
+    `;
+};
+/**
+ * Converts a 3-character or 6-character HEX color code to an 8-character HEX with alpha (RRGGBBAA) format.
+ *
+ * @param hex - The 3-character or 6-character HEX color code (e.g., "#RGB" or "#RRGGBB" or "RGB" or "RRGGBB").
+ * @param alpha - The alpha transparency value between 0 (fully transparent) and 1 (fully opaque).
+ *
+ * @throws {Error} If alpha value is not between 0 and 1, or if the hex code is invalid.
+ *
+ * @returns The 8-character HEX with alpha (RRGGBBAA) format color code, or null if input is invalid.
+ */
+const convertHexToHexWithAlpha = (hex, alpha) => {
+    if (alpha < 0 || alpha > 1) {
+        throw new Error(`[honey-layout]: Alpha "${alpha}" is not a valid hex format.`);
+    }
+    const hexRegex = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+    const match = hex.match(hexRegex);
+    if (!match) {
+        throw new Error(`[honey-layout]: Invalid hex format.`);
+    }
+    const cleanHex = match[1];
+    // Expand 3-character hex to 6-character hex if necessary
+    const fullHex = cleanHex.length === 3
+        ? cleanHex[0] + cleanHex[0] + cleanHex[1] + cleanHex[1] + cleanHex[2] + cleanHex[2]
+        : cleanHex;
+    // Convert to 8-character hex with alpha
+    const alphaHex = Math.round(alpha * 255)
+        .toString(16)
+        .toUpperCase()
+        .padStart(2, '0');
+    return `#${fullHex + alphaHex}`;
+};
+/**
+ * Resolves a color value from the theme or returns the input color directly if it's a standalone color name or HEX value.
+ *
+ * @param colorInput - A string representing the color to resolve.
+ *                 This can be:
+ *                  - A theme key in the format 'colorType.colorName'.
+ *                  - A standalone color name (e.g., "red", "blue").
+ *                  - A HEX color value (e.g., "#RRGGBB").
+ * @param [alpha] - The alpha transparency value between 0 (fully transparent) and 1 (fully opaque).
+ *                  Default to `undefined`.
+ *
+ * @returns A function that takes an `ExecutionContext` with a `theme` and resolves the color value:
+ *           - A HEX color string from the theme (e.g., "#RRGGBB").
+ *           - A HEX color string with alpha (e.g., "#RRGGBBAA") if `alpha` is provided.
+ *           - The input `colorKey` value directly if it's a standalone color name or HEX value.
+ *
+ * @throws Will throw an error if the provided alpha value is not within the valid range (0 to 1).
+ * @throws Will throw an error if the color format is invalid.
+ */
+const resolveColor = (colorInput, alpha) => ({ theme }) => {
+    const [colorType, colorName] = colorInput.split('.');
+    const color = colorName
+        ? theme.colors[colorType][colorName]
+        : colorType;
+    return alpha === undefined ? color : convertHexToHexWithAlpha(color, alpha);
+};
+/**
+ * Resolves a specific dimension value from the theme configuration.
+ *
+ * @param dimensionName - The name of the dimension to resolve.
+ *
+ * @returns A style function that takes the theme and returns the resolved dimension value from the theme.
+ */
+const resolveDimension = (dimensionName) => ({ theme }) => theme.dimensions[dimensionName];
 
 
 /***/ }),
@@ -2187,10 +2296,29 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   HoneyStyleProvider: () => (/* reexport safe */ _providers__WEBPACK_IMPORTED_MODULE_2__.HoneyStyleProvider),
 /* harmony export */   VALID_DOM_ELEMENT_ATTRS: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.VALID_DOM_ELEMENT_ATTRS),
 /* harmony export */   __DEV__: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.__DEV__),
+/* harmony export */   assert: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.assert),
+/* harmony export */   boolFilter: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.boolFilter),
+/* harmony export */   checkIsThemeColorValue: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.checkIsThemeColorValue),
+/* harmony export */   combineClassNames: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.combineClassNames),
+/* harmony export */   convertHexToHexWithAlpha: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.convertHexToHexWithAlpha),
 /* harmony export */   createGlobalStyle: () => (/* reexport safe */ _global_style__WEBPACK_IMPORTED_MODULE_6__.createGlobalStyle),
 /* harmony export */   css: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.css),
+/* harmony export */   filterNonHtmlAttrs: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.filterNonHtmlAttrs),
+/* harmony export */   generateId: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.generateId),
+/* harmony export */   isFunction: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isFunction),
+/* harmony export */   isNil: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isNil),
+/* harmony export */   isObject: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isObject),
+/* harmony export */   isString: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isString),
+/* harmony export */   isStyledComponent: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isStyledComponent),
 /* harmony export */   mediaQuery: () => (/* reexport safe */ _at_rules__WEBPACK_IMPORTED_MODULE_8__.mediaQuery),
+/* harmony export */   processCss: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.processCss),
+/* harmony export */   pxToRem: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.pxToRem),
+/* harmony export */   resolveClassName: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveClassName),
+/* harmony export */   resolveColor: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveColor),
+/* harmony export */   resolveDimension: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveDimension),
+/* harmony export */   resolveFont: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveFont),
 /* harmony export */   styled: () => (/* reexport safe */ _styled__WEBPACK_IMPORTED_MODULE_7__.styled),
+/* harmony export */   toKebabCase: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.toKebabCase),
 /* harmony export */   useHoneyStyle: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_3__.useHoneyStyle)
 /* harmony export */ });
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/constants.ts");
@@ -2202,6 +2330,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _global_style__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./global-style */ "./src/global-style.ts");
 /* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./styled */ "./src/styled.ts");
 /* harmony import */ var _at_rules__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./at-rules */ "./src/at-rules/index.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils */ "./src/utils.ts");
+