@unif/react-native-ui 0.1.0 → 0.2.0

package/lib/typescript/module/src/popover/style/index.d.ts

@@ -0,0 +1,8 @@
+import type { ViewStyle } from 'react-native';
+import type { Tokens } from '../../theme/tokens';
+export type PopoverSemanticStyles = {
+    overlay?: ViewStyle;
+    content?: ViewStyle;
+};
+export declare const createDefaultStyles: (t: Tokens) => PopoverSemanticStyles;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/popover/style/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/popover/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,GAAG,MAAM,KAAG,qBAc9C,CAAC"}

package/lib/typescript/module/src/row/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 水平布局容器
+ *
+ * 默认 flexDirection: 'row' + alignItems: 'center'。
+ */
+import React from 'react';
+import type { ViewProps, ViewStyle } from 'react-native';
+type AlignItems = ViewStyle['alignItems'];
+type JustifyContent = ViewStyle['justifyContent'];
+export interface RowProps extends ViewProps {
+    /** alignItems，默认 'center' */
+    align?: AlignItems;
+    /** justifyContent */
+    justify?: JustifyContent;
+    /** 子元素间距 */
+    gap?: number;
+    /** 是否换行 */
+    wrap?: boolean;
+}
+declare const Row: React.FC<RowProps>;
+export default Row;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/row/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,KAAK,UAAU,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAC1C,KAAK,cAAc,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC;AAElD,MAAM,WAAW,QAAS,SAAQ,SAAS;IACzC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,YAAY;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW;IACX,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAmB3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/lib/typescript/module/src/row/style/index.d.ts

@@ -0,0 +1,8 @@
+export declare const baseStyle: {
+    flexDirection: "row";
+    alignItems: "center";
+};
+export declare const wrapStyle: {
+    flexWrap: "wrap";
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/row/style/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/row/style/index.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;CAKhB,CAAC;AAEP,eAAO,MAAM,SAAS;;CAIf,CAAC"}

package/lib/typescript/module/src/space/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 间距占位组件
+ *
+ * 在两个元素之间插入固定间距。
+ */
+import React from 'react';
+export interface SpaceProps {
+    /** 间距大小，默认 12 */
+    size?: number;
+    /** 方向，默认 'vertical' */
+    direction?: 'horizontal' | 'vertical';
+}
+declare const Space: React.FC<SpaceProps>;
+export default Space;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/space/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/space/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,UAAU;IACzB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAQ/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/typescript/module/src/space/style/index.d.ts

@@ -0,0 +1,7 @@
+export declare const verticalStyle: (size: number) => {
+    height: number;
+};
+export declare const horizontalStyle: (size: number) => {
+    width: number;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/space/style/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/space/style/index.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM;;CAAuB,CAAC;AAElE,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM;;CAAsB,CAAC"}

package/lib/typescript/module/src/text/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 语义化文字组件
+ *
+ * variant 驱动样式，支持嵌套 Text。
+ */
+import React from 'react';
+import type { TextProps as RNTextProps } from 'react-native';
+import type { FontWeight } from './style';
+export interface TextProps extends RNTextProps {
+    variant?: 'title' | 'heading' | 'body' | 'caption' | 'micro';
+    secondary?: boolean;
+    primary?: boolean;
+    color?: string;
+    weight?: FontWeight;
+}
+declare const Text: React.FC<TextProps>;
+export default Text;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/text/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2B7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/typescript/module/src/text/style/index.d.ts

@@ -0,0 +1,36 @@
+import type { TextStyle } from 'react-native';
+import type { Tokens } from '../../theme/tokens';
+export type FontWeight = 'medium' | 'semibold' | 'bold';
+export declare const createVariantMap: (t: Tokens) => {
+    title: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "600";
+        color: string;
+    };
+    heading: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "600";
+        color: string;
+    };
+    body: {
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+    };
+    caption: {
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+    };
+    micro: {
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+    };
+};
+export declare const WEIGHT_MAP: Record<FontWeight, TextStyle>;
+export declare const createSecondaryStyle: (t: Tokens) => TextStyle;
+export declare const createPrimaryStyle: (t: Tokens) => TextStyle;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/text/style/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/text/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAExD,eAAO,MAAM,gBAAgB,GAAI,GAAG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBxC,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,SAAS,CAIpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,GAAG,MAAM,KAAG,SAE/C,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAAI,GAAG,MAAM,KAAG,SAE7C,CAAC"}

package/lib/typescript/module/src/theme/context.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ConfigProvider — 声明式主题系统
+ *
+ * 通过 React Context 注入 token，支持嵌套覆盖。
+ */
+import React from 'react';
+import type { Tokens } from './tokens';
+export type TokenOverrides = Partial<Tokens>;
+export interface ConfigProviderProps {
+    theme?: {
+        token?: TokenOverrides;
+    };
+    children: React.ReactNode;
+}
+export declare const ConfigProvider: React.FC<ConfigProviderProps>;
+export declare function useTokens(): Tokens;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/module/src/theme/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/theme/context.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;AAI7C,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,cAAc,CAAA;KAAE,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAcxD,CAAC;AAEF,wBAAgB,SAAS,IAAI,MAAM,CAElC"}

package/lib/typescript/module/src/theme/tokens.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Design Tokens — 静态默认值
+ */
+export declare const defaultTokens: {
+    colorPrimary: string;
+    colorSuccess: string;
+    colorWarning: string;
+    colorError: string;
+    colorBgPage: string;
+    colorBgElevated: string;
+    colorBgUserMsg: string;
+    colorText: string;
+    colorTextSecondary: string;
+    colorTextPlaceholder: string;
+    colorBorder: string;
+    colorLink: string;
+    colorBgHeader: string;
+    colorHeaderText: string;
+    colorHeaderIcon: string;
+    fontSizeXs: number;
+    fontSizeSm: number;
+    fontSize: number;
+    fontSizeMd: number;
+    fontSizeLg: number;
+    fontSizeXl: number;
+    lineHeight: number;
+    lineHeightLg: number;
+    spaceXs: number;
+    spaceSm: number;
+    space: number;
+    spaceMd: number;
+    spaceLg: number;
+    spaceXl: number;
+    spaceXxl: number;
+    radiusSm: number;
+    radius: number;
+    radiusLg: number;
+    radiusXl: number;
+    radiusFull: number;
+    shadowSm: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    shadow: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+};
+export type Tokens = typeof defaultTokens;
+//# sourceMappingURL=tokens.d.ts.map

package/lib/typescript/module/src/theme/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDzB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,OAAO,aAAa,CAAC"}

package/lib/typescript/module/src/touchable/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 统一触摸反馈组件
+ *
+ * 基于 Pressable，替代 TouchableOpacity。
+ * 按下时透明度降低，支持 activeOpacity 自定义。
+ */
+import React from 'react';
+import type { ViewProps } from 'react-native';
+export interface TouchableProps extends ViewProps {
+    onPress?: () => void;
+    onLongPress?: () => void;
+    disabled?: boolean;
+    /** 按下态透明度，默认 0.7 */
+    activeOpacity?: number;
+    testID?: string;
+}
+declare const Touchable: React.FC<TouchableProps>;
+export default Touchable;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/touchable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/touchable/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,cAAc,CAAC;AAGzD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqBvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/module/src/touchable/style/index.d.ts

@@ -0,0 +1,4 @@
+export declare const disabledStyle: {
+    opacity: number;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/touchable/style/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/touchable/style/index.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;CAEtB,CAAC"}

package/lib/typescript/module/src/wave-animation/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * WaveAnimation 原子组件
+ *
+ * 柱状声波动画，可配置柱数、尺寸和颜色。
+ */
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+export interface WaveAnimationProps {
+    active: boolean;
+    color?: string;
+    barCount?: number;
+    barWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    style?: ViewStyle;
+    testID?: string;
+}
+declare const _default: React.NamedExoticComponent<WaveAnimationProps>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/wave-animation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/wave-animation/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;;AAyED,wBAAyC"}

package/package.json

@@ -1,14 +1,24 @@
 {
   "name": "@unif/react-native-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "UNIF React Native UI Components",
-  "main": "./src/index.tsx",
-  "types": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/src/index.d.ts",
+  "react-native": "./src/index.tsx",
+  "source": "./src/index.tsx",
   "exports": {
     ".": {
       "source": "./src/index.tsx",
-      "types": "./src/index.tsx",
-      "default": "./src/index.tsx"
+      "react-native": "./src/index.tsx",
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
     },
     "./package.json": "./package.json"
   },
@@ -102,6 +112,7 @@
     "source": "src",
     "output": "lib",
     "targets": [
+      "commonjs",
       [
         "module",
         {

package/src/action-sheet/index.tsx

@@ -14,8 +14,9 @@ import {
 } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { mergeStyles } from '../hooks';
+import { useTokens } from '../theme/context';
 import type { ActionSheetSemanticStyles, ActionSheetOption } from './style';
-import { DEFAULT_STYLES } from './style';
+import { createDefaultStyles } from './style';
 
 export interface ActionSheetProps {
   visible: boolean;
@@ -39,9 +40,12 @@ const ActionSheet: React.FC<ActionSheetProps> = ({
   styles: semanticStyles,
   testID,
 }) => {
+  const tokens = useTokens();
+  const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
+
   const s = useMemo(
-    () => mergeStyles<ActionSheetSemanticStyles>(DEFAULT_STYLES, semanticStyles),
-    [semanticStyles],
+    () => mergeStyles<ActionSheetSemanticStyles>(defaultStyles, semanticStyles),
+    [defaultStyles, semanticStyles],
   );
 
   if (!visible) {

package/src/action-sheet/style/index.tsx

@@ -1,5 +1,5 @@
 import type { ViewStyle, TextStyle } from 'react-native';
-import { tokens } from '../../theme/tokens';
+import type { Tokens } from '../../theme/tokens';
 
 export type ActionSheetSemanticStyles = {
   overlay?: ViewStyle;
@@ -16,18 +16,20 @@ export interface ActionSheetOption {
   icon?: React.ReactNode;
 }
 
-export const DEFAULT_STYLES: ActionSheetSemanticStyles = {
+export const createDefaultStyles = (
+  t: Tokens,
+): ActionSheetSemanticStyles => ({
   overlay: {
     flex: 1,
     backgroundColor: 'rgba(0,0,0,0.3)',
   },
   panel: {
-    backgroundColor: tokens.colorBgElevated,
+    backgroundColor: t.colorBgElevated,
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
     paddingTop: 20,
     paddingBottom: 24,
-    paddingHorizontal: tokens.spaceMd,
+    paddingHorizontal: t.spaceMd,
   },
   grid: {
     flexDirection: 'row',
@@ -40,13 +42,13 @@ export const DEFAULT_STYLES: ActionSheetSemanticStyles = {
     width: 56,
     height: 56,
     borderRadius: 12,
-    backgroundColor: tokens.colorBgPage,
+    backgroundColor: t.colorBgPage,
     justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: tokens.spaceSm,
+    marginBottom: t.spaceSm,
   },
   optionLabel: {
     fontSize: 12,
-    color: tokens.colorTextSecondary,
+    color: t.colorTextSecondary,
   },
-};
+});

package/src/avatar/index.tsx

@@ -8,8 +8,9 @@ import React, { useMemo } from 'react';
 import { View, Image } from 'react-native';
 import type { ViewStyle, ImageSourcePropType } from 'react-native';
 import { mergeStyles } from '../hooks';
+import { useTokens } from '../theme/context';
 import type { AvatarSemanticStyles } from './style';
-import { DEFAULT_STYLES } from './style';
+import { createDefaultStyles } from './style';
 
 export interface AvatarProps {
   size?: number;
@@ -28,9 +29,12 @@ const Avatar: React.FC<AvatarProps> = ({
   styles: semanticStyles,
   testID,
 }) => {
+  const tokens = useTokens();
+  const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
+
   const s = useMemo(
-    () => mergeStyles<AvatarSemanticStyles>(DEFAULT_STYLES, semanticStyles),
-    [semanticStyles],
+    () => mergeStyles<AvatarSemanticStyles>(defaultStyles, semanticStyles),
+    [defaultStyles, semanticStyles],
   );
 
   const sizeStyle: ViewStyle = {

package/src/avatar/style/index.tsx

@@ -1,21 +1,21 @@
 import type { ViewStyle, ImageStyle } from 'react-native';
-import { tokens } from '../../theme/tokens';
+import type { Tokens } from '../../theme/tokens';
 
 export type AvatarSemanticStyles = {
   root?: ViewStyle;
   image?: ImageStyle;
 };
 
-export const DEFAULT_STYLES: AvatarSemanticStyles = {
+export const createDefaultStyles = (t: Tokens): AvatarSemanticStyles => ({
   root: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: tokens.colorBgElevated,
+    backgroundColor: t.colorBgElevated,
     overflow: 'hidden',
-    ...tokens.shadowSm,
+    ...t.shadowSm,
   },
   image: {
     width: '100%' as any,
     height: '100%' as any,
   },
-};
+});

package/src/button/index.tsx

@@ -8,11 +8,12 @@ import React, { useMemo } from 'react';
 import { Pressable, Text, View, ActivityIndicator } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { mergeStyles } from '../hooks';
+import { useTokens } from '../theme/context';
 import type { ButtonSemanticStyles } from './style';
 import {
   DEFAULT_STYLES,
   SIZE_STYLES,
-  TYPE_STYLES,
+  createTypeStyles,
   DISABLED_STYLES,
   BLOCK_STYLES,
   PRESSED_STYLE,
@@ -46,17 +47,20 @@ const Button: React.FC<ButtonProps> = ({
   testID,
   children,
 }: ButtonProps) => {
+  const tokens = useTokens();
+  const typeStyles = useMemo(() => createTypeStyles(tokens), [tokens]);
+
   const s = useMemo(
     () =>
       mergeStyles<ButtonSemanticStyles>(
         DEFAULT_STYLES,
         SIZE_STYLES[size],
-        TYPE_STYLES[type],
+        typeStyles[type],
         disabled ? DISABLED_STYLES : undefined,
         block ? BLOCK_STYLES : undefined,
         semanticStyles,
       ),
-    [type, size, disabled, block, semanticStyles],
+    [type, size, disabled, block, semanticStyles, typeStyles],
   );
 
   return (

package/src/button/style/index.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import type { ViewStyle, TextStyle } from 'react-native';
-import { tokens } from '../../theme/tokens';
+import type { Tokens } from '../../theme/tokens';
 
 export type ButtonSemanticStyles = {
   root?: ViewStyle;
@@ -33,24 +33,26 @@ export const SIZE_STYLES: Record<string, Partial<ButtonSemanticStyles>> = {
   },
 };
 
-export const TYPE_STYLES: Record<string, Partial<ButtonSemanticStyles>> = {
+export const createTypeStyles = (
+  t: Tokens,
+): Record<string, Partial<ButtonSemanticStyles>> => ({
   primary: {
-    root: { backgroundColor: tokens.colorPrimary },
+    root: { backgroundColor: t.colorPrimary },
     content: { color: '#FFF', fontWeight: '600' },
   },
   outline: {
-    root: { borderWidth: 1, borderColor: tokens.colorBorder },
-    content: { color: tokens.colorTextSecondary },
+    root: { borderWidth: 1, borderColor: t.colorBorder },
+    content: { color: t.colorTextSecondary },
   },
   ghost: {
-    root: { borderWidth: 1, borderColor: tokens.colorPrimary },
-    content: { color: tokens.colorPrimary },
+    root: { borderWidth: 1, borderColor: t.colorPrimary },
+    content: { color: t.colorPrimary },
   },
   danger: {
-    root: { backgroundColor: tokens.colorError },
+    root: { backgroundColor: t.colorError },
     content: { color: '#FFF', fontWeight: '600' },
   },
-};
+});
 
 export const DISABLED_STYLES: Partial<ButtonSemanticStyles> = {
   root: { opacity: 0.5 },

package/src/chip/index.tsx

@@ -8,8 +8,14 @@ import React, { useMemo } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { mergeStyles } from '../hooks';
+import { useTokens } from '../theme/context';
 import type { ChipSemanticStyles } from './style';
-import { DEFAULT_STYLES, SELECTED_STYLES, DISABLED_STYLES, SMALL_STYLES } from './style';
+import {
+  createDefaultStyles,
+  createSelectedStyles,
+  DISABLED_STYLES,
+  createSmallStyles,
+} from './style';
 
 export interface ChipProps {
   children: React.ReactNode;
@@ -36,16 +42,21 @@ const Chip: React.FC<ChipProps> = ({
   styles: semanticStyles,
   testID,
 }) => {
+  const tokens = useTokens();
+  const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
+  const selectedStyles = useMemo(() => createSelectedStyles(tokens), [tokens]);
+  const smallStyles = useMemo(() => createSmallStyles(tokens), [tokens]);
+
   const s = useMemo(
     () =>
       mergeStyles<ChipSemanticStyles>(
-        DEFAULT_STYLES,
-        size === 'small' ? SMALL_STYLES : undefined,
-        selected ? SELECTED_STYLES : undefined,
+        defaultStyles,
+        size === 'small' ? smallStyles : undefined,
+        selected ? selectedStyles : undefined,
         disabled ? DISABLED_STYLES : undefined,
         semanticStyles,
       ),
-    [size, selected, disabled, semanticStyles],
+    [size, selected, disabled, semanticStyles, defaultStyles, selectedStyles, smallStyles],
   );
 
   const content = (

package/src/chip/style/index.tsx

@@ -1,34 +1,36 @@
 import type { ViewStyle, TextStyle } from 'react-native';
-import { tokens } from '../../theme/tokens';
+import type { Tokens } from '../../theme/tokens';
 
 export type ChipSemanticStyles = {
   root?: ViewStyle;
   content?: TextStyle;
 };
 
-export const DEFAULT_STYLES: ChipSemanticStyles = {
+export const createDefaultStyles = (t: Tokens): ChipSemanticStyles => ({
   root: {
     backgroundColor: '#F0F0F5',
-    borderRadius: tokens.radiusFull,
+    borderRadius: t.radiusFull,
     paddingHorizontal: 14,
     paddingVertical: 7,
   },
   content: {
-    fontSize: tokens.fontSizeSm,
-    color: tokens.colorText,
+    fontSize: t.fontSizeSm,
+    color: t.colorText,
   },
-};
+});
 
-export const SELECTED_STYLES: Partial<ChipSemanticStyles> = {
+export const createSelectedStyles = (
+  t: Tokens,
+): Partial<ChipSemanticStyles> => ({
   root: {
     borderWidth: 1,
-    borderColor: tokens.colorPrimary,
+    borderColor: t.colorPrimary,
     backgroundColor: '#FFF5EB',
   },
   content: {
-    color: tokens.colorPrimary,
+    color: t.colorPrimary,
   },
-};
+});
 
 export const DISABLED_STYLES: Partial<ChipSemanticStyles> = {
   root: {
@@ -36,12 +38,12 @@ export const DISABLED_STYLES: Partial<ChipSemanticStyles> = {
   },
 };
 
-export const SMALL_STYLES: Partial<ChipSemanticStyles> = {
+export const createSmallStyles = (t: Tokens): Partial<ChipSemanticStyles> => ({
   root: {
     paddingHorizontal: 10,
     paddingVertical: 4,
   },
   content: {
-    fontSize: tokens.fontSizeXs,
+    fontSize: t.fontSizeXs,
   },
-};
+});