@oxyhq/services 5.1.15 → 5.1.16

package/UI_COMPONENTS.md

@@ -8,6 +8,7 @@ This document provides details about the UI components available in the `@oxyhq/
 - [OxySignInButton](#oxysigninbutton)
 - [OxyLogo](#oxylogo)
 - [Avatar](#avatar)
+- [FollowButton](#followbutton)
 
 ## OxyProvider
 
@@ -141,3 +142,56 @@ npm install react-native-svg
 # or
 yarn add react-native-svg
 ```
+
+## FollowButton
+
+An animated button component for social interactions that toggles between "Follow" and "Following" states with smooth transitions.
+
+```tsx
+import { FollowButton } from '@oxyhq/services';
+
+// Basic usage
+<FollowButton userId="123" />
+
+// With custom styling
+<FollowButton 
+  userId="123" 
+  initiallyFollowing={true}
+  size="large"
+  style={{ borderRadius: 12 }}
+  onFollowChange={(isFollowing) => console.log(`User is now ${isFollowing ? 'followed' : 'unfollowed'}`)}
+/>
+
+// Different sizes
+<FollowButton userId="123" size="small" />
+<FollowButton userId="123" size="medium" /> // default
+<FollowButton userId="123" size="large" />
+
+// Disabled state
+<FollowButton userId="123" disabled={true} />
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| userId | `string` | *Required* | The ID of the user to follow/unfollow |
+| initiallyFollowing | `boolean` | `false` | Initial follow state, if already known |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size variant of the button |
+| onFollowChange | `(isFollowing: boolean) => void` | `undefined` | Callback function invoked when follow state changes |
+| style | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the button container |
+| textStyle | `StyleProp<TextStyle>` | `undefined` | Additional styles for the button text |
+| disabled | `boolean` | `false` | Whether the button is disabled |
+| showLoadingState | `boolean` | `true` | Whether to show loading indicator during API calls |
+
+### Requirements
+
+This component requires `react-native-reanimated` to be installed in your project:
+
+```bash
+npm install react-native-reanimated
+# or
+yarn add react-native-reanimated
+```
+
+> **Note:** After installing react-native-reanimated, you may need to set up the Babel plugin. Add `'react-native-reanimated/plugin'` to your Babel plugins in `babel.config.js`.

package/lib/commonjs/ui/components/FollowButton.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _OxyContext = require("../context/OxyContext");
+var _fonts = require("../styles/fonts");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * An animated follow button with interactive state changes
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FollowButton userId="123" />
+ * 
+ * // With custom styling
+ * <FollowButton 
+ *   userId="123" 
+ *   initiallyFollowing={true}
+ *   size="large"
+ *   style={{ borderRadius: 12 }}
+ *   onFollowChange={(isFollowing) => console.log(`User is now ${isFollowing ? 'followed' : 'unfollowed'}`)}
+ * />
+ * ```
+ */
+const FollowButton = ({
+  userId,
+  initiallyFollowing = false,
+  size = 'medium',
+  onFollowChange,
+  style,
+  textStyle,
+  disabled = false,
+  showLoadingState = true
+}) => {
+  const {
+    oxyServices,
+    isAuthenticated
+  } = (0, _OxyContext.useOxy)();
+  const [isFollowing, setIsFollowing] = (0, _react.useState)(initiallyFollowing);
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+
+  // Animation values
+  const animationProgress = (0, _reactNativeReanimated.useSharedValue)(initiallyFollowing ? 1 : 0);
+  const scale = (0, _reactNativeReanimated.useSharedValue)(1);
+
+  // Update the animation value when isFollowing changes
+  (0, _react.useEffect)(() => {
+    animationProgress.value = (0, _reactNativeReanimated.withTiming)(isFollowing ? 1 : 0, {
+      duration: 300,
+      easing: _reactNativeReanimated.Easing.bezier(0.25, 0.1, 0.25, 1)
+    });
+  }, [isFollowing, animationProgress]);
+
+  // The button press handler
+  const handlePress = async () => {
+    if (disabled || isLoading || !isAuthenticated) return;
+
+    // Touch feedback animation
+    scale.value = (0, _reactNativeReanimated.withSpring)(0.95, {
+      damping: 10
+    }, () => {
+      scale.value = (0, _reactNativeReanimated.withSpring)(1);
+    });
+    setIsLoading(true);
+    try {
+      // This should be replaced with actual API call to your services
+      if (isFollowing) {
+        // Unfollow API call would go here
+        // await oxyServices.user.unfollowUser(userId);
+        console.log(`Unfollowing user: ${userId}`);
+        await new Promise(resolve => setTimeout(resolve, 500)); // Simulating API call
+      } else {
+        // Follow API call would go here
+        // await oxyServices.user.followUser(userId);
+        console.log(`Following user: ${userId}`);
+        await new Promise(resolve => setTimeout(resolve, 500)); // Simulating API call
+      }
+
+      // Toggle following state with animation
+      const newFollowingState = !isFollowing;
+      setIsFollowing(newFollowingState);
+
+      // Call the callback if provided
+      if (onFollowChange) {
+        onFollowChange(newFollowingState);
+      }
+    } catch (error) {
+      console.error('Follow action failed:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Animated styles for the button
+  const animatedButtonStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const backgroundColor = (0, _reactNativeReanimated.interpolateColor)(animationProgress.value, [0, 1], ['#d169e5', '#FFFFFF']);
+    const borderColor = (0, _reactNativeReanimated.interpolateColor)(animationProgress.value, [0, 1], ['#d169e5', '#d169e5']);
+
+    // Add a slight scaling effect during the transition
+    const transitionScale = 1 + 0.05 * Math.sin(animationProgress.value * Math.PI);
+    return {
+      backgroundColor,
+      borderColor,
+      borderWidth: 1,
+      transform: [{
+        scale: scale.value * transitionScale
+      }]
+    };
+  });
+
+  // Animated styles for the text
+  const animatedTextStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const color = (0, _reactNativeReanimated.interpolateColor)(animationProgress.value, [0, 1], ['#FFFFFF', '#d169e5']);
+    return {
+      color
+    };
+  });
+
+  // Get size-specific styles
+  const getSizeStyles = () => {
+    switch (size) {
+      case 'small':
+        return {
+          button: {
+            paddingVertical: 6,
+            paddingHorizontal: 12,
+            borderRadius: 12
+          },
+          text: {
+            fontSize: 12
+          }
+        };
+      case 'large':
+        return {
+          button: {
+            paddingVertical: 12,
+            paddingHorizontal: 24,
+            borderRadius: 16
+          },
+          text: {
+            fontSize: 18
+          }
+        };
+      default:
+        // medium
+        return {
+          button: {
+            paddingVertical: 8,
+            paddingHorizontal: 16,
+            borderRadius: 14
+          },
+          text: {
+            fontSize: 14
+          }
+        };
+    }
+  };
+  const sizeStyles = getSizeStyles();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    activeOpacity: 0.8,
+    onPress: handlePress,
+    disabled: disabled || isLoading || !isAuthenticated,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.button, sizeStyles.button, animatedButtonStyle, style],
+      children: isLoading && showLoadingState ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        size: "small",
+        color: isFollowing ? '#d169e5' : '#FFFFFF'
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
+        style: [styles.text, sizeStyles.text, animatedTextStyle, textStyle],
+        children: isFollowing ? 'Following' : 'Follow'
+      })
+    })
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  text: {
+    fontFamily: _reactNative.Platform.select({
+      web: 'Phudu',
+      default: _fonts.fontFamilies.phuduSemiBold
+    }),
+    fontWeight: _reactNative.Platform.OS === 'web' ? '600' : undefined,
+    textAlign: 'center'
+  }
+});
+var _default = exports.default = FollowButton;
+//# sourceMappingURL=FollowButton.js.map

package/lib/commonjs/ui/components/FollowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_OxyContext","_fonts","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FollowButton","userId","initiallyFollowing","size","onFollowChange","style","textStyle","disabled","showLoadingState","oxyServices","isAuthenticated","useOxy","isFollowing","setIsFollowing","useState","isLoading","setIsLoading","animationProgress","useSharedValue","scale","useEffect","value","withTiming","duration","easing","Easing","bezier","handlePress","withSpring","damping","console","log","Promise","resolve","setTimeout","newFollowingState","error","animatedButtonStyle","useAnimatedStyle","backgroundColor","interpolateColor","borderColor","transitionScale","Math","sin","PI","borderWidth","transform","animatedTextStyle","color","getSizeStyles","button","paddingVertical","paddingHorizontal","borderRadius","text","fontSize","sizeStyles","jsx","TouchableOpacity","activeOpacity","onPress","children","View","styles","ActivityIndicator","Text","StyleSheet","create","justifyContent","alignItems","flexDirection","fontFamily","Platform","select","web","fontFamilies","phuduSemiBold","fontWeight","OS","undefined","textAlign","_default","exports"],"sourceRoot":"../../../../src","sources":["ui/components/FollowButton.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAUA,IAAAE,sBAAA,GAAAH,uBAAA,CAAAC,OAAA;AAQA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAA+C,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAgD/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMkB,YAAyC,GAAGA,CAAC;EACjDC,MAAM;EACNC,kBAAkB,GAAG,KAAK;EAC1BC,IAAI,GAAG,QAAQ;EACfC,cAAc;EACdC,KAAK;EACLC,SAAS;EACTC,QAAQ,GAAG,KAAK;EAChBC,gBAAgB,GAAG;AACrB,CAAC,KAAK;EACJ,MAAM;IAAEC,WAAW;IAAEC;EAAgB,CAAC,GAAG,IAAAC,kBAAM,EAAC,CAAC;EACjD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAACZ,kBAAkB,CAAC;EAClE,MAAM,CAACa,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;;EAEjD;EACA,MAAMG,iBAAiB,GAAG,IAAAC,qCAAc,EAAChB,kBAAkB,GAAG,CAAC,GAAG,CAAC,CAAC;EACpE,MAAMiB,KAAK,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;;EAE/B;EACA,IAAAE,gBAAS,EAAC,MAAM;IACdH,iBAAiB,CAACI,KAAK,GAAG,IAAAC,iCAAU,EAACV,WAAW,GAAG,CAAC,GAAG,CAAC,EAAE;MACxDW,QAAQ,EAAE,GAAG;MACbC,MAAM,EAAEC,6BAAM,CAACC,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IAC1C,CAAC,CAAC;EACJ,CAAC,EAAE,CAACd,WAAW,EAAEK,iBAAiB,CAAC,CAAC;;EAEpC;EACA,MAAMU,WAAW,GAAG,MAAAA,CAAA,KAAY;IAC9B,IAAIpB,QAAQ,IAAIQ,SAAS,IAAI,CAACL,eAAe,EAAE;;IAE/C;IACAS,KAAK,CAACE,KAAK,GAAG,IAAAO,iCAAU,EAAC,IAAI,EAAE;MAAEC,OAAO,EAAE;IAAG,CAAC,EAAE,MAAM;MACpDV,KAAK,CAACE,KAAK,GAAG,IAAAO,iCAAU,EAAC,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEFZ,YAAY,CAAC,IAAI,CAAC;IAElB,IAAI;MACF;MACA,IAAIJ,WAAW,EAAE;QACf;QACA;QACAkB,OAAO,CAACC,GAAG,CAAC,qBAAqB9B,MAAM,EAAE,CAAC;QAC1C,MAAM,IAAI+B,OAAO,CAACC,OAAO,IAAIC,UAAU,CAACD,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;MAC1D,CAAC,MAAM;QACL;QACA;QACAH,OAAO,CAACC,GAAG,CAAC,mBAAmB9B,MAAM,EAAE,CAAC;QACxC,MAAM,IAAI+B,OAAO,CAACC,OAAO,IAAIC,UAAU,CAACD,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;MAC1D;;MAEA;MACA,MAAME,iBAAiB,GAAG,CAACvB,WAAW;MACtCC,cAAc,CAACsB,iBAAiB,CAAC;;MAEjC;MACA,IAAI/B,cAAc,EAAE;QAClBA,cAAc,CAAC+B,iBAAiB,CAAC;MACnC;IACF,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdN,OAAO,CAACM,KAAK,CAAC,uBAAuB,EAAEA,KAAK,CAAC;IAC/C,CAAC,SAAS;MACRpB,YAAY,CAAC,KAAK,CAAC;IACrB;EACF,CAAC;;EAED;EACA,MAAMqB,mBAAmB,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACjD,MAAMC,eAAe,GAAG,IAAAC,uCAAgB,EACtCvB,iBAAiB,CAACI,KAAK,EACvB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,SAAS,EAAE,SAAS,CACvB,CAAC;IAED,MAAMoB,WAAW,GAAG,IAAAD,uCAAgB,EAClCvB,iBAAiB,CAACI,KAAK,EACvB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,SAAS,EAAE,SAAS,CACvB,CAAC;;IAED;IACA,MAAMqB,eAAe,GAAG,CAAC,GAAG,IAAI,GAAGC,IAAI,CAACC,GAAG,CAAC3B,iBAAiB,CAACI,KAAK,GAAGsB,IAAI,CAACE,EAAE,CAAC;IAE9E,OAAO;MACLN,eAAe;MACfE,WAAW;MACXK,WAAW,EAAE,CAAC;MACdC,SAAS,EAAE,CACT;QAAE5B,KAAK,EAAEA,KAAK,CAACE,KAAK,GAAGqB;MAAgB,CAAC;IAE5C,CAAC;EACH,CAAC,CAAC;;EAEF;EACA,MAAMM,iBAAiB,GAAG,IAAAV,uCAAgB,EAAC,MAAM;IAC/C,MAAMW,KAAK,GAAG,IAAAT,uCAAgB,EAC5BvB,iBAAiB,CAACI,KAAK,EACvB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,SAAS,EAAE,SAAS,CACvB,CAAC;IAED,OAAO;MACL4B;IACF,CAAC;EACH,CAAC,CAAC;;EAEF;EACA,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC1B,QAAQ/C,IAAI;MACV,KAAK,OAAO;QACV,OAAO;UACLgD,MAAM,EAAE;YACNC,eAAe,EAAE,CAAC;YAClBC,iBAAiB,EAAE,EAAE;YACrBC,YAAY,EAAE;UAChB,CAAc;UACdC,IAAI,EAAE;YACJC,QAAQ,EAAE;UACZ;QACF,CAAC;MACH,KAAK,OAAO;QACV,OAAO;UACLL,MAAM,EAAE;YACNC,eAAe,EAAE,EAAE;YACnBC,iBAAiB,EAAE,EAAE;YACrBC,YAAY,EAAE;UAChB,CAAc;UACdC,IAAI,EAAE;YACJC,QAAQ,EAAE;UACZ;QACF,CAAC;MACH;QAAS;QACP,OAAO;UACLL,MAAM,EAAE;YACNC,eAAe,EAAE,CAAC;YAClBC,iBAAiB,EAAE,EAAE;YACrBC,YAAY,EAAE;UAChB,CAAc;UACdC,IAAI,EAAE;YACJC,QAAQ,EAAE;UACZ;QACF,CAAC;IACL;EACF,CAAC;EAED,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAElC,oBACE,IAAAtE,WAAA,CAAA8E,GAAA,EAAClF,YAAA,CAAAmF,gBAAgB;IACfC,aAAa,EAAE,GAAI;IACnBC,OAAO,EAAElC,WAAY;IACrBpB,QAAQ,EAAEA,QAAQ,IAAIQ,SAAS,IAAI,CAACL,eAAgB;IAAAoD,QAAA,eAEpD,IAAAlF,WAAA,CAAA8E,GAAA,EAACjF,sBAAA,CAAAc,OAAQ,CAACwE,IAAI;MACZ1D,KAAK,EAAE,CACL2D,MAAM,CAACb,MAAM,EACbM,UAAU,CAACN,MAAM,EACjBd,mBAAmB,EACnBhC,KAAK,CACL;MAAAyD,QAAA,EAED/C,SAAS,IAAIP,gBAAgB,gBAC5B,IAAA5B,WAAA,CAAA8E,GAAA,EAAClF,YAAA,CAAAyF,iBAAiB;QAChB9D,IAAI,EAAC,OAAO;QACZ8C,KAAK,EAAErC,WAAW,GAAG,SAAS,GAAG;MAAU,CAC5C,CAAC,gBAEF,IAAAhC,WAAA,CAAA8E,GAAA,EAACjF,sBAAA,CAAAc,OAAQ,CAAC2E,IAAI;QACZ7D,KAAK,EAAE,CACL2D,MAAM,CAACT,IAAI,EACXE,UAAU,CAACF,IAAI,EACfP,iBAAiB,EACjB1C,SAAS,CACT;QAAAwD,QAAA,EAEDlD,WAAW,GAAG,WAAW,GAAG;MAAQ,CACxB;IAChB,CACY;EAAC,CACA,CAAC;AAEvB,CAAC;AAED,MAAMoD,MAAM,GAAGG,uBAAU,CAACC,MAAM,CAAC;EAC/BjB,MAAM,EAAE;IACNkB,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE;EACjB,CAAC;EACDhB,IAAI,EAAE;IACJiB,UAAU,EAAEC,qBAAQ,CAACC,MAAM,CAAC;MAC1BC,GAAG,EAAE,OAAO;MACZpF,OAAO,EAAEqF,mBAAY,CAACC;IACxB,CAAC,CAAC;IACFC,UAAU,EAAEL,qBAAQ,CAACM,EAAE,KAAK,KAAK,GAAG,KAAK,GAAGC,SAAS;IACrDC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA5F,OAAA,GAEYS,YAAY","ignoreList":[]}

package/lib/commonjs/ui/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   OxySignInButton: true,
   OxyLogo: true,
   Avatar: true,
+  FollowButton: true,
   FontLoader: true,
   setupFonts: true,
   OxyContextProvider: true,
@@ -39,6 +40,12 @@ Object.defineProperty(exports, "Avatar", {
     return _Avatar.default;
   }
 });
+Object.defineProperty(exports, "FollowButton", {
+  enumerable: true,
+  get: function () {
+    return _FollowButton.default;
+  }
+});
 Object.defineProperty(exports, "FontLoader", {
   enumerable: true,
   get: function () {
@@ -121,6 +128,7 @@ var _OxyProvider = _interopRequireDefault(require("./components/OxyProvider"));
 var _OxySignInButton = _interopRequireDefault(require("./components/OxySignInButton"));
 var _OxyLogo = _interopRequireDefault(require("./components/OxyLogo"));
 var _Avatar = _interopRequireDefault(require("./components/Avatar"));
+var _FollowButton = _interopRequireDefault(require("./components/FollowButton"));
 var _FontLoader = require("./components/FontLoader");
 var _OxyContext = require("./context/OxyContext");
 var _fonts = require("./styles/fonts");

package/lib/commonjs/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_OxyProvider","_interopRequireDefault","require","_OxySignInButton","_OxyLogo","_Avatar","_FontLoader","_OxyContext","_fonts","_SignInScreen","_SignUpScreen","_AccountCenterScreen","_AccountOverviewScreen","_types","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","e","__esModule","default"],"sourceRoot":"../../../src","sources":["ui/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AAQA,IAAAM,MAAA,GAAAN,OAAA;AAGA,IAAAO,aAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,aAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,oBAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,sBAAA,GAAAX,sBAAA,CAAAC,OAAA;AAGA,IAAAW,MAAA,GAAAX,OAAA;AAAAY,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAAmC,SAAAhB,uBAAAyB,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
+{"version":3,"names":["_OxyProvider","_interopRequireDefault","require","_OxySignInButton","_OxyLogo","_Avatar","_FollowButton","_FontLoader","_OxyContext","_fonts","_SignInScreen","_SignUpScreen","_AccountCenterScreen","_AccountOverviewScreen","_types","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","e","__esModule","default"],"sourceRoot":"../../../src","sources":["ui/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AAQA,IAAAO,MAAA,GAAAP,OAAA;AAGA,IAAAQ,aAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,aAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,oBAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,sBAAA,GAAAZ,sBAAA,CAAAC,OAAA;AAGA,IAAAY,MAAA,GAAAZ,OAAA;AAAAa,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAAmC,SAAAjB,uBAAA0B,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/module/ui/components/FollowButton.js

@@ -0,0 +1,193 @@
+"use strict";
+
+import React, { useState, useEffect } from 'react';
+import { TouchableOpacity, StyleSheet, Platform, ActivityIndicator } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring, interpolateColor, Easing, withTiming } from 'react-native-reanimated';
+import { useOxy } from '../context/OxyContext';
+import { fontFamilies } from '../styles/fonts';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * An animated follow button with interactive state changes
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FollowButton userId="123" />
+ * 
+ * // With custom styling
+ * <FollowButton 
+ *   userId="123" 
+ *   initiallyFollowing={true}
+ *   size="large"
+ *   style={{ borderRadius: 12 }}
+ *   onFollowChange={(isFollowing) => console.log(`User is now ${isFollowing ? 'followed' : 'unfollowed'}`)}
+ * />
+ * ```
+ */
+const FollowButton = ({
+  userId,
+  initiallyFollowing = false,
+  size = 'medium',
+  onFollowChange,
+  style,
+  textStyle,
+  disabled = false,
+  showLoadingState = true
+}) => {
+  const {
+    oxyServices,
+    isAuthenticated
+  } = useOxy();
+  const [isFollowing, setIsFollowing] = useState(initiallyFollowing);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Animation values
+  const animationProgress = useSharedValue(initiallyFollowing ? 1 : 0);
+  const scale = useSharedValue(1);
+
+  // Update the animation value when isFollowing changes
+  useEffect(() => {
+    animationProgress.value = withTiming(isFollowing ? 1 : 0, {
+      duration: 300,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1)
+    });
+  }, [isFollowing, animationProgress]);
+
+  // The button press handler
+  const handlePress = async () => {
+    if (disabled || isLoading || !isAuthenticated) return;
+
+    // Touch feedback animation
+    scale.value = withSpring(0.95, {
+      damping: 10
+    }, () => {
+      scale.value = withSpring(1);
+    });
+    setIsLoading(true);
+    try {
+      // This should be replaced with actual API call to your services
+      if (isFollowing) {
+        // Unfollow API call would go here
+        // await oxyServices.user.unfollowUser(userId);
+        console.log(`Unfollowing user: ${userId}`);
+        await new Promise(resolve => setTimeout(resolve, 500)); // Simulating API call
+      } else {
+        // Follow API call would go here
+        // await oxyServices.user.followUser(userId);
+        console.log(`Following user: ${userId}`);
+        await new Promise(resolve => setTimeout(resolve, 500)); // Simulating API call
+      }
+
+      // Toggle following state with animation
+      const newFollowingState = !isFollowing;
+      setIsFollowing(newFollowingState);
+
+      // Call the callback if provided
+      if (onFollowChange) {
+        onFollowChange(newFollowingState);
+      }
+    } catch (error) {
+      console.error('Follow action failed:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Animated styles for the button
+  const animatedButtonStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(animationProgress.value, [0, 1], ['#d169e5', '#FFFFFF']);
+    const borderColor = interpolateColor(animationProgress.value, [0, 1], ['#d169e5', '#d169e5']);
+
+    // Add a slight scaling effect during the transition
+    const transitionScale = 1 + 0.05 * Math.sin(animationProgress.value * Math.PI);
+    return {
+      backgroundColor,
+      borderColor,
+      borderWidth: 1,
+      transform: [{
+        scale: scale.value * transitionScale
+      }]
+    };
+  });
+
+  // Animated styles for the text
+  const animatedTextStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(animationProgress.value, [0, 1], ['#FFFFFF', '#d169e5']);
+    return {
+      color
+    };
+  });
+
+  // Get size-specific styles
+  const getSizeStyles = () => {
+    switch (size) {
+      case 'small':
+        return {
+          button: {
+            paddingVertical: 6,
+            paddingHorizontal: 12,
+            borderRadius: 12
+          },
+          text: {
+            fontSize: 12
+          }
+        };
+      case 'large':
+        return {
+          button: {
+            paddingVertical: 12,
+            paddingHorizontal: 24,
+            borderRadius: 16
+          },
+          text: {
+            fontSize: 18
+          }
+        };
+      default:
+        // medium
+        return {
+          button: {
+            paddingVertical: 8,
+            paddingHorizontal: 16,
+            borderRadius: 14
+          },
+          text: {
+            fontSize: 14
+          }
+        };
+    }
+  };
+  const sizeStyles = getSizeStyles();
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    activeOpacity: 0.8,
+    onPress: handlePress,
+    disabled: disabled || isLoading || !isAuthenticated,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.button, sizeStyles.button, animatedButtonStyle, style],
+      children: isLoading && showLoadingState ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: isFollowing ? '#d169e5' : '#FFFFFF'
+      }) : /*#__PURE__*/_jsx(Animated.Text, {
+        style: [styles.text, sizeStyles.text, animatedTextStyle, textStyle],
+        children: isFollowing ? 'Following' : 'Follow'
+      })
+    })
+  });
+};
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  text: {
+    fontFamily: Platform.select({
+      web: 'Phudu',
+      default: fontFamilies.phuduSemiBold
+    }),
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+    textAlign: 'center'
+  }
+});
+export default FollowButton;
+//# sourceMappingURL=FollowButton.js.map

package/lib/module/ui/components/FollowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","TouchableOpacity","StyleSheet","Platform","ActivityIndicator","Animated","useSharedValue","useAnimatedStyle","withSpring","interpolateColor","Easing","withTiming","useOxy","fontFamilies","jsx","_jsx","FollowButton","userId","initiallyFollowing","size","onFollowChange","style","textStyle","disabled","showLoadingState","oxyServices","isAuthenticated","isFollowing","setIsFollowing","isLoading","setIsLoading","animationProgress","scale","value","duration","easing","bezier","handlePress","damping","console","log","Promise","resolve","setTimeout","newFollowingState","error","animatedButtonStyle","backgroundColor","borderColor","transitionScale","Math","sin","PI","borderWidth","transform","animatedTextStyle","color","getSizeStyles","button","paddingVertical","paddingHorizontal","borderRadius","text","fontSize","sizeStyles","activeOpacity","onPress","children","View","styles","Text","create","justifyContent","alignItems","flexDirection","fontFamily","select","web","default","phuduSemiBold","fontWeight","OS","undefined","textAlign"],"sourceRoot":"../../../../src","sources":["ui/components/FollowButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/index.js

@@ -9,6 +9,7 @@ export { default as OxyProvider } from './components/OxyProvider';
 export { default as OxySignInButton } from './components/OxySignInButton';
 export { default as OxyLogo } from './components/OxyLogo';
 export { default as Avatar } from './components/Avatar';
+export { default as FollowButton } from './components/FollowButton';
 export { FontLoader, setupFonts } from './components/FontLoader';
 export { OxyContextProvider, useOxy, OxyContextState, OxyContextProviderProps } from './context/OxyContext';
 

package/lib/module/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","OxyProvider","OxySignInButton","OxyLogo","Avatar","FontLoader","setupFonts","OxyContextProvider","useOxy","OxyContextState","OxyContextProviderProps","fontFamilies","fontStyles","SignInScreen","SignUpScreen","AccountCenterScreen","AccountOverviewScreen"],"sourceRoot":"../../../src","sources":["ui/index.ts"],"mappings":";;AAAA;AACA;AACA;;AAEA;AACA,SAASA,OAAO,IAAIC,WAAW,QAAQ,0BAA0B;AACjE,SAASD,OAAO,IAAIE,eAAe,QAAQ,8BAA8B;AACzE,SAASF,OAAO,IAAIG,OAAO,QAAQ,sBAAsB;AACzD,SAASH,OAAO,IAAII,MAAM,QAAQ,qBAAqB;AACvD,SAASC,UAAU,EAAEC,UAAU,QAAQ,yBAAyB;AAChE,SACEC,kBAAkB,EAClBC,MAAM,EACNC,eAAe,EACfC,uBAAuB,QAClB,sBAAsB;;AAE7B;AACA,SAASC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;;AAEzD;AACA,SAASZ,OAAO,IAAIa,YAAY,QAAQ,wBAAwB;AAChE,SAASb,OAAO,IAAIc,YAAY,QAAQ,wBAAwB;AAChE,SAASd,OAAO,IAAIe,mBAAmB,QAAQ,+BAA+B;AAC9E,SAASf,OAAO,IAAIgB,qBAAqB,QAAQ,iCAAiC;;AAElF;AACA,cAAc,oBAAoB","ignoreList":[]}
+{"version":3,"names":["default","OxyProvider","OxySignInButton","OxyLogo","Avatar","FollowButton","FontLoader","setupFonts","OxyContextProvider","useOxy","OxyContextState","OxyContextProviderProps","fontFamilies","fontStyles","SignInScreen","SignUpScreen","AccountCenterScreen","AccountOverviewScreen"],"sourceRoot":"../../../src","sources":["ui/index.ts"],"mappings":";;AAAA;AACA;AACA;;AAEA;AACA,SAASA,OAAO,IAAIC,WAAW,QAAQ,0BAA0B;AACjE,SAASD,OAAO,IAAIE,eAAe,QAAQ,8BAA8B;AACzE,SAASF,OAAO,IAAIG,OAAO,QAAQ,sBAAsB;AACzD,SAASH,OAAO,IAAII,MAAM,QAAQ,qBAAqB;AACvD,SAASJ,OAAO,IAAIK,YAAY,QAAQ,2BAA2B;AACnE,SAASC,UAAU,EAAEC,UAAU,QAAQ,yBAAyB;AAChE,SACEC,kBAAkB,EAClBC,MAAM,EACNC,eAAe,EACfC,uBAAuB,QAClB,sBAAsB;;AAE7B;AACA,SAASC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;;AAEzD;AACA,SAASb,OAAO,IAAIc,YAAY,QAAQ,wBAAwB;AAChE,SAASd,OAAO,IAAIe,YAAY,QAAQ,wBAAwB;AAChE,SAASf,OAAO,IAAIgB,mBAAmB,QAAQ,+BAA+B;AAC9E,SAAShB,OAAO,IAAIiB,qBAAqB,QAAQ,iCAAiC;;AAElF;AACA,cAAc,oBAAoB","ignoreList":[]}

package/lib/typescript/ui/components/FollowButton.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
+export interface FollowButtonProps {
+    /**
+     * The user ID to follow/unfollow
+     */
+    userId: string;
+    /**
+     * Initial follow state, if known
+     * @default false
+     */
+    initiallyFollowing?: boolean;
+    /**
+     * Button size
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Custom callback when follow/unfollow action happens
+     */
+    onFollowChange?: (isFollowing: boolean) => void;
+    /**
+     * Additional styles for the button container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Additional styles for the button text
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Whether to disable the button
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show loading indicator during API calls
+     * @default true
+     */
+    showLoadingState?: boolean;
+}
+/**
+ * An animated follow button with interactive state changes
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FollowButton userId="123" />
+ *
+ * // With custom styling
+ * <FollowButton
+ *   userId="123"
+ *   initiallyFollowing={true}
+ *   size="large"
+ *   style={{ borderRadius: 12 }}
+ *   onFollowChange={(isFollowing) => console.log(`User is now ${isFollowing ? 'followed' : 'unfollowed'}`)}
+ * />
+ * ```
+ */
+declare const FollowButton: React.FC<FollowButtonProps>;
+export default FollowButton;
+//# sourceMappingURL=FollowButton.d.ts.map

package/lib/typescript/ui/components/FollowButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowButton.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/FollowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAIL,SAAS,EACT,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAYtB,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqL7C,CAAC;AAkBF,eAAe,YAAY,CAAC"}

package/lib/typescript/ui/index.d.ts

@@ -5,6 +5,7 @@ export { default as OxyProvider } from './components/OxyProvider';
 export { default as OxySignInButton } from './components/OxySignInButton';
 export { default as OxyLogo } from './components/OxyLogo';
 export { default as Avatar } from './components/Avatar';
+export { default as FollowButton } from './components/FollowButton';
 export { FontLoader, setupFonts } from './components/FontLoader';
 export { OxyContextProvider, useOxy, OxyContextState, OxyContextProviderProps } from './context/OxyContext';
 export { fontFamilies, fontStyles } from './styles/fonts';

package/lib/typescript/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,eAAe,EACf,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAGnF,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,eAAe,EACf,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAGnF,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oxyhq/services",
-    "version": "5.1.15",
+    "version": "5.1.16",
     "description": "Reusable OxyHQ module to handle authentication, user management, karma system and more 🚀",
     "main": "lib/commonjs/index.js",
     "module": "lib/module/index.js",

package/src/ui/components/FollowButton.tsx

@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  TouchableOpacity, 
+  Text, 
+  StyleSheet, 
+  ViewStyle, 
+  TextStyle, 
+  StyleProp, 
+  Platform,
+  ActivityIndicator
+} from 'react-native';
+import Animated, { 
+  useSharedValue, 
+  useAnimatedStyle, 
+  withSpring, 
+  interpolateColor,
+  Easing, 
+  withTiming 
+} from 'react-native-reanimated';
+import { useOxy } from '../context/OxyContext';
+import { fontFamilies } from '../styles/fonts';
+
+export interface FollowButtonProps {
+  /**
+   * The user ID to follow/unfollow
+   */
+  userId: string;
+
+  /**
+   * Initial follow state, if known
+   * @default false 
+   */
+  initiallyFollowing?: boolean;
+
+  /**
+   * Button size
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Custom callback when follow/unfollow action happens
+   */
+  onFollowChange?: (isFollowing: boolean) => void;
+
+  /**
+   * Additional styles for the button container
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Additional styles for the button text
+   */
+  textStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Whether to disable the button
+   * @default false
+   */
+  disabled?: boolean;
+  
+  /**
+   * Whether to show loading indicator during API calls
+   * @default true
+   */
+  showLoadingState?: boolean;
+}
+
+/**
+ * An animated follow button with interactive state changes
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FollowButton userId="123" />
+ * 
+ * // With custom styling
+ * <FollowButton 
+ *   userId="123" 
+ *   initiallyFollowing={true}
+ *   size="large"
+ *   style={{ borderRadius: 12 }}
+ *   onFollowChange={(isFollowing) => console.log(`User is now ${isFollowing ? 'followed' : 'unfollowed'}`)}
+ * />
+ * ```
+ */
+const FollowButton: React.FC<FollowButtonProps> = ({
+  userId,
+  initiallyFollowing = false,
+  size = 'medium',
+  onFollowChange,
+  style,
+  textStyle,
+  disabled = false,
+  showLoadingState = true,
+}) => {
+  const { oxyServices, isAuthenticated } = useOxy();
+  const [isFollowing, setIsFollowing] = useState(initiallyFollowing);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Animation values
+  const animationProgress = useSharedValue(initiallyFollowing ? 1 : 0);
+  const scale = useSharedValue(1);
+  
+  // Update the animation value when isFollowing changes
+  useEffect(() => {
+    animationProgress.value = withTiming(isFollowing ? 1 : 0, {
+      duration: 300,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+    });
+  }, [isFollowing, animationProgress]);
+
+  // The button press handler
+  const handlePress = async () => {
+    if (disabled || isLoading || !isAuthenticated) return;
+    
+    // Touch feedback animation
+    scale.value = withSpring(0.95, { damping: 10 }, () => {
+      scale.value = withSpring(1);
+    });
+
+    setIsLoading(true);
+
+    try {
+      // This should be replaced with actual API call to your services
+      if (isFollowing) {
+        // Unfollow API call would go here
+        // await oxyServices.user.unfollowUser(userId);
+        console.log(`Unfollowing user: ${userId}`);
+        await new Promise(resolve => setTimeout(resolve, 500)); // Simulating API call
+      } else {
+        // Follow API call would go here
+        // await oxyServices.user.followUser(userId);
+        console.log(`Following user: ${userId}`);
+        await new Promise(resolve => setTimeout(resolve, 500)); // Simulating API call
+      }
+
+      // Toggle following state with animation
+      const newFollowingState = !isFollowing;
+      setIsFollowing(newFollowingState);
+      
+      // Call the callback if provided
+      if (onFollowChange) {
+        onFollowChange(newFollowingState);
+      }
+    } catch (error) {
+      console.error('Follow action failed:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Animated styles for the button
+  const animatedButtonStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      animationProgress.value,
+      [0, 1],
+      ['#d169e5', '#FFFFFF']
+    );
+    
+    const borderColor = interpolateColor(
+      animationProgress.value,
+      [0, 1],
+      ['#d169e5', '#d169e5']
+    );
+
+    // Add a slight scaling effect during the transition
+    const transitionScale = 1 + 0.05 * Math.sin(animationProgress.value * Math.PI);
+
+    return {
+      backgroundColor,
+      borderColor,
+      borderWidth: 1,
+      transform: [
+        { scale: scale.value * transitionScale },
+      ],
+    };
+  });
+
+  // Animated styles for the text
+  const animatedTextStyle = useAnimatedStyle(() => {
+    const color = interpolateColor(
+      animationProgress.value,
+      [0, 1],
+      ['#FFFFFF', '#d169e5']
+    );
+
+    return {
+      color,
+    };
+  });
+
+  // Get size-specific styles
+  const getSizeStyles = () => {
+    switch (size) {
+      case 'small':
+        return {
+          button: {
+            paddingVertical: 6,
+            paddingHorizontal: 12,
+            borderRadius: 12,
+          } as ViewStyle,
+          text: {
+            fontSize: 12,
+          } as TextStyle,
+        };
+      case 'large':
+        return {
+          button: {
+            paddingVertical: 12,
+            paddingHorizontal: 24,
+            borderRadius: 16,
+          } as ViewStyle,
+          text: {
+            fontSize: 18,
+          } as TextStyle,
+        };
+      default: // medium
+        return {
+          button: {
+            paddingVertical: 8,
+            paddingHorizontal: 16,
+            borderRadius: 14,
+          } as ViewStyle,
+          text: {
+            fontSize: 14,
+          } as TextStyle,
+        };
+    }
+  };
+
+  const sizeStyles = getSizeStyles();
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={handlePress}
+      disabled={disabled || isLoading || !isAuthenticated}
+    >
+      <Animated.View
+        style={[
+          styles.button,
+          sizeStyles.button,
+          animatedButtonStyle,
+          style,
+        ]}
+      >
+        {isLoading && showLoadingState ? (
+          <ActivityIndicator 
+            size="small" 
+            color={isFollowing ? '#d169e5' : '#FFFFFF'} 
+          />
+        ) : (
+          <Animated.Text
+            style={[
+              styles.text,
+              sizeStyles.text,
+              animatedTextStyle,
+              textStyle,
+            ]}
+          >
+            {isFollowing ? 'Following' : 'Follow'}
+          </Animated.Text>
+        )}
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  text: {
+    fontFamily: Platform.select({
+      web: 'Phudu',
+      default: fontFamilies.phuduSemiBold,
+    }),
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+    textAlign: 'center',
+  },
+});
+
+export default FollowButton;

package/src/ui/index.ts

@@ -7,6 +7,7 @@ export { default as OxyProvider } from './components/OxyProvider';
 export { default as OxySignInButton } from './components/OxySignInButton';
 export { default as OxyLogo } from './components/OxyLogo';
 export { default as Avatar } from './components/Avatar';
+export { default as FollowButton } from './components/FollowButton';
 export { FontLoader, setupFonts } from './components/FontLoader';
 export { 
   OxyContextProvider,