@xaui/native 0.0.4 → 0.0.6

package/dist/{chunk-52PIZF2Z.js → chunk-B2VGVZ3J.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-DNJWBME5.js";
+} from "./chunk-ORMNMNOK.js";
 
 // src/components/indicator/indicator.tsx
 import React3 from "react";
@@ -14,6 +14,8 @@ import { Animated, Easing, Platform, View } from "react-native";
 import { StyleSheet } from "react-native";
 var styles = StyleSheet.create({
   container: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%",
     justifyContent: "center"
   },

package/dist/{chunk-DNJWBME5.js → chunk-ORMNMNOK.js}

@@ -2,6 +2,7 @@
 import React, { createContext } from "react";
 import { useColorScheme } from "react-native";
 import { defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
 var XUIThemeContext = createContext(null);
 function XUIProvider({
   children,
@@ -12,10 +13,12 @@ function XUIProvider({
   const theme = React.useMemo(() => {
     if (!darkTheme && !lightTheme) return defaultTheme;
     const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
+    const mode = colorScheme === "dark" ? "dark" : "light";
     if (!activeTheme) return defaultTheme;
     return {
       ...defaultTheme,
       ...activeTheme,
+      mode,
       colors: {
         ...defaultTheme.colors,
         ...activeTheme.colors
@@ -27,7 +30,8 @@ function XUIProvider({
       fontSizes: {
         ...defaultTheme.fontSizes,
         ...activeTheme.fontSizes
-      }
+      },
+      palette: colors
     };
   }, [lightTheme, darkTheme, colorScheme]);
   return /* @__PURE__ */ React.createElement(XUIThemeContext.Provider, { value: theme }, children);
@@ -51,6 +55,10 @@ function useXUIColors() {
   const theme = useXUITheme();
   return theme.colors;
 }
+function useXUIPalette() {
+  const theme = useXUITheme();
+  return useMemo(() => theme.palette, [theme]);
+}
 function useBorderRadiusStyles(radius) {
   const theme = useXUITheme();
   const borderRadius = useMemo(() => {
@@ -66,10 +74,16 @@ function useBorderRadiusStyles(radius) {
   return borderRadius;
 }
 
+// src/core/index.ts
+import { defaultDarkTheme, defaultTheme as defaultTheme2 } from "@xaui/core/theme";
+
 export {
   XUIProvider,
   useColorMode,
   useXUITheme,
   useXUIColors,
-  useBorderRadiusStyles
+  useXUIPalette,
+  useBorderRadiusStyles,
+  defaultDarkTheme,
+  defaultTheme2 as defaultTheme
 };

package/dist/chunk-R34CVLCX.js

@@ -0,0 +1,75 @@
+import {
+  useXUITheme
+} from "./chunk-ORMNMNOK.js";
+
+// src/components/divider/divider.tsx
+import React from "react";
+import { View } from "react-native";
+
+// src/components/divider/divider.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  horizontal: {
+    height: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%"
+  },
+  vertical: {
+    width: 1,
+    alignSelf: "stretch"
+  }
+});
+
+// src/components/divider/divider.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor } from "@xaui/core";
+var useDividerColor = (themeColor, customColor) => {
+  const theme = useXUITheme();
+  const dividerColor = useMemo(() => {
+    if (customColor) {
+      return customColor;
+    }
+    const safeThemeColor = getSafeThemeColor(themeColor);
+    return theme.colors[safeThemeColor].main;
+  }, [customColor, themeColor, theme]);
+  return dividerColor;
+};
+var useDividerSize = (size, orientation) => {
+  const sizeStyles = useMemo(() => {
+    if (orientation === "horizontal") {
+      return {
+        height: size
+      };
+    }
+    return {
+      width: size
+    };
+  }, [size, orientation]);
+  return sizeStyles;
+};
+
+// src/components/divider/divider.tsx
+var Divider = ({
+  size = 1,
+  themeColor = "default",
+  color,
+  orientation = "horizontal"
+}) => {
+  const dividerColor = useDividerColor(themeColor, color);
+  const sizeStyles = useDividerSize(size, orientation);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        orientation === "horizontal" ? styles.horizontal : styles.vertical,
+        sizeStyles,
+        { backgroundColor: dividerColor }
+      ]
+    }
+  );
+};
+
+export {
+  Divider
+};

package/dist/core/index.cjs

@@ -31,6 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var core_exports = {};
 __export(core_exports, {
   XUIProvider: () => XUIProvider,
+  defaultDarkTheme: () => import_theme2.defaultDarkTheme,
+  defaultTheme: () => import_theme2.defaultTheme,
   useColorMode: () => useColorMode,
   useXUIColors: () => useXUIColors,
   useXUITheme: () => useXUITheme
@@ -41,6 +43,7 @@ module.exports = __toCommonJS(core_exports);
 var import_react = __toESM(require("react"), 1);
 var import_react_native = require("react-native");
 var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
 var XUIThemeContext = (0, import_react.createContext)(null);
 function XUIProvider({
   children,
@@ -51,10 +54,12 @@ function XUIProvider({
   const theme = import_react.default.useMemo(() => {
     if (!darkTheme && !lightTheme) return import_theme.defaultTheme;
     const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
+    const mode = colorScheme === "dark" ? "dark" : "light";
     if (!activeTheme) return import_theme.defaultTheme;
     return {
       ...import_theme.defaultTheme,
       ...activeTheme,
+      mode,
       colors: {
         ...import_theme.defaultTheme.colors,
         ...activeTheme.colors
@@ -66,7 +71,8 @@ function XUIProvider({
       fontSizes: {
         ...import_theme.defaultTheme.fontSizes,
         ...activeTheme.fontSizes
-      }
+      },
+      palette: import_palette.colors
     };
   }, [lightTheme, darkTheme, colorScheme]);
   return /* @__PURE__ */ import_react.default.createElement(XUIThemeContext.Provider, { value: theme }, children);
@@ -90,9 +96,14 @@ function useXUIColors() {
   const theme = useXUITheme();
   return theme.colors;
 }
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   XUIProvider,
+  defaultDarkTheme,
+  defaultTheme,
   useColorMode,
   useXUIColors,
   useXUITheme

package/dist/core/index.d.cts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { XUITheme } from '@xaui/core/theme';
+export { defaultDarkTheme, defaultTheme } from '@xaui/core/theme';
 
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];

package/dist/core/index.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { XUITheme } from '@xaui/core/theme';
+export { defaultDarkTheme, defaultTheme } from '@xaui/core/theme';
 
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];

package/dist/core/index.js

@@ -1,11 +1,15 @@
 import {
   XUIProvider,
+  defaultDarkTheme,
+  defaultTheme,
   useColorMode,
   useXUIColors,
   useXUITheme
-} from "../chunk-DNJWBME5.js";
+} from "../chunk-ORMNMNOK.js";
 export {
   XUIProvider,
+  defaultDarkTheme,
+  defaultTheme,
   useColorMode,
   useXUIColors,
   useXUITheme

package/dist/divider/index.cjs

@@ -0,0 +1,130 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/divider/index.ts
+var divider_exports = {};
+__export(divider_exports, {
+  Divider: () => Divider
+});
+module.exports = __toCommonJS(divider_exports);
+
+// src/components/divider/divider.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native4 = require("react-native");
+
+// src/components/divider/divider.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.StyleSheet.create({
+  horizontal: {
+    height: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%"
+  },
+  vertical: {
+    width: 1,
+    alignSelf: "stretch"
+  }
+});
+
+// src/components/divider/divider.hook.ts
+var import_react3 = require("react");
+
+// src/core/theme-context.tsx
+var import_react = __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
+var import_react2 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react2.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/divider/divider.hook.ts
+var import_core2 = require("@xaui/core");
+var useDividerColor = (themeColor, customColor) => {
+  const theme = useXUITheme();
+  const dividerColor = (0, import_react3.useMemo)(() => {
+    if (customColor) {
+      return customColor;
+    }
+    const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
+    return theme.colors[safeThemeColor].main;
+  }, [customColor, themeColor, theme]);
+  return dividerColor;
+};
+var useDividerSize = (size, orientation) => {
+  const sizeStyles = (0, import_react3.useMemo)(() => {
+    if (orientation === "horizontal") {
+      return {
+        height: size
+      };
+    }
+    return {
+      width: size
+    };
+  }, [size, orientation]);
+  return sizeStyles;
+};
+
+// src/components/divider/divider.tsx
+var Divider = ({
+  size = 1,
+  themeColor = "default",
+  color,
+  orientation = "horizontal"
+}) => {
+  const dividerColor = useDividerColor(themeColor, color);
+  const sizeStyles = useDividerSize(size, orientation);
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_react_native4.View,
+    {
+      style: [
+        orientation === "horizontal" ? styles.horizontal : styles.vertical,
+        sizeStyles,
+        { backgroundColor: dividerColor }
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Divider
+});

package/dist/divider/index.d.cts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerProps = {
+    /**
+     * The size (thickness) of the divider in pixels.
+     * @default 1
+     */
+    size?: number;
+    /**
+     * The theme color of the divider.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Custom color for the divider.
+     * If provided, this will override themeColor.
+     */
+    color?: string;
+    /**
+     * The orientation of the divider.
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+};
+
+declare const Divider: React.FC<DividerProps>;
+
+export { Divider, type DividerOrientation, type DividerProps };

package/dist/divider/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerProps = {
+    /**
+     * The size (thickness) of the divider in pixels.
+     * @default 1
+     */
+    size?: number;
+    /**
+     * The theme color of the divider.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Custom color for the divider.
+     * If provided, this will override themeColor.
+     */
+    color?: string;
+    /**
+     * The orientation of the divider.
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+};
+
+declare const Divider: React.FC<DividerProps>;
+
+export { Divider, type DividerOrientation, type DividerProps };

package/dist/divider/index.js

@@ -0,0 +1,7 @@
+import {
+  Divider
+} from "../chunk-R34CVLCX.js";
+import "../chunk-ORMNMNOK.js";
+export {
+  Divider
+};

package/dist/index.cjs

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  ActivityIndicator: () => ActivityIndicator
+  ActivityIndicator: () => ActivityIndicator,
+  Divider: () => Divider
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -42,6 +43,7 @@ var import_react_native6 = require("react-native");
 var import_react = __toESM(require("react"), 1);
 var import_react_native = 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
@@ -55,6 +57,9 @@ function useXUITheme() {
   return theme;
 }
 
+// src/core/index.ts
+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");
@@ -63,6 +68,8 @@ var import_react_native4 = require("react-native");
 var import_react_native3 = require("react-native");
 var styles = import_react_native3.StyleSheet.create({
   container: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%",
     justifyContent: "center"
   },
@@ -411,7 +418,76 @@ var ActivityIndicator = (props) => {
     )
   );
 };
+
+// src/components/divider/divider.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native8 = require("react-native");
+
+// src/components/divider/divider.style.ts
+var import_react_native7 = require("react-native");
+var styles2 = import_react_native7.StyleSheet.create({
+  horizontal: {
+    height: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%"
+  },
+  vertical: {
+    width: 1,
+    alignSelf: "stretch"
+  }
+});
+
+// src/components/divider/divider.hook.ts
+var import_react7 = require("react");
+var import_core6 = require("@xaui/core");
+var useDividerColor = (themeColor, customColor) => {
+  const theme = useXUITheme();
+  const dividerColor = (0, import_react7.useMemo)(() => {
+    if (customColor) {
+      return customColor;
+    }
+    const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+    return theme.colors[safeThemeColor].main;
+  }, [customColor, themeColor, theme]);
+  return dividerColor;
+};
+var useDividerSize = (size, orientation) => {
+  const sizeStyles = (0, import_react7.useMemo)(() => {
+    if (orientation === "horizontal") {
+      return {
+        height: size
+      };
+    }
+    return {
+      width: size
+    };
+  }, [size, orientation]);
+  return sizeStyles;
+};
+
+// src/components/divider/divider.tsx
+var Divider = ({
+  size = 1,
+  themeColor = "default",
+  color,
+  orientation = "horizontal"
+}) => {
+  const dividerColor = useDividerColor(themeColor, color);
+  const sizeStyles = useDividerSize(size, orientation);
+  return /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native8.View,
+    {
+      style: [
+        orientation === "horizontal" ? styles2.horizontal : styles2.vertical,
+        sizeStyles,
+        { backgroundColor: dividerColor }
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ActivityIndicator
+  ActivityIndicator,
+  Divider
 });

package/dist/index.d.cts

@@ -1,3 +1,4 @@
 export { ActivityIndicator } from './indicator/index.cjs';
+export { Divider } from './divider/index.cjs';
 import 'react';
 import './index-BOw6tbkc.cjs';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { ActivityIndicator } from './indicator/index.js';
+export { Divider } from './divider/index.js';
 import 'react';
 import './index-BOw6tbkc.js';

package/dist/index.js

@@ -1,7 +1,11 @@
+import {
+  Divider
+} from "./chunk-R34CVLCX.js";
 import {
   ActivityIndicator
-} from "./chunk-52PIZF2Z.js";
-import "./chunk-DNJWBME5.js";
+} from "./chunk-B2VGVZ3J.js";
+import "./chunk-ORMNMNOK.js";
 export {
-  ActivityIndicator
+  ActivityIndicator,
+  Divider
 };

package/dist/indicator/index.cjs

@@ -42,6 +42,7 @@ var import_react_native6 = require("react-native");
 var import_react = __toESM(require("react"), 1);
 var import_react_native = 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
@@ -55,6 +56,9 @@ function useXUITheme() {
   return theme;
 }
 
+// src/core/index.ts
+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");
@@ -63,6 +67,8 @@ var import_react_native4 = require("react-native");
 var import_react_native3 = require("react-native");
 var styles = import_react_native3.StyleSheet.create({
   container: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%",
     justifyContent: "center"
   },

package/dist/indicator/index.js

@@ -1,7 +1,7 @@
 import {
   ActivityIndicator
-} from "../chunk-52PIZF2Z.js";
-import "../chunk-DNJWBME5.js";
+} from "../chunk-B2VGVZ3J.js";
+import "../chunk-ORMNMNOK.js";
 export {
   ActivityIndicator
 };

package/dist/progress/index.cjs

@@ -42,6 +42,7 @@ var import_react_native6 = require("react-native");
 var import_react = __toESM(require("react"), 1);
 var import_react_native = 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
@@ -55,6 +56,9 @@ function useXUITheme() {
   return theme;
 }
 
+// src/core/index.ts
+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");
@@ -87,6 +91,8 @@ var useProgressAnimation = (value, disableAnimation) => {
 var import_react_native3 = require("react-native");
 var styles = import_react_native3.StyleSheet.create({
   container: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   },
   track: {

package/dist/progress/index.js

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "../chunk-DNJWBME5.js";
+} from "../chunk-ORMNMNOK.js";
 
 // src/components/progress/progress.tsx
 import React3 from "react";
@@ -38,6 +38,8 @@ var useProgressAnimation = (value, disableAnimation) => {
 import { StyleSheet } from "react-native";
 var styles = StyleSheet.create({
   container: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   },
   track: {