react-native-system-ui 1.0.4 → 1.0.5

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

@@ -0,0 +1,142 @@
+import type React from "react";
+import type { TextStyle, ViewProps, ViewStyle } from "react-native";
+import type { DeepPartial } from "../../types";
+import type { PopupPlacement, PopupProps } from "../popup";
+export interface CascaderTokens {
+    defaults: {
+        placeholder: string;
+        title: React.ReactNode;
+        showHeader: boolean;
+        closeable: boolean;
+        swipeable: boolean;
+        poppable: boolean;
+        closeOnClickOverlay: boolean;
+        closeOnFinish: boolean;
+        popupPlacement: PopupPlacement;
+        popupRound: boolean;
+        loadingText: string;
+    };
+    layout: {
+        container: ViewStyle;
+        header: ViewStyle;
+        title: TextStyle;
+        closeButton: ViewStyle;
+        tabsWrapper: ViewStyle;
+        tabsContentStatic: ViewStyle;
+        tabsItem: ViewStyle;
+        tabsTitle: TextStyle;
+        tabTitleNode: TextStyle;
+        optionList: ViewStyle;
+        option: ViewStyle;
+        optionContent: ViewStyle;
+        optionText: TextStyle;
+        optionTextActive: TextStyle;
+        optionLabel: ViewStyle;
+        empty: TextStyle;
+        inlineChildren: ViewStyle;
+    };
+    colors: {
+        background: string;
+        headerText: string;
+        placeholder: string;
+        closeIcon: string;
+        closeIconActive: string;
+        tabText: string;
+        tabActive: string;
+        tabInactive: string;
+        optionText: string;
+        optionDisabled: string;
+        optionActiveBackground: string;
+        optionActiveText: string;
+        divider: string;
+    };
+    typography: {
+        titleSize: number;
+        titleWeight: TextStyle['fontWeight'];
+        tabsTitleSize: number;
+        tabTitlePlaceholderWeight: TextStyle['fontWeight'];
+        tabTitleWeight: TextStyle['fontWeight'];
+        optionTextSize: number;
+        optionTextActiveWeight: TextStyle['fontWeight'];
+        emptyTextSize: number;
+    };
+    sizing: {
+        indicatorHeight: number;
+        optionMinHeight: number;
+        optionListHeight: number;
+        headerHeight: number;
+        closeIconSize: number;
+        selectedIconSize: number;
+    };
+    radii: {
+        option: number;
+    };
+    spacing: {
+        headerPaddingHorizontal: number;
+        tabNavPaddingHorizontal: number;
+        tabNavPaddingVertical: number;
+        tabPaddingHorizontal: number;
+        optionPaddingVertical: number;
+        optionPaddingHorizontal: number;
+        optionListPaddingTop: number;
+        optionListPaddingBottom: number;
+        closeButtonMarginLeft: number;
+        optionLabelMarginRight: number;
+        emptyPaddingVertical: number;
+        inlineChildrenPaddingVertical: number;
+    };
+}
+export type CascaderValue = string | number;
+export interface CascaderOption extends Record<string, unknown> {
+    text?: React.ReactNode;
+    value?: CascaderValue;
+    disabled?: boolean;
+    color?: string;
+    children?: CascaderOption[];
+    loading?: boolean;
+}
+export interface CascaderFieldNames {
+    text?: string;
+    value?: string;
+    children?: string;
+}
+export interface CascaderActions {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export type CascaderRenderProps = (value: CascaderValue[], selectedRows: CascaderOption[], actions: CascaderActions) => React.ReactNode;
+export interface CascaderProps extends Omit<ViewProps, 'children'> {
+    options?: CascaderOption[];
+    value?: CascaderValue[];
+    defaultValue?: CascaderValue[];
+    title?: React.ReactNode;
+    placeholder?: string;
+    activeColor?: string;
+    tokensOverride?: DeepPartial<CascaderTokens>;
+    fieldNames?: CascaderFieldNames;
+    swipeable?: boolean;
+    optionRender?: (params: {
+        option: CascaderOption;
+        selected: boolean;
+    }) => React.ReactNode;
+    showHeader?: boolean;
+    closeable?: boolean;
+    closeIcon?: React.ReactNode;
+    onClose?: () => void;
+    onChange?: (value: CascaderValue[], selectedRows: CascaderOption[]) => void;
+    onFinish?: (value: CascaderValue[], selectedRows: CascaderOption[]) => void;
+    onClickTab?: (tabIndex: number, title: string) => void;
+    onTabChange?: (tabIndex: number) => void;
+    poppable?: boolean;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    closeOnClickOverlay?: boolean;
+    closeOnFinish?: boolean;
+    popupPlacement?: PopupPlacement;
+    popupRound?: boolean;
+    popupProps?: Partial<PopupProps>;
+    loadingText?: string;
+    children?: React.ReactNode | CascaderRenderProps;
+}

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

@@ -0,0 +1,112 @@
+import type React from 'react';
+import type { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type CellArrowDirection = 'left' | 'right' | 'up' | 'down';
+export type CellSize = 'normal' | 'large';
+export interface CellTokens {
+    defaults: {
+        border: boolean;
+        size: CellSize;
+        arrowDirection: CellArrowDirection;
+        activeOpacity: number;
+        groupBorder: boolean;
+        groupInset: boolean;
+        groupCard: boolean;
+    };
+    layout: {
+        container: ViewStyle;
+        containerLarge: ViewStyle;
+        center: ViewStyle;
+        body: ViewStyle;
+        titleRow: ViewStyle;
+        value: TextStyle;
+        valueOnly: TextStyle;
+        valueContainer: ViewStyle;
+        valueOnlyContainer: ViewStyle;
+        valueCenter: ViewStyle;
+        customContent: ViewStyle;
+        iconWrapper: ViewStyle;
+        rightIconWrapper: ViewStyle;
+        hairline: ViewStyle;
+        groupCardShadow: ViewStyle;
+        arrowTransforms: Record<CellArrowDirection, ViewStyle>;
+    };
+    colors: {
+        background: string;
+        ripple: string;
+        title: string;
+        label: string;
+        value: string;
+        required: string;
+        border: string;
+        arrow: string;
+        groupTitle: string;
+        groupBodyBackground: string;
+    };
+    typography: {
+        titleSize: number;
+        lineHeight: number;
+        titleWeight: TextStyle['fontWeight'];
+        largeTitleSize: number;
+        labelSize: number;
+        largeLabelSize: number;
+        valueSize: number;
+        largeValueSize: number;
+        groupTitleSize: number;
+    };
+    sizing: {
+        paddingVertical: number;
+        paddingHorizontal: number;
+        largePaddingVertical: number;
+        arrowSize: number;
+        iconSize: number;
+        groupMarginBottom: number;
+        groupTitlePaddingHorizontal: number;
+        groupTitlePaddingVertical: number;
+        groupInsetMarginHorizontal: number;
+    };
+    radii: {
+        groupInset: number;
+    };
+    borders: {
+        width: number;
+    };
+    spacing: {
+        iconGap: number;
+        valueGap: number;
+        extraGap: number;
+        labelMarginTop: number;
+    };
+}
+export interface CellProps extends Omit<PressableProps, 'style' | 'children'> {
+    title?: React.ReactNode;
+    value?: React.ReactNode;
+    label?: React.ReactNode;
+    extra?: React.ReactNode;
+    icon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    border?: boolean;
+    clickable?: boolean;
+    isLink?: boolean;
+    required?: boolean;
+    center?: boolean;
+    size?: CellSize;
+    arrowDirection?: CellArrowDirection;
+    tokensOverride?: DeepPartial<CellTokens>;
+    children?: React.ReactNode;
+    titleStyle?: StyleProp<TextStyle>;
+    valueStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+}
+export interface CellGroupProps {
+    children?: React.ReactNode;
+    title?: React.ReactNode;
+    border?: boolean;
+    inset?: boolean;
+    card?: boolean;
+    style?: StyleProp<ViewStyle>;
+    bodyStyle?: StyleProp<ViewStyle>;
+    tokensOverride?: DeepPartial<CellTokens>;
+}

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

@@ -0,0 +1,99 @@
+import type React from 'react';
+import type { GestureResponderEvent, PressableProps, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type CheckboxShape = 'round' | 'square';
+export type CheckboxLabelPosition = 'left' | 'right';
+export type CheckboxGroupDirection = 'horizontal' | 'vertical';
+export type CheckboxValue = string | number;
+export type CheckboxIconRender = (params: {
+    checked: boolean;
+    disabled: boolean;
+}) => React.ReactNode;
+export interface CheckboxTokens {
+    defaults: {
+        shape: CheckboxShape;
+        iconSize: number;
+        labelPosition: CheckboxLabelPosition;
+        labelDisabled: boolean;
+        bindGroup: boolean;
+        groupDisabled: boolean;
+        groupDirection: CheckboxGroupDirection;
+    };
+    layout: {
+        container: ViewStyle;
+        iconWrapper: ViewStyle;
+        icon: ViewStyle;
+        checkmark: TextStyle;
+        label: TextStyle;
+        labelWrapper: ViewStyle;
+        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: TextStyle['fontWeight'];
+        lineHeightMultiplier: number;
+    };
+    spacing: {
+        gap: number;
+        groupGap: number;
+    };
+    radii: {
+        square: number;
+    };
+    borders: {
+        width: number;
+    };
+    icon: {
+        scale: number;
+    };
+}
+export interface CheckboxProps extends Omit<PressableProps, 'onPress'> {
+    name?: CheckboxValue;
+    value?: CheckboxValue;
+    shape?: CheckboxShape;
+    iconSize?: number;
+    iconRender?: CheckboxIconRender;
+    checkedColor?: string;
+    labelPosition?: CheckboxLabelPosition;
+    labelDisabled?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    tokensOverride?: DeepPartial<CheckboxTokens>;
+    children?: React.ReactNode;
+    bindGroup?: boolean;
+    onClick?: (event: GestureResponderEvent) => void;
+    onChange?: (checked: boolean) => void;
+    'aria-label'?: string;
+}
+export interface CheckboxGroupProps extends ViewProps {
+    value?: CheckboxValue[];
+    defaultValue?: CheckboxValue[];
+    disabled?: boolean;
+    max?: number;
+    direction?: CheckboxGroupDirection;
+    shape?: CheckboxShape;
+    iconSize?: number;
+    iconRender?: CheckboxIconRender;
+    checkedColor?: string;
+    labelDisabled?: boolean;
+    gap?: number;
+    tokensOverride?: DeepPartial<CheckboxTokens>;
+    onChange?: (value: CheckboxValue[]) => void;
+    children?: React.ReactNode;
+}

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;