@startupjs-ui/div 0.3.1 → 0.3.7

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.7](https://github.com/startupjs/startupjs-ui/compare/v0.3.6...v0.3.7) (2026-06-20)
+
+
+### Bug Fixes
+
+* **div:** support row alignment values ([#38](https://github.com/startupjs/startupjs-ui/issues/38)) ([cc9f405](https://github.com/startupjs/startupjs-ui/commit/cc9f40539f3c8c4fb2a26fa71d5cdc847cd945c5))
+
+
+
+
+
+## [0.3.4](https://github.com/startupjs/startupjs-ui/compare/v0.3.3...v0.3.4) (2026-06-18)
+
+
+### Features
+
+* **div, span:** supportTextNodes auto-wrap on Div + pure mode on Span ([#35](https://github.com/startupjs/startupjs-ui/issues/35)) ([d7bf159](https://github.com/startupjs/startupjs-ui/commit/d7bf159e73060a2531f2a1d66ec1932e9ddc3e6f))
+
+
+
+
+
 ## [0.3.1](https://github.com/startupjs/startupjs-ui/compare/v0.3.0...v0.3.1) (2026-06-08)
 
 

package/README.mdx

@@ -54,8 +54,8 @@ You can use the following props to manage layout:
 - `row` -- aligns children from left to right (default: `false`)
 - `reverse` -- reverses the children order depending on the direction (default: `false`)
 - `wrap` -- controls wrapping of children into multiple rows (default: `false`)
-- `align` -- controls horizontal alignment (values: `'left'`, `'center'`, `'right'`)
-- `vAlign` -- controls vertical alignment (values: `'top'`, `'center'`, `'bottom'`)
+- `align` -- controls horizontal alignment (values: `'left'`, `'center'`, `'right'`; row layouts also support `'around'` and `'between'`)
+- `vAlign` -- controls vertical alignment (values: `'top'`, `'center'`, `'bottom'`; row layouts also support `'stretch'`, `'start'`, and `'end'`)
 - `gap` -- defines the spacing between items in [units](/docs/tutorial/TricksWithStyles#units); passing `true` is equivalent to `2`
 
 ```jsx example

package/index.cssx.styl

@@ -51,15 +51,30 @@ _shadowLevels = ('1' '2' '3' '4')
     &.right
       justify-content flex-end
 
+    &.between
+      justify-content space-between
+
+    &.around
+      justify-content space-around
+
+    &.v_start
+      align-items flex-start
+
     &.v_top
       align-items flex-start
 
     &.v_center
       align-items center
 
+    &.v_end
+      align-items flex-end
+
     &.v_bottom
       align-items flex-end
 
+    &.v_stretch
+      align-items stretch
+
   &.wrap
     flex-wrap wrap
 

package/index.d.ts

@@ -19,6 +19,13 @@ export interface DivProps extends Omit<ViewProps, 'role'> {
     style?: StyleProp<ViewStyle>;
     /** Content rendered inside Div */
     children?: ReactNode;
+    /** Auto-wrap bare text children. When true, runs of consecutive string/number
+     * children (including those inside arrays/fragments) are each wrapped into a
+     * single text node so they render correctly in a non-text container. @default false */
+    supportTextNodes?: boolean;
+    /** How to render an auto-wrapped text run (only used with supportTextNodes).
+     * Receives the merged text; should return a text element. Defaults to <Span/>. */
+    renderTextNode?: (text: string) => ReactNode;
     /** Visual feedback variant @default 'opacity' */
     variant?: 'opacity' | 'highlight';
     /** Render children in a horizontal row */
@@ -27,10 +34,10 @@ export interface DivProps extends Omit<ViewProps, 'role'> {
     wrap?: boolean;
     /** Reverse children order for row layouts */
     reverse?: boolean;
-    /** Horizontal alignment when using row/column */
-    align?: 'left' | 'center' | 'right';
-    /** Vertical alignment when using row/column */
-    vAlign?: 'top' | 'center' | 'bottom';
+    /** Horizontal alignment when using row/column. Row also supports Row-compatible distribution values. */
+    align?: 'left' | 'center' | 'right' | 'around' | 'between';
+    /** Vertical alignment when using row/column. Row also supports Row-compatible cross-axis values. */
+    vAlign?: 'top' | 'center' | 'bottom' | 'stretch' | 'start' | 'end';
     /** Spacing between children (true maps to default gap) */
     gap?: boolean | number;
     /** Enable press feedback styles (hover and active states) @default true */

package/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useLayoutEffect, useMemo, useState, useRef, type ReactNode, type RefObject } from 'react'
+import { Children, cloneElement, createElement, Fragment, isValidElement, useContext, useLayoutEffect, useMemo, useState, useRef, type ReactNode, type RefObject } from 'react'
 import {
   View,
   Pressable,
@@ -17,6 +17,7 @@ import {
   mergeInheritedTextStyles,
   omitInheritedTextStyle
 } from '@startupjs-ui/span/textStyleContext'
+import Span from '@startupjs-ui/span'
 import { useDecorateTooltipProps } from './useTooltip'
 import STYLES from './index.cssx.styl'
 
@@ -51,6 +52,13 @@ export interface DivProps extends Omit<ViewProps, 'role'> {
   style?: StyleProp<ViewStyle>
   /** Content rendered inside Div */
   children?: ReactNode
+  /** Auto-wrap bare text children. When true, runs of consecutive string/number
+   * children (including those inside arrays/fragments) are each wrapped into a
+   * single text node so they render correctly in a non-text container. @default false */
+  supportTextNodes?: boolean
+  /** How to render an auto-wrapped text run (only used with supportTextNodes).
+   * Receives the merged text; should return a text element. Defaults to <Span/>. */
+  renderTextNode?: (text: string) => ReactNode
   /** Visual feedback variant @default 'opacity' */
   variant?: 'opacity' | 'highlight'
   /** Render children in a horizontal row */
@@ -59,10 +67,10 @@ export interface DivProps extends Omit<ViewProps, 'role'> {
   wrap?: boolean
   /** Reverse children order for row layouts */
   reverse?: boolean
-  /** Horizontal alignment when using row/column */
-  align?: 'left' | 'center' | 'right'
-  /** Vertical alignment when using row/column */
-  vAlign?: 'top' | 'center' | 'bottom'
+  /** Horizontal alignment when using row/column. Row also supports Row-compatible distribution values. */
+  align?: 'left' | 'center' | 'right' | 'around' | 'between'
+  /** Vertical alignment when using row/column. Row also supports Row-compatible cross-axis values. */
+  vAlign?: 'top' | 'center' | 'bottom' | 'stretch' | 'start' | 'end'
   /** Spacing between children (true maps to default gap) */
   gap?: boolean | number
   /** Enable press feedback styles (hover and active states) @default true */
@@ -106,6 +114,8 @@ export interface DivProps extends Omit<ViewProps, 'role'> {
 function Div ({
   style: rawStyle = [],
   children,
+  supportTextNodes = false,
+  renderTextNode,
   variant = 'opacity',
   row,
   wrap,
@@ -131,6 +141,7 @@ function Div ({
   ...props
 }: DivProps): ReactNode {
   assertDeprecatedValues({ pushed, renderTooltip })
+  const renderedChildren = supportTextNodes ? wrapTextChildren(children, renderTextNode) : children
   let style = StyleSheet.flatten(rawStyle) as ViewStyle | undefined
   // on RN row-reverse switches margins and paddings sides, so we switch them back
   if (isNative && reverse) style = reverseMarginPaddingSides(style)
@@ -230,7 +241,7 @@ function Div ({
       ]
       accessible=accessible
       ...renderProps
-    )= children
+    )= renderedChildren
   `
   const styledDivElement = nextInheritedTextStyle
     ? pug`
@@ -247,6 +258,35 @@ function Div ({
   } else return styledDivElement
 }
 
+// Auto-wrap bare text so it renders in a non-text container. Each maximal run of
+// consecutive string/number children is merged into one text node (so 'a {x} b'
+// becomes one line, not three stacked nodes); element children break a run;
+// fragments are traversed inline; arrays are already flattened by React.Children.
+function wrapTextChildren (children: ReactNode, renderTextNode?: (text: string) => ReactNode): ReactNode {
+  const out: ReactNode[] = []
+  let run = ''
+  let key = 0
+  const flush = () => {
+    if (run === '') return
+    const text = run
+    run = ''
+    const node = renderTextNode ? renderTextNode(text) : createElement(Span, null, text)
+    out.push(isValidElement(node) ? cloneElement(node, { key: `__t${key++}` }) : node)
+  }
+  const walk = (nodes: ReactNode) => {
+    Children.forEach(nodes, child => {
+      if (child == null || typeof child === 'boolean') return
+      if (typeof child === 'string' || typeof child === 'number') { run += String(child); return }
+      if (isValidElement(child) && child.type === Fragment) { walk((child.props as { children?: ReactNode }).children); return }
+      flush()
+      out.push(isValidElement(child) && child.key == null ? cloneElement(child, { key: `__e${key++}` }) : child)
+    })
+  }
+  walk(children)
+  flush()
+  return out
+}
+
 function isWebOnlyRole (role: unknown): role is Exclude<UIRole, ViewProps['role']> {
   return role === 'listbox' || role === 'gridcell'
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/div",
-  "version": "0.3.1",
+  "version": "0.3.7",
   "publishConfig": {
     "access": "public"
   },
@@ -14,7 +14,7 @@
   "dependencies": {
     "@startupjs-ui/abstract-popover": "^0.3.0",
     "@startupjs-ui/core": "^0.3.0",
-    "@startupjs-ui/span": "^0.3.1"
+    "@startupjs-ui/span": "^0.3.4"
   },
   "peerDependencies": {
     "react": "*",
@@ -22,5 +22,5 @@
     "react-native-reanimated": ">=4.0.0",
     "startupjs": "*"
   },
-  "gitHead": "60311773bdc83f354c797a272774304502d28c58"
+  "gitHead": "a8bf45fdf47b12f25a690d9b9286fe1747edd5e9"
 }