@oxyhq/bloom 0.1.1 → 0.1.3

package/lib/typescript/commonjs/switch/types.d.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface SwitchProps {
+    /** Current on/off state */
+    value: boolean;
+    /** Called when the user toggles the switch */
+    onValueChange: (value: boolean) => void;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Container style */
+    style?: StyleProp<ViewStyle>;
+    /** Size variant */
+    size?: 'default' | 'sm';
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/commonjs/switch/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,2BAA2B;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,mBAAmB;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/typescript/module/dialog/Dialog.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.web.d.ts","sourceRoot":"","sources":["../../../../src/dialog/Dialog.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4G,MAAM,OAAO,CAAC;AAMjI,OAAO,KAAK,EAAsB,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEtF,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC/D,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQtF,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,GACX,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,kDAuF3C;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,MAAM,EACN,qBAAqB,GACtB,EAAE,gBAAgB,2CAsClB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAEtD;AAED,wBAAgB,MAAM,SAErB;AAED,wBAAgB,KAAK,4CA+BpB;AAoBD,wBAAgB,QAAQ,SAEvB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,mZAK5B,CAAC"}
+{"version":3,"file":"Dialog.web.d.ts","sourceRoot":"","sources":["../../../../src/dialog/Dialog.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4G,MAAM,OAAO,CAAC;AAOjI,OAAO,KAAK,EAAsB,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEtF,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC/D,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQtF,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,GACX,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,kDAwF3C;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,MAAM,EACN,qBAAqB,GACtB,EAAE,gBAAgB,2CAsClB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAEtD;AAED,wBAAgB,MAAM,SAErB;AAED,wBAAgB,KAAK,4CA+BpB;AAoBD,wBAAgB,QAAQ,SAEvB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,mZAK5B,CAAC"}

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

@@ -12,4 +12,5 @@ export type { ErrorBoundaryProps } from './error-boundary';
 export * from './avatar';
 export * from './loading';
 export * as PromptInput from './prompt-input';
+export * from './switch';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;AAC9C,cAAc,UAAU,CAAC"}

package/lib/typescript/module/loading/Loading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/loading/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EACV,YAAY,EAKb,MAAM,SAAS,CAAC;AAmNjB,eAAO,MAAM,OAAO,0CAAyB,CAAC"}
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/loading/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAKxD,OAAO,KAAK,EACV,YAAY,EAKb,MAAM,SAAS,CAAC;AAmNjB,eAAO,MAAM,OAAO,0CAAyB,CAAC"}

package/lib/typescript/module/loading/SpinnerIcon.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+interface SpinnerIconProps {
+    size?: number;
+    color?: string;
+    style?: ViewStyle;
+}
+/**
+ * iOS-style SVG spinner with 8 rotating rectangles and an opacity gradient trail.
+ * Requires react-native-svg and react-native-reanimated as peer dependencies.
+ * Falls back to ActivityIndicator if either is missing.
+ */
+export declare const SpinnerIcon: React.FC<SpinnerIconProps>;
+export {};
+//# sourceMappingURL=SpinnerIcon.d.ts.map

package/lib/typescript/module/loading/SpinnerIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerIcon.d.ts","sourceRoot":"","sources":["../../../../src/loading/SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAoCvE,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgElD,CAAC"}

package/lib/typescript/module/loading/index.d.ts

@@ -1,3 +1,4 @@
 export { Loading } from './Loading';
+export { SpinnerIcon } from './SpinnerIcon';
 export type { LoadingProps, LoadingVariant, LoadingSize, SpinnerLoadingProps, TopLoadingProps, SkeletonLoadingProps, InlineLoadingProps, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/loading/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/loading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/loading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,SAAS,CAAC"}

package/lib/typescript/module/switch/Switch.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SwitchProps } from './types';
+export declare const Switch: React.NamedExoticComponent<SwitchProps & React.RefAttributes<import("react-native").View>>;
+//# sourceMappingURL=Switch.d.ts.map

package/lib/typescript/module/switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAIvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgH3C,eAAO,MAAM,MAAM,4FAAwB,CAAC"}

package/lib/typescript/module/switch/index.d.ts

@@ -0,0 +1,3 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/module/switch/types.d.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface SwitchProps {
+    /** Current on/off state */
+    value: boolean;
+    /** Called when the user toggles the switch */
+    onValueChange: (value: boolean) => void;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Container style */
+    style?: StyleProp<ViewStyle>;
+    /** Size variant */
+    size?: 'default' | 'sm';
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/switch/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,2BAA2B;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,mBAAmB;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -155,6 +155,17 @@
         "default": "./lib/commonjs/loading/index.js"
       }
     },
+    "./switch": {
+      "react-native": "./src/switch/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/switch/index.d.ts",
+        "default": "./lib/module/switch/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/switch/index.d.ts",
+        "default": "./lib/commonjs/switch/index.js"
+      }
+    },
     "./prompt-input": {
       "react-native": "./src/prompt-input/index.ts",
       "import": {
@@ -256,5 +267,8 @@
       ],
       "typescript"
     ]
+  },
+  "dependencies": {
+    "react-remove-scroll-bar": "^2.3.8"
   }
 }

package/src/dialog/Dialog.web.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Pressable, Text, View, type ViewStyle } from 'react-native';
+import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { useTheme } from '../theme/use-theme';
 import { Portal } from '../portal';
@@ -75,6 +76,7 @@ export function Outer({
     <Portal>
       <Context.Provider value={context}>
         <ClosingContext.Provider value={isClosing}>
+          <RemoveScrollBar />
           <Pressable
             onPress={() => close()}
             style={{
@@ -88,7 +90,7 @@ export function Outer({
               justifyContent: webOptions?.alignCenter ? 'center' : undefined,
               paddingHorizontal: 20,
               paddingVertical: '10vh' as unknown as number,
-              overflow: 'scroll',
+              overflow: 'auto' as ViewStyle['overflow'],
             }}
           >
             <DialogBackdrop isClosing={isClosing} />

package/src/index.ts

@@ -12,3 +12,4 @@ export type { ErrorBoundaryProps } from './error-boundary';
 export * from './avatar';
 export * from './loading';
 export * as PromptInput from './prompt-input';
+export * from './switch';

package/src/loading/Loading.tsx

@@ -1,7 +1,8 @@
 import React, { memo, useEffect, useMemo } from 'react';
-import { View, Text, ActivityIndicator, StyleSheet, type DimensionValue } from 'react-native';
+import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { SpinnerIcon } from './SpinnerIcon';
 import type {
   LoadingProps,
   SpinnerLoadingProps,
@@ -52,7 +53,7 @@ const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
 
   return (
     <View style={[styles.container, style]} testID={testID}>
-      {spinnerIcon ?? <ActivityIndicator size={effectiveIconSize > 30 ? 'large' : 'small'} color={spinnerColor} />}
+      {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
       {showText && text && (
         <Text
           style={[
@@ -92,7 +93,7 @@ const TopLoading: React.FC<TopLoadingProps> = ({
     return (
       <View style={[styles.topContainer, { height: targetHeight }, style]} testID={testID}>
         <View style={[styles.topLoadingView, { height: targetHeight }]}>
-          {spinnerIcon ?? <ActivityIndicator size={effectiveIconSize > 30 ? 'large' : 'small'} color={spinnerColor} />}
+          {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
         </View>
       </View>
     );
@@ -130,7 +131,7 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   return (
     <Animated.View style={[styles.topContainer, containerAnimated]} testID={testID}>
       <Animated.View style={[styles.topLoadingView, { height: targetHeight }, innerAnimated, style]}>
-        {spinnerIcon ?? <ActivityIndicator size={effectiveIconSize > 30 ? 'large' : 'small'} color={spinnerColor} />}
+        {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
       </Animated.View>
     </Animated.View>
   );
@@ -188,7 +189,7 @@ const InlineLoading: React.FC<InlineLoadingProps> = ({
 
   return (
     <View style={[styles.inlineContainer, style]} testID={testID}>
-      {spinnerIcon ?? <ActivityIndicator size="small" color={spinnerColor} />}
+      {spinnerIcon ?? <SpinnerIcon size={SIZE_CONFIG.small.spinner} color={spinnerColor} />}
       {text && (
         <Text
           style={[

package/src/loading/SpinnerIcon.tsx

@@ -0,0 +1,115 @@
+import React, { useEffect } from 'react';
+import { ActivityIndicator, View, type ViewStyle } from 'react-native';
+
+// Lazy-loaded dependencies for the SVG spinner.
+// Falls back to ActivityIndicator if react-native-svg or react-native-reanimated are not installed.
+type SvgModuleType = typeof import('react-native-svg');
+type ReanimatedType = typeof import('react-native-reanimated');
+
+let svgModule: SvgModuleType | null = null;
+let svgModuleResolved = false;
+let reanimatedModule: ReanimatedType | null = null;
+let reanimatedResolved = false;
+
+function getSvgModule(): SvgModuleType | null {
+  if (!svgModuleResolved) {
+    svgModuleResolved = true;
+    try {
+      svgModule = require('react-native-svg');
+    } catch {
+      svgModule = null;
+    }
+  }
+  return svgModule;
+}
+
+function getReanimated(): ReanimatedType | null {
+  if (!reanimatedResolved) {
+    reanimatedResolved = true;
+    try {
+      reanimatedModule = require('react-native-reanimated');
+    } catch {
+      reanimatedModule = null;
+    }
+  }
+  return reanimatedModule;
+}
+
+interface SpinnerIconProps {
+  size?: number;
+  color?: string;
+  style?: ViewStyle;
+}
+
+/**
+ * iOS-style SVG spinner with 8 rotating rectangles and an opacity gradient trail.
+ * Requires react-native-svg and react-native-reanimated as peer dependencies.
+ * Falls back to ActivityIndicator if either is missing.
+ */
+export const SpinnerIcon: React.FC<SpinnerIconProps> = ({
+  color = '#005c67',
+  size = 26,
+  style,
+}) => {
+  const svg = getSvgModule();
+  const reanimated = getReanimated();
+
+  if (!svg || !reanimated) {
+    return <ActivityIndicator size={size > 30 ? 'large' : 'small'} color={color} />;
+  }
+
+  const { default: Svg, Rect } = svg;
+  const {
+    default: Animated,
+    useAnimatedStyle,
+    useSharedValue,
+    withRepeat,
+    withTiming,
+    Easing,
+  } = reanimated;
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const rotation = useSharedValue(0);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 400, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, [rotation, withRepeat, withTiming, Easing]);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: size,
+          height: size,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        animatedStyle,
+        style,
+      ]}
+    >
+      <Svg viewBox="0 0 100 100" width={size} height={size}>
+        <Rect fill={color} height="10" opacity="0" rx="5" ry="5" transform="rotate(-90 50 50)" width="28" x="67" y="45" />
+        <Rect fill={color} height="10" opacity="0.125" rx="5" ry="5" transform="rotate(-45 50 50)" width="28" x="67" y="45" />
+        <Rect fill={color} height="10" opacity="0.25" rx="5" ry="5" transform="rotate(0 50 50)" width="28" x="67" y="45" />
+        <Rect fill={color} height="10" opacity="0.375" rx="5" ry="5" transform="rotate(45 50 50)" width="28" x="67" y="45" />
+        <Rect fill={color} height="10" opacity="0.5" rx="5" ry="5" transform="rotate(90 50 50)" width="28" x="67" y="45" />
+        <Rect fill={color} height="10" opacity="0.625" rx="5" ry="5" transform="rotate(135 50 50)" width="28" x="67" y="45" />
+        <Rect fill={color} height="10" opacity="0.75" rx="5" ry="5" transform="rotate(180 50 50)" width="28" x="67" y="45" />
+        <Rect fill={color} height="10" opacity="0.875" rx="5" ry="5" transform="rotate(225 50 50)" width="28" x="67" y="45" />
+      </Svg>
+    </Animated.View>
+  );
+};
+
+SpinnerIcon.displayName = 'SpinnerIcon';

package/src/loading/index.ts

@@ -1,4 +1,5 @@
 export { Loading } from './Loading';
+export { SpinnerIcon } from './SpinnerIcon';
 export type {
   LoadingProps,
   LoadingVariant,

package/src/switch/Switch.tsx

@@ -0,0 +1,117 @@
+import React, { memo, useEffect, useRef } from 'react';
+import { Pressable, Animated } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { SwitchProps } from './types';
+
+const TRACK = { default: { w: 44, h: 26 }, sm: { w: 36, h: 22 } } as const;
+const THUMB = { default: 22, sm: 18 } as const;
+const PADDING = 2;
+const SQUEEZE_RATIO = 0.75; // thumb height shrinks to 75% when pressed
+
+const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, SwitchProps>(
+  ({ value, onValueChange, disabled, style, size = 'default', testID }, ref) => {
+    const theme = useTheme();
+    const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+    const pressAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      Animated.spring(anim, {
+        toValue: value ? 1 : 0,
+        useNativeDriver: false,
+        friction: 8,
+        tension: 60,
+      }).start();
+    }, [value, anim]);
+
+    const onPressIn = () => {
+      if (disabled) return;
+      Animated.spring(pressAnim, {
+        toValue: 1,
+        useNativeDriver: false,
+        friction: 8,
+        tension: 100,
+      }).start();
+    };
+
+    const onPressOut = () => {
+      Animated.spring(pressAnim, {
+        toValue: 0,
+        useNativeDriver: false,
+        friction: 8,
+        tension: 60,
+      }).start();
+    };
+
+    const track = TRACK[size];
+    const thumb = THUMB[size];
+    const travel = track.w - thumb - PADDING * 2;
+
+    const trackBg = anim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [theme.colors.border, theme.colors.primary],
+    });
+
+    const thumbX = anim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [PADDING, PADDING + travel],
+    });
+
+    const squeezedHeight = thumb * SQUEEZE_RATIO;
+
+    const thumbHeight = pressAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [thumb, squeezedHeight],
+    });
+
+    const thumbRadius = pressAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [thumb / 2, squeezedHeight / 2],
+    });
+
+    return (
+      <Pressable
+        ref={ref}
+        role="switch"
+        aria-checked={value}
+        accessibilityState={{ checked: value, disabled }}
+        onPress={() => !disabled && onValueChange(!value)}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        style={[{ opacity: disabled ? 0.4 : 1 }, style]}
+        hitSlop={4}
+        testID={testID}
+      >
+        <Animated.View
+          style={{
+            width: track.w,
+            height: track.h,
+            borderRadius: track.h / 2,
+            backgroundColor: trackBg,
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+          }}
+        >
+          <Animated.View
+            style={{
+              width: thumb,
+              height: thumbHeight,
+              borderRadius: thumbRadius,
+              backgroundColor: '#fff',
+              transform: [{ translateX: thumbX }],
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.15,
+              shadowRadius: 3,
+              elevation: 3,
+            }}
+          />
+        </Animated.View>
+      </Pressable>
+    );
+  }
+);
+
+SwitchComponent.displayName = 'Switch';
+
+export const Switch = memo(SwitchComponent);

package/src/switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './types';

package/src/switch/types.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SwitchProps {
+  /** Current on/off state */
+  value: boolean;
+  /** Called when the user toggles the switch */
+  onValueChange: (value: boolean) => void;
+  /** Whether the switch is disabled */
+  disabled?: boolean;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  /** Size variant */
+  size?: 'default' | 'sm';
+  testID?: string;
+}