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

package/src/components/ConfigProvider/hooks/ConfigCache/ConfigCache.ts

@@ -0,0 +1,115 @@
+import { alwaysColor, lightColor, darkColor } from "@xhs/reds-token-next";
+import { IConfigCache, Component, LightToken, DarkToken } from "./interface";
+
+class ConfigCache {
+  public configCache: Record<string, IConfigCache> = {};
+  public multipleConfigurations: boolean = false;
+
+  constructor({ id, themeCache }: IConfigCache) {
+    const rootThemeCache = {
+      colorMode: themeCache.colorMode,
+      token: {
+        lightColor: {
+          ...lightColor,
+        },
+        darkColor: {
+          ...darkColor,
+        },
+        alwaysColor: {
+          ...alwaysColor,
+        },
+      },
+    };
+    this.addNewConfigCache({ id, themeCache: rootThemeCache, parentId: id });
+  }
+
+  addNewConfigCache({ id, themeCache, parentId }: IConfigCache) {
+    if (Object.keys(this.configCache).includes(id)) {
+      this.configCache[id].parentId = parentId;
+      this.configCache[id].themeCache = {
+        colorMode: themeCache.colorMode,
+        token: {
+          lightColor: {
+            ...this.configCache[parentId].themeCache.token?.lightColor,
+            ...themeCache.token?.lightColor,
+          },
+          darkColor: {
+            ...this.configCache[parentId].themeCache.token?.darkColor,
+            ...themeCache.token?.darkColor,
+          },
+          alwaysColor: {
+            ...this.configCache[parentId].themeCache.token?.alwaysColor,
+            ...themeCache.token?.alwaysColor,
+          },
+          components: {
+            ...this.configCache[parentId].themeCache.token?.components,
+            ...themeCache.token?.components,
+          },
+        },
+      };
+    } else {
+      this.configCache[id] = { id, themeCache, parentId };
+      if (Object.keys(this.configCache).length > 1) {
+        this.multipleConfigurations = true;
+      }
+    }
+  }
+
+  updateColorMode({ id, colorMode }: { id: string; colorMode: "light" | "dark" }) {
+    this.configCache[id].themeCache.colorMode = colorMode;
+  }
+
+  getColorModeById(id: string) {
+    return this.configCache[id]?.themeCache?.colorMode;
+  }
+
+  getTokenById(id: string, tokenType: "lightColor" | "darkColor" | "alwaysColor", key: LightToken | DarkToken): any {
+    if (this.configCache[id]?.id === id) {
+      return this.configCache[id].themeCache.token?.[tokenType][key];
+    } else {
+      return this.getTokenById(this.configCache[id]?.parentId || "root", tokenType, key);
+    }
+  }
+
+  getLightTokenById(id: string, key: LightToken | DarkToken) {
+    return this.getTokenById(id, "lightColor", key);
+  }
+
+  getDarkTokenById(id: string, key: LightToken | DarkToken) {
+    return this.getTokenById(id, "darkColor", key);
+  }
+
+  getAlwaysTokenById(id: string, key: LightToken | DarkToken) {
+    return this.getTokenById(id, "alwaysColor", key);
+  }
+
+  getTokenByIdAndComponent(
+    id: string,
+    tokenType: "lightColor" | "darkColor" | "alwaysColor",
+    component: Component,
+  ): any {
+    if (this.configCache[id]?.id === id) {
+      const componentToken = {
+        ...this.configCache[id].themeCache.token?.[tokenType],
+        ...this.configCache[id].themeCache.token?.components?.[component]?.[tokenType],
+      };
+      return componentToken;
+    } else {
+      return this.getTokenByIdAndComponent(this.configCache[id]?.parentId || "root", tokenType, component);
+    }
+  }
+
+  getLightTokenByIdAndComponent(id: string, component: Component) {
+    return this.getTokenByIdAndComponent(id, "lightColor", component);
+  }
+
+  getDarkTokenByIdAndComponent(id: string, component: Component) {
+    return this.getTokenByIdAndComponent(id, "darkColor", component);
+  }
+
+  getAlwaysTokenByIdAndComponent(id: string, component: Component) {
+    return this.getTokenByIdAndComponent(id, "alwaysColor", component);
+  }
+}
+
+export const configCache = new ConfigCache({ id: "root", themeCache: { colorMode: "light" }, parentId: "root" });

package/src/components/ConfigProvider/hooks/ConfigCache/index.ts

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

package/src/components/ConfigProvider/hooks/ConfigCache/interface.ts

@@ -0,0 +1,38 @@
+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;
+}

package/src/components/ConfigProvider/hooks/ConfigContext/ConfigContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+export interface IConfigProviderContext {
+  id: string;
+}
+
+export const ConfigProviderContext = createContext<IConfigProviderContext>({
+  id: "root",
+});

package/src/components/ConfigProvider/hooks/themeToken/useThemeToken.ts

@@ -0,0 +1,33 @@
+import { useContext } from "react";
+import { configCache } from "../ConfigCache";
+import { ConfigProviderContext } from "../ConfigContext/ConfigContext";
+import { ThemeColor, ColorMode, LightToken, DarkToken, 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 const useThemeColor = (component?: Component) => {
+  const id = useContext(ConfigProviderContext).id;
+  const themeColor: ThemeColor = new (Proxy as MyProxyConstructor)(
+    {},
+    {
+      get(this: IThemeInstance, _, key: LightToken | DarkToken) {
+        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;
+};

package/src/components/ConfigProvider/index.ts

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

package/src/components/ConfigProvider/interface/index.ts

@@ -0,0 +1,28 @@
+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;
+}

package/src/components/ConfigProvider/test/index.bench.tsx

@@ -0,0 +1,18 @@
+import { describe, it, expect } from "vitest";
+import { render, fireEvent, userEvent } from "@testing-library/react-native";
+import "@testing-library/react-native/extend-expect";
+import { Pressable, Text, View } from "react-native";
+import ConfigProvider from "../index";
+
+describe("ConfigProvider", () => {
+  it(":base", async () => {
+    let isOn = false;
+    const wrapper = render(<ConfigProvider onChange={(v) => (isOn = v)}></ConfigProvider>);
+    expect(wrapper.UNSAFE_root.props.defaultValue).toBe(false);
+    await fireEvent(wrapper.UNSAFE_root.children[0], "press");
+    expect(isOn).toBe(true);
+
+    await fireEvent(wrapper.UNSAFE_root.children[0], "press");
+    expect(isOn).toBe(false);
+  });
+});

package/src/components/ConfigProvider/test/index.test.tsx

@@ -0,0 +1,9 @@
+import { describe, it, expect } from "vitest";
+import { render, fireEvent, userEvent } from "@testing-library/react-native";
+import "@testing-library/react-native/extend-expect";
+import { Pressable, Text, View } from "react-native";
+import ConfigProvider from "../index";
+
+describe("ConfigProvider", () => {
+  it(":base", async () => {});
+});

package/src/components/Popover/demo/{base.jsx → index.tsx}

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect, useState, forwardRef } from "react";
 import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
 import { Popover, Button } from "@xhs/reds-rn-next";
 
@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
     backgroundColor: "blue",
   },
 });
-const Br = (props) => <View style={{ height: props.height || 20 }}></View>;
+const Br = (props: { height?: any }) => <View style={{ height: props.height || 20 }}></View>;
 
 export default function App() {
   const placementList = ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"];

package/src/components/Popover/doc/index.mdx

@@ -1,25 +1,31 @@
-import BaseDemo from "!!raw-loader!../demo/base.jsx";
+import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ## 类型
 
 ::BaseDemo::
 
+### 类型
+
+::BaseDemo::
+
 ## API
 
 ### Props
-| 属性 | 描述 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| visible | 是否显示气泡 | boolean | false |
-| placement | 气泡方向 | "top" | "bottom" | top |
-| content | 弹出内容 | string |  |
-| opacity | 遮罩透明度 | number | 0 |
-| mode | 主题色 | "light" | "dark" | light |
-| trigger | 触发方式 | "click" | "touch" | click |
-| zIndex | 层级 | number | 1000 |
-| closeOnClickAgain | 再次点击关闭 | boolean | true |
-| children | popover 作用的目标节点 | ReactNode |  |
+
+| 属性                 | 描述                   | 类型                   | 默认值 |
+| -------------------- | ---------------------- | ---------------------- | ------ |
+| visible              | 是否显示气泡           | boolean                | false  |
+| placement            | 气泡方向               | "top" | "bottom"  | top    |
+| content              | 弹出内容               | string                 |        |
+| opacity              | 遮罩透明度             | number                 | 0      |
+| mode                 | 主题色                 | "light" | "dark"  | light  |
+| trigger              | 触发方式               | "click" | "touch" | click  |
+| z-index              | 层级                   | number                 | 1000   |
+| close-on-click-again | 再次点击关闭           | boolean                | true   |
+| children             | popover 作用的目标节点 | ReactNode              |        |
 
 ### Events
-| 事件 | 描述 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| onClickMask | 点击遮罩层时触发 | (value: Event) => void |  |
+
+| 事件       | 描述             | 类型                   | 默认值 |
+| ---------- | ---------------- | ---------------------- | ------ |
+| click-mask | 点击遮罩层时触发 | (value: Event) => void |        |

package/src/components/Popover/index.tsx

@@ -110,9 +110,9 @@ export default ({
           >
             <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,
               }}
             >

package/src/components/Switch/demo/{base.jsx → index.tsx}

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
-import { Switch, Button } from "@xhs/reds-rn-next";
+import { Switch } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
   container: {
@@ -26,7 +26,10 @@ export default function App() {
   const [value, setValue] = useState(false);
   const [valueStr, setValueStr] = useState(value.toString());
   const onClick = (e) => setValue((v) => !v);
-  const onChange = (v) => setValueStr(v.toString());
+  const onChange = (v) => {
+    console.log(v);
+    setValueStr(v.toString());
+  };
   return (
     <View style={styles.container}>
       <Desc>默认用法</Desc>
@@ -37,14 +40,14 @@ export default function App() {
       <Switch defaultValue={true}></Switch>
       <Br />
 
+      <Desc>修改开关颜色</Desc>
+      <Switch trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></Switch>
+      <Br />
+
       <Desc>受控用法</Desc>
       <Text>当前值:{valueStr}</Text>
       <Switch value={value} onClick={onClick} onChange={onChange}></Switch>
       <Br />
-
-      <Desc>修改开关颜色</Desc>
-      <Switch trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></Switch>
-      <Br />
     </View>
   );
 }

package/src/components/Switch/doc/index.mdx

@@ -1,4 +1,4 @@
-import BaseDemo from "!!raw-loader!../demo/base.jsx";
+import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ## 类型
 
@@ -7,16 +7,18 @@ import BaseDemo from "!!raw-loader!../demo/base.jsx";
 ## API
 
 ### Props
-| 属性 | 描述 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value | 当前的状态 | boolean |  |
-| defaultValue | 默认状态 | boolean | false |
-| disabled | 是否显示气泡 | boolean | false |
-| trackOnColor | 开关开启时的颜色 | string | rgba(255, 36, 66, 1) |
-| trackOffColor | 开关关闭时的颜色 | string | rgba(48, 48, 52, 0.1) |
+
+| 属性            | 描述             | 类型    | 默认值                |
+| --------------- | ---------------- | ------- | --------------------- |
+| value           | 当前的状态       | boolean |                       |
+| default-value   | 默认状态         | boolean | false                 |
+| disabled        | 是否显示气泡     | boolean | false                 |
+| track-on-color  | 开关开启时的颜色 | string  | rgba(255, 36, 66, 1)  |
+| track-off-color | 开关关闭时的颜色 | string  | rgba(48, 48, 52, 0.1) |
 
 ### Events
-| 事件 | 描述 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| onChange | 当值发生变化时触发 | (value: boolean) => void |  |
-| onClick | 被点击时触发 | (value: Event) => void |  |
+
+| 事件   | 描述               | 类型                     | 默认值 |
+| ------ | ------------------ | ------------------------ | ------ |
+| change | 当值发生变化时触发 | (value: boolean) => void |        |
+| click  | 被点击时触发       | (value: Event) => void   |        |

package/src/components/Switch/index.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useRef, useEffect, useMemo } from "react";
 import { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from "react-native";
 import { RedsSwitch, defaultProps } from "./interface/index";
-import { color } from "@xhs/reds-token-next";
+import { alwaysColor } from "@xhs/reds-token-next";
 
-const Switch = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch) => {
-  const isControlled = cValue !== undefined;
+const Switch = ({ value: isOn, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch) => {
+  const isControlled = isOn !== undefined;
   const [value, setValue] = useState(defaultValue);
 
   const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;
@@ -12,14 +12,17 @@ const Switch = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor,
   const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);
 
   useEffect(() => {
-    isControlled && setValue(cValue);
     onChange?.(!!value);
     Animated.timing(animatedValue, {
       toValue: value ? 18 : 2,
       duration: 200,
       useNativeDriver: true,
     }).start();
-  }, [value, cValue]);
+  }, [value]);
+
+  useEffect(() => {
+    isControlled && setValue(isOn);
+  }, [isOn]);
 
   const toggleSwitch = (e: GestureResponderEvent) => {
     onClick?.(e);
@@ -49,7 +52,7 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20,
     borderRadius: 10,
-    backgroundColor: color.always.Neutral.White,
+    backgroundColor: alwaysColor.White,
     justifyContent: "center",
     alignItems: "center",
     position: "absolute",

package/src/components/Switch/interface/index.ts

@@ -1,5 +1,5 @@
 import { GestureResponderEvent } from "react-native";
-import { color } from "@xhs/reds-token-next";
+import { lightColor } from "@xhs/reds-token-next";
 
 export interface RedsSwitch {
   value?: boolean;
@@ -16,6 +16,6 @@ export const defaultProps: RedsSwitch = {
   disabled: false,
   onClick: (event: GestureResponderEvent) => {},
   onChange: (value: boolean) => {},
-  trackOnColor: color.light.Primary.Primary,
-  trackOffColor: color.light.Fills.Fill2,
+  trackOnColor: lightColor.Primary,
+  trackOffColor: lightColor.Fill2,
 };

package/src/components/Switch/test/index.bench.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { describe } from "vitest";
 import { redsBench } from "~root/utils/redsBench";
 import { Switch } from "@xhs/reds-rn-next";
@@ -6,10 +7,6 @@ import { Text } from "react-native";
 
 describe("render", () => {
   redsBench("base", async () => {
-    render(
-      <Switch content="hello Switch">
-        <Text>{"button"}</Text>
-      </Switch>,
-    );
+    render(<Switch></Switch>);
   });
 });

package/src/components/Switch/test/index.test.tsx

@@ -1,30 +1,18 @@
 import { describe, it, expect } from "vitest";
-import { render, fireEvent } from "@testing-library/react-native";
+import { render, fireEvent, userEvent } from "@testing-library/react-native";
 import "@testing-library/react-native/extend-expect";
-import { Pressable, Text } from "react-native";
+import { Pressable, Text, View } from "react-native";
 import Switch from "../index";
 
 describe("Switch", () => {
-  describe("props", () => {
-    it(":content", async () => {
-      // const wrapper = render(
-      //   <Switch
-      //     content="hello Switch"
-      //     onVisibleChange={(v) => {
-      //       if (v) {
-      //         expect(v).toBe(true);
-      //         expect(wrapper.queryByText("hello Switch")).toBeOnTheScreen();
-      //       }
-      //     }}
-      //   >
-      //     <Text>{"button"}</Text>
-      //   </Switch>,
-      // );
-      // expect(wrapper.queryByText("hello Switch")).not.toBeOnTheScreen();
-      // await fireEvent(wrapper.queryByText("button"), "press");
-      // expect(wrapper.queryByText("hello Switch")).toBeOnTheScreen();
-      // await fireEvent(wrapper.queryByText("button"), "press");
-      // expect(wrapper.queryByText("hello Switch")).not.toBeOnTheScreen();
-    });
+  it(":base", async () => {
+    let isOn = false;
+    const wrapper = render(<Switch onChange={(v) => (isOn = v)}></Switch>);
+    expect(wrapper.UNSAFE_root.props.defaultValue).toBe(false);
+    await fireEvent(wrapper.UNSAFE_root.children[0], "press");
+    expect(isOn).toBe(true);
+
+    await fireEvent(wrapper.UNSAFE_root.children[0], "press");
+    expect(isOn).toBe(false);
   });
 });

package/src/index.ts

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

package/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "./dist",
+    "outDir": "./lib",
     "rootDir": "./"
   },
   "include": ["src"],
-  "exclude": ["node_modules", "lib"]
+  "exclude": ["node_modules", "lib", "src/**/demo/**", "src/**/test/**"]
 }

package/lib/cjs/components/Button/common/index.js

@@ -1,11 +0,0 @@
-'use strict';
-
-var dayjs = require('dayjs');
-
-var getTime = function getTime() {
-  var time = dayjs().format("YYYY-MM-DD HH:mm:ss");
-  return time;
-};
-
-exports.getTime = getTime;
-//# sourceMappingURL=index.js.map

package/lib/cjs/components/Button/common/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Button/common/index.ts"],"sourcesContent":["import dayjs from \"dayjs\";\n\nexport const getTime = () => {\n  const time = dayjs().format(\"YYYY-MM-DD HH:mm:ss\");\n  return time;\n};\n"],"names":["getTime","time","dayjs","format"],"mappings":";;;;IAEaA,UAAU,SAAVA,UAAgB;EAC3B,IAAMC,IAAO,GAAAC,KAAA,EAAQ,CAAAC,MAAA,CAAO,qBAAqB,CAAA,CAAA;AAC1C,EAAA,OAAAF,IAAA,CAAA;AACT;;;;"}

package/lib/cjs/components/Button/rn/index.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_chunks/Dx-JjEWA.js');
-var React = require('react');
-var reactNative = require('react-native');
-var components_Button_common_index = require('../common/index.js');
-require('dayjs');
-
-var index = (function (props) {
-  var _useState = React.useState(""),
-    _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
-    time = _useState2[0],
-    setTime = _useState2[1];
-  return /* @__PURE__ */React.createElement(reactNative.View, null, /* @__PURE__ */React.createElement(reactNative.Button, {
-    title: props.name || "",
-    onPress: function onPress() {
-      setTime(components_Button_common_index.getTime());
-    }
-  }), /* @__PURE__ */React.createElement(reactNative.Text, null, time));
-});
-
-exports.default = index;
-//# sourceMappingURL=index.js.map

package/lib/cjs/components/Button/rn/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Button/rn/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Button, Text, View } from \"react-native\";\nimport { getTime } from \"../common/index\";\n\nimport { RedsButton } from \"../interface/index\";\n\nexport default (props: RedsButton) => {\n  const [time, setTime] = useState(\"\");\n  return (\n    <View>\n      <Button\n        title={props.name || \"\"}\n        onPress={() => {\n          setTime(getTime());\n        }}\n      ></Button>\n      <Text>{time}</Text>\n    </View>\n  );\n};\n"],"names":["props","_useState","useState","_useState2","_slicedToArray","time","setTime","View","React","createElement","Button","title","name","onPress","getTime","Text"],"mappings":";;;;;;;;;;AAMA,YAAe,CAAA,UAACA,KAAsB,EAAA;AACpC,EAAA,IAAAC,SAAA,GAAwBC,eAAS,EAAE,CAAA;IAAAC,UAAA,GAAAC,wCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA5BI,IAAAA,IAAA,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAMG,IAAAA,OAAO,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AACpB,EAAA,0CACGI,gBACC,EAAA,IAAA,iBAAAC,KAAA,CAAAC,aAAA,CAACC,kBAAA,EAAA;AACCC,IAAAA,KAAA,EAAOX,MAAMY,IAAQ,IAAA,EAAA;IACrBC,SAAS,SAAAA,OAAAA,GAAM;AACbP,MAAAA,OAAA,CAAQQ,wCAAS,CAAA,CAAA;AACnB,KAAA;AAAA,GACD,CACD,iBAAAN,KAAA,CAAAC,aAAA,CAACM,gBAAM,EAAA,IAAA,EAAAV,IAAK,CACd,CAAA,CAAA;AAEJ,CAAA;;;;"}

package/lib/cjs/index.d.ts

@@ -1,37 +0,0 @@
-import React, { ReactNode } from 'react';
-import { View, GestureResponderEvent } from 'react-native';
-
-declare const _default$1: React.ForwardRefExoticComponent<React.RefAttributes<View>>;
-
-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;
-}
-
-declare const _default: ({ mode, opacity, content, children, placement, closeOnClickAgain, trigger, zIndex, visible: defaultVisible, onVisibleChange, }: RedsPopover) => React.JSX.Element;
-
-interface RedsSwitch {
-    value?: boolean;
-    defaultValue?: boolean;
-    disabled?: boolean;
-    onClick?: (event: GestureResponderEvent) => void;
-    onChange?: (value: boolean) => void;
-    trackOnColor?: string;
-    trackOffColor?: string;
-}
-
-declare const Switch: {
-    ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch): React.JSX.Element;
-    defaultProps: RedsSwitch;
-};
-
-export { _default$1 as Button, _default as Popover, Switch };
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/index.d.ts.map

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