react-native-system-ui 0.0.2 → 0.0.3

package/README.md

@@ -20,16 +20,32 @@ pnpm add react-native-system-icon
 # 同时保证项目已安装 react 和 react-native（>=18.2 / >=0.79）
 ```
 
+**优先使用 ConfigProvider** 包裹根节点，这样 Button、Toast、Popup、Dialog 等都能直接使用，无需再配弹层挂载点。
+
 ```tsx
-import { ThemeProvider, Button } from 'react-native-system-ui'
+import { ConfigProvider, Button, Toast } from 'react-native-system-ui'
 
-export const Demo = () => (
-  <ThemeProvider>
-    <Button text="提交" type="primary" shadow />
-  </ThemeProvider>
+export const App = () => (
+  <ConfigProvider>
+    <Button text="提交" onPress={() => Toast.show('你好')} type="primary" shadow />
+  </ConfigProvider>
 )
 ```
 
+ConfigProvider 内置 **ThemeProvider**（主题）与 **PortalHost**（弹层挂载点）。若只包 ThemeProvider 而没挂 PortalHost，Toast/Popup/Dialog 会无法显示。
+
+### 也可以单独使用 ThemeProvider
+
+仅做主题、且确定不用弹层时，可只用 ThemeProvider；之后若要接 Toast/Popup/Dialog，需再包一层 `<Portal.Host>` 或改用 ConfigProvider。
+
+| 能力 | ConfigProvider | ThemeProvider |
+| --- | --- | --- |
+| 主题（tokens） | ✅ 内置 | ✅ |
+| 弹层挂载点（PortalHost） | ✅ 内置 | ❌ 需再包 `<Portal.Host>` |
+| 语言包（locale） | ✅ | ❌ |
+
+详见 [ConfigProvider](./docs/components/config-provider.md) / [Portal](./docs/components/portal.md)。
+
 ### 自定义 Tokens
 
 ```tsx
@@ -93,7 +109,7 @@ export const AuroraBranding = () => (
 
 ## 已交付能力
 
-- **设计系统**：ThemeProvider、createTokens、themePresets（light/dark/aurora），组件自管 tokens。
+- **设计系统**：ConfigProvider、ThemeProvider、createTokens、themePresets（light/dark/aurora），组件自管 tokens。使用 Toast/Popup/Dialog 等弹层时推荐用 ConfigProvider 包裹根节点（内置 PortalHost）。
 - **基础与展示**：Button、Badge、Cell、Collapse、Divider、Empty、Flex、Grid、Space、Tag、Typography、Loading、NoticeBar、Popup、Portal、Progress、Slider、Toast、Dialog 等，均提供文档与 demo。
 - **表单与输入**：Form、Field、Input、Checkbox、Radio、Switch、Stepper、Rate、Picker、Calendar、Search 等。
 - **导航与反馈**：Tabs、NavBar、Tabbar、ActionSheet、Notify、Overlay 等。

package/dist/cjs/{index-bar → components/index-bar}/IndexBar.js

@@ -20,6 +20,7 @@ function _reactNative() {
 }
 var _hooks = require("../../hooks");
 var _validate = require("../../utils/validate");
+var _safeAreaView = require("../safe-area-view");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -325,7 +326,7 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     hideIndicatorNow();
     setInteractionIndex(null);
   }, [hideIndicatorNow]);
-  const StickyWrapper = safeAreaInsetTop ? _reactNative().SafeAreaView : _reactNative().View;
+  const StickyWrapper = safeAreaInsetTop ? _safeAreaView.SafeAreaView : _reactNative().View;
   const stickyWrapperStyle = [styles.stickyWrapper, {
     top: stickyOffsetTop,
     zIndex

package/dist/cjs/components/index.js

@@ -0,0 +1,511 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActionSheet", {
+  enumerable: true,
+  get: function () {
+    return _actionSheet.default;
+  }
+});
+Object.defineProperty(exports, "Area", {
+  enumerable: true,
+  get: function () {
+    return _area.default;
+  }
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function () {
+    return _avatar.default;
+  }
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _badge.default;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _button.default;
+  }
+});
+Object.defineProperty(exports, "Calendar", {
+  enumerable: true,
+  get: function () {
+    return _calendar.default;
+  }
+});
+Object.defineProperty(exports, "Cascader", {
+  enumerable: true,
+  get: function () {
+    return _cascader.default;
+  }
+});
+Object.defineProperty(exports, "Cell", {
+  enumerable: true,
+  get: function () {
+    return _cell.default;
+  }
+});
+Object.defineProperty(exports, "CellGroup", {
+  enumerable: true,
+  get: function () {
+    return _cell.CellGroup;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _checkbox.CheckboxGroup;
+  }
+});
+Object.defineProperty(exports, "Circle", {
+  enumerable: true,
+  get: function () {
+    return _circle.default;
+  }
+});
+Object.defineProperty(exports, "Collapse", {
+  enumerable: true,
+  get: function () {
+    return _collapse.default;
+  }
+});
+Object.defineProperty(exports, "ConfigProvider", {
+  enumerable: true,
+  get: function () {
+    return _configProvider.ConfigProvider;
+  }
+});
+Object.defineProperty(exports, "CountDown", {
+  enumerable: true,
+  get: function () {
+    return _countDown.default;
+  }
+});
+Object.defineProperty(exports, "DatetimePicker", {
+  enumerable: true,
+  get: function () {
+    return _datetimePicker.default;
+  }
+});
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function () {
+    return _dialog.default;
+  }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () {
+    return _divider.default;
+  }
+});
+Object.defineProperty(exports, "DropdownMenu", {
+  enumerable: true,
+  get: function () {
+    return _dropdownMenu.default;
+  }
+});
+Object.defineProperty(exports, "Empty", {
+  enumerable: true,
+  get: function () {
+    return _empty.default;
+  }
+});
+Object.defineProperty(exports, "Field", {
+  enumerable: true,
+  get: function () {
+    return _field.default;
+  }
+});
+Object.defineProperty(exports, "FieldGroup", {
+  enumerable: true,
+  get: function () {
+    return _field.FieldGroup;
+  }
+});
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function () {
+    return _flex.default;
+  }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () {
+    return _form.default;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () {
+    return _grid.default;
+  }
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return _image.default;
+  }
+});
+Object.defineProperty(exports, "ImagePreview", {
+  enumerable: true,
+  get: function () {
+    return _imagePreview.default;
+  }
+});
+Object.defineProperty(exports, "IndexBar", {
+  enumerable: true,
+  get: function () {
+    return _indexBar.default;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () {
+    return _input.default;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () {
+    return _list.default;
+  }
+});
+Object.defineProperty(exports, "Loading", {
+  enumerable: true,
+  get: function () {
+    return _loading.default;
+  }
+});
+Object.defineProperty(exports, "NavBar", {
+  enumerable: true,
+  get: function () {
+    return _navBar.default;
+  }
+});
+Object.defineProperty(exports, "NoticeBar", {
+  enumerable: true,
+  get: function () {
+    return _noticeBar.default;
+  }
+});
+Object.defineProperty(exports, "Notify", {
+  enumerable: true,
+  get: function () {
+    return _notify.default;
+  }
+});
+Object.defineProperty(exports, "NumberKeyboard", {
+  enumerable: true,
+  get: function () {
+    return _numberKeyboard.default;
+  }
+});
+Object.defineProperty(exports, "Overlay", {
+  enumerable: true,
+  get: function () {
+    return _overlay.default;
+  }
+});
+Object.defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function () {
+    return _pagination.default;
+  }
+});
+Object.defineProperty(exports, "PasswordInput", {
+  enumerable: true,
+  get: function () {
+    return _passwordInput.default;
+  }
+});
+Object.defineProperty(exports, "Picker", {
+  enumerable: true,
+  get: function () {
+    return _picker.default;
+  }
+});
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function () {
+    return _popup.default;
+  }
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _portal.Portal;
+  }
+});
+Object.defineProperty(exports, "PortalHost", {
+  enumerable: true,
+  get: function () {
+    return _portal.PortalHost;
+  }
+});
+Object.defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function () {
+    return _progress.default;
+  }
+});
+Object.defineProperty(exports, "PullRefresh", {
+  enumerable: true,
+  get: function () {
+    return _pullRefresh.default;
+  }
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function () {
+    return _radio.Radio;
+  }
+});
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function () {
+    return _radio.RadioGroup;
+  }
+});
+Object.defineProperty(exports, "Rate", {
+  enumerable: true,
+  get: function () {
+    return _rate.default;
+  }
+});
+Object.defineProperty(exports, "SafeAreaView", {
+  enumerable: true,
+  get: function () {
+    return _safeAreaView.SafeAreaView;
+  }
+});
+Object.defineProperty(exports, "Search", {
+  enumerable: true,
+  get: function () {
+    return _search.default;
+  }
+});
+Object.defineProperty(exports, "Selector", {
+  enumerable: true,
+  get: function () {
+    return _selector.default;
+  }
+});
+Object.defineProperty(exports, "ShareSheet", {
+  enumerable: true,
+  get: function () {
+    return _shareSheet.default;
+  }
+});
+Object.defineProperty(exports, "Sidebar", {
+  enumerable: true,
+  get: function () {
+    return _sidebar.default;
+  }
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _skeleton.default;
+  }
+});
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () {
+    return _slider.default;
+  }
+});
+Object.defineProperty(exports, "Space", {
+  enumerable: true,
+  get: function () {
+    return _space.default;
+  }
+});
+Object.defineProperty(exports, "Stepper", {
+  enumerable: true,
+  get: function () {
+    return _stepper.default;
+  }
+});
+Object.defineProperty(exports, "Swiper", {
+  enumerable: true,
+  get: function () {
+    return _swiper.default;
+  }
+});
+Object.defineProperty(exports, "SwiperItem", {
+  enumerable: true,
+  get: function () {
+    return _swiper.SwiperItem;
+  }
+});
+Object.defineProperty(exports, "SwiperPagIndicator", {
+  enumerable: true,
+  get: function () {
+    return _swiper.SwiperPagIndicator;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _switch.default;
+  }
+});
+Object.defineProperty(exports, "Tabbar", {
+  enumerable: true,
+  get: function () {
+    return _tabbar.default;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _tabs.default;
+  }
+});
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function () {
+    return _tag.default;
+  }
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _toast.default;
+  }
+});
+Object.defineProperty(exports, "Typography", {
+  enumerable: true,
+  get: function () {
+    return _typography.default;
+  }
+});
+Object.defineProperty(exports, "Uploader", {
+  enumerable: true,
+  get: function () {
+    return _uploader.default;
+  }
+});
+Object.defineProperty(exports, "WaterMark", {
+  enumerable: true,
+  get: function () {
+    return _waterMark.default;
+  }
+});
+Object.defineProperty(exports, "enUS", {
+  enumerable: true,
+  get: function () {
+    return _configProvider.enUS;
+  }
+});
+Object.defineProperty(exports, "useImageTokens", {
+  enumerable: true,
+  get: function () {
+    return _image.useImageTokens;
+  }
+});
+Object.defineProperty(exports, "useLocale", {
+  enumerable: true,
+  get: function () {
+    return _configProvider.useLocale;
+  }
+});
+Object.defineProperty(exports, "useSkeletonTokens", {
+  enumerable: true,
+  get: function () {
+    return _skeleton.useSkeletonTokens;
+  }
+});
+Object.defineProperty(exports, "useSwiperPagIndicatorTokens", {
+  enumerable: true,
+  get: function () {
+    return _swiper.useSwiperPagIndicatorTokens;
+  }
+});
+Object.defineProperty(exports, "useUploaderTokens", {
+  enumerable: true,
+  get: function () {
+    return _uploader.useUploaderTokens;
+  }
+});
+Object.defineProperty(exports, "zhCN", {
+  enumerable: true,
+  get: function () {
+    return _configProvider.zhCN;
+  }
+});
+var _button = _interopRequireDefault(require("./button"));
+var _cell = _interopRequireWildcard(require("./cell"));
+var _flex = _interopRequireDefault(require("./flex"));
+var _space = _interopRequireDefault(require("./space"));
+var _divider = _interopRequireDefault(require("./divider"));
+var _tag = _interopRequireDefault(require("./tag"));
+var _checkbox = require("./checkbox");
+var _radio = require("./radio");
+var _field = _interopRequireWildcard(require("./field"));
+var _input = _interopRequireDefault(require("./input"));
+var _form = _interopRequireDefault(require("./form"));
+var _switch = _interopRequireDefault(require("./switch"));
+var _badge = _interopRequireDefault(require("./badge"));
+var _avatar = _interopRequireDefault(require("./avatar"));
+var _grid = _interopRequireDefault(require("./grid"));
+var _typography = _interopRequireDefault(require("./typography"));
+var _loading = _interopRequireDefault(require("./loading"));
+var _empty = _interopRequireDefault(require("./empty"));
+var _image = _interopRequireWildcard(require("./image"));
+var _progress = _interopRequireDefault(require("./progress"));
+var _circle = _interopRequireDefault(require("./circle"));
+var _noticeBar = _interopRequireDefault(require("./notice-bar"));
+var _slider = _interopRequireDefault(require("./slider"));
+var _stepper = _interopRequireDefault(require("./stepper"));
+var _rate = _interopRequireDefault(require("./rate"));
+var _selector = _interopRequireDefault(require("./selector"));
+var _search = _interopRequireDefault(require("./search"));
+var _passwordInput = _interopRequireDefault(require("./password-input"));
+var _picker = _interopRequireDefault(require("./picker"));
+var _numberKeyboard = _interopRequireDefault(require("./number-keyboard"));
+var _collapse = _interopRequireDefault(require("./collapse"));
+var _popup = _interopRequireDefault(require("./popup"));
+var _overlay = _interopRequireDefault(require("./overlay"));
+var _dialog = _interopRequireDefault(require("./dialog"));
+var _toast = _interopRequireDefault(require("./toast"));
+var _notify = _interopRequireDefault(require("./notify"));
+var _portal = require("./portal");
+var _safeAreaView = require("./safe-area-view");
+var _configProvider = require("./config-provider");
+var _datetimePicker = _interopRequireDefault(require("./datetime-picker"));
+var _calendar = _interopRequireDefault(require("./calendar"));
+var _cascader = _interopRequireDefault(require("./cascader"));
+var _tabs = _interopRequireDefault(require("./tabs"));
+var _tabbar = _interopRequireDefault(require("./tabbar"));
+var _navBar = _interopRequireDefault(require("./nav-bar"));
+var _sidebar = _interopRequireDefault(require("./sidebar"));
+var _indexBar = _interopRequireDefault(require("./index-bar"));
+var _actionSheet = _interopRequireDefault(require("./action-sheet"));
+var _shareSheet = _interopRequireDefault(require("./share-sheet"));
+var _dropdownMenu = _interopRequireDefault(require("./dropdown-menu"));
+var _area = _interopRequireDefault(require("./area"));
+var _list = _interopRequireDefault(require("./list"));
+var _pullRefresh = _interopRequireDefault(require("./pull-refresh"));
+var _imagePreview = _interopRequireDefault(require("./image-preview"));
+var _swiper = _interopRequireWildcard(require("./swiper"));
+var _uploader = _interopRequireWildcard(require("./uploader"));
+var _skeleton = _interopRequireWildcard(require("./skeleton"));
+var _countDown = _interopRequireDefault(require("./count-down"));
+var _waterMark = _interopRequireDefault(require("./water-mark"));
+var _pagination = _interopRequireDefault(require("./pagination"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/{nav-bar → components/nav-bar}/NavBar.js

@@ -28,6 +28,7 @@ function _reactNativeSystemIcon() {
 var _hooks = require("../../hooks");
 var _hairline = require("../../utils/hairline");
 var _validate = require("../../utils/validate");
+var _safeAreaView = require("../safe-area-view");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -185,7 +186,7 @@ const NavBarBase = props => {
   }, renderLeft(), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.center
   }, centerContent), renderRight());
-  const wrapped = safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+  const wrapped = safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
     onLayout: handleLayout,
     style: {
       backgroundColor: background