react-native-system-ui 1.0.4 → 1.0.6

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

@@ -0,0 +1,64 @@
+import type * as React from 'react';
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+import type { TabsTokens } from './tokens';
+export type TabsType = 'line' | 'card' | 'capsule' | 'jumbo';
+export type TabsAlign = 'start' | 'center';
+export type TabsValue = string | number;
+export interface TabsSwipeableConfig {
+    autoHeight?: boolean;
+    preventScroll?: boolean;
+}
+export interface TabsClickEvent {
+    name: TabsValue;
+    index: number;
+    disabled: boolean;
+    event: unknown;
+}
+export interface TabPaneProps {
+    name?: TabsValue;
+    title?: React.ReactNode | ((active: boolean) => React.ReactNode);
+    description?: React.ReactNode | ((active: boolean) => React.ReactNode);
+    badge?: React.ReactNode;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export interface TabsProps extends Omit<ViewProps, 'children' | 'onLayout'> {
+    children?: React.ReactNode;
+    active?: TabsValue;
+    defaultActive?: TabsValue;
+    type?: TabsType;
+    align?: TabsAlign;
+    color?: string;
+    background?: string;
+    border?: boolean;
+    lineWidth?: number | string;
+    lineHeight?: number | string;
+    titleActiveColor?: string;
+    titleInactiveColor?: string;
+    tokensOverride?: DeepPartial<TabsTokens>;
+    ellipsis?: boolean;
+    swipeThreshold?: number;
+    animated?: boolean;
+    duration?: number;
+    beforeChange?: (name: TabsValue) => boolean | Promise<boolean>;
+    lazyRender?: boolean;
+    lazyRenderPlaceholder?: React.ReactNode;
+    swipeable?: boolean | TabsSwipeableConfig;
+    scrollable?: boolean;
+    navLeft?: React.ReactNode;
+    navRight?: React.ReactNode;
+    navBottom?: React.ReactNode;
+    tabBarStyle?: StyleProp<ViewStyle>;
+    tabStyle?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+    descriptionStyle?: StyleProp<TextStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    onClickTab?: (payload: TabsClickEvent) => void;
+    onChange?: (name: TabsValue, index: number) => void;
+}
+export interface TabsRef {
+    scrollTo: (name: TabsValue, options?: {
+        immediate?: boolean;
+    }) => void;
+}

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

@@ -0,0 +1,69 @@
+import type { PressableProps, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+export type TagSize = 'mini' | 'small' | 'medium' | 'large';
+export interface TagTokens {
+    defaults: {
+        type: TagType;
+        size: TagSize;
+        plain: boolean;
+        round: boolean;
+        mark: boolean;
+        show: boolean;
+        pressedOpacity: number;
+    };
+    layout: {
+        container: ViewStyle;
+        close: ViewStyle;
+    };
+    colors: {
+        plainBackground: string;
+        toneMap: Record<TagType, {
+            background: string;
+            text: string;
+        }>;
+    };
+    typography: {
+        fontFamily: string;
+        lineHeightMultiplier: number;
+        fontWeight: TextStyle['fontWeight'];
+    };
+    sizing: {
+        sizes: Record<TagSize, {
+            fontSize: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            borderRadius: number;
+            lineHeight: number;
+        }>;
+        closeIconSize: number;
+    };
+    radii: {
+        round: number;
+        markLeading: number;
+    };
+    borders: {
+        width: number;
+    };
+    spacing: {
+        closeGap: number;
+        closeHitSlop: number;
+    };
+}
+export interface TagProps extends ViewProps {
+    children?: React.ReactNode;
+    type?: TagType;
+    size?: TagSize;
+    color?: string;
+    textColor?: string;
+    plain?: boolean;
+    round?: boolean;
+    mark?: boolean;
+    show?: boolean;
+    closeable?: boolean;
+    closeIcon?: React.ReactNode | ((color: string, size: number) => React.ReactNode);
+    onClose?: () => void;
+    onPress?: PressableProps['onPress'];
+    textStyle?: StyleProp<TextStyle>;
+    tokensOverride?: DeepPartial<TagTokens>;
+}

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

@@ -0,0 +1,112 @@
+import type { ActionSheetTokens } from './action-sheet/types';
+import type { AreaTokens } from './area/tokens';
+import type { AvatarTokens } from './avatar/types';
+import type { BadgeTokens } from './badge/types';
+import type { ButtonTokens } from './button/types';
+import type { CalendarTokens } from './calendar/types';
+import type { CascaderTokens } from './cascader/types';
+import type { CellTokens } from './cell/types';
+import type { CheckboxTokens } from './checkbox/types';
+import type { CircleTokens } from './circle/types';
+import type { CollapseTokens } from './collapse/types';
+import type { ConfigProviderTokens } from './config-provider/tokens';
+import type { CountDownTokens } from './count-down/types';
+import type { DatetimePickerTokens } from './datetime-picker/tokens';
+import type { DialogTokens } from './dialog/tokens';
+import type { DividerTokens } from './divider/types';
+import type { EmptyTokens } from './empty/types';
+import type { FieldTokens } from './field/tokens';
+import type { FlexTokens } from './flex/types';
+import type { FormTokens } from './form/tokens';
+import type { GridTokens } from './grid/types';
+import type { ImageTokens } from './image/types';
+import type { ImagePreviewTokens } from './image-preview/tokens';
+import type { InputTokens } from './input/types';
+import type { LoadingTokens } from './loading/types';
+import type { NavBarTokens } from './nav-bar/types';
+import type { NoticeBarTokens } from './notice-bar/tokens';
+import type { NotifyTokens } from './notify/types';
+import type { NumberKeyboardTokens } from './number-keyboard/tokens';
+import type { OverlayTokens } from './overlay/tokens';
+import type { PasswordInputTokens } from './password-input/tokens';
+import type { PickerTokens } from './picker/tokens';
+import type { PopupTokens } from './popup/tokens';
+import type { ProgressTokens } from './progress/types';
+import type { PortalTokens } from './portal/tokens';
+import type { RadioTokens } from './radio/types';
+import type { SearchTokens } from './search/tokens';
+import type { SelectorTokens } from './selector/types';
+import type { ShareSheetTokens } from './share-sheet/tokens';
+import type { SidebarTokens } from './sidebar/types';
+import type { SkeletonTokens } from './skeleton/types';
+import type { SliderTokens } from './slider/tokens';
+import type { SpaceTokens } from './space/types';
+import type { StepperTokens } from './stepper/tokens';
+import type { SwiperTokens } from './swiper/tokens';
+import type { SwiperPagIndicatorTokens } from './swiper/SwiperPagIndicator';
+import type { SwitchTokens } from './switch/types';
+import type { TabbarTokens } from './tabbar/tokens';
+import type { TabsTokens } from './tabs/tokens';
+import type { TagTokens } from './tag/types';
+import type { ToastTokens } from './toast/tokens';
+import type { TypographyTokens } from './typography/types';
+import type { SafeAreaViewTokens } from './safe-area-view/tokens';
+import type { WaterMarkTokens } from './water-mark/types';
+declare module '../design-system/ThemeContext' {
+    interface ThemeComponentTokensMap {
+        actionSheet: ActionSheetTokens;
+        area: AreaTokens;
+        avatar: AvatarTokens;
+        badge: BadgeTokens;
+        button: ButtonTokens;
+        calendar: CalendarTokens;
+        cascader: CascaderTokens;
+        cell: CellTokens;
+        checkbox: CheckboxTokens;
+        circle: CircleTokens;
+        collapse: CollapseTokens;
+        configProvider: ConfigProviderTokens;
+        countDown: CountDownTokens;
+        datetimePicker: DatetimePickerTokens;
+        dialog: DialogTokens;
+        divider: DividerTokens;
+        empty: EmptyTokens;
+        field: FieldTokens;
+        flex: FlexTokens;
+        form: FormTokens;
+        grid: GridTokens;
+        image: ImageTokens;
+        imagePreview: ImagePreviewTokens;
+        input: InputTokens;
+        loading: LoadingTokens;
+        navBar: NavBarTokens;
+        noticeBar: NoticeBarTokens;
+        notify: NotifyTokens;
+        numberKeyboard: NumberKeyboardTokens;
+        overlay: OverlayTokens;
+        passwordInput: PasswordInputTokens;
+        picker: PickerTokens;
+        popup: PopupTokens;
+        progress: ProgressTokens;
+        portal: PortalTokens;
+        radio: RadioTokens;
+        search: SearchTokens;
+        selector: SelectorTokens;
+        shareSheet: ShareSheetTokens;
+        sidebar: SidebarTokens;
+        skeleton: SkeletonTokens;
+        slider: SliderTokens;
+        space: SpaceTokens;
+        stepper: StepperTokens;
+        swiper: SwiperTokens;
+        swiperPagIndicator: SwiperPagIndicatorTokens;
+        switch: SwitchTokens;
+        safeAreaView: SafeAreaViewTokens;
+        tabbar: TabbarTokens;
+        tabs: TabsTokens;
+        tag: TagTokens;
+        toast: ToastTokens;
+        typography: TypographyTokens;
+        waterMark: WaterMarkTokens;
+    }
+}

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

@@ -0,0 +1 @@
+export type { ToastProps, ToastPosition, ToastType } from './Toast';

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

@@ -0,0 +1,66 @@
+import type { TextProps, TextStyle, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export type TypographyType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'secondary' | 'light';
+export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type TypographyTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface TypographyTokens {
+    defaults: {
+        type: TypographyType;
+        size: TypographySize;
+        disabled: boolean;
+    };
+    layout: {
+        centerWrapper: ViewStyle;
+        actionRow: ViewStyle;
+    };
+    colors: Record<TypographyType, string>;
+    sizing: {
+        sizes: Record<TypographySize, number>;
+        titles: Record<TypographyTitleLevel, {
+            fontSize: number;
+            lineHeight: number;
+        }>;
+        lineHeightMultiplier: number;
+        actionMarginLeft: number;
+    };
+    typography: {
+        fontFamily: string;
+        weight: {
+            regular: NonNullable<TextStyle['fontWeight']>;
+            medium: NonNullable<TextStyle['fontWeight']>;
+            strong: NonNullable<TextStyle['fontWeight']>;
+        };
+    };
+    opacity: {
+        disabled: number;
+    };
+}
+export interface EllipsisConfig {
+    rows?: number;
+    symbol?: string;
+    expandText?: string;
+    collapseText?: string;
+    onExpand?: (expanded: boolean) => void;
+}
+export interface TypographyBaseProps extends Omit<TextProps, 'children'> {
+    children?: React.ReactNode;
+    type?: TypographyType;
+    color?: string | TypographyType;
+    size?: TypographySize;
+    level?: TypographyTitleLevel;
+    disabled?: boolean;
+    delete?: boolean;
+    underline?: boolean;
+    center?: boolean;
+    strong?: boolean;
+    ellipsis?: boolean | number | EllipsisConfig;
+    tokensOverride?: DeepPartial<TypographyTokens>;
+    onPress?: TextProps['onPress'];
+}
+export type TypographyTextProps = TypographyBaseProps;
+export type TypographyTitleProps = Omit<TypographyBaseProps, 'size'> & {
+    level?: TypographyTitleLevel;
+};
+export interface TypographyLinkProps extends TypographyBaseProps {
+    href?: string;
+}

package/dist/types/components/water-mark/types.d.ts

@@ -0,0 +1,58 @@
+import type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { DeepPartial } from '../../types';
+export interface WaterMarkTokens {
+    defaults: {
+        content: string;
+        width: number;
+        height: number;
+        gapX: number;
+        gapY: number;
+        rotate: number;
+        fontSize: number;
+        opacity: number;
+        zIndex: number;
+        fullPage: boolean;
+    };
+    layout: {
+        absoluteFill: ViewStyle;
+        wrapper: ViewStyle;
+        row: ViewStyle;
+        cell: ViewStyle;
+        mark: ViewStyle;
+    };
+    colors: {
+        mark: string;
+    };
+}
+export interface WaterMarkImage {
+    src: string;
+    width: number;
+    height: number;
+}
+export interface WaterMarkFont {
+    color?: string;
+    size?: number | string;
+    family?: string;
+    weight?: TextStyle['fontWeight'];
+}
+export interface WaterMarkProps extends ViewProps {
+    content?: string;
+    width?: number;
+    height?: number;
+    gapX?: number;
+    gapY?: number;
+    rotate?: number;
+    image?: WaterMarkImage;
+    font?: WaterMarkFont;
+    fontSize?: number;
+    color?: string;
+    opacity?: number;
+    zIndex?: number;
+    fullPage?: boolean;
+    tokensOverride?: DeepPartial<WaterMarkTokens>;
+    onLayoutCalculated?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    textStyle?: StyleProp<TextStyle>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-system-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "面向 React Native 的设计系统级组件库，Tokens + ThemeProvider 主题体系，按需引入、体积小；API 统一可组合、高效可靠，支持可访问性与多端一致。",
   "homepage": "https://rn-system-ui.netlify.app/",
   "main": "./dist/cjs/index.js",
@@ -19,7 +19,7 @@
   "scripts": {
     "dev": "NODE_OPTIONS=\"--require ./scripts/polyfills.js\" rndoc dev",
     "build": "NODE_OPTIONS=\"--require ./scripts/polyfills.js\" rndoc build",
-    "postbuild": "node scripts/fix-package-json.mjs && node scripts/prune-dist.mjs",
+    "postbuild": "npm run build:types && node scripts/fix-package-json.mjs && node scripts/prune-dist.mjs",
     "build:types": "tsc -p tsconfig.types.json",
     "docs:update-size": "node scripts/generate-docs-size-data.mjs",
     "docs:build": "npm run build && npm run docs:update-size && NODE_OPTIONS=\"--require ./scripts/polyfills.js\" rndoc docs-build",
@@ -97,7 +97,7 @@
     "@react-stately/toggle": "^3.9.3",
     "@react-types/checkbox": "^3.10.2",
     "@react-types/listbox": "^3.7.4",
-    "react-native-system-icon": "^1.0.2"
+    "react-native-system-icon": "^1.0.4"
   },
   "react-native": "./dist/es/index.js",
   "sideEffects": false,

package/dist/cjs/components/form/FormContext.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FormContext",{enumerable:!0,get:function(){return _Form.FormContext}});var _Form=require("./Form");

package/dist/cjs/components/form/utils.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toNamePath=exports.setValueByName=exports.serializeNamePath=exports.normalizeTrigger=exports.getValueByName=exports.FORM_ALL_FIELDS_KEY=void 0;var _utils=require("../../utils");const normalizeTrigger=e=>e?Array.isArray(e)?e:[e]:[];exports.normalizeTrigger=normalizeTrigger;const FORM_ALL_FIELDS_KEY=exports.FORM_ALL_FIELDS_KEY="__form_all__",toNamePath=e=>null==e?[]:Array.isArray(e)?e:(0,_utils.isNumber)(e)?[e]:(0,_utils.isString)(e)?e.split("."):[String(e)];exports.toNamePath=toNamePath;const serializeNamePath=e=>toNamePath(e).join(".");exports.serializeNamePath=serializeNamePath;const getValueByName=(e,r)=>toNamePath(r).reduce((e,r)=>{if(null==e)return e;const t=String(r);if(Array.isArray(e)){const r=Number(t);return Number.isFinite(r)?e[r]:e[t]}return"object"==typeof e?e[t]:void 0},e);exports.getValueByName=getValueByName;const setValueByName=(e,r,t)=>{const a=toNamePath(r);if(!a.length)return e;const i=Array.isArray(e)?[...e]:"object"==typeof e&&null!==e?{...e}:{};let s=i;return a.forEach((e,r)=>{const i=String(e),o=Number(i);if(r===a.length-1)return void(Array.isArray(s)&&Number.isFinite(o)?s[o]=t:s[i]=t);const l=Array.isArray(s)&&Number.isFinite(o)?s[o]:s[i],n=null==l?(0,_utils.isNumber)(a[r+1])?[]:{}:Array.isArray(l)?[...l]:"object"==typeof l?{...l}:{};Array.isArray(s)&&Number.isFinite(o)?s[o]=n:s[i]=n,s=n}),i};exports.setValueByName=setValueByName;

package/dist/es/components/form/FormContext.js

@@ -1 +0,0 @@
-export{FormContext}from"./Form";

package/dist/es/components/form/utils.js

@@ -1 +0,0 @@
-import{isNumber,isString}from"../../utils";export const normalizeTrigger=r=>r?Array.isArray(r)?r:[r]:[];export const FORM_ALL_FIELDS_KEY="__form_all__";export const toNamePath=r=>null==r?[]:Array.isArray(r)?r:isNumber(r)?[r]:isString(r)?r.split("."):[String(r)];export const serializeNamePath=r=>toNamePath(r).join(".");export const getValueByName=(r,t)=>toNamePath(t).reduce((r,t)=>{if(null==r)return r;const e=String(t);if(Array.isArray(r)){const t=Number(e);return Number.isFinite(t)?r[t]:r[e]}return"object"==typeof r?r[e]:void 0},r);export const setValueByName=(r,t,e)=>{const i=toNamePath(t);if(!i.length)return r;const o=Array.isArray(r)?[...r]:"object"==typeof r&&null!==r?{...r}:{};let n=o;return i.forEach((r,t)=>{const o=String(r),a=Number(o);if(t===i.length-1)return void(Array.isArray(n)&&Number.isFinite(a)?n[a]=e:n[o]=e);const s=Array.isArray(n)&&Number.isFinite(a)?n[a]:n[o],u=null==s?isNumber(i[t+1])?[]:{}:Array.isArray(s)?[...s]:"object"==typeof s?{...s}:{};Array.isArray(n)&&Number.isFinite(a)?n[a]=u:n[o]=u,n=u}),o};

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

@@ -1,2 +0,0 @@
-export type { FormContextValue } from './Form';
-export { FormContext } from './Form';

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

@@ -1,7 +0,0 @@
-import type { NamePath } 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>;