react-native-system-ui 1.0.1 → 1.0.3

package/README.md

@@ -1,13 +1,14 @@
 # react-native-system-ui
 
-面向 React Native 的高性能设计系统组件库。基于 Design Tokens 驱动主题体系，50+ 组件全量覆盖移动端场景；原生 StyleSheet 零运行时开销，单组件均值 **3.4 KB gzip**；iOS / Android / Web 三端同构，API 一致、行为对齐。
+面向 React Native 的高性能设计系统组件库。基于 Design Tokens 驱动主题体系，50+ 组件全量覆盖移动端场景；原生 StyleSheet 零运行时开销，单组件均值 **2.9 KB gzip**；iOS / Android / Web 三端同构，API 一致、行为对齐。
 
 ## 核心优势
 
-- **极致轻量**：全组件经过逐行精简——冗余 Hook 移除、StyleSheet 合并、计算内联、辅助函数提取；按需引入 + Tree Shaking，单组件平均 gzip 仅 **3.4 KB**，最小组件（SafeAreaView）仅 **0.6 KB**。
+- **极致轻量**：全组件经过逐行精简——冗余 Hook 移除、StyleSheet 合并、计算内联、辅助函数提取；构建产物 esbuild 压缩；按需引入 + Tree Shaking，单组件平均 gzip 仅 **2.9 KB**，最小组件（SafeAreaView）仅 **0.6 KB**。
 - **原生性能**：纯 StyleSheet 驱动，零 CSS-in-JS 运行时；动画基于原生 Animated / LayoutAnimation，无 JS 线程阻塞；列表类组件（Picker、Swiper、Tabs）基于 FlatList / ScrollView 原生滚动，确保 60fps 流畅交互。
 - **三端同构**：iOS / Android / Web 统一 API 与交互行为；Swiper、Picker 等核心组件在 Web 端自动适配桌面鼠标拖拽与移动端触控，无需业务层额外处理。
 - **设计系统**：Design Tokens + ThemeProvider 分层架构，组件自管 tokens；支持 light / dark / 品牌主题一键切换，样式定制不侵入组件实现。
+- **Tailwind CSS 支持**：通过 NativeWind 集成，一行代码为全部组件开启 `className` 支持，组件增删无需改动应用侧。
 
 ## 快速开始
 
@@ -106,6 +107,25 @@ export const AuroraBranding = () => (
 
 `themePresets.light` 等价于默认主题，`themePresets.dark` 提供深色配色，`themePresets.aurora` 演示品牌化圆角/字体，通过 `ThemeProvider` 配置。
 
+## NativeWind（Tailwind CSS）支持
+
+项目使用了 [NativeWind](https://www.nativewind.dev/) 时，可一键为所有组件开启 `className` 支持：
+
+```tsx
+import { cssInterop } from 'nativewind'
+import { enableNativeWind } from 'react-native-system-ui/nativewind'
+
+enableNativeWind(cssInterop)
+```
+
+在应用入口调用后，所有组件均可使用 Tailwind 类名：
+
+```tsx
+<Button className="mt-4 rounded-lg" text="Tailwind 按钮" type="primary" />
+```
+
+自动遍历组件库导出注册 `className → style` 映射，组件增删无需改动应用侧。`nativewind` 为可选依赖，不使用时无需安装。详见 [快速上手 - NativeWind](./docs/guide/quick-start.md#nativewindtailwind-css支持)。
+
 ## 架构
 
 | 层级 | 职责 |
@@ -119,41 +139,41 @@ export const AuroraBranding = () => (
 
 | 分类 | 组件 |
 | --- | --- |
-| **设计系统** | ConfigProvider、ThemeProvider、createTokens、themePresets（light / dark / aurora） |
+| **设计系统** | ConfigProvider、ThemeProvider、Text、createTokens、themePresets（light / dark / aurora） |
 | **基础展示** | Button、Badge、Cell、Collapse、Divider、Empty、Flex、Grid、Space、Tag、Typography、Loading、Avatar |
 | **反馈交互** | Toast、Dialog、ActionSheet、Notify、Overlay、Popup、Portal、NoticeBar、ShareSheet |
 | **表单输入** | Form、Field、Input、PasswordInput、Checkbox、Radio、Switch、Stepper、Rate、Picker、DatetimePicker、Calendar、Search、NumberKeyboard、Area、Cascader、Selector |
 | **导航布局** | Tabs、NavBar、Tabbar、Sidebar、Swiper（三端手势 + 桌面鼠标拖拽） |
 | **数据展示** | Image、ImagePreview、Skeleton、Progress、Circle、Slider、CountDown、WaterMark |
-| **基础设施** | SafeAreaView、PortalHost、OverlayProvider、locale（zhCN / enUS） |
+| **基础设施** | SafeAreaView、ErrorBoundary、PortalHost、OverlayProvider、locale（zhCN / enUS） |
 
 详细组件列表与开发状态见 [路线图](./docs/guide/roadmap.md)。
 
 ## 组件体积
 
-按需引入后单组件均值约 **3.4 KB**（各组件目录 gzip 相加估算）。支持 Tree Shaking，实际打包体积以构建结果为准。
+按需引入后单组件均值约 **2.9 KB**（各组件目录 gzip 相加估算）。支持 Tree Shaking，实际打包体积以构建结果为准。
 
 | 组件 | gzip | 组件 | gzip | 组件 | gzip |
 | --- | ---: | --- | ---: | --- | ---: |
-| picker | 8.4 KB | tabs | 7.7 KB | form | 6.6 KB |
-| cascader | 5.8 KB | dialog | 5.6 KB | slider | 5.4 KB |
-| field | 5.4 KB | calendar | 5.1 KB | popup | 5.0 KB |
-| number-keyboard | 4.8 KB | checkbox | 4.8 KB | swiper | 4.7 KB |
-| notify | 4.7 KB | button | 4.7 KB | toast | 4.6 KB |
-| stepper | 4.5 KB | radio | 4.5 KB | image-preview | 4.3 KB |
-| cell | 4.1 KB | grid | 3.9 KB | tabbar | 3.7 KB |
-| notice-bar | 3.5 KB | collapse | 3.4 KB | password-input | 3.4 KB |
-| action-sheet | 3.3 KB | portal | 3.3 KB | image | 3.2 KB |
-| datetime-picker | 3.1 KB | sidebar | 3.0 KB | share-sheet | 2.7 KB |
-| progress | 2.7 KB | selector | 2.7 KB | nav-bar | 2.6 KB |
-| typography | 2.6 KB | circle | 2.4 KB | config-provider | 2.4 KB |
-| badge | 2.3 KB | search | 2.3 KB | skeleton | 2.3 KB |
-| water-mark | 2.2 KB | space | 2.1 KB | tag | 2.0 KB |
-| flex | 1.9 KB | avatar | 1.7 KB | divider | 1.7 KB |
-| empty | 1.6 KB | input | 1.5 KB | area | 1.5 KB |
-| switch | 1.3 KB | loading | 1.2 KB | count-down | 1.2 KB |
-| overlay | 1.0 KB | safe-area-view | 0.6 KB | | |
+| picker | 6.6 KB | tabs | 6.4 KB | form | 5.6 KB |
+| dialog | 4.9 KB | cascader | 4.8 KB | field | 4.6 KB |
+| calendar | 4.4 KB | slider | 4.4 KB | number-keyboard | 4.1 KB |
+| toast | 4.1 KB | swiper | 4.0 KB | popup | 4.0 KB |
+| notify | 3.9 KB | checkbox | 3.8 KB | image-preview | 3.7 KB |
+| button | 3.7 KB | stepper | 3.7 KB | cell | 3.6 KB |
+| radio | 3.5 KB | grid | 3.4 KB | config-provider | 3.2 KB |
+| tabbar | 3.2 KB | notice-bar | 3.0 KB | collapse | 2.9 KB |
+| password-input | 2.9 KB | action-sheet | 2.8 KB | sidebar | 2.8 KB |
+| image | 2.8 KB | datetime-picker | 2.7 KB | share-sheet | 2.5 KB |
+| progress | 2.4 KB | selector | 2.3 KB | portal | 2.3 KB |
+| nav-bar | 2.3 KB | typography | 2.1 KB | circle | 2.1 KB |
+| search | 2.1 KB | skeleton | 2.0 KB | badge | 2.0 KB |
+| water-mark | 2.0 KB | tag | 2.0 KB | flex | 1.7 KB |
+| space | 1.7 KB | avatar | 1.6 KB | divider | 1.5 KB |
+| empty | 1.5 KB | input | 1.4 KB | area | 1.3 KB |
+| count-down | 1.2 KB | loading | 1.2 KB | switch | 1.1 KB |
+| overlay | 0.9 KB | error-boundary | 0.7 KB | safe-area-view | 0.6 KB |
 
 ## 版本与反馈
 
-当前为 v0.0.7，欢迎 issue / PR。
+当前为 v1.0.3，欢迎 issue / PR。

package/dist/cjs/components/action-sheet/ActionSheet.js

@@ -1,297 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNativeSystemIcon() {
-  const data = require("react-native-system-icon");
-  _reactNativeSystemIcon = function () {
-    return data;
-  };
-  return data;
-}
-var _hooks = require("../../hooks");
-var _utils = require("../../utils");
-var _loading = _interopRequireDefault(require("../loading"));
-var _popup = _interopRequireDefault(require("../popup"));
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
-const defaultCloseIcon = /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
-  size: 18
-});
-const ActionSheetHeader = /*#__PURE__*/_react().default.memo(({
-  title,
-  closeable,
-  closeIcon,
-  tokens,
-  onClose
-}) => {
-  const closePress = (0, _hooks.useAriaPress)({
-    onPress: onClose
-  });
-  const {
-    colors,
-    typography
-  } = tokens;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.header
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.titleContainer
-  }, (0, _utils.isText)(title) ? (0, _utils.renderTextOrNode)(title, [tokens.layout.title, {
-    color: colors.title,
-    fontSize: typography.title
-  }]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.titleNode
-  }, title)), closeable && /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    style: tokens.layout.closeButton,
-    accessibilityRole: "button",
-    hitSlop: 8
-  }, closePress.interactionProps), /*#__PURE__*/_react().default.isValidElement(closeIcon) ? /*#__PURE__*/_react().default.cloneElement(closeIcon, {
-    fill: colors.description,
-    color: colors.description
-  }) : closeIcon));
-});
-const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
-  action,
-  index,
-  tokens,
-  onActionPress
-}) => {
-  const {
-    disabled,
-    loading,
-    name,
-    subname,
-    icon
-  } = action;
-  const {
-    colors,
-    spacing,
-    typography
-  } = tokens;
-  const actionPress = (0, _hooks.useAriaPress)({
-    disabled: !!disabled || !!loading,
-    onPress: (0, _react().useCallback)(() => onActionPress(action, index), [action, index, onActionPress]),
-    extraProps: {
-      accessibilityRole: 'menuitem',
-      accessibilityLabel: (0, _utils.isText)(name) ? String(name) : undefined,
-      accessibilityState: {
-        disabled: !!disabled,
-        busy: !!loading
-      },
-      testID: `rv-action-sheet-item-${index}`
-    }
-  });
-  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    style: ({
-      pressed
-    }) => [tokens.layout.item, !!icon && tokens.layout.itemWithIcon, {
-      paddingVertical: spacing.vertical,
-      paddingHorizontal: spacing.horizontal,
-      backgroundColor: pressed && !action.disabled && !action.loading ? colors.itemPressedBackground : colors.itemBackground
-    }, action.style]
-  }, actionPress.interactionProps), !!icon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.icon
-  }, icon), loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
-    size: 20
-  }) : (0, _utils.isRenderable)(name) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.itemTextWrapper
-  }, (0, _utils.renderTextOrNode)(name, [tokens.layout.itemText, {
-    color: action.disabled ? colors.disabled : action.color ?? colors.item,
-    fontSize: typography.item
-  }]), (0, _utils.isRenderable)(subname) && ((0, _utils.isText)(subname) ? (0, _utils.renderTextOrNode)(subname, [tokens.layout.subname, {
-    color: colors.subitem
-  }]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.subnameNode
-  }, subname))) : null);
-});
-const ActionSheetCancel = /*#__PURE__*/_react().default.memo(({
-  cancelText,
-  tokens,
-  onPress
-}) => {
-  const {
-    colors,
-    spacing,
-    typography
-  } = tokens;
-  const cancelPress = (0, _hooks.useAriaPress)({
-    onPress,
-    extraProps: {
-      accessibilityRole: 'button',
-      testID: 'rv-action-sheet-cancel'
-    }
-  });
-  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.cancelGap, {
-      height: spacing.cancelGap,
-      backgroundColor: colors.cancelGapBackground
-    }]
-  }), /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    style: [tokens.layout.cancel, {
-      paddingVertical: spacing.vertical,
-      paddingHorizontal: spacing.horizontal,
-      backgroundColor: colors.cancelBackground
-    }]
-  }, cancelPress.interactionProps), (0, _utils.renderTextOrNode)(cancelText, [tokens.layout.cancelText, {
-    color: colors.cancel,
-    fontSize: typography.item
-  }])));
-});
-const ActionSheetImpl = props => {
-  const {
-    tokensOverride,
-    visible,
-    title,
-    description,
-    cancelText,
-    actions = [],
-    closeOnClickAction: closeOnActP,
-    closeOnSelect,
-    closeable: closeableP,
-    closeIcon = defaultCloseIcon,
-    beforeClose,
-    onSelect,
-    onCancel,
-    onClose,
-    children,
-    round: roundP,
-    safeAreaInsetBottom: safeP,
-    overlay: ovP,
-    lockScroll: lockP,
-    style: popStyle,
-    ...popProps
-  } = props;
-  const tokens = (0, _tokens.useActionSheetTokens)(tokensOverride);
-  const closeable = closeableP ?? tokens.defaults.closeable;
-  const round = roundP ?? tokens.defaults.round;
-  const safeBottom = safeP ?? tokens.defaults.safeAreaInsetBottom;
-  const overlay = ovP ?? tokens.defaults.overlay;
-  const lockScroll = lockP ?? tokens.defaults.lockScroll;
-  const closeOnAct = closeOnActP ?? closeOnSelect ?? tokens.defaults.closeOnClickAction;
-  const hasT = (0, _utils.isRenderable)(title);
-  const hasD = (0, _utils.isRenderable)(description);
-  const hasC = (0, _utils.isRenderable)(cancelText);
-  const lastReasonRef = (0, _react().useRef)('close');
-  const closingRef = (0, _react().useRef)(false);
-  const beforeCloseRef = (0, _react().useRef)(beforeClose);
-  beforeCloseRef.current = beforeClose;
-  const onCloseRef = (0, _react().useRef)(onClose);
-  onCloseRef.current = onClose;
-  const onCancelRef = (0, _react().useRef)(onCancel);
-  onCancelRef.current = onCancel;
-  const onSelectRef = (0, _react().useRef)(onSelect);
-  onSelectRef.current = onSelect;
-  const runBefore = (0, _react().useCallback)(async action => {
-    if (!beforeCloseRef.current) return true;
-    try {
-      return (await beforeCloseRef.current(action)) !== false;
-    } catch {
-      return true;
-    }
-  }, []);
-  const emitClose = (0, _react().useCallback)(reason => {
-    if (onCloseRef.current) {
-      if (reason === 'cancel') onCancelRef.current?.();
-      onCloseRef.current();
-      return;
-    }
-    ;
-    onCancelRef.current?.();
-  }, []);
-  const reqClose = (0, _react().useCallback)(async action => {
-    if (closingRef.current) return;
-    closingRef.current = true;
-    try {
-      const ok = await runBefore(action);
-      if (!ok) return;
-      emitClose(action);
-    } finally {
-      closingRef.current = false;
-    }
-  }, [emitClose, runBefore]);
-  const onPopupBefore = (0, _react().useCallback)(reason => {
-    lastReasonRef.current = reason;
-    return runBefore(reason);
-  }, [runBefore]);
-  const onPopupClose = (0, _react().useCallback)(() => {
-    emitClose(lastReasonRef.current);
-  }, [emitClose]);
-  const onActPress = (0, _react().useCallback)((action, index) => {
-    if (action.disabled || action.loading) return;
-    action.onPress?.(action);
-    action.callback?.(action);
-    onSelectRef.current?.(action, index);
-    if (closeOnAct) void reqClose('action');
-  }, [reqClose, closeOnAct]);
-  const popStyleMemo = (0, _react().useMemo)(() => [tokens.layout.popup, popStyle], [tokens.layout.popup, popStyle]);
-  return /*#__PURE__*/_react().default.createElement(_popup.default, _extends({
-    visible: visible,
-    placement: "bottom",
-    round: round,
-    safeAreaInsetTop: hasT && closeable,
-    safeAreaInsetBottom: safeBottom,
-    overlay: overlay,
-    lockScroll: lockScroll,
-    beforeClose: onPopupBefore,
-    onClose: onPopupClose,
-    style: popStyleMemo
-  }, popProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    accessibilityRole: "menu",
-    style: [tokens.layout.panel, {
-      backgroundColor: tokens.colors.background
-    }]
-  }, hasT && /*#__PURE__*/_react().default.createElement(ActionSheetHeader, {
-    title: title,
-    closeable: closeable,
-    closeIcon: closeIcon,
-    tokens: tokens,
-    onClose: () => void reqClose('close-icon')
-  }), hasD && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.descriptionContainer
-  }, (0, _utils.isText)(description) ? (0, _utils.renderTextOrNode)(description, [tokens.layout.description, {
-    color: tokens.colors.description,
-    fontSize: tokens.typography.description
-  }]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.descriptionNode
-  }, description), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: (0, _utils.createHairlineView)({
-      position: 'bottom',
-      color: tokens.colors.border,
-      left: 0,
-      right: 0
-    })
-  })), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.actions
-  }, actions.map((action, index) => /*#__PURE__*/_react().default.createElement(ActionSheetItem, {
-    key: action.key ?? index,
-    action: action,
-    index: index,
-    tokens: tokens,
-    onActionPress: onActPress
-  }))), children, hasC && /*#__PURE__*/_react().default.createElement(ActionSheetCancel, {
-    cancelText: cancelText,
-    tokens: tokens,
-    onPress: () => void reqClose('cancel')
-  })));
-};
-const ActionSheet = /*#__PURE__*/_react().default.memo(ActionSheetImpl);
-ActionSheet.displayName = 'ActionSheet';
-var _default = exports.default = ActionSheet;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}function _reactNativeSystemIcon(){const e=require("react-native-system-icon");return _reactNativeSystemIcon=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _hooks=require("../../hooks"),_utils=require("../../utils"),_loading=_interopRequireDefault(require("../loading")),_popup=_interopRequireDefault(require("../popup")),_tokens=require("./tokens");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,l,c={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return c;if(o=t?a:r){if(o.has(e))return o.get(e);o.set(e,c)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?o(c,t,l):c[t]=e[t]);return c})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}const defaultCloseIcon=_react().default.createElement(_reactNativeSystemIcon().Close,{size:18}),ActionSheetHeader=_react().default.memo(({title:e,closeable:t,closeIcon:r,tokens:a,onClose:o})=>{const l=(0,_hooks.useAriaPress)({onPress:o}),{colors:c,typography:n}=a;return _react().default.createElement(_reactNative().View,{style:a.layout.header},_react().default.createElement(_reactNative().View,{style:a.layout.titleContainer},(0,_utils.isText)(e)?(0,_utils.renderTextOrNode)(e,[a.layout.title,{color:c.title,fontSize:n.title}]):_react().default.createElement(_reactNative().View,{style:a.layout.titleNode},e)),t&&_react().default.createElement(_reactNative().Pressable,_extends({style:a.layout.closeButton,accessibilityRole:"button",hitSlop:8},l.interactionProps),_react().default.isValidElement(r)?_react().default.cloneElement(r,{fill:c.description,color:c.description}):(0,_utils.renderTextOrNode)(r,[{color:c.description}])))}),ActionSheetItem=_react().default.memo(({action:e,index:t,tokens:r,onActionPress:a})=>{const{disabled:o,loading:l,name:c,subname:n,icon:i}=e,{colors:s,spacing:u,typography:d}=r,_=(0,_hooks.useAriaPress)({disabled:!!o||!!l,onPress:(0,_react().useCallback)(()=>a(e,t),[e,t,a]),extraProps:{accessibilityRole:"menuitem",accessibilityLabel:(0,_utils.isText)(c)?String(c):void 0,accessibilityState:{disabled:!!o,busy:!!l},testID:`rv-action-sheet-item-${t}`}});return _react().default.createElement(_reactNative().Pressable,_extends({style:({pressed:t})=>[r.layout.item,!!i&&r.layout.itemWithIcon,{paddingVertical:u.vertical,paddingHorizontal:u.horizontal,backgroundColor:!t||e.disabled||e.loading?s.itemBackground:s.itemPressedBackground},e.style]},_.interactionProps),!!i&&_react().default.createElement(_reactNative().View,{style:r.layout.icon},(0,_utils.isText)(i)?(0,_utils.renderTextOrNode)(i,[{color:s.item}]):i),l?_react().default.createElement(_loading.default,{size:20}):(0,_utils.isRenderable)(c)?_react().default.createElement(_reactNative().View,{style:r.layout.itemTextWrapper},(0,_utils.renderTextOrNode)(c,[r.layout.itemText,{color:e.disabled?s.disabled:e.color??s.item,fontSize:d.item}]),(0,_utils.isRenderable)(n)&&((0,_utils.isText)(n)?(0,_utils.renderTextOrNode)(n,[r.layout.subname,{color:s.subitem}]):_react().default.createElement(_reactNative().View,{style:r.layout.subnameNode},n))):null)}),ActionSheetCancel=_react().default.memo(({cancelText:e,tokens:t,onPress:r})=>{const{colors:a,spacing:o,typography:l}=t,c=(0,_hooks.useAriaPress)({onPress:r,extraProps:{accessibilityRole:"button",testID:"rv-action-sheet-cancel"}});return _react().default.createElement(_react().default.Fragment,null,_react().default.createElement(_reactNative().View,{style:[t.layout.cancelGap,{height:o.cancelGap,backgroundColor:a.cancelGapBackground}]}),_react().default.createElement(_reactNative().Pressable,_extends({style:[t.layout.cancel,{paddingVertical:o.vertical,paddingHorizontal:o.horizontal,backgroundColor:a.cancelBackground}]},c.interactionProps),(0,_utils.renderTextOrNode)(e,[t.layout.cancelText,{color:a.cancel,fontSize:l.item}])))}),ActionSheetImpl=e=>{const{tokensOverride:t,visible:r,title:a,description:o,cancelText:l,actions:c=[],closeOnClickAction:n,closeOnSelect:i,closeable:s,closeIcon:u=defaultCloseIcon,beforeClose:d,onSelect:_,onCancel:f,onClose:p,children:y,round:m,safeAreaInsetBottom:b,overlay:k,lockScroll:v,style:h,...g}=e,x=(0,_tokens.useActionSheetTokens)(t),N=s??x.defaults.closeable,S=m??x.defaults.round,C=b??x.defaults.safeAreaInsetBottom,P=k??x.defaults.overlay,A=v??x.defaults.lockScroll,E=n??i??x.defaults.closeOnClickAction,R=(0,_utils.isRenderable)(a),w=(0,_utils.isRenderable)(o),T=(0,_utils.isRenderable)(l),I=(0,_react().useRef)("close"),O=(0,_react().useRef)(!1),V=(0,_react().useRef)(d);V.current=d;const q=(0,_react().useRef)(p);q.current=p;const z=(0,_react().useRef)(f);z.current=f;const B=(0,_react().useRef)(_);B.current=_;const W=(0,_react().useCallback)(async e=>{if(!V.current)return!0;try{return!1!==await V.current(e)}catch{return!0}},[]),M=(0,_react().useCallback)(e=>{if(q.current)return"cancel"===e&&z.current?.(),void q.current();z.current?.()},[]),j=(0,_react().useCallback)(async e=>{if(!O.current){O.current=!0;try{if(!await W(e))return;M(e)}finally{O.current=!1}}},[M,W]),D=(0,_react().useCallback)(e=>(I.current=e,W(e)),[W]),H=(0,_react().useCallback)(()=>{M(I.current)},[M]),G=(0,_react().useCallback)((e,t)=>{e.disabled||e.loading||(e.onPress?.(e),e.callback?.(e),B.current?.(e,t),E&&j("action"))},[j,E]),F=(0,_react().useMemo)(()=>[x.layout.popup,h],[x.layout.popup,h]);return _react().default.createElement(_popup.default,_extends({visible:r,placement:"bottom",round:S,safeAreaInsetTop:R&&N,safeAreaInsetBottom:C,overlay:P,lockScroll:A,beforeClose:D,onClose:H,style:F},g),_react().default.createElement(_reactNative().View,{accessibilityRole:"menu",style:[x.layout.panel,{backgroundColor:x.colors.background}]},R&&_react().default.createElement(ActionSheetHeader,{title:a,closeable:N,closeIcon:u,tokens:x,onClose:()=>{j("close-icon")}}),w&&_react().default.createElement(_reactNative().View,{style:x.layout.descriptionContainer},(0,_utils.isText)(o)?(0,_utils.renderTextOrNode)(o,[x.layout.description,{color:x.colors.description,fontSize:x.typography.description}]):_react().default.createElement(_reactNative().View,{style:x.layout.descriptionNode},o),_react().default.createElement(_reactNative().View,{style:(0,_utils.createHairlineView)({position:"bottom",color:x.colors.border,left:0,right:0})})),_react().default.createElement(_reactNative().View,{style:x.layout.actions},c.map((e,t)=>_react().default.createElement(ActionSheetItem,{key:e.key??t,action:e,index:t,tokens:x,onActionPress:G}))),y,T&&_react().default.createElement(ActionSheetCancel,{cancelText:l,tokens:x,onPress:()=>{j("cancel")}})))},ActionSheet=_react().default.memo(ActionSheetImpl);ActionSheet.displayName="ActionSheet";var _default=exports.default=ActionSheet;

package/dist/cjs/components/action-sheet/index.js

@@ -1,16 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "useActionSheetTokens", {
-  enumerable: true,
-  get: function () {
-    return _tokens.useActionSheetTokens;
-  }
-});
-var _ActionSheet = _interopRequireDefault(require("./ActionSheet"));
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _ActionSheet.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0,Object.defineProperty(exports,"useActionSheetTokens",{enumerable:!0,get:function(){return _tokens.useActionSheetTokens}});var _ActionSheet=_interopRequireDefault(require("./ActionSheet")),_tokens=require("./tokens");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=_ActionSheet.default;

package/dist/cjs/components/action-sheet/tokens.js

@@ -1,133 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useActionSheetTokens = exports.createActionSheetTokens = void 0;
-var _designSystem = require("../../design-system");
-const centered = {
-  alignItems: 'center',
-  justifyContent: 'center'
-};
-const createActionSheetTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize
-  } = foundations;
-  const white = '#ffffff';
-  return {
-    defaults: {
-      closeOnClickAction: false,
-      closeable: true,
-      round: true,
-      safeAreaInsetBottom: true,
-      overlay: true,
-      lockScroll: true
-    },
-    layout: {
-      popup: {
-        paddingLeft: 0,
-        paddingRight: 0,
-        paddingBottom: 0
-      },
-      panel: {
-        width: '100%',
-        maxHeight: '80%'
-      },
-      header: {
-        position: 'relative',
-        flexDirection: 'row',
-        ...centered,
-        paddingHorizontal: 16
-      },
-      titleContainer: {
-        flex: 1,
-        ...centered
-      },
-      title: {
-        fontWeight: '600',
-        textAlign: 'center'
-      },
-      titleNode: centered,
-      closeButton: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        width: 48,
-        height: 48,
-        ...centered
-      },
-      descriptionContainer: {
-        paddingTop: 12,
-        paddingBottom: 20,
-        paddingHorizontal: 16
-      },
-      description: {
-        textAlign: 'center',
-        lineHeight: 20
-      },
-      descriptionNode: centered,
-      actions: {
-        width: '100%'
-      },
-      item: {
-        ...centered,
-        width: '100%'
-      },
-      itemWithIcon: {
-        flexDirection: 'row',
-        justifyContent: 'center'
-      },
-      itemTextWrapper: centered,
-      itemText: {
-        lineHeight: 24
-      },
-      subname: {
-        marginTop: 4,
-        fontSize: 12,
-        lineHeight: 18
-      },
-      subnameNode: {
-        marginTop: 4
-      },
-      icon: {
-        marginRight: 12
-      },
-      cancelGap: {
-        width: '100%',
-        marginBottom: 0
-      },
-      cancel: centered,
-      cancelText: {
-        lineHeight: 24
-      }
-    },
-    colors: {
-      background: white,
-      title: palette.default[900],
-      description: palette.default[500],
-      item: palette.default[900],
-      subitem: palette.default[500],
-      cancel: palette.default[900],
-      disabled: palette.default[400],
-      border: palette.default[200],
-      itemBackground: white,
-      itemPressedBackground: palette.default[100],
-      cancelBackground: white,
-      cancelGapBackground: palette.default[100] ?? '#f1f2f5'
-    },
-    typography: {
-      title: fontSize.lg,
-      item: fontSize.md,
-      description: fontSize.sm
-    },
-    spacing: {
-      horizontal: spacing.md,
-      vertical: 14,
-      cancelGap: 8
-    }
-  };
-};
-exports.createActionSheetTokens = createActionSheetTokens;
-const useActionSheetTokens = exports.useActionSheetTokens = (0, _designSystem.createComponentTokensHook)('actionSheet', createActionSheetTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useActionSheetTokens=exports.createActionSheetTokens=void 0;var _designSystem=require("../../design-system");const centered={alignItems:"center",justifyContent:"center"},createActionSheetTokens=e=>{const{palette:t,spacing:n,fontSize:i}=e,o="#ffffff";return{defaults:{closeOnClickAction:!1,closeable:!0,round:!0,safeAreaInsetBottom:!0,overlay:!0,lockScroll:!0},layout:{popup:{paddingLeft:0,paddingRight:0,paddingBottom:0},panel:{width:"100%",maxHeight:"80%"},header:{position:"relative",flexDirection:"row",...centered,paddingHorizontal:16},titleContainer:{flex:1,...centered},title:{fontWeight:"600",textAlign:"center"},titleNode:centered,closeButton:{position:"absolute",top:0,right:0,width:48,height:48,...centered},descriptionContainer:{paddingTop:12,paddingBottom:20,paddingHorizontal:16},description:{textAlign:"center",lineHeight:20},descriptionNode:centered,actions:{width:"100%"},item:{...centered,width:"100%"},itemWithIcon:{flexDirection:"row",justifyContent:"center"},itemTextWrapper:centered,itemText:{lineHeight:24},subname:{marginTop:4,fontSize:12,lineHeight:18},subnameNode:{marginTop:4},icon:{marginRight:12},cancelGap:{width:"100%",marginBottom:0},cancel:centered,cancelText:{lineHeight:24}},colors:{background:o,title:t.default[900],description:t.default[500],item:t.default[900],subitem:t.default[500],cancel:t.default[900],disabled:t.default[400],border:t.default[200],itemBackground:o,itemPressedBackground:t.default[100],cancelBackground:o,cancelGapBackground:t.default[100]??"#f1f2f5"},typography:{title:i.lg,item:i.md,description:i.sm},spacing:{horizontal:n.md,vertical:14,cancelGap:8}}};exports.createActionSheetTokens=createActionSheetTokens;const useActionSheetTokens=exports.useActionSheetTokens=(0,_designSystem.createComponentTokensHook)("actionSheet",createActionSheetTokens);