@yahoo/uds 0.1.11 → 0.1.13

package/dist/index.native.d.ts

@@ -0,0 +1,1493 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { u as UniversalImageProps, j as UniversalAvatarProps, k as UniversalBoxProps, l as UniversalPressableProps, m as UniversalButtonProps, q as UniversalStackProps, n as UniversalTextProps, r as UniversalIconProps, s as UniversalIconButtonProps, X as ColorModeForApp, a as ColorsConfig, C as ColorMode, ao as ScaleModeForApp, an as ScaleModeConfig, S as ScaleMode, ae as Modes, U as UniversalTokensConfig, Q as BackgroundStyleProps, T as BorderStyleProps, a8 as LayoutStyleProps, $ as FlexStyleProps, au as SpacingStyleProps, aA as TextStyleProps, ag as OpacityStyleProps, ar as SizingStyleProps, a7 as IconSizeConfig, K as AvatarSizeConfig, at as SpacingConfig, aq as ShapeConfig, a0 as FontFamilyConfig, a2 as FontSizeConfig, f as FontWeightConfig, ac as LineHeightConfig, aC as TextTransformConfig, B as BorderWidthConfig, aI as ZIndexConfig, h as ElevationAlias, i as FontFamilyGlobalConfig, ay as StyleProps } from './types-hirL9Qk5.js';
+export { A as AlwaysPalette, x as AlwaysPaletteAlias, y as Animation, z as AriaAttribute, D as AspectRatioAlias, G as AspectRatioConfig, J as AvatarSizeAlias, M as BackgroundColor, d as BackgroundPalette, N as BackgroundPaletteAlias, e as BackgroundWashPalette, R as BackgroundWashPaletteAlias, V as BorderWidthAlias, W as BoxShadowConfig, p as ButtonSize, o as ButtonVariant, c as CorePalette, Y as CorePaletteAlias, Z as DataAttribute, E as ElevationConfig, _ as ElevationPaletteAlias, a1 as FontFamilyGlobalAlias, a3 as FontWeightDescriptiveAlias, g as FontWeightNumericAlias, t as ForegroundColor, F as ForegroundPalette, a4 as ForegroundPaletteAlias, a5 as HighContrastMode, H as Hue, b as HueStep, I as IconName, a6 as IconSizeAlias, a9 as LetterSpacingAlias, aa as LineClampAlias, ab as LineColor, L as LinePalette, ad as LinePaletteAlias, af as OpacityAlias, O as Overflow, ah as Palette, ai as PaletteConfig, aj as PaletteType, P as PaletteValue, ak as PlatformMode, al as RegionMode, am as ScaleConfig, ap as ShapeAlias, as as SpacingAlias, av as SpectrumColor, aw as SpectrumConfig, ax as StateStyleProps, az as TextConfig, aB as TextTransformAlias, aD as TextVariant, aE as TransitionDelay, aF as TransitionDuration, aG as TransitionTiming, v as UniversalTextInputProps, aH as ZIndexAlias, w as alwaysPalette } from './types-hirL9Qk5.js';
+import { ImageProps as ImageProps$1, ImageStyle } from 'expo-image';
+import * as react from 'react';
+import * as react_native from 'react-native';
+import { ViewProps, View, PressableProps as PressableProps$1, StyleProp, ViewStyle, TextProps as TextProps$1, Text as Text$1, ScrollViewProps, ScrollView, TextStyle } from 'react-native';
+import { S as SetState, a as CVA } from './types-J4DLS6Xj.js';
+import { EdgeInsets } from 'react-native-safe-area-context';
+export { c as DEFAULT_COLOR_MODE, D as DEFAULT_COLOR_MODE_FOR_APP, g as DEFAULT_HIGH_CONTRAST_MODE, h as DEFAULT_REGION_MODE, e as DEFAULT_SCALE_MODE, b as DEFAULT_SCALE_MODE_FOR_APP, d as defaultTokensConfig, f as fontFamilyGlobal, a as fontWeightMap } from './index.native-9kYJrUPa.js';
+export { AVATAR_SIZE_PREFIX, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, FONT_FAMILY_PREFIX, FONT_ICONS_CSS_VAR, FONT_SANS_BETA_CSS_VAR, FONT_SANS_CONDENSED_CSS_VAR, FONT_SANS_CSS_VAR, FONT_SERIF_DISPLAY_CSS_VAR, FONT_SERIF_TEXT_CSS_VAR, FONT_SIZE_PREFIX, FONT_WEIGHT_PREFIX, ICON_SIZE_PREFIX, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, SHAPE_PREFIX, SMALL_SCALE_MODE_CLASSNAME, SPACING_PREFIX, SPECTRUM_COLOR_PREFIX, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, entries, getColorModeClassName, getScaleModeClassName } from './tokens/index.js';
+
+interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImageProps {
+}
+/**
+ * An image element
+ */
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, elevation, backgroundColor, backgroundColorOnActive, backgroundColorOnHover, backgroundColorOnChecked, opacity, bordered, borderedTop, borderedBottom, borderedStart, borderedEnd, borderedHorizontal, borderedVertical, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderColorOnActive, borderColorOnFocus, borderColorOnChecked, borderColorOnHover, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, zIndex, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, minHeight, maxHeight, minWidth, maxWidth, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+
+interface AvatarProps extends ImageProps, UniversalAvatarProps {
+}
+/**
+ * An image element with a fallback for representing the user.
+ * @example
+  ```tsx
+    import { Avatar } from "@yahoo/uds"
+
+    export function AvatarDemo() {
+      return (
+        <Avatar
+        alt="Colm Tuite"
+        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
+        size="l"
+        shape="circle"
+      />
+    )
+  }
+  ```
+ */
+declare function Avatar({ size: avatarSize, shape: borderRadius, contentFit, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+interface BoxProps extends UniversalBoxProps, ViewProps {
+}
+/**
+ * A layout primitive that can be used to compose other components.
+ * @example
+ ```tsx
+  import { Box } from "@yahoo/uds"
+
+  export function BoxDemo() {
+    return (
+      <Box
+        bordered
+        backgroundColor="primary"
+        borderRadius="md"
+        spacing='6'
+        >
+        Any kind of content can go here!
+      </Box>
+    )
+  }
+  ```
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<View>>;
+
+type NativePressableProps = Omit<PressableProps$1, 'children' | 'style' | 'onPress'> & {
+    style?: StyleProp<ViewStyle>;
+};
+interface PressableProps extends UniversalPressableProps, NativePressableProps {
+}
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<View>>;
+
+interface ButtonProps extends PressableProps, UniversalButtonProps {
+}
+/**
+ * A button element that can be used to trigger an action.
+ * @example
+ ```tsx
+  import { Button } from "@yahoo/uds"
+
+  export function ButtonDemo() {
+    return (
+      <HStack gap="2">
+        <Button variant="accent" onPress={console.log}>Save</Button>
+        <Button variant="accent-outline" onPress={console.log}>Cancel</Button>
+      </HStack>
+    )
+  }
+ ```
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<View>>;
+
+type HStackProps = UniversalStackProps & ViewProps;
+declare const HStack: react.ForwardRefExoticComponent<UniversalStackProps & ViewProps & react.RefAttributes<View>>;
+
+type TextPropsOriginal = Omit<TextProps$1, 'onLongPress' | 'onPress' | 'onPressIn' | 'onPressOut'>;
+interface TextProps extends UniversalTextProps, TextPropsOriginal {
+}
+declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<Text$1>>;
+
+interface IconProps extends UniversalIconProps, TextPropsOriginal {
+}
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<Text$1>>;
+
+interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
+}
+/**
+ * An icon button element that can be used to trigger an action.
+ * @example
+ ```tsx
+  import { IconButton } from "@yahoo/uds"
+
+  export function IconButtonDemo() {
+    return (
+      <IconButton variant="accent-outline" name="close" onPress={console.log} />
+    )
+  }
+ ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
+
+interface ScreenProps extends ScrollViewProps, React.PropsWithChildren {
+}
+declare const Screen: react.ForwardRefExoticComponent<ScreenProps & react.RefAttributes<ScrollView>>;
+
+type VStackProps = UniversalStackProps & ViewProps;
+declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & ViewProps & react.RefAttributes<View>>;
+
+declare function useAppState(): "background" | "active" | "inactive" | "unknown" | "extension";
+
+/** Update font scale on app change. RN does not offer a hook for tapping into this like useColorScheme so we have to manually handle based on app state. */
+declare const useDeviceFontScale: () => number;
+
+type ColorModeForAppProviderProps = React.PropsWithChildren<{
+    value?: ColorModeForApp;
+}>;
+declare const ColorModeForAppContext: react.Context<ColorModeForApp>;
+declare const ColorModeForAppContextUpdater: react.Context<SetState<ColorModeForApp>>;
+declare function useColorModeForApp(): ColorModeForApp;
+declare function ColorModeForAppProvider({ children, value, }: ColorModeForAppProviderProps): react_jsx_runtime.JSX.Element;
+
+type ColorModeForDeviceProviderProps = React.PropsWithChildren;
+declare const ColorModeForDeviceContext: react.Context<keyof {
+    light: ColorsConfig;
+    dark: ColorsConfig;
+}>;
+declare function useColorModeForDevice(): keyof {
+    light: ColorsConfig;
+    dark: ColorsConfig;
+};
+declare function ColorModeForDeviceProvider({ children }: ColorModeForDeviceProviderProps): react_jsx_runtime.JSX.Element;
+
+interface ColorModeProviderProps extends React.PropsWithChildren {
+    value?: ColorMode;
+}
+declare const ColorModeContext: react.Context<keyof {
+    light: ColorsConfig;
+    dark: ColorsConfig;
+}>;
+declare function useColorMode(): keyof {
+    light: ColorsConfig;
+    dark: ColorsConfig;
+};
+declare function ColorModeProvider({ value, children }: ColorModeProviderProps): react_jsx_runtime.JSX.Element;
+
+interface ComputedTokensForMode {
+    tabBarHeight: number;
+    statusBarHeight: number;
+    safeAreaInsets: EdgeInsets;
+}
+interface ComputedTokensProviderProps extends React.PropsWithChildren {
+}
+declare const ComputedTokensContext: react.Context<ComputedTokensForMode>;
+declare function useComputedTokens(): ComputedTokensForMode;
+declare function ComputedTokensProvider({ children }: ComputedTokensProviderProps): react_jsx_runtime.JSX.Element;
+
+declare const ScaleModeForAppContext: react.Context<ScaleModeForApp>;
+declare const ScaleModeForAppUpdaterContext: react.Context<SetState<ScaleModeForApp>>;
+interface ScaleModeForAppProviderProps extends React.PropsWithChildren {
+    value?: ScaleModeForApp;
+}
+declare function ScaleModeForAppProvider({ children, value, }: ScaleModeForAppProviderProps): react_jsx_runtime.JSX.Element;
+
+type ScaleModeForDeviceProviderProps = React.PropsWithChildren;
+declare const ScaleModeForDeviceContext: react.Context<keyof ScaleModeConfig>;
+declare function useScaleModeForDevice(): keyof ScaleModeConfig;
+declare function ScaleModeForDeviceProvider({ children }: ScaleModeForDeviceProviderProps): react_jsx_runtime.JSX.Element;
+
+interface ScaleModeProviderProps extends React.PropsWithChildren {
+    value?: ScaleMode;
+}
+declare const ScaleModeContext: react.Context<keyof ScaleModeConfig>;
+declare function useScaleMode(): keyof ScaleModeConfig;
+declare function ScaleModeProvider({ value, children }: ScaleModeProviderProps): react_jsx_runtime.JSX.Element;
+
+type ReactNativeStyle = StyleProp<ViewStyle | TextStyle | ImageStyle>;
+declare function createStyler({ colorMode, scaleMode }: Modes, config: UniversalTokensConfig): {
+    cva: CVA<ReactNativeStyle>;
+    getStyles: <T extends ReactNativeStyle>({ style, ...props }: BackgroundStyleProps & BorderStyleProps & LayoutStyleProps & FlexStyleProps & SpacingStyleProps & TextStyleProps & OpacityStyleProps & SizingStyleProps & {
+        contentFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
+    } & {
+        iconSize?: keyof IconSizeConfig | undefined;
+        avatarSize?: keyof AvatarSizeConfig | undefined;
+        imageWidth?: number | undefined;
+        imageHeight?: number | undefined;
+    } & {
+        style?: T | undefined;
+    }) => ReactNativeStyle;
+    tokens: {
+        avatarSizes: AvatarSizeConfig;
+        iconSizes: IconSizeConfig;
+        spacing: SpacingConfig;
+        shapes: ShapeConfig;
+        fontFamily: FontFamilyConfig;
+        fontSize: FontSizeConfig;
+        fontWeight: FontWeightConfig;
+        lineHeight: LineHeightConfig;
+        textTransform: TextTransformConfig;
+        spectrum: {
+            purple: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            gray: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            indigo: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            blue: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            cyan: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            teal: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            mint: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            green: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            lime: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            citron: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            yellow: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            brown: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            nude: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            orange: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            sunset: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            red: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            rose: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            pink: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            magenta: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            carbon: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+        };
+        palette: {
+            core: {
+                accent: string;
+                alert: string;
+                brand: string;
+                positive: string;
+                warning: string;
+            };
+            background: {
+                primary: string;
+                secondary: string;
+            };
+            backgroundWash: {
+                'accent-wash': string;
+                'alert-wash': string;
+                'brand-wash': string;
+                'positive-wash': string;
+                'warning-wash': string;
+            };
+            elevation: {
+                'elevation-1': string;
+                'elevation-2': string;
+                'elevation-3': string;
+                'elevation-3-inverse': string;
+                overlay: string;
+            };
+            foreground: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                muted: string;
+                'on-color': string;
+            };
+            line: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                muted: string;
+            };
+        };
+        borderWidth: BorderWidthConfig;
+        zIndex: ZIndexConfig;
+        aspectRatio: Record<string, string>;
+        elevation: Record<ElevationAlias, react_native.ShadowStyleIOS>;
+        fontFamilyGlobal: FontFamilyGlobalConfig;
+    };
+};
+declare const DEFAULT_STYLER: {
+    cva: CVA<ReactNativeStyle>;
+    getStyles: <T extends ReactNativeStyle>({ style, ...props }: BackgroundStyleProps & BorderStyleProps & LayoutStyleProps & FlexStyleProps & SpacingStyleProps & TextStyleProps & OpacityStyleProps & SizingStyleProps & {
+        contentFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
+    } & {
+        iconSize?: keyof IconSizeConfig | undefined;
+        avatarSize?: keyof AvatarSizeConfig | undefined;
+        imageWidth?: number | undefined;
+        imageHeight?: number | undefined;
+    } & {
+        style?: T | undefined;
+    }) => ReactNativeStyle;
+    tokens: {
+        avatarSizes: AvatarSizeConfig;
+        iconSizes: IconSizeConfig;
+        spacing: SpacingConfig;
+        shapes: ShapeConfig;
+        fontFamily: FontFamilyConfig;
+        fontSize: FontSizeConfig;
+        fontWeight: FontWeightConfig;
+        lineHeight: LineHeightConfig;
+        textTransform: TextTransformConfig;
+        spectrum: {
+            purple: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            gray: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            indigo: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            blue: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            cyan: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            teal: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            mint: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            green: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            lime: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            citron: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            yellow: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            brown: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            nude: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            orange: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            sunset: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            red: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            rose: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            pink: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            magenta: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+            carbon: {
+                9: string;
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                14: string;
+                15: string;
+            };
+        };
+        palette: {
+            core: {
+                accent: string;
+                alert: string;
+                brand: string;
+                positive: string;
+                warning: string;
+            };
+            background: {
+                primary: string;
+                secondary: string;
+            };
+            backgroundWash: {
+                'accent-wash': string;
+                'alert-wash': string;
+                'brand-wash': string;
+                'positive-wash': string;
+                'warning-wash': string;
+            };
+            elevation: {
+                'elevation-1': string;
+                'elevation-2': string;
+                'elevation-3': string;
+                'elevation-3-inverse': string;
+                overlay: string;
+            };
+            foreground: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                muted: string;
+                'on-color': string;
+            };
+            line: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                muted: string;
+            };
+        };
+        borderWidth: BorderWidthConfig;
+        zIndex: ZIndexConfig;
+        aspectRatio: Record<string, string>;
+        elevation: Record<ElevationAlias, react_native.ShadowStyleIOS>;
+        fontFamilyGlobal: FontFamilyGlobalConfig;
+    };
+};
+
+interface StyleProviderProps extends React.PropsWithChildren {
+    value?: UniversalTokensConfig;
+}
+declare const StyleProvider: react.NamedExoticComponent<StyleProviderProps>;
+declare function useStyles<T extends ReactNativeStyle>(props: StyleProps & {
+    style?: T;
+}): T;
+declare function useTokens(): {
+    avatarSizes: AvatarSizeConfig;
+    iconSizes: IconSizeConfig;
+    spacing: SpacingConfig;
+    shapes: ShapeConfig;
+    fontFamily: FontFamilyConfig;
+    fontSize: FontSizeConfig;
+    fontWeight: FontWeightConfig;
+    lineHeight: LineHeightConfig;
+    textTransform: TextTransformConfig;
+    spectrum: {
+        purple: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        gray: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        indigo: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        blue: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        cyan: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        teal: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        mint: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        green: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        lime: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        citron: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        yellow: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        brown: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        nude: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        orange: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        sunset: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        red: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        rose: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        pink: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        magenta: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+        carbon: {
+            9: string;
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            10: string;
+            11: string;
+            12: string;
+            13: string;
+            14: string;
+            15: string;
+        };
+    };
+    palette: {
+        core: {
+            accent: string;
+            alert: string;
+            brand: string;
+            positive: string;
+            warning: string;
+        };
+        background: {
+            primary: string;
+            secondary: string;
+        };
+        backgroundWash: {
+            'accent-wash': string;
+            'alert-wash': string;
+            'brand-wash': string;
+            'positive-wash': string;
+            'warning-wash': string;
+        };
+        elevation: {
+            'elevation-1': string;
+            'elevation-2': string;
+            'elevation-3': string;
+            'elevation-3-inverse': string;
+            overlay: string;
+        };
+        foreground: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            muted: string;
+            'on-color': string;
+        };
+        line: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            muted: string;
+        };
+    };
+    borderWidth: BorderWidthConfig;
+    zIndex: ZIndexConfig;
+    aspectRatio: Record<string, string>;
+    elevation: Record<ElevationAlias, react_native.ShadowStyleIOS>;
+    fontFamilyGlobal: FontFamilyGlobalConfig;
+};
+
+interface ThemeProviderProps extends React.PropsWithChildren {
+    colorModeForApp?: ColorModeForApp;
+    scaleModeForApp?: ScaleModeForApp;
+    config?: UniversalTokensConfig;
+}
+declare function ThemeProvider({ children, colorModeForApp, scaleModeForApp, config, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps, AvatarSizeConfig, BackgroundStyleProps, BorderStyleProps, BorderWidthConfig, Box, type BoxProps, Button, type ButtonProps, ColorMode, ColorModeContext, ColorModeForApp, ColorModeForAppContext, ColorModeForAppContextUpdater, ColorModeForAppProvider, type ColorModeForAppProviderProps, ColorModeForDeviceContext, ColorModeForDeviceProvider, type ColorModeForDeviceProviderProps, ColorModeProvider, type ColorModeProviderProps, ColorsConfig, ComputedTokensContext, ComputedTokensProvider, type ComputedTokensProviderProps, DEFAULT_STYLER, ElevationAlias, FlexStyleProps, FontFamilyConfig, FontFamilyGlobalConfig, FontSizeConfig, FontWeightConfig, HStack, type HStackProps, Icon, IconButton, type IconButtonProps, type IconProps, IconSizeConfig, Image, type ImageProps, LayoutStyleProps, LineHeightConfig, Modes, OpacityStyleProps, Pressable, type PressableProps, type ReactNativeStyle, ScaleMode, ScaleModeConfig, ScaleModeContext, ScaleModeForApp, ScaleModeForAppContext, ScaleModeForAppProvider, type ScaleModeForAppProviderProps, ScaleModeForAppUpdaterContext, ScaleModeForDeviceContext, ScaleModeForDeviceProvider, type ScaleModeForDeviceProviderProps, ScaleModeProvider, type ScaleModeProviderProps, Screen, type ScreenProps, SetState, ShapeConfig, SizingStyleProps, SpacingConfig, SpacingStyleProps, StyleProps, StyleProvider, Text, type TextProps, type TextPropsOriginal, TextStyleProps, TextTransformConfig, ThemeProvider, type ThemeProviderProps, UniversalAvatarProps, UniversalBoxProps, UniversalButtonProps, UniversalIconButtonProps, UniversalIconProps, UniversalImageProps, UniversalPressableProps, UniversalStackProps, UniversalTextProps, UniversalTokensConfig, VStack, type VStackProps, ZIndexConfig, createStyler, useAppState, useColorMode, useColorModeForApp, useColorModeForDevice, useComputedTokens, useDeviceFontScale, useScaleMode, useScaleModeForDevice, useStyles, useTokens };