@xhsreds/reds-rn-next 0.0.2-beta20240708190837 → 0.0.2

package/lib/esm/components/ConfigProvider/hooks/ConfigContext/ConfigContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigContext.js","sources":["../../../../../../src/components/ConfigProvider/hooks/ConfigContext/ConfigContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport interface IConfigProviderContext {\n  id: string;\n}\n\nexport const ConfigProviderContext = createContext<IConfigProviderContext>({\n  id: \"root\",\n});\n"],"names":["ConfigProviderContext","createContext","id"],"mappings":";;AAMaA,IAAAA,qCAAwBC,aAAsC,CAAA;AACzEC,EAAAA,EAAI,EAAA,MAAA;AACN,CAAC;;;;"}

package/lib/esm/components/ConfigProvider/hooks/themeToken/useThemeToken.js

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { configCache } from '../ConfigCache/ConfigCache.js';
+import { ConfigProviderContext } from '../ConfigContext/ConfigContext.js';
+import '../../../../_chunks/BHmvJnIm.js';
+import '@xhs/reds-token-next';
+
+var useThemeColor = function useThemeColor(component) {
+  var id = useContext(ConfigProviderContext).id;
+  var themeColor = new Proxy({}, {
+    get: function get(_, key) {
+      if (configCache.getColorModeById(id) === "dark") {
+        return component ? configCache.getDarkTokenByIdAndComponent(id, component) : configCache.getDarkTokenById(id, key);
+      } else {
+        return component ? configCache.getLightTokenByIdAndComponent(id, component) : configCache.getLightTokenById(id, key);
+      }
+    }
+  });
+  return themeColor;
+};
+
+export { useThemeColor };
+//# sourceMappingURL=useThemeToken.js.map

package/lib/esm/components/ConfigProvider/hooks/themeToken/useThemeToken.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeToken.js","sources":["../../../../../../src/components/ConfigProvider/hooks/themeToken/useThemeToken.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { configCache } from \"../ConfigCache\";\nimport { ConfigProviderContext } from \"../ConfigContext/ConfigContext\";\nimport { ThemeColor, ColorMode, LightToken, DarkToken, Component } from \"../ConfigCache/interface\";\n\nexport interface IThemeInstance {\n  colorMode: ColorMode;\n}\nexport interface MyProxyConstructor {\n  new <T, H extends Record<string, unknown>>(target: T, handler: ProxyHandler<H>): H;\n}\n\nexport const useThemeColor = (component?: Component) => {\n  const id = useContext(ConfigProviderContext).id;\n  const themeColor: ThemeColor = new (Proxy as MyProxyConstructor)(\n    {},\n    {\n      get(this: IThemeInstance, _, key: LightToken | DarkToken) {\n        if (configCache.getColorModeById(id) === \"dark\") {\n          return component\n            ? configCache.getDarkTokenByIdAndComponent(id, component)\n            : configCache.getDarkTokenById(id, key);\n        } else {\n          return component\n            ? configCache.getLightTokenByIdAndComponent(id, component)\n            : configCache.getLightTokenById(id, key);\n        }\n      },\n    },\n  );\n\n  return themeColor;\n};\n"],"names":["useThemeColor","component","id","useContext","ConfigProviderContext","themeColor","Proxy","get","_","key","configCache","getColorModeById","getDarkTokenByIdAndComponent","getDarkTokenById","getLightTokenByIdAndComponent","getLightTokenById"],"mappings":";;;;;;IAYaA,aAAA,GAAgB,SAAhBA,aAAAA,CAAiBC,SAA0B,EAAA;AAChD,EAAA,IAAAC,EAAA,GAAKC,UAAW,CAAAC,qBAAqB,CAAE,CAAAF,EAAA,CAAA;AAC7C,EAAA,IAAMG,aAAyB,IAAKC,KAAA,CAClC,EAAC,EACD;AACEC,IAAAA,GAAA,EAAAA,SAAAA,GAAAA,CAA0BC,GAAGC,GAA6B,EAAA;MACxD,IAAIC,WAAY,CAAAC,gBAAA,CAAiBT,EAAE,CAAA,KAAM,MAAQ,EAAA;AACxC,QAAA,OAAAD,SAAA,GACHS,YAAYE,4BAA6B,CAAAV,EAAA,EAAID,SAAS,CACtD,GAAAS,WAAA,CAAYG,gBAAiB,CAAAX,EAAA,EAAIO,GAAG,CAAA,CAAA;AAC1C,OAAO,MAAA;AACE,QAAA,OAAAR,SAAA,GACHS,YAAYI,6BAA8B,CAAAZ,EAAA,EAAID,SAAS,CACvD,GAAAS,WAAA,CAAYK,iBAAkB,CAAAb,EAAA,EAAIO,GAAG,CAAA,CAAA;AAC3C,OAAA;AACF,KAAA;AACF,GACF,CAAA,CAAA;AAEO,EAAA,OAAAJ,UAAA,CAAA;AACT;;;;"}

package/lib/esm/components/ConfigProvider/index.js

@@ -0,0 +1,12 @@
+import { C as ConfigProvider } from '../../_chunks/Br6Ked0G.js';
+export { useThemeColor } from './hooks/themeToken/useThemeToken.js';
+import '../../_chunks/BHmvJnIm.js';
+import './hooks/ConfigCache/ConfigCache.js';
+import '@xhs/reds-token-next';
+import './hooks/ConfigContext/ConfigContext.js';
+import 'react';
+
+
+
+export { ConfigProvider as default };
+//# sourceMappingURL=index.js.map

package/lib/esm/components/ConfigProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/lib/esm/components/ConfigProvider/interface/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/lib/esm/components/ConfigProvider/interface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/esm/components/Popover/component.js

@@ -1,4 +1,4 @@
-import { _ as _objectSpread2 } from '../../_chunks/Bm4Re-8r.js';
+import { _ as _objectSpread2 } from '../../_chunks/BHmvJnIm.js';
 import React, { forwardRef } from 'react';
 import { Modal, Pressable, View } from 'react-native';
 

package/lib/esm/components/Popover/hook.js

@@ -1,4 +1,4 @@
-import { b as _objectWithoutProperties, _ as _objectSpread2 } from '../../_chunks/Bm4Re-8r.js';
+import { b as _objectWithoutProperties, _ as _objectSpread2 } from '../../_chunks/BHmvJnIm.js';
 import { useRef } from 'react';
 import { Platform } from 'react-native';
 import { useFloating as useFloating$1, shift, limitShift, flip, offset, arrow } from '@floating-ui/react-native';

package/lib/esm/components/Popover/index.js

@@ -1,4 +1,4 @@
-import { a as _slicedToArray, _ as _objectSpread2 } from '../../_chunks/Bm4Re-8r.js';
+import { a as _slicedToArray, _ as _objectSpread2 } from '../../_chunks/BHmvJnIm.js';
 import React, { useState, useMemo, useEffect, isValidElement, cloneElement } from 'react';
 import { TouchableWithoutFeedback, View, Text } from 'react-native';
 import { ModalWrapper, Arrow } from './component.js';
@@ -108,9 +108,9 @@ var index = (function (_ref) {
     })
   }, /* @__PURE__ */React.createElement(Text, {
     style: {
-      fontWeight: typography.Body.B2Loose.Weight,
-      fontSize: typography.Body.B2Loose.Size,
-      lineHeight: typography.Body.B2Loose.Line,
+      fontWeight: typography.B2LooseFontWeight,
+      fontSize: typography.B2LooseFontSize,
+      lineHeight: typography.B2LooseLineHeight,
       color: popoverStyle.color
     }
   }, content), /* @__PURE__ */React.createElement(Arrow, {

package/lib/esm/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useMemo, cloneElement, isValidElement, useEffect } from \"react\";\nimport { Text, View, TouchableWithoutFeedback } from \"react-native\";\nimport { RedsPopover } from \"./interface/index\";\nimport { ModalWrapper, Arrow } from \"./component\";\nimport { useFloating } from \"./hook\";\nimport { typography } from \"@xhs/reds-token-next\";\n\nexport default ({\n  mode = \"light\",\n  opacity = 0,\n  content,\n  children,\n  placement = \"top\",\n  closeOnClickAgain = true,\n  trigger = \"click\",\n  zIndex = 1000,\n  visible: defaultVisible = false,\n  onVisibleChange,\n}: RedsPopover) => {\n  const [visible, setVisible] = useState(defaultVisible);\n  const needModal = useMemo(() => opacity !== 0, [opacity]);\n  const {\n    setArrowRef,\n    setFloatingRef,\n    setReferenceRef,\n    setOffsetParentRef,\n    floatingStyles,\n    arrowStyles,\n    onReferenceLayout,\n    onFloatingLayout,\n  } = useFloating({\n    placement,\n    needModal,\n  });\n  useEffect(() => {\n    onVisibleChange?.(visible);\n  }, [visible]);\n\n  const popoverStyle = useMemo(() => {\n    return mode === \"light\"\n      ? {\n          backgroundColor: \"#303034FC\",\n          color: \"#FFFFFF\",\n        }\n      : {\n          backgroundColor: \"#FFFFFFFC\",\n          color: \"#000000\",\n        };\n  }, [mode]);\n\n  return (\n    <>\n      {React.Children.map(children, (child, index) => {\n        if (index === 0 && isValidElement(child)) {\n          return (\n            <TouchableWithoutFeedback\n              onPress={() => {\n                if (trigger === \"click\") {\n                  if (closeOnClickAgain) {\n                    setVisible(!visible);\n                  } else {\n                    setVisible(true);\n                  }\n                }\n              }}\n              onPressIn={() => {\n                trigger === \"touch\" && setVisible(true);\n              }}\n              onPressOut={() => {\n                trigger === \"touch\" && setVisible(false);\n              }}\n            >\n              {cloneElement<any>(child, {\n                ref: setReferenceRef,\n                collapsable: false,\n                onLayout: onReferenceLayout,\n              })}\n              {/* <Text>131</Text> */}\n            </TouchableWithoutFeedback>\n          );\n        }\n        return child;\n      })}\n      <ModalWrapper\n        needModal={needModal}\n        visible={visible}\n        ref={setOffsetParentRef}\n        setVisible={setVisible}\n        opacity={opacity}\n      >\n        {visible && (\n          <View\n            collapsable={false}\n            ref={setFloatingRef}\n            onLayout={onFloatingLayout}\n            style={{\n              ...floatingStyles,\n              backgroundColor: popoverStyle.backgroundColor,\n              paddingHorizontal: 12,\n              paddingVertical: 7,\n              maxWidth: 280,\n              borderRadius: 12,\n              zIndex,\n              shadowColor: \"#000000\",\n              shadowOffset: { width: 0, height: 1 },\n              shadowOpacity: 0.1,\n              shadowRadius: 4,\n              elevation: 2,\n            }}\n          >\n            <Text\n              style={{\n                fontWeight: typography.Body.B2Loose.Weight,\n                fontSize: typography.Body.B2Loose.Size,\n                lineHeight: typography.Body.B2Loose.Line,\n                color: popoverStyle.color,\n              }}\n            >\n              {content}\n            </Text>\n            <Arrow ref={setArrowRef} style={{ ...arrowStyles }} color={popoverStyle.backgroundColor}></Arrow>\n          </View>\n        )}\n      </ModalWrapper>\n    </>\n  );\n};\n"],"names":["_ref","_ref$mode","mode","_ref$opacity","opacity","content","children","_ref$placement","placement","_ref$closeOnClickAgai","closeOnClickAgain","_ref$trigger","trigger","_ref$zIndex","zIndex","_ref$visible","visible","defaultVisible","onVisibleChange","_useState","useState","_useState2","_slicedToArray","setVisible","needModal","useMemo","_useFloating","useFloating","setArrowRef","setFloatingRef","setReferenceRef","setOffsetParentRef","floatingStyles","arrowStyles","onReferenceLayout","onFloatingLayout","useEffect","popoverStyle","backgroundColor","color","React","Children","map","child","index","isValidElement","createElement","TouchableWithoutFeedback","onPress","onPressIn","onPressOut","cloneElement","ref","collapsable","onLayout","ModalWrapper","View","style","_objectSpread","paddingHorizontal","paddingVertical","maxWidth","borderRadius","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","Text","fontWeight","typography","Body","B2Loose","Weight","fontSize","Size","lineHeight","Line","Arrow"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useMemo, cloneElement, isValidElement, useEffect } from \"react\";\nimport { Text, View, TouchableWithoutFeedback } from \"react-native\";\nimport { RedsPopover } from \"./interface/index\";\nimport { ModalWrapper, Arrow } from \"./component\";\nimport { useFloating } from \"./hook\";\nimport { typography } from \"@xhs/reds-token-next\";\n\nexport default ({\n  mode = \"light\",\n  opacity = 0,\n  content,\n  children,\n  placement = \"top\",\n  closeOnClickAgain = true,\n  trigger = \"click\",\n  zIndex = 1000,\n  visible: defaultVisible = false,\n  onVisibleChange,\n}: RedsPopover) => {\n  const [visible, setVisible] = useState(defaultVisible);\n  const needModal = useMemo(() => opacity !== 0, [opacity]);\n  const {\n    setArrowRef,\n    setFloatingRef,\n    setReferenceRef,\n    setOffsetParentRef,\n    floatingStyles,\n    arrowStyles,\n    onReferenceLayout,\n    onFloatingLayout,\n  } = useFloating({\n    placement,\n    needModal,\n  });\n  useEffect(() => {\n    onVisibleChange?.(visible);\n  }, [visible]);\n\n  const popoverStyle = useMemo(() => {\n    return mode === \"light\"\n      ? {\n          backgroundColor: \"#303034FC\",\n          color: \"#FFFFFF\",\n        }\n      : {\n          backgroundColor: \"#FFFFFFFC\",\n          color: \"#000000\",\n        };\n  }, [mode]);\n\n  return (\n    <>\n      {React.Children.map(children, (child, index) => {\n        if (index === 0 && isValidElement(child)) {\n          return (\n            <TouchableWithoutFeedback\n              onPress={() => {\n                if (trigger === \"click\") {\n                  if (closeOnClickAgain) {\n                    setVisible(!visible);\n                  } else {\n                    setVisible(true);\n                  }\n                }\n              }}\n              onPressIn={() => {\n                trigger === \"touch\" && setVisible(true);\n              }}\n              onPressOut={() => {\n                trigger === \"touch\" && setVisible(false);\n              }}\n            >\n              {cloneElement<any>(child, {\n                ref: setReferenceRef,\n                collapsable: false,\n                onLayout: onReferenceLayout,\n              })}\n              {/* <Text>131</Text> */}\n            </TouchableWithoutFeedback>\n          );\n        }\n        return child;\n      })}\n      <ModalWrapper\n        needModal={needModal}\n        visible={visible}\n        ref={setOffsetParentRef}\n        setVisible={setVisible}\n        opacity={opacity}\n      >\n        {visible && (\n          <View\n            collapsable={false}\n            ref={setFloatingRef}\n            onLayout={onFloatingLayout}\n            style={{\n              ...floatingStyles,\n              backgroundColor: popoverStyle.backgroundColor,\n              paddingHorizontal: 12,\n              paddingVertical: 7,\n              maxWidth: 280,\n              borderRadius: 12,\n              zIndex,\n              shadowColor: \"#000000\",\n              shadowOffset: { width: 0, height: 1 },\n              shadowOpacity: 0.1,\n              shadowRadius: 4,\n              elevation: 2,\n            }}\n          >\n            <Text\n              style={{\n                fontWeight: typography.B2LooseFontWeight,\n                fontSize: typography.B2LooseFontSize,\n                lineHeight: typography.B2LooseLineHeight,\n                color: popoverStyle.color,\n              }}\n            >\n              {content}\n            </Text>\n            <Arrow ref={setArrowRef} style={{ ...arrowStyles }} color={popoverStyle.backgroundColor}></Arrow>\n          </View>\n        )}\n      </ModalWrapper>\n    </>\n  );\n};\n"],"names":["_ref","_ref$mode","mode","_ref$opacity","opacity","content","children","_ref$placement","placement","_ref$closeOnClickAgai","closeOnClickAgain","_ref$trigger","trigger","_ref$zIndex","zIndex","_ref$visible","visible","defaultVisible","onVisibleChange","_useState","useState","_useState2","_slicedToArray","setVisible","needModal","useMemo","_useFloating","useFloating","setArrowRef","setFloatingRef","setReferenceRef","setOffsetParentRef","floatingStyles","arrowStyles","onReferenceLayout","onFloatingLayout","useEffect","popoverStyle","backgroundColor","color","React","Children","map","child","index","isValidElement","createElement","TouchableWithoutFeedback","onPress","onPressIn","onPressOut","cloneElement","ref","collapsable","onLayout","ModalWrapper","View","style","_objectSpread","paddingHorizontal","paddingVertical","maxWidth","borderRadius","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","Text","fontWeight","typography","B2LooseFontWeight","fontSize","B2LooseFontSize","lineHeight","B2LooseLineHeight","Arrow"],"mappings":"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"}

package/lib/esm/components/Switch/index.js

@@ -1,17 +1,17 @@
-import { a as _slicedToArray } from '../../_chunks/Bm4Re-8r.js';
+import { a as _slicedToArray } from '../../_chunks/BHmvJnIm.js';
 import React, { useState, useRef, useMemo, useEffect } from 'react';
 import { StyleSheet, Animated, TouchableWithoutFeedback, View } from 'react-native';
 import { defaultProps } from './interface/index.js';
-import { color } from '@xhs/reds-token-next';
+import { alwaysColor } from '@xhs/reds-token-next';
 
 var Switch = function Switch(_ref) {
-  var cValue = _ref.value,
+  var isOn = _ref.value,
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange,
     onClick = _ref.onClick,
     trackOnColor = _ref.trackOnColor,
     trackOffColor = _ref.trackOffColor;
-  var isControlled = cValue !== void 0;
+  var isControlled = isOn !== void 0;
   var _useState = useState(defaultValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -24,14 +24,16 @@ var Switch = function Switch(_ref) {
     });
   }, []);
   useEffect(function () {
-    isControlled && setValue(cValue);
     onChange === null || onChange === void 0 || onChange(!!value);
     Animated.timing(animatedValue, {
       toValue: value ? 18 : 2,
       duration: 200,
       useNativeDriver: true
     }).start();
-  }, [value, cValue]);
+  }, [value]);
+  useEffect(function () {
+    isControlled && setValue(isOn);
+  }, [isOn]);
   var toggleSwitch = function toggleSwitch(e) {
     onClick === null || onClick === void 0 || onClick(e);
     !isControlled && setValue(function (v) {
@@ -67,7 +69,7 @@ var styles = StyleSheet.create({
     width: 20,
     height: 20,
     borderRadius: 10,
-    backgroundColor: color.always.Neutral.White,
+    backgroundColor: alwaysColor.White,
     justifyContent: "center",
     alignItems: "center",
     position: "absolute",

package/lib/esm/components/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Switch/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsSwitch, defaultProps } from \"./interface/index\";\nimport { color } from \"@xhs/reds-token-next\";\n\nconst Switch = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch) => {\n  const isControlled = cValue !== undefined;\n  const [value, setValue] = useState(defaultValue);\n\n  const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;\n\n  const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);\n\n  useEffect(() => {\n    isControlled && setValue(cValue);\n    onChange?.(!!value);\n    Animated.timing(animatedValue, {\n      toValue: value ? 18 : 2,\n      duration: 200,\n      useNativeDriver: true,\n    }).start();\n  }, [value, cValue]);\n\n  const toggleSwitch = (e: GestureResponderEvent) => {\n    onClick?.(e);\n    !isControlled && setValue((v) => !v);\n  };\n\n  return (\n    <TouchableWithoutFeedback onPress={(e) => toggleSwitch(e)}>\n      <View style={[styles.switchContainer, { backgroundColor: value ? trackOnColor : trackOffColor }]}>\n        <Animated.View style={[styles.thumb, { transform: [{ translateX: thumbTranslateX }] }]}></Animated.View>\n      </View>\n    </TouchableWithoutFeedback>\n  );\n};\n\nSwitch.defaultProps = defaultProps;\n\nconst styles = StyleSheet.create({\n  switchContainer: {\n    width: 40,\n    height: 24,\n    borderRadius: 15,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  thumb: {\n    width: 20,\n    height: 20,\n    borderRadius: 10,\n    backgroundColor: color.always.Neutral.White,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    position: \"absolute\",\n    left: 0,\n  },\n});\n\nexport default Switch;\n"],"names":["Switch","_ref","cValue","value","defaultValue","onChange","onClick","trackOnColor","trackOffColor","isControlled","_useState","useState","_useState2","_slicedToArray","setValue","animatedValue","useRef","Animated","Value","current","thumbTranslateX","useMemo","interpolate","inputRange","outputRange","useEffect","timing","toValue","duration","useNativeDriver","start","toggleSwitch","e","v","TouchableWithoutFeedback","onPress","React","createElement","View","style","styles","switchContainer","backgroundColor","thumb","transform","translateX","defaultProps","StyleSheet","create","width","height","borderRadius","justifyContent","alignItems","color","always","Neutral","White","position","left"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Switch/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsSwitch, defaultProps } from \"./interface/index\";\nimport { alwaysColor } from \"@xhs/reds-token-next\";\n\nconst Switch = ({ value: isOn, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch) => {\n  const isControlled = isOn !== undefined;\n  const [value, setValue] = useState(defaultValue);\n\n  const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;\n\n  const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);\n\n  useEffect(() => {\n    onChange?.(!!value);\n    Animated.timing(animatedValue, {\n      toValue: value ? 18 : 2,\n      duration: 200,\n      useNativeDriver: true,\n    }).start();\n  }, [value]);\n\n  useEffect(() => {\n    isControlled && setValue(isOn);\n  }, [isOn]);\n\n  const toggleSwitch = (e: GestureResponderEvent) => {\n    onClick?.(e);\n    !isControlled && setValue((v) => !v);\n  };\n\n  return (\n    <TouchableWithoutFeedback onPress={(e) => toggleSwitch(e)}>\n      <View style={[styles.switchContainer, { backgroundColor: value ? trackOnColor : trackOffColor }]}>\n        <Animated.View style={[styles.thumb, { transform: [{ translateX: thumbTranslateX }] }]}></Animated.View>\n      </View>\n    </TouchableWithoutFeedback>\n  );\n};\n\nSwitch.defaultProps = defaultProps;\n\nconst styles = StyleSheet.create({\n  switchContainer: {\n    width: 40,\n    height: 24,\n    borderRadius: 15,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  thumb: {\n    width: 20,\n    height: 20,\n    borderRadius: 10,\n    backgroundColor: alwaysColor.White,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    position: \"absolute\",\n    left: 0,\n  },\n});\n\nexport default Switch;\n"],"names":["Switch","_ref","isOn","value","defaultValue","onChange","onClick","trackOnColor","trackOffColor","isControlled","_useState","useState","_useState2","_slicedToArray","setValue","animatedValue","useRef","Animated","Value","current","thumbTranslateX","useMemo","interpolate","inputRange","outputRange","useEffect","timing","toValue","duration","useNativeDriver","start","toggleSwitch","e","v","TouchableWithoutFeedback","onPress","React","createElement","View","style","styles","switchContainer","backgroundColor","thumb","transform","translateX","defaultProps","StyleSheet","create","width","height","borderRadius","justifyContent","alignItems","alwaysColor","White","position","left"],"mappings":"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"}

package/lib/esm/components/Switch/interface/index.js

@@ -1,12 +1,12 @@
-import { color } from '@xhs/reds-token-next';
+import { lightColor } from '@xhs/reds-token-next';
 
 var defaultProps = {
   defaultValue: false,
   disabled: false,
   onClick: function onClick(event) {},
   onChange: function onChange(value) {},
-  trackOnColor: color.light.Primary.Primary,
-  trackOffColor: color.light.Fills.Fill2
+  trackOnColor: lightColor.Primary,
+  trackOffColor: lightColor.Fill2
 };
 
 export { defaultProps };

package/lib/esm/components/Switch/interface/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Switch/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { color } from \"@xhs/reds-token-next\";\n\nexport interface RedsSwitch {\n  value?: boolean;\n  defaultValue?: boolean;\n  disabled?: boolean;\n  onClick?: (event: GestureResponderEvent) => void;\n  onChange?: (value: boolean) => void;\n  trackOnColor?: string;\n  trackOffColor?: string;\n}\n\nexport const defaultProps: RedsSwitch = {\n  defaultValue: false,\n  disabled: false,\n  onClick: (event: GestureResponderEvent) => {},\n  onChange: (value: boolean) => {},\n  trackOnColor: color.light.Primary.Primary,\n  trackOffColor: color.light.Fills.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","onClick","event","onChange","value","trackOnColor","color","light","Primary","trackOffColor","Fills","Fill2"],"mappings":";;AAaO,IAAMA,YAA2B,GAAA;AACtCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;AACVC,EAAAA,OAAA,EAAS,SAAAA,OAAAA,CAACC,KAAiC,EAAA,EAAC;AAC5CC,EAAAA,QAAA,EAAU,SAAAA,QAAAA,CAACC,KAAmB,EAAA,EAAC;AAC/BC,EAAAA,YAAA,EAAcC,KAAM,CAAAC,KAAA,CAAMC,OAAQ,CAAAA,OAAA;AAClCC,EAAAA,aAAA,EAAeH,KAAM,CAAAC,KAAA,CAAMG,KAAM,CAAAC,KAAAA;AACnC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Switch/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\n\nexport interface RedsSwitch {\n  value?: boolean;\n  defaultValue?: boolean;\n  disabled?: boolean;\n  onClick?: (event: GestureResponderEvent) => void;\n  onChange?: (value: boolean) => void;\n  trackOnColor?: string;\n  trackOffColor?: string;\n}\n\nexport const defaultProps: RedsSwitch = {\n  defaultValue: false,\n  disabled: false,\n  onClick: (event: GestureResponderEvent) => {},\n  onChange: (value: boolean) => {},\n  trackOnColor: lightColor.Primary,\n  trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","onClick","event","onChange","value","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;AAaO,IAAMA,YAA2B,GAAA;AACtCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;AACVC,EAAAA,OAAA,EAAS,SAAAA,OAAAA,CAACC,KAAiC,EAAA,EAAC;AAC5CC,EAAAA,QAAA,EAAU,SAAAA,QAAAA,CAACC,KAAmB,EAAA,EAAC;EAC/BC,cAAcC,UAAW,CAAAC,OAAA;EACzBC,eAAeF,UAAW,CAAAG,KAAAA;AAC5B;;;;"}

package/lib/esm/index.js

@@ -1,7 +1,9 @@
 export { default as Button } from './components/Button/index.js';
 export { default as Popover } from './components/Popover/index.js';
 export { default as Switch } from './components/Switch/index.js';
-import './_chunks/Bm4Re-8r.js';
+export { C as ConfigProvider } from './_chunks/Br6Ked0G.js';
+export { useThemeColor } from './components/ConfigProvider/hooks/themeToken/useThemeToken.js';
+import './_chunks/BHmvJnIm.js';
 import 'react';
 import 'react-native';
 import './components/Popover/component.js';
@@ -9,4 +11,6 @@ import './components/Popover/hook.js';
 import '@floating-ui/react-native';
 import '@xhs/reds-token-next';
 import './components/Switch/interface/index.js';
+import './components/ConfigProvider/hooks/ConfigCache/ConfigCache.js';
+import './components/ConfigProvider/hooks/ConfigContext/ConfigContext.js';
 //# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/lib/types/src/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { View } from "react-native";
+declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<View>>;
+export default _default;

package/lib/types/src/components/Button/interface/index.d.ts

@@ -0,0 +1,11 @@
+import { GestureResponderEvent } from "react-native";
+export interface RedsButton {
+    value?: boolean;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    onClick?: (event: GestureResponderEvent) => void;
+    onChange?: (value: boolean) => void;
+    trackOnColor?: string;
+    trackOffColor?: string;
+}
+export declare const defaultProps: RedsButton;

package/lib/types/src/components/ConfigProvider/ConfigProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ConfigProviderProps } from "./interface";
+declare const ConfigProvider: (props: ConfigProviderProps) => import("react").JSX.Element;
+export default ConfigProvider;

package/lib/types/src/components/ConfigProvider/hooks/ConfigCache/ConfigCache.d.ts

@@ -0,0 +1,22 @@
+import { IConfigCache, Component, LightToken, DarkToken } from "./interface";
+declare class ConfigCache {
+    configCache: Record<string, IConfigCache>;
+    multipleConfigurations: boolean;
+    constructor({ id, themeCache }: IConfigCache);
+    addNewConfigCache({ id, themeCache, parentId }: IConfigCache): void;
+    updateColorMode({ id, colorMode }: {
+        id: string;
+        colorMode: "light" | "dark";
+    }): void;
+    getColorModeById(id: string): import("./interface").ColorMode;
+    getTokenById(id: string, tokenType: "lightColor" | "darkColor" | "alwaysColor", key: LightToken | DarkToken): any;
+    getLightTokenById(id: string, key: LightToken | DarkToken): any;
+    getDarkTokenById(id: string, key: LightToken | DarkToken): any;
+    getAlwaysTokenById(id: string, key: LightToken | DarkToken): any;
+    getTokenByIdAndComponent(id: string, tokenType: "lightColor" | "darkColor" | "alwaysColor", component: Component): any;
+    getLightTokenByIdAndComponent(id: string, component: Component): any;
+    getDarkTokenByIdAndComponent(id: string, component: Component): any;
+    getAlwaysTokenByIdAndComponent(id: string, component: Component): any;
+}
+export declare const configCache: ConfigCache;
+export {};

package/lib/types/src/components/ConfigProvider/hooks/ConfigCache/index.d.ts

@@ -0,0 +1 @@
+export * from "./ConfigCache";

package/lib/types/src/components/ConfigProvider/hooks/ConfigCache/interface.d.ts

@@ -0,0 +1,36 @@
+import { lightColor, darkColor, typography } from "@xhs/reds-token-next";
+type ValueOf<T> = T[keyof T];
+export type LightToken = keyof typeof lightColor;
+export type DarkToken = keyof typeof darkColor;
+export type TypographyToken = keyof typeof typography;
+export type ThemeColor = {
+    [key in LightToken | DarkToken]: ValueOf<typeof lightColor | typeof darkColor>;
+};
+export type ColorMode = "light" | "dark";
+export type Component = "Button" | "Popover";
+export type ComponentColor = {
+    [key in Component]: ThemeColor;
+};
+type ComponentsToken = {
+    [K in Component]?: {
+        lightColor?: Record<string, string>;
+        darkColor?: Record<string, string>;
+        alwaysColor?: Record<string, string>;
+    };
+};
+export interface IThemeCache {
+    token?: {
+        lightColor: Record<string, string>;
+        darkColor: Record<string, string>;
+        alwaysColor: Record<string, string>;
+        components?: ComponentsToken;
+    };
+    colorMode: ColorMode;
+    inherit?: boolean;
+}
+export interface IConfigCache {
+    id: string;
+    themeCache: IThemeCache;
+    parentId: string;
+}
+export {};

package/lib/types/src/components/ConfigProvider/hooks/ConfigContext/ConfigContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface IConfigProviderContext {
+    id: string;
+}
+export declare const ConfigProviderContext: import("react").Context<IConfigProviderContext>;

package/lib/types/src/components/ConfigProvider/hooks/themeToken/useThemeToken.d.ts

@@ -0,0 +1,8 @@
+import { ThemeColor, ColorMode, Component } from "../ConfigCache/interface";
+export interface IThemeInstance {
+    colorMode: ColorMode;
+}
+export interface MyProxyConstructor {
+    new <T, H extends Record<string, unknown>>(target: T, handler: ProxyHandler<H>): H;
+}
+export declare const useThemeColor: (component?: Component) => ThemeColor;

package/lib/types/src/components/ConfigProvider/index.d.ts

@@ -0,0 +1,3 @@
+import * as ConfigProvider from "./ConfigProvider";
+export { useThemeColor } from "./hooks/themeToken/useThemeToken";
+export default ConfigProvider;

package/lib/types/src/components/ConfigProvider/interface/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+type ColorMode = "light" | "dark";
+type Component = "Button" | "Popover";
+type ComponentsToken = {
+    [K in Component]?: {
+        lightColor?: Record<string, string>;
+        darkColor?: Record<string, string>;
+        alwaysColor?: Record<string, string>;
+    };
+};
+interface IThemeConfig {
+    token?: {
+        lightColor?: Record<string, string>;
+        darkColor?: Record<string, string>;
+        alwaysColor?: Record<string, string>;
+        components?: ComponentsToken;
+    };
+    inherit?: boolean;
+    colorMode?: ColorMode;
+}
+export interface ConfigProviderProps {
+    id?: string;
+    children: React.ReactNode;
+    theme?: IThemeConfig;
+    parentId?: string;
+}
+export {};

package/lib/types/src/components/Popover/component.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import { Modal, View } from "react-native";
+export declare const ModalWrapper: React.ForwardRefExoticComponent<{
+    needModal?: boolean | undefined;
+    visible: boolean;
+    children: ReactNode;
+    setVisible: (value: boolean) => any;
+    opacity?: number | undefined;
+} & React.RefAttributes<Modal>>;
+export declare const Arrow: React.ForwardRefExoticComponent<{
+    style: any;
+    color: string;
+} & React.RefAttributes<View>>;

package/lib/types/src/components/Popover/hook.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+import type { LayoutChangeEvent } from "react-native";
+export declare const useFloating: ({ placement, needModal }: {
+    placement: "top" | "bottom";
+    needModal: boolean;
+}) => {
+    update: () => void;
+    scrollProps: {
+        onScroll: (event: {
+            nativeEvent: {
+                contentOffset: {
+                    x: number;
+                    y: number;
+                };
+            };
+        }) => void;
+        scrollEventThrottle: 16;
+    };
+    placement: import("@floating-ui/react-native").Placement;
+    strategy: import("@floating-ui/react-native").Strategy;
+    x: number;
+    y: number;
+    setFloatingRef: <T>(ref: T) => void;
+    setReferenceRef: <T_1>(ref: T_1) => void;
+    setOffsetParentRef: import("react").MutableRefObject<any>;
+    setArrowRef: import("react").MutableRefObject<null>;
+    onReferenceLayout: (event: {
+        nativeEvent: {
+            layout: {
+                x: any;
+                y: any;
+            };
+        };
+    }) => void;
+    onFloatingLayout: (event: LayoutChangeEvent) => void;
+    refs: {
+        reference: import("react").MutableRefObject<any>;
+        floating: import("react").MutableRefObject<any>;
+        offsetParent: import("react").MutableRefObject<any>;
+        setReference: (node: any) => void;
+        setFloating: (node: any) => void;
+        setOffsetParent: (node: any) => void;
+    };
+    elements: {
+        reference: any;
+        floating: any;
+        offsetParent: any;
+    };
+    middlewareData: import("@floating-ui/react-native").MiddlewareData;
+    floatingStyles: {
+        position: "absolute";
+        top: number;
+        left: number;
+    } | {
+        opacity: number;
+        position: "absolute";
+        top: number;
+        left: number;
+    };
+    arrowStyles: {
+        position: string;
+        left: number | null;
+        top: number;
+        transform: string;
+    };
+};

package/lib/types/src/components/Popover/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RedsPopover } from "./interface/index";
+declare const _default: ({ mode, opacity, content, children, placement, closeOnClickAgain, trigger, zIndex, visible: defaultVisible, onVisibleChange, }: RedsPopover) => React.JSX.Element;
+export default _default;

package/lib/types/src/components/Popover/interface/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export interface RedsPopover {
+    visible?: boolean;
+    placement?: "top" | "bottom";
+    content?: string;
+    opacity?: number;
+    mode?: "light" | "dark";
+    children?: ReactNode;
+    closeOnClickAgain?: boolean;
+    trigger?: "click" | "touch";
+    zIndex?: number;
+    onVisibleChange?: (v: boolean) => void;
+}

package/lib/types/src/components/Popover/manifest.d.ts

@@ -0,0 +1,3 @@
+interface RedPopoverPorps {
+    visable: boolean;
+}

package/lib/types/src/components/Switch/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { RedsSwitch } from "./interface/index";
+declare const Switch: {
+    ({ value: isOn, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch): React.JSX.Element;
+    defaultProps: RedsSwitch;
+};
+export default Switch;

package/lib/types/src/components/Switch/interface/index.d.ts

@@ -0,0 +1,11 @@
+import { GestureResponderEvent } from "react-native";
+export interface RedsSwitch {
+    value?: boolean;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    onClick?: (event: GestureResponderEvent) => void;
+    onChange?: (value: boolean) => void;
+    trackOnColor?: string;
+    trackOffColor?: string;
+}
+export declare const defaultProps: RedsSwitch;

package/lib/types/src/index.d.ts

@@ -0,0 +1,5 @@
+import Button from "./components/Button";
+import Popover from "./components/Popover";
+import Switch from "./components/Switch";
+import ConfigProvider, { useThemeColor } from "./components/ConfigProvider";
+export { Button, Popover, Switch, ConfigProvider, useThemeColor };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.0.2-beta20240708190837",
+  "version": "0.0.2",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
     "@floating-ui/react-native": "~0.10.6",
     "dayjs": "^1.10.7",
-    "@xhs/reds-token-next": "0.0.1"
+    "@xhs/reds-token-next": "0.0.2"
   },
   "peerDependencies": {
     "react": "~18.2.0",
@@ -27,7 +27,11 @@
     "test": "vitest --coverage",
     "bench": "vitest bench --outputJson benchmarks/out.json",
     "clear": "rm -rf ./node_modules && rm -rf ./lib",
-    "build": "rm -rf ./lib/* &&  rollup -c",
-    "watch": "rollup -c -w"
+    "build": "rm -rf ./lib/* &&  rollup -c  && npm run build:types",
+    "build:types": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json --outDir lib/types",
+    "watch": "concurrently -c 'auto' \"npm:watch:*\" ",
+    "watch:component": "rollup -c -w",
+    "watch:types": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json --outDir lib/types -w",
+    "watch:mainfest": "pnpm --filter @xhs/reds-common run watch:rn"
   }
 }