@webority-technologies/mobile 0.0.6 → 0.0.8

package/README.md

@@ -1,471 +1,11 @@
 # @webority-technologies/mobile
 
-The single React Native package for Webority projects: 41 UI components, theme, API client, auth, logging, storage, formatters, validators, network, permissions, and version-check — all in one import path.
-
-`v0.0.1` · MIT · React Native 0.81+ · React 19 · TypeScript strict
-
----
-
-## Install
+Internal React Native foundation for Webority projects — UI components, theme, API client, auth, logging, storage, formatters, validators, network, permissions, and version-check in one package.
 
 ```bash
 npm install @webority-technologies/mobile
 ```
 
-### Peer dependencies
-
-`react` 19.1 and `react-native` 0.81+ are required. Everything else is **optional** — install only what the modules you use need:
-
-| Peer dep                                          | Needed for                                                        |
-| ------------------------------------------------- | ----------------------------------------------------------------- |
-| `react-native-reanimated` (3.x)                   | `BottomSheet`, `Drawer`, `Swipeable` (others use native Animated) |
-| `react-native-gesture-handler` (2.x)              | `BottomSheet`, swipe-to-dismiss interactions                      |
-| `react-native-safe-area-context` (5.x)            | Layout components, modals, toast positioning                      |
-| `react-native-vector-icons` (10.x)                | Icon-bearing components (`Button`, `Avatar`, etc.)                |
-| `@react-native-async-storage/async-storage` (2.x) | `Storage` module + token persistence                              |
-| `react-native-keychain` (9.x)                     | Secure credential storage (`storeToken` / `getToken`)             |
-| `react-native-device-info` (14.x)                 | `versionCheck` helpers                                            |
-| `@react-native-community/netinfo` (11.x)          | `useNetworkStatus`, `NetworkStatusBanner`                         |
-| `react-native-permissions` (4.x)                  | `Permissions` module                                              |
-| `react-native-compressor` (1.10+)                 | `compressImage` utility                                           |
-
-```bash
-npm install react-native-reanimated \
-            react-native-gesture-handler \
-            react-native-safe-area-context \
-            react-native-vector-icons \
-            @react-native-async-storage/async-storage \
-            react-native-keychain \
-            react-native-device-info \
-            @react-native-community/netinfo \
-            react-native-permissions \
-            react-native-compressor
-```
-
-Follow each library's native-setup steps (Reanimated babel plugin, Gesture Handler import at the top of the entry file, vector-icons font linking, etc.).
-
----
-
-## Setup
-
-Wrap the app with `GestureHandlerRootView`, `SafeAreaProvider`, `ThemeProvider`, and `ToastProvider`. Initialize the SDK once at module scope.
-
-```tsx
-// App.tsx
-import 'react-native-gesture-handler';
-import React from 'react';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import {
-  initWebority,
-  initUserAuth,
-  ThemeProvider,
-  ToastProvider,
-  NetworkStatusBanner
-} from '@webority-technologies/mobile';
-import store from './store';
-import { logout, refreshToken } from './store/auth';
-
-initWebority({
-  baseUrl: 'https://api.example.com',
-  environment: __DEV__ ? 'Development' : 'Production',
-  country: 'in' // optional, defaults to 'in'
-});
-
-initUserAuth(store, { logout, refreshToken });
-
-export default function App(): JSX.Element {
-  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <SafeAreaProvider>
-        <ThemeProvider>
-          <ToastProvider>
-            <NetworkStatusBanner />
-            {/* your screens */}
-          </ToastProvider>
-        </ThemeProvider>
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
-  );
-}
-```
-
-`initUI` is also exported for advanced setups that need to register UI-only globals (theme overrides, default color mode) without the API/auth side of the SDK.
-
----
-
-## API surface
-
-```ts
-import {
-  // bootstrap
-  initWebority,
-  initUserAuth,
-  initUI,
-
-  // configuration
-  setConfig,
-  getConfig,
-  getConfigValue,
-  resetConfig,
-
-  // theme
-  ThemeProvider,
-  useTheme,
-  useThemeMode,
-  mergeTheme,
-  lightTheme,
-  darkTheme,
-
-  // hooks
-  useToggle,
-  useDebounce,
-  usePressAnimation,
-
-  // http
-  publicClient,
-  userClient,
-
-  // auth
-  storeToken,
-  getToken,
-  removeToken,
-  decodeJWT,
-  isJWTExpired,
-  getJWTExpiry,
-
-  // storage
-  Storage,
-  setStorageImplementation,
-
-  // logger + remote sink (Crashlytics / Sentry adapter)
-  Logger,
-  setRemoteLogger,
-
-  // version + force update
-  VersionCheck,
-  useVersionCheck,
-  ForceUpdateDialog,
-
-  // network
-  useNetworkStatus,
-  getNetworkStatus,
-  NetworkStatusBanner,
-
-  // permissions
-  Permissions,
-
-  // formatters
-  formatDate,
-  formatTime,
-  formatRelativeTime,
-  formatPhone,
-  formatCurrency,
-  formatNumber,
-  formatPercent,
-  formatCompactNumber,
-  getInitials,
-
-  // validators
-  isEmail,
-  isIndianMobile,
-  isPhone,
-  isUrl,
-  isStrongPassword,
-  isPan,
-  isGstin,
-  isAadhaar,
-  isIfsc,
-  isIndianPincode,
-  isHexColor,
-  isNumeric,
-  isInteger,
-  isAlphanumeric,
-  isBetween,
-  minLength,
-  maxLength,
-
-  // utilities
-  Responsive,
-  Spacing,
-  Padding,
-  Margin,
-  isTablet,
-  shadowStyle,
-  triggerHaptic,
-  compressImage,
-
-  // toast
-  ToastProvider,
-  toast,
-  useToast
-
-  // …41 UI components
-} from '@webority-technologies/mobile';
-```
-
----
-
-## HTTP clients
-
-### `publicClient`
-
-Axios instance for unauthenticated calls. Handles retries (network errors, 429, 503), 30s timeout, environment-aware base URL, and standard headers (including gzip `Accept-Encoding`).
-
-### `userClient`
-
-Axios instance for authenticated calls. Injects a Bearer token from Keychain, queues concurrent 401s while a single refresh is in flight, and replays them on success. Wires into the host app's Redux store via `initUserAuth(store, { logout, refreshToken })`.
-
----
-
-## Auth & tokens
-
-```ts
-import {
-  storeToken,
-  getToken,
-  removeToken,
-  decodeJWT,
-  isJWTExpired
-} from '@webority-technologies/mobile';
-
-await storeToken('accessToken', token, expiry);
-const stored = await getToken('accessToken'); // { token, expiry } | null
-if (stored && isJWTExpired(stored.token)) {
-  /* refresh */
-}
-const claims = decodeJWT<{ sub: string; role: string }>(stored.token);
-```
-
-Tokens are persisted via `react-native-keychain` with biometry-friendly defaults and graceful recovery from "Key permanently invalidated" errors.
-
----
-
-## Storage
-
-Typed `AsyncStorage` wrapper with safe JSON helpers. All operations swallow errors (logging them) and return falsy results so storage failures never crash the app.
-
-```ts
-import { Storage } from '@webority-technologies/mobile';
-
-await Storage.setItem('lang', 'en');
-const lang = await Storage.getItem('lang'); // string | null
-
-await Storage.setJson('user', { id: '1', name: 'Navneet' });
-const user = await Storage.getJson<User>('user'); // User | null
-
-await Storage.multiSet({ pushToken: '…', deviceId: '…' });
-await Storage.multiRemove(['pushToken']);
-```
-
-Override the backend (e.g. with MMKV) via `setStorageImplementation()`.
-
----
-
-## Logger & crash reporting
-
-`Logger.info / warn / error` write to the console. `Logger.recordError`, `Logger.breadcrumb`, `Logger.setUser`, and `Logger.setAttribute` forward to an optional **remote sink** that you wire from your app — keeping the library Firebase- and Sentry-agnostic.
-
-```ts
-import { Logger, setRemoteLogger } from '@webority-technologies/mobile';
-import crashlytics from '@react-native-firebase/crashlytics';
-
-setRemoteLogger({
-  log: (level, message) => crashlytics().log(`[${level}] ${message}`),
-  recordError: (error, ctx) => {
-    if (ctx) Object.entries(ctx).forEach(([k, v]) => crashlytics().setAttribute(k, String(v)));
-    crashlytics().recordError(error instanceof Error ? error : new Error(String(error)));
-  },
-  breadcrumb: (msg, data) => crashlytics().log(data ? `${msg} ${JSON.stringify(data)}` : msg),
-  setUser: (id) => crashlytics().setUserId(id ?? ''),
-  setAttribute: (k, v) => crashlytics().setAttribute(k, v == null ? '' : String(v))
-});
-
-Logger.recordError(new Error('boom'), { route: '/checkout', orderId: 42 });
-```
-
-The same shape works for Sentry, Bugsnag, Datadog, or any custom backend — implement only the methods you need.
-
----
-
-## Version check & force update
-
-```tsx
-import { useVersionCheck, ForceUpdateDialog } from '@webority-technologies/mobile';
-
-const { isUpdateRequired, updateUrl } = useVersionCheck(isAppReady);
-return <ForceUpdateDialog visible={isUpdateRequired} mandatory updateUrl={updateUrl} />;
-```
-
-`useVersionCheck` only runs in `'Production'`. Country code (used for App Store / Play Store lookups) is configurable via `initWebority({ country: 'us' })`; defaults to `'in'`.
-
----
-
-## Network status
-
-```tsx
-import { useNetworkStatus, NetworkStatusBanner } from '@webority-technologies/mobile';
-
-// Mount once near the app root
-<NetworkStatusBanner />;
-
-// Or read it inside a screen
-const { isConnected, isInternetReachable, type } = useNetworkStatus();
-```
-
-Falls back to an optimistic "online" status when `@react-native-community/netinfo` is not installed.
-
----
-
-## Permissions
-
-```ts
-import { Permissions } from '@webority-technologies/mobile';
-
-await Permissions.isAuthorized('camera'); // boolean
-const status = await Permissions.ensure('photos'); // 'granted' | 'denied' | 'limited' | 'blocked' | 'unavailable'
-if (status === 'blocked') await Permissions.openSettings();
-```
-
-Maps an abstract `PermissionKind` (camera, microphone, photos, location, contacts, calendar, notifications, bluetooth, …) to the right iOS / Android permission string under the hood.
-
----
-
-## Formatters
-
-```ts
-formatDate(new Date(), 'medium'); // '8 Apr 2026'
-formatRelativeTime(then, now); // '5 minutes ago'
-formatPhone('9876512345'); // '+91 98765 12345'
-formatCurrency(150000); // '₹1,50,000'
-formatCurrency(99, { currency: 'USD', locale: 'en-US' }); // '$99.00'
-formatCompactNumber(1500000); // '15L' (en-IN)
-getInitials('Navneet Singh'); // 'NS'
-```
-
-All formatters default to `en-IN` locale (Indian numbering / DD-MMM-YYYY style) and accept overrides.
-
----
-
-## Validators
-
-Pragmatic regex-based validators that match common Indian-app needs:
-
-```ts
-isEmail('a@b.co'); // true
-isIndianMobile('+919876512345'); // true
-isPan('ABCDE1234F'); // true
-isGstin('27AAPFU0939F1ZV'); // true
-isIfsc('HDFC0001234'); // true
-isIndianPincode('110001'); // true
-isStrongPassword('Aa1!@#$%', { requireSymbol: true }); // true
-```
-
-Plus generic helpers: `isUrl`, `isNumeric`, `isInteger`, `isAlphanumeric`, `isHexColor`, `isBetween`, `minLength`, `maxLength`.
-
----
-
-## Theme
-
-`ThemeProvider` exposes the design-token surface (colors, typography, spacing, radius, shadows, motion) and tracks the system color-scheme automatically. Read it via `useTheme()`. Every shipped component reads from the active theme — no hard-coded colors anywhere. Customize with `mergeTheme` or `initUI({ light, dark })`.
-
----
-
-## Toast
-
-Imperative `toast.success(...)` / `toast.error(...)` from anywhere in the tree, or `useToast().show(...)` inside components.
-
-```ts
-toast.success('Saved.');
-toast.error('Network is down', { description: 'Check your connection.' });
-```
-
-Mount `<ToastProvider>` once near the app root.
-
----
-
-## Components
-
-41 components across Layout, Forms & Inputs, Feedback & Status, Overlay, Navigation, and Data Display.
-
-For the full catalog with props tables and minimal usage examples, see [`docs/COMPONENTS.md`](../../docs/COMPONENTS.md).
-
-For runnable usage of every component, see [`example/`](../../example/).
-
----
-
-## Designing skeleton-aware components
-
-Presentational primitives (`Card`, `ListItem`, `Avatar`, `Badge`, `Banner`, `Chip`,
-`Rating`, `Stepper`, `ImageGallery`) accept an optional
-`loading?: boolean` prop. When `true`, the component renders its normal layout wrapped
-in `<SkeletonContent loading mode="auto">` — the walker replaces every `<Text>`,
-`<Image>`, and sized leaf `<View>` with a shimmer block matching the element's
-dimensions. When `loading` is `false` or omitted, behaviour is unchanged.
-
-Conventions for components that opt into this pattern:
-
-- **Render gracefully with undefined data.** Use optional chaining and string defaults
-  so the auto walker has leaves to skeletonize even before data arrives:
-  `{item?.title ?? ' '}`, `{item?.subtitle ?? ' '}`. Never let a `<Text>` render `undefined`.
-- **Use explicit dimensions on visual elements.** Set `width`/`height` on `<Image>` and
-  `<View>` leaves, and `fontSize` on `<Text>`, so the walker can size each shimmer
-  block correctly. Inline styles, `StyleSheet.create`, and arrays all work — they get
-  flattened.
-- **Wrap once at the top.** Don't sprinkle `<SkeletonContent>` inside subtrees; wrap the
-  component's final return so the entire layout becomes a single coherent placeholder.
-- **For data-driven lists, prefer `<SkeletonList>`.** It owns the "show N placeholder
-  rows while loading, then real data" branching so callers don't hand-roll it.
-
-Before / after with `Card`:
-
-```tsx
-// Before — caller hand-rolls a placeholder branch
-{
-  loading ? (
-    <SkeletonCard />
-  ) : (
-    <Card>
-      <Text>{site.name}</Text>
-      <Text>{site.address}</Text>
-    </Card>
-  );
-}
-
-// After — Card itself is skeleton-aware
-<Card loading={loading}>
-  <Text>{site?.name ?? ' '}</Text>
-  <Text>{site?.address ?? ' '}</Text>
-</Card>;
-```
-
-### Two flavours of `loading`
-
-Same prop name, different semantic by category:
-
-- **Display primitives** (`Card`, `ListItem`, `Avatar`, `Badge`, `Banner`, `Chip`, `Rating`,
-  `Stepper`, `ImageGallery`) — `loading={true}` renders the component as a skeleton placeholder
-  via `SkeletonContent`'s auto walker. Use when the data driving the component is still being
-  fetched.
-- **Interactive triggers** (`Button`) — `loading={true}` swaps the label for an inline `Spinner`,
-  hides leading/trailing icons, and disables press handling. The button keeps its footprint and
-  visual style. Use when an action is in flight (submit, save, delete) — pending action, not
-  data fetch.
-
-Before / after with `Button`:
-
-```tsx
-// Before — caller swaps a separate spinner in
-{
-  submitting ? <Spinner size="small" /> : <Button title="Save" onPress={save} />;
-}
-
-// After — Button itself signals the in-flight action
-<Button title="Save" loading={submitting} onPress={save} />;
-```
-
----
-
-## License
+This package is published for use inside Webority repositories. Documentation is maintained internally.
 
-MIT. Copyright © Webority Technologies.
+MIT © Webority Technologies.

package/lib/commonjs/components/Badge/Badge.js

@@ -61,28 +61,29 @@ const sizeMap = {
     dot: 10
   }
 };
-const anchorPosition = anchor => {
+const anchorPosition = (anchor, offset) => {
+  const o = -offset;
   switch (anchor) {
     case 'topLeft':
       return {
-        top: -4,
-        left: -4
+        top: o,
+        left: o
       };
     case 'bottomRight':
       return {
-        bottom: -4,
-        right: -4
+        bottom: o,
+        right: o
       };
     case 'bottomLeft':
       return {
-        bottom: -4,
-        left: -4
+        bottom: o,
+        left: o
       };
     case 'topRight':
     default:
       return {
-        top: -4,
-        right: -4
+        top: o,
+        right: o
       };
   }
 };
@@ -115,7 +116,16 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   } = props;
   const theme = (0, _index.useTheme)();
   const tones = (0, _react.useMemo)(() => toneFor(theme, tone), [theme, tone]);
-  const sz = sizeMap[size];
+  const overrides = theme.components.badge?.[size];
+  const sz = {
+    fontSize: overrides?.fontSize ?? sizeMap[size].fontSize,
+    minWidth: overrides?.minWidth ?? sizeMap[size].minWidth,
+    height: overrides?.height ?? sizeMap[size].height,
+    paddingH: overrides?.paddingHorizontal ?? sizeMap[size].paddingH,
+    dot: overrides?.dotSize ?? sizeMap[size].dot
+  };
+  const badgeBorderWidth = theme.components.badge?.borderWidth ?? 1.5;
+  const badgeAnchorOffset = theme.components.badge?.anchorOffset ?? 4;
   const formatted = variant === 'dot' ? null : formatValue(value, max);
   const shouldRender = !invisible && (variant === 'dot' || formatted !== null);
   const pulseScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
@@ -161,9 +171,9 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       }]
     }, children ? {
       position: 'absolute',
-      borderWidth: 1.5,
+      borderWidth: badgeBorderWidth,
       borderColor: theme.colors.background.elevated,
-      ...anchorPosition(anchor)
+      ...anchorPosition(anchor, badgeAnchorOffset)
     } : null, badgeStyle],
     accessible: true,
     accessibilityRole: a11yRole,
@@ -172,7 +182,7 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       style: [styles.text, {
         color: tones.text,
         fontSize: sz.fontSize,
-        fontWeight: theme.typography.fontWeight.bold
+        ...(0, _index.fontFor)(theme, 'bold')
       }, textStyle],
       numberOfLines: 1,
       allowFontScaling: false,

package/lib/commonjs/components/BottomSheet/BottomSheet.js

@@ -48,6 +48,7 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     enablePanDownToClose = true,
     enableBackdropPress = true,
     backdropOpacity = 0.5,
+    keyboardBehavior = 'none',
     handleIndicatorStyle,
     containerStyle,
     children,
@@ -240,12 +241,45 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     });
   }, [closedY, dragStartY, enablePanDownToClose, handleSnapEnd, minTopY, snapTargets, translateY]);
 
+  // ───────── Keyboard tracking ─────────
+  // keyboardOffset is added to translateY in sheetStyle so we don't disturb
+  // snap-point math. iOS gets keyboardWillShow/Hide (smoother), Android only
+  // emits keyboardDidShow/Hide.
+  const keyboardOffset = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    if (keyboardBehavior === 'none') return;
+    const showEvt = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvt = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const onShow = e => {
+      const h = e.endCoordinates?.height ?? 0;
+      keyboardOffset.value = (0, _reactNativeReanimated.withTiming)(-h, {
+        duration: 220
+      });
+    };
+    const onHide = () => {
+      keyboardOffset.value = (0, _reactNativeReanimated.withTiming)(0, {
+        duration: 220
+      });
+    };
+    const showSub = _reactNative.Keyboard.addListener(showEvt, onShow);
+    const hideSub = _reactNative.Keyboard.addListener(hideEvt, onHide);
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [keyboardBehavior, keyboardOffset]);
+
   // ───────── Animated styles ─────────
-  const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    transform: [{
-      translateY: translateY.value
-    }]
-  }));
+  const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    // Don't push past the screen top — keyboard offset is clamped to minTopY.
+    const yWithKb = translateY.value + keyboardOffset.value;
+    const clamped = yWithKb < minTopY ? minTopY : yWithKb;
+    return {
+      transform: [{
+        translateY: clamped
+      }]
+    };
+  });
   const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     // 0 opacity when sheet is closed, full backdropOpacity at minSnap height (and above).
     const closedAt = screenHeight;

package/lib/commonjs/components/Button/Button.js

@@ -26,6 +26,7 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     rightIcon,
     haptic = 'selection',
     rounded = false,
+    gradient,
     style,
     textStyle,
     pressAnimation = true,
@@ -45,9 +46,22 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     enabled: pressAnimation && isInteractive
   });
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.button?.[size] ?? {})
+  };
   const toneColors = (0, _react.useMemo)(() => toneFor(theme, tone), [theme, tone]);
   const variantStyles = (0, _react.useMemo)(() => variantFor(theme, variant, toneColors, disabled), [theme, variant, toneColors, disabled]);
+
+  // Resolve gradient: string token → theme.gradients[token]; literal passes through.
+  // Skipped when disabled (parity with disabled flat-color treatment).
+  const resolvedGradient = (0, _react.useMemo)(() => {
+    if (!gradient || disabled || variant !== 'solid') return null;
+    if (typeof gradient === 'string') {
+      return theme.gradients[gradient] ?? null;
+    }
+    return gradient;
+  }, [gradient, disabled, variant, theme.gradients]);
   const handlePress = event => {
     if (!isInteractive) return;
     if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
@@ -69,7 +83,7 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         style: [styles.label, {
           color: variantStyles.textColor,
           fontSize: sizeStyles.fontSize,
-          fontWeight: theme.typography.fontWeight.semibold
+          ...(0, _index.fontFor)(theme, 'semibold')
         }, textStyle],
         numberOfLines: 1,
         children: title
@@ -85,7 +99,7 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         scale
       }]
     }, fullWidth ? styles.fullWidth : null],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
       ref: ref,
       onPress: handlePress,
       onPressIn: pressIn,
@@ -113,15 +127,20 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         paddingVertical: sizeStyles.paddingVertical,
         minHeight: sizeStyles.minHeight,
         borderRadius: rounded ? theme.radius.full : sizeStyles.borderRadius,
-        backgroundColor: variantStyles.backgroundColor,
+        // Hide solid bg when a gradient layer covers it; preserve outline borders.
+        backgroundColor: resolvedGradient ? 'transparent' : variantStyles.backgroundColor,
         borderWidth: variantStyles.borderWidth,
         borderColor: variantStyles.borderColor,
-        opacity: !isInteractive ? 0.55 : 1
+        opacity: !isInteractive ? 0.55 : 1,
+        overflow: resolvedGradient ? 'hidden' : undefined
       }, pressed && variant !== 'solid' ? {
         backgroundColor: theme.colors.surface.pressed
       } : null, fullWidth ? styles.fullWidth : null, style],
       ...rest,
-      children: content
+      children: [resolvedGradient ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Gradient, {
+        gradient: resolvedGradient,
+        style: _reactNative.StyleSheet.absoluteFill
+      }) : null, content]
     })
   });
 });