react-native-system-ui 1.0.4 → 1.0.6

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

@@ -0,0 +1,41 @@
+import type { Animated, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { PopupTokens } from './tokens';
+export type PopupPlacement = 'top' | 'bottom' | 'left' | 'right' | 'center';
+export type PopupCloseIconPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export interface PopupProps extends ViewProps {
+    visible: boolean;
+    position?: PopupPlacement;
+    placement?: PopupPlacement;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    tokensOverride?: DeepPartial<PopupTokens>;
+    overlay?: boolean;
+    overlayStyle?: StyleProp<ViewStyle>;
+    overlayAccessibilityLabel?: string;
+    closeOnOverlayPress?: boolean;
+    closeOnClickOverlay?: boolean;
+    overlayTestID?: string;
+    closeable?: boolean;
+    closeIcon?: React.ReactNode;
+    closeIconPosition?: PopupCloseIconPosition;
+    stopPropagation?: boolean;
+    round?: boolean;
+    safeArea?: boolean;
+    safeAreaInsetTop?: boolean;
+    safeAreaInsetBottom?: boolean;
+    lockScroll?: boolean;
+    destroyOnClose?: boolean;
+    duration?: number;
+    zIndex?: number;
+    closeOnBackPress?: boolean;
+    closeOnPopstate?: boolean;
+    children?: React.ReactNode;
+    beforeClose?: (reason: 'close-icon' | 'overlay' | 'close') => boolean | Promise<boolean>;
+    onClickOverlay?: () => void;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onOpened?: () => void;
+    onClosed?: () => void;
+    contentAnimationStyle?: Animated.WithAnimatedObject<ViewStyle>;
+}

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

@@ -0,0 +1 @@
+export type { PortalProps } from './Portal';

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

@@ -0,0 +1,51 @@
+import type React from 'react';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export interface ProgressTokens {
+    defaults: {
+        percentage: number;
+        inactive: boolean;
+        showPivot: boolean;
+        transition: boolean;
+        animationDuration: number;
+    };
+    layout: {
+        track: ViewStyle;
+        indicator: ViewStyle;
+        pivot: ViewStyle;
+        pivotText: TextStyle;
+    };
+    colors: {
+        track: string;
+        indicator: string;
+        pivotText: string;
+    };
+    typography: {
+        fontFamily: string;
+        pivotFontSize: number;
+    };
+    sizing: {
+        height: number;
+        pivotPaddingHorizontal: number;
+        pivotPaddingVertical: number;
+    };
+}
+export interface ProgressProps extends ViewProps {
+    percentage?: number | string;
+    strokeWidth?: number | string;
+    color?: string;
+    trackColor?: string;
+    pivotText?: React.ReactNode;
+    pivotColor?: string;
+    textColor?: string;
+    inactive?: boolean;
+    showPivot?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    animated?: boolean;
+    transition?: boolean;
+    animationDuration?: number;
+    tokensOverride?: DeepPartial<ProgressTokens>;
+    style?: StyleProp<ViewStyle>;
+    pivotStyle?: StyleProp<TextStyle>;
+    indicatorStyle?: StyleProp<ViewStyle>;
+}

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

@@ -0,0 +1,95 @@
+import type React from 'react';
+import type { GestureResponderEvent, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type RadioValue = string | number;
+export type RadioLabelPosition = 'left' | 'right';
+export type RadioGroupDirection = 'horizontal' | 'vertical';
+export type RadioShape = 'round' | 'square';
+export type RadioIconRender = (params: {
+    checked: boolean;
+    disabled: boolean;
+}) => React.ReactNode;
+export interface RadioTokens {
+    defaults: {
+        iconSize: number;
+        labelPosition: RadioLabelPosition;
+        shape: RadioShape;
+        labelDisabled: boolean;
+        groupDisabled: boolean;
+        groupDirection: RadioGroupDirection;
+    };
+    layout: {
+        container: ViewStyle;
+        iconWrapper: ViewStyle;
+        labelWrapper: ViewStyle;
+        icon: ViewStyle;
+        label: TextStyle;
+        groupHorizontal: ViewStyle;
+        groupVertical: ViewStyle;
+        groupItem: ViewStyle;
+    };
+    colors: {
+        border: string;
+        background: string;
+        checkedBackground: string;
+        disabledBorder: string;
+        disabledBackground: string;
+        checkmark: string;
+        label: string;
+        labelDisabled: string;
+    };
+    typography: {
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: NonNullable<TextStyle['fontWeight']>;
+        lineHeightMultiplier: number;
+    };
+    sizing: {
+        dotScale: number;
+    };
+    radii: {
+        round: number;
+        square: number;
+    };
+    borders: {
+        width: number;
+    };
+    spacing: {
+        gap: number;
+        groupGap: number;
+    };
+}
+export interface RadioProps extends Omit<ViewProps, 'children'> {
+    name?: RadioValue;
+    value?: RadioValue;
+    disabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    iconSize?: number | string;
+    checkedColor?: string;
+    shape?: RadioShape;
+    iconRender?: RadioIconRender;
+    labelPosition?: RadioLabelPosition;
+    labelDisabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    children?: React.ReactNode;
+    tokensOverride?: DeepPartial<RadioTokens>;
+    onClick?: (event: GestureResponderEvent) => void;
+    onChange?: (checked: boolean) => void;
+    'aria-label'?: string;
+}
+export interface RadioGroupProps extends ViewProps {
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onChange?: (value: RadioValue) => void;
+    disabled?: boolean;
+    direction?: RadioGroupDirection;
+    iconSize?: number | string;
+    checkedColor?: string;
+    labelDisabled?: boolean;
+    gap?: number;
+    name?: string;
+    children?: React.ReactNode;
+    tokensOverride?: DeepPartial<RadioTokens>;
+}

package/dist/types/components/safe-area-view/types.d.ts

@@ -0,0 +1 @@
+export type { SafeAreaViewProps } from './SafeAreaView';

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

@@ -0,0 +1,28 @@
+import type React from 'react';
+import type { NativeSyntheticEvent, StyleProp, TextInputSubmitEditingEventData, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { FieldInputAlign, FieldProps } from '../field/types';
+import type { SearchTokens } from './tokens';
+export type SearchShape = 'square' | 'round';
+export interface SearchProps extends Omit<FieldProps, 'style' | 'contentStyle' | 'label' | 'labelStyle' | 'labelWidth' | 'labelAlign' | 'required' | 'colon' | 'intro' | 'tooltip' | 'description' | 'border' | 'size' | 'center' | 'controlAlign' | 'clickable' | 'isLink' | 'arrowDirection' | 'prefix' | 'suffix' | 'button' | 'extra' | 'rows' | 'autosize' | 'autoSize' | 'showWordLimit' | 'type' | 'tokensOverride'> {
+    label?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    fieldStyle?: FieldProps['style'];
+    fieldContentStyle?: FieldProps['contentStyle'];
+    actionText?: React.ReactNode;
+    action?: React.ReactNode;
+    showAction?: boolean;
+    shape?: SearchShape;
+    background?: string;
+    tokensOverride?: DeepPartial<SearchTokens>;
+    align?: FieldInputAlign;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onCancel?: () => void;
+    onSubmitEditing?: (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
+}
+export interface SearchRef {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+}

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;
+}