@xaui/native 0.0.36 → 0.0.37

package/dist/view/index.cjs

@@ -1,4 +1,10 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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; }// src/components/view/column/column.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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; }require('../chunk-56RPWZD2.cjs');
+
+
+
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
+
+// src/components/view/column/column.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var _reactnative = require('react-native');
 
@@ -378,6 +384,45 @@ var AspectRatio = ({
   return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [{ aspectRatio: ratio }, style] }, children);
 };
 
+// src/components/view/surface/surface.tsx
+
+
+var _core = require('@xaui/core');
+var resolveBackgroundColor = (color, theme) => {
+  if (color === "background" || color === "foreground") {
+    return theme.colors[color];
+  }
+  const safeColor = _core.getSafeThemeColor.call(void 0, color);
+  return theme.colors[safeColor].background;
+};
+var Surface = ({
+  children,
+  themeColor = "background",
+  padding,
+  radius = "none",
+  style
+}) => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const radiusStyle = _chunkOQ2BLOOGcjs.useBorderRadiusStyles.call(void 0, radius);
+  const background = resolveBackgroundColor(themeColor, theme);
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.View,
+    {
+      style: [
+        radiusStyle,
+        {
+          flex: 1,
+          backgroundColor: background,
+          padding
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+Surface.displayName = "Surface";
+
 // src/components/view/grid/grid.tsx
 
 
@@ -1012,4 +1057,5 @@ MasonryGridBuilder.displayName = "MasonryGridBuilder";
 
 
 
-exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; exports.Column = Column; exports.ConditionalView = ConditionalView; exports.Grid = Grid; exports.GridBuilder = GridBuilder; exports.GridItem = GridItem; exports.Margin = Margin; exports.MasonryGrid = MasonryGrid; exports.MasonryGridBuilder = MasonryGridBuilder; exports.MasonryGridItem = MasonryGridItem; exports.Padding = Padding; exports.PositionedView = PositionedView; exports.RoundedView = RoundedView; exports.Row = Row; exports.SizedBox = SizedBox; exports.Spacer = Spacer;
+
+exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; exports.Column = Column; exports.ConditionalView = ConditionalView; exports.Grid = Grid; exports.GridBuilder = GridBuilder; exports.GridItem = GridItem; exports.Margin = Margin; exports.MasonryGrid = MasonryGrid; exports.MasonryGridBuilder = MasonryGridBuilder; exports.MasonryGridItem = MasonryGridItem; exports.Padding = Padding; exports.PositionedView = PositionedView; exports.RoundedView = RoundedView; exports.Row = Row; exports.SizedBox = SizedBox; exports.Spacer = Spacer; exports.Surface = Surface;

package/dist/view/index.d.cts

@@ -1,5 +1,6 @@
 import React, { ReactNode, ReactElement, ComponentType } from 'react';
 import { ViewStyle, StyleProp, ColorValue, ScrollViewProps } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.cjs';
 
 type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 type CrossAxisAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
@@ -289,6 +290,36 @@ type AspectRatioProps = {
 
 declare const AspectRatio: React.FC<AspectRatioProps>;
 
+type SurfaceThemeColor = ThemeColor | 'background' | 'foreground';
+type SurfaceProps = {
+    /**
+     * Content rendered inside the surface container.
+     */
+    children: ReactNode;
+    /**
+     * Theme-based color key used for background.
+     * - Semantic keys (primary, secondary, etc.) use their `.background` tone.
+     * - `background` / `foreground` use raw theme values.
+     * @default 'background'
+     */
+    themeColor?: SurfaceThemeColor;
+    /**
+     * Uniform padding inside the surface.
+     */
+    padding?: number;
+    /**
+     * Border radius token.
+     * @default 'none'
+     */
+    radius?: Radius;
+    /**
+     * Additional container styles.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Surface: React.FC<SurfaceProps>;
+
 type GridProps = {
     /**
      * The grid items to render.
@@ -600,4 +631,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps };
+export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode, ReactElement, ComponentType } from 'react';
 import { ViewStyle, StyleProp, ColorValue, ScrollViewProps } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.js';
 
 type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 type CrossAxisAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
@@ -289,6 +290,36 @@ type AspectRatioProps = {
 
 declare const AspectRatio: React.FC<AspectRatioProps>;
 
+type SurfaceThemeColor = ThemeColor | 'background' | 'foreground';
+type SurfaceProps = {
+    /**
+     * Content rendered inside the surface container.
+     */
+    children: ReactNode;
+    /**
+     * Theme-based color key used for background.
+     * - Semantic keys (primary, secondary, etc.) use their `.background` tone.
+     * - `background` / `foreground` use raw theme values.
+     * @default 'background'
+     */
+    themeColor?: SurfaceThemeColor;
+    /**
+     * Uniform padding inside the surface.
+     */
+    padding?: number;
+    /**
+     * Border radius token.
+     * @default 'none'
+     */
+    radius?: Radius;
+    /**
+     * Additional container styles.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Surface: React.FC<SurfaceProps>;
+
 type GridProps = {
     /**
      * The grid items to render.
@@ -600,4 +631,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps };
+export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.js

@@ -1,3 +1,9 @@
+import "../chunk-SHBDANQN.js";
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
 // src/components/view/column/column.tsx
 import React from "react";
 import { View } from "react-native";
@@ -378,17 +384,56 @@ var AspectRatio = ({
   return /* @__PURE__ */ React10.createElement(View10, { style: [{ aspectRatio: ratio }, style] }, children);
 };
 
+// src/components/view/surface/surface.tsx
+import React11 from "react";
+import { View as View11 } from "react-native";
+import { getSafeThemeColor } from "@xaui/core";
+var resolveBackgroundColor = (color, theme) => {
+  if (color === "background" || color === "foreground") {
+    return theme.colors[color];
+  }
+  const safeColor = getSafeThemeColor(color);
+  return theme.colors[safeColor].background;
+};
+var Surface = ({
+  children,
+  themeColor = "background",
+  padding,
+  radius = "none",
+  style
+}) => {
+  const theme = useXUITheme();
+  const radiusStyle = useBorderRadiusStyles(radius);
+  const background = resolveBackgroundColor(themeColor, theme);
+  return /* @__PURE__ */ React11.createElement(
+    View11,
+    {
+      style: [
+        radiusStyle,
+        {
+          flex: 1,
+          backgroundColor: background,
+          padding
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+Surface.displayName = "Surface";
+
 // src/components/view/grid/grid.tsx
-import React12, { useMemo as useMemo2, useState } from "react";
+import React13, { useMemo as useMemo2, useState } from "react";
 import {
-  View as View12
+  View as View13
 } from "react-native";
 
 // src/components/view/grid/grid-item.tsx
-import React11 from "react";
-import { View as View11 } from "react-native";
+import React12 from "react";
+import { View as View12 } from "react-native";
 var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ React11.createElement(View11, { style }, children);
+  return /* @__PURE__ */ React12.createElement(View12, { style }, children);
 };
 GridItem.displayName = "GridItem";
 
@@ -402,7 +447,7 @@ var getSafeSpan = (span, columns) => {
   return Math.min(Math.floor(span), columns);
 };
 var isGridItemElement = (child) => {
-  if (!React12.isValidElement(child)) return false;
+  if (!React13.isValidElement(child)) return false;
   if (child.type === GridItem) return true;
   const displayName = child.type.displayName;
   return displayName === "GridItem";
@@ -421,15 +466,15 @@ var Grid = ({
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
   const itemWidth = `${100 / safeColumns}%`;
-  const items = React12.Children.toArray(children);
+  const items = React13.Children.toArray(children);
   const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
   const baseItemWidth = useMemo2(() => {
     if (!containerWidth) return void 0;
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   let currentColumn = 0;
-  return /* @__PURE__ */ React12.createElement(
-    View12,
+  return /* @__PURE__ */ React13.createElement(
+    View13,
     {
       style: [
         {
@@ -446,7 +491,7 @@ var Grid = ({
       }
     },
     items.map((child, index) => {
-      const key = React12.isValidElement(child) && child.key ? child.key : `grid-${index}`;
+      const key = React13.isValidElement(child) && child.key ? child.key : `grid-${index}`;
       const span = isGridItemElement(child) ? getSafeSpan(child.props.span, safeColumns) : 1;
       const spanWidth = baseItemWidth === void 0 ? `${100 / safeColumns * span}%` : baseItemWidth * span + resolvedColumnSpacing * (span - 1);
       if (currentColumn + span > safeColumns) {
@@ -466,7 +511,7 @@ var Grid = ({
           itemStyle,
           child.props.style
         ];
-        const element2 = React12.cloneElement(child, {
+        const element2 = React13.cloneElement(child, {
           key,
           style: mergedStyle
         });
@@ -474,8 +519,8 @@ var Grid = ({
         return element2;
       }
       const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ React12.createElement(
-        View12,
+      const element = /* @__PURE__ */ React13.createElement(
+        View13,
         {
           key,
           style: [
@@ -498,11 +543,11 @@ var Grid = ({
 };
 
 // src/components/view/grid/grid-builder.tsx
-import React13, { useMemo as useMemo3 } from "react";
+import React14, { useMemo as useMemo3 } from "react";
 import {
   FlatList,
   StyleSheet as StyleSheet3,
-  View as View13
+  View as View14
 } from "react-native";
 var getSafeColumns2 = (columns) => {
   if (!columns || columns <= 0) return 1;
@@ -589,7 +634,7 @@ var GridBuilder = ({
         },
         itemStyle
       ];
-      return /* @__PURE__ */ React13.createElement(View13, { style: placeholderStyle, pointerEvents: "none" });
+      return /* @__PURE__ */ React14.createElement(View14, { style: placeholderStyle, pointerEvents: "none" });
     }
     const element = resolvedRenderer({ item: item.item, index: item.index });
     if (element === null) return null;
@@ -605,7 +650,7 @@ var GridBuilder = ({
       },
       itemStyle
     ];
-    return /* @__PURE__ */ React13.createElement(View13, { style: wrapperStyle }, element);
+    return /* @__PURE__ */ React14.createElement(View14, { style: wrapperStyle }, element);
   };
   const flattenedStyle = StyleSheet3.flatten(style) ?? {};
   const {
@@ -626,7 +671,7 @@ var GridBuilder = ({
     ...columnGap !== void 0 ? { columnGap } : {}
   };
   const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     FlatList,
     {
       data: paddedData,
@@ -646,7 +691,7 @@ var GridBuilder = ({
 GridBuilder.displayName = "GridBuilder";
 
 // src/components/view/conditional/conditional-view.tsx
-import React14, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
+import React15, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
 import { Animated as Animated3 } from "react-native";
 
 // src/components/view/conditional/conditional-view.utils.ts
@@ -798,18 +843,18 @@ var ConditionalView = ({
   if (!shouldRender) {
     return null;
   }
-  return /* @__PURE__ */ React14.createElement(Animated3.View, { style: animatedStyle }, children);
+  return /* @__PURE__ */ React15.createElement(Animated3.View, { style: animatedStyle }, children);
 };
 
 // src/components/view/masonry-grid/masonry-grid.tsx
-import React15, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
-import { View as View14 } from "react-native";
+import React16, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
+import { View as View15 } from "react-native";
 var getSafeColumns3 = (columns) => {
   if (!columns || columns <= 0) return 1;
   return Math.floor(columns);
 };
 var getItemKey = (child, index) => {
-  return React15.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
+  return React16.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
 };
 var MasonryGrid = ({
   children,
@@ -832,7 +877,7 @@ var MasonryGrid = ({
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   const items = useMemo5(
-    () => React15.Children.toArray(children).map((child, index) => ({
+    () => React16.Children.toArray(children).map((child, index) => ({
       key: getItemKey(child, index),
       element: child
     })),
@@ -849,8 +894,8 @@ var MasonryGrid = ({
     });
     return buckets;
   }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ React15.createElement(
-    View14,
+  return /* @__PURE__ */ React16.createElement(
+    View15,
     {
       style: [
         {
@@ -873,10 +918,10 @@ var MasonryGrid = ({
         },
         columnStyle
       ];
-      return /* @__PURE__ */ React15.createElement(View14, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
+      return /* @__PURE__ */ React16.createElement(View15, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
         const isLastRow = index === column.length - 1;
-        return /* @__PURE__ */ React15.createElement(
-          View14,
+        return /* @__PURE__ */ React16.createElement(
+          View15,
           {
             key: item.key,
             style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
@@ -895,18 +940,18 @@ var MasonryGrid = ({
 };
 
 // src/components/view/masonry-grid/masonry-grid-item.tsx
-import React16 from "react";
-import { View as View15 } from "react-native";
+import React17 from "react";
+import { View as View16 } from "react-native";
 var MasonryGridItem = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React16.createElement(View15, { style }, children);
+  return /* @__PURE__ */ React17.createElement(View16, { style }, children);
 };
 MasonryGridItem.displayName = "MasonryGridItem";
 
 // src/components/view/masonry-grid/masonry-grid-builder.tsx
-import React17, { useMemo as useMemo6, useRef as useRef4 } from "react";
+import React18, { useMemo as useMemo6, useRef as useRef4 } from "react";
 import {
   ScrollView
 } from "react-native";
@@ -966,7 +1011,7 @@ var MasonryGridBuilder = ({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     ScrollView,
     {
       scrollEventThrottle: 16,
@@ -978,7 +1023,7 @@ var MasonryGridBuilder = ({
       onScroll: handleScroll
     },
     header,
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement(
       MasonryGrid,
       {
         columns,
@@ -988,7 +1033,7 @@ var MasonryGridBuilder = ({
         style: [{ width: "100%" }, style],
         columnStyle
       },
-      resolvedData.map((item, index) => /* @__PURE__ */ React17.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
+      resolvedData.map((item, index) => /* @__PURE__ */ React18.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
     ),
     footer
   );
@@ -1011,5 +1056,6 @@ export {
   RoundedView,
   Row,
   SizedBox,
-  Spacer
+  Spacer,
+  Surface
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",