@react-hive/honey-layout 17.7.0 → 17.8.0

package/dist/index.dev.cjs

@@ -4118,7 +4118,11 @@ __webpack_require__.r(__webpack_exports__);
  * - `centerX`, `centerY` → axis-aware centering helpers
  *
  * Semantic helpers exist purely for convenience and readability.
- * Any explicitly provided style props **always take precedence**.
+ *
+ * Precedence rules:
+ * - `inline` takes precedence over `$display`
+ * - `$flexDirection` takes precedence over `row`
+ * - `$alignItems` and `$justifyContent` take precedence over centering helpers
  *
  * ---
  *
@@ -4139,7 +4143,7 @@ __webpack_require__.r(__webpack_exports__);
  *
  * @example Horizontal layout
  * ```tsx
- * <HoneyFlex $gap={2} row/>
+ * <HoneyFlex $gap={2} row />
  * ```
  *
  * @example Column layout
@@ -4157,9 +4161,10 @@ __webpack_require__.r(__webpack_exports__);
 const HoneyFlex = (0,_react_hive_honey_style__WEBPACK_IMPORTED_MODULE_0__.styled)((0,_HoneyBox__WEBPACK_IMPORTED_MODULE_3__.HoneyBox), ({ inline = false, row = false, center = false, centerX = false, centerY = false, $display, $flexDirection, $alignItems, $justifyContent, ...props }) => {
     const display = inline ? 'inline-flex' : ($display ?? 'flex');
     const flexDirection = $flexDirection ?? (row ? 'row' : 'column');
-    const isRow = flexDirection === 'row';
-    const shouldCenterAlignItems = center || (isRow ? centerY : centerX);
-    const shouldCenterJustifyContent = center || (isRow ? centerX : centerY);
+    const isRowDirection = flexDirection === 'row' || flexDirection === 'row-reverse';
+    const isColumnDirection = flexDirection === 'column' || flexDirection === 'column-reverse';
+    const shouldCenterAlignItems = center || (isRowDirection ? centerY : isColumnDirection ? centerX : false);
+    const shouldCenterJustifyContent = center || (isRowDirection ? centerX : isColumnDirection ? centerY : false);
     const alignItems = $alignItems ?? (shouldCenterAlignItems ? 'center' : undefined);
     const justifyContent = $justifyContent ?? (shouldCenterJustifyContent ? 'center' : undefined);
     if (_constants__WEBPACK_IMPORTED_MODULE_1__.__DEV__) {
@@ -4169,9 +4174,9 @@ const HoneyFlex = (0,_react_hive_honey_style__WEBPACK_IMPORTED_MODULE_0__.styled
             (0,_utils__WEBPACK_IMPORTED_MODULE_2__.warnOnce)(`HoneyFlex:${hasAlignConflict}:${hasJustifyConflict}`, [
                 '[@react-hive/honey-layout]: HoneyFlex.',
                 'Semantic centering props conflict with explicit flex alignment styles:',
-                hasAlignConflict && `   - align-items is controlled by both semantics and $alignItems`,
+                hasAlignConflict && '   - align-items is controlled by both semantics and $alignItems',
                 hasJustifyConflict &&
-                    `   - justify-content is controlled by both semantics and $justifyContent`,
+                    '   - justify-content is controlled by both semantics and $justifyContent',
                 'Explicit styles always win. Remove one side to silence this warning.',
             ]
                 .filter(Boolean)