@frosted-ui/react-native 0.0.1-canary.91

package/dist/components/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACvF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAe,KAAK,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAC;AAoG9E,KAAK,mBAAmB,GAAG,SAAS,GAAG;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,iBAAS,cAAc,CAAC,EACtB,IAAU,EACV,KAAgB,EAChB,KAAc,EACd,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAuBrB;AAMD,KAAK,iBAAiB,GAAG,SAAS,GAAG;IACnC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,IAAU,EAAE,KAAc,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAqCvF;AAMD,KAAK,iBAAiB,GAAG,SAAS,GAAG;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,KAAc,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAiB3E;AAMD,QAAA,MAAM,QAAQ;;;;CAIb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/skeleton.js

@@ -0,0 +1,153 @@
+import { getAvatarSize } from '../components/avatar';
+import { useThemeVars } from '../lib/use-theme-vars';
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+function resolveAccentFromColor(color) {
+    if (!color)
+        return 'gray';
+    switch (color) {
+        case 'danger':
+            return 'red';
+        case 'warning':
+            return 'amber';
+        case 'success':
+            return 'green';
+        case 'info':
+            return 'blue';
+        default:
+            return color;
+    }
+}
+// Text border radius based on size
+function getTextBorderRadius(size) {
+    switch (size) {
+        case '0':
+        case '1':
+        case '2':
+            return 4; // radius-1
+        case '3':
+        case '4':
+            return 6; // radius-2
+        case '5':
+        case '6':
+            return 8; // radius-3
+        case '7':
+        case '8':
+            return 10; // radius-4
+        case '9':
+            return 12; // radius-5
+    }
+}
+// Pulse animation hook using Reanimated (runs on UI thread) - native only
+function usePulseAnimation() {
+    const opacity = useSharedValue(1);
+    React.useEffect(() => {
+        // Skip on web - we use CSS animations there
+        if (Platform.OS === 'web')
+            return;
+        // Use withRepeat with reverse=true for smooth looping: 1 → 0.5 → 1 → 0.5 → ...
+        opacity.value = withRepeat(withTiming(0.5, { duration: 1000, easing: Easing.bezier(0.4, 0, 0.6, 1) }), -1, // Infinite repeat
+        true // Reverse on each iteration
+        );
+    }, [opacity]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+    }));
+    return animatedStyle;
+}
+// CSS animation style for web (GPU-accelerated)
+const webPulseStyle = Platform.OS === 'web'
+    ? {
+        animationName: 'skeleton-pulse',
+        animationDuration: '2s',
+        animationTimingFunction: 'cubic-bezier(0.4, 0, 0.6, 1)',
+        animationIterationCount: 'infinite',
+    }
+    : undefined;
+// Inject keyframes on web
+if (Platform.OS === 'web' && typeof document !== 'undefined') {
+    const styleId = 'skeleton-pulse-keyframes';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      @keyframes skeleton-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+function SkeletonAvatar({ size = '3', shape = 'circle', color = 'gray', style, ...props }) {
+    const { colors } = useThemeVars();
+    const animatedStyle = usePulseAnimation();
+    const accentColor = resolveAccentFromColor(color);
+    const palette = colors.palettes[accentColor];
+    const avatarSize = getAvatarSize(size);
+    const borderRadius = shape === 'circle' ? avatarSize / 2 : avatarSize * 0.25;
+    const avatarStyle = {
+        width: avatarSize,
+        height: avatarSize,
+        borderRadius,
+        backgroundColor: palette.a3,
+        flexShrink: 0,
+    };
+    if (Platform.OS === 'web') {
+        return <View style={[avatarStyle, webPulseStyle, style]} {...props}/>;
+    }
+    return <Animated.View style={[avatarStyle, animatedStyle, style]} {...props}/>;
+}
+function SkeletonText({ size = '3', color = 'gray', style, ...props }) {
+    const { colors, typography } = useThemeVars();
+    const animatedStyle = usePulseAnimation();
+    const accentColor = resolveAccentFromColor(color);
+    const palette = colors.palettes[accentColor];
+    const typo = typography[size];
+    const borderRadius = getTextBorderRadius(size);
+    // Container matches line-height, inner bar matches font-size
+    const containerStyle = {
+        height: typo.lineHeight,
+        justifyContent: 'center',
+        alignItems: 'stretch',
+    };
+    const barStyle = {
+        height: typo.fontSize,
+        borderRadius,
+        backgroundColor: palette.a3,
+        width: '100%',
+    };
+    if (Platform.OS === 'web') {
+        return (<View style={[containerStyle, style]} {...props}>
+        <View style={[barStyle, webPulseStyle]}/>
+      </View>);
+    }
+    return (<View style={[containerStyle, style]} {...props}>
+      <Animated.View style={[barStyle, animatedStyle]}/>
+    </View>);
+}
+function SkeletonRect({ color = 'gray', style, ...props }) {
+    const { colors } = useThemeVars();
+    const animatedStyle = usePulseAnimation();
+    const accentColor = resolveAccentFromColor(color);
+    const palette = colors.palettes[accentColor];
+    const rectStyle = {
+        backgroundColor: palette.a3,
+        flexShrink: 0,
+    };
+    if (Platform.OS === 'web') {
+        return <View style={[rectStyle, webPulseStyle, style]} {...props}/>;
+    }
+    return <Animated.View style={[rectStyle, animatedStyle, style]} {...props}/>;
+}
+// ============================================================================
+// Export composite component
+// ============================================================================
+const Skeleton = {
+    Avatar: SkeletonAvatar,
+    Text: SkeletonText,
+    Rect: SkeletonRect,
+};
+export { Skeleton, SkeletonAvatar, SkeletonRect, SkeletonText };
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"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"}

package/dist/components/spinner.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { type ViewStyle } from 'react-native';
+type SpinnerSize = '1' | '2' | '3' | '4' | '5' | '6';
+interface SpinnerProps {
+    size?: SpinnerSize;
+    loading?: boolean;
+    children?: React.ReactNode;
+    color?: string;
+    style?: ViewStyle;
+}
+declare function Spinner({ size, loading, children, color, style }: SpinnerProps): React.JSX.Element;
+declare namespace Spinner {
+    var displayName: string;
+}
+export { Spinner };
+export type { SpinnerProps, SpinnerSize };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/components/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAc9D,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAErD,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAyKD,iBAAS,OAAO,CAAC,EAAE,IAAU,EAAE,OAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,qBAgFpF;kBAhFQ,OAAO;;;AAoFhB,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/spinner.js

@@ -0,0 +1,199 @@
+import { useThemeVars } from '../lib/use-theme-vars';
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming, } from 'react-native-reanimated';
+// ============================================================================
+// Size helpers
+// ============================================================================
+function getSpinnerSize(size) {
+    switch (size) {
+        case '1':
+            return 12; // --space-3
+        case '2':
+            return 16; // --space-4
+        case '3':
+            return 20; // 1.25 * --space-4
+        case '4':
+            return 24; // --space-5
+        case '5':
+            return 32; // --space-6
+        case '6':
+            return 40; // --space-7
+        default:
+            return 16;
+    }
+}
+// ============================================================================
+// Spinner Leaf Component
+// ============================================================================
+const ANIMATION_DURATION = 800;
+const NUM_LEAVES = 8;
+function SpinnerLeaf({ index, spinnerSize, color }) {
+    // Web CSS uses negative animation-delay: -(800 - index * 100)ms
+    // This means each leaf starts at a different phase of the animation
+    // Leaf 0: starts at 0% through cycle (opacity 1)
+    // Leaf 1: starts at 87.5% through cycle
+    // ...
+    // Leaf 7: starts at 12.5% through cycle
+    // Calculate where in the animation cycle this leaf should start
+    // Phase goes from 0 to 1 over the animation duration
+    // Web delay is -(DURATION - index * DURATION/8), so time elapsed is (DURATION - index * DURATION/8)
+    // Phase = (8 - index) / 8 for leaf at index (wrapping around)
+    const phaseOffset = ((NUM_LEAVES - index) % NUM_LEAVES) / NUM_LEAVES;
+    // Opacity goes from 1 to 0.25 (range of 0.75)
+    // At phase p: opacity = 1 - p * 0.75
+    const initialOpacity = 1 - phaseOffset * 0.75;
+    const opacity = useSharedValue(initialOpacity);
+    // Calculate how much time remains in the first cycle
+    const remainingDuration = ANIMATION_DURATION * (1 - phaseOffset);
+    React.useEffect(() => {
+        // First, complete the current cycle from the starting point
+        // Then repeat the full cycle infinitely
+        opacity.value = withSequence(
+        // Complete the first partial cycle
+        withTiming(0.25, {
+            duration: remainingDuration,
+            easing: Easing.linear,
+        }), 
+        // Then repeat full cycles
+        withRepeat(withSequence(
+        // Jump back to 1 instantly
+        withTiming(1, { duration: 0 }), 
+        // Animate to 0.25
+        withTiming(0.25, {
+            duration: ANIMATION_DURATION,
+            easing: Easing.linear,
+        })), -1, // infinite
+        false));
+    }, [opacity, remainingDuration]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+    }));
+    // Calculate rotation for this leaf
+    const rotation = index * 45; // 360 / 8 = 45 degrees per leaf
+    // Leaf dimensions
+    const leafWidth = spinnerSize * 0.125; // 12.5%
+    const leafHeight = spinnerSize;
+    const dotHeight = leafHeight * 0.3; // 30%
+    const borderRadius = Math.max(2, leafWidth / 2);
+    return (<Animated.View style={[
+            {
+                position: 'absolute',
+                width: leafWidth,
+                height: leafHeight,
+                left: (spinnerSize - leafWidth) / 2,
+                top: 0,
+                alignItems: 'center',
+                transform: [{ rotate: `${rotation}deg` }],
+                transformOrigin: 'center center',
+            },
+            animatedStyle,
+        ]}>
+      <View style={{
+            width: '100%',
+            height: dotHeight,
+            borderRadius,
+            backgroundColor: color,
+        }}/>
+    </Animated.View>);
+}
+// Web-specific CSS animation version for better performance
+function SpinnerLeafWeb({ index, spinnerSize, color }) {
+    const rotation = index * 45;
+    const leafWidth = spinnerSize * 0.125;
+    const leafHeight = spinnerSize;
+    const dotHeight = leafHeight * 0.3;
+    const borderRadius = Math.max(2, leafWidth / 2);
+    // Animation delay (negative to start mid-animation)
+    const animationDelay = -(ANIMATION_DURATION - index * (ANIMATION_DURATION / NUM_LEAVES));
+    return (<View style={{
+            position: 'absolute',
+            width: leafWidth,
+            height: leafHeight,
+            left: (spinnerSize - leafWidth) / 2,
+            top: 0,
+            alignItems: 'center',
+            transform: [{ rotate: `${rotation}deg` }],
+            transformOrigin: 'center center',
+            animation: `spinner-leaf-fade ${ANIMATION_DURATION}ms linear infinite`,
+            animationDelay: `${animationDelay}ms`,
+        }}>
+      <View style={{
+            width: '100%',
+            height: dotHeight,
+            borderRadius,
+            backgroundColor: color,
+        }}/>
+    </View>);
+}
+// ============================================================================
+// Spinner Component
+// ============================================================================
+function Spinner({ size = '2', loading = true, children, color, style }) {
+    const { colors } = useThemeVars();
+    const spinnerSize = getSpinnerSize(size);
+    // Use gray-12 as default color (matches text color in both light/dark modes)
+    const resolvedColor = color ?? colors.palettes.gray['12'];
+    // Inject CSS keyframes for web
+    React.useEffect(() => {
+        if (Platform.OS === 'web') {
+            const styleId = 'frosted-ui-spinner-keyframes';
+            if (!document.getElementById(styleId)) {
+                const styleEl = document.createElement('style');
+                styleEl.id = styleId;
+                styleEl.textContent = `
+          @keyframes spinner-leaf-fade {
+            from { opacity: 1; }
+            to { opacity: 0.25; }
+          }
+        `;
+                document.head.appendChild(styleEl);
+            }
+        }
+    }, []);
+    if (!loading) {
+        return <>{children}</>;
+    }
+    const LeafComponent = Platform.OS === 'web' ? SpinnerLeafWeb : SpinnerLeaf;
+    const spinner = (<View style={[
+            {
+                width: spinnerSize,
+                height: spinnerSize,
+                position: 'relative',
+                opacity: 0.65,
+            },
+            style,
+        ]}>
+      {Array.from({ length: NUM_LEAVES }).map((_, index) => (<LeafComponent key={index} index={index} spinnerSize={spinnerSize} color={resolvedColor}/>))}
+    </View>);
+    if (children === undefined) {
+        return spinner;
+    }
+    // Wrap children with spinner overlay
+    return (<View style={{
+            position: 'relative',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}>
+      {/* Hidden children for layout */}
+      <View style={{ opacity: 0 }} aria-hidden pointerEvents="none">
+        {children}
+      </View>
+
+      {/* Spinner overlay */}
+      <View style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}>
+        {spinner}
+      </View>
+    </View>);
+}
+Spinner.displayName = 'Spinner';
+export { Spinner };
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../src/components/spinner.tsx"],"names":[],"mappings":"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"}

package/dist/components/switch.d.ts

@@ -0,0 +1,13 @@
+import type { Color } from '../lib/types';
+import * as SwitchPrimitive from '@rn-primitives/switch';
+import * as React from 'react';
+declare const switchSizes: readonly ["1", "2", "3"];
+type SwitchSize = (typeof switchSizes)[number];
+type SwitchProps = Omit<SwitchPrimitive.RootProps, 'children'> & {
+    size?: SwitchSize;
+    color?: Color;
+};
+declare function Switch({ size, color, checked, disabled, onCheckedChange, onFocus, onBlur, ...props }: SwitchProps): React.JSX.Element;
+export { Switch };
+export type { SwitchProps };
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,KAAK,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,KAAK,eAAe,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,WAAW,0BAA2B,CAAC;AAE7C,KAAK,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AA0D/C,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,IAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,eAAe,EACf,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,EAAE,WAAW,qBA6Kb;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/switch.js

@@ -0,0 +1,204 @@
+import { useThemeVars } from '../lib/use-theme-vars';
+import * as SwitchPrimitive from '@rn-primitives/switch';
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+const switchSizes = ['1', '2', '3'];
+function resolveAccentFromColor(color) {
+    if (!color)
+        return 'blue';
+    switch (color) {
+        case 'danger':
+            return 'red';
+        case 'warning':
+            return 'amber';
+        case 'success':
+            return 'green';
+        case 'info':
+            return 'blue';
+        default:
+            return color;
+    }
+}
+// Size styles from CSS:
+// Size 1: --switch-height: var(--space-4) = 16px
+// Size 2: --switch-height: var(--space-5) = 24px
+// Size 3: --switch-height: var(--space-6) = 32px
+// --switch-width: calc(var(--switch-height) * 1.75)
+// --switch-padding: 1px
+// --switch-thumb-size: calc(var(--switch-height) - var(--switch-padding) * 2)
+function getSizeStyle(size) {
+    const padding = 1;
+    switch (size) {
+        case '1': {
+            const height = 16;
+            const width = height * 1.75; // 28
+            const thumbSize = height - padding * 2; // 14
+            const translateX = width - height; // 12
+            return { height, width, padding, thumbSize, translateX };
+        }
+        case '2': {
+            const height = 24;
+            const width = height * 1.75; // 42
+            const thumbSize = height - padding * 2; // 22
+            const translateX = width - height; // 18
+            return { height, width, padding, thumbSize, translateX };
+        }
+        case '3': {
+            const height = 32;
+            const width = height * 1.75; // 56
+            const thumbSize = height - padding * 2; // 30
+            const translateX = width - height; // 24
+            return { height, width, padding, thumbSize, translateX };
+        }
+    }
+}
+function Switch({ size = '2', color, checked, disabled, onCheckedChange, onFocus, onBlur, ...props }) {
+    const { colors } = useThemeVars();
+    const [focused, setFocused] = React.useState(false);
+    const accentColor = resolveAccentFromColor(color);
+    const palette = colors.palettes[accentColor];
+    const gray = colors.palettes.gray;
+    const { height, width, padding, thumbSize, translateX } = getSizeStyle(size);
+    // Track base style
+    const trackBaseStyle = {
+        width,
+        height,
+        borderRadius: height / 2,
+        padding,
+        justifyContent: 'center',
+    };
+    // Track state-based styles
+    let trackStateStyle;
+    if (disabled) {
+        // Disabled state - same inset shadow as unchecked
+        trackStateStyle = {
+            backgroundColor: gray.a3,
+            ...(Platform.OS === 'web' && {
+                boxShadow: `inset 0 0 0 1px ${gray.a3}, inset 0 1.5px 2px 0 ${gray.a2}`,
+            }),
+        };
+    }
+    else if (checked) {
+        // Checked state - accent background with inset shadow for inner border
+        trackStateStyle = {
+            backgroundColor: palette['9'],
+            ...(Platform.OS === 'web' && {
+                boxShadow: `inset 0 0 0 1px ${gray.a3}, inset 0 0 0 1px ${palette.a4}, inset 0 1.5px 2px 0 rgba(0,0,0,0.1)`,
+            }),
+        };
+    }
+    else {
+        // Unchecked state - gray background with inset shadow (--shadow-1)
+        // --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2)
+        trackStateStyle = {
+            backgroundColor: gray.a4,
+            ...(Platform.OS === 'web' && {
+                boxShadow: `inset 0 0 0 1px ${gray.a5}, inset 0 1.5px 2px 0 ${gray.a2}`,
+            }),
+        };
+    }
+    // Focus style
+    const focusStyle = focused && !disabled
+        ? {
+            outlineWidth: 2,
+            outlineStyle: 'solid',
+            outlineColor: palette.a8,
+            outlineOffset: 2,
+        }
+        : undefined;
+    const trackCombinedStyle = {
+        ...trackBaseStyle,
+        ...trackStateStyle,
+        ...focusStyle,
+    };
+    // Thumb base style
+    const thumbBaseStyle = {
+        width: thumbSize,
+        height: thumbSize,
+        borderRadius: thumbSize / 2,
+        backgroundColor: 'white',
+    };
+    // Thumb shadow based on state
+    let thumbShadowStyle;
+    if (disabled) {
+        // Disabled thumb - visible border like other states
+        thumbShadowStyle = {
+            backgroundColor: gray['2'],
+            ...(Platform.OS === 'web'
+                ? {
+                    boxShadow: `0 0 0 1px ${gray.a3}, 0 1px 3px rgba(0,0,0,0.05)`,
+                }
+                : {
+                    shadowColor: '#000',
+                    shadowOpacity: 0.05,
+                    shadowOffset: { width: 0, height: 1 },
+                    shadowRadius: 2,
+                }),
+        };
+    }
+    else if (checked) {
+        // Checked thumb shadow - includes accent border and left shadow
+        thumbShadowStyle =
+            Platform.OS === 'web'
+                ? {
+                    boxShadow: `0 1px 3px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.05), 0 0 0 1px ${palette.a4}, -1px 0 1px rgba(0,0,0,0.1)`,
+                }
+                : {
+                    shadowColor: '#000',
+                    shadowOpacity: 0.15,
+                    shadowOffset: { width: -1, height: 1 },
+                    shadowRadius: 2,
+                    elevation: 2,
+                };
+    }
+    else {
+        // Unchecked thumb shadow
+        thumbShadowStyle =
+            Platform.OS === 'web'
+                ? {
+                    boxShadow: `0 1px 3px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.08)`,
+                }
+                : {
+                    shadowColor: '#000',
+                    shadowOpacity: 0.15,
+                    shadowOffset: { width: 0, height: 1 },
+                    shadowRadius: 2,
+                    elevation: 2,
+                };
+    }
+    // Thumb position based on checked state
+    const thumbTransformStyle = {
+        transform: [{ translateX: checked ? translateX : 0 }],
+    };
+    const thumbCombinedStyle = {
+        ...thumbBaseStyle,
+        ...thumbShadowStyle,
+        ...thumbTransformStyle,
+    };
+    const handleFocus = React.useCallback((e) => {
+        if (Platform.OS === 'web') {
+            const target = e.target;
+            if (target?.matches?.(':focus-visible')) {
+                setFocused(true);
+            }
+        }
+        onFocus?.(e);
+    }, [onFocus]);
+    const handleBlur = React.useCallback((e) => {
+        setFocused(false);
+        onBlur?.(e);
+    }, [onBlur]);
+    // Reset default focus styles
+    const rootStyle = {
+        outlineWidth: 0,
+    };
+    return (<SwitchPrimitive.Root checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} onFocus={handleFocus} onBlur={handleBlur} style={rootStyle} {...props}>
+      <View style={trackCombinedStyle}>
+        <SwitchPrimitive.Thumb>
+          <View style={thumbCombinedStyle}/>
+        </SwitchPrimitive.Thumb>
+      </View>
+    </SwitchPrimitive.Root>);
+}
+export { Switch };
+//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,eAAe,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAE9D,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC;AAI7C,SAAS,sBAAsB,CAAC,KAAa;IAC3C,IAAI,CAAC,KAAK;QAAE,OAAO,MAAM,CAAC;IAC1B,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC;QACf,KAAK,SAAS;YACZ,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;YACZ,OAAO,OAAO,CAAC;QACjB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB;YACE,OAAO,KAAoB,CAAC;IAChC,CAAC;AACH,CAAC;AAED,wBAAwB;AACxB,iDAAiD;AACjD,iDAAiD;AACjD,iDAAiD;AACjD,oDAAoD;AACpD,wBAAwB;AACxB,8EAA8E;AAC9E,SAAS,YAAY,CAAC,IAAgB;IAOpC,MAAM,OAAO,GAAG,CAAC,CAAC;IAClB,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,GAAG,CAAC,CAAC,CAAC;YACT,MAAM,MAAM,GAAG,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC,KAAK;YAClC,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK;YAC7C,MAAM,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,KAAK;YACxC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;QAC3D,CAAC;QACD,KAAK,GAAG,CAAC,CAAC,CAAC;YACT,MAAM,MAAM,GAAG,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC,KAAK;YAClC,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK;YAC7C,MAAM,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,KAAK;YACxC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;QAC3D,CAAC;QACD,KAAK,GAAG,CAAC,CAAC,CAAC;YACT,MAAM,MAAM,GAAG,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC,KAAK;YAClC,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK;YAC7C,MAAM,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,KAAK;YACxC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;QAC3D,CAAC;IACH,CAAC;AACH,CAAC;AAOD,SAAS,MAAM,CAAC,EACd,IAAI,GAAG,GAAG,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,eAAe,EACf,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IAElC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAE7E,mBAAmB;IACnB,MAAM,cAAc,GAAc;QAChC,KAAK;QACL,MAAM;QACN,YAAY,EAAE,MAAM,GAAG,CAAC;QACxB,OAAO;QACP,cAAc,EAAE,QAAQ;KACzB,CAAC;IAEF,2BAA2B;IAC3B,IAAI,eAA0B,CAAC;IAC/B,IAAI,QAAQ,EAAE,CAAC;QACb,kDAAkD;QAClD,eAAe,GAAG;YAChB,eAAe,EAAE,IAAI,CAAC,EAAE;YACxB,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI;gBAC3B,SAAS,EAAE,mBAAmB,IAAI,CAAC,EAAE,yBAAyB,IAAI,CAAC,EAAE,EAAE;aACxE,CAAC;SACH,CAAC;IACJ,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACnB,uEAAuE;QACvE,eAAe,GAAG;YAChB,eAAe,EAAE,OAAO,CAAC,GAAG,CAAC;YAC7B,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI;gBAC3B,SAAS,EAAE,mBAAmB,IAAI,CAAC,EAAE,qBAAqB,OAAO,CAAC,EAAE,uCAAuC;aAC5G,CAAC;SACH,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,mEAAmE;QACnE,iFAAiF;QACjF,eAAe,GAAG;YAChB,eAAe,EAAE,IAAI,CAAC,EAAE;YACxB,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI;gBAC3B,SAAS,EAAE,mBAAmB,IAAI,CAAC,EAAE,yBAAyB,IAAI,CAAC,EAAE,EAAE;aACxE,CAAC;SACH,CAAC;IACJ,CAAC;IAED,cAAc;IACd,MAAM,UAAU,GACd,OAAO,IAAI,CAAC,QAAQ;QAClB,CAAC,CAAC;YACE,YAAY,EAAE,CAAC;YACf,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,OAAO,CAAC,EAAE;YACxB,aAAa,EAAE,CAAC;SACjB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,kBAAkB,GAAc;QACpC,GAAG,cAAc;QACjB,GAAG,eAAe;QAClB,GAAG,UAAU;KACd,CAAC;IAEF,mBAAmB;IACnB,MAAM,cAAc,GAAc;QAChC,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,YAAY,EAAE,SAAS,GAAG,CAAC;QAC3B,eAAe,EAAE,OAAO;KACzB,CAAC;IAEF,8BAA8B;IAC9B,IAAI,gBAA2B,CAAC;IAChC,IAAI,QAAQ,EAAE,CAAC;QACb,oDAAoD;QACpD,gBAAgB,GAAG;YACjB,eAAe,EAAE,IAAI,CAAC,GAAG,CAAC;YAC1B,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK;gBACvB,CAAC,CAAC;oBACE,SAAS,EAAE,aAAa,IAAI,CAAC,EAAE,8BAA8B;iBAC9D;gBACH,CAAC,CAAC;oBACE,WAAW,EAAE,MAAM;oBACnB,aAAa,EAAE,IAAI;oBACnB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;oBACrC,YAAY,EAAE,CAAC;iBAChB,CAAC;SACP,CAAC;IACJ,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACnB,gEAAgE;QAChE,gBAAgB;YACd,QAAQ,CAAC,EAAE,KAAK,KAAK;gBACnB,CAAC,CAAC;oBACE,SAAS,EAAE,qGAAqG,OAAO,CAAC,EAAE,8BAA8B;iBACzJ;gBACH,CAAC,CAAC;oBACE,WAAW,EAAE,MAAM;oBACnB,aAAa,EAAE,IAAI;oBACnB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;oBACtC,YAAY,EAAE,CAAC;oBACf,SAAS,EAAE,CAAC;iBACb,CAAC;IACV,CAAC;SAAM,CAAC;QACN,yBAAyB;QACzB,gBAAgB;YACd,QAAQ,CAAC,EAAE,KAAK,KAAK;gBACnB,CAAC,CAAC;oBACE,SAAS,EAAE,yFAAyF;iBACrG;gBACH,CAAC,CAAC;oBACE,WAAW,EAAE,MAAM;oBACnB,aAAa,EAAE,IAAI;oBACnB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;oBACrC,YAAY,EAAE,CAAC;oBACf,SAAS,EAAE,CAAC;iBACb,CAAC;IACV,CAAC;IAED,wCAAwC;IACxC,MAAM,mBAAmB,GAAc;QACrC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;KACtD,CAAC;IAEF,MAAM,kBAAkB,GAAc;QACpC,GAAG,cAAc;QACjB,GAAG,gBAAgB;QACnB,GAAG,mBAAmB;KACvB,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAA6C,EAAE,EAAE;QAChD,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;YAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA4C,CAAC;YAC9D,IAAI,MAAM,EAAE,OAAO,EAAE,CAAC,gBAAgB,CAAC,EAAE,CAAC;gBACxC,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;QACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACf,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,CAA4C,EAAE,EAAE;QAC/C,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,6BAA6B;IAC7B,MAAM,SAAS,GAAc;QAC3B,YAAY,EAAE,CAAC;KAChB,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,KAAK,CAAC,CACV;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC9B;QAAA,CAAC,eAAe,CAAC,KAAK,CACpB;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,EAClC;QAAA,EAAE,eAAe,CAAC,KAAK,CACzB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/tabs.d.ts

@@ -0,0 +1,25 @@
+import * as TabsPrimitive from '@rn-primitives/tabs';
+import * as React from 'react';
+declare const tabsSizes: readonly ["1", "2"];
+type TabsSize = (typeof tabsSizes)[number];
+type TabsRootProps = TabsPrimitive.RootProps & {
+    size?: TabsSize;
+};
+declare function TabsRoot({ size, value, onValueChange, children, ...props }: TabsRootProps): React.JSX.Element;
+type TabsListProps = TabsPrimitive.ListProps;
+declare function TabsList({ children, ...props }: TabsListProps): React.JSX.Element;
+type TabsTriggerProps = Omit<TabsPrimitive.TriggerProps, 'children'> & {
+    children?: React.ReactNode;
+};
+declare function TabsTrigger({ value, children, ...props }: TabsTriggerProps): React.JSX.Element;
+type TabsContentProps = TabsPrimitive.ContentProps;
+declare function TabsContent({ ...props }: TabsContentProps): React.JSX.Element;
+declare const Tabs: {
+    Root: typeof TabsRoot;
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+};
+export { Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger };
+export type { TabsContentProps, TabsListProps, TabsRootProps, TabsTriggerProps };
+//# sourceMappingURL=tabs.d.ts.map