react-native-system-ui 1.0.4 → 1.0.5

package/dist/types/components/nav-bar/types.d.ts

@@ -0,0 +1,67 @@
+import type * as React from 'react';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export interface NavBarTokens {
+    defaults: {
+        fixed: boolean;
+        placeholder: boolean;
+        border: boolean;
+        safeAreaInsetTop: boolean;
+        leftArrow: boolean;
+        zIndex: number;
+    };
+    layout: {
+        container: ViewStyle;
+        bar: ViewStyle;
+        center: ViewStyle;
+        side: ViewStyle;
+        rightAlign: ViewStyle;
+        sidePlaceholder: ViewStyle;
+        titleWrapper: ViewStyle;
+        title: TextStyle;
+        description: TextStyle;
+        sideText: TextStyle;
+        fixed: ViewStyle;
+    };
+    colors: {
+        background: string;
+        text: string;
+        description: string;
+        border: string;
+        icon: string;
+    };
+    typography: {
+        fontFamily: string;
+        titleSize: number;
+        titleWeight: NonNullable<TextStyle['fontWeight']>;
+        descriptionSize: number;
+    };
+    sizing: {
+        height: number;
+    };
+}
+export interface NavBarProps extends Omit<ViewProps, 'children'> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    leftText?: React.ReactNode;
+    rightText?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    leftArrow?: boolean | React.ReactNode;
+    fixed?: boolean;
+    placeholder?: boolean;
+    zIndex?: number;
+    border?: boolean;
+    safeAreaInsetTop?: boolean;
+    background?: string;
+    tintColor?: string;
+    tokensOverride?: DeepPartial<NavBarTokens>;
+    titleStyle?: StyleProp<TextStyle>;
+    descriptionStyle?: StyleProp<TextStyle>;
+    sideStyle?: StyleProp<ViewStyle>;
+    onPressLeft?: () => void;
+    onClickLeft?: () => void;
+    onPressRight?: () => void;
+    onClickRight?: () => void;
+}

package/dist/types/components/notice-bar/types.d.ts

@@ -0,0 +1,26 @@
+import type { TextProps, ViewProps } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { NoticeBarTokens } from './tokens';
+export type NoticeBarMode = 'closeable' | 'link';
+export interface NoticeBarProps extends ViewProps {
+    text?: React.ReactNode;
+    children?: React.ReactNode;
+    color?: string;
+    background?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    mode?: NoticeBarMode;
+    tokensOverride?: DeepPartial<NoticeBarTokens>;
+    delay?: number;
+    speed?: number;
+    scrollable?: boolean;
+    wrapable?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    items?: React.ReactNode[];
+    verticalInterval?: number;
+    verticalDuration?: number;
+    onPress?: () => void;
+    onClose?: () => void;
+    onReplay?: () => void;
+    textProps?: TextProps;
+}

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

@@ -0,0 +1,64 @@
+import type * as React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type NotifyType = 'primary' | 'success' | 'danger' | 'warning';
+export type NotifyPosition = 'top' | 'bottom';
+export interface NotifyTokens {
+    defaults: {
+        type: NotifyType;
+        position: NotifyPosition;
+        duration: number;
+        closeOnClick: boolean;
+        animationDuration: number;
+        safeAreaInsetTop: boolean;
+        safeAreaInsetBottom: boolean;
+    };
+    layout: {
+        portal: ViewStyle;
+        container: ViewStyle;
+        safeArea: ViewStyle;
+        content: ViewStyle;
+        text: TextStyle;
+    };
+    colors: {
+        variants: Record<NotifyType, {
+            background: string;
+            text: string;
+        }>;
+    };
+    typography: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    sizing: {
+        minHeight: number;
+    };
+    spacing: {
+        paddingVertical: number;
+        paddingHorizontal: number;
+        none: number;
+    };
+}
+export interface NotifyProps {
+    visible: boolean;
+    message?: React.ReactNode;
+    type?: NotifyType;
+    duration?: number;
+    position?: NotifyPosition;
+    offset?: number;
+    color?: string;
+    background?: string;
+    safeAreaInsetTop?: boolean;
+    safeAreaInsetBottom?: boolean;
+    zIndex?: number;
+    closeOnClick?: boolean;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    tokensOverride?: DeepPartial<NotifyTokens>;
+    onClick?: () => void;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onOpened?: () => void;
+    onClosed?: () => void;
+}

package/dist/types/components/number-keyboard/types.d.ts

@@ -0,0 +1,35 @@
+import type React from 'react';
+import type { ViewProps } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { NumberKeyboardTokens } from './tokens';
+export type NumberKeyboardTheme = 'default' | 'custom';
+export type NumberKeyboardKeyType = '' | 'delete' | 'extra' | 'close';
+export interface NumberKeyboardProps extends ViewProps {
+    visible: boolean;
+    value?: string;
+    defaultValue?: string;
+    title?: React.ReactNode;
+    tokensOverride?: DeepPartial<NumberKeyboardTokens>;
+    extraKey?: string | string[];
+    closeButtonText?: string;
+    deleteButtonText?: string;
+    closeButtonLoading?: boolean;
+    showDeleteKey?: boolean;
+    randomKeyOrder?: boolean;
+    blurOnClose?: boolean;
+    safeAreaInsetBottom?: boolean;
+    theme?: NumberKeyboardTheme;
+    transition?: boolean;
+    transitionDuration?: number;
+    onInput?: (key: string) => void;
+    onDelete?: () => void;
+    onClose?: () => void;
+    onHide?: () => void;
+    onShow?: () => void;
+    onBlur?: () => void;
+    onChange?: (value: string) => void;
+    maxlength?: number;
+    numberKeyRender?: (key: string) => React.ReactNode;
+    deleteRender?: () => React.ReactNode;
+    extraKeyRender?: (key: string) => React.ReactNode;
+}

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

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface OverlayProps {
+    isOpen?: boolean;
+    visible?: boolean;
+    children?: React.ReactNode;
+    useRNModalOnAndroid?: boolean;
+    useRNModal?: boolean;
+    onRequestClose?: () => void;
+    isKeyboardDismissable?: boolean;
+    animationPreset?: 'fade' | 'slide' | 'none';
+    style?: StyleProp<ViewStyle>;
+}

package/dist/types/components/password-input/types.d.ts

@@ -0,0 +1,35 @@
+import type React from 'react';
+import type { ViewProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { PasswordInputTokens } from './tokens';
+export type PasswordInputType = 'text' | 'number';
+export interface PasswordInputProps extends ViewProps {
+    value?: string;
+    defaultValue?: string;
+    length?: number;
+    mask?: boolean;
+    gutter?: number;
+    type?: PasswordInputType;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    info?: React.ReactNode;
+    errorInfo?: React.ReactNode;
+    showCursor?: boolean;
+    validator?: (value: string) => boolean;
+    cellStyle?: StyleProp<ViewStyle>;
+    cellTextStyle?: StyleProp<TextStyle>;
+    cellFilledStyle?: StyleProp<ViewStyle>;
+    maskStyle?: StyleProp<ViewStyle>;
+    cursorStyle?: StyleProp<ViewStyle>;
+    highlightTextStyle?: StyleProp<TextStyle>;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    tokensOverride?: DeepPartial<PasswordInputTokens>;
+}
+export interface PasswordInputRef {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+}

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

@@ -0,0 +1,73 @@
+import type React from 'react';
+import type { ViewProps } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { PickerTokens } from './tokens';
+export type PickerValue = string | number;
+export interface PickerOption {
+    label?: React.ReactNode;
+    value: PickerValue;
+    disabled?: boolean;
+    children?: PickerOption[];
+}
+export interface PickerColumnWithDefault {
+    options: PickerOption[];
+    defaultValue?: PickerValue;
+}
+export type PickerColumn = PickerOption[] | PickerColumnWithDefault;
+export type PickerColumns = PickerColumn[] | PickerOption[];
+export type PickerToolbarPosition = 'top' | 'bottom';
+export type PickerInteractionMode = 'sync' | 'freeze';
+export interface PickerProps extends ViewProps {
+    columns?: PickerColumns;
+    value?: PickerValue[] | PickerValue;
+    defaultValue?: PickerValue[] | PickerValue;
+    title?: React.ReactNode;
+    tokensOverride?: DeepPartial<PickerTokens>;
+    showToolbar?: boolean;
+    toolbarPosition?: PickerToolbarPosition;
+    confirmButtonText?: React.ReactNode;
+    cancelButtonText?: React.ReactNode;
+    itemHeight?: number;
+    visibleItemCount?: number;
+    loading?: boolean;
+    readOnly?: boolean;
+    interactionMode?: PickerInteractionMode;
+    decelerationRate?: 'normal' | 'fast' | number;
+    scrollEventThrottle?: number;
+    maskColor?: string;
+    maskType?: 'gradient' | 'solid';
+    swipeDuration?: number;
+    columnsTop?: React.ReactNode;
+    columnsBottom?: React.ReactNode;
+    emitConfirmOnAutoSelect?: boolean;
+    optionRender?: (option: PickerOption, context: {
+        columnIndex: number;
+        active: boolean;
+    }) => React.ReactNode;
+    getOptionTestID?: (option: PickerOption, context: {
+        columnIndex: number;
+        active: boolean;
+    }) => string | undefined;
+    getOptionA11yLabel?: (option: PickerOption, context: {
+        columnIndex: number;
+        active: boolean;
+    }) => string | undefined;
+    onChange?: (value: PickerValue[], options: (PickerOption | undefined)[]) => void;
+    onConfirm?: (value: PickerValue[], options: (PickerOption | undefined)[]) => void;
+    onCancel?: () => void;
+}
+export interface PickerColumnProps {
+    columnIndex: number;
+    options: PickerOption[];
+    value?: PickerValue;
+    itemHeight: number;
+    visibleItemCount: number;
+    optionRender?: PickerProps['optionRender'];
+    getOptionTestID?: PickerProps['getOptionTestID'];
+    getOptionA11yLabel?: PickerProps['getOptionA11yLabel'];
+    readOnly?: boolean;
+    decelerationRate?: PickerProps['decelerationRate'];
+    scrollEventThrottle?: PickerProps['scrollEventThrottle'];
+    swipeDuration?: number;
+    onSelect: (option: PickerOption, columnIndex: number, optionIndex: number) => void;
+}

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