@react-hive/honey-style 1.10.0 → 1.11.0

package/dist/index.dev.cjs

@@ -1796,12 +1796,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _contexts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../contexts */ "./src/contexts/index.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ "./src/utils.ts");
+
 
 
 
 const HoneyStyleProvider = ({ children, theme, }) => {
     const contextValue = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => ({
         theme,
+        resolveSpacing: (...args) => (0,_utils__WEBPACK_IMPORTED_MODULE_3__.resolveSpacing)(...args)({ theme }),
+        resolveColor: (...args) => (0,_utils__WEBPACK_IMPORTED_MODULE_3__.resolveColor)(...args)({ theme }),
+        resolveFont: (...args) => (0,_utils__WEBPACK_IMPORTED_MODULE_3__.resolveFont)(...args)({ theme }),
+        resolveDimension: (...args) => (0,_utils__WEBPACK_IMPORTED_MODULE_3__.resolveDimension)(...args)({ theme }),
     }), [theme]);
     return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_contexts__WEBPACK_IMPORTED_MODULE_2__.HoneyStyleContext, { value: contextValue, children: children });
 };
@@ -1945,7 +1951,9 @@ __webpack_require__.r(__webpack_exports__);
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./types */ "./src/types/types.ts");
-/* harmony import */ var _css_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./css.types */ "./src/types/css.types.ts");
+/* harmony import */ var _utility_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utility.types */ "./src/types/utility.types.ts");
+/* harmony import */ var _css_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./css.types */ "./src/types/css.types.ts");
+
 
 
 
@@ -1963,6 +1971,18 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./src/types/utility.types.ts":
+/*!************************************!*\
+  !*** ./src/types/utility.types.ts ***!
+  \************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+
+
+
 /***/ }),
 
 /***/ "./src/utils.ts":
@@ -1991,6 +2011,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   resolveColor: () => (/* binding */ resolveColor),
 /* harmony export */   resolveDimension: () => (/* binding */ resolveDimension),
 /* harmony export */   resolveFont: () => (/* binding */ resolveFont),
+/* harmony export */   resolveSpacing: () => (/* binding */ resolveSpacing),
 /* harmony export */   toKebabCase: () => (/* binding */ toKebabCase)
 /* harmony export */ });
 /* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Serializer.js");
@@ -2116,6 +2137,46 @@ const pxToRem = (px, base = 16) => `${px / base}rem`;
  * @returns True if the string value is a theme color value, false otherwise.
  */
 const checkIsThemeColorValue = (propertyValue) => propertyValue.split('.').length === 2;
+/**
+ * Resolves a spacing value or shorthand spacing array using the theme and optional unit.
+ *
+ * This function takes spacing multipliers and converts them into pixel or unit-based values
+ * using a theme spacing scale (e.g., `theme.spacings.base`). Useful for applying consistent
+ * layout spacing with theming and token support.
+ *
+ * @template Value - The spacing value(s) to resolve. Can be:
+ *                   - A number (e.g., `1`) representing a multiplier.
+ *                   - An array of numbers (e.g., `[1, 2, 3, 4]`) for shorthand spacing.
+ *                   - A dimension string (e.g., `'10px'`) will be returned as `never`.
+ * @template Unit - Optional CSS unit (`'px'`, `'em'`, etc.), or `null` to skip units.
+ *
+ * @param value - Spacing multiplier(s) to apply.
+ * @param [unit='px'] - The CSS unit to append. If `null`, values remain numeric.
+ * @param [type='base'] - The spacing type to use from the theme (e.g., `'base'`, `'small'`).
+ *
+ * @returns A function that takes a theme context and returns:
+ *          - A single resolved value (e.g., `'16px'`) if `value` is a number.
+ *          - A space-separated string (e.g., `'8px 12px'`) if `value` is an array.
+ *          - `never` if the input is a raw string (unsupported).
+ */
+const resolveSpacing = (value, unit = 'px', type = 'base') => ({ theme }) => {
+    if (typeof value === 'string') {
+        return value;
+    }
+    const selectedSpacing = theme.spacings[type] ?? 0;
+    if (typeof value === 'number') {
+        const normalizedValue = value * selectedSpacing;
+        return (unit ? `${normalizedValue}${unit}` : normalizedValue);
+    }
+    const calculatedValues = value.map(shorthandValue => {
+        if (typeof shorthandValue === 'string') {
+            return shorthandValue;
+        }
+        const calculatedValue = shorthandValue * selectedSpacing;
+        return unit ? `${calculatedValue}${unit}` : calculatedValue;
+    });
+    return calculatedValues.join(' ');
+};
 /**
  * Resolves the font styles based on the provided font name from the theme.
  *
@@ -2317,6 +2378,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 */   resolveSpacing: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveSpacing),
 /* 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)