react-native-system-ui 1.0.4 → 1.0.6

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

@@ -0,0 +1,51 @@
+import type React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type CircleStartPosition = 'top' | 'right' | 'bottom' | 'left';
+export type CircleLineCap = 'round' | 'butt' | 'square';
+export interface CircleTokens {
+    defaults: {
+        rate: number;
+        size: number;
+        strokeWidth: number;
+        fill: string;
+        clockwise: boolean;
+        startPosition: CircleStartPosition;
+        lineCap: CircleLineCap;
+        animated: boolean;
+        animationDuration: number;
+    };
+    layout: {
+        root: ViewStyle;
+        content: ViewStyle;
+        text: TextStyle;
+        webRing: ViewStyle;
+        webInner: ViewStyle;
+    };
+    colors: {
+        color: string;
+        layerColor: string;
+        text: string;
+    };
+    typography: {
+        fontSize: number;
+        lineHeight: number;
+    };
+}
+export interface CircleProps {
+    rate?: number | string;
+    size?: number | string;
+    strokeWidth?: number | string;
+    color?: string;
+    layerColor?: string;
+    fill?: string;
+    clockwise?: boolean;
+    startPosition?: CircleStartPosition;
+    lineCap?: CircleLineCap;
+    animated?: boolean;
+    animationDuration?: number;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    children?: React.ReactNode;
+    tokensOverride?: DeepPartial<CircleTokens>;
+}

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

@@ -0,0 +1,45 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+export interface CollapseTokens {
+    defaults: {
+        accordion: boolean;
+        border: boolean;
+        iconPosition: 'left' | 'right';
+        panelBorder: boolean;
+        panelIsLink: boolean;
+        panelSize: 'normal' | 'large';
+        animationDuration: number;
+    };
+    layout: {
+        container: ViewStyle;
+        panel: ViewStyle;
+        hairline: ViewStyle;
+        headerWrapper: ViewStyle;
+        bodyWrapper: ViewStyle;
+        headerIconRow: ViewStyle;
+        bodyContent: ViewStyle;
+    };
+    colors: {
+        border: string;
+        title: string;
+        description: string;
+        background: string;
+        active: string;
+        arrow: string;
+        disabled: string;
+    };
+    typography: {
+        titleSize: number;
+        descriptionSize: number;
+        fontFamily: string;
+        titleWeight: NonNullable<TextStyle['fontWeight']>;
+    };
+    panel: {
+        borderRadius: number;
+    };
+    spacing: {
+        paddingVertical: number;
+        paddingHorizontal: number;
+        descriptionTop: number;
+        iconGap: number;
+    };
+}

package/dist/types/components/config-provider/locale/types.d.ts

@@ -0,0 +1,130 @@
+export interface Locale {
+    [key: string]: any;
+    /** Common */
+    name?: string;
+    tel?: string;
+    save?: string;
+    confirm?: string;
+    cancel?: string;
+    delete?: string;
+    loading?: string;
+    noCoupon?: string;
+    nameEmpty?: string;
+    telInvalid?: string;
+    /** Form */
+    vanForm?: {
+        validationFailed?: string;
+    };
+    /** Popup */
+    vanPopup?: {
+        closeOverlay?: string;
+        closeHint?: string;
+    };
+    /** Toast */
+    vanToast?: {
+        closeHint?: string;
+    };
+    /** ShareSheet */
+    vanShareSheet?: {
+        cancel?: string;
+    };
+    /** NumberKeyboard */
+    vanNumberKeyboard?: {
+        close?: string;
+    };
+    /** NoticeBar */
+    vanNoticeBar?: {
+        close?: string;
+    };
+    /** NavBar */
+    vanNavBar?: {
+        back?: string;
+        action?: string;
+    };
+    /** Image */
+    vanImage?: {
+        loading?: string;
+        error?: string;
+    };
+    /** Cascader */
+    vanCascader?: {
+        placeholder?: string;
+        loading?: string;
+        close?: string;
+    };
+    /** Calendar */
+    vanCalendar?: {
+        end?: string;
+        start?: string;
+        title?: string;
+        confirm?: string;
+        startEnd?: string;
+        weekdays?: string[];
+        monthTitle?: (year: number, month: number) => string;
+        rangePrompt?: (maxRange: number) => string;
+    };
+    /** Picker */
+    vanPicker?: {
+        select?: string;
+    };
+    /** ContactCard */
+    vanContactCard?: {
+        addText?: string;
+    };
+    /** ContactList */
+    vanContactList?: {
+        addText?: string;
+    };
+    /** Pagination */
+    vanPagination?: {
+        prev?: string;
+        next?: string;
+    };
+    /** PullRefresh */
+    vanPullRefresh?: {
+        pulling?: string;
+        loosing?: string;
+        loading?: string;
+    };
+    /** SubmitBar */
+    vanSubmitBar?: {
+        label?: string;
+    };
+    /** Coupon */
+    vanCoupon?: {
+        unlimited?: string;
+        discount?: (discount: number) => string;
+        condition?: (condition: number) => string;
+    };
+    /** CouponCell */
+    vanCouponCell?: {
+        title?: string;
+        count?: (count: number) => string;
+    };
+    /** CouponList */
+    vanCouponList?: {
+        exchange?: string;
+        close?: string;
+        enable?: string;
+        disabled?: string;
+        placeholder?: string;
+    };
+    /** AddressEdit */
+    vanAddressEdit?: {
+        area?: string;
+        postal?: string;
+        areaEmpty?: string;
+        addressEmpty?: string;
+        postalEmpty?: string;
+        defaultAddress?: string;
+    };
+    /** AddressEditDetail */
+    vanAddressEditDetail?: {
+        label?: string;
+        placeholder?: string;
+    };
+    /** AddressList */
+    vanAddressList?: {
+        add?: string;
+    };
+}

package/dist/types/components/config-provider/types.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { ThemeProviderValue } from '../../design-system/ThemeProvider';
+import type { Locale } from './locale/types';
+export type Direction = 'ltr' | 'rtl';
+export interface ConfigProviderProps {
+    theme?: ThemeProviderValue;
+    locale?: Locale;
+    direction?: Direction;
+    children: React.ReactNode;
+}

package/dist/types/components/count-down/types.d.ts

@@ -0,0 +1,29 @@
+import type { TextStyle, ViewProps } from 'react-native';
+import type { CountDownCurrentTime } from '../../hooks';
+import type { DeepPartial } from '../../types';
+export type CountDownInstance = {
+    start: () => void;
+    pause: () => void;
+    reset: () => void;
+};
+export interface CountDownTokens {
+    defaults: {
+        autoStart: boolean;
+        millisecond: boolean;
+        time: number;
+        format: string;
+    };
+    layout: {
+        text: TextStyle;
+    };
+}
+export interface CountDownProps extends Omit<ViewProps, 'children'> {
+    autoStart?: boolean;
+    millisecond?: boolean;
+    time?: number | string;
+    format?: string;
+    children?: (current: CountDownCurrentTime) => React.ReactNode;
+    onChange?: (current: CountDownCurrentTime) => void;
+    onFinish?: () => void;
+    tokensOverride?: DeepPartial<CountDownTokens>;
+}

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

@@ -0,0 +1,38 @@
+import type React from 'react';
+import type { PickerProps } from '../picker/types';
+import type { PopupProps } from '../popup/Popup';
+export type DatetimePickerColumnType = 'year' | 'month' | 'day' | 'hour' | 'minute';
+export type DatetimePickerType = 'date' | 'time' | 'datetime' | 'datehour' | 'month-day' | 'year-month';
+export interface DatetimePickerSharedProps extends Omit<PickerProps, 'columns' | 'value' | 'defaultValue' | 'onChange' | 'onConfirm'> {
+    type?: DatetimePickerType;
+    formatter?: (type: DatetimePickerColumnType, value: string) => string;
+    filter?: (type: DatetimePickerColumnType, values: string[]) => string[];
+    columnsOrder?: DatetimePickerColumnType[];
+    popup?: boolean;
+    popupVisible?: boolean;
+    defaultPopupVisible?: boolean;
+    popupProps?: Omit<PopupProps, 'visible' | 'children'>;
+    onPopupVisibleChange?: (visible: boolean) => void;
+    children?: React.ReactNode;
+}
+export interface DatetimePickerDateProps extends DatetimePickerSharedProps {
+    type?: Exclude<DatetimePickerType, 'time'>;
+    value?: Date;
+    defaultValue?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    onChange?: (value: Date) => void;
+    onConfirm?: (value: Date) => void;
+}
+export interface DatetimePickerTimeProps extends DatetimePickerSharedProps {
+    type: 'time';
+    value?: string;
+    defaultValue?: string;
+    minHour?: number;
+    maxHour?: number;
+    minMinute?: number;
+    maxMinute?: number;
+    onChange?: (value: string) => void;
+    onConfirm?: (value: string) => void;
+}
+export type DatetimePickerProps = DatetimePickerDateProps | DatetimePickerTimeProps;

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

@@ -0,0 +1,70 @@
+import type React from 'react';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { DialogTokens } from './tokens';
+export type DialogTheme = 'default' | 'round-button';
+export type DialogMessageAlign = 'left' | 'center' | 'right';
+export type DialogBeforeCloseAction = 'confirm' | 'cancel' | 'close';
+export interface DialogActionState {
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface DialogProps extends Omit<ViewProps, 'children'> {
+    visible: boolean;
+    title?: React.ReactNode;
+    message?: React.ReactNode;
+    messageAlign?: DialogMessageAlign;
+    theme?: DialogTheme;
+    width?: number | string;
+    closeable?: boolean;
+    closeIcon?: React.ReactNode;
+    overlay?: boolean;
+    overlayStyle?: StyleProp<ViewStyle>;
+    overlayTestID?: string;
+    closeOnBackPress?: boolean;
+    closeOnPopstate?: boolean;
+    closeOnOverlayPress?: boolean;
+    closeOnClickOverlay?: boolean;
+    onClickOverlay?: () => void;
+    onClickCloseIcon?: () => void;
+    beforeClose?: (action: DialogBeforeCloseAction) => boolean | Promise<boolean>;
+    showCancelButton?: boolean;
+    cancelButtonText?: React.ReactNode;
+    cancelButtonColor?: string;
+    cancelProps?: DialogActionState;
+    showConfirmButton?: boolean;
+    confirmButtonText?: React.ReactNode;
+    confirmButtonColor?: string;
+    confirmProps?: DialogActionState;
+    footer?: React.ReactNode;
+    contentStyle?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+    messageStyle?: StyleProp<TextStyle>;
+    tokensOverride?: DeepPartial<DialogTokens>;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    onCancel?: () => void | boolean | Promise<void | boolean>;
+    onConfirm?: () => void | boolean | Promise<void | boolean>;
+    onClose?: () => void | boolean | Promise<void | boolean>;
+    onClosed?: () => void;
+}
+export type DialogShowOptions = Omit<DialogProps, 'visible'>;
+export type DialogAlertOptions = Omit<DialogShowOptions, 'showCancelButton' | 'onCancel'>;
+export type DialogConfirmOptions = DialogShowOptions;
+export type DialogImperativeMode = 'show' | 'alert' | 'confirm';
+export type DialogSetDefaultOptions = {
+    (options: DialogShowOptions): void;
+    (mode: DialogImperativeMode, options: DialogShowOptions): void;
+};
+export type DialogResetDefaultOptions = {
+    (mode?: DialogImperativeMode): void;
+};
+export interface DialogStatic {
+    Host: React.ComponentType<any>;
+    show: (options?: DialogShowOptions) => () => void;
+    alert: (options?: DialogAlertOptions) => Promise<void>;
+    confirm: (options?: DialogConfirmOptions) => Promise<boolean>;
+    clear: () => void;
+    setDefaultOptions: DialogSetDefaultOptions;
+    resetDefaultOptions: DialogResetDefaultOptions;
+}

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

@@ -0,0 +1,48 @@
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type DividerContentPosition = 'left' | 'center' | 'right';
+export interface DividerTokens {
+    defaults: {
+        dashed: boolean;
+        hairline: boolean;
+        contentPosition: DividerContentPosition;
+    };
+    layout: {
+        container: ViewStyle;
+        contentWrapper: ViewStyle;
+        text: TextStyle;
+        hairlineWrapper: ViewStyle;
+    };
+    colors: {
+        line: string;
+        text: string;
+    };
+    typography: {
+        fontSize: number;
+        lineHeight: number;
+        fontFamily: string;
+        fontWeight: TextStyle['fontWeight'];
+    };
+    sizing: {
+        sideMinFlex: number;
+    };
+    borders: {
+        thickness: number;
+    };
+    spacing: {
+        vertical: number;
+        contentPadding: number;
+    };
+}
+export interface DividerProps extends ViewProps {
+    children?: React.ReactNode;
+    type?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical';
+    dashed?: boolean;
+    hairline?: boolean;
+    contentPosition?: DividerContentPosition;
+    textStyle?: StyleProp<TextStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    lineColor?: string;
+    tokensOverride?: DeepPartial<DividerTokens>;
+}

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

@@ -0,0 +1,44 @@
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type EmptyImage = 'default' | 'error' | 'network' | 'search';
+export interface EmptyTokens {
+    defaults: {
+        image: EmptyImage;
+        gap: number;
+    };
+    layout: {
+        container: ViewStyle;
+        imageWrapper: ViewStyle;
+        descriptionText: TextStyle;
+        footer: ViewStyle;
+    };
+    colors: {
+        description: string;
+        icon: string;
+        imageBackground: string;
+    };
+    typography: {
+        descriptionSize: number;
+        descriptionLineHeight: number;
+        descriptionFontFamily: string;
+        descriptionFontWeight: TextStyle['fontWeight'];
+    };
+    sizing: {
+        image: number;
+        iconScale: number;
+    };
+    spacing: {
+        descriptionPaddingHorizontal: number;
+        footerMarginTop: number;
+    };
+}
+export interface EmptyProps extends ViewProps {
+    image?: EmptyImage | string | React.ReactNode;
+    imageSize?: number;
+    imageStyle?: StyleProp<ViewStyle>;
+    description?: React.ReactNode;
+    descriptionStyle?: StyleProp<TextStyle>;
+    children?: React.ReactNode;
+    gap?: number;
+    tokensOverride?: DeepPartial<EmptyTokens>;
+}

package/dist/types/components/error-boundary/types.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+export interface ErrorBoundaryProps {
+    /** Fallback UI when an error is caught. Can be a ReactNode or a render function */
+    fallback?: React.ReactNode | ((error: Error, reset: () => void) => React.ReactNode);
+    /** Callback when an error is caught */
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+    /** Callback when the error state is reset */
+    onReset?: () => void;
+    /** Children to render */
+    children?: React.ReactNode;
+}
+export interface ErrorBoundaryState {
+    error: Error | null;
+}
+export interface ErrorBoundaryRef {
+    /** Reset the error boundary to re-render children */
+    reset: () => void;
+}

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

@@ -0,0 +1,86 @@
+import type React from 'react';
+import type { PressableProps, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { FieldTokens } from './tokens';
+import type { DialogShowOptions } from '../dialog/types';
+import type { CellArrowDirection, CellGroupProps, CellSize } from '../cell/types';
+export type FieldType = 'tel' | 'text' | 'digit' | 'number' | 'search' | 'password' | 'textarea';
+export type FieldInputAlign = 'left' | 'center' | 'right';
+export type FieldControlAlign = 'left' | 'center' | 'right';
+export type FieldClearTrigger = 'always' | 'focus';
+export type FieldFormatTrigger = 'onBlur' | 'onChange';
+export type FieldAutosizeConfig = {
+    maxRows?: number;
+    minRows?: number;
+};
+export type FieldTooltipProps = DialogShowOptions & {
+    icon?: React.ReactNode;
+};
+export type FieldShowWordLimit = boolean | ((params: {
+    currentCount: number;
+    maxLength?: number;
+}) => React.ReactNode);
+export interface FieldProps extends Omit<TextInputProps, 'style' | 'value' | 'defaultValue' | 'editable' | 'onChange' | 'onChangeText'> {
+    label?: React.ReactNode;
+    labelWidth?: number;
+    labelAlign?: FieldInputAlign;
+    inputAlign?: FieldInputAlign;
+    controlAlign?: FieldControlAlign;
+    required?: boolean;
+    colon?: boolean;
+    intro?: React.ReactNode;
+    description?: React.ReactNode;
+    tooltip?: React.ReactNode | FieldTooltipProps;
+    error?: boolean;
+    errorMessage?: React.ReactNode;
+    errorMessageAlign?: FieldInputAlign;
+    disabled?: boolean;
+    readOnly?: boolean;
+    clearable?: boolean;
+    clearTrigger?: FieldClearTrigger;
+    clearIcon?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    button?: React.ReactNode;
+    extra?: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    type?: FieldType;
+    rows?: number;
+    autoSize?: boolean | FieldAutosizeConfig;
+    formatter?: (value: string) => string;
+    formatTrigger?: FieldFormatTrigger;
+    showWordLimit?: FieldShowWordLimit;
+    onOverlimit?: (value: string) => void;
+    onChangeText?: (value: string) => void;
+    onClear?: () => void;
+    onClick?: () => void;
+    onClickInput?: () => void;
+    onClickLeftIcon?: () => void;
+    onClickRightIcon?: () => void;
+    border?: boolean;
+    center?: boolean;
+    clickable?: boolean;
+    isLink?: boolean;
+    arrowDirection?: CellArrowDirection;
+    size?: CellSize;
+    titleStyle?: StyleProp<TextStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    introStyle?: StyleProp<TextStyle>;
+    errorMessageStyle?: StyleProp<TextStyle>;
+    tokensOverride?: DeepPartial<FieldTokens>;
+    style?: StyleProp<ViewStyle>;
+    androidRipple?: PressableProps['android_ripple'];
+    children?: React.ReactNode;
+}
+export interface FieldInstance {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    nativeElement: TextInput | null;
+}
+export type FieldGroupProps = CellGroupProps;

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

@@ -0,0 +1,37 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type FlexAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+export type FlexJustify = 'start' | 'end' | 'center' | 'around' | 'between';
+export interface FlexTokens {
+    defaults: {
+        direction: FlexDirection;
+        wrap: FlexWrap;
+        gutter: number | [number, number];
+        align: FlexAlign;
+        justify: FlexJustify;
+        columns: number;
+    };
+    layout: {
+        container: ViewStyle;
+    };
+}
+export interface FlexProps {
+    children?: React.ReactNode;
+    direction?: FlexDirection;
+    wrap?: FlexWrap;
+    gutter?: number | [number, number];
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    style?: StyleProp<ViewStyle>;
+    columns?: number;
+    tokensOverride?: DeepPartial<FlexTokens>;
+}
+export interface FlexItemProps {
+    span?: number;
+    flex?: number | string;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}

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

@@ -1,5 +1,11 @@
 import React from 'react';
 import type { FormInstance, FormProps, FormSubscribeProps, NamePath, RegisteredFieldOptions } from './types';
+export declare const normalizeTrigger: (trigger?: string | string[]) => string[];
+export declare const FORM_ALL_FIELDS_KEY = "__form_all__";
+export declare const toNamePath: (name?: NamePath) => (string | number)[];
+export declare const serializeNamePath: (name?: NamePath) => string;
+export declare const getValueByName: (source: unknown, name: NamePath) => unknown;
+export declare const setValueByName: (source: Record<string, unknown>, name: NamePath, value: unknown) => Record<string, unknown>;
 export interface FormContextValue {
     getFieldValue: (name: NamePath) => unknown;
     setFieldValue: (name: NamePath, value: unknown, trigger?: string) => void;