@seakoi/native-ui 1.0.0

package/dist/commonjs/components/base/checkbox/checkbox-card.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxCard = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../../native-provider/index.js");
+var _checkbox = require("./checkbox.js");
+var _checkboxContext = require("./checkbox-context.js");
+var _index2 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const CheckboxCard = ({
+  variant = 'normal',
+  ...props
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _index2.useCheckboxCardStyles)();
+  const context = (0, _react.useContext)(_checkboxContext.CheckboxContext);
+  const [checkboxIconState, setCheckboxIconState] = (0, _react.useState)();
+  const isRibbonVariant = variant === 'ribbon';
+  const titleIsSemiBold = !!(isRibbonVariant || props.description);
+  const checkboxIconPlacement = props.checkboxIconPlacement ?? context.checkboxIconPlacement;
+  const isRibbonUncheckedDisabled = isRibbonVariant && checkboxIconState?.disabled && !checkboxIconState.checked;
+  const iconRender = (0, _ahooks.useMemoizedFn)(iconState => {
+    if (!iconState.checked) return null;
+    const borderColor = iconState.disabled ? theme.palette.brand4 : theme.palette.brand7;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.ribbon, {
+          borderColor,
+          borderRightColor: 'transparent',
+          borderBottomColor: 'transparent'
+        }]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.checkIcon,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.CheckOutlined, {
+          size: 20,
+          color: theme.palette.white
+        })
+      })]
+    });
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.Checkbox, {
+    ...props,
+    titleStyle: [titleIsSemiBold && theme.fonts.medium.size16, isRibbonUncheckedDisabled && {
+      color: theme.palette.fontGray5
+    }, props.titleStyle],
+    descriptionStyle: [!isRibbonVariant && {
+      color: theme.palette.fontGray3
+    }, isRibbonUncheckedDisabled && {
+      color: theme.palette.fontGray5
+    }, props.descriptionStyle],
+    iconRender: isRibbonVariant ? iconRender : props.iconRender,
+    checkboxIconPlacement: isRibbonVariant ? 'left' : checkboxIconPlacement ?? 'right',
+    onCheckboxIconStateChange: iconState => {
+      setCheckboxIconState(iconState);
+      props.onCheckboxIconStateChange?.(iconState);
+    },
+    style: [styles.checkbox, checkboxIconState?.checked && {
+      borderColor: checkboxIconState.disabled ? theme.palette.brand4 : theme.palette.brand7
+    }, props.style]
+  });
+};
+exports.CheckboxCard = CheckboxCard;

package/dist/commonjs/components/base/checkbox/checkbox-context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxContext = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CheckboxContext = exports.CheckboxContext = /*#__PURE__*/_react.default.createContext({});

package/dist/commonjs/components/base/checkbox/checkbox-group.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroup = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _checkboxContext = require("./checkbox-context.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const CheckboxGroup = ({
+  checkboxIconPlacement,
+  checkboxIconShape = 'circle',
+  ...props
+}) => {
+  const iconRender = (0, _ahooks.useLatest)(props.iconRender);
+  const [checkedValues, setCheckedValues] = (0, _ahooks.useControllableValue)(props, {
+    defaultValue: [],
+    valuePropName: 'value',
+    trigger: 'onChange',
+    defaultValuePropName: 'defaultValue'
+  });
+  const contextValue = (0, _react.useMemo)(() => ({
+    checkboxIconShape,
+    checkedValues,
+    checkboxIconPlacement,
+    disabled: props.disabled,
+    block: props.block,
+    iconRender: iconRender.current,
+    onCheckedChange: setCheckedValues
+  }), [checkboxIconShape, checkedValues, checkboxIconPlacement, props.disabled, props.block, iconRender, setCheckedValues]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxContext.CheckboxContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};
+exports.CheckboxGroup = CheckboxGroup;

package/dist/commonjs/components/base/checkbox/checkbox.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _checkboxContext = require("./checkbox-context.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const Checkbox = ({
+  align = 'center',
+  titleNumberOfLines = 2,
+  descriptionNumberOfLines = 2,
+  ...props
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _index3.useCheckboxStyles)();
+  const context = (0, _react.useContext)(_checkboxContext.CheckboxContext);
+  const onCheckboxIconStateChange = (0, _ahooks.useLatest)(props.onCheckboxIconStateChange);
+  const [innerChecked, setInnerChecked] = (0, _ahooks.useControllableValue)(props, {
+    trigger: 'onChecked',
+    valuePropName: 'checked',
+    defaultValuePropName: 'defaultChecked'
+  });
+  const isBlock = props.block ?? context.block;
+  const isDisabled = props.disabled ?? context.disabled;
+  const iconShape = props.checkboxIconShape ?? context.checkboxIconShape;
+  const iconPlacement = props.checkboxIconPlacement ?? context.checkboxIconPlacement;
+  const isConfigureValue = props.value || typeof props.value === 'number';
+  const isChecked = (0, _react.useMemo)(() => {
+    if (props.checked !== undefined) return props.checked;
+    if (context.checkedValues && isConfigureValue) {
+      /** 使用 Checkbox.Group 包裹，且存在 value 值 */
+      return context.checkedValues.includes(props.value);
+    }
+    return innerChecked;
+  }, [props.value, props.checked, innerChecked, isConfigureValue, context.checkedValues]);
+  const getCheckboxSvgIcon = (0, _ahooks.useMemoizedFn)((checked, indeterminate) => {
+    const isSquareIcon = iconShape === 'square';
+    if (indeterminate && !checked) {
+      return isSquareIcon ? _svgIcons.SquareMinusFilled : _svgIcons.CircleMinusFilled;
+    }
+    if (isSquareIcon) {
+      return !checked ? _svgIcons.SquareOutlined : _svgIcons.CheckSquareFilled;
+    }
+    return !checked ? _svgIcons.CircleOutlined : _svgIcons.CheckCircleFilled;
+  });
+  const iconRender = (0, _ahooks.useMemoizedFn)(iconState => {
+    if (props.iconRender) return props.iconRender(iconState);
+    if (context.iconRender) return context.iconRender(iconState);
+    const isActiveState = iconState.checked || iconState.indeterminate;
+    const CheckboxSvgIcon = getCheckboxSvgIcon(!!iconState.checked, !!iconState.indeterminate);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.icon,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxSvgIcon, {
+        size: 24,
+        color: !isActiveState ? theme.palette.gray4 : iconState.disabled ? theme.palette.brand4 : theme.palette.brand7
+      }), !!iconState.disabled && !isActiveState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.disabledIconBackground, iconShape !== 'square' && {
+          borderRadius: theme.roundness.full
+        }]
+      })]
+    });
+  });
+  (0, _react.useEffect)(() => {
+    onCheckboxIconStateChange.current?.({
+      checked: isChecked,
+      disabled: isDisabled,
+      indeterminate: props.indeterminate
+    });
+  }, [isChecked, isDisabled, props.indeterminate, onCheckboxIconStateChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    ref: props.ref,
+    activeOpacity: 0.8,
+    disabled: isDisabled,
+    hitSlop: props.hitSlop,
+    onLayout: props.onLayout,
+    onLongPress: props.onLongPress,
+    onPress: event => {
+      props.onPress?.(event);
+      setInnerChecked(prevState => !prevState);
+      if (isConfigureValue && context.onCheckedChange) {
+        context.onCheckedChange(prevState => {
+          return !prevState.includes(props.value) ? prevState.concat(props.value) : prevState.filter(currentValue => currentValue !== props.value);
+        });
+      }
+    },
+    style: [styles.container, {
+      alignItems: align
+    }, isBlock && styles.fullContainer, iconPlacement === 'right' && styles.reverseContainerDirection, props.style],
+    children: [iconRender({
+      checked: isChecked,
+      disabled: isDisabled,
+      indeterminate: props.indeterminate
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Flex, {
+      align: "center",
+      style: [styles.wrapper, props.contentContainerStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Flex, {
+        vertical: true,
+        align: "flex-start",
+        justify: "flex-start",
+        gap: theme.spacing.xxs,
+        style: [styles.wrapper, props.contentContainerStyle],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          size: 16,
+          style: props.titleStyle,
+          color: theme.palette.fontGray1,
+          numberOfLines: titleNumberOfLines,
+          children: props.title
+        }), !!props.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          size: 14,
+          style: props.descriptionStyle,
+          color: theme.palette.fontGray2,
+          numberOfLines: descriptionNumberOfLines,
+          children: props.description
+        })]
+      })
+    })]
+  });
+};
+exports.Checkbox = Checkbox;

package/dist/commonjs/components/base/checkbox/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Checkbox: true
+};
+exports.Checkbox = void 0;
+var _checkbox = require("./checkbox.js");
+Object.keys(_checkbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _checkbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _checkbox[key];
+    }
+  });
+});
+var _checkboxCard = require("./checkbox-card.js");
+Object.keys(_checkboxCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _checkboxCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _checkboxCard[key];
+    }
+  });
+});
+var _checkboxGroup = require("./checkbox-group.js");
+Object.keys(_checkboxGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _checkboxGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _checkboxGroup[key];
+    }
+  });
+});
+const Checkbox = exports.Checkbox = Object.assign(_checkbox.Checkbox, {
+  Card: _checkboxCard.CheckboxCard,
+  Group: _checkboxGroup.CheckboxGroup
+});

package/dist/commonjs/components/base/checkbox/style/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCheckboxStyles = exports.useCheckboxCardStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useCheckboxStyles = exports.useCheckboxStyles = (0, _index.createThemedStyles)(theme => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing.sm,
+    justifyContent: 'flex-start',
+    alignItems: 'center'
+  },
+  fullContainer: {
+    width: '100%',
+    flexShrink: 1,
+    flexBasis: 'auto'
+  },
+  reverseContainerDirection: {
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between'
+  },
+  wrapper: {
+    flexShrink: 1,
+    flexBasis: 'auto'
+  },
+  icon: {
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    flexDirection: 'column'
+  },
+  disabledIconBackground: {
+    inset: 2,
+    zIndex: -1,
+    position: 'absolute',
+    backgroundColor: theme.palette.blueGray1
+  }
+}));
+const useCheckboxCardStyles = exports.useCheckboxCardStyles = (0, _index.createThemedStyles)(theme => ({
+  checkbox: {
+    padding: 16,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    position: 'relative',
+    overflow: 'hidden',
+    borderColor: theme.palette.gray3,
+    borderRadius: theme.roundness.lg,
+    backgroundColor: theme.palette.white
+  },
+  ribbon: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderWidth: 14,
+    borderStyle: 'solid'
+  },
+  checkIcon: {
+    position: 'absolute',
+    top: -2,
+    left: -2
+  }
+}));

package/dist/commonjs/components/base/collapse/collapse-context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapseContext = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CollapseContext = exports.CollapseContext = /*#__PURE__*/_react.default.createContext(null);

package/dist/commonjs/components/base/collapse/collapse-panel.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsePanel = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _collapseContext = require("./collapse-context.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const CollapsePanel = ({
+  containerStyle,
+  contentContainerStyle,
+  headerStyle,
+  headerContentStyle,
+  headerRightExtraStyle,
+  elevation = 1,
+  collapsible = true,
+  expandIconPlacement = 'right',
+  ...props
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _index3.useCollapsePanelStyles)();
+  const context = (0, _react.useContext)(_collapseContext.CollapseContext);
+  const [contentHeight, setContentHeight] = (0, _react.useState)({
+    value: 0,
+    measured: false
+  });
+  const forceRender = (0, _react.useRef)(props.forceRender ?? !context?.destroyOnHidden);
+  const [shouldRender, setShouldRender] = (0, _react.useState)(() => {
+    if (!contentHeight.measured) return true;
+    return forceRender.current;
+  });
+  const showArrow = !!(props.showArrow ?? context?.showArrow);
+  const expandIconInRight = expandIconPlacement === 'right';
+  const showLeftExpandIcon = showArrow && !expandIconInRight;
+  const isCollapsed = !context?.activeKeys.includes(props.panelKey);
+  const animationValue = isCollapsed ? 0 : 1;
+  const {
+    current: animation
+  } = (0, _react.useRef)(new _reactNative.Animated.Value(animationValue));
+  const rotateAnimation = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '90deg']
+  });
+  const heightAnimation = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, contentHeight.value]
+  });
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(animation, {
+      duration: 150,
+      useNativeDriver: false,
+      toValue: animationValue
+    }).start(({
+      finished
+    }) => {
+      if (finished && isCollapsed) {
+        setShouldRender(forceRender.current);
+      }
+    });
+  }, [animation, animationValue, isCollapsed]);
+  const renderArrowIcon = () => {
+    if (props.renderArrowIcon) {
+      return props.renderArrowIcon(isCollapsed);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: {
+        transform: [{
+          rotate: rotateAnimation
+        }]
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.RightOutlined, {
+        size: 16,
+        color: theme.palette.fontGray4
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Surface, {
+    elevation: elevation,
+    style: [styles.container, containerStyle],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Cell, {
+      ...props,
+      style: headerStyle,
+      disabledPress: !collapsible,
+      extraStyle: headerRightExtraStyle,
+      contentContainerStyle: headerContentStyle,
+      onPress: event => {
+        props.onPress?.(event);
+        setShouldRender(true);
+        _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
+        if (props.panelKey && context) {
+          context.setActiveKeys(prevState => {
+            return !prevState.includes(props.panelKey) ? [...prevState, props.panelKey] : prevState.filter(currentKey => currentKey !== props.panelKey);
+          });
+        }
+      },
+      renderArrowIcon: renderArrowIcon,
+      showArrow: showArrow && expandIconInRight,
+      prefix: !showLeftExpandIcon ? undefined : renderArrowIcon()
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [contentHeight.measured && {
+        height: heightAnimation
+      }],
+      children: !!shouldRender && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.contentContainer, contentContainerStyle],
+        onLayout: ({
+          nativeEvent
+        }) => {
+          if (!contentHeight.measured) {
+            setContentHeight({
+              measured: true,
+              value: nativeEvent.layout.height
+            });
+          }
+        },
+        children: props.children
+      })
+    })]
+  });
+};
+exports.CollapsePanel = CollapsePanel;

package/dist/commonjs/components/base/collapse/collapse.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Collapse = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _collapseContext = require("./collapse-context.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const Collapse = props => {
+  const renderArrowIcon = (0, _ahooks.useLatest)(props.renderArrowIcon);
+  const [activeKey, setActiveKey] = (0, _ahooks.useControllableValue)(props, {
+    valuePropName: 'activeKey',
+    defaultValuePropName: 'defaultActiveKey',
+    defaultValue: props.accordion ? undefined : []
+  });
+  const activeKeys = (0, _react.useMemo)(() => {
+    const nextActiveKeys = (Array.isArray(activeKey) ? activeKey : [activeKey]).filter(key => !!key && typeof key !== 'number');
+    return nextActiveKeys;
+  }, [activeKey]);
+  const latestActiveKeys = (0, _ahooks.useLatest)(activeKeys);
+  const setActiveKeys = (0, _react.useCallback)(stateOrSetState => {
+    const nextState = typeof stateOrSetState !== 'function' ? stateOrSetState : stateOrSetState(latestActiveKeys.current);
+    setActiveKey(!props.accordion ? nextState : nextState.pop());
+  }, [latestActiveKeys, props.accordion, setActiveKey]);
+  const contextValue = (0, _react.useMemo)(() => ({
+    activeKeys,
+    setActiveKeys,
+    showArrow: props.showArrow,
+    destroyOnHidden: !!props.destroyOnHidden,
+    renderArrowIcon: renderArrowIcon.current
+  }), [activeKeys, setActiveKeys, props.destroyOnHidden, props.showArrow, renderArrowIcon]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapseContext.CollapseContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};
+exports.Collapse = Collapse;

package/dist/commonjs/components/base/collapse/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Collapse: true
+};
+exports.Collapse = void 0;
+var _collapse = require("./collapse.js");
+Object.keys(_collapse).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _collapse[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _collapse[key];
+    }
+  });
+});
+var _collapsePanel = require("./collapse-panel.js");
+Object.keys(_collapsePanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _collapsePanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _collapsePanel[key];
+    }
+  });
+});
+const Collapse = exports.Collapse = Object.assign(_collapse.Collapse, {
+  Panel: _collapsePanel.CollapsePanel
+});

package/dist/commonjs/components/base/collapse/style/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCollapsePanelStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useCollapsePanelStyles = exports.useCollapsePanelStyles = (0, _index.createThemedStyles)(theme => ({
+  container: {
+    width: '100%',
+    overflow: 'hidden',
+    borderRadius: theme.roundness.xl
+  },
+  contentContainer: {
+    padding: 16,
+    width: '100%',
+    backgroundColor: theme.palette.blueGray1
+  }
+}));

package/dist/commonjs/components/base/countdown/countdown.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Countdown = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _utils = require("./utils.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const UPDATE_INTERVAL = 1000 / 30;
+const Countdown = ({
+  format = 'HH:mm:ss',
+  ...props
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const forceUpdate = (0, _ahooks.useUpdate)();
+  const onComplete = (0, _ahooks.useLatest)(props.onComplete);
+  const shouldUpdateTick = (0, _ahooks.useMemoizedFn)(() => {
+    const now = Date.now();
+    const timestamp = new Date(props.deadline).getTime();
+    forceUpdate();
+    if (timestamp < now) {
+      onComplete.current?.();
+      return false;
+    }
+    return true;
+  });
+  (0, _react.useEffect)(() => {
+    const timerId = setInterval(() => {
+      if (!shouldUpdateTick()) {
+        clearInterval(timerId);
+      }
+    }, UPDATE_INTERVAL);
+    return () => {
+      clearInterval(timerId);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.deadline]);
+  const textColor = props.color ?? theme.palette.fontGray1;
+  const countdownText = (0, _utils.formatTimeString)(props.deadline, format);
+  if (!props.separator) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      size: 15,
+      style: props.textStyle,
+      color: textColor,
+      children: countdownText
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+    children: countdownText.split(props.separator).map((text, index) => {
+      const isSeparatorSymbol = Number.isNaN(Number(text));
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Text, {
+        size: 13,
+        color: textColor,
+        style: !isSeparatorSymbol ? props.textStyle : props.separatorStyle,
+        children: [!!index && props.separator, text]
+      }, index);
+    })
+  });
+};
+exports.Countdown = Countdown;