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

package/dist/components/spinner.js

@@ -0,0 +1,199 @@
+import { useThemeTokens } from '../lib/use-theme-tokens';
+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 } = useThemeTokens();
+    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,12 @@
+import type { Color } from '../lib/types';
+import * as SwitchPrimitive from '@rn-primitives/switch';
+import * as React from 'react';
+type SwitchSize = '1' | '2' | '3';
+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;AAEzC,OAAO,KAAK,eAAe,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AA0ClC,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,qBA8Kb;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/switch.js

@@ -0,0 +1,188 @@
+import { useThemeTokens } from '../lib/use-theme-tokens';
+import * as SwitchPrimitive from '@rn-primitives/switch';
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+// 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 } = useThemeTokens();
+    const [focused, setFocused] = React.useState(false);
+    const gray = colors.palettes.gray;
+    // Semantic colors (accent, danger, etc.) are added by useThemeTokens
+    // Fallback to gray if palette key doesn't exist
+    const palette = colors.palettes[color ?? 'accent'] ?? 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":"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"}

package/dist/components/tabs.d.ts

@@ -0,0 +1,26 @@
+import type { Color } from '../lib/types';
+import * as TabsPrimitive from '@rn-primitives/tabs';
+import * as React from 'react';
+type TabsSize = '1' | '2';
+type TabsRootProps = TabsPrimitive.RootProps & {
+    size?: TabsSize;
+    color?: Color;
+};
+declare function TabsRoot({ size, color, 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,KAAK,aAAa,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AAgD1B,KAAK,aAAa,GAAG,aAAa,CAAC,SAAS,GAAG;IAC7C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAAE,IAAU,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAa/F;AAED,KAAK,aAAa,GAAG,aAAa,CAAC,SAAS,CAAC;AAE7C,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAoBtD;AAiED,KAAK,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAcnE;AAED,KAAK,gBAAgB,GAAG,aAAa,CAAC,YAAY,CAAC;AAEnD,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAElD;AAED,QAAA,MAAM,IAAI;;;;;CAKT,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/tabs.js

@@ -0,0 +1,125 @@
+import { Text, TextStyleContext } from '../components/text';
+import { useThemeTokens } from '../lib/use-theme-tokens';
+import * as TabsPrimitive from '@rn-primitives/tabs';
+import * as React from 'react';
+import { View } from 'react-native';
+const TabsContext = React.createContext({
+    size: '2',
+    color: 'accent',
+    value: undefined,
+});
+// Size styles from CSS:
+// Size 1: height: 36px, font-size-1
+// Size 2: height: var(--space-7) = 40px, font-size-2
+function getListHeight(size) {
+    switch (size) {
+        case '1':
+            return 36;
+        case '2':
+            return 40;
+    }
+}
+function getTextSize(size) {
+    switch (size) {
+        case '1':
+            return '1';
+        case '2':
+            return '2';
+    }
+}
+function getTriggerPadding(size) {
+    switch (size) {
+        case '1':
+            return { paddingX: 4, innerPaddingX: 6, innerPaddingY: 4 }; // space-1 = 4px
+        case '2':
+            return { paddingX: 4, innerPaddingX: 10, innerPaddingY: 4 }; // 1.25 * space-2 = 10px
+    }
+}
+function TabsRoot({ size = '2', color, value, onValueChange, children, ...props }) {
+    const contextValue = React.useMemo(() => ({ size, color: color ?? 'accent', value }), [size, color, value]);
+    return (<TabsContext.Provider value={contextValue}>
+      <TabsPrimitive.Root value={value} onValueChange={onValueChange} {...props}>
+        {children}
+      </TabsPrimitive.Root>
+    </TabsContext.Provider>);
+}
+function TabsList({ children, ...props }) {
+    const { size } = React.useContext(TabsContext);
+    const { colors } = useThemeTokens();
+    const gray = colors.palettes.gray;
+    const height = getListHeight(size);
+    const listStyle = {
+        flexDirection: 'row',
+        height,
+        borderBottomWidth: 1,
+        borderBottomColor: gray.a5,
+        alignItems: 'stretch',
+    };
+    return (<TabsPrimitive.List {...props}>
+      <View style={listStyle}>{children}</View>
+    </TabsPrimitive.List>);
+}
+function TabsTriggerInner({ value, hovered, children }) {
+    const { size, color, value: activeValue } = React.useContext(TabsContext);
+    const { colors } = useThemeTokens();
+    const gray = colors.palettes.gray;
+    // Use the color from context, falling back to accent palette
+    const palette = colors.palettes[color] ?? gray;
+    const isActive = value === activeValue;
+    const { paddingX, innerPaddingX, innerPaddingY } = getTriggerPadding(size);
+    const textSize = getTextSize(size);
+    // Text color - gray-12 on hover or active, gray-a11 otherwise
+    const textColor = isActive || hovered ? gray['12'] : gray.a11;
+    // Trigger wrapper style - stretch to full height
+    const triggerStyle = {
+        paddingHorizontal: paddingX,
+        flexShrink: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+        height: '100%',
+    };
+    // Inner content style with hover background
+    const innerStyle = {
+        paddingHorizontal: innerPaddingX,
+        paddingVertical: innerPaddingY,
+        borderRadius: size === '1' ? 4 : 6, // radius-2 or radius-3
+        backgroundColor: hovered ? gray.a3 : undefined,
+    };
+    // Active indicator (bottom border)
+    const activeIndicatorStyle = {
+        position: 'absolute',
+        bottom: -1,
+        left: 0,
+        right: 0,
+        height: 2,
+        backgroundColor: palette['10'],
+    };
+    // Wrap string children in Text component
+    const content = typeof children === 'string' ? <Text>{children}</Text> : children;
+    return (<TextStyleContext.Provider value={{ size: textSize, weight: isActive ? 'medium' : 'regular', color: textColor }}>
+      <View style={triggerStyle}>
+        <View style={innerStyle}>{content}</View>
+        {isActive && <View style={activeIndicatorStyle}/>}
+      </View>
+    </TextStyleContext.Provider>);
+}
+function TabsTrigger({ value, children, ...props }) {
+    const [hovered, setHovered] = React.useState(false);
+    return (<TabsPrimitive.Trigger value={value} onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)} {...props}>
+      <TabsTriggerInner value={value} hovered={hovered}>
+        {children}
+      </TabsTriggerInner>
+    </TabsPrimitive.Trigger>);
+}
+function TabsContent({ ...props }) {
+    return <TabsPrimitive.Content {...props}/>;
+}
+const Tabs = {
+    Root: TabsRoot,
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Content: TabsContent,
+};
+export { Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger };
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

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

package/dist/components/text-area.d.ts

@@ -0,0 +1,16 @@
+import { type TextInputSize, type TextInputVariant } from '../lib/text-input-styles';
+import type { Color } from '../lib/types';
+import * as React from 'react';
+import { type TextInputProps, type TextStyle } from 'react-native';
+type TextAreaSize = TextInputSize;
+type TextAreaVariant = TextInputVariant;
+interface TextAreaProps extends Omit<TextInputProps, 'style'> {
+    size?: TextAreaSize;
+    variant?: TextAreaVariant;
+    color?: Color;
+    style?: TextStyle;
+}
+declare function TextArea({ size, variant, color, style, editable, ...props }: TextAreaProps): React.JSX.Element;
+export { TextArea };
+export type { TextAreaProps, TextAreaSize, TextAreaVariant };
+//# sourceMappingURL=text-area.d.ts.map

package/dist/components/text-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/components/text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAStB,KAAK,YAAY,GAAG,aAAa,CAAC;AAClC,KAAK,eAAe,GAAG,gBAAgB,CAAC;AA0DxC,UAAU,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC3D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,iBAAS,QAAQ,CAAC,EAChB,IAAU,EACV,OAAmB,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,qBA2Ff;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC"}