feat(scroll-to-hide): add resetPosition function to ScrollToHideProvider

Add resetPosition function to reset scroll position with animation
Update documentation to reflect package name changes and new feature
Bump rnc-theme version to 0.1.1

Author: masumrpg

apps/docs/src/content/docs/hooks/use-scroll-to-hide.mdx

@@ -19,7 +19,7 @@ The `ScrollToHideProvider` is automatically integrated into the `RNCProvider`. Y
 
 ### Basic Usage
 
-<Code code={`import { RNCProvider } from 'your-package';
+<Code code={`import { RNCProvider } from 'rnc-theme';
 
 function App() {
   return (
@@ -34,26 +34,6 @@ function App() {
   );
 }`} lang="tsx" title="App.tsx" />
 
-### Standalone Usage (Not Recommended)
-
-If you need to use `ScrollToHideProvider` outside of `RNCProvider`, you can import it directly:
-
-<Code code={`import { ScrollToHideProvider } from 'your-package/contexts/ScrollToHideProvider';
-
-function StandaloneApp() {
-  return (
-    <ScrollToHideProvider
-      headerHeight={100}
-      tabBarHeight={60}
-    >
-      <YourScreenContent />
-    </ScrollToHideProvider>
-  );
-}`} lang="tsx" title="StandaloneApp.tsx" />
-
-<Aside type="caution" title="Not Recommended">
-Using `ScrollToHideProvider` standalone means you'll miss out on theme integration and other RNCProvider features. Always prefer using it through `RNCProvider` with `scrollToHideProps`.
-</Aside>
 
 ### Props
 
@@ -123,11 +103,15 @@ The main hook for accessing scroll-to-hide functionality and animated values.
   <Card title="onScrollRegular: ScrollHandler" icon="down-caret">
     Regular scroll handler for use with standard ScrollView components.
   </Card>
+
+  <Card title="resetPosition: ResetPosition" icon="seti:crystal">
+    Reset to the initial scroll position.
+  </Card>
 </CardGrid>
 
 ### Usage Example
 
-<Code code={`import { useScrollToHide } from 'your-package';
+<Code code={`import { useScrollToHide } from 'rnc-theme';
 import Animated from 'react-native-reanimated';
 
 function MyScreen() {
@@ -206,7 +190,7 @@ A lightweight hook that only returns the current scroll values without the full
 
 ### Usage Example
 
-<Code code={`import { useScrollValues } from 'your-package';
+<Code code={`import { useScrollValues } from 'rnc-theme';
 
 function ScrollIndicator() {
   const { scrollValue, clampedValue } = useScrollValues();
@@ -223,7 +207,7 @@ function ScrollIndicator() {
 
 ### With Animated.FlatList
 
-<Code code={`import { useScrollToHide } from 'your-package';
+<Code code={`import { useScrollToHide } from 'rnc-theme';
 import Animated from 'react-native-reanimated';
 
 function AnimatedFlatListExample() {
@@ -259,7 +243,7 @@ function AnimatedFlatListExample() {
 
 ### With Regular ScrollView
 
-<Code code={`import { useScrollToHide } from 'your-package';
+<Code code={`import { useScrollToHide } from 'rnc-theme';
 import { ScrollView } from 'react-native';
 
 function RegularScrollViewExample() {
@@ -288,7 +272,7 @@ function RegularScrollViewExample() {
 
 ### Custom Animation Logic
 
-<Code code={`import { useScrollToHide } from 'your-package';
+<Code code={`import { useScrollToHide } from 'rnc-theme';
 import { interpolate, useDerivedValue } from 'react-native-reanimated';
 
 function CustomAnimationExample() {
@@ -457,8 +441,8 @@ function App() {
 
 The components provide full TypeScript support with proper type definitions:
 
-<Code code={`import { useScrollToHide, ScrollToHideProvider } from 'your-package';
-import type { ScrollToHideProviderProps } from 'your-package';
+<Code code={`import { useScrollToHide, ScrollToHideProvider } from 'rnc-theme';
+import type { ScrollToHideProviderProps } from 'rnc-theme';
 
 // Provider props are fully typed
 const providerProps: ScrollToHideProviderProps = {

apps/docs/src/content/docs/hooks/use-theme.mdx

@@ -16,7 +16,7 @@ The `useTheme` hook is the primary interface for accessing and managing theme fu
 
 ### Basic Usage
 
-<Code code={`import { useTheme } from 'your-theme-package';
+<Code code={`import { useTheme } from 'rnc-theme';
 
 function MyComponent() {
   const { theme, isDark, setThemeMode } = useTheme();
@@ -231,8 +231,8 @@ function App() {
 
 The hook is fully typed and provides excellent IntelliSense support:
 
-<Code code={`import { useTheme } from 'your-theme-package';
-import type { Theme, ThemeMode } from 'your-theme-package/types';
+<Code code={`import { useTheme } from 'rnc-theme';
+import type { Theme, ThemeMode } from 'rnc-theme';
 
 function TypedComponent() {
   const {

apps/docs/src/content/docs/hooks/use-themed-styles.mdx

@@ -16,7 +16,7 @@ The `useThemedStyles` hook provides a performant way to create theme-aware style
 
 ### Basic Usage
 
-<Code code={`import { useThemedStyles } from 'your-theme-package';
+<Code code={`import { useThemedStyles } from 'rnc-theme';
 
 function MyComponent() {
   const styles = useThemedStyles((theme) => ({

libs/rnc-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnc-theme",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "funding": {
     "type": "github",
     "url": "https://github.com/masumrpg/react-native-components"

libs/rnc-theme/src/lib/context/ScrollToHideProvider.tsx

@@ -10,6 +10,7 @@ import {
   useAnimatedScrollHandler,
   useDerivedValue,
   useSharedValue,
+  withTiming,
 } from 'react-native-reanimated';
 
 const DEFAULT_HEADER_HEIGHT = 100;
@@ -25,6 +26,7 @@ interface ScrollContextType {
   width: number;
   onScroll: ReturnType<typeof useAnimatedScrollHandler>;
   onScrollRegular: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  resetPosition: () => void;
 }
 
 const ScrollContext = createContext<ScrollContextType | null>(null);
@@ -33,7 +35,7 @@ export type ScrollToHideProviderProps = {
   children: React.ReactNode;
   headerHeight?: number;
   tabBarHeight?: number;
-}
+};
 
 export const ScrollToHideProvider = ({
   children,
@@ -91,6 +93,13 @@ export const ScrollToHideProvider = ({
     scrollY.value = event.nativeEvent.contentOffset.y;
   };
 
+  // Function untuk reset posisi header dan tabbar ke awal
+  const resetPosition = () => {
+    scrollY.value = withTiming(0, { duration: 300 });
+    lastScrollY.value = withTiming(0, { duration: 300 });
+    clampedOffset.value = withTiming(0, { duration: 300 });
+  };
+
   const contextValue: ScrollContextType = {
     scrollY,
     clampedScrollY,
@@ -101,6 +110,7 @@ export const ScrollToHideProvider = ({
     width,
     onScroll,
     onScrollRegular,
+    resetPosition,
   };
 
   return (