@xaui/native 0.9.1-alpha.19 → 0.9.1-alpha.20

package/dist/chunk-33QILJJH.cjs

@@ -0,0 +1,143 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+var _chunkEVXZGNPAcjs = require('./chunk-EVXZGNPA.cjs');
+
+// src/components/view/grid.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/view/grid.context.ts
+
+var GridContext = _react.createContext.call(void 0, null);
+var GridProvider = GridContext.Provider;
+function useGrid() {
+  const value = _react.useContext.call(void 0, GridContext);
+  if (value === null) {
+    throw new Error(
+      "XAUI: Grid.Item must be rendered inside a Grid \u2014 it spans that grid\u2019s columns, and outside one there is nothing to span."
+    );
+  }
+  return value;
+}
+function spanWidth({ cellWidth, columns, gap }, span) {
+  const clamped = Math.min(Math.max(Math.floor(span), 1), columns);
+  if (cellWidth === void 0) return `${100 / columns * clamped}%`;
+  return cellWidth * clamped + gap * (clamped - 1);
+}
+
+// src/components/view/grid.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var GridRoot = _react.forwardRef.call(void 0, function Grid({ children, columns = 2, gap = 0, style, onLayout, ...props }, ref) {
+  const [width, setWidth] = _react.useState.call(void 0, );
+  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
+  const safeColumns = Math.max(Math.floor(columns), 1);
+  const cellWidth = width === void 0 ? void 0 : (width - gap * (safeColumns - 1)) / safeColumns;
+  const context = _react.useMemo.call(void 0, 
+    () => ({ cellWidth, columns: safeColumns, gap }),
+    [cellWidth, safeColumns, gap]
+  );
+  const handleLayout = (event) => {
+    const next = event.nativeEvent.layout.width;
+    if (next > 0 && next !== width) setWidth(next);
+    _optionalChain([onLayout, 'optionalCall', _ => _(event)]);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GridProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.View,
+    {
+      ref,
+      onLayout: handleLayout,
+      style: [
+        { flexDirection: "row", flexWrap: "wrap", rowGap: gap, columnGap: gap },
+        styleProps,
+        style
+      ],
+      ...rest,
+      children: _react.Children.map(
+        children,
+        (child) => isGridItem(child) ? child : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: { width: spanWidth(context, 1) }, children: child })
+      )
+    }
+  ) });
+});
+GridRoot.displayName = "XAUI.Grid";
+function isGridItem(child) {
+  if (child === null || typeof child !== "object") return false;
+  const type = child.type;
+  return _optionalChain([type, 'optionalAccess', _2 => _2.displayName]) === "XAUI.Grid.Item";
+}
+
+// src/components/view/grid-item.tsx
+
+
+
+var GridItem = _react.forwardRef.call(void 0, function GridItem2({ children, span = 1, style, ...props }, ref) {
+  const grid = useGrid();
+  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.View,
+    {
+      ref,
+      style: [{ width: spanWidth(grid, span) }, styleProps, style],
+      ...rest,
+      children
+    }
+  );
+});
+GridItem.displayName = "XAUI.Grid.Item";
+
+// src/components/view/stack.tsx
+
+
+
+var StackRoot = _react.forwardRef.call(void 0, function Stack({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkEVXZGNPAcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ position: "relative" }, styleProps, style], ...rest, children });
+});
+StackRoot.displayName = "XAUI.Stack";
+
+// src/components/view/stack-item.tsx
+
+
+
+var StackItem = _react.forwardRef.call(void 0, function StackItem2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkEVXZGNPAcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ position: "absolute" }, styleProps, style], ...rest, children });
+});
+StackItem.displayName = "XAUI.Stack.Item";
+
+// src/components/view/row.tsx
+
+
+
+var Row = _react.forwardRef.call(void 0, function Row2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkEVXZGNPAcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ flexDirection: "row" }, styleProps, style], ...rest, children });
+});
+Row.displayName = "XAUI.Row";
+
+// src/components/view/column.tsx
+
+
+
+var Column = _react.forwardRef.call(void 0, function Column2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkEVXZGNPAcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ flexDirection: "column" }, styleProps, style], ...rest, children });
+});
+Column.displayName = "XAUI.Column";
+
+// src/components/view/index.ts
+var Stack2 = Object.assign(StackRoot, { Item: StackItem });
+var Grid2 = Object.assign(GridRoot, { Item: GridItem });
+
+
+
+
+
+
+
+exports.useGrid = useGrid; exports.Row = Row; exports.Column = Column; exports.Stack = Stack2; exports.Grid = Grid2;

package/dist/chunk-JXLRHKCQ.js

@@ -0,0 +1,143 @@
+import {
+  Slot,
+  useStyleProps
+} from "./chunk-EXX6ATAS.js";
+
+// src/components/view/grid.tsx
+import { Children, forwardRef, useMemo, useState } from "react";
+import { View } from "react-native";
+
+// src/components/view/grid.context.ts
+import { createContext, useContext } from "react";
+var GridContext = createContext(null);
+var GridProvider = GridContext.Provider;
+function useGrid() {
+  const value = useContext(GridContext);
+  if (value === null) {
+    throw new Error(
+      "XAUI: Grid.Item must be rendered inside a Grid \u2014 it spans that grid\u2019s columns, and outside one there is nothing to span."
+    );
+  }
+  return value;
+}
+function spanWidth({ cellWidth, columns, gap }, span) {
+  const clamped = Math.min(Math.max(Math.floor(span), 1), columns);
+  if (cellWidth === void 0) return `${100 / columns * clamped}%`;
+  return cellWidth * clamped + gap * (clamped - 1);
+}
+
+// src/components/view/grid.tsx
+import { jsx } from "react/jsx-runtime";
+var GridRoot = forwardRef(function Grid({ children, columns = 2, gap = 0, style, onLayout, ...props }, ref) {
+  const [width, setWidth] = useState();
+  const [styleProps, rest] = useStyleProps(props);
+  const safeColumns = Math.max(Math.floor(columns), 1);
+  const cellWidth = width === void 0 ? void 0 : (width - gap * (safeColumns - 1)) / safeColumns;
+  const context = useMemo(
+    () => ({ cellWidth, columns: safeColumns, gap }),
+    [cellWidth, safeColumns, gap]
+  );
+  const handleLayout = (event) => {
+    const next = event.nativeEvent.layout.width;
+    if (next > 0 && next !== width) setWidth(next);
+    onLayout?.(event);
+  };
+  return /* @__PURE__ */ jsx(GridProvider, { value: context, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      ref,
+      onLayout: handleLayout,
+      style: [
+        { flexDirection: "row", flexWrap: "wrap", rowGap: gap, columnGap: gap },
+        styleProps,
+        style
+      ],
+      ...rest,
+      children: Children.map(
+        children,
+        (child) => isGridItem(child) ? child : /* @__PURE__ */ jsx(View, { style: { width: spanWidth(context, 1) }, children: child })
+      )
+    }
+  ) });
+});
+GridRoot.displayName = "XAUI.Grid";
+function isGridItem(child) {
+  if (child === null || typeof child !== "object") return false;
+  const type = child.type;
+  return type?.displayName === "XAUI.Grid.Item";
+}
+
+// src/components/view/grid-item.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var GridItem = forwardRef2(function GridItem2({ children, span = 1, style, ...props }, ref) {
+  const grid = useGrid();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */ jsx2(
+    View2,
+    {
+      ref,
+      style: [{ width: spanWidth(grid, span) }, styleProps, style],
+      ...rest,
+      children
+    }
+  );
+});
+GridItem.displayName = "XAUI.Grid.Item";
+
+// src/components/view/stack.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var StackRoot = forwardRef3(function Stack({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const Root = asChild ? Slot : View3;
+  return /* @__PURE__ */ jsx3(Root, { ref, style: [{ position: "relative" }, styleProps, style], ...rest, children });
+});
+StackRoot.displayName = "XAUI.Stack";
+
+// src/components/view/stack-item.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { View as View4 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StackItem = forwardRef4(function StackItem2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const Root = asChild ? Slot : View4;
+  return /* @__PURE__ */ jsx4(Root, { ref, style: [{ position: "absolute" }, styleProps, style], ...rest, children });
+});
+StackItem.displayName = "XAUI.Stack.Item";
+
+// src/components/view/row.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { View as View5 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Row = forwardRef5(function Row2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const Root = asChild ? Slot : View5;
+  return /* @__PURE__ */ jsx5(Root, { ref, style: [{ flexDirection: "row" }, styleProps, style], ...rest, children });
+});
+Row.displayName = "XAUI.Row";
+
+// src/components/view/column.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { View as View6 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Column = forwardRef6(function Column2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const Root = asChild ? Slot : View6;
+  return /* @__PURE__ */ jsx6(Root, { ref, style: [{ flexDirection: "column" }, styleProps, style], ...rest, children });
+});
+Column.displayName = "XAUI.Column";
+
+// src/components/view/index.ts
+var Stack2 = Object.assign(StackRoot, { Item: StackItem });
+var Grid2 = Object.assign(GridRoot, { Item: GridItem });
+
+export {
+  useGrid,
+  Row,
+  Column,
+  Stack2 as Stack,
+  Grid2 as Grid
+};

package/dist/components/view/index.cjs

@@ -1,10 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkBFB6K4M7cjs = require('../../chunk-BFB6K4M7.cjs');
+
+
+
+var _chunk33QILJJHcjs = require('../../chunk-33QILJJH.cjs');
 require('../../chunk-EVXZGNPA.cjs');
 require('../../chunk-MC7SY2QH.cjs');
 
 
 
-exports.Column = _chunkBFB6K4M7cjs.Column; exports.Row = _chunkBFB6K4M7cjs.Row;
+
+
+
+exports.Column = _chunk33QILJJHcjs.Column; exports.Grid = _chunk33QILJJHcjs.Grid; exports.Row = _chunk33QILJJHcjs.Row; exports.Stack = _chunk33QILJJHcjs.Stack; exports.useGrid = _chunk33QILJJHcjs.useGrid;

package/dist/components/view/index.d.cts

@@ -53,6 +53,23 @@ declare const Column: react.ForwardRefExoticComponent<Omit<react_native.ViewProp
     children?: react.ReactNode;
 } & Omit<ViewStyleProps, "flexDirection" | "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<View>>;
 
+type GridContextValue = {
+    /**
+     * The width of one column in points, or `undefined` on the very first render — the grid
+     * has not been measured yet. A cell falls back to a percentage for that one frame.
+     */
+    cellWidth: number | undefined;
+    columns: number;
+    gap: number;
+};
+/**
+ * R10 — the resolved geometry a cell needs, published by the root that measured it.
+ *
+ * Strict, and named: a `Grid.Item` outside a `Grid` has no column width to span, and
+ * failing with the component's name beats rendering a cell of arbitrary size.
+ */
+declare function useGrid(): GridContextValue;
+
 type AxisOwnProps = {
     /** R12 — the child element becomes the axis, keeping its direction. */
     asChild?: boolean;
@@ -73,5 +90,63 @@ type AxisOwnProps = {
 type AxisProps = Omit<ViewProps, 'style'> & AxisOwnProps & Omit<ViewStyleProps, keyof AxisOwnProps | keyof ViewProps | 'flexDirection'>;
 type RowProps = AxisProps;
 type ColumnProps = AxisProps;
+/**
+ * `Stack` and `Stack.Item` take the full R14 set: unlike the axes, neither claims a style
+ * key as its identity. `position` is set by each of them and remains overridable, because
+ * a layer that has to be `relative` for one screen should not need a different component.
+ */
+type StackProps = Omit<ViewProps, 'style'> & AxisOwnProps & Omit<ViewStyleProps, keyof AxisOwnProps | keyof ViewProps>;
+type StackItemProps = StackProps;
+type GridOwnProps = {
+    /** How many columns. Floored, and never below one. @default 2 */
+    columns?: number;
+    /**
+     * The space between cells, in points — React Native's `gap`, taken as a prop because the
+     * root has to read it to size the columns. @default 0
+     */
+    gap?: number;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/**
+ * No `asChild`: the root measures itself through `onLayout` and publishes the result, so
+ * it has to be the node it renders. `flexDirection`, `flexWrap` and the three gap keys are
+ * withheld for the same reason — they are the grid's mechanism, not its decoration.
+ */
+type GridProps = Omit<ViewProps, 'style'> & GridOwnProps & Omit<ViewStyleProps, keyof GridOwnProps | keyof ViewProps | 'flexDirection' | 'flexWrap' | 'columnGap' | 'rowGap'>;
+type GridItemOwnProps = {
+    /** How many columns the cell covers. Clamped to the grid's count. @default 1 */
+    span?: number;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/** `width` is the grid's answer, so it is not a prop here. */
+type GridItemProps = Omit<ViewProps, 'style'> & GridItemOwnProps & Omit<ViewStyleProps, keyof GridItemOwnProps | keyof ViewProps | 'width'>;
+
+/** Overlaying is composed: the root is the containing block, `Item` is a layer in it. */
+declare const Stack: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<react_native.View>> & {
+    Item: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+        asChild?: boolean;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    } & Omit<ViewStyleProps, "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<react_native.View>>;
+};
+/** Every child is a cell; `Item` is the one that spans more than a column. */
+declare const Grid: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    columns?: number;
+    gap?: number;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "columnGap" | "flexDirection" | "flexWrap" | "gap" | "rowGap" | "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "columns"> & react.RefAttributes<react_native.View>> & {
+    Item: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+        span?: number;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    } & Omit<ViewStyleProps, "width" | "pointerEvents" | "span" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture"> & react.RefAttributes<react_native.View>>;
+};
 
-export { type AxisProps, Column, type ColumnProps, Row, type RowProps };
+export { type AxisProps, Column, type ColumnProps, Grid, type GridContextValue, type GridItemProps, type GridProps, Row, type RowProps, Stack, type StackItemProps, type StackProps, useGrid };

package/dist/components/view/index.d.ts

@@ -53,6 +53,23 @@ declare const Column: react.ForwardRefExoticComponent<Omit<react_native.ViewProp
     children?: react.ReactNode;
 } & Omit<ViewStyleProps, "flexDirection" | "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<View>>;
 
+type GridContextValue = {
+    /**
+     * The width of one column in points, or `undefined` on the very first render — the grid
+     * has not been measured yet. A cell falls back to a percentage for that one frame.
+     */
+    cellWidth: number | undefined;
+    columns: number;
+    gap: number;
+};
+/**
+ * R10 — the resolved geometry a cell needs, published by the root that measured it.
+ *
+ * Strict, and named: a `Grid.Item` outside a `Grid` has no column width to span, and
+ * failing with the component's name beats rendering a cell of arbitrary size.
+ */
+declare function useGrid(): GridContextValue;
+
 type AxisOwnProps = {
     /** R12 — the child element becomes the axis, keeping its direction. */
     asChild?: boolean;
@@ -73,5 +90,63 @@ type AxisOwnProps = {
 type AxisProps = Omit<ViewProps, 'style'> & AxisOwnProps & Omit<ViewStyleProps, keyof AxisOwnProps | keyof ViewProps | 'flexDirection'>;
 type RowProps = AxisProps;
 type ColumnProps = AxisProps;
+/**
+ * `Stack` and `Stack.Item` take the full R14 set: unlike the axes, neither claims a style
+ * key as its identity. `position` is set by each of them and remains overridable, because
+ * a layer that has to be `relative` for one screen should not need a different component.
+ */
+type StackProps = Omit<ViewProps, 'style'> & AxisOwnProps & Omit<ViewStyleProps, keyof AxisOwnProps | keyof ViewProps>;
+type StackItemProps = StackProps;
+type GridOwnProps = {
+    /** How many columns. Floored, and never below one. @default 2 */
+    columns?: number;
+    /**
+     * The space between cells, in points — React Native's `gap`, taken as a prop because the
+     * root has to read it to size the columns. @default 0
+     */
+    gap?: number;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/**
+ * No `asChild`: the root measures itself through `onLayout` and publishes the result, so
+ * it has to be the node it renders. `flexDirection`, `flexWrap` and the three gap keys are
+ * withheld for the same reason — they are the grid's mechanism, not its decoration.
+ */
+type GridProps = Omit<ViewProps, 'style'> & GridOwnProps & Omit<ViewStyleProps, keyof GridOwnProps | keyof ViewProps | 'flexDirection' | 'flexWrap' | 'columnGap' | 'rowGap'>;
+type GridItemOwnProps = {
+    /** How many columns the cell covers. Clamped to the grid's count. @default 1 */
+    span?: number;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/** `width` is the grid's answer, so it is not a prop here. */
+type GridItemProps = Omit<ViewProps, 'style'> & GridItemOwnProps & Omit<ViewStyleProps, keyof GridItemOwnProps | keyof ViewProps | 'width'>;
+
+/** Overlaying is composed: the root is the containing block, `Item` is a layer in it. */
+declare const Stack: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<react_native.View>> & {
+    Item: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+        asChild?: boolean;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    } & Omit<ViewStyleProps, "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "asChild"> & react.RefAttributes<react_native.View>>;
+};
+/** Every child is a cell; `Item` is the one that spans more than a column. */
+declare const Grid: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    columns?: number;
+    gap?: number;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "columnGap" | "flexDirection" | "flexWrap" | "gap" | "rowGap" | "pointerEvents" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "columns"> & react.RefAttributes<react_native.View>> & {
+    Item: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+        span?: number;
+        style?: react_native.StyleProp<react_native.ViewStyle>;
+        children?: react.ReactNode;
+    } & Omit<ViewStyleProps, "width" | "pointerEvents" | "span" | "style" | "children" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "hitSlop" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture"> & react.RefAttributes<react_native.View>>;
+};
 
-export { type AxisProps, Column, type ColumnProps, Row, type RowProps };
+export { type AxisProps, Column, type ColumnProps, Grid, type GridContextValue, type GridItemProps, type GridProps, Row, type RowProps, Stack, type StackItemProps, type StackProps, useGrid };

package/dist/components/view/index.js

@@ -1,10 +1,16 @@
 import {
   Column,
-  Row
-} from "../../chunk-MAYVGK6W.js";
+  Grid,
+  Row,
+  Stack,
+  useGrid
+} from "../../chunk-JXLRHKCQ.js";
 import "../../chunk-EXX6ATAS.js";
 import "../../chunk-GGW42MY4.js";
 export {
   Column,
-  Row
+  Grid,
+  Row,
+  Stack,
+  useGrid
 };

package/dist/index.cjs

@@ -13,7 +13,10 @@ var _chunkUBA6AEY6cjs = require('./chunk-UBA6AEY6.cjs');
 
 
 
-var _chunkBFB6K4M7cjs = require('./chunk-BFB6K4M7.cjs');
+
+
+
+var _chunk33QILJJHcjs = require('./chunk-33QILJJH.cjs');
 
 
 
@@ -187,4 +190,7 @@ function usePrevious(value) {
 
 
 
-exports.Button = _chunk6ARON3XTcjs.Button; exports.Column = _chunkBFB6K4M7cjs.Column; exports.FEEDBACK_OVERLAY = _chunkA4VD4MHKcjs.FEEDBACK_OVERLAY; exports.HIGHLIGHT_DURATION = _chunkA4VD4MHKcjs.HIGHLIGHT_DURATION; exports.HIGHLIGHT_OPACITY = _chunkA4VD4MHKcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkA4VD4MHKcjs.Icon; exports.IconContext = _chunkA4VD4MHKcjs.IconContext; exports.PRESS_DURATION = _chunkA4VD4MHKcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkA4VD4MHKcjs.PRESS_SCALE; exports.Portal = _chunk2WMVDMFVcjs.Portal; exports.PortalContext = _chunk2WMVDMFVcjs.PortalContext; exports.PortalHost = _chunk2WMVDMFVcjs.PortalHost; exports.PressableFeedback = _chunkA4VD4MHKcjs.PressableFeedback; exports.RIPPLE_CONFIRM_DURATION = _chunkA4VD4MHKcjs.RIPPLE_CONFIRM_DURATION; exports.RIPPLE_EXPAND_DURATION = _chunkA4VD4MHKcjs.RIPPLE_EXPAND_DURATION; exports.RIPPLE_FADE_IN = _chunkA4VD4MHKcjs.RIPPLE_FADE_IN; exports.RIPPLE_FADE_OUT = _chunkA4VD4MHKcjs.RIPPLE_FADE_OUT; exports.RIPPLE_FADE_OUT_DELAY = _chunkA4VD4MHKcjs.RIPPLE_FADE_OUT_DELAY; exports.RIPPLE_OPACITY = _chunkA4VD4MHKcjs.RIPPLE_OPACITY; exports.RIPPLE_START_SCALE = _chunkA4VD4MHKcjs.RIPPLE_START_SCALE; exports.Row = _chunkBFB6K4M7cjs.Row; exports.SCALE_REFERENCE_WIDTH = _chunkA4VD4MHKcjs.SCALE_REFERENCE_WIDTH; exports.Slot = _chunkEVXZGNPAcjs.Slot; exports.TextSpan = _chunkUBA6AEY6cjs.TextSpan; exports.ThemeContext = _chunk57SJ4LJFcjs.ThemeContext; exports.Typography = _chunkUBA6AEY6cjs.Typography; exports.XAUIProvider = _chunkBHTFIZTQcjs.XAUIProvider; exports.buildRadius = _chunkBHTFIZTQcjs.buildRadius; exports.buildShadows = _chunkBHTFIZTQcjs.buildShadows; exports.buttonRecipe = _chunk6ARON3XTcjs.buttonRecipe; exports.childrenToString = _chunkEVXZGNPAcjs.childrenToString; exports.createRecipe = _chunkUVO4GFSWcjs.createRecipe; exports.createSlotContext = _chunkEVXZGNPAcjs.createSlotContext; exports.createTheme = _chunkBHTFIZTQcjs.createTheme; exports.defaultTheme = _chunkBHTFIZTQcjs.defaultTheme; exports.deriveColors = _chunkBHTFIZTQcjs.deriveColors; exports.deriveTint = _chunk57SJ4LJFcjs.deriveTint; exports.markOverlay = _chunkA4VD4MHKcjs.markOverlay; exports.mergeProps = _chunkEVXZGNPAcjs.mergeProps; exports.mergeRefs = _chunkEVXZGNPAcjs.mergeRefs; exports.palette = _chunkBHTFIZTQcjs.palette; exports.pressScaleFor = _chunkA4VD4MHKcjs.pressScaleFor; exports.primitives = _chunkBHTFIZTQcjs.primitives; exports.resolveAnimation = _chunkA4VD4MHKcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkA4VD4MHKcjs.resolveSlotAnimation; exports.rippleRadiusFor = _chunkA4VD4MHKcjs.rippleRadiusFor; exports.sourceKeys = _chunkBHTFIZTQcjs.sourceKeys; exports.tokens = _chunkBHTFIZTQcjs.tokens; exports.typographyRecipe = _chunkUBA6AEY6cjs.typographyRecipe; exports.useButton = _chunk6ARON3XTcjs.useButton; exports.useColorMode = _chunk57SJ4LJFcjs.useColorMode; exports.useControllableState = useControllableState; exports.useFeedback = _chunkA4VD4MHKcjs.useFeedback; exports.useIconContext = _chunkA4VD4MHKcjs.useIconContext; exports.useMergedRef = useMergedRef; exports.usePressState = _chunk6ARON3XTcjs.usePressState; exports.usePrevious = usePrevious; exports.useStyleProps = _chunkEVXZGNPAcjs.useStyleProps; exports.useThemeColor = _chunk57SJ4LJFcjs.useThemeColor; exports.useXAUITheme = _chunk57SJ4LJFcjs.useXAUITheme;
+
+
+
+exports.Button = _chunk6ARON3XTcjs.Button; exports.Column = _chunk33QILJJHcjs.Column; exports.FEEDBACK_OVERLAY = _chunkA4VD4MHKcjs.FEEDBACK_OVERLAY; exports.Grid = _chunk33QILJJHcjs.Grid; exports.HIGHLIGHT_DURATION = _chunkA4VD4MHKcjs.HIGHLIGHT_DURATION; exports.HIGHLIGHT_OPACITY = _chunkA4VD4MHKcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkA4VD4MHKcjs.Icon; exports.IconContext = _chunkA4VD4MHKcjs.IconContext; exports.PRESS_DURATION = _chunkA4VD4MHKcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkA4VD4MHKcjs.PRESS_SCALE; exports.Portal = _chunk2WMVDMFVcjs.Portal; exports.PortalContext = _chunk2WMVDMFVcjs.PortalContext; exports.PortalHost = _chunk2WMVDMFVcjs.PortalHost; exports.PressableFeedback = _chunkA4VD4MHKcjs.PressableFeedback; exports.RIPPLE_CONFIRM_DURATION = _chunkA4VD4MHKcjs.RIPPLE_CONFIRM_DURATION; exports.RIPPLE_EXPAND_DURATION = _chunkA4VD4MHKcjs.RIPPLE_EXPAND_DURATION; exports.RIPPLE_FADE_IN = _chunkA4VD4MHKcjs.RIPPLE_FADE_IN; exports.RIPPLE_FADE_OUT = _chunkA4VD4MHKcjs.RIPPLE_FADE_OUT; exports.RIPPLE_FADE_OUT_DELAY = _chunkA4VD4MHKcjs.RIPPLE_FADE_OUT_DELAY; exports.RIPPLE_OPACITY = _chunkA4VD4MHKcjs.RIPPLE_OPACITY; exports.RIPPLE_START_SCALE = _chunkA4VD4MHKcjs.RIPPLE_START_SCALE; exports.Row = _chunk33QILJJHcjs.Row; exports.SCALE_REFERENCE_WIDTH = _chunkA4VD4MHKcjs.SCALE_REFERENCE_WIDTH; exports.Slot = _chunkEVXZGNPAcjs.Slot; exports.Stack = _chunk33QILJJHcjs.Stack; exports.TextSpan = _chunkUBA6AEY6cjs.TextSpan; exports.ThemeContext = _chunk57SJ4LJFcjs.ThemeContext; exports.Typography = _chunkUBA6AEY6cjs.Typography; exports.XAUIProvider = _chunkBHTFIZTQcjs.XAUIProvider; exports.buildRadius = _chunkBHTFIZTQcjs.buildRadius; exports.buildShadows = _chunkBHTFIZTQcjs.buildShadows; exports.buttonRecipe = _chunk6ARON3XTcjs.buttonRecipe; exports.childrenToString = _chunkEVXZGNPAcjs.childrenToString; exports.createRecipe = _chunkUVO4GFSWcjs.createRecipe; exports.createSlotContext = _chunkEVXZGNPAcjs.createSlotContext; exports.createTheme = _chunkBHTFIZTQcjs.createTheme; exports.defaultTheme = _chunkBHTFIZTQcjs.defaultTheme; exports.deriveColors = _chunkBHTFIZTQcjs.deriveColors; exports.deriveTint = _chunk57SJ4LJFcjs.deriveTint; exports.markOverlay = _chunkA4VD4MHKcjs.markOverlay; exports.mergeProps = _chunkEVXZGNPAcjs.mergeProps; exports.mergeRefs = _chunkEVXZGNPAcjs.mergeRefs; exports.palette = _chunkBHTFIZTQcjs.palette; exports.pressScaleFor = _chunkA4VD4MHKcjs.pressScaleFor; exports.primitives = _chunkBHTFIZTQcjs.primitives; exports.resolveAnimation = _chunkA4VD4MHKcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkA4VD4MHKcjs.resolveSlotAnimation; exports.rippleRadiusFor = _chunkA4VD4MHKcjs.rippleRadiusFor; exports.sourceKeys = _chunkBHTFIZTQcjs.sourceKeys; exports.tokens = _chunkBHTFIZTQcjs.tokens; exports.typographyRecipe = _chunkUBA6AEY6cjs.typographyRecipe; exports.useButton = _chunk6ARON3XTcjs.useButton; exports.useColorMode = _chunk57SJ4LJFcjs.useColorMode; exports.useControllableState = useControllableState; exports.useFeedback = _chunkA4VD4MHKcjs.useFeedback; exports.useGrid = _chunk33QILJJHcjs.useGrid; exports.useIconContext = _chunkA4VD4MHKcjs.useIconContext; exports.useMergedRef = useMergedRef; exports.usePressState = _chunk6ARON3XTcjs.usePressState; exports.usePrevious = usePrevious; exports.useStyleProps = _chunkEVXZGNPAcjs.useStyleProps; exports.useThemeColor = _chunk57SJ4LJFcjs.useThemeColor; exports.useXAUITheme = _chunk57SJ4LJFcjs.useXAUITheme;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { Button, ButtonContextValue, ButtonIconProps, ButtonLabelProps, ButtonProps, ButtonSize, ButtonSlot, ButtonSpinnerProps, ButtonVariant, buttonRecipe, useButton } from './components/button/index.cjs';
 export { TextSpan, TextSpanProps, Typography, TypographyProps, TypographySlot, TypographyVariant, typographyRecipe } from './components/typography/index.cjs';
-export { AxisProps, Column, ColumnProps, Row, RowProps } from './components/view/index.cjs';
+export { AxisProps, Column, ColumnProps, Grid, GridContextValue, GridItemProps, GridProps, Row, RowProps, Stack, StackItemProps, StackProps, useGrid } from './components/view/index.cjs';
 import { RefCallback } from 'react';
 import { PossibleRef } from './system/index.cjs';
 export { AsChildProps, FEEDBACK_OVERLAY, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, Icon, IconContext, MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, PortalHostProps, PortalMethods, PortalProps, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackRippleProps, RIPPLE_CONFIRM_DURATION, RIPPLE_EXPAND_DURATION, RIPPLE_FADE_IN, RIPPLE_FADE_OUT, RIPPLE_FADE_OUT_DELAY, RIPPLE_OPACITY, RIPPLE_START_SCALE, SCALE_REFERENCE_WIDTH, Slot, SlotProps, childrenToString, createSlotContext, markOverlay, mergeProps, mergeRefs, pressScaleFor, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps } from './system/index.cjs';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { Button, ButtonContextValue, ButtonIconProps, ButtonLabelProps, ButtonProps, ButtonSize, ButtonSlot, ButtonSpinnerProps, ButtonVariant, buttonRecipe, useButton } from './components/button/index.js';
 export { TextSpan, TextSpanProps, Typography, TypographyProps, TypographySlot, TypographyVariant, typographyRecipe } from './components/typography/index.js';
-export { AxisProps, Column, ColumnProps, Row, RowProps } from './components/view/index.js';
+export { AxisProps, Column, ColumnProps, Grid, GridContextValue, GridItemProps, GridProps, Row, RowProps, Stack, StackItemProps, StackProps, useGrid } from './components/view/index.js';
 import { RefCallback } from 'react';
 import { PossibleRef } from './system/index.js';
 export { AsChildProps, FEEDBACK_OVERLAY, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, Icon, IconContext, MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, PortalHostProps, PortalMethods, PortalProps, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackRippleProps, RIPPLE_CONFIRM_DURATION, RIPPLE_EXPAND_DURATION, RIPPLE_FADE_IN, RIPPLE_FADE_OUT, RIPPLE_FADE_OUT_DELAY, RIPPLE_OPACITY, RIPPLE_START_SCALE, SCALE_REFERENCE_WIDTH, Slot, SlotProps, childrenToString, createSlotContext, markOverlay, mergeProps, mergeRefs, pressScaleFor, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps } from './system/index.js';

package/dist/index.js

@@ -12,8 +12,11 @@ import {
 } from "./chunk-RMLFMRWL.js";
 import {
   Column,
-  Row
-} from "./chunk-MAYVGK6W.js";
+  Grid,
+  Row,
+  Stack,
+  useGrid
+} from "./chunk-JXLRHKCQ.js";
 import {
   Portal,
   PortalContext,
@@ -130,6 +133,7 @@ export {
   Button,
   Column,
   FEEDBACK_OVERLAY,
+  Grid,
   HIGHLIGHT_DURATION,
   HIGHLIGHT_OPACITY,
   Icon,
@@ -150,6 +154,7 @@ export {
   Row,
   SCALE_REFERENCE_WIDTH,
   Slot,
+  Stack,
   TextSpan,
   ThemeContext,
   Typography,
@@ -180,6 +185,7 @@ export {
   useColorMode,
   useControllableState,
   useFeedback,
+  useGrid,
   useIconContext,
   useMergedRef,
   usePressState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.9.1-alpha.19",
+  "version": "0.9.1-alpha.20",
   "description": "Composition-first React Native UI components with native animations powered by Reanimated",
   "keywords": [
     "react-native",

package/dist/chunk-BFB6K4M7.cjs

@@ -1,31 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-var _chunkEVXZGNPAcjs = require('./chunk-EVXZGNPA.cjs');
-
-// src/components/view/row.tsx
-var _react = require('react');
-var _reactnative = require('react-native');
-var _jsxruntime = require('react/jsx-runtime');
-var Row = _react.forwardRef.call(void 0, function Row2({ children, asChild = false, style, ...props }, ref) {
-  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
-  const Root = asChild ? _chunkEVXZGNPAcjs.Slot : _reactnative.View;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ flexDirection: "row" }, styleProps, style], ...rest, children });
-});
-Row.displayName = "XAUI.Row";
-
-// src/components/view/column.tsx
-
-
-
-var Column = _react.forwardRef.call(void 0, function Column2({ children, asChild = false, style, ...props }, ref) {
-  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
-  const Root = asChild ? _chunkEVXZGNPAcjs.Slot : _reactnative.View;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [{ flexDirection: "column" }, styleProps, style], ...rest, children });
-});
-Column.displayName = "XAUI.Column";
-
-
-
-
-exports.Row = Row; exports.Column = Column;

package/dist/chunk-MAYVGK6W.js

@@ -1,31 +0,0 @@
-import {
-  Slot,
-  useStyleProps
-} from "./chunk-EXX6ATAS.js";
-
-// src/components/view/row.tsx
-import { forwardRef } from "react";
-import { View } from "react-native";
-import { jsx } from "react/jsx-runtime";
-var Row = forwardRef(function Row2({ children, asChild = false, style, ...props }, ref) {
-  const [styleProps, rest] = useStyleProps(props);
-  const Root = asChild ? Slot : View;
-  return /* @__PURE__ */ jsx(Root, { ref, style: [{ flexDirection: "row" }, styleProps, style], ...rest, children });
-});
-Row.displayName = "XAUI.Row";
-
-// src/components/view/column.tsx
-import { forwardRef as forwardRef2 } from "react";
-import { View as View2 } from "react-native";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Column = forwardRef2(function Column2({ children, asChild = false, style, ...props }, ref) {
-  const [styleProps, rest] = useStyleProps(props);
-  const Root = asChild ? Slot : View2;
-  return /* @__PURE__ */ jsx2(Root, { ref, style: [{ flexDirection: "column" }, styleProps, style], ...rest, children });
-});
-Column.displayName = "XAUI.Column";
-
-export {
-  Row,
-  Column
-};