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

package/dist/components/text-area.js

@@ -0,0 +1,121 @@
+import { getDisabledSoftStyle, getDisabledSurfaceStyle, getSoftVariantStyle, getSurfaceVariantStyle, getTextInputColors, } from '../lib/text-input-styles';
+import { useThemeTokens } from '../lib/use-theme-tokens';
+import * as React from 'react';
+import { Platform, TextInput, View, } from 'react-native';
+// ============================================================================
+// Size helpers
+// ============================================================================
+function getTextAreaSizeStyle(size) {
+    switch (size) {
+        case '1':
+            return {
+                minHeight: 32, // space-8
+                fontSize: 12,
+                lineHeight: 16,
+                borderRadius: 6,
+                paddingVertical: 3, // space-1 - border
+                paddingHorizontal: 6, // space-1.5 - border
+            };
+        case '2':
+            return {
+                minHeight: 36, // space-9
+                fontSize: 14,
+                lineHeight: 20,
+                borderRadius: 8,
+                paddingVertical: 6, // space-1.5 - border
+                paddingHorizontal: 8, // space-2 - border
+            };
+        case '3':
+            return {
+                minHeight: 80,
+                fontSize: 16,
+                lineHeight: 24,
+                borderRadius: 10,
+                paddingVertical: 8, // space-2 - border
+                paddingHorizontal: 12, // space-3 - border
+            };
+        case '4':
+            return {
+                minHeight: 96,
+                fontSize: 18,
+                lineHeight: 28,
+                borderRadius: 14,
+                paddingVertical: 12, // space-3 - border
+                paddingHorizontal: 16, // space-4 - border
+            };
+    }
+}
+function TextArea({ size = '3', variant = 'surface', color, style, editable, ...props }) {
+    const { colors } = useThemeTokens();
+    const gray = colors.palettes.gray;
+    // For soft variant background/text, use gray as default
+    const paletteKey = color ?? 'gray';
+    // For focus outline, use accent as default
+    const focusPalette = colors.palettes[color ?? 'accent'] ?? gray;
+    const sizeStyle = getTextAreaSizeStyle(size);
+    const disabled = editable === false;
+    const [focused, setFocused] = React.useState(false);
+    // Variant styles
+    let variantStyle = variant === 'surface'
+        ? getSurfaceVariantStyle(colors)
+        : getSoftVariantStyle(colors, paletteKey);
+    // Apply disabled styles (surface keeps border, soft replaces background)
+    if (disabled) {
+        if (variant === 'surface') {
+            // Surface: keep border, replace background
+            variantStyle = {
+                ...variantStyle,
+                ...getDisabledSurfaceStyle(colors),
+            };
+        }
+        else {
+            // Soft: replace background completely
+            variantStyle = getDisabledSoftStyle(colors);
+        }
+    }
+    // Focus outline (web only) - uses accent color by default
+    const focusStyle = focused && !disabled && Platform.OS === 'web'
+        ? {
+            outline: `2px solid ${focusPalette.a8}`,
+            outlineOffset: -1,
+        }
+        : undefined;
+    // Text and placeholder colors
+    const { textColor, placeholderColor } = getTextInputColors(variant, colors, paletteKey, disabled);
+    const rootStyle = {
+        flexDirection: 'column',
+        minHeight: sizeStyle.minHeight,
+        borderRadius: sizeStyle.borderRadius,
+        ...variantStyle,
+        ...focusStyle,
+    };
+    const inputStyle = {
+        flex: 1,
+        fontSize: sizeStyle.fontSize,
+        lineHeight: sizeStyle.lineHeight,
+        color: textColor,
+        paddingVertical: sizeStyle.paddingVertical,
+        paddingHorizontal: sizeStyle.paddingHorizontal,
+        textAlignVertical: 'top',
+        ...(Platform.OS === 'web'
+            ? {
+                outline: 'none',
+                backgroundColor: 'transparent',
+                resize: 'none',
+            }
+            : {}),
+    };
+    const handleFocus = (e) => {
+        setFocused(true);
+        props.onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setFocused(false);
+        props.onBlur?.(e);
+    };
+    return (<View style={rootStyle}>
+      <TextInput style={[inputStyle, style]} placeholderTextColor={placeholderColor} editable={editable} multiline onFocus={handleFocus} onBlur={handleBlur} {...props}/>
+    </View>);
+}
+export { TextArea };
+//# sourceMappingURL=text-area.js.map

package/dist/components/text-area.js.map

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

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

@@ -0,0 +1,35 @@
+import { type TextInputSize, type TextInputVariant } from '../lib/text-input-styles';
+import type { Color } from '../lib/types';
+import * as React from 'react';
+import { TextInput, type TextInputProps, type TextStyle, type ViewProps } from 'react-native';
+type TextFieldSize = TextInputSize;
+type TextFieldVariant = TextInputVariant;
+interface TextFieldRootProps extends ViewProps {
+    size?: TextFieldSize;
+    variant?: TextFieldVariant;
+    color?: Color;
+    disabled?: boolean;
+    focused?: boolean;
+    children: React.ReactNode;
+}
+declare function TextFieldRoot({ size, variant, color, disabled, focused: focusedProp, style, children, ...props }: TextFieldRootProps): React.JSX.Element;
+interface TextFieldSlotProps extends ViewProps {
+    color?: Color;
+    children?: React.ReactNode;
+}
+declare function TextFieldSlot({ color, style, children, ...props }: TextFieldSlotProps): React.JSX.Element | null;
+interface TextFieldInputProps extends Omit<TextInputProps, 'style'> {
+    size?: TextFieldSize;
+    variant?: TextFieldVariant;
+    color?: Color;
+    style?: TextStyle;
+}
+declare const TextFieldInput: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<TextInput>>;
+declare const TextField: {
+    Root: typeof TextFieldRoot;
+    Slot: typeof TextFieldSlot;
+    Input: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<TextInput>>;
+};
+export { TextField, TextFieldInput, TextFieldRoot, TextFieldSlot };
+export type { TextFieldInputProps, TextFieldRootProps, TextFieldSize, TextFieldSlotProps, TextFieldVariant, };
+//# sourceMappingURL=text-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/components/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,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,EAEL,SAAS,EAGT,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAMtB,KAAK,aAAa,GAAG,aAAa,CAAC;AACnC,KAAK,gBAAgB,GAAG,gBAAgB,CAAC;AA6DzC,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,iBAAS,aAAa,CAAC,EACrB,IAAU,EACV,OAAmB,EACnB,KAAK,EACL,QAAgB,EAChB,OAAO,EAAE,WAAW,EACpB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBA+KpB;AAMD,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,4BAiC9E;AAMD,UAAU,mBAAoB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IACjE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,uFAgInB,CAAC;AAOF,QAAA,MAAM,SAAS;;;;CAId,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC;AACnE,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EAClB,gBAAgB,GACjB,CAAC"}

package/dist/components/text-field.js

@@ -0,0 +1,300 @@
+import { getDisabledSoftStyle, getDisabledSurfaceStyle, getSoftVariantStyle, getSurfaceVariantStyle, getTextInputColors, hexToRgba, } from '../lib/text-input-styles';
+import { useThemeTokens } from '../lib/use-theme-tokens';
+import * as React from 'react';
+import { Platform, TextInput, View, } from 'react-native';
+const TextFieldContext = React.createContext(undefined);
+// ============================================================================
+// Size helpers
+// ============================================================================
+function getSizeStyle(size) {
+    switch (size) {
+        case '1':
+            return { height: 24, fontSize: 12, borderRadius: 6, paddingHorizontal: 6 }; // space-5
+        case '2':
+            return { height: 32, fontSize: 14, borderRadius: 8, paddingHorizontal: 8 }; // space-6
+        case '3':
+            return { height: 40, fontSize: 16, borderRadius: 10, paddingHorizontal: 12 }; // space-7
+        case '4':
+            return { height: 48, fontSize: 18, borderRadius: 14, paddingHorizontal: 12 }; // space-8
+    }
+}
+function getSlotPadding(size) {
+    switch (size) {
+        case '1':
+        case '2':
+            return 8;
+        case '3':
+            return 10;
+        case '4':
+            return 12;
+    }
+}
+function TextFieldRoot({ size = '3', variant = 'surface', color, disabled = false, focused: focusedProp, style, children, ...props }) {
+    const { colors } = useThemeTokens();
+    const gray = colors.palettes.gray;
+    // For soft variant background/text, use gray as default
+    const paletteKey = color ?? 'gray';
+    // For focus outline, use accent as default
+    const focusPalette = colors.palettes[color ?? 'accent'] ?? gray;
+    const [internalFocused, setInternalFocused] = React.useState(false);
+    const focused = focusedProp !== undefined ? focusedProp : internalFocused;
+    const inputRef = React.useRef(null);
+    // Determine if there are slots before/after the input
+    const childArray = React.Children.toArray(children);
+    let inputIndex = -1;
+    let hasSlotBefore = false;
+    let hasSlotAfter = false;
+    childArray.forEach((child, index) => {
+        if (React.isValidElement(child)) {
+            if (child.type === TextFieldInput) {
+                inputIndex = index;
+            }
+        }
+    });
+    if (inputIndex !== -1) {
+        // Check for slots before the input
+        for (let i = 0; i < inputIndex; i++) {
+            const child = childArray[i];
+            if (React.isValidElement(child) && child.type === TextFieldSlot) {
+                hasSlotBefore = true;
+                break;
+            }
+        }
+        // Check for slots after the input
+        for (let i = inputIndex + 1; i < childArray.length; i++) {
+            const child = childArray[i];
+            if (React.isValidElement(child) && child.type === TextFieldSlot) {
+                hasSlotAfter = true;
+                break;
+            }
+        }
+    }
+    const sizeStyle = getSizeStyle(size);
+    // Background and border based on variant
+    let variantStyle = variant === 'surface'
+        ? getSurfaceVariantStyle(colors)
+        : getSoftVariantStyle(colors, paletteKey);
+    // Apply disabled styles (surface keeps border, soft replaces background)
+    if (disabled) {
+        if (variant === 'surface') {
+            // Surface: keep border, replace background
+            variantStyle = {
+                ...variantStyle,
+                ...getDisabledSurfaceStyle(colors),
+            };
+        }
+        else {
+            // Soft: replace background completely
+            variantStyle = getDisabledSoftStyle(colors);
+        }
+    }
+    // Focus outline (web only) - uses accent color by default
+    const focusStyle = focused && !disabled && Platform.OS === 'web'
+        ? {
+            outline: `2px solid ${focusPalette.a8}`,
+            outlineOffset: -1,
+        }
+        : undefined;
+    const rootStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: sizeStyle.borderRadius,
+        ...variantStyle,
+        ...focusStyle,
+    };
+    // Handle pointer/touch events to focus input when clicking on non-button elements
+    const handlePointerDown = React.useCallback((event) => {
+        if (disabled || !inputRef.current)
+            return;
+        // On web, we can access the DOM target
+        if (Platform.OS === 'web') {
+            // Access the native DOM event
+            // On React Native Web, the event structure may vary, so we check both
+            const eventAny = event;
+            const nativeEvent = eventAny.nativeEvent || eventAny;
+            const target = nativeEvent.target;
+            if (!target)
+                return;
+            // If clicking on input, button, or anchor, don't focus (let them handle it)
+            if (target.closest('input, button, a'))
+                return;
+            // Focus the input
+            requestAnimationFrame(() => {
+                inputRef.current?.focus();
+            });
+        }
+    }, [disabled]);
+    // Handle native touch events (iOS/Android)
+    const handleStartShouldSetResponder = React.useCallback((event) => {
+        if (disabled || !inputRef.current)
+            return false;
+        // Check if the touch target is a button-like component
+        // On native, we check the component type from the event
+        const target = event.target;
+        if (!target)
+            return false;
+        // Check if target is the TextInput itself - don't focus in that case
+        // We can't directly compare refs, but we can check if it's an input
+        const targetType = target.constructor?.name || '';
+        const isInput = targetType.includes('TextInput') || targetType.includes('RCTTextInput');
+        if (isInput) {
+            return false; // Let the input handle it
+        }
+        // Check if target is a button-like component
+        // Buttons (Pressable, TouchableOpacity) typically have these in their name
+        const isButtonLike = targetType.includes('Touchable') ||
+            targetType.includes('Pressable') ||
+            targetType.includes('Button');
+        if (isButtonLike) {
+            return false; // Let the button handle it
+        }
+        // Focus the input for other touches (like icons in slots)
+        requestAnimationFrame(() => {
+            inputRef.current?.focus();
+        });
+        return false; // Don't capture the responder, let the event bubble
+    }, [disabled]);
+    return (<TextFieldContext.Provider value={{
+            size,
+            variant,
+            color: paletteKey,
+            disabled,
+            inputRef,
+            onFocus: () => setInternalFocused(true),
+            onBlur: () => setInternalFocused(false),
+            hasSlotBefore,
+            hasSlotAfter,
+        }}>
+      <View style={[rootStyle, style]} {...(Platform.OS === 'web'
+        ? { onPointerDown: handlePointerDown }
+        : { onStartShouldSetResponder: handleStartShouldSetResponder })} {...props}>
+        {children}
+      </View>
+    </TextFieldContext.Provider>);
+}
+function TextFieldSlot({ color, style, children, ...props }) {
+    const context = React.useContext(TextFieldContext);
+    const { colors } = useThemeTokens();
+    const slotColor = color ? colors.palettes[color].a11 : colors.palettes.gray.a11;
+    const padding = getSlotPadding(context?.size ?? '2');
+    const slotStyle = {
+        flexShrink: 0,
+        flexGrow: 0, // Slots should not grow, only maintain their size
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: '100%',
+        gap: padding,
+        paddingHorizontal: padding,
+    };
+    if (!children)
+        return null;
+    return (<View style={[slotStyle, { opacity: 1 }, style]} {...props}>
+      {React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                // Pass color to icon children if they accept it
+                return React.cloneElement(child, {
+                    color: slotColor,
+                });
+            }
+            return child;
+        })}
+    </View>);
+}
+const TextFieldInput = React.forwardRef(({ size: sizeProp, variant: variantProp, color: colorProp, style, editable, ...props }, forwardedRef) => {
+    const context = React.useContext(TextFieldContext);
+    const { colors } = useThemeTokens();
+    const size = sizeProp ?? context?.size ?? '3';
+    const variant = variantProp ?? context?.variant ?? 'surface';
+    // Keep color undefined if not explicitly set, so TextFieldRoot uses accent for focus
+    const color = colorProp ?? context?.color;
+    const colorForStyles = color ?? 'gray';
+    const disabled = editable === false || context?.disabled;
+    // Create a callback ref that sets all necessary refs
+    const setRefs = React.useCallback((instance) => {
+        // Set context ref if it exists
+        if (context?.inputRef) {
+            context.inputRef.current = instance;
+        }
+        // Set forwarded ref if it exists
+        if (forwardedRef) {
+            if (typeof forwardedRef === 'function') {
+                forwardedRef(instance);
+            }
+            else {
+                forwardedRef.current = instance;
+            }
+        }
+    }, [context?.inputRef, forwardedRef]);
+    const sizeStyle = getSizeStyle(size);
+    // Text and placeholder colors based on variant and disabled state
+    // TextField uses 0.6 opacity for soft variant placeholder (TextArea uses 0.65)
+    const { textColor, placeholderColor: basePlaceholderColor } = getTextInputColors(variant, colors, colorForStyles, disabled);
+    const placeholderColor = variant === 'soft' && !disabled
+        ? hexToRgba(colors.palettes[colorForStyles]['12'], 0.6)
+        : basePlaceholderColor;
+    // Account for border height: surface variant has 1px border top and bottom (2px total)
+    const inputHeight = variant === 'surface' ? sizeStyle.height - 2 : sizeStyle.height;
+    // Determine padding based on adjacent slots
+    const hasSlotBefore = context?.hasSlotBefore ?? false;
+    const hasSlotAfter = context?.hasSlotAfter ?? false;
+    const paddingLeft = hasSlotBefore ? 0 : sizeStyle.paddingHorizontal;
+    const paddingRight = hasSlotAfter ? 0 : sizeStyle.paddingHorizontal;
+    const inputStyle = {
+        flex: 1,
+        minWidth: 0, // Allow input to shrink below content width
+        height: inputHeight,
+        fontSize: sizeStyle.fontSize,
+        color: textColor,
+        paddingLeft,
+        paddingRight,
+        // Remove default styling
+        ...(Platform.OS === 'web'
+            ? {
+                outline: 'none',
+                backgroundColor: 'transparent',
+            }
+            : {}),
+    };
+    // If no context (no Root), wrap in Root
+    const hasRoot = context !== undefined;
+    // When no root, manage focus state locally and pass to Root
+    const [localFocused, setLocalFocused] = React.useState(false);
+    const handleFocus = (e) => {
+        if (hasRoot) {
+            context?.onFocus?.();
+        }
+        else {
+            setLocalFocused(true);
+        }
+        props.onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        if (hasRoot) {
+            context?.onBlur?.();
+        }
+        else {
+            setLocalFocused(false);
+        }
+        props.onBlur?.(e);
+    };
+    const input = (<TextInput ref={setRefs} style={[inputStyle, style]} placeholderTextColor={placeholderColor} editable={editable} onFocus={handleFocus} onBlur={handleBlur} {...props}/>);
+    if (hasRoot) {
+        return input;
+    }
+    // When no root, create one with focus state management
+    // Pass color only if explicitly set, so TextFieldRoot uses accent for focus by default
+    return (<TextFieldRoot size={size} variant={variant} color={color} disabled={disabled} focused={localFocused}>
+        {input}
+      </TextFieldRoot>);
+});
+TextFieldInput.displayName = 'TextFieldInput';
+// ============================================================================
+// Export composite component
+// ============================================================================
+const TextField = {
+    Root: TextFieldRoot,
+    Slot: TextFieldSlot,
+    Input: TextFieldInput,
+};
+export { TextField, TextFieldInput, TextFieldRoot, TextFieldSlot };
+//# sourceMappingURL=text-field.js.map

package/dist/components/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/components/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,sBAAsB,EACtB,kBAAkB,EAClB,SAAS,GAGV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,SAAS,EACT,IAAI,GAML,MAAM,cAAc,CAAC;AA4BtB,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAoC,SAAS,CAAC,CAAC;AAE3F,+EAA+E;AAC/E,eAAe;AACf,+EAA+E;AAE/E,SAAS,YAAY,CAAC,IAAmB;IAMvC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,GAAG;YACN,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,iBAAiB,EAAE,CAAC,EAAE,CAAC,CAAC,UAAU;QACxF,KAAK,GAAG;YACN,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,iBAAiB,EAAE,CAAC,EAAE,CAAC,CAAC,UAAU;QACxF,KAAK,GAAG;YACN,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU;QAC1F,KAAK,GAAG;YACN,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU;IAC5F,CAAC;AACH,CAAC;AAED,SAAS,cAAc,CAAC,IAAmB;IACzC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,GAAG,CAAC;QACT,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG;YACN,OAAO,EAAE,CAAC;QACZ,KAAK,GAAG;YACN,OAAO,EAAE,CAAC;IACd,CAAC;AACH,CAAC;AAeD,SAAS,aAAa,CAAC,EACrB,IAAI,GAAG,GAAG,EACV,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,EAAE,WAAW,EACpB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACW;IACnB,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IACpC,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IAClC,wDAAwD;IACxD,MAAM,UAAU,GAAe,KAAK,IAAI,MAAM,CAAC;IAC/C,2CAA2C;IAC3C,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,IAAI,CAAC;IAChE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAC1E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAY,IAAI,CAAC,CAAC;IAE/C,sDAAsD;IACtD,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpD,IAAI,UAAU,GAAG,CAAC,CAAC,CAAC;IACpB,IAAI,aAAa,GAAG,KAAK,CAAC;IAC1B,IAAI,YAAY,GAAG,KAAK,CAAC;IAEzB,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAClC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;gBAClC,UAAU,GAAG,KAAK,CAAC;YACrB,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC;QACtB,mCAAmC;QACnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC;YACpC,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;YAC5B,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;gBAChE,aAAa,GAAG,IAAI,CAAC;gBACrB,MAAM;YACR,CAAC;QACH,CAAC;QACD,kCAAkC;QAClC,KAAK,IAAI,CAAC,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACxD,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;YAC5B,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;gBAChE,YAAY,GAAG,IAAI,CAAC;gBACpB,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,yCAAyC;IACzC,IAAI,YAAY,GACd,OAAO,KAAK,SAAS;QACnB,CAAC,CAAC,sBAAsB,CAAC,MAAM,CAAC;QAChC,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAE9C,yEAAyE;IACzE,IAAI,QAAQ,EAAE,CAAC;QACb,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YAC1B,2CAA2C;YAC3C,YAAY,GAAG;gBACb,GAAG,YAAY;gBACf,GAAG,uBAAuB,CAAC,MAAM,CAAC;aACnC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,YAAY,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,0DAA0D;IAC1D,MAAM,UAAU,GACd,OAAO,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK;QAC3C,CAAC,CAAE;YACC,OAAO,EAAE,aAAa,YAAY,CAAC,EAAE,EAAE;YACvC,aAAa,EAAE,CAAC,CAAC;SACJ;QACjB,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,SAAS,GAAc;QAC3B,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,SAAS,CAAC,YAAY;QACpC,GAAG,YAAY;QACf,GAAG,UAAU;KACd,CAAC;IAEF,kFAAkF;IAClF,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,CAAC,KAA6D,EAAE,EAAE;QAChE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE1C,uCAAuC;QACvC,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;YAC1B,8BAA8B;YAC9B,sEAAsE;YACtE,MAAM,QAAQ,GAAG,KAGhB,CAAC;YACF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,QAAQ,CAAC;YACrD,MAAM,MAAM,GAAG,WAAW,CAAC,MAA4B,CAAC;YACxD,IAAI,CAAC,MAAM;gBAAE,OAAO;YAEpB,4EAA4E;YAC5E,IAAI,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC;gBAAE,OAAO;YAE/C,kBAAkB;YAClB,qBAAqB,CAAC,GAAG,EAAE;gBACzB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YAC5B,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,2CAA2C;IAC3C,MAAM,6BAA6B,GAAG,KAAK,CAAC,WAAW,CACrD,CAAC,KAA4B,EAAE,EAAE;QAC/B,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAEhD,uDAAuD;QACvD,wDAAwD;QACxD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAE1B,qEAAqE;QACrE,oEAAoE;QACpE,MAAM,UAAU,GAAI,MAA8C,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,CAAC;QAC3F,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QAExF,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,KAAK,CAAC,CAAC,0BAA0B;QAC1C,CAAC;QAED,6CAA6C;QAC7C,2EAA2E;QAC3E,MAAM,YAAY,GAChB,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC;YAChC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC;YAChC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEhC,IAAI,YAAY,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,2BAA2B;QAC3C,CAAC;QAED,0DAA0D;QAC1D,qBAAqB,CAAC,GAAG,EAAE;YACzB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,CAAC,oDAAoD;IACpE,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,CAAC,gBAAgB,CAAC,QAAQ,CACxB,KAAK,CAAC,CAAC;YACL,IAAI;YACJ,OAAO;YACP,KAAK,EAAE,UAAU;YACjB,QAAQ;YACR,QAAQ;YACR,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC;YACvC,MAAM,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC;YACvC,aAAa;YACb,YAAY;SACb,CAAC,CACF;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAC1B,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK;QACxB,CAAC,CAAC,EAAE,aAAa,EAAE,iBAAiB,EAAE;QACtC,CAAC,CAAC,EAAE,yBAAyB,EAAE,6BAA6B,EAAE,CAAC,CAAC,CAClE,IAAI,KAAK,CAAC,CACV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAC7B,CAAC;AACJ,CAAC;AAWD,SAAS,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAC7E,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACnD,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAEpC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;IAEhF,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,EAAE,IAAI,IAAI,GAAG,CAAC,CAAC;IAErD,MAAM,SAAS,GAAc;QAC3B,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC,EAAE,kDAAkD;QAC/D,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,MAAM;QACd,GAAG,EAAE,OAAO;QACZ,iBAAiB,EAAE,OAAO;KAC3B,CAAC;IAEF,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CACzD;MAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;gBAChC,gDAAgD;gBAChD,OAAO,KAAK,CAAC,YAAY,CAAC,KAA+C,EAAE;oBACzE,KAAK,EAAE,SAAS;iBACjB,CAAC,CAAC;YACL,CAAC;YACD,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAaD,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACrF,YAAY,EACZ,EAAE;IACF,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACnD,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAEpC,MAAM,IAAI,GAAG,QAAQ,IAAI,OAAO,EAAE,IAAI,IAAI,GAAG,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,IAAI,OAAO,EAAE,OAAO,IAAI,SAAS,CAAC;IAC7D,qFAAqF;IACrF,MAAM,KAAK,GAA2B,SAAS,IAAI,OAAO,EAAE,KAAK,CAAC;IAClE,MAAM,cAAc,GAAe,KAAK,IAAI,MAAM,CAAC;IACnD,MAAM,QAAQ,GAAG,QAAQ,KAAK,KAAK,IAAI,OAAO,EAAE,QAAQ,CAAC;IAEzD,qDAAqD;IACrD,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,CAAC,QAA0B,EAAE,EAAE;QAC7B,+BAA+B;QAC/B,IAAI,OAAO,EAAE,QAAQ,EAAE,CAAC;YACrB,OAAO,CAAC,QAAqD,CAAC,OAAO,GAAG,QAAQ,CAAC;QACpF,CAAC;QACD,iCAAiC;QACjC,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE,CAAC;gBACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,EAAE,YAAY,CAAC,CAClC,CAAC;IAEF,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,kEAAkE;IAClE,+EAA+E;IAC/E,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,GAAG,kBAAkB,CAC9E,OAAO,EACP,MAAM,EACN,cAAc,EACd,QAAQ,CACT,CAAC;IACF,MAAM,gBAAgB,GACpB,OAAO,KAAK,MAAM,IAAI,CAAC,QAAQ;QAC7B,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC;QACvD,CAAC,CAAC,oBAAoB,CAAC;IAE3B,uFAAuF;IACvF,MAAM,WAAW,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC;IAEpF,4CAA4C;IAC5C,MAAM,aAAa,GAAG,OAAO,EAAE,aAAa,IAAI,KAAK,CAAC;IACtD,MAAM,YAAY,GAAG,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC;IACpD,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACpE,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAEpE,MAAM,UAAU,GAAc;QAC5B,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,CAAC,EAAE,4CAA4C;QACzD,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,SAAS,CAAC,QAAQ;QAC5B,KAAK,EAAE,SAAS;QAChB,WAAW;QACX,YAAY;QACZ,yBAAyB;QACzB,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK;YACvB,CAAC,CAAE;gBACC,OAAO,EAAE,MAAM;gBACf,eAAe,EAAE,aAAa;aACjB;YACjB,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,wCAAwC;IACxC,MAAM,OAAO,GAAG,OAAO,KAAK,SAAS,CAAC;IAEtC,4DAA4D;IAC5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,WAAW,GAA8B,CAAC,CAAC,EAAE,EAAE;QACnD,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;QACD,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,UAAU,GAA6B,CAAC,CAAC,EAAE,EAAE;QACjD,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QACD,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,CACZ,CAAC,SAAS,CACR,GAAG,CAAC,CAAC,OAAO,CAAC,CACb,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAC3B,oBAAoB,CAAC,CAAC,gBAAgB,CAAC,CACvC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,IAAI,KAAK,CAAC,EACV,CACH,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,KAAK,CAAC;IACf,CAAC;IAED,uDAAuD;IACvD,uFAAuF;IACvF,OAAO,CACL,CAAC,aAAa,CACZ,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,+EAA+E;AAC/E,6BAA6B;AAC7B,+EAA+E;AAE/E,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,cAAc;CACtB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/text.d.ts

@@ -0,0 +1,23 @@
+import { themeTokens } from '../lib/theme-tokens';
+import type { Color } from '../lib/types';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+type TextSize = keyof typeof themeTokens.typography;
+type TextWeight = keyof typeof themeTokens.fontWeights;
+type TextProps = Omit<React.ComponentProps<typeof RNText>, 'size' | 'weight' | 'color'> & {
+    asChild?: boolean;
+    size?: TextSize;
+    weight?: TextWeight;
+    color?: Color;
+};
+declare const TextClassContext: React.Context<string | undefined>;
+type TextStyleContextValue = {
+    size?: TextSize;
+    weight?: TextWeight;
+    color?: string;
+};
+declare const TextStyleContext: React.Context<TextStyleContextValue | undefined>;
+declare function Text({ asChild, size, weight, color, role, style, ...props }: TextProps): React.JSX.Element;
+export { Text, TextClassContext, TextStyleContext };
+export type { TextProps, TextSize };
+//# sourceMappingURL=text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,QAAQ,GAAG,MAAM,OAAO,WAAW,CAAC,UAAU,CAAC;AACpD,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC,WAAW,CAAC;AAEvD,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,gBAAgB,mCAAqD,CAAC;AAC5E,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,gBAAgB,kDAAoE,CAAC;AAE3F,iBAAS,IAAI,CAAC,EAAE,OAAe,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBA4CvF;AAED,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AACpD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/text.js

@@ -0,0 +1,44 @@
+import { useThemeTokens } from '../lib/use-theme-tokens';
+import * as Slot from '@rn-primitives/slot';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+const TextClassContext = React.createContext(undefined);
+const TextStyleContext = React.createContext(undefined);
+function Text({ asChild = false, size, weight, color, role, style, ...props }) {
+    const { colors, typography, fontWeights } = useThemeTokens();
+    const textStyleContext = React.useContext(TextStyleContext);
+    const Component = asChild ? Slot.Text : RNText;
+    // Priority: explicit prop > context > default
+    const effectiveSize = size ?? textStyleContext?.size ?? '3';
+    const effectiveWeight = weight ?? textStyleContext?.weight;
+    // Resolve text color:
+    // 1. If color prop is set, use that palette's shade 11
+    // 2. If context provides a color, use that
+    // 3. Otherwise, use default foreground color (gray-12)
+    const gray = colors.palettes.gray;
+    const resolvedColor = color
+        ? (colors.palettes[color] ?? gray)['11']
+        : (textStyleContext?.color ?? gray['12']);
+    const typo = effectiveSize ? typography[effectiveSize] : undefined;
+    const fontWeightValue = effectiveWeight ? fontWeights[effectiveWeight] : undefined;
+    const typographyStyle = typo
+        ? {
+            fontSize: typo.fontSize,
+            lineHeight: typo.lineHeight,
+            letterSpacing: typo.letterSpacing,
+        }
+        : undefined;
+    const colorStyle = { color: resolvedColor };
+    const weightStyle = fontWeightValue ? { fontWeight: fontWeightValue } : undefined;
+    // Provide context to children so nested components (like Link) can inherit styles
+    const childContext = {
+        size: effectiveSize,
+        weight: effectiveWeight,
+        color: resolvedColor,
+    };
+    return (<TextStyleContext.Provider value={childContext}>
+      <Component style={[typographyStyle, weightStyle, colorStyle, style]} role={role} {...props}/>
+    </TextStyleContext.Provider>);
+}
+export { Text, TextClassContext, TextStyleContext };
+//# sourceMappingURL=text.js.map

package/dist/components/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,IAAI,MAAM,qBAAqB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAY9C,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAqB,SAAS,CAAC,CAAC;AAO5E,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAoC,SAAS,CAAC,CAAC;AAE3F,SAAS,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAa;IACtF,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IAC7D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAE/C,8CAA8C;IAC9C,MAAM,aAAa,GAAG,IAAI,IAAI,gBAAgB,EAAE,IAAI,IAAI,GAAG,CAAC;IAC5D,MAAM,eAAe,GAAG,MAAM,IAAI,gBAAgB,EAAE,MAAM,CAAC;IAE3D,sBAAsB;IACtB,uDAAuD;IACvD,2CAA2C;IAC3C,uDAAuD;IACvD,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IAClC,MAAM,aAAa,GAAG,KAAK;QACzB,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;QACxC,CAAC,CAAC,CAAC,gBAAgB,EAAE,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAE5C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACnE,MAAM,eAAe,GAAG,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnF,MAAM,eAAe,GAAG,IAAI;QAC1B,CAAC,CAAC;YACE,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;IAC5C,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAElF,kFAAkF;IAClF,MAAM,YAAY,GAA0B;QAC1C,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,aAAa;KACrB,CAAC;IAEF,OAAO,CACL,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAC7C;MAAA,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAC7F;IAAA,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAC7B,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,24 @@
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import * as React from 'react';
+interface TooltipProps extends Omit<TooltipPrimitive.RootProps, 'delayDuration'> {
+    /** The content to display in the tooltip */
+    content: React.ReactNode;
+    /** The trigger element */
+    children: React.ReactNode;
+    /** Delay before showing tooltip (ms) */
+    delayDuration?: number;
+    /** Side offset from trigger */
+    sideOffset?: number;
+    /** Which side to show tooltip */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Portal host name */
+    portalHost?: string;
+}
+/**
+ * Tooltip component matching web version.
+ * Uses reversed theme appearance (light mode shows dark tooltip, dark mode shows light tooltip).
+ */
+declare function Tooltip({ children, content, delayDuration, sideOffset, side, portalHost, ...rootProps }: TooltipProps): React.JSX.Element;
+export { Tooltip };
+export type { TooltipProps };
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,YAAa,SAAQ,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC;IAC9E,4CAA4C;IAC5C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0BAA0B;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAmB,EACnB,UAAc,EACd,IAAY,EACZ,UAAU,EACV,GAAG,SAAS,EACb,EAAE,YAAY,qBAqDd;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,CAAC"}