@xaui/native 0.0.8 → 0.0.9

package/dist/index.d.cts

@@ -1,4 +1,7 @@
 export { ActivityIndicator } from './indicator/index.cjs';
 export { Divider } from './divider/index.cjs';
+export { Autocomplete, AutocompleteItem } from './autocomplete/index.cjs';
+export { Typography } from './typography/index.cjs';
 import 'react';
 import './index-BOw6tbkc.cjs';
+import 'react-native';

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export { ActivityIndicator } from './indicator/index.js';
 export { Divider } from './divider/index.js';
+export { Autocomplete, AutocompleteItem } from './autocomplete/index.js';
+export { Typography } from './typography/index.js';
 import 'react';
 import './index-BOw6tbkc.js';
+import 'react-native';

package/dist/index.js

@@ -1,11 +1,23 @@
+import {
+  Autocomplete,
+  AutocompleteItem
+} from "./chunk-6HUSEZDJ.js";
+import "./chunk-GBHQCAKW.js";
+import {
+  Typography
+} from "./chunk-ZYTBRHLJ.js";
+import "./chunk-7LXW4BXD.js";
 import {
   Divider
-} from "./chunk-R34CVLCX.js";
+} from "./chunk-GNJIET26.js";
 import {
   ActivityIndicator
-} from "./chunk-B2VGVZ3J.js";
-import "./chunk-ORMNMNOK.js";
+} from "./chunk-63LRW4QD.js";
+import "./chunk-NBRASCX4.js";
 export {
   ActivityIndicator,
-  Divider
+  Autocomplete,
+  AutocompleteItem,
+  Divider,
+  Typography
 };

package/dist/indicator/index.cjs

@@ -35,21 +35,39 @@ __export(indicator_exports, {
 module.exports = __toCommonJS(indicator_exports);
 
 // src/components/indicator/indicator.tsx
-var import_react6 = __toESM(require("react"), 1);
-var import_react_native6 = require("react-native");
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
 
 // src/core/theme-context.tsx
-var import_react = __toESM(require("react"), 1);
-var import_react_native = require("react-native");
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
 var import_theme = require("@xaui/core/theme");
 var import_palette = require("@xaui/core/palette");
-var XUIThemeContext = (0, import_react.createContext)(null);
 
-// src/core/theme-hooks.ts
+// src/core/portal/portal.tsx
 var import_react2 = require("react");
-var import_react_native2 = require("react-native");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
 function useXUITheme() {
-  const theme = (0, import_react2.useContext)(XUIThemeContext);
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
   if (!theme) {
     throw new Error("useXUITheme must be used within XUIProvider");
   }
@@ -60,12 +78,12 @@ function useXUITheme() {
 var import_theme2 = require("@xaui/core/theme");
 
 // src/components/indicator/circular-activity-indicator.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_react_native4 = require("react-native");
+var import_react6 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
 
 // src/components/indicator/indicator.style.ts
-var import_react_native3 = require("react-native");
-var styles = import_react_native3.StyleSheet.create({
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
   container: {
     flexShrink: 1,
     flexBasis: "auto",
@@ -73,7 +91,7 @@ var styles = import_react_native3.StyleSheet.create({
     justifyContent: "center"
   },
   layer: {
-    ...import_react_native3.StyleSheet.absoluteFillObject,
+    ...import_react_native4.StyleSheet.absoluteFillObject,
     justifyContent: "center",
     alignItems: "center"
   },
@@ -98,23 +116,23 @@ var CircularActivityIndicator = ({
   showTrack = true
 }) => {
   const theme = useXUITheme();
-  const { current: timer } = (0, import_react3.useRef)(new import_react_native4.Animated.Value(0));
-  const rotation = (0, import_react3.useRef)(void 0);
-  const startRotation = import_react3.default.useCallback(() => {
+  const { current: timer } = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0));
+  const rotation = (0, import_react6.useRef)(void 0);
+  const startRotation = import_react6.default.useCallback(() => {
     if (rotation.current) {
       timer.setValue(0);
-      import_react_native4.Animated.loop(rotation.current).start();
+      import_react_native5.Animated.loop(rotation.current).start();
     }
   }, [timer]);
   const stopRotation = () => {
     if (rotation.current) rotation.current.stop();
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (rotation.current === void 0) {
-      rotation.current = import_react_native4.Animated.timing(timer, {
+      rotation.current = import_react_native5.Animated.timing(timer, {
         duration: DURATION,
-        easing: import_react_native4.Easing.linear,
-        useNativeDriver: import_react_native4.Platform.OS !== "web",
+        easing: import_react_native5.Easing.linear,
+        useNativeDriver: import_react_native5.Platform.OS !== "web",
         toValue: 1
       });
     }
@@ -127,14 +145,14 @@ var CircularActivityIndicator = ({
   const trackColor = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
   const strokeWidth = size * 0.1;
   const frames = 60 * DURATION / 1e3;
-  const easing = import_react_native4.Easing.bezier(0.4, 0, 0.7, 1);
+  const easing = import_react_native5.Easing.bezier(0.4, 0, 0.7, 1);
   const containerStyle = {
     width: size,
     height: size / 2,
     overflow: "hidden"
   };
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_native4.View, { style: [styles.container, { width: size, height: size }] }, /* @__PURE__ */ import_react3.default.createElement(
-    import_react_native4.View,
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: [styles.container, { width: size, height: size }] }, /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native5.View,
     {
       style: {
         width: size,
@@ -144,8 +162,8 @@ var CircularActivityIndicator = ({
         borderColor: trackColor
       }
     }
-  ), /* @__PURE__ */ import_react3.default.createElement(
-    import_react_native4.View,
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native5.View,
     {
       style: {
         width: size,
@@ -197,25 +215,25 @@ var CircularActivityIndicator = ({
         borderWidth: strokeWidth,
         borderRadius: size / 2
       };
-      return /* @__PURE__ */ import_react3.default.createElement(import_react_native4.Animated.View, { key: index, style: [styles.layer] }, /* @__PURE__ */ import_react3.default.createElement(import_react_native4.Animated.View, { style: layerStyle }, /* @__PURE__ */ import_react3.default.createElement(import_react_native4.Animated.View, { style: [containerStyle, offsetStyle], collapsable: false }, /* @__PURE__ */ import_react3.default.createElement(import_react_native4.Animated.View, { style: viewportStyle }, /* @__PURE__ */ import_react3.default.createElement(import_react_native4.Animated.View, { style: containerStyle, collapsable: false }, /* @__PURE__ */ import_react3.default.createElement(import_react_native4.Animated.View, { style: lineStyle }))))));
+      return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { key: index, style: [styles.layer] }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: layerStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: [containerStyle, offsetStyle], collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: viewportStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: containerStyle, collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: lineStyle }))))));
     })
   ));
 };
 
 // src/components/indicator/linear-activity-indicator.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_react_native5 = require("react-native");
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"), 1);
 
 // src/components/indicator/indicator.hook.ts
-var import_react4 = require("react");
+var import_react7 = require("react");
 var import_react_native_reanimated = require("react-native-reanimated");
 var useLinearActivityIndicatorAnimation = (disableAnimation) => {
   const primaryTranslateX = (0, import_react_native_reanimated.useSharedValue)(0);
   const primaryScaleX = (0, import_react_native_reanimated.useSharedValue)(0.08);
   const secondaryTranslateX = (0, import_react_native_reanimated.useSharedValue)(0);
   const secondaryScaleX = (0, import_react_native_reanimated.useSharedValue)(0.08);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (disableAnimation) {
       (0, import_react_native_reanimated.cancelAnimation)(primaryTranslateX);
       (0, import_react_native_reanimated.cancelAnimation)(primaryScaleX);
@@ -324,7 +342,7 @@ var LinearActivityIndicator = ({
   const mainColor = color || colorScheme.main;
   const trackColor = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
   const barStyle = {
-    ...import_react_native5.StyleSheet.absoluteFillObject,
+    ...import_react_native6.StyleSheet.absoluteFillObject,
     backgroundColor: mainColor,
     borderRadius
   };
@@ -340,8 +358,8 @@ var LinearActivityIndicator = ({
       { scaleX: secondaryScaleX.value }
     ]
   }));
-  return /* @__PURE__ */ import_react5.default.createElement(
-    import_react_native5.View,
+  return /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native6.View,
     {
       style: {
         height: size,
@@ -351,8 +369,8 @@ var LinearActivityIndicator = ({
         overflow: "hidden"
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement(import_react_native_reanimated2.default.View, { style: [barStyle, primaryStyle] }),
-    /* @__PURE__ */ import_react5.default.createElement(import_react_native_reanimated2.default.View, { style: [barStyle, secondaryStyle] })
+    /* @__PURE__ */ import_react8.default.createElement(import_react_native_reanimated2.default.View, { style: [barStyle, primaryStyle] }),
+    /* @__PURE__ */ import_react8.default.createElement(import_react_native_reanimated2.default.View, { style: [barStyle, secondaryStyle] })
   );
 };
 
@@ -374,15 +392,15 @@ var ActivityIndicator = (props) => {
   const trackColor = backgroundColor ?? (showTrack ? colorScheme.background : "transparent");
   if (variant === "circular") {
     const circleSize = size ?? 40;
-    return /* @__PURE__ */ import_react6.default.createElement(
-      import_react_native6.View,
+    return /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native7.View,
       {
         style: [styles.container, { width: circleSize, height: circleSize }],
         accessible: true,
         accessibilityRole: "progressbar",
         accessibilityLabel: "Loading"
       },
-      /* @__PURE__ */ import_react6.default.createElement(
+      /* @__PURE__ */ import_react9.default.createElement(
         CircularActivityIndicator,
         {
           size: circleSize,
@@ -395,15 +413,15 @@ var ActivityIndicator = (props) => {
     );
   }
   const linearSize = size ?? 4;
-  return /* @__PURE__ */ import_react6.default.createElement(
-    import_react_native6.View,
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native7.View,
     {
       style: styles.container,
       accessible: true,
       accessibilityRole: "progressbar",
       accessibilityLabel: "Loading"
     },
-    /* @__PURE__ */ import_react6.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       LinearActivityIndicator,
       {
         size: linearSize,

package/dist/indicator/index.js

@@ -1,7 +1,7 @@
 import {
   ActivityIndicator
-} from "../chunk-B2VGVZ3J.js";
-import "../chunk-ORMNMNOK.js";
+} from "../chunk-63LRW4QD.js";
+import "../chunk-NBRASCX4.js";
 export {
   ActivityIndicator
 };

package/dist/progress/index.cjs

@@ -35,21 +35,39 @@ __export(progress_exports, {
 module.exports = __toCommonJS(progress_exports);
 
 // src/components/progress/progress.tsx
-var import_react6 = __toESM(require("react"), 1);
-var import_react_native6 = require("react-native");
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
 
 // src/core/theme-context.tsx
-var import_react = __toESM(require("react"), 1);
-var import_react_native = require("react-native");
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
 var import_theme = require("@xaui/core/theme");
 var import_palette = require("@xaui/core/palette");
-var XUIThemeContext = (0, import_react.createContext)(null);
 
-// src/core/theme-hooks.ts
+// src/core/portal/portal.tsx
 var import_react2 = require("react");
-var import_react_native2 = require("react-native");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
 function useXUITheme() {
-  const theme = (0, import_react2.useContext)(XUIThemeContext);
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
   if (!theme) {
     throw new Error("useXUITheme must be used within XUIProvider");
   }
@@ -60,20 +78,20 @@ function useXUITheme() {
 var import_theme2 = require("@xaui/core/theme");
 
 // src/components/progress/circular-progress-indicator.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_react_native4 = require("react-native");
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"), 1);
 var import_react_native_svg = __toESM(require("react-native-svg"), 1);
 
 // src/components/progress/progress.hook.ts
-var import_react3 = require("react");
+var import_react6 = require("react");
 var import_react_native_reanimated = require("react-native-reanimated");
 var MIN_VALUE = 0;
 var MAX_VALUE = 1;
 var clampProgress = (value) => Math.max(MIN_VALUE, Math.min(MAX_VALUE, value));
 var useProgressAnimation = (value, disableAnimation) => {
   const progressAnim = (0, import_react_native_reanimated.useSharedValue)(clampProgress(value));
-  (0, import_react3.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const clampedValue = clampProgress(value);
     if (disableAnimation) {
       progressAnim.value = clampedValue;
@@ -88,8 +106,8 @@ var useProgressAnimation = (value, disableAnimation) => {
 };
 
 // src/components/progress/progress.style.ts
-var import_react_native3 = require("react-native");
-var styles = import_react_native3.StyleSheet.create({
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
   container: {
     flexShrink: 1,
     flexBasis: "auto",
@@ -127,7 +145,7 @@ var CircularProgressIndicator = ({
   const animatedProps = (0, import_react_native_reanimated2.useAnimatedProps)(() => ({
     strokeDashoffset: circumference * (1 - progressAnim.value)
   }));
-  return /* @__PURE__ */ import_react4.default.createElement(import_react_native4.View, { style: [styles.circleContainer, { width: size, height: size }] }, /* @__PURE__ */ import_react4.default.createElement(import_react_native_svg.default, { width: size, height: size, style: { transform: [{ rotate: "-90deg" }] } }, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.circleContainer, { width: size, height: size }] }, /* @__PURE__ */ import_react7.default.createElement(import_react_native_svg.default, { width: size, height: size, style: { transform: [{ rotate: "-90deg" }] } }, /* @__PURE__ */ import_react7.default.createElement(
     import_react_native_svg.Circle,
     {
       cx: center,
@@ -137,7 +155,7 @@ var CircularProgressIndicator = ({
       strokeWidth,
       fill: "none"
     }
-  ), /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     AnimatedCircle,
     {
       cx: center,
@@ -154,8 +172,8 @@ var CircularProgressIndicator = ({
 };
 
 // src/components/progress/linear-progress-indicator.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_react_native5 = require("react-native");
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
 var import_react_native_reanimated3 = __toESM(require("react-native-reanimated"), 1);
 var LinearProgressIndicator = ({
   size = 4,
@@ -170,8 +188,8 @@ var LinearProgressIndicator = ({
   const animatedStyle = (0, import_react_native_reanimated3.useAnimatedStyle)(() => ({
     width: `${progressAnim.value * 100}%`
   }));
-  return /* @__PURE__ */ import_react5.default.createElement(
-    import_react_native5.View,
+  return /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native6.View,
     {
       style: [
         styles.track,
@@ -182,7 +200,7 @@ var LinearProgressIndicator = ({
         }
       ]
     },
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react8.default.createElement(
       import_react_native_reanimated3.default.View,
       {
         style: [
@@ -222,15 +240,15 @@ var Progress = (props) => {
   if (variant === "circular") {
     const circleSize = size ?? 40;
     const borderRadius2 = "borderRadius" in props ? props.borderRadius : void 0;
-    return /* @__PURE__ */ import_react6.default.createElement(
-      import_react_native6.View,
+    return /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native7.View,
       {
         style: [styles.circleContainer, { width: circleSize, height: circleSize }],
         accessible: true,
         accessibilityRole: "progressbar",
         accessibilityValue
       },
-      /* @__PURE__ */ import_react6.default.createElement(
+      /* @__PURE__ */ import_react9.default.createElement(
         CircularProgressIndicator,
         {
           size: circleSize,
@@ -245,15 +263,15 @@ var Progress = (props) => {
   }
   const linearSize = size ?? 4;
   const borderRadius = "borderRadius" in props ? props.borderRadius : void 0;
-  return /* @__PURE__ */ import_react6.default.createElement(
-    import_react_native6.View,
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native7.View,
     {
       style: styles.container,
       accessible: true,
       accessibilityRole: "progressbar",
       accessibilityValue
     },
-    /* @__PURE__ */ import_react6.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       LinearProgressIndicator,
       {
         size: linearSize,

package/dist/progress/index.js

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "../chunk-ORMNMNOK.js";
+} from "../chunk-NBRASCX4.js";
 
 // src/components/progress/progress.tsx
 import React3 from "react";