@particle-network/ui-native 0.0.2

package/dist/icons/RadioOnIcon.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import react_native_svg, { ClipPath, Defs, G, Path } from "react-native-svg";
+import { useColors } from "../hooks/index.js";
+const RadioOnIcon_RadioOnIcon = ({ size = 16, color = 'default', ...props })=>{
+    const { getColor } = useColors();
+    const colorValue = getColor(color);
+    return /*#__PURE__*/ jsxs(react_native_svg, {
+        fill: "none",
+        height: size,
+        viewBox: "0 0 16 16",
+        width: size,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs(G, {
+                clipPath: "url(#a)",
+                children: [
+                    /*#__PURE__*/ jsx(Path, {
+                        d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z",
+                        stroke: colorValue,
+                        strokeWidth: 1.2
+                    }),
+                    /*#__PURE__*/ jsx(Path, {
+                        d: "M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
+                        fill: colorValue
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Defs, {
+                children: /*#__PURE__*/ jsx(ClipPath, {
+                    id: "a",
+                    children: /*#__PURE__*/ jsx(Path, {
+                        d: "M0 0h16v16H0z",
+                        fill: "#fff"
+                    })
+                })
+            })
+        ]
+    });
+};
+const RadioOnIcon = RadioOnIcon_RadioOnIcon;
+export { RadioOnIcon as default };

package/dist/icons/types.d.ts

@@ -0,0 +1,6 @@
+import type { SvgProps } from 'react-native-svg';
+import type { UXForegroundColor } from '@particle-network/ui-shared';
+export type IconProps = SvgProps & {
+    size?: number;
+    color?: UXForegroundColor;
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './provider';
+export * from './hooks';
+export * from './theme';
+export type * from './types';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from "./components/index.js";
+export * from "./provider/index.js";
+export * from "./hooks/index.js";
+export * from "./theme/index.js";

package/dist/provider/ThemeContext.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeContextValue } from '../types/theme';
+export declare const ThemeContextProvider: import("react").Provider<ThemeContextValue | undefined>;
+export declare function useThemeContext(): ThemeContextValue;

package/dist/provider/ThemeContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+import { createTheme } from "../theme/index.js";
+const ThemeContext = /*#__PURE__*/ createContext(void 0);
+const ThemeContextProvider = ThemeContext.Provider;
+function useThemeContext() {
+    const context = useContext(ThemeContext);
+    if (!context) return {
+        theme: createTheme('light'),
+        config: {
+            theme: 'light'
+        }
+    };
+    return context;
+}
+export { ThemeContextProvider, useThemeContext };

package/dist/provider/ThemeProvider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { DynamicColors } from '@particle-network/ui-shared';
+import type { ThemeMode } from '../types';
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: ThemeMode;
+    dynamicColors?: DynamicColors;
+    onThemeChange?: (theme: ThemeMode) => void;
+}
+export declare function ThemeProvider({ children, theme, dynamicColors, onThemeChange }: ThemeProviderProps): React.JSX.Element;

package/dist/provider/ThemeProvider.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { createTheme } from "../theme/index.js";
+import { ThemeContextProvider } from "./ThemeContext.js";
+function ThemeProvider({ children, theme = 'light', dynamicColors, onThemeChange }) {
+    const config = useMemo(()=>({
+            theme,
+            dynamicColors
+        }), [
+        theme,
+        dynamicColors
+    ]);
+    const themeObject = useMemo(()=>createTheme(theme, dynamicColors), [
+        theme,
+        dynamicColors
+    ]);
+    const contextValue = useMemo(()=>({
+            theme: themeObject,
+            config,
+            setTheme: onThemeChange
+        }), [
+        themeObject,
+        config,
+        onThemeChange
+    ]);
+    return /*#__PURE__*/ jsx(ThemeContextProvider, {
+        value: contextValue,
+        children: children
+    });
+}
+export { ThemeProvider };

package/dist/provider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ThemeContext';
+export * from './ThemeProvider';

package/dist/provider/index.js

@@ -0,0 +1,2 @@
+export * from "./ThemeContext.js";
+export * from "./ThemeProvider.js";

package/dist/theme/colors.d.ts

@@ -0,0 +1,6 @@
+import { type DynamicColors, type ThemeColors } from '@particle-network/ui-shared';
+export declare const DEFAULT_DYNAMIC_COLORS: {
+    bullish: string;
+    bearish: string;
+};
+export declare function getColors(theme: 'light' | 'dark', dynamicColors?: DynamicColors): ThemeColors;

package/dist/theme/colors.js

@@ -0,0 +1,17 @@
+import { colorMap } from "@particle-network/ui-shared";
+const DEFAULT_DYNAMIC_COLORS = {
+    bullish: '#45B167',
+    bearish: '#E84A5A'
+};
+function getColors(theme, dynamicColors) {
+    const mergedDynamicColors = {
+        ...DEFAULT_DYNAMIC_COLORS,
+        ...dynamicColors
+    };
+    return {
+        ...colorMap[theme],
+        bullish: mergedDynamicColors.bullish,
+        bearish: mergedDynamicColors.bearish
+    };
+}
+export { DEFAULT_DYNAMIC_COLORS, getColors };

package/dist/theme/index.d.ts

@@ -0,0 +1,7 @@
+import type { DynamicColors } from '@particle-network/ui-shared';
+import type { Theme, ThemeMode } from '../types';
+export declare function createTheme(theme: ThemeMode, dynamicColors?: DynamicColors): Theme;
+export * from './colors';
+export * from './opacity';
+export * from './radius';
+export * from './spacing';

package/dist/theme/index.js

@@ -0,0 +1,16 @@
+import { getColors } from "./colors.js";
+import { createRadius } from "./radius.js";
+import { createSpacing } from "./spacing.js";
+export * from "./colors.js";
+export * from "./opacity.js";
+export * from "./radius.js";
+export * from "./spacing.js";
+function createTheme(theme, dynamicColors) {
+    return {
+        theme,
+        colors: getColors(theme, dynamicColors),
+        spacing: createSpacing(),
+        radius: createRadius()
+    };
+}
+export { createTheme };

package/dist/theme/opacity.d.ts

@@ -0,0 +1,2 @@
+export declare const disabledOpacity = 0.4;
+export declare const hoverOpacity = 0.7;

package/dist/theme/opacity.js

@@ -0,0 +1,3 @@
+const disabledOpacity = 0.4;
+const hoverOpacity = 0.7;
+export { disabledOpacity, hoverOpacity };

package/dist/theme/radius.d.ts

@@ -0,0 +1,3 @@
+import { type RadiusScale } from '@particle-network/ui-shared';
+export declare function createRadius(): RadiusScale;
+export declare const radius: RadiusScale;

package/dist/theme/radius.js

@@ -0,0 +1,10 @@
+import { moderateScale } from "react-native-size-matters";
+import { radiusMap } from "@particle-network/ui-shared";
+function createRadius() {
+    return Object.entries(radiusMap).reduce((acc, [key, value])=>{
+        acc[key] = 'full' === key ? value : moderateScale(value);
+        return acc;
+    }, {});
+}
+const radius = createRadius();
+export { createRadius, radius };

package/dist/theme/spacing.d.ts

@@ -0,0 +1,3 @@
+import { type SpacingScale } from '@particle-network/ui-shared';
+export declare function createSpacing(): SpacingScale;
+export declare const spacing: SpacingScale;

package/dist/theme/spacing.js

@@ -0,0 +1,10 @@
+import { ms } from "react-native-size-matters";
+import { spacingMap } from "@particle-network/ui-shared";
+function createSpacing() {
+    return Object.entries(spacingMap).reduce((acc, [key, value])=>{
+        acc[key] = ms(value);
+        return acc;
+    }, {});
+}
+const spacing = createSpacing();
+export { createSpacing, spacing };

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export type * from './theme';

package/dist/types/theme.d.ts

@@ -0,0 +1,17 @@
+import type { DynamicColors, RadiusScale, SpacingScale, ThemeColors } from '@particle-network/ui-shared';
+export type ThemeMode = 'light' | 'dark';
+export interface ThemeConfig {
+    theme: ThemeMode;
+    dynamicColors?: DynamicColors;
+}
+export interface Theme {
+    theme: ThemeMode;
+    colors: ThemeColors;
+    spacing: SpacingScale;
+    radius: RadiusScale;
+}
+export interface ThemeContextValue {
+    theme: Theme;
+    config: ThemeConfig;
+    setTheme?: (theme: ThemeMode) => void;
+}

package/dist/utils/triggerHapticFeedback.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Triggers haptic feedback based on the given style.
+ * @param style - The feedback style, can be 'light', 'medium', or 'heavy'.
+ */
+export declare const triggerHapticFeedback: (style?: "light" | "medium" | "heavy") => Promise<void>;

package/dist/utils/triggerHapticFeedback.js

@@ -0,0 +1,16 @@
+import { ImpactFeedbackStyle, impactAsync } from "expo-haptics";
+const triggerHapticFeedback = async (style = 'light')=>{
+    try {
+        const feedbackStyleMap = {
+            light: ImpactFeedbackStyle.Light,
+            medium: ImpactFeedbackStyle.Medium,
+            heavy: ImpactFeedbackStyle.Heavy
+        };
+        const feedbackStyle = feedbackStyleMap[style];
+        if (feedbackStyle) await impactAsync(feedbackStyle);
+        else console.warn(`Invalid haptic feedback style: ${style}`);
+    } catch (error) {
+        console.error('Failed to trigger haptic feedback:', error);
+    }
+};
+export { triggerHapticFeedback };

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@particle-network/ui-native",
+  "version": "0.0.2",
+  "license": "MIT",
+  "main": "./entry.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "storybook dev -p 6006",
+    "storybook:build": "storybook build --docs",
+    "storybook:preview": "serve storybook-static",
+    "storybook:generate": "sb-rn-get-stories",
+    "type-check": "npx tsc --noEmit -p ./tsconfig.json",
+    "build": "rslib build",
+    "build:watch": "rslib build --watch",
+    "publish": "./scripts/publish.sh",
+    "publish:patch": "npm version patch && yarn publish",
+    "publish:minor": "npm version minor && yarn publish",
+    "publish:major": "npm version major && yarn publish",
+    "lint": "eslint . --no-error-on-unmatched-pattern --quiet",
+    "lint:fix": "eslint . --fix --no-error-on-unmatched-pattern --quiet",
+    "clean": "rm -rf .turbo node_modules dist"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.minijoy.work/frontend/ux-design",
+    "directory": "packages/ui-react-native"
+  },
+  "keywords": [
+    "react-native",
+    "ui-components",
+    "design-system",
+    "expo",
+    "typescript"
+  ],
+  "author": "UniversalX",
+  "dependencies": {
+    "@particle-network/ui-shared": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.25.4",
+    "@chromatic-com/storybook": "^4.0.0",
+    "@expo/metro-runtime": "~5.0.4",
+    "@gorhom/bottom-sheet": "^5.1.2",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/datetimepicker": "8.4.1",
+    "@react-native-community/slider": "4.5.6",
+    "@particle-network/eslint-config": "*",
+    "@rsbuild/core": "^1.5.0",
+    "@rsbuild/plugin-react": "^1.3.5",
+    "@rslib/core": "^0.12.2",
+    "@storybook/addon-docs": "^9",
+    "@storybook/addon-ondevice-actions": "^9",
+    "@storybook/addon-ondevice-backgrounds": "^9",
+    "@storybook/addon-ondevice-controls": "^9",
+    "@storybook/addon-ondevice-notes": "^9",
+    "@storybook/react": "^9",
+    "@storybook/react-native": "^9",
+    "@storybook/react-native-web-vite": "^9",
+    "@types/react": "~19.0.10",
+    "ahooks": "^3.9.4",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-react-docgen-typescript": "^1.5.1",
+    "cross-env": "^7.0.3",
+    "expo": "~53.0.22",
+    "expo-constants": "~17.1.6",
+    "expo-haptics": "^14.1.4",
+    "expo-status-bar": "~2.2.3",
+    "lucide-react-native": "^0.541.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-paper": "^5.14.5",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-size-matters": "^0.4.2",
+    "react-native-svg": "15.11.2",
+    "react-native-web": "^0.20.0",
+    "storybook": "^9",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5"
+  },
+  "resolutions": {
+    "react-docgen-typescript": "2.2.2",
+    "react-native-web": "^0.20.0",
+    "unfetch": "^4.2.0"
+  },
+  "overrides": {
+    "react-docgen-typescript": "2.2.2",
+    "react-native-web": "^0.20.0",
+    "unfetch": "^4.2.0"
+  },
+  "expo": {
+    "doctor": {
+      "reactNativeDirectoryCheck": {
+        "listUnknownPackages": false
+      }
+    }
+  }
+}