@react-hive/honey-layout 17.7.0 → 17.8.0

package/dist/components/HoneyFlex/HoneyFlex.d.ts

@@ -7,28 +7,31 @@ export type HoneyFlexProps<Element extends ElementType = 'div'> = HoneyBoxProps<
      * When enabled, this prop applies:
      * - `display: inline-flex`
      *
-     * When disabled (default), the layout uses:
-     * - `display: flex`
+     * When disabled, the layout uses:
+     * - `$display`, when explicitly provided
+     * - otherwise `display: flex`
      *
      * This is a semantic convenience prop intended for inline alignment scenarios
      * (e.g. buttons, badges, form controls).
      *
-     * If `$display` is explicitly provided, it always takes precedence over this prop.
+     * `inline` takes precedence over `$display`.
      *
      * @default false
      */
     inline?: boolean;
     /**
-     * Enables horizontal (row-based) layout.
+     * Enables horizontal row-based layout.
      *
      * When enabled, this prop applies:
      * - `flex-direction: row`
      *
-     * When disabled (default), the layout uses:
-     * - `flex-direction: column`
+     * When disabled, the layout uses:
+     * - `$flexDirection`, when explicitly provided
+     * - otherwise `flex-direction: column`
      *
-     * This is a semantic convenience prop. If `$flexDirection` is explicitly provided,
-     * it will always take precedence.
+     * This is a semantic convenience prop.
+     *
+     * `$flexDirection` takes precedence over `row`.
      *
      * @default false
      */
@@ -52,8 +55,8 @@ export type HoneyFlexProps<Element extends ElementType = 'div'> = HoneyBoxProps<
     /**
      * Centers children along the horizontal axis.
      *
-     * - In column layouts: maps to `align-items: center`
-     * - In row layouts: maps to `justify-content: center`
+     * - In column and column-reverse layouts: maps to `align-items: center`
+     * - In row and row-reverse layouts: maps to `justify-content: center`
      *
      * Ignored if `center` is enabled or if the corresponding explicit style prop is provided.
      *
@@ -63,8 +66,8 @@ export type HoneyFlexProps<Element extends ElementType = 'div'> = HoneyBoxProps<
     /**
      * Centers children along the vertical axis.
      *
-     * - In column layouts: maps to `justify-content: center`
-     * - In row layouts: maps to `align-items: center`
+     * - In column and column-reverse layouts: maps to `justify-content: center`
+     * - In row and row-reverse layouts: maps to `align-items: center`
      *
      * Ignored if `center` is enabled or if the corresponding explicit style prop is provided.
      *
@@ -94,7 +97,11 @@ export type HoneyFlexProps<Element extends ElementType = 'div'> = HoneyBoxProps<
  * - `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
  *
  * ---
  *
@@ -115,7 +122,7 @@ export type HoneyFlexProps<Element extends ElementType = 'div'> = HoneyBoxProps<
  *
  * @example Horizontal layout
  * ```tsx
- * <HoneyFlex $gap={2} row/>
+ * <HoneyFlex $gap={2} row />
  * ```
  *
  * @example Column layout

package/dist/index.cjs

@@ -13,7 +13,7 @@
 
     ${e.HONEY_BREAKPOINTS.map(p)};
   `}
-`,m=new Set,h=(e,t)=>{m.has(e)||(m.add(e),console.warn(t))},y=(0,e.styled)(v,({inline:e=!1,row:n=!1,center:r=!1,centerX:o=!1,centerY:i=!1,$display:u,$flexDirection:c,$alignItems:s,$justifyContent:l,...a})=>{const f=e?"inline-flex":u??"flex",d=c??(n?"row":"column"),p="row"===d,v=r||(p?i:o),m=r||(p?o:i),y=s??(v?"center":void 0),g=l??(m?"center":void 0);if(t){const e=v&&void 0!==s,t=m&&void 0!==l;(e||t)&&h(`HoneyFlex:${e}:${t}`,["[@react-hive/honey-layout]: HoneyFlex.","Semantic centering props conflict with explicit flex alignment styles:",e&&"   - align-items is controlled by both semantics and $alignItems",t&&"   - justify-content is controlled by both semantics and $justifyContent","Explicit styles always win. Remove one side to silence this warning."].filter(Boolean).join("\n"))}return{$display:f,$flexDirection:d,$alignItems:y,$justifyContent:g,"data-testid":a["data-testid"]??"honey-flex"}})``;var g=n(684),b=n(953),x=n.t(b,2);const w=(0,b.createContext)(void 0),E=(0,e.styled)(y)`
+`,m=new Set,h=(e,t)=>{m.has(e)||(m.add(e),console.warn(t))},y=(0,e.styled)(v,({inline:e=!1,row:n=!1,center:r=!1,centerX:o=!1,centerY:i=!1,$display:u,$flexDirection:c,$alignItems:s,$justifyContent:l,...a})=>{const f=e?"inline-flex":u??"flex",d=c??(n?"row":"column"),p="row"===d||"row-reverse"===d,v="column"===d||"column-reverse"===d,m=r||(p?i:!!v&&o),y=r||(p?o:!!v&&i),g=s??(m?"center":void 0),b=l??(y?"center":void 0);if(t){const e=m&&void 0!==s,t=y&&void 0!==l;(e||t)&&h(`HoneyFlex:${e}:${t}`,["[@react-hive/honey-layout]: HoneyFlex.","Semantic centering props conflict with explicit flex alignment styles:",e&&"   - align-items is controlled by both semantics and $alignItems",t&&"   - justify-content is controlled by both semantics and $justifyContent","Explicit styles always win. Remove one side to silence this warning."].filter(Boolean).join("\n"))}return{$display:f,$flexDirection:d,$alignItems:g,$justifyContent:b,"data-testid":a["data-testid"]??"honey-flex"}})``;var g=n(684),b=n(953),x=n.t(b,2);const w=(0,b.createContext)(void 0),E=(0,e.styled)(y)`
   ${({columns:t,takeColumns:n=1,spacing:r=0,applyMaxWidth:o,applyBasis:i=!0,theme:u})=>{let c=null;return i&&(c=`calc(${n*(100/t)}% - ${(0,e.resolveSpacing)(r,null)({theme:u})/t*(t-n)}px)`),e.css`
       flex-basis: ${c};