From 98609811a95c14f14640cbb34bd71740d3e7bf3d Mon Sep 17 00:00:00 2001
From: Agustin Oberg <agustin.oberg@gmail.com>
Date: Tue, 1 Jul 2025 19:02:26 -0300
Subject: [PATCH 1/2] feat: add CircleProgress component

---
 apps/demo/app/_layout.tsx                     |   4 +
 apps/demo/app/components/CircleProgress.tsx   |  34 +++
 apps/demo/app/index.tsx                       |   1 +
 component-notes.json                          |   8 +
 .../rn/@types/react-native-svg/index.d.ts     |  14 ++
 packages/rn/components/ui/circle-progress.tsx | 218 +++++++++++++++++
 packages/rn/index.ts                          |   1 +
 packages/rn/tsconfig.json                     |   2 +-
 .../@types/react-native-svg/index.d.ts        |  12 +
 .../components/ui/circle-progress.tsx         | 221 ++++++++++++++++++
 packages/unistyles/index.ts                   |   1 +
 packages/unistyles/tsconfig.json              |   2 +-
 12 files changed, 516 insertions(+), 2 deletions(-)
 create mode 100644 apps/demo/app/components/CircleProgress.tsx
 create mode 100644 packages/rn/@types/react-native-svg/index.d.ts
 create mode 100644 packages/rn/components/ui/circle-progress.tsx
 create mode 100644 packages/unistyles/@types/react-native-svg/index.d.ts
 create mode 100644 packages/unistyles/components/ui/circle-progress.tsx

diff --git a/apps/demo/app/_layout.tsx b/apps/demo/app/_layout.tsx
index e122f82..aa96dbd 100644
--- a/apps/demo/app/_layout.tsx
+++ b/apps/demo/app/_layout.tsx
@@ -43,6 +43,10 @@ const App = () => {
         name="components/Progress"
         options={{ title: "Progress" }}
       />
+      <Stack.Screen
+        name="components/CircleProgress"
+        options={{ title: "Circle Progress" }}
+      />
       <Stack.Screen
         name="components/Skeleton"
         options={{ title: "Skeleton" }}
diff --git a/apps/demo/app/components/CircleProgress.tsx b/apps/demo/app/components/CircleProgress.tsx
new file mode 100644
index 0000000..febfb77
--- /dev/null
+++ b/apps/demo/app/components/CircleProgress.tsx
@@ -0,0 +1,34 @@
+import { ScrollView, View } from 'react-native';
+import { CircleProgress, AnimatedCircleProgress, Text, Button } from '@leshi/ui-rn';
+import { useState } from 'react';
+
+export default function CircleProgressScreen() {
+  const [value, setValue] = useState(30);
+  return (
+    <ScrollView contentContainerStyle={{ padding: 16 }}>
+      <Text weight="bold" size="xl" style={{ marginBottom: 4 }}>
+        Circle Progress
+      </Text>
+      <Text style={{ marginBottom: 12 }}>
+        Circular indicator built with react-native-svg.
+      </Text>
+      <View style={{ alignItems: 'center', marginBottom: 16 }}>
+        <AnimatedCircleProgress
+          size={120}
+          width={12}
+          fill={value}
+          tintColor="#00e0ff"
+          backgroundColor="#3d5875"
+        >{(fill) => <Text>{Math.round(fill)}</Text>}</AnimatedCircleProgress>
+        <View style={{ flexDirection: 'row', marginTop: 12 }}>
+          <Button text="-" size="icon" onPress={() => setValue((v) => Math.max(0, v - 10))} style={{ marginRight: 8 }} />
+          <Button text="+" size="icon" onPress={() => setValue((v) => Math.min(100, v + 10))} />
+        </View>
+      </View>
+      <Text weight="bold" size="lg" style={{ marginBottom: 8 }}>
+        Static
+      </Text>
+      <CircleProgress size={100} width={10} fill={75} tintColor="#4ade80" backgroundColor="#e2e8f0" style={{ marginBottom: 12 }} />
+    </ScrollView>
+  );
+}
diff --git a/apps/demo/app/index.tsx b/apps/demo/app/index.tsx
index fdb8309..3c29e7a 100644
--- a/apps/demo/app/index.tsx
+++ b/apps/demo/app/index.tsx
@@ -13,6 +13,7 @@ const componentScreens = [
   { name: "Dialog", href: "/components/Dialog" },
   { name: "Modal", href: "/components/Modal" },
   { name: "Progress", href: "/components/Progress" },
+  { name: "CircleProgress", href: "/components/CircleProgress" },
   { name: "Skeleton", href: "/components/Skeleton" },
   { name: "Surface", href: "/components/Surface" },
   { name: "Switch", href: "/components/Switch" },
diff --git a/component-notes.json b/component-notes.json
index 2ed4c59..b6351e0 100644
--- a/component-notes.json
+++ b/component-notes.json
@@ -124,6 +124,14 @@
     ],
     "example": "import { Progress } from './components/ui/progress';\n\n<Progress value={60} max={100} />\n<Progress value={progress} variant=\"success\" />"
   },
+  "circle-progress": {
+    "dependencies": [],
+    "externalDeps": ["react-native-svg", "react-native-reanimated"],
+    "setup": [
+      "Install external dependency: bun add react-native-svg react-native-reanimated"
+    ],
+    "example": "import { CircleProgress } from './components/ui/circle-progress';\n\n<CircleProgress size={120} width={12} fill={75} tintColor='#00e0ff' backgroundColor='#3d5875' />"
+  },
   "switch": {
     "dependencies": [],
     "externalDeps": ["react-native-reanimated"],
diff --git a/packages/rn/@types/react-native-svg/index.d.ts b/packages/rn/@types/react-native-svg/index.d.ts
new file mode 100644
index 0000000..12b996d
--- /dev/null
+++ b/packages/rn/@types/react-native-svg/index.d.ts
@@ -0,0 +1,14 @@
+declare module 'react-native-svg' {
+  import * as React from 'react';
+  import { ViewProps } from 'react-native';
+
+  export interface SvgProps extends ViewProps {
+    width?: number | string;
+    height?: number | string;
+  }
+
+  export const Svg: React.FC<SvgProps>;
+  export const Path: React.FC<any>;
+  export const G: React.FC<any>;
+  export default Svg;
+}
diff --git a/packages/rn/components/ui/circle-progress.tsx b/packages/rn/components/ui/circle-progress.tsx
new file mode 100644
index 0000000..0348f17
--- /dev/null
+++ b/packages/rn/components/ui/circle-progress.tsx
@@ -0,0 +1,218 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
+import Svg, { G, Path } from 'react-native-svg';
+import Animated, {
+  useSharedValue,
+  withTiming,
+  withDelay,
+  useAnimatedProps,
+  useAnimatedReaction,
+  runOnJS,
+  interpolateColor,
+  Easing,
+} from 'react-native-reanimated';
+
+interface DashConfig { width: number; gap: number; }
+
+export interface CircleProgressProps extends Omit<ViewProps, 'children'> {
+  size: number;
+  width: number;
+  backgroundWidth?: number;
+  fill?: number;
+  tintColor?: string;
+  tintColorSecondary?: string;
+  backgroundColor?: string;
+  rotation?: number;
+  lineCap?: 'butt' | 'round' | 'square';
+  arcSweepAngle?: number;
+  children?: (fill: number) => React.ReactNode;
+  childrenContainerStyle?: StyleProp<ViewStyle>;
+  padding?: number;
+  dashedBackground?: DashConfig;
+  dashedTint?: DashConfig;
+  renderCap?: (payload: { center: { x: number; y: number } }) => React.ReactNode;
+}
+
+export interface AnimatedCircleProgressProps extends CircleProgressProps {
+  prefill?: number;
+  duration?: number;
+  delay?: number;
+  easing?: (value: number) => number;
+  onAnimationComplete?: (finished: boolean) => void;
+  onFillChange?: (value: number) => void;
+}
+
+const polarToCartesian = (
+  centerX: number,
+  centerY: number,
+  radius: number,
+  angleInDegrees: number,
+) => {
+  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+  return {
+    x: centerX + radius * Math.cos(angleInRadians),
+    y: centerY + radius * Math.sin(angleInRadians),
+  };
+};
+
+const circlePath = (
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+) => {
+  const start = polarToCartesian(x, y, radius, endAngle * 0.9999999);
+  const end = polarToCartesian(x, y, radius, startAngle);
+  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+  return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`;
+};
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+export const CircleProgress = ({
+  size,
+  width,
+  backgroundWidth,
+  fill = 0,
+  tintColor = 'black',
+  tintColorSecondary,
+  backgroundColor,
+  rotation = 90,
+  lineCap = 'butt',
+  arcSweepAngle = 360,
+  style,
+  children,
+  childrenContainerStyle,
+  padding = 0,
+  dashedBackground = { width: 0, gap: 0 },
+  dashedTint = { width: 0, gap: 0 },
+  renderCap,
+  ...rest
+}: CircleProgressProps) => {
+  const clamped = Math.max(0, Math.min(fill, 100));
+  const fillValue = useSharedValue(clamped);
+  const [jsFill, setJsFill] = useState(clamped);
+  const maxWidthCircle = backgroundWidth ? Math.max(width, backgroundWidth) : width;
+  const radius = size / 2 - maxWidthCircle / 2 - padding / 2;
+  const center = size / 2 + padding / 2;
+
+  useEffect(() => {
+    fillValue.value = clamped;
+  }, [clamped, fillValue]);
+
+  useAnimatedReaction(
+    () => fillValue.value,
+    (v) => runOnJS(setJsFill)(v),
+  );
+
+  const animatedProps = useAnimatedProps(() => {
+    const current = (arcSweepAngle * fillValue.value) / 100;
+    const stroke = tintColorSecondary
+      ? (interpolateColor(
+          fillValue.value,
+          [0, 100],
+          [tintColor, tintColorSecondary],
+        ) as string)
+      : tintColor;
+    return {
+      d: circlePath(center, center, radius, 0, current),
+      stroke,
+    };
+  });
+
+  const backgroundPath = circlePath(center, center, radius, 0, arcSweepAngle);
+
+  const strokeDashTint =
+    dashedTint.gap > 0 ? [dashedTint.width, dashedTint.gap] : undefined;
+  const strokeDashBg =
+    dashedBackground.gap > 0 ? [dashedBackground.width, dashedBackground.gap] : undefined;
+
+  const childOffset = size - maxWidthCircle * 2;
+
+  const childStyle = StyleSheet.compose(
+    {
+      position: 'absolute',
+      left: maxWidthCircle + padding / 2,
+      top: maxWidthCircle + padding / 2,
+      width: childOffset,
+      height: childOffset,
+      borderRadius: childOffset / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+    },
+    childrenContainerStyle,
+  );
+
+  const capPosition = polarToCartesian(
+    center,
+    center,
+    radius,
+    (arcSweepAngle * jsFill) / 100,
+  );
+
+  return (
+    <View style={style} {...rest}>
+      <Svg width={size + padding} height={size + padding}>
+        <G rotation={rotation} originX={(size + padding) / 2} originY={(size + padding) / 2}>
+          {backgroundColor && (
+            <Path
+              d={backgroundPath}
+              stroke={backgroundColor}
+              strokeWidth={backgroundWidth ?? width}
+              strokeLinecap={lineCap}
+              strokeDasharray={strokeDashBg}
+              fill="transparent"
+            />
+          )}
+          <AnimatedPath
+            animatedProps={animatedProps}
+            strokeWidth={width}
+            strokeLinecap={lineCap}
+            strokeDasharray={strokeDashTint}
+            fill="transparent"
+          />
+          {renderCap && renderCap({ center: capPosition })}
+        </G>
+      </Svg>
+      {children && <View style={childStyle}>{children(jsFill)}</View>}
+    </View>
+  );
+};
+
+export const AnimatedCircleProgress = ({
+  prefill = 0,
+  duration = 500,
+  delay = 0,
+  easing = Easing.out(Easing.ease),
+  onAnimationComplete,
+  onFillChange,
+  fill = 0,
+  ...rest
+}: AnimatedCircleProgressProps) => {
+  const progress = useSharedValue(prefill);
+  const [display, setDisplay] = useState(prefill);
+
+  useEffect(() => {
+    progress.value = withDelay(
+      delay,
+      withTiming(fill, { duration, easing }, (finished?: boolean) => {
+        if (onAnimationComplete) {
+          runOnJS(onAnimationComplete)(!!finished);
+        }
+      }),
+    );
+  }, [fill, duration, easing, delay, onAnimationComplete, progress]);
+
+  useAnimatedReaction(
+    () => progress.value,
+    (v) => {
+      runOnJS(setDisplay)(v);
+      if (onFillChange) runOnJS(onFillChange)(v);
+    },
+  );
+
+  return <CircleProgress {...rest} fill={display} />;
+};
diff --git a/packages/rn/index.ts b/packages/rn/index.ts
index 0438c90..fcb31e5 100644
--- a/packages/rn/index.ts
+++ b/packages/rn/index.ts
@@ -7,6 +7,7 @@ export { Checkbox } from './components/ui/checkbox';
 export { Dialog } from './components/ui/dialog';
 export { Modal, ModalProvider } from './components/ui/modal';
 export { Progress } from './components/ui/progress';
+export { CircleProgress, AnimatedCircleProgress } from './components/ui/circle-progress';
 export { Skeleton } from './components/ui/skeleton';
 export { Spinner } from './components/ui/spinner';
 export { Divider } from './components/ui/divider';
diff --git a/packages/rn/tsconfig.json b/packages/rn/tsconfig.json
index d5e52d1..c6f8092 100644
--- a/packages/rn/tsconfig.json
+++ b/packages/rn/tsconfig.json
@@ -23,7 +23,7 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false,
-    "types": [],
+    "typeRoots": ["./@types"],
     "baseUrl": "./",
     "paths": {
       "@/*": ["./*"]
diff --git a/packages/unistyles/@types/react-native-svg/index.d.ts b/packages/unistyles/@types/react-native-svg/index.d.ts
new file mode 100644
index 0000000..02bd87b
--- /dev/null
+++ b/packages/unistyles/@types/react-native-svg/index.d.ts
@@ -0,0 +1,12 @@
+declare module 'react-native-svg' {
+  import * as React from 'react';
+  import { ViewProps } from 'react-native';
+  export interface SvgProps extends ViewProps {
+    width?: number | string;
+    height?: number | string;
+  }
+  export const Svg: React.FC<SvgProps>;
+  export const Path: React.FC<any>;
+  export const G: React.FC<any>;
+  export default Svg;
+}
diff --git a/packages/unistyles/components/ui/circle-progress.tsx b/packages/unistyles/components/ui/circle-progress.tsx
new file mode 100644
index 0000000..38a2e8e
--- /dev/null
+++ b/packages/unistyles/components/ui/circle-progress.tsx
@@ -0,0 +1,221 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet as RNStyleSheet } from 'react-native';
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
+import Svg, { G, Path } from 'react-native-svg';
+import Animated, {
+  useSharedValue,
+  withTiming,
+  withDelay,
+  useAnimatedProps,
+  useAnimatedReaction,
+  runOnJS,
+  interpolateColor,
+  Easing,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../styles/context';
+
+interface DashConfig { width: number; gap: number; }
+
+export interface CircleProgressProps extends Omit<ViewProps, 'children'> {
+  size: number;
+  width: number;
+  backgroundWidth?: number;
+  fill?: number;
+  tintColor?: string;
+  tintColorSecondary?: string;
+  backgroundColor?: string;
+  rotation?: number;
+  lineCap?: 'butt' | 'round' | 'square';
+  arcSweepAngle?: number;
+  children?: (fill: number) => React.ReactNode;
+  childrenContainerStyle?: StyleProp<ViewStyle>;
+  padding?: number;
+  dashedBackground?: DashConfig;
+  dashedTint?: DashConfig;
+  renderCap?: (payload: { center: { x: number; y: number } }) => React.ReactNode;
+}
+
+export interface AnimatedCircleProgressProps extends CircleProgressProps {
+  prefill?: number;
+  duration?: number;
+  delay?: number;
+  easing?: (value: number) => number;
+  onAnimationComplete?: (finished: boolean) => void;
+  onFillChange?: (value: number) => void;
+}
+
+const polarToCartesian = (
+  centerX: number,
+  centerY: number,
+  radius: number,
+  angleInDegrees: number,
+) => {
+  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+  return {
+    x: centerX + radius * Math.cos(angleInRadians),
+    y: centerY + radius * Math.sin(angleInRadians),
+  };
+};
+
+const circlePath = (
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+) => {
+  const start = polarToCartesian(x, y, radius, endAngle * 0.9999999);
+  const end = polarToCartesian(x, y, radius, startAngle);
+  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+  return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`;
+};
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+export const CircleProgress = ({
+  size,
+  width,
+  backgroundWidth,
+  fill = 0,
+  tintColor,
+  tintColorSecondary,
+  backgroundColor,
+  rotation = 90,
+  lineCap = 'butt',
+  arcSweepAngle = 360,
+  style,
+  children,
+  childrenContainerStyle,
+  padding = 0,
+  dashedBackground = { width: 0, gap: 0 },
+  dashedTint = { width: 0, gap: 0 },
+  renderCap,
+  ...rest
+}: CircleProgressProps) => {
+  const theme = useTheme();
+  const clamped = Math.max(0, Math.min(fill, 100));
+  const fillValue = useSharedValue(clamped);
+  const [jsFill, setJsFill] = useState(clamped);
+  const maxWidthCircle = backgroundWidth ? Math.max(width, backgroundWidth) : width;
+  const radius = size / 2 - maxWidthCircle / 2 - padding / 2;
+  const center = size / 2 + padding / 2;
+
+  useEffect(() => {
+    fillValue.value = clamped;
+  }, [clamped, fillValue]);
+
+  useAnimatedReaction(
+    () => fillValue.value,
+    (v) => runOnJS(setJsFill)(v),
+  );
+
+  const animatedProps = useAnimatedProps(() => {
+    const current = (arcSweepAngle * fillValue.value) / 100;
+    const stroke = tintColorSecondary
+      ? (interpolateColor(
+          fillValue.value,
+          [0, 100],
+          [tintColor ?? theme.colors.primary, tintColorSecondary],
+        ) as string)
+      : tintColor ?? theme.colors.primary;
+    return {
+      d: circlePath(center, center, radius, 0, current),
+      stroke,
+    };
+  });
+
+  const backgroundPath = circlePath(center, center, radius, 0, arcSweepAngle);
+
+  const strokeDashTint =
+    dashedTint.gap > 0 ? [dashedTint.width, dashedTint.gap] : undefined;
+  const strokeDashBg =
+    dashedBackground.gap > 0 ? [dashedBackground.width, dashedBackground.gap] : undefined;
+
+  const childOffset = size - maxWidthCircle * 2;
+
+  const childStyle = RNStyleSheet.compose(
+    {
+      position: 'absolute',
+      left: maxWidthCircle + padding / 2,
+      top: maxWidthCircle + padding / 2,
+      width: childOffset,
+      height: childOffset,
+      borderRadius: childOffset / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+    },
+    childrenContainerStyle,
+  );
+
+  const capPosition = polarToCartesian(
+    center,
+    center,
+    radius,
+    (arcSweepAngle * jsFill) / 100,
+  );
+
+  return (
+    <View style={style} {...rest}>
+      <Svg width={size + padding} height={size + padding}>
+        <G rotation={rotation} originX={(size + padding) / 2} originY={(size + padding) / 2}>
+          {backgroundColor && (
+            <Path
+              d={backgroundPath}
+              stroke={backgroundColor}
+              strokeWidth={backgroundWidth ?? width}
+              strokeLinecap={lineCap}
+              strokeDasharray={strokeDashBg}
+              fill="transparent"
+            />
+          )}
+          <AnimatedPath
+            animatedProps={animatedProps}
+            strokeWidth={width}
+            strokeLinecap={lineCap}
+            strokeDasharray={strokeDashTint}
+            fill="transparent"
+          />
+          {renderCap && renderCap({ center: capPosition })}
+        </G>
+      </Svg>
+      {children && <View style={childStyle}>{children(jsFill)}</View>}
+    </View>
+  );
+};
+
+export const AnimatedCircleProgress = ({
+  prefill = 0,
+  duration = 500,
+  delay = 0,
+  easing = Easing.out(Easing.ease),
+  onAnimationComplete,
+  onFillChange,
+  fill = 0,
+  ...rest
+}: AnimatedCircleProgressProps) => {
+  const progress = useSharedValue(prefill);
+  const [display, setDisplay] = useState(prefill);
+
+  useEffect(() => {
+    progress.value = withDelay(
+      delay,
+      withTiming(fill, { duration, easing }, (finished?: boolean) => {
+        if (onAnimationComplete) {
+          runOnJS(onAnimationComplete)(!!finished);
+        }
+      }),
+    );
+  }, [fill, duration, easing, delay, onAnimationComplete, progress]);
+
+  useAnimatedReaction(
+    () => progress.value,
+    (v) => {
+      runOnJS(setDisplay)(v);
+      if (onFillChange) runOnJS(onFillChange)(v);
+    },
+  );
+
+  return <CircleProgress {...rest} fill={display} />;
+};
diff --git a/packages/unistyles/index.ts b/packages/unistyles/index.ts
index 1017f1c..82a5d41 100644
--- a/packages/unistyles/index.ts
+++ b/packages/unistyles/index.ts
@@ -14,6 +14,7 @@ export { Checkbox } from "./components/ui/checkbox";
 export { Dialog } from "./components/ui/dialog";
 export { Modal, ModalProvider } from "./components/ui/modal";
 export { Progress } from "./components/ui/progress";
+export { CircleProgress, AnimatedCircleProgress } from "./components/ui/circle-progress";
 export { Divider } from "./components/ui/divider";
 export { Surface } from "./components/ui/surface";
 export { Switch } from "./components/ui/switch";
diff --git a/packages/unistyles/tsconfig.json b/packages/unistyles/tsconfig.json
index d5e52d1..c6f8092 100644
--- a/packages/unistyles/tsconfig.json
+++ b/packages/unistyles/tsconfig.json
@@ -23,7 +23,7 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false,
-    "types": [],
+    "typeRoots": ["./@types"],
     "baseUrl": "./",
     "paths": {
       "@/*": ["./*"]

From 9160f55c2c256e559d5e369475d13a980469c381 Mon Sep 17 00:00:00 2001
From: Agustin Oberg <agustin.oberg@gmail.com>
Date: Tue, 1 Jul 2025 19:17:10 -0300
Subject: [PATCH 2/2] Use theme colors in CircleProgress

---
 apps/demo/app/components/CircleProgress.tsx   | 22 +++++++++++++++----
 component-notes.json                          |  2 +-
 packages/rn/components/ui/circle-progress.tsx |  8 ++++---
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/apps/demo/app/components/CircleProgress.tsx b/apps/demo/app/components/CircleProgress.tsx
index febfb77..5a7f2fb 100644
--- a/apps/demo/app/components/CircleProgress.tsx
+++ b/apps/demo/app/components/CircleProgress.tsx
@@ -1,9 +1,16 @@
 import { ScrollView, View } from 'react-native';
-import { CircleProgress, AnimatedCircleProgress, Text, Button } from '@leshi/ui-rn';
+import {
+  CircleProgress,
+  AnimatedCircleProgress,
+  Text,
+  Button,
+  useTheme,
+} from '@leshi/ui-rn';
 import { useState } from 'react';
 
 export default function CircleProgressScreen() {
   const [value, setValue] = useState(30);
+  const { colors } = useTheme();
   return (
     <ScrollView contentContainerStyle={{ padding: 16 }}>
       <Text weight="bold" size="xl" style={{ marginBottom: 4 }}>
@@ -17,8 +24,8 @@ export default function CircleProgressScreen() {
           size={120}
           width={12}
           fill={value}
-          tintColor="#00e0ff"
-          backgroundColor="#3d5875"
+          tintColor={colors.primary}
+          backgroundColor={colors.muted}
         >{(fill) => <Text>{Math.round(fill)}</Text>}</AnimatedCircleProgress>
         <View style={{ flexDirection: 'row', marginTop: 12 }}>
           <Button text="-" size="icon" onPress={() => setValue((v) => Math.max(0, v - 10))} style={{ marginRight: 8 }} />
@@ -28,7 +35,14 @@ export default function CircleProgressScreen() {
       <Text weight="bold" size="lg" style={{ marginBottom: 8 }}>
         Static
       </Text>
-      <CircleProgress size={100} width={10} fill={75} tintColor="#4ade80" backgroundColor="#e2e8f0" style={{ marginBottom: 12 }} />
+      <CircleProgress
+        size={100}
+        width={10}
+        fill={75}
+        tintColor={colors.primary}
+        backgroundColor={colors.muted}
+        style={{ marginBottom: 12 }}
+      />
     </ScrollView>
   );
 }
diff --git a/component-notes.json b/component-notes.json
index b6351e0..7984ea9 100644
--- a/component-notes.json
+++ b/component-notes.json
@@ -130,7 +130,7 @@
     "setup": [
       "Install external dependency: bun add react-native-svg react-native-reanimated"
     ],
-    "example": "import { CircleProgress } from './components/ui/circle-progress';\n\n<CircleProgress size={120} width={12} fill={75} tintColor='#00e0ff' backgroundColor='#3d5875' />"
+    "example": "import { CircleProgress } from './components/ui/circle-progress';\n\n<CircleProgress size={120} width={12} fill={75} />"
   },
   "switch": {
     "dependencies": [],
diff --git a/packages/rn/components/ui/circle-progress.tsx b/packages/rn/components/ui/circle-progress.tsx
index 0348f17..42dc96a 100644
--- a/packages/rn/components/ui/circle-progress.tsx
+++ b/packages/rn/components/ui/circle-progress.tsx
@@ -12,6 +12,7 @@ import Animated, {
   interpolateColor,
   Easing,
 } from 'react-native-reanimated';
+import { useTheme } from '../../styles/theme';
 
 interface DashConfig { width: number; gap: number; }
 
@@ -76,7 +77,7 @@ export const CircleProgress = ({
   width,
   backgroundWidth,
   fill = 0,
-  tintColor = 'black',
+  tintColor,
   tintColorSecondary,
   backgroundColor,
   rotation = 90,
@@ -91,6 +92,7 @@ export const CircleProgress = ({
   renderCap,
   ...rest
 }: CircleProgressProps) => {
+  const theme = useTheme();
   const clamped = Math.max(0, Math.min(fill, 100));
   const fillValue = useSharedValue(clamped);
   const [jsFill, setJsFill] = useState(clamped);
@@ -113,9 +115,9 @@ export const CircleProgress = ({
       ? (interpolateColor(
           fillValue.value,
           [0, 100],
-          [tintColor, tintColorSecondary],
+          [tintColor ?? theme.colors.primary, tintColorSecondary],
         ) as string)
-      : tintColor;
+      : tintColor ?? theme.colors.primary;
     return {
       d: circlePath(center, center, radius, 0, current),
       stroke,