@react-hive/honey-layout 9.11.0 → 9.12.0

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

@@ -4,24 +4,28 @@ export type HoneyFlexProps<Element extends ElementType = 'div'> = HoneyBoxProps<
     /**
      * Enables horizontal (row) layout.
      *
-     * When `true`, sets:
+     * When `true`, applies:
      * - `flex-direction: row`
      *
-     * When `false` (default), uses:
+     * When `false` (default), applies:
      * - `flex-direction: column`
      *
+     * This prop is a semantic shortcut and can be overridden
+     * by explicitly providing `$flexDirection`.
+     *
      * @default false
      */
     row?: boolean;
     /**
-     * Centers children both horizontally and vertically.
+     * Centers children along both axes.
      *
-     * When enabled, sets:
+     * When enabled, applies:
      * - `align-items: center`
      * - `justify-content: center`
      *
-     * This is a semantic shortcut and can be overridden
-     * by explicitly providing `$alignItems` or `$justifyContent`.
+     * This is a semantic convenience prop intended for common
+     * centering scenarios. Explicit style props such as
+     * `$alignItems` or `$justifyContent` will always take precedence.
      *
      * @default false
      */
@@ -30,36 +34,38 @@ export type HoneyFlexProps<Element extends ElementType = 'div'> = HoneyBoxProps<
 /**
  * A flexbox-based layout primitive built on top of {@link HoneyBox}.
  *
- * `HoneyFlex` provides a minimal, opinionated default flex configuration
- * while remaining fully customizable through standard style props.
+ * `HoneyFlex` provides a minimal, opinionated flex container with sensible
+ * defaults, while remaining fully customizable via standard Honey style props.
  *
  * ### Default behavior
  * - `display: flex`
  * - `flex-direction: column`
  *
  * ### Semantic helpers
- * - `row` → switches layout to horizontal flow
+ * - `row` → switches layout to a horizontal flow
  * - `center` → centers content on both axes
  *
- * Explicit style props always take precedence over semantic helpers.
+ * Semantic helpers are designed for convenience and readability.
+ * Any explicitly provided style props always take precedence.
  *
  * @remarks
  * This component is intended to be the primary flex layout primitive
- * within the Honey design system.
+ * within the Honey design system and should be preferred over raw
+ * flexbox usage for consistency.
  *
  * @example Basic column layout
  * ```tsx
- * <HoneyFlex gap={2} />
+ * <HoneyFlex $gap={2} />
  * ```
  *
  * @example Horizontal layout
  * ```tsx
- * <HoneyFlex gap={3} row />
+ * <HoneyFlex row $gap={3} />
  * ```
  *
  * @example Fully centered content
  * ```tsx
- * <HoneyFlex minHeight="100vh" center>
+ * <HoneyFlex $minHeight="100vh" center>
  *   <Spinner />
  * </HoneyFlex>
  * ```

package/dist/index.cjs

@@ -13,7 +13,7 @@
 
     ${e.HONEY_BREAKPOINTS.map(h)};
   `}
-`,g=(0,e.styled)(y,({row:e=!1,center:t=!1,$display:n="flex",$flexDirection:r=(e?"row":"column"),$alignItems:o=(t?"center":void 0),$justifyContent:i=(t?"center":void 0),...u})=>({$display:n,$flexDirection:r,$alignItems:o,$justifyContent:i,"data-testid":u["data-testid"]??"honey-flex"}))``,b=g;var w=o(848),x=o(953),E=o.t(x,2);const R=(0,x.createContext)(void 0),O=(0,e.styled)(g)`
+`,g=(0,e.styled)(y,({row:e=!1,center:t=!1,$display:n="flex",$flexDirection:r=(e?"row":"column"),$alignItems:o=(t?"center":void 0),$justifyContent:i=(!e&&t?"center":void 0),...u})=>({$display:n,$flexDirection:r,$alignItems:o,$justifyContent:i,"data-testid":u["data-testid"]??"honey-flex"}))``,b=g;var w=o(848),x=o(953),E=o.t(x,2);const R=(0,x.createContext)(void 0),O=(0,e.styled)(g)`
   ${({columns:t,takeColumns:n=1,spacing:r=0,applyMaxWidth:o,theme:i})=>{const u=`calc(${n*(100/t)}% - ${(0,e.resolveSpacing)(r,null)({theme:i})/t*(t-n)}px)`;return e.css`
       flex-basis: ${u};