react-native-system-ui 1.0.3 → 1.0.5

package/dist/types/components/selector/types.d.ts

@@ -0,0 +1,74 @@
+import type React from 'react';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type SelectorValue = string | number;
+export interface SelectorOption<V extends SelectorValue> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    value: V;
+    disabled?: boolean;
+}
+export interface SelectorChangeExtend<V extends SelectorValue> {
+    items: SelectorOption<V>[];
+}
+export interface SelectorTokens {
+    defaults: {
+        columns: number;
+        multiple: boolean;
+        showCheckMark: boolean;
+        disabled: boolean;
+    };
+    layout: {
+        container: ViewStyle;
+        pressable: ViewStyle;
+        item: ViewStyle;
+        label: TextStyle;
+        description: TextStyle;
+        checkMark: TextStyle;
+        checkMarkTriangle: ViewStyle;
+    };
+    colors: {
+        border: string;
+        borderActive: string;
+        background: string;
+        backgroundActive: string;
+        text: string;
+        textActive: string;
+        description: string;
+        disabledText: string;
+        check: string;
+        checkForeground: string;
+    };
+    typography: {
+        fontSize: number;
+        descriptionSize: number;
+        fontFamily: string;
+        fontWeight: NonNullable<TextStyle['fontWeight']>;
+    };
+    radii: {
+        item: number;
+    };
+    spacing: {
+        gap: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        descriptionMarginTop: number;
+    };
+    states: {
+        disabledOpacity: number;
+    };
+}
+export interface SelectorProps<V extends SelectorValue = SelectorValue> extends ViewProps {
+    options: SelectorOption<V>[];
+    columns?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    defaultValue?: V[];
+    value?: V[];
+    showCheckMark?: boolean;
+    onChange?: (value: V[], extend: SelectorChangeExtend<V>) => void;
+    itemStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    descriptionStyle?: StyleProp<TextStyle>;
+    tokensOverride?: DeepPartial<SelectorTokens>;
+}

package/dist/types/components/share-sheet/types.d.ts

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+import type { DeepPartial } from '../../types';
+import type { PopupProps } from '../popup/Popup';
+import type { ShareSheetTokens } from './tokens';
+export interface ShareSheetOption {
+    key?: React.Key;
+    name: React.ReactNode;
+    icon: React.ReactNode;
+    description?: React.ReactNode;
+    onPress?: (option: ShareSheetOption) => void;
+}
+export type ShareSheetOptions = ShareSheetOption[] | ShareSheetOption[][];
+export interface ShareSheetProps extends Omit<PopupProps, 'children' | 'tokensOverride'> {
+    visible: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    cancelText?: React.ReactNode;
+    options?: ShareSheetOptions;
+    columns?: number;
+    closeOnSelect?: boolean;
+    safeAreaInsetBottom?: boolean;
+    children?: React.ReactNode;
+    tokensOverride?: DeepPartial<ShareSheetTokens>;
+    onSelect?: (option: ShareSheetOption, index: number) => void;
+    onCancel?: () => void;
+}

package/dist/types/components/sidebar/types.d.ts

@@ -0,0 +1,64 @@
+import type * as React from 'react';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export interface SidebarTokens {
+    defaults: {
+        disabled: boolean;
+    };
+    layout: {
+        container: ViewStyle;
+        side: ViewStyle;
+        content: ViewStyle;
+        item: ViewStyle;
+        indicatorWrapper: ViewStyle;
+        itemContent: ViewStyle;
+        indicator: ViewStyle;
+        titleRow: ViewStyle;
+        badge: ViewStyle;
+        dot: ViewStyle;
+        title: TextStyle;
+    };
+    colors: {
+        background: string;
+        border: string;
+        title: string;
+        titleActive: string;
+        disabled: string;
+        indicator: string;
+    };
+    typography: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: NonNullable<TextStyle['fontWeight']>;
+        contentFontSize: number;
+    };
+    sizing: {
+        width: number;
+        itemHeight: number;
+        indicatorWidth: number;
+    };
+    borders: {
+        width: number;
+    };
+}
+export interface SidebarProps extends Omit<ViewProps, 'children'> {
+    value?: number;
+    defaultValue?: number;
+    sideStyle?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    onChange?: (value: number) => void;
+    tokensOverride?: DeepPartial<SidebarTokens>;
+}
+export interface SidebarItemProps extends ViewProps {
+    title?: React.ReactNode;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+    dot?: boolean;
+    onClick?: (value: number) => void;
+    textStyle?: StyleProp<TextStyle>;
+    badgeStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    index?: number;
+    tokensOverride?: DeepPartial<SidebarTokens>;
+}

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

@@ -0,0 +1,45 @@
+import type { ViewProps } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type SkeletonAvatarShape = 'round' | 'square';
+export interface SkeletonTokens {
+    defaults: {
+        rowCount: number;
+        rowWidth: number | string;
+        lastRowWidth: number | string;
+        rowHeight: number | string;
+        avatarSize: number | string;
+        titleWidth: number | string;
+    };
+    colors: {
+        block: string;
+        highlight: string;
+    };
+    radius: number;
+    spacing: {
+        containerGap: number;
+        rowGap: number;
+    };
+    animation: {
+        duration: number;
+        minOpacity: number;
+        maxOpacity: number;
+    };
+}
+export interface SkeletonProps extends ViewProps {
+    isLoaded?: boolean;
+    loading?: boolean;
+    animate?: boolean;
+    startColor?: string;
+    speed?: number | string;
+    avatar?: boolean;
+    avatarSize?: number | string;
+    avatarShape?: SkeletonAvatarShape;
+    title?: boolean;
+    titleWidth?: number | string;
+    row?: number;
+    rowWidth?: number | string | Array<number | string>;
+    rowHeight?: number | string | Array<number | string>;
+    round?: boolean;
+    tokensOverride?: DeepPartial<SkeletonTokens>;
+    children?: React.ReactNode;
+}

package/dist/types/components/slider/types.d.ts

@@ -0,0 +1,38 @@
+import type React from 'react';
+import type { GestureResponderEvent, ViewProps } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { SliderTokens } from './tokens';
+export type SliderValue = number | [number, number];
+export type SliderNumberish = number | string;
+export interface SliderProps extends ViewProps {
+    value?: SliderValue;
+    min?: SliderNumberish;
+    max?: SliderNumberish;
+    step?: SliderNumberish;
+    range?: boolean;
+    vertical?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    reverse?: boolean;
+    debug?: boolean;
+    activeColor?: string;
+    inactiveColor?: string;
+    barHeight?: SliderNumberish;
+    trackHeight?: SliderNumberish;
+    buttonSize?: SliderNumberish;
+    thumbSize?: SliderNumberish;
+    tokensOverride?: DeepPartial<SliderTokens>;
+    button?: React.ReactNode | (({ value }: {
+        value: SliderValue;
+    }) => React.ReactNode);
+    thumb?: React.ReactNode;
+    leftThumb?: React.ReactNode;
+    rightThumb?: React.ReactNode;
+    leftButton?: React.ReactNode;
+    rightButton?: React.ReactNode;
+    ariaLabel?: string;
+    onChange?: (value: SliderValue) => void;
+    onChangeAfter?: (value: SliderValue) => void;
+    onDragStart?: (event: GestureResponderEvent, value: SliderValue) => void;
+    onDragEnd?: (event: GestureResponderEvent, value: SliderValue) => void;
+}

package/dist/types/components/space/types.d.ts

@@ -0,0 +1,39 @@
+import type React from 'react';
+import type { ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type SpaceDirection = 'horizontal' | 'vertical';
+export type SpaceAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+export type SpaceJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
+export type SpaceGap = number | string | [number | string, number | string];
+export type SpaceSizePreset = 'mini' | 'small' | 'normal' | 'large';
+export interface SpaceTokens {
+    defaults: {
+        direction: SpaceDirection;
+        wrap: boolean;
+        gapPreset: SpaceSizePreset;
+    };
+    layout: {
+        container: ViewStyle;
+    };
+    typography: {
+        fontFamily: string;
+        fontSize: number;
+    };
+    sizing: {
+        presets: Record<SpaceSizePreset, number>;
+    };
+}
+export interface SpaceProps extends ViewProps {
+    children?: React.ReactNode;
+    gap?: SpaceGap;
+    size?: SpaceGap | SpaceSizePreset;
+    direction?: SpaceDirection;
+    align?: SpaceAlign;
+    justify?: SpaceJustify;
+    wrap?: boolean;
+    block?: boolean;
+    fill?: boolean;
+    divider?: React.ReactNode;
+    onClick?: ViewProps['onTouchEnd'];
+    tokensOverride?: DeepPartial<SpaceTokens>;
+}

package/dist/types/components/stepper/types.d.ts

@@ -0,0 +1,46 @@
+import type { GestureResponderEvent, StyleProp, TextInputProps, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { StepperTokens } from './tokens';
+export type StepperTheme = 'default' | 'round';
+export interface StepperProps extends Omit<ViewProps, 'onChange'> {
+    value?: number | null;
+    defaultValue?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    autoFixed?: boolean;
+    beforeChange?: (value: number | null) => boolean | Promise<boolean>;
+    integer?: boolean;
+    decimalLength?: number | string;
+    disabled?: boolean;
+    disablePlus?: boolean;
+    disableMinus?: boolean;
+    disableInput?: boolean;
+    allowEmpty?: boolean;
+    showPlus?: boolean;
+    showMinus?: boolean;
+    showInput?: boolean;
+    longPress?: boolean;
+    theme?: StepperTheme;
+    inputWidth?: number | string;
+    buttonSize?: number | string;
+    name?: string;
+    placeholder?: string;
+    tokensOverride?: DeepPartial<StepperTokens>;
+    onClick?: (event: GestureResponderEvent) => void;
+    onChange?: (value: number | null, detail?: {
+        name?: string;
+    }) => void;
+    onPlus?: (event: GestureResponderEvent, value: number | null) => void;
+    onMinus?: (event: GestureResponderEvent, value: number | null) => void;
+    onOverlimit?: (type: 'plus' | 'minus') => void;
+    onFocus?: TextInputProps['onFocus'];
+    onBlur?: TextInputProps['onBlur'];
+    inputProps?: TextInputProps;
+    inputStyle?: StyleProp<TextStyle>;
+    buttonStyle?: StyleProp<ViewStyle>;
+}
+export interface StepperInstance {
+    focus: () => void;
+    blur: () => void;
+}

package/dist/types/components/swiper/types.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { StyleProp, ViewStyle, FlatListProps } from 'react-native';
+import type { SwiperPagIndicatorProps } from './SwiperPagIndicator';
+export interface SwiperProps<T = unknown> {
+    data?: T[];
+    renderItem?: FlatListProps<T>['renderItem'];
+    children?: React.ReactElement | React.ReactElement[];
+    initialSwipe?: number;
+    touchable?: boolean;
+    loop?: boolean;
+    autoplay?: boolean | number;
+    vertical?: boolean;
+    onChange?: (index: number) => void;
+    indicator?: boolean | ((total: number, current: number) => React.ReactNode);
+    indicatorProps?: Omit<SwiperPagIndicatorProps, 'total' | 'current' | 'vertical'>;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export interface SwiperItemProps {
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    testID?: string;
+}
+export type SwiperInstance = {
+    swipeTo: (index: number, animated?: boolean) => void;
+    swipeNext: () => void;
+    swipePrev: () => void;
+    getCurrentIndex: () => number;
+};

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

@@ -0,0 +1,33 @@
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export interface SwitchTokens {
+    defaults: {
+        size: number;
+        disabled: boolean;
+        activeValue: unknown;
+        inactiveValue: unknown;
+    };
+    colors: {
+        activeTrack: string;
+        inactiveTrack: string;
+        handle: string;
+    };
+    opacity: {
+        disabled: number;
+        pressed: number;
+    };
+}
+export interface SwitchProps<V = boolean> {
+    checked?: V;
+    defaultChecked?: V;
+    disabled?: boolean;
+    size?: number | 'sm' | 'md' | 'lg' | string;
+    activeColor?: string;
+    inactiveColor?: string;
+    activeValue?: V;
+    inactiveValue?: V;
+    tokensOverride?: DeepPartial<SwitchTokens>;
+    onChange?: (val: V) => void;
+    onClick?: (event: GestureResponderEvent) => void;
+    style?: StyleProp<ViewStyle>;
+}

package/dist/types/components/tabbar/types.d.ts

@@ -0,0 +1,39 @@
+import type * as React from 'react';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { BadgeProps } from '../badge/types';
+import type { DeepPartial } from '../../types';
+import type { TabbarTokens } from './tokens';
+export type TabbarValue = string | number;
+export interface TabbarProps<T = TabbarValue> extends Omit<ViewProps, 'children'> {
+    children?: React.ReactNode;
+    value?: T;
+    defaultValue?: T;
+    fixed?: boolean;
+    border?: boolean;
+    zIndex?: number;
+    activeColor?: string;
+    inactiveColor?: string;
+    background?: string;
+    placeholder?: boolean;
+    safeAreaInsetBottom?: boolean;
+    iconSize?: number;
+    tokensOverride?: DeepPartial<TabbarTokens>;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    onChange?: (name: T, index: number) => void;
+}
+export interface TabbarItemProps<T = TabbarValue> extends Omit<ViewProps, 'children'> {
+    name?: T;
+    icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
+    badge?: BadgeProps | React.ReactNode;
+    dot?: boolean;
+    onClick?: () => void;
+    textStyle?: StyleProp<TextStyle>;
+    iconStyle?: StyleProp<ViewStyle>;
+    children?: React.ReactNode | ((active: boolean) => React.ReactNode);
+    disabled?: boolean;
+    testID?: string;
+    tokensOverride?: DeepPartial<TabbarTokens>;
+    index?: number;
+    iconSize?: number;
+}

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

@@ -0,0 +1,64 @@
+import type * as React from 'react';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { TabsTokens } from './tokens';
+export type TabsType = 'line' | 'card' | 'capsule' | 'jumbo';
+export type TabsAlign = 'start' | 'center';
+export type TabsValue = string | number;
+export interface TabsSwipeableConfig {
+    autoHeight?: boolean;
+    preventScroll?: boolean;
+}
+export interface TabsClickEvent {
+    name: TabsValue;
+    index: number;
+    disabled: boolean;
+    event: unknown;
+}
+export interface TabPaneProps {
+    name?: TabsValue;
+    title?: React.ReactNode | ((active: boolean) => React.ReactNode);
+    description?: React.ReactNode | ((active: boolean) => React.ReactNode);
+    badge?: React.ReactNode;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export interface TabsProps extends Omit<ViewProps, 'children' | 'onLayout'> {
+    children?: React.ReactNode;
+    active?: TabsValue;
+    defaultActive?: TabsValue;
+    type?: TabsType;
+    align?: TabsAlign;
+    color?: string;
+    background?: string;
+    border?: boolean;
+    lineWidth?: number | string;
+    lineHeight?: number | string;
+    titleActiveColor?: string;
+    titleInactiveColor?: string;
+    tokensOverride?: DeepPartial<TabsTokens>;
+    ellipsis?: boolean;
+    swipeThreshold?: number;
+    animated?: boolean;
+    duration?: number;
+    beforeChange?: (name: TabsValue) => boolean | Promise<boolean>;
+    lazyRender?: boolean;
+    lazyRenderPlaceholder?: React.ReactNode;
+    swipeable?: boolean | TabsSwipeableConfig;
+    scrollable?: boolean;
+    navLeft?: React.ReactNode;
+    navRight?: React.ReactNode;
+    navBottom?: React.ReactNode;
+    tabBarStyle?: StyleProp<ViewStyle>;
+    tabStyle?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+    descriptionStyle?: StyleProp<TextStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    onClickTab?: (payload: TabsClickEvent) => void;
+    onChange?: (name: TabsValue, index: number) => void;
+}
+export interface TabsRef {
+    scrollTo: (name: TabsValue, options?: {
+        immediate?: boolean;
+    }) => void;
+}

package/dist/types/components/tag/types.d.ts

@@ -0,0 +1,69 @@
+import type { PressableProps, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+export type TagSize = 'mini' | 'small' | 'medium' | 'large';
+export interface TagTokens {
+    defaults: {
+        type: TagType;
+        size: TagSize;
+        plain: boolean;
+        round: boolean;
+        mark: boolean;
+        show: boolean;
+        pressedOpacity: number;
+    };
+    layout: {
+        container: ViewStyle;
+        close: ViewStyle;
+    };
+    colors: {
+        plainBackground: string;
+        toneMap: Record<TagType, {
+            background: string;
+            text: string;
+        }>;
+    };
+    typography: {
+        fontFamily: string;
+        lineHeightMultiplier: number;
+        fontWeight: TextStyle['fontWeight'];
+    };
+    sizing: {
+        sizes: Record<TagSize, {
+            fontSize: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            borderRadius: number;
+            lineHeight: number;
+        }>;
+        closeIconSize: number;
+    };
+    radii: {
+        round: number;
+        markLeading: number;
+    };
+    borders: {
+        width: number;
+    };
+    spacing: {
+        closeGap: number;
+        closeHitSlop: number;
+    };
+}
+export interface TagProps extends ViewProps {
+    children?: React.ReactNode;
+    type?: TagType;
+    size?: TagSize;
+    color?: string;
+    textColor?: string;
+    plain?: boolean;
+    round?: boolean;
+    mark?: boolean;
+    show?: boolean;
+    closeable?: boolean;
+    closeIcon?: React.ReactNode | ((color: string, size: number) => React.ReactNode);
+    onClose?: () => void;
+    onPress?: PressableProps['onPress'];
+    textStyle?: StyleProp<TextStyle>;
+    tokensOverride?: DeepPartial<TagTokens>;
+}

package/dist/types/components/theme.d.ts

@@ -0,0 +1,112 @@
+import type { ActionSheetTokens } from './action-sheet/types';
+import type { AreaTokens } from './area/tokens';
+import type { AvatarTokens } from './avatar/types';
+import type { BadgeTokens } from './badge/types';
+import type { ButtonTokens } from './button/types';
+import type { CalendarTokens } from './calendar/types';
+import type { CascaderTokens } from './cascader/types';
+import type { CellTokens } from './cell/types';
+import type { CheckboxTokens } from './checkbox/types';
+import type { CircleTokens } from './circle/types';
+import type { CollapseTokens } from './collapse/types';
+import type { ConfigProviderTokens } from './config-provider/tokens';
+import type { CountDownTokens } from './count-down/types';
+import type { DatetimePickerTokens } from './datetime-picker/tokens';
+import type { DialogTokens } from './dialog/tokens';
+import type { DividerTokens } from './divider/types';
+import type { EmptyTokens } from './empty/types';
+import type { FieldTokens } from './field/tokens';
+import type { FlexTokens } from './flex/types';
+import type { FormTokens } from './form/tokens';
+import type { GridTokens } from './grid/types';
+import type { ImageTokens } from './image/types';
+import type { ImagePreviewTokens } from './image-preview/tokens';
+import type { InputTokens } from './input/types';
+import type { LoadingTokens } from './loading/types';
+import type { NavBarTokens } from './nav-bar/types';
+import type { NoticeBarTokens } from './notice-bar/tokens';
+import type { NotifyTokens } from './notify/types';
+import type { NumberKeyboardTokens } from './number-keyboard/tokens';
+import type { OverlayTokens } from './overlay/tokens';
+import type { PasswordInputTokens } from './password-input/tokens';
+import type { PickerTokens } from './picker/tokens';
+import type { PopupTokens } from './popup/tokens';
+import type { ProgressTokens } from './progress/types';
+import type { PortalTokens } from './portal/tokens';
+import type { RadioTokens } from './radio/types';
+import type { SearchTokens } from './search/tokens';
+import type { SelectorTokens } from './selector/types';
+import type { ShareSheetTokens } from './share-sheet/tokens';
+import type { SidebarTokens } from './sidebar/types';
+import type { SkeletonTokens } from './skeleton/types';
+import type { SliderTokens } from './slider/tokens';
+import type { SpaceTokens } from './space/types';
+import type { StepperTokens } from './stepper/tokens';
+import type { SwiperTokens } from './swiper/tokens';
+import type { SwiperPagIndicatorTokens } from './swiper/SwiperPagIndicator';
+import type { SwitchTokens } from './switch/types';
+import type { TabbarTokens } from './tabbar/tokens';
+import type { TabsTokens } from './tabs/tokens';
+import type { TagTokens } from './tag/types';
+import type { ToastTokens } from './toast/tokens';
+import type { TypographyTokens } from './typography/types';
+import type { SafeAreaViewTokens } from './safe-area-view/tokens';
+import type { WaterMarkTokens } from './water-mark/types';
+declare module '../design-system/ThemeContext' {
+    interface ThemeComponentTokensMap {
+        actionSheet: ActionSheetTokens;
+        area: AreaTokens;
+        avatar: AvatarTokens;
+        badge: BadgeTokens;
+        button: ButtonTokens;
+        calendar: CalendarTokens;
+        cascader: CascaderTokens;
+        cell: CellTokens;
+        checkbox: CheckboxTokens;
+        circle: CircleTokens;
+        collapse: CollapseTokens;
+        configProvider: ConfigProviderTokens;
+        countDown: CountDownTokens;
+        datetimePicker: DatetimePickerTokens;
+        dialog: DialogTokens;
+        divider: DividerTokens;
+        empty: EmptyTokens;
+        field: FieldTokens;
+        flex: FlexTokens;
+        form: FormTokens;
+        grid: GridTokens;
+        image: ImageTokens;
+        imagePreview: ImagePreviewTokens;
+        input: InputTokens;
+        loading: LoadingTokens;
+        navBar: NavBarTokens;
+        noticeBar: NoticeBarTokens;
+        notify: NotifyTokens;
+        numberKeyboard: NumberKeyboardTokens;
+        overlay: OverlayTokens;
+        passwordInput: PasswordInputTokens;
+        picker: PickerTokens;
+        popup: PopupTokens;
+        progress: ProgressTokens;
+        portal: PortalTokens;
+        radio: RadioTokens;
+        search: SearchTokens;
+        selector: SelectorTokens;
+        shareSheet: ShareSheetTokens;
+        sidebar: SidebarTokens;
+        skeleton: SkeletonTokens;
+        slider: SliderTokens;
+        space: SpaceTokens;
+        stepper: StepperTokens;
+        swiper: SwiperTokens;
+        swiperPagIndicator: SwiperPagIndicatorTokens;
+        switch: SwitchTokens;
+        safeAreaView: SafeAreaViewTokens;
+        tabbar: TabbarTokens;
+        tabs: TabsTokens;
+        tag: TagTokens;
+        toast: ToastTokens;
+        typography: TypographyTokens;
+        waterMark: WaterMarkTokens;
+    }
+}