@xaui/native 0.0.2

package/dist/progress/index.cjs

@@ -0,0 +1,266 @@
+"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/progress/index.ts
+var progress_exports = {};
+__export(progress_exports, {
+  Progress: () => Progress
+});
+module.exports = __toCommonJS(progress_exports);
+
+// src/components/progress/progress.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+
+// src/core/theme-context.tsx
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var XUIThemeContext = (0, import_react.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react2 = require("react");
+var import_react_native2 = 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/components/progress/circular-progress-indicator.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native4 = 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_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)(() => {
+    const clampedValue = clampProgress(value);
+    if (disableAnimation) {
+      progressAnim.value = clampedValue;
+      return;
+    }
+    progressAnim.value = (0, import_react_native_reanimated.withTiming)(clampedValue, {
+      duration: 500,
+      easing: import_react_native_reanimated.Easing.bezier(0, 0, 0.2, 1)
+    });
+  }, [value, disableAnimation, progressAnim]);
+  return progressAnim;
+};
+
+// src/components/progress/progress.style.ts
+var import_react_native3 = require("react-native");
+var styles = import_react_native3.StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  track: {
+    width: "100%",
+    overflow: "hidden"
+  },
+  progress: {
+    height: "100%"
+  },
+  circleContainer: {
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+
+// src/components/progress/circular-progress-indicator.tsx
+var AnimatedCircle = import_react_native_reanimated2.default.createAnimatedComponent(import_react_native_svg.Circle);
+var CircularProgressIndicator = ({
+  size = 40,
+  color,
+  backgroundColor,
+  value,
+  borderRadius,
+  disableAnimation
+}) => {
+  const progressAnim = useProgressAnimation(value, disableAnimation);
+  const strokeWidth = size * 0.1;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const center = size / 2;
+  const strokeCap = borderRadius && borderRadius > 0 ? "round" : "butt";
+  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(
+    import_react_native_svg.Circle,
+    {
+      cx: center,
+      cy: center,
+      r: radius,
+      stroke: backgroundColor,
+      strokeWidth,
+      fill: "none"
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    AnimatedCircle,
+    {
+      cx: center,
+      cy: center,
+      r: radius,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: strokeCap,
+      strokeDasharray: circumference,
+      animatedProps,
+      fill: "none"
+    }
+  )));
+};
+
+// src/components/progress/linear-progress-indicator.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+var import_react_native_reanimated3 = __toESM(require("react-native-reanimated"), 1);
+var LinearProgressIndicator = ({
+  size = 4,
+  color,
+  backgroundColor,
+  value,
+  borderRadius,
+  disableAnimation
+}) => {
+  const progressAnim = useProgressAnimation(value, disableAnimation);
+  const radius = Math.max(0, Math.min(size / 2, borderRadius ?? 0));
+  const animatedStyle = (0, import_react_native_reanimated3.useAnimatedStyle)(() => ({
+    width: `${progressAnim.value * 100}%`
+  }));
+  return /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native5.View,
+    {
+      style: [
+        styles.track,
+        {
+          height: size,
+          backgroundColor,
+          borderRadius: radius
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react5.default.createElement(
+      import_react_native_reanimated3.default.View,
+      {
+        style: [
+          styles.progress,
+          animatedStyle,
+          {
+            backgroundColor: color,
+            borderRadius: radius
+          }
+        ]
+      }
+    )
+  );
+};
+
+// src/components/progress/progress.tsx
+var Progress = (props) => {
+  const {
+    variant = "linear",
+    themeColor = "primary",
+    value,
+    color,
+    backgroundColor,
+    size,
+    disableAnimation = false
+  } = props;
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const mainColor = color ?? colorScheme.main;
+  const trackColor = backgroundColor ?? colorScheme.background;
+  const clampedValue = clampProgress(value);
+  const accessibilityValue = {
+    min: 0,
+    max: 100,
+    now: clampedValue * 100
+  };
+  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,
+      {
+        style: [styles.circleContainer, { width: circleSize, height: circleSize }],
+        accessible: true,
+        accessibilityRole: "progressbar",
+        accessibilityValue
+      },
+      /* @__PURE__ */ import_react6.default.createElement(
+        CircularProgressIndicator,
+        {
+          size: circleSize,
+          color: mainColor,
+          backgroundColor: trackColor,
+          value: clampedValue,
+          borderRadius: borderRadius2,
+          disableAnimation
+        }
+      )
+    );
+  }
+  const linearSize = size ?? 4;
+  const borderRadius = "borderRadius" in props ? props.borderRadius : void 0;
+  return /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native6.View,
+    {
+      style: styles.container,
+      accessible: true,
+      accessibilityRole: "progressbar",
+      accessibilityValue
+    },
+    /* @__PURE__ */ import_react6.default.createElement(
+      LinearProgressIndicator,
+      {
+        size: linearSize,
+        color: mainColor,
+        backgroundColor: trackColor,
+        value: clampedValue,
+        borderRadius,
+        disableAnimation
+      }
+    )
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Progress
+});

package/dist/progress/index.d.cts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { T as ThemeColor } from '../theme-qvIXI4kF.cjs';
+
+type ProgressVariant = 'linear' | 'circular';
+type ProgressIndicatorProps = {
+    /**
+     * The variant of the progress indicator.
+     * @default 'linear'
+     */
+    variant?: ProgressVariant;
+    /**
+     * The size of the progress indicator (height for linear, diameter for circular).
+     * @default 4 for linear, 40 for circular
+     */
+    size?: number;
+    /**
+     * The theme color of the progress indicator.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The custom color of the progress indicator.
+     * Overrides themeColor.
+     */
+    color?: string;
+    /**
+     * The background color of the track.
+     */
+    backgroundColor?: string;
+    /**
+     * The current value of the progress bar (0 to 1).
+     */
+    value: number;
+    /**
+     * Whether to disable the animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * The border radius of the indicator and track.
+     */
+    borderRadius?: number;
+};
+
+declare const Progress: React.FC<ProgressIndicatorProps>;
+
+export { Progress, type ProgressIndicatorProps };

package/dist/progress/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { T as ThemeColor } from '../theme-qvIXI4kF.js';
+
+type ProgressVariant = 'linear' | 'circular';
+type ProgressIndicatorProps = {
+    /**
+     * The variant of the progress indicator.
+     * @default 'linear'
+     */
+    variant?: ProgressVariant;
+    /**
+     * The size of the progress indicator (height for linear, diameter for circular).
+     * @default 4 for linear, 40 for circular
+     */
+    size?: number;
+    /**
+     * The theme color of the progress indicator.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The custom color of the progress indicator.
+     * Overrides themeColor.
+     */
+    color?: string;
+    /**
+     * The background color of the track.
+     */
+    backgroundColor?: string;
+    /**
+     * The current value of the progress bar (0 to 1).
+     */
+    value: number;
+    /**
+     * Whether to disable the animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * The border radius of the indicator and track.
+     */
+    borderRadius?: number;
+};
+
+declare const Progress: React.FC<ProgressIndicatorProps>;
+
+export { Progress, type ProgressIndicatorProps };

package/dist/progress/index.js

@@ -0,0 +1,216 @@
+import {
+  useXUITheme
+} from "../chunk-SHT66VET.js";
+
+// src/components/progress/progress.tsx
+import React3 from "react";
+import { View as View3 } from "react-native";
+
+// src/components/progress/circular-progress-indicator.tsx
+import React from "react";
+import { View } from "react-native";
+import Animated, { useAnimatedProps } from "react-native-reanimated";
+import Svg, { Circle } from "react-native-svg";
+
+// src/components/progress/progress.hook.ts
+import { useEffect } from "react";
+import { Easing, useSharedValue, withTiming } from "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 = useSharedValue(clampProgress(value));
+  useEffect(() => {
+    const clampedValue = clampProgress(value);
+    if (disableAnimation) {
+      progressAnim.value = clampedValue;
+      return;
+    }
+    progressAnim.value = withTiming(clampedValue, {
+      duration: 500,
+      easing: Easing.bezier(0, 0, 0.2, 1)
+    });
+  }, [value, disableAnimation, progressAnim]);
+  return progressAnim;
+};
+
+// src/components/progress/progress.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  track: {
+    width: "100%",
+    overflow: "hidden"
+  },
+  progress: {
+    height: "100%"
+  },
+  circleContainer: {
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+
+// src/components/progress/circular-progress-indicator.tsx
+var AnimatedCircle = Animated.createAnimatedComponent(Circle);
+var CircularProgressIndicator = ({
+  size = 40,
+  color,
+  backgroundColor,
+  value,
+  borderRadius,
+  disableAnimation
+}) => {
+  const progressAnim = useProgressAnimation(value, disableAnimation);
+  const strokeWidth = size * 0.1;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const center = size / 2;
+  const strokeCap = borderRadius && borderRadius > 0 ? "round" : "butt";
+  const animatedProps = useAnimatedProps(() => ({
+    strokeDashoffset: circumference * (1 - progressAnim.value)
+  }));
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.circleContainer, { width: size, height: size }] }, /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, style: { transform: [{ rotate: "-90deg" }] } }, /* @__PURE__ */ React.createElement(
+    Circle,
+    {
+      cx: center,
+      cy: center,
+      r: radius,
+      stroke: backgroundColor,
+      strokeWidth,
+      fill: "none"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    AnimatedCircle,
+    {
+      cx: center,
+      cy: center,
+      r: radius,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: strokeCap,
+      strokeDasharray: circumference,
+      animatedProps,
+      fill: "none"
+    }
+  )));
+};
+
+// src/components/progress/linear-progress-indicator.tsx
+import React2 from "react";
+import { View as View2 } from "react-native";
+import Animated2, { useAnimatedStyle } from "react-native-reanimated";
+var LinearProgressIndicator = ({
+  size = 4,
+  color,
+  backgroundColor,
+  value,
+  borderRadius,
+  disableAnimation
+}) => {
+  const progressAnim = useProgressAnimation(value, disableAnimation);
+  const radius = Math.max(0, Math.min(size / 2, borderRadius ?? 0));
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: `${progressAnim.value * 100}%`
+  }));
+  return /* @__PURE__ */ React2.createElement(
+    View2,
+    {
+      style: [
+        styles.track,
+        {
+          height: size,
+          backgroundColor,
+          borderRadius: radius
+        }
+      ]
+    },
+    /* @__PURE__ */ React2.createElement(
+      Animated2.View,
+      {
+        style: [
+          styles.progress,
+          animatedStyle,
+          {
+            backgroundColor: color,
+            borderRadius: radius
+          }
+        ]
+      }
+    )
+  );
+};
+
+// src/components/progress/progress.tsx
+var Progress = (props) => {
+  const {
+    variant = "linear",
+    themeColor = "primary",
+    value,
+    color,
+    backgroundColor,
+    size,
+    disableAnimation = false
+  } = props;
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const mainColor = color ?? colorScheme.main;
+  const trackColor = backgroundColor ?? colorScheme.background;
+  const clampedValue = clampProgress(value);
+  const accessibilityValue = {
+    min: 0,
+    max: 100,
+    now: clampedValue * 100
+  };
+  if (variant === "circular") {
+    const circleSize = size ?? 40;
+    const borderRadius2 = "borderRadius" in props ? props.borderRadius : void 0;
+    return /* @__PURE__ */ React3.createElement(
+      View3,
+      {
+        style: [styles.circleContainer, { width: circleSize, height: circleSize }],
+        accessible: true,
+        accessibilityRole: "progressbar",
+        accessibilityValue
+      },
+      /* @__PURE__ */ React3.createElement(
+        CircularProgressIndicator,
+        {
+          size: circleSize,
+          color: mainColor,
+          backgroundColor: trackColor,
+          value: clampedValue,
+          borderRadius: borderRadius2,
+          disableAnimation
+        }
+      )
+    );
+  }
+  const linearSize = size ?? 4;
+  const borderRadius = "borderRadius" in props ? props.borderRadius : void 0;
+  return /* @__PURE__ */ React3.createElement(
+    View3,
+    {
+      style: styles.container,
+      accessible: true,
+      accessibilityRole: "progressbar",
+      accessibilityValue
+    },
+    /* @__PURE__ */ React3.createElement(
+      LinearProgressIndicator,
+      {
+        size: linearSize,
+        color: mainColor,
+        backgroundColor: trackColor,
+        value: clampedValue,
+        borderRadius,
+        disableAnimation
+      }
+    )
+  );
+};
+export {
+  Progress
+};

package/dist/theme-qvIXI4kF.d.cts

@@ -0,0 +1,3 @@
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+
+export type { ThemeColor as T };

package/dist/theme-qvIXI4kF.d.ts

@@ -0,0 +1,3 @@
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+
+export type { ThemeColor as T };

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@xaui/native",
+  "version": "0.0.2",
+  "description": "Mobile UI components for XUI",
+  "keywords": [
+    "react-native",
+    "mobile",
+    "ui",
+    "components",
+    "xaui"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js",
+      "require": "./dist/core/index.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "import": "./dist/button/index.js",
+      "require": "./dist/button/index.js"
+    },
+    "./progress": {
+      "types": "./dist/progress/index.d.ts",
+      "import": "./dist/progress/index.js",
+      "require": "./dist/progress/index.js"
+    },
+    "./indicator": {
+      "types": "./dist/indicator/index.d.ts",
+      "import": "./dist/indicator/index.js",
+      "require": "./dist/indicator/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rygrams/xaui.git",
+    "directory": "packages/mobile"
+  },
+  "scripts": {
+    "build": "tsup --config tsup.config.ts",
+    "dev": "tsup --config tsup.config.ts --watch",
+    "test": "vitest",
+    "lint": "eslint src/",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@xaui/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-svg": ">=15.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-native": "^0.73.0",
+    "react": "19.1.0",
+    "react-native": "^0.81.5",
+    "react-native-reanimated": "^4.0.0",
+    "react-native-svg": "^15.8.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}