@react-hive/honey-style 2.0.0 → 2.2.0

package/dist/index.dev.cjs

@@ -1462,80 +1462,6 @@ function filter (array, pattern) {
 }
 
 
-/***/ }),
-
-/***/ "./src/at-rules/index.ts":
-/*!*******************************!*\
-  !*** ./src/at-rules/index.ts ***!
-  \*******************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   mediaQuery: () => (/* reexport safe */ _media_query__WEBPACK_IMPORTED_MODULE_0__.mediaQuery)
-/* harmony export */ });
-/* harmony import */ var _media_query__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./media-query */ "./src/at-rules/media-query.ts");
-
-
-
-/***/ }),
-
-/***/ "./src/at-rules/media-query.ts":
-/*!*************************************!*\
-  !*** ./src/at-rules/media-query.ts ***!
-  \*************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   mediaQuery: () => (/* binding */ mediaQuery)
-/* harmony export */ });
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "./src/utils.ts");
-
-/**
- * Constructs a complete `@media` query string from an array of media rule objects.
- * Each rule defines conditions such as screen size, orientation, or resolution,
- * which are converted into standard CSS media query syntax.
- *
- * @param rules - An array of media rule objects used to generate individual media queries.
- *
- * @returns A string containing a full `@media` query that can be used in CSS or injected into a stylesheet.
- *
- * @example
- * ```ts
- * atMedia([
- *   { minWidth: '768px', orientation: 'landscape' },
- *   { mediaType: 'print' }
- * ]);
- * // Returns: "@media screen and (min-width: 768px) and (orientation: landscape), print"
- * ```
- */
-const mediaQuery = (rules) => {
-    const mediaRules = rules.map(rule => {
-        const rulesConfig = [
-            rule.width && ['width', rule.width],
-            rule.minWidth && ['min-width', rule.minWidth],
-            rule.maxWidth && ['max-width', rule.maxWidth],
-            rule.height && ['height', rule.height],
-            rule.minHeight && ['min-height', rule.minHeight],
-            rule.maxHeight && ['max-height', rule.maxHeight],
-            rule.orientation && ['orientation', rule.orientation],
-            rule.minResolution && ['min-resolution', rule.minResolution],
-            rule.maxResolution && ['max-resolution', rule.maxResolution],
-            rule.resolution && ['resolution', rule.resolution],
-            rule.update && ['update', rule.update],
-        ];
-        const conditions = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.boolFilter)(rulesConfig)
-            .map(ruleConfig => `(${ruleConfig[0]}: ${ruleConfig[1]})`)
-            .join(' and ');
-        const operatorPart = rule.operator ? `${rule.operator} ` : '';
-        const conditionsPart = conditions ? ` and ${conditions}` : '';
-        return `${operatorPart}${rule.mediaType ?? 'screen'}${conditionsPart}`;
-    });
-    return `@media ${mediaRules.join(', ')}`;
-};
-
-
 /***/ }),
 
 /***/ "./src/constants.ts":
@@ -1855,6 +1781,80 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./src/css/at-rules/index.ts":
+/*!***********************************!*\
+  !*** ./src/css/at-rules/index.ts ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   mediaQuery: () => (/* reexport safe */ _media_query__WEBPACK_IMPORTED_MODULE_0__.mediaQuery)
+/* harmony export */ });
+/* harmony import */ var _media_query__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./media-query */ "./src/css/at-rules/media-query.ts");
+
+
+
+/***/ }),
+
+/***/ "./src/css/at-rules/media-query.ts":
+/*!*****************************************!*\
+  !*** ./src/css/at-rules/media-query.ts ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   mediaQuery: () => (/* binding */ mediaQuery)
+/* harmony export */ });
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../utils */ "./src/utils.ts");
+
+/**
+ * Constructs a complete `@media` query string from an array of media rule objects.
+ * Each rule defines conditions such as screen size, orientation, or resolution,
+ * which are converted into standard CSS media query syntax.
+ *
+ * @param rules - An array of media rule objects used to generate individual media queries.
+ *
+ * @returns A string containing a full `@media` query that can be used in CSS or injected into a stylesheet.
+ *
+ * @example
+ * ```ts
+ * atMedia([
+ *   { minWidth: '768px', orientation: 'landscape' },
+ *   { mediaType: 'print' }
+ * ]);
+ * // Returns: "@media screen and (min-width: 768px) and (orientation: landscape), print"
+ * ```
+ */
+const mediaQuery = (rules) => {
+    const mediaRules = rules.map(rule => {
+        const rulesConfig = [
+            rule.width && ['width', rule.width],
+            rule.minWidth && ['min-width', rule.minWidth],
+            rule.maxWidth && ['max-width', rule.maxWidth],
+            rule.height && ['height', rule.height],
+            rule.minHeight && ['min-height', rule.minHeight],
+            rule.maxHeight && ['max-height', rule.maxHeight],
+            rule.orientation && ['orientation', rule.orientation],
+            rule.minResolution && ['min-resolution', rule.minResolution],
+            rule.maxResolution && ['max-resolution', rule.maxResolution],
+            rule.resolution && ['resolution', rule.resolution],
+            rule.update && ['update', rule.update],
+        ];
+        const conditions = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.boolFilter)(rulesConfig)
+            .map(ruleConfig => `(${ruleConfig[0]}: ${ruleConfig[1]})`)
+            .join(' and ');
+        const operatorPart = rule.operator ? `${rule.operator} ` : '';
+        const conditionsPart = conditions ? ` and ${conditions}` : '';
+        return `${operatorPart}${rule.mediaType ?? 'screen'}${conditionsPart}`;
+    });
+    return `@media ${mediaRules.join(', ')}`;
+};
+
+
 /***/ }),
 
 /***/ "./src/css/constants.ts":
@@ -1879,6 +1879,9 @@ const CSS_SPACING_PROPERTIES = [
     'paddingRight',
     'paddingBottom',
     'paddingLeft',
+    'paddingBlock',
+    'paddingBlockStart',
+    'paddingBlockEnd',
     'top',
     'right',
     'bottom',
@@ -1958,6 +1961,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   CSS_SPACING_PROPERTIES: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_1__.CSS_SPACING_PROPERTIES),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createSpacingMiddleware),
 /* harmony export */   css: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_4__.css),
+/* harmony export */   mediaQuery: () => (/* reexport safe */ _at_rules__WEBPACK_IMPORTED_MODULE_5__.mediaQuery),
 /* harmony export */   processCss: () => (/* reexport safe */ _processor__WEBPACK_IMPORTED_MODULE_3__.processCss)
 /* harmony export */ });
 /* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./types */ "./src/css/types.ts");
@@ -1965,6 +1969,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _middlewares__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./middlewares */ "./src/css/middlewares.ts");
 /* harmony import */ var _processor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./processor */ "./src/css/processor.ts");
 /* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./css */ "./src/css/css.ts");
+/* harmony import */ var _at_rules__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./at-rules */ "./src/css/at-rules/index.ts");
+
 
 
 
@@ -1986,22 +1992,27 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/css/constants.ts");
 
+const toKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+const KEBAB_CASE_SPACING_PROPERTIES = _constants__WEBPACK_IMPORTED_MODULE_0__.CSS_SPACING_PROPERTIES.map(toKebabCase);
 const createSpacingMiddleware = ({ spacingMultiplier }) => element => {
     if (!spacingMultiplier || element.type !== 'decl') {
         return;
     }
     if (typeof element.props === 'string' &&
-        _constants__WEBPACK_IMPORTED_MODULE_0__.CSS_SPACING_PROPERTIES.includes(element.props) &&
+        KEBAB_CASE_SPACING_PROPERTIES.includes(element.props) &&
         typeof element.children === 'string') {
-        const transformed = element.children
-            .split(/\s+/)
-            .map(value => {
-            if (/[a-z%]+$/i.test(value)) {
-                return value;
-            }
-            return `${parseFloat(value) * spacingMultiplier}px`;
-        })
-            .join(' ');
+        // If the whole value contains parentheses, skip entirely (likely calc or var)
+        if (/[()]/.test(element.children)) {
+            return;
+        }
+        const transformedParts = [];
+        const parts = element.children.trim().split(/\s+/);
+        for (const value of parts) {
+            transformedParts.push(
+            // Accept only numeric strings (integers or floats), no units or symbols
+            /^(\d+|\d*\.\d+)$/.test(value) ? `${parseFloat(value) * spacingMultiplier}px` : value);
+        }
+        const transformed = transformedParts.join(' ');
         element.return = `${element.props}:${transformed};`;
     }
 };
@@ -2378,18 +2389,6 @@ const styled = (target, defaultProps) => {
 };
 
 
-/***/ }),
-
-/***/ "./src/types/css.types.ts":
-/*!********************************!*\
-  !*** ./src/types/css.types.ts ***!
-  \********************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-
-
-
 /***/ }),
 
 /***/ "./src/types/index.ts":
@@ -2399,19 +2398,17 @@ __webpack_require__.r(__webpack_exports__);
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./types */ "./src/types/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");
-
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./theme */ "./src/types/theme.ts");
+/* harmony import */ var _utility__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utility */ "./src/types/utility.ts");
 
 
 
 
 /***/ }),
 
-/***/ "./src/types/types.ts":
+/***/ "./src/types/theme.ts":
 /*!****************************!*\
-  !*** ./src/types/types.ts ***!
+  !*** ./src/types/theme.ts ***!
   \****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -2422,10 +2419,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./src/types/utility.types.ts":
-/*!************************************!*\
-  !*** ./src/types/utility.types.ts ***!
-  \************************************/
+/***/ "./src/types/utility.ts":
+/*!******************************!*\
+  !*** ./src/types/utility.ts ***!
+  \******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
@@ -2800,31 +2797,31 @@ __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 */   assert: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.assert),
+/* harmony export */   boolFilter: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.boolFilter),
+/* harmony export */   checkIsThemeColorValue: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.checkIsThemeColorValue),
+/* harmony export */   combineClassNames: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.combineClassNames),
+/* harmony export */   convertHexToHexWithAlpha: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.convertHexToHexWithAlpha),
 /* harmony export */   createGlobalStyle: () => (/* reexport safe */ _global_style__WEBPACK_IMPORTED_MODULE_6__.createGlobalStyle),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createSpacingMiddleware),
 /* 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 */   filterNonHtmlAttrs: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.filterNonHtmlAttrs),
+/* harmony export */   generateId: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.generateId),
+/* harmony export */   isFunction: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isFunction),
+/* harmony export */   isNil: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isNil),
+/* harmony export */   isObject: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isObject),
+/* harmony export */   isString: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isString),
+/* harmony export */   isStyledComponent: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isStyledComponent),
+/* harmony export */   mediaQuery: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.mediaQuery),
 /* harmony export */   processCss: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.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 */   resolveSpacing: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveSpacing),
+/* harmony export */   pxToRem: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.pxToRem),
+/* harmony export */   resolveClassName: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.resolveClassName),
+/* harmony export */   resolveColor: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.resolveColor),
+/* harmony export */   resolveDimension: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.resolveDimension),
+/* harmony export */   resolveFont: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.resolveFont),
+/* harmony export */   resolveSpacing: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.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 */   toKebabCase: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.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");
@@ -2835,9 +2832,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./css */ "./src/css/index.ts");
 /* 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");
-
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils */ "./src/utils.ts");