react-native-system-ui 1.0.4 → 1.0.6

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

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+export type FormRuleValidateTrigger = string | string[];
+export type FormRuleValidator = (value: unknown, values: Record<string, unknown>) => void | boolean | string | Promise<void | boolean | string>;
+export type NamePath = string | number | (string | number)[];
+export interface FormItemRule {
+    required?: boolean;
+    message?: string;
+    pattern?: RegExp;
+    len?: number;
+    min?: number;
+    max?: number;
+    whitespace?: boolean;
+    validator?: FormRuleValidator;
+    validateTrigger?: FormRuleValidateTrigger;
+}
+export interface RegisteredFieldOptions {
+    rules?: FormItemRule[];
+    dependencies?: NamePath[];
+    initialValue?: unknown;
+    validateTrigger?: FormRuleValidateTrigger;
+}
+export interface FormInstance {
+    submit: () => Promise<Record<string, unknown> | undefined>;
+    getFieldsValue: () => Record<string, unknown>;
+    setFieldsValue: (values: Record<string, unknown>, options?: {
+        validate?: boolean;
+    }) => void;
+    resetFields: () => void;
+    validateFields: (names?: NamePath[]) => Promise<Record<string, unknown>>;
+    getFieldError: (name: NamePath) => string[];
+}
+export interface FormProps extends ViewProps {
+    initialValues?: Record<string, unknown>;
+    colon?: boolean;
+    labelWidth?: number;
+    showValidateMessage?: boolean;
+    footer?: ReactNode;
+    onValuesChange?: (values: Record<string, unknown>, name: string, value: unknown) => void;
+    onFinish?: (values: Record<string, unknown>) => void;
+    children?: ReactNode;
+}
+export interface FormSubscribeProps {
+    to?: string[];
+    children: (changedValues: Record<string, unknown>, form: FormInstance | null) => ReactNode;
+}
+export interface FormItemProps {
+    name?: NamePath;
+    label?: ReactNode;
+    description?: ReactNode;
+    intro?: ReactNode;
+    tooltip?: ReactNode;
+    rules?: FormItemRule[];
+    dependencies?: NamePath[];
+    valuePropName?: string;
+    trigger?: string;
+    validateTrigger?: FormRuleValidateTrigger;
+    showValidateMessage?: boolean;
+    required?: boolean;
+    noStyle?: boolean;
+    shouldUpdate?: (prev: Record<string, unknown>, next: Record<string, unknown>) => boolean;
+    initialValue?: unknown;
+    children: ReactNode | ((payload: {
+        getFieldValue: (name: NamePath) => unknown;
+        getFieldsValue: () => Record<string, unknown>;
+        form: FormInstance | null;
+    }) => ReactNode);
+}

package/dist/types/components/grid/Grid.d.ts

@@ -12,6 +12,7 @@ export interface GridContextValue {
     iconSize: number;
     iconColor?: string;
     count: number;
+    containerWidth: number;
     tokens: GridTokens;
 }
 export declare const GridContext: React.Context<GridContextValue | null>;

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

@@ -0,0 +1,77 @@
+import type { PressableProps, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { BadgeProps } from '../badge';
+import type { DeepPartial } from '../../types';
+export type GridDirection = 'vertical' | 'horizontal';
+export interface GridTokens {
+    defaults: {
+        columnNum: number;
+        gutter: number;
+        border: boolean;
+        center: boolean;
+        square: boolean;
+        direction: GridDirection;
+        reverse: boolean;
+        clickable: boolean;
+        iconSize: number;
+        pressedOpacity: number;
+        textNumberOfLines: number;
+    };
+    layout: {
+        container: ViewStyle;
+        border: ViewStyle;
+        borderTop: ViewStyle;
+        borderBottom: ViewStyle;
+        itemContentBase: ViewStyle;
+        itemVertical: ViewStyle;
+        itemHorizontal: ViewStyle;
+        itemCenter: ViewStyle;
+        itemReverseColumn: ViewStyle;
+        itemReverseRow: ViewStyle;
+        iconWrapper: ViewStyle;
+        text: TextStyle;
+        itemBorderRight: ViewStyle;
+        itemBorderBottom: ViewStyle;
+        itemContentSquare: ViewStyle;
+    };
+    colors: {
+        border: string;
+        text: string;
+        background: string;
+        active: string;
+    };
+    typography: {
+        fontSize: number;
+        fontFamily: string;
+        lineHeight: number;
+        fontWeight: NonNullable<TextStyle['fontWeight']>;
+    };
+    spacing: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        iconGap: number;
+    };
+}
+export interface GridProps extends ViewProps {
+    children?: React.ReactNode;
+    columnNum?: number;
+    gutter?: number;
+    border?: boolean;
+    center?: boolean;
+    square?: boolean;
+    direction?: GridDirection;
+    reverse?: boolean;
+    clickable?: boolean;
+    iconSize?: number;
+    iconColor?: string;
+    tokensOverride?: DeepPartial<GridTokens>;
+}
+export interface GridItemProps extends PressableProps {
+    children?: React.ReactNode;
+    text?: React.ReactNode;
+    icon?: React.ReactNode | ((size: number, color: string) => React.ReactNode);
+    iconColor?: string;
+    badge?: BadgeProps;
+    dot?: boolean;
+    contentStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}

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

@@ -0,0 +1,53 @@
+import type * as React from 'react';
+import type { ImageProps as RNImageProps, ImageSourcePropType, ImageStyle, PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+export interface ImageTokens {
+    defaults: {
+        fit: ImageFit;
+        showLoading: boolean;
+        showError: boolean;
+        loadingText: React.ReactNode;
+        errorText: React.ReactNode;
+        iconSize: number;
+        loadingIndicatorBaseSize: number;
+        loadingLabelMarginTop: number;
+        roundRadius: number;
+    };
+    layout: {
+        container: ViewStyle;
+        overlay: ViewStyle;
+        label: TextStyle;
+        iconContainer: ViewStyle;
+        absoluteFill: ImageStyle;
+    };
+    colors: {
+        background: string;
+        text: string;
+        error: string;
+    };
+}
+export interface ImageProps extends Omit<RNImageProps, 'source' | 'width' | 'height'> {
+    src?: string;
+    source?: ImageSourcePropType;
+    width?: number | string;
+    height?: number | string;
+    radius?: number;
+    round?: boolean;
+    fit?: ImageFit;
+    showLoading?: boolean;
+    showError?: boolean;
+    loadingText?: React.ReactNode;
+    loadingIcon?: React.ReactNode;
+    errorIcon?: React.ReactNode;
+    iconSize?: number;
+    loadingSize?: 'small' | 'large' | number;
+    errorText?: React.ReactNode;
+    fallback?: React.ReactNode;
+    onPress?: PressableProps['onPress'];
+    alt?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    tokensOverride?: DeepPartial<ImageTokens>;
+    'aria-label'?: string;
+}

package/dist/types/components/image-preview/types.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type { PopupCloseIconPosition } from '../popup';
+import type { DeepPartial } from '../../types';
+import type { ImagePreviewTokens } from './tokens';
+export type ImagePreviewCloseReason = 'overlay' | 'close-icon' | 'content' | 'close';
+export type ImagePreviewImage = ImageSourcePropType | string;
+export interface ImagePreviewProps {
+    visible: boolean;
+    images?: ImagePreviewImage[];
+    startPosition?: number;
+    swipeDuration?: number;
+    tokensOverride?: DeepPartial<ImagePreviewTokens>;
+    lazyRender?: boolean;
+    lazyRenderBuffer?: number;
+    showIndex?: boolean;
+    indexRender?: (ctx: {
+        index: number;
+        len: number;
+    }) => React.ReactNode;
+    showIndicators?: boolean;
+    closeable?: boolean;
+    closeIcon?: React.ReactNode;
+    closeIconPosition?: PopupCloseIconPosition;
+    overlay?: boolean;
+    overlayStyle?: StyleProp<ViewStyle>;
+    closeOnBackPress?: boolean;
+    closeOnPopstate?: boolean;
+    zIndex?: number;
+    duration?: number;
+    closeOnlyClickCloseIcon?: boolean;
+    safeAreaInsetTop?: boolean;
+    safeAreaInsetBottom?: boolean;
+    onChange?: (index: number) => void;
+    onClose?: (params: CloseParams) => void;
+    onClosed?: () => void;
+    beforeClose?: (context: CloseContext) => boolean | Promise<boolean>;
+}
+export interface CloseParams {
+    index: number;
+    image?: ImagePreviewImage;
+}
+export interface CloseContext extends CloseParams {
+    reason: ImagePreviewCloseReason;
+}
+export type ImagePreviewRef = {
+    swipeTo: (index: number, animated?: boolean) => void;
+};
+export type ImagePreviewOpenOptions = Omit<ImagePreviewProps, 'visible'>;
+export type ImagePreviewDestroy = () => void;
+export interface ImagePreviewStatic {
+    Host: React.ComponentType<Record<string, unknown>>;
+    open: (options: ImagePreviewOpenOptions) => ImagePreviewDestroy;
+    clear: () => void;
+}

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

@@ -0,0 +1,42 @@
+import type { StyleProp, TextInput, TextStyle, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { FieldTokens } from '../field/tokens';
+import type { FieldClearTrigger, FieldInputAlign, FieldProps, FieldShowWordLimit } from '../field/types';
+export interface InputTokens {
+    defaults: {
+        inputAlign: FieldInputAlign;
+        clearTrigger: FieldClearTrigger;
+        border: boolean;
+    };
+    spacing: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    colors: {
+        background: string;
+    };
+}
+export interface InputProps extends Omit<FieldProps, 'tokensOverride'> {
+    align?: FieldInputAlign;
+    clearTrigger?: FieldClearTrigger;
+    onChange?: (value: string) => void;
+    showWordLimit?: FieldShowWordLimit;
+    style?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    fieldTokensOverride?: DeepPartial<FieldTokens>;
+    tokensOverride?: DeepPartial<InputTokens>;
+}
+export interface InputInstance {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    nativeElement: TextInput | null;
+}
+export interface InputTextAreaAutoSizeConfig {
+    minHeight?: number;
+    maxHeight?: number;
+}
+export type InputTextAreaAutoSize = boolean | InputTextAreaAutoSizeConfig;
+export interface InputTextAreaProps extends Omit<InputProps, 'type' | 'autoSize' | 'autosize'> {
+    autoSize?: InputTextAreaAutoSize;
+}

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

@@ -0,0 +1,32 @@
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export interface LoadingTokens {
+    defaults: {
+        size: number;
+        textSize: number;
+        vertical: boolean;
+    };
+    layout: {
+        container: ViewStyle;
+        text: TextStyle;
+    };
+    colors: {
+        indicator: string;
+        text: string;
+    };
+    spacing: {
+        gap: number;
+    };
+}
+export interface LoadingProps extends ViewProps {
+    ['aria-label']?: string;
+    color?: string;
+    size?: number;
+    textSize?: number;
+    textColor?: string;
+    vertical?: boolean;
+    children?: React.ReactNode;
+    textStyle?: StyleProp<TextStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    tokensOverride?: DeepPartial<LoadingTokens>;
+}

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