react-native-system-ui 1.0.4 → 1.0.6

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

@@ -0,0 +1,62 @@
+import type React from 'react';
+import type { PressableProps, StyleProp, TextStyle, ViewStyle, ImageSourcePropType, ImageStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type AvatarShape = 'circle' | 'square';
+export type AvatarSize = 'small' | 'medium' | 'large';
+export interface AvatarTokens {
+    defaults: {
+        size: AvatarSize;
+        shape: AvatarShape;
+    };
+    layout: {
+        container: ViewStyle;
+        text: TextStyle;
+        image: ImageStyle;
+        iconWrapper: ViewStyle;
+    };
+    colors: {
+        background: string;
+        text: string;
+        transparent: string;
+    };
+    typography: {
+        fontWeight: TextStyle['fontWeight'];
+        fallbackTextScale: number;
+    };
+    sizing: {
+        sizes: Record<AvatarSize, number>;
+        iconMaxSize: number;
+        loadingSize: number;
+    };
+    radii: {
+        squareMin: number;
+        squareDivisor: number;
+    };
+}
+import type { ImageFit, ImageProps } from '../image/types';
+export interface AvatarProps extends Omit<PressableProps, 'style'> {
+    src?: string;
+    source?: ImageSourcePropType;
+    fit?: ImageFit;
+    icon?: React.ReactNode;
+    text?: string;
+    size?: AvatarSize | number;
+    width?: number;
+    height?: number;
+    shape?: AvatarShape;
+    color?: string;
+    backgroundColor?: string;
+    textStyle?: StyleProp<TextStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    tokensOverride?: DeepPartial<AvatarTokens>;
+    children?: React.ReactNode;
+}
+export interface AvatarImageProps extends ImageProps {
+    style?: StyleProp<ImageStyle>;
+}
+export interface AvatarFallbackTextProps {
+    children?: React.ReactNode;
+    color?: string;
+    style?: StyleProp<TextStyle>;
+}

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

@@ -0,0 +1,57 @@
+import type { PressableProps, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export interface BadgeTokens {
+    defaults: {
+        dot: boolean;
+        showZero: boolean;
+        pressedOpacity: number;
+    };
+    layout: {
+        wrapper: ViewStyle;
+        badgeAbsolute: ViewStyle;
+        badgeStandalone: ViewStyle;
+        pressableStandalone: ViewStyle;
+        text: TextStyle;
+    };
+    colors: {
+        background: string;
+        dot: string;
+        text: string;
+        border: string;
+    };
+    typography: {
+        fontSize: number;
+        fontWeight: TextStyle['fontWeight'];
+        fontFamily: string;
+        lineHeight: number;
+    };
+    sizing: {
+        minWidth: number;
+        height: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        dotSize: number;
+    };
+    radii: {
+        badge: number;
+        dot: number;
+    };
+    borders: {
+        width: number;
+    };
+}
+export type BadgeOffset = [number | string, number | string];
+export interface BadgeProps extends ViewProps {
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    color?: string;
+    textColor?: string;
+    dot?: boolean;
+    max?: number | string;
+    offset?: BadgeOffset;
+    showZero?: boolean;
+    badgeStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    onPress?: PressableProps['onPress'];
+    tokensOverride?: DeepPartial<BadgeTokens>;
+}

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

@@ -0,0 +1,109 @@
+import type React from 'react';
+import type { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type ButtonType = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
+export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
+export type ButtonIconPosition = 'left' | 'right';
+export type ButtonShadowLevel = 1 | 2 | 3;
+export type ButtonIconRender = (color: string, size: number) => React.ReactNode;
+export type ButtonLoadingSize = number | 'small' | 'large';
+export interface ButtonTokens {
+    defaults: {
+        type: ButtonType;
+        size: ButtonSize;
+        plain: boolean;
+        block: boolean;
+        round: boolean;
+        square: boolean;
+        hairline: boolean;
+        iconPosition: ButtonIconPosition;
+        loading: boolean;
+        loadingSize: ButtonLoadingSize;
+        disabled: boolean;
+        allowFontScaling: boolean;
+    };
+    layout: {
+        base: ViewStyle;
+        block: ViewStyle;
+        content: ViewStyle;
+        iconWrapper: ViewStyle;
+        text: TextStyle;
+    };
+    colors: {
+        ripple: string;
+        backgroundTransparent: string;
+        backgroundPlain: string;
+        textDark: string;
+        textLight: string;
+        tones: Record<ButtonType, {
+            background: string;
+            border: string;
+            text: string;
+            tonalBackground: string;
+            tonalBorder: string;
+            tonalText: string;
+        }>;
+    };
+    typography: {
+        fontFamily: string;
+        lineHeightMultiplier: number;
+        fontWeight: TextStyle['fontWeight'];
+    };
+    sizing: {
+        sizes: Record<ButtonSize, {
+            height: number;
+            fontSize: number;
+            paddingHorizontal: number;
+            iconSize: number;
+            radius: number;
+        }>;
+    };
+    borders: {
+        width: number;
+        hairlineWidth: number;
+    };
+    spacing: {
+        iconGap: number;
+        groupGap: number;
+    };
+    states: {
+        disabledOpacity: number;
+        loadingOpacity: number;
+        pressedOpacity: number;
+    };
+    shadows: Record<ButtonShadowLevel, {
+        color: string;
+        opacity: number;
+        radius: number;
+        offsetY: number;
+        elevation: number;
+    }>;
+}
+export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+    text?: React.ReactNode;
+    children?: React.ReactNode;
+    icon?: React.ReactNode | ButtonIconRender;
+    iconPosition?: ButtonIconPosition;
+    type?: ButtonType;
+    size?: ButtonSize;
+    color?: string;
+    textColor?: string;
+    plain?: boolean;
+    block?: boolean;
+    round?: boolean;
+    square?: boolean;
+    hairline?: boolean;
+    shadow?: boolean | ButtonShadowLevel;
+    loading?: boolean;
+    loadingText?: React.ReactNode;
+    loadingIndicator?: React.ReactNode;
+    loadingSize?: ButtonLoadingSize;
+    disabled?: boolean;
+    contentStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    tokensOverride?: DeepPartial<ButtonTokens>;
+    style?: StyleProp<ViewStyle>;
+    rippleColor?: string;
+    allowFontScaling?: boolean;
+    maxFontSizeMultiplier?: number;
+}

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

@@ -0,0 +1,111 @@
+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 type CalendarType = "single" | "range" | "multiple";
+export interface CalendarTokens {
+    defaults: {
+        type: CalendarType;
+        title: React.ReactNode;
+        showSubtitle: boolean;
+        showHeader: boolean;
+        showConfirm: Record<CalendarType, boolean>;
+        confirmText: React.ReactNode;
+        weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+        weekdays: React.ReactNode[];
+        allowSameDay: boolean;
+        poppable: boolean;
+        closeOnClickOverlay: boolean;
+        closeOnConfirm: boolean;
+        popupPlacement: PopupPlacement;
+        popupRound: boolean;
+    };
+    layout: {
+        header: ViewStyle;
+        headerCenter: ViewStyle;
+        navText: TextStyle;
+        headerTitle: TextStyle;
+        headerSubtitle: TextStyle;
+        weekRow: ViewStyle;
+        weekLabelItem: ViewStyle;
+        weekLabel: TextStyle;
+        days: ViewStyle;
+        dayButton: ViewStyle;
+        dayText: TextStyle;
+        dayPlaceholder: ViewStyle;
+        confirmButton: ViewStyle;
+        confirmText: TextStyle;
+    };
+    colors: {
+        text: string;
+        weekend: string;
+        disabled: string;
+        background: string;
+        selectedBackground: string;
+        selectedText: string;
+        rangeBackground: string;
+        headerSubtitle: string;
+        confirmText: string;
+    };
+    typography: {
+        headerTitleSize: number;
+        headerTitleWeight: NonNullable<TextStyle['fontWeight']>;
+        headerSubtitleSize: number;
+        confirmTextWeight: NonNullable<TextStyle['fontWeight']>;
+    };
+    sizing: {
+        dayMinWidth: number;
+        navButtonSize: number;
+    };
+    radii: {
+        day: number;
+        container: number;
+        confirmButton: number;
+    };
+    spacing: {
+        row: number;
+        column: number;
+        containerPadding: number;
+        headerMarginBottom: number;
+        weekRowMarginBottom: number;
+        navPaddingHorizontal: number;
+        dayPaddingVertical: number;
+        confirmMarginTop: number;
+        confirmPaddingVertical: number;
+    };
+}
+export interface CalendarProps extends ViewProps {
+    value?: Date | Date[] | null;
+    defaultValue?: Date | Date[] | null;
+    minDate?: Date;
+    maxDate?: Date;
+    type?: CalendarType;
+    title?: React.ReactNode;
+    showSubtitle?: boolean;
+    color?: string;
+    showHeader?: boolean;
+    showConfirm?: boolean;
+    confirmText?: React.ReactNode;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdays?: React.ReactNode[];
+    formatMonthTitle?: (date: Date) => React.ReactNode;
+    allowSameDay?: boolean;
+    maxRange?: number;
+    onOverRange?: (limit: number) => void;
+    poppable?: boolean;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    closeOnClickOverlay?: boolean;
+    closeOnConfirm?: boolean;
+    popupPlacement?: PopupPlacement;
+    popupRound?: boolean;
+    popupProps?: Partial<PopupProps>;
+    onOpen?: () => void;
+    onOpened?: () => void;
+    onClose?: () => void;
+    onClosed?: () => void;
+    onSelect?: (value: Date | Date[]) => void;
+    onConfirm?: (value: Date | Date[]) => void;
+    tokensOverride?: DeepPartial<CalendarTokens>;
+}

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