@xaui/native 0.0.18 → 0.0.19

package/dist/segment-button/index.cjs

@@ -183,7 +183,7 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
     const variants = {
       outlined: {
         containerBackground: "transparent",
-        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: colorScheme.main,
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",
@@ -210,7 +210,7 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
       },
       faded: {
         containerBackground: `${colorScheme.background}95`,
-        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: `${colorScheme.main}90`,
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",

package/dist/segment-button/index.js

@@ -97,7 +97,7 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
     const variants = {
       outlined: {
         containerBackground: "transparent",
-        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: colorScheme.main,
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",
@@ -124,7 +124,7 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
       },
       faded: {
         containerBackground: `${colorScheme.background}95`,
-        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: `${colorScheme.main}90`,
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",

package/dist/skeleton/index.cjs

@@ -0,0 +1,160 @@
+"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/skeleton/index.ts
+var skeleton_exports = {};
+__export(skeleton_exports, {
+  Skeleton: () => Skeleton
+});
+module.exports = __toCommonJS(skeleton_exports);
+
+// src/components/skeleton/skeleton.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/skeleton/skeleton.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.StyleSheet.create({
+  skeleton: {
+    width: "100%",
+    height: 16,
+    borderRadius: 8,
+    overflow: "hidden"
+  }
+});
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// 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_native2 = require("react-native");
+var hostStyles = import_react_native2.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_native4 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.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/skeleton/skeleton.tsx
+var Skeleton = ({
+  children,
+  isLoaded,
+  disableAnimation = false,
+  skeletonColor,
+  width,
+  height,
+  radius = "md",
+  style
+}) => {
+  const theme = useXUITheme();
+  const opacity = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0.6)).current;
+  const resolvedColor = (0, import_react6.useMemo)(
+    () => skeletonColor ?? theme.colors.default.background,
+    [skeletonColor, theme.colors.default.background]
+  );
+  const resolvedRadius = (0, import_react6.useMemo)(
+    () => theme.borderRadius[radius],
+    [radius, theme.borderRadius]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (isLoaded || disableAnimation) {
+      opacity.setValue(1);
+      return;
+    }
+    const loop = import_react_native5.Animated.loop(
+      import_react_native5.Animated.sequence([
+        import_react_native5.Animated.timing(opacity, {
+          toValue: 0.35,
+          duration: 700,
+          useNativeDriver: true
+        }),
+        import_react_native5.Animated.timing(opacity, {
+          toValue: 0.9,
+          duration: 700,
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => {
+      loop.stop();
+    };
+  }, [disableAnimation, isLoaded, opacity]);
+  if (isLoaded) {
+    return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, children);
+  }
+  return /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native5.Animated.View,
+    {
+      style: [
+        styles.skeleton,
+        {
+          backgroundColor: resolvedColor,
+          width,
+          height,
+          borderRadius: resolvedRadius,
+          opacity
+        },
+        style
+      ]
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton
+});

package/dist/skeleton/index.d.cts

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+import { ColorValue, DimensionValue, StyleProp, ViewStyle } from 'react-native';
+import { R as Radius } from '../index-BOw6tbkc.cjs';
+
+type SkeletonProps = {
+    /**
+     * The content to display when loading completes.
+     */
+    children: ReactNode;
+    /**
+     * Whether the content is loaded.
+     * @default false
+     */
+    isLoaded: boolean;
+    /**
+     * Whether to disable the animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Custom background color for the skeleton.
+     */
+    skeletonColor?: ColorValue;
+    /**
+     * Width of the skeleton.
+     */
+    width?: DimensionValue;
+    /**
+     * Height of the skeleton.
+     */
+    height?: DimensionValue;
+    /**
+     * Border radius of the skeleton.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Custom style for the skeleton container.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Skeleton: React.FC<SkeletonProps>;
+
+export { Skeleton, type SkeletonProps };

package/dist/skeleton/index.d.ts

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+import { ColorValue, DimensionValue, StyleProp, ViewStyle } from 'react-native';
+import { R as Radius } from '../index-BOw6tbkc.js';
+
+type SkeletonProps = {
+    /**
+     * The content to display when loading completes.
+     */
+    children: ReactNode;
+    /**
+     * Whether the content is loaded.
+     * @default false
+     */
+    isLoaded: boolean;
+    /**
+     * Whether to disable the animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Custom background color for the skeleton.
+     */
+    skeletonColor?: ColorValue;
+    /**
+     * Width of the skeleton.
+     */
+    width?: DimensionValue;
+    /**
+     * Height of the skeleton.
+     */
+    height?: DimensionValue;
+    /**
+     * Border radius of the skeleton.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Custom style for the skeleton container.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Skeleton: React.FC<SkeletonProps>;
+
+export { Skeleton, type SkeletonProps };

package/dist/skeleton/index.js

@@ -0,0 +1,89 @@
+import "../chunk-DXXNBF5P.js";
+import {
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/skeleton/skeleton.tsx
+import React, { useEffect, useMemo, useRef } from "react";
+import { Animated } from "react-native";
+
+// src/components/skeleton/skeleton.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  skeleton: {
+    width: "100%",
+    height: 16,
+    borderRadius: 8,
+    overflow: "hidden"
+  }
+});
+
+// src/components/skeleton/skeleton.tsx
+var Skeleton = ({
+  children,
+  isLoaded,
+  disableAnimation = false,
+  skeletonColor,
+  width,
+  height,
+  radius = "md",
+  style
+}) => {
+  const theme = useXUITheme();
+  const opacity = useRef(new Animated.Value(0.6)).current;
+  const resolvedColor = useMemo(
+    () => skeletonColor ?? theme.colors.default.background,
+    [skeletonColor, theme.colors.default.background]
+  );
+  const resolvedRadius = useMemo(
+    () => theme.borderRadius[radius],
+    [radius, theme.borderRadius]
+  );
+  useEffect(() => {
+    if (isLoaded || disableAnimation) {
+      opacity.setValue(1);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.35,
+          duration: 700,
+          useNativeDriver: true
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.9,
+          duration: 700,
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => {
+      loop.stop();
+    };
+  }, [disableAnimation, isLoaded, opacity]);
+  if (isLoaded) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  }
+  return /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [
+        styles.skeleton,
+        {
+          backgroundColor: resolvedColor,
+          width,
+          height,
+          borderRadius: resolvedRadius,
+          opacity
+        },
+        style
+      ]
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+export {
+  Skeleton
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -67,6 +67,11 @@
       "import": "./dist/divider/index.js",
       "require": "./dist/divider/index.js"
     },
+    "./skeleton": {
+      "types": "./dist/skeleton/index.d.ts",
+      "import": "./dist/skeleton/index.js",
+      "require": "./dist/skeleton/index.js"
+    },
     "./avatar": {
       "types": "./dist/avatar/index.d.ts",
       "import": "./dist/avatar/index.js",