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

package/dist/components/avatar.js

@@ -0,0 +1,143 @@
+import { Text } from '../components/text';
+import { useThemeVars } from '../lib/use-theme-vars';
+import * as React from 'react';
+import { Image, View } from 'react-native';
+const avatarSizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const avatarShapes = ['circle', 'square'];
+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;
+    }
+}
+// Size styles from CSS:
+// Size 0: 16px, Size 1: 24px, Size 2: 32px, Size 3: 40px (default)
+// Size 4: 48px, Size 5: 64px, Size 6: 80px, Size 7: 96px, Size 8: 128px, Size 9: 160px
+function getAvatarSize(size) {
+    switch (size) {
+        case '0':
+            return 16;
+        case '1':
+            return 24;
+        case '2':
+            return 32;
+        case '3':
+            return 40;
+        case '4':
+            return 48;
+        case '5':
+            return 64;
+        case '6':
+            return 80;
+        case '7':
+            return 96;
+        case '8':
+            return 128;
+        case '9':
+            return 160;
+    }
+}
+// Font size based on avatar size (approximating cqw units)
+function getFallbackFontSize(avatarSize, letterCount) {
+    // 45cqw for 1 letter, 40cqw for 2 letters
+    const percentage = letterCount === 1 ? 0.45 : 0.4;
+    return Math.round(avatarSize * percentage);
+}
+function getInitials(name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+        return parts[0].charAt(0).toUpperCase();
+    }
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+function Avatar({ src, fallback, size = '3', shape = 'circle', color }) {
+    const { colors } = useThemeVars();
+    const [imageStatus, setImageStatus] = React.useState('loading');
+    const accentColor = resolveAccentFromColor(color);
+    const palette = colors.palettes[accentColor];
+    const gray = colors.palettes.gray;
+    const avatarSize = getAvatarSize(size);
+    const borderRadius = shape === 'circle' ? avatarSize / 2 : Math.max(avatarSize * 0.25, 8);
+    // Process fallback - convert string to initials
+    const fallbackContent = React.useMemo(() => {
+        if (typeof fallback === 'string') {
+            return getInitials(fallback);
+        }
+        return fallback;
+    }, [fallback]);
+    const showImage = src && imageStatus === 'loaded';
+    const showFallback = !src || imageStatus === 'error' || imageStatus === 'loading';
+    // Base style
+    const baseStyle = {
+        width: avatarSize,
+        height: avatarSize,
+        borderRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        flexShrink: 0,
+    };
+    // State-based styles
+    let stateStyle;
+    if (showImage) {
+        // Image loaded - gray border
+        stateStyle = {
+            borderWidth: 1,
+            borderColor: gray.a5,
+        };
+    }
+    else {
+        // Fallback state - accent background and border
+        stateStyle = {
+            backgroundColor: palette.a3,
+            borderWidth: 1,
+            borderColor: palette.a5,
+        };
+    }
+    const combinedStyle = { ...baseStyle, ...stateStyle };
+    // Image style
+    const imageStyle = {
+        width: avatarSize,
+        height: avatarSize,
+        borderRadius,
+    };
+    // Fallback styles
+    const isTextFallback = typeof fallbackContent === 'string';
+    const letterCount = isTextFallback ? (fallbackContent.length === 1 ? 1 : 2) : 1;
+    const fontSize = getFallbackFontSize(avatarSize, letterCount);
+    const fallbackContainerStyle = {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+    };
+    const textStyle = {
+        fontSize,
+        fontWeight: '500',
+        color: palette.a11,
+        textTransform: 'uppercase',
+        letterSpacing: fontSize * 0.05,
+    };
+    return (<View style={combinedStyle}>
+      {/* Fallback - always rendered underneath, hidden when image loads */}
+      {showFallback && (<View style={fallbackContainerStyle}>
+          {isTextFallback ? <Text style={textStyle}>{fallbackContent}</Text> : fallbackContent}
+        </View>)}
+
+      {/* Image - loads on top of fallback */}
+      {src && (<Image source={{ uri: src }} style={imageStyle} onLoad={() => setImageStatus('loaded')} onError={() => setImageStatus('error')}/>)}
+    </View>);
+}
+export { Avatar, avatarShapes, avatarSizes, getAvatarSize };
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar.js.map

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

package/dist/components/badge.d.ts

@@ -0,0 +1,17 @@
+import type { Color } from '../lib/types';
+import * as React from 'react';
+import { View } from 'react-native';
+declare const badgeSizes: readonly ["1", "2"];
+declare const badgeVariants: readonly ["solid", "soft", "surface", "outline"];
+type BadgeSize = (typeof badgeSizes)[number];
+type BadgeVariant = (typeof badgeVariants)[number];
+type BadgeProps = React.ComponentProps<typeof View> & {
+    asChild?: boolean;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    color?: Color;
+};
+declare function Badge({ variant, size, color, style, asChild, ...props }: BadgeProps): React.JSX.Element;
+export { Badge };
+export type { BadgeProps };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,KAAK,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAEpD,QAAA,MAAM,UAAU,qBAAsB,CAAC;AACvC,QAAA,MAAM,aAAa,kDAAmD,CAAC;AAEvE,KAAK,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAC7C,KAAK,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAkBF,iBAAS,KAAK,CAAC,EAAE,OAAgB,EAAE,IAAU,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBA+E3F;AAED,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/badge.js

@@ -0,0 +1,95 @@
+import { TextStyleContext } from '../components/text';
+import { useThemeVars } from '../lib/use-theme-vars';
+import * as Slot from '@rn-primitives/slot';
+import * as React from 'react';
+import { View } from 'react-native';
+const badgeSizes = ['1', '2'];
+const badgeVariants = ['solid', 'soft', 'surface', 'outline'];
+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;
+    }
+}
+function Badge({ variant = 'soft', size = '1', color, style, asChild, ...props }) {
+    const { colors } = useThemeVars();
+    const Component = asChild ? Slot.View : View;
+    const accentColor = resolveAccentFromColor(color);
+    const palette = colors.palettes[accentColor];
+    // Base layout (same on all platforms)
+    const baseStyle = {
+        // layout
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'flex-start',
+    };
+    const sizeStyle = size === '1'
+        ? {
+            height: 20,
+            paddingHorizontal: 8,
+            borderRadius: 6,
+        }
+        : {
+            height: 28,
+            paddingHorizontal: 12,
+            borderRadius: 8,
+        };
+    // Variant-specific background / border colors
+    let variantStyle = {};
+    switch (variant) {
+        case 'solid': {
+            variantStyle = {
+                backgroundColor: palette['9'],
+                borderWidth: 0,
+            };
+            break;
+        }
+        case 'soft': {
+            variantStyle = {
+                backgroundColor: palette.a3,
+                borderWidth: 0,
+            };
+            break;
+        }
+        case 'surface': {
+            variantStyle = {
+                backgroundColor: palette.a2,
+                borderColor: palette.a7,
+                borderWidth: 1,
+            };
+            break;
+        }
+        case 'outline': {
+            variantStyle = {
+                borderColor: palette.a8,
+                borderWidth: 1,
+            };
+            break;
+        }
+        default:
+            variantStyle = {};
+    }
+    const mergedStyle = [baseStyle, sizeStyle, variantStyle, style];
+    // Text styles for any Text rendered inside Badge
+    const textColor = variant === 'solid' ? palette['9-contrast'] : palette.a11 || palette['11'];
+    return (<TextStyleContext.Provider value={{
+            size: size === '1' ? '1' : '2',
+            weight: 'medium',
+            color: textColor,
+        }}>
+      <Component style={mergedStyle} {...props}/>
+    </TextStyleContext.Provider>);
+}
+export { Badge };
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

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

package/dist/components/button.d.ts

@@ -0,0 +1,14 @@
+import { type ButtonSize, type ButtonVariant } from '../lib/button-styles';
+import type { Color } from '../lib/types';
+import * as React from 'react';
+import { Pressable, type StyleProp, type ViewStyle } from 'react-native';
+type ButtonProps = Omit<React.ComponentProps<typeof Pressable>, 'style'> & {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    color?: Color;
+    style?: StyleProp<ViewStyle>;
+};
+declare function Button({ className, variant, size, color, style, disabled, children, onPressIn, onPressOut, onFocus, onBlur, onHoverIn, onHoverOut, ...pressableProps }: ButtonProps): React.JSX.Element;
+export { Button };
+export type { ButtonProps };
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,SAAS,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzF,KAAK,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAU,EACV,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,MAAM,EACN,SAAS,EACT,UAAU,EACV,GAAG,cAAc,EAClB,EAAE,WAAW,qBAmIb;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/button.js

@@ -0,0 +1,85 @@
+import { TextStyleContext } from '../components/text';
+import { getButtonFocusStyle, getButtonPressedFilter, getButtonShadowStyle, getButtonSizeStyle, getButtonTextColor, getButtonVariantStyle, resolveAccentFromColor, } from '../lib/button-styles';
+import { useThemeVars } from '../lib/use-theme-vars';
+import { cn } from '../lib/utils';
+import * as React from 'react';
+import { Platform, Pressable, View } from 'react-native';
+function Button({ className, variant = 'surface', size = '2', color, style, disabled, children, onPressIn, onPressOut, onFocus, onBlur, onHoverIn, onHoverOut, ...pressableProps }) {
+    const { colors } = useThemeVars();
+    const [pressed, setPressed] = React.useState(false);
+    const [hovered, setHovered] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const accentColor = resolveAccentFromColor(color);
+    const gray = colors.palettes.gray;
+    // All AccentColors should be in palettes, but TypeScript's index signature types
+    // don't guarantee it with bracket notation. Fallback to gray as defensive programming.
+    const palette = colors.palettes[accentColor] ?? gray;
+    const textColor = getButtonTextColor(variant, palette, gray, disabled ?? false);
+    // Base layout
+    const baseStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+    };
+    // Size styles (including gap between children)
+    const sizeStyle = getButtonSizeStyle(size, false);
+    // Variant background / border, including pressed state
+    const variantStyle = getButtonVariantStyle(variant, colors, palette, gray, disabled ?? false, pressed, hovered);
+    const surfaceShadow = getButtonShadowStyle(variant, disabled ?? false, pressed);
+    // Focus outline using accent-a8
+    const focusStyle = getButtonFocusStyle(palette, focused, disabled ?? false);
+    // Solid button pressed filter (web only): brightness(0.92) saturate(1.1)
+    const pressedFilter = getButtonPressedFilter(variant, pressed, disabled ?? false);
+    const combinedStyle = {
+        ...baseStyle,
+        ...sizeStyle,
+        ...variantStyle,
+        ...surfaceShadow,
+        ...focusStyle,
+        ...pressedFilter,
+    };
+    const handlePressIn = React.useCallback((e) => {
+        setPressed(true);
+        onPressIn?.(e);
+    }, [onPressIn]);
+    const handlePressOut = React.useCallback((e) => {
+        setPressed(false);
+        onPressOut?.(e);
+    }, [onPressOut]);
+    const handleHoverIn = React.useCallback((e) => {
+        setHovered(true);
+        onHoverIn?.(e);
+    }, [onHoverIn]);
+    const handleHoverOut = React.useCallback((e) => {
+        setHovered(false);
+        onHoverOut?.(e);
+    }, [onHoverOut]);
+    const handleFocus = React.useCallback((e) => {
+        // Only show focus ring on keyboard navigation (focus-visible)
+        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]);
+    return (<View className={cn(className)} style={style}>
+      <TextStyleContext.Provider value={{
+            size: size,
+            weight: 'medium',
+            color: textColor,
+        }}>
+        <Pressable style={combinedStyle} role="button" disabled={disabled} onPressIn={handlePressIn} onPressOut={handlePressOut} onHoverIn={handleHoverIn} onHoverOut={handleHoverOut} onFocus={handleFocus} onBlur={handleBlur} {...pressableProps}>
+          {children}
+        </Pressable>
+      </TextStyleContext.Provider>
+    </View>);
+}
+export { Button };
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

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

package/dist/components/callout.d.ts

@@ -0,0 +1,25 @@
+import type { Color } from '../lib/types';
+import * as React from 'react';
+import { type ViewProps } from 'react-native';
+declare const calloutSizes: readonly ["1", "2", "3"];
+declare const calloutVariants: readonly ["soft", "surface", "outline"];
+type CalloutSize = (typeof calloutSizes)[number];
+type CalloutVariant = (typeof calloutVariants)[number];
+type CalloutRootProps = ViewProps & {
+    size?: CalloutSize;
+    variant?: CalloutVariant;
+    color?: Color;
+};
+declare function CalloutRoot({ size, variant, color, style, children, ...props }: CalloutRootProps): React.JSX.Element;
+type CalloutIconProps = ViewProps;
+declare function CalloutIcon({ style, children, ...props }: CalloutIconProps): React.JSX.Element;
+type CalloutTextProps = ViewProps;
+declare function CalloutText({ style, children, ...props }: CalloutTextProps): React.JSX.Element;
+declare const Callout: {
+    Root: typeof CalloutRoot;
+    Icon: typeof CalloutIcon;
+    Text: typeof CalloutText;
+};
+export { Callout, CalloutIcon, CalloutRoot, CalloutText };
+export type { CalloutIconProps, CalloutRootProps, CalloutTextProps };
+//# sourceMappingURL=callout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/components/callout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,KAAK,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAQ,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAC;AAEpE,QAAA,MAAM,YAAY,0BAA2B,CAAC;AAC9C,QAAA,MAAM,eAAe,yCAA0C,CAAC;AAEhE,KAAK,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACjD,KAAK,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAqEvD,KAAK,gBAAgB,GAAG,SAAS,GAAG;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,iBAAS,WAAW,CAAC,EACnB,IAAU,EACV,OAAgB,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA2DlB;AAED,KAAK,gBAAgB,GAAG,SAAS,CAAC;AAElC,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAoBnE;AAED,KAAK,gBAAgB,GAAG,SAAS,CAAC;AAElC,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAUnE;AAED,QAAA,MAAM,OAAO;;;;CAIZ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/callout.js

@@ -0,0 +1,146 @@
+import { TextStyleContext } from '../components/text';
+import { useThemeVars } from '../lib/use-theme-vars';
+import * as React from 'react';
+import { View } from 'react-native';
+const calloutSizes = ['1', '2', '3'];
+const calloutVariants = ['soft', 'surface', 'outline'];
+const CalloutContext = React.createContext({
+    size: '2',
+    color: 'gray',
+});
+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;
+    }
+}
+// Size to text size mapping (matching web version)
+function getTextSize(size) {
+    return size === '3' ? '3' : '2';
+}
+// Size styles (matching web CSS)
+// --space-2: 8px, --space-3: 12px, --space-4: 16px, --space-5: 20px
+// --radius-5: 10px, --radius-6: 12px
+function getSizeStyle(size) {
+    switch (size) {
+        case '1':
+            // padding: var(--space-3) var(--space-4) = 12px 16px
+            // column-gap: var(--space-2) = 8px
+            // border-radius: var(--radius-5) = 10px
+            return {
+                paddingVertical: 12,
+                paddingHorizontal: 16,
+                borderRadius: 10,
+                gap: 8,
+            };
+        case '2':
+            // padding: var(--space-4) = 16px
+            // column-gap: var(--space-3) = 12px
+            // border-radius: var(--radius-5) = 10px
+            return {
+                padding: 16,
+                borderRadius: 10,
+                gap: 12,
+            };
+        case '3':
+            // padding: var(--space-5) = 20px
+            // column-gap: var(--space-3) = 12px
+            // border-radius: var(--radius-6) = 12px
+            return {
+                padding: 20,
+                borderRadius: 12,
+                gap: 12,
+            };
+    }
+}
+function CalloutRoot({ size = '2', variant = 'soft', color, style, children, ...props }) {
+    const { colors } = useThemeVars();
+    const accentColor = resolveAccentFromColor(color);
+    const palette = colors.palettes[accentColor];
+    const baseStyle = {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    };
+    const sizeStyle = getSizeStyle(size);
+    let variantStyle = {};
+    switch (variant) {
+        case 'soft':
+            variantStyle = {
+                backgroundColor: palette.a3,
+            };
+            break;
+        case 'surface':
+            variantStyle = {
+                backgroundColor: palette.a2,
+                borderColor: palette.a6,
+                borderWidth: 1,
+            };
+            break;
+        case 'outline':
+            variantStyle = {
+                borderColor: palette.a7,
+                borderWidth: 1,
+            };
+            break;
+    }
+    const combinedStyle = {
+        ...baseStyle,
+        ...sizeStyle,
+        ...variantStyle,
+    };
+    const contextValue = React.useMemo(() => ({ size, color: accentColor }), [size, accentColor]);
+    // Text color for children
+    const textColor = palette.a11 || palette['11'];
+    return (<CalloutContext.Provider value={contextValue}>
+      <TextStyleContext.Provider value={{
+            size: getTextSize(size),
+            weight: 'medium',
+            color: textColor,
+        }}>
+        <View style={[combinedStyle, style]} {...props}>
+          {children}
+        </View>
+      </TextStyleContext.Provider>
+    </CalloutContext.Provider>);
+}
+function CalloutIcon({ style, children, ...props }) {
+    const { size } = React.useContext(CalloutContext);
+    // Icon container sizing
+    const iconSize = size === '1' ? 16 : size === '2' ? 18 : 20;
+    const iconStyle = {
+        width: iconSize,
+        height: iconSize,
+        flexShrink: 0,
+        marginTop: size === '1' ? 1 : 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+    return (<View style={[iconStyle, style]} {...props}>
+      {children}
+    </View>);
+}
+function CalloutText({ style, children, ...props }) {
+    const textStyle = {
+        flex: 1,
+    };
+    return (<View style={[textStyle, style]} {...props}>
+      {children}
+    </View>);
+}
+const Callout = {
+    Root: CalloutRoot,
+    Icon: CalloutIcon,
+    Text: CalloutText,
+};
+export { Callout, CalloutIcon, CalloutRoot, CalloutText };
+//# sourceMappingURL=callout.js.map

package/dist/components/callout.js.map

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

package/dist/components/card.d.ts

@@ -0,0 +1,10 @@
+import { View, type ViewProps } from 'react-native';
+declare const cardVariants: readonly ["soft", "surface", "ghost"];
+type CardVariant = (typeof cardVariants)[number];
+type CardProps = ViewProps & React.RefAttributes<View> & {
+    variant?: CardVariant;
+};
+declare function Card({ variant, style, ...props }: CardProps): import("react").JSX.Element;
+export { Card };
+export type { CardProps, CardVariant };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAC;AAEpE,QAAA,MAAM,YAAY,uCAAwC,CAAC;AAE3D,KAAK,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,KAAK,SAAS,GAAG,SAAS,GACxB,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEJ,iBAAS,IAAI,CAAC,EAAE,OAAmB,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAwChE;AAED,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/card.js

@@ -0,0 +1,41 @@
+import { useThemeVars } from '../lib/use-theme-vars';
+import { View } from 'react-native';
+const cardVariants = ['soft', 'surface', 'ghost'];
+function Card({ variant = 'surface', style, ...props }) {
+    const { colors } = useThemeVars();
+    const gray = colors.palettes.gray;
+    const baseStyle = {
+        padding: 16,
+        borderRadius: 16,
+    };
+    let variantStyle = {};
+    switch (variant) {
+        case 'soft':
+            variantStyle = {
+                backgroundColor: gray.a3,
+            };
+            break;
+        case 'surface':
+            variantStyle = {
+                backgroundColor: colors.panelSolid,
+                borderWidth: 1,
+                borderColor: colors.stroke,
+                shadowColor: '#000000',
+                shadowOpacity: 0.05,
+                shadowOffset: { width: 0, height: 1 },
+                shadowRadius: 2,
+                elevation: 2,
+            };
+            break;
+        case 'ghost':
+            // No styles
+            break;
+    }
+    const combinedStyle = {
+        ...baseStyle,
+        ...variantStyle,
+    };
+    return <View style={[combinedStyle, style]} {...props}/>;
+}
+export { Card };
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAkC,MAAM,cAAc,CAAC;AAEpE,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAU,CAAC;AAS3D,SAAS,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAa;IAC/D,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IAClC,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IAElC,MAAM,SAAS,GAAc;QAC3B,OAAO,EAAE,EAAE;QACX,YAAY,EAAE,EAAE;KACjB,CAAC;IAEF,IAAI,YAAY,GAAc,EAAE,CAAC;IAEjC,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,MAAM;YACT,YAAY,GAAG;gBACb,eAAe,EAAE,IAAI,CAAC,EAAE;aACzB,CAAC;YACF,MAAM;QACR,KAAK,SAAS;YACZ,YAAY,GAAG;gBACb,eAAe,EAAE,MAAM,CAAC,UAAU;gBAClC,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,MAAM,CAAC,MAAM;gBAC1B,WAAW,EAAE,SAAS;gBACtB,aAAa,EAAE,IAAI;gBACnB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;gBACrC,YAAY,EAAE,CAAC;gBACf,SAAS,EAAE,CAAC;aACb,CAAC;YACF,MAAM;QACR,KAAK,OAAO;YACV,YAAY;YACZ,MAAM;IACV,CAAC;IAED,MAAM,aAAa,GAAc;QAC/B,GAAG,SAAS;QACZ,GAAG,YAAY;KAChB,CAAC;IAEF,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5D,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/checkbox.d.ts

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