react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/selector/tokens.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectorTokens = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+const createSelectorTokens = ({
+  palette,
+  spacing,
+  radii,
+  typography,
+  fontSize
+}) => ({
+  defaults: {
+    columns: 3,
+    multiple: false,
+    showCheckMark: true,
+    disabled: false
+  },
+  layout: {
+    container: {
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    },
+    pressable: _reactNative().Platform.OS === 'web' ? {
+      outlineStyle: 'solid',
+      outlineWidth: 0
+    } : {},
+    item: {
+      flex: 1,
+      borderWidth: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden'
+    },
+    label: {
+      includeFontPadding: false,
+      textAlign: 'center'
+    },
+    description: {
+      includeFontPadding: false,
+      textAlign: 'center'
+    },
+    checkMark: {
+      position: 'absolute',
+      right: 1,
+      bottom: 1,
+      fontSize: 8,
+      includeFontPadding: false
+    },
+    checkMarkTriangle: {
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      width: 0,
+      height: 0,
+      borderTopColor: 'transparent',
+      borderLeftColor: 'transparent'
+    }
+  },
+  colors: {
+    border: 'transparent',
+    borderActive: 'transparent',
+    background: '#ffffff',
+    backgroundActive: palette.primary[50],
+    text: palette.default[900],
+    textActive: palette.primary[600],
+    description: palette.default[500],
+    disabledText: palette.default[400],
+    check: palette.primary[600],
+    checkForeground: palette.primary.foreground ?? '#fff'
+  },
+  typography: {
+    fontSize: fontSize.md,
+    descriptionSize: fontSize.sm,
+    fontFamily: typography.fontFamily,
+    fontWeight: typography.weight.medium
+  },
+  radii: {
+    item: radii.xs
+  },
+  spacing: {
+    gap: spacing.sm,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.lg,
+    descriptionMarginTop: spacing.xxs
+  },
+  states: {
+    disabledOpacity: 0.45
+  }
+});
+const useSelectorTokens = exports.useSelectorTokens = (0, _designSystem.createComponentTokensHook)('selector', createSelectorTokens);

package/dist/cjs/share-sheet/ShareSheet.js

@@ -0,0 +1,276 @@
+"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;
+}
+var _hooks = require("../../hooks");
+var _hairline = require("../../utils/hairline");
+var _validate = require("../../utils/validate");
+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 normalizeOptions = options => {
+  if (!options || options.length === 0) return [];
+  if (Array.isArray(options[0])) {
+    return options;
+  }
+  return [options];
+};
+const ShareSheetOptionItem = ({
+  option,
+  index,
+  columns,
+  tokens,
+  onSelect
+}) => {
+  const optionWidthStyle = (0, _react().useMemo)(() => ({
+    width: `${100 / columns}%`
+  }), [columns]);
+  const iconStyle = (0, _react().useMemo)(() => ({
+    width: tokens.sizing.icon,
+    height: tokens.sizing.icon
+  }), [tokens.sizing.icon]);
+  const press = (0, _hooks.useAriaPress)({
+    onPress: () => onSelect(option, index),
+    extraProps: {
+      accessibilityRole: 'button',
+      testID: `rv-share-sheet-item-${index}`
+    }
+  });
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    style: [styles.option, optionWidthStyle]
+  }, press.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.icon, iconStyle]
+  }, option.icon), (0, _validate.isValidNode)(option.name) ? (0, _validate.isText)(option.name) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [styles.optionText, {
+      color: tokens.colors.option,
+      fontSize: tokens.typography.option
+    }]
+  }, option.name) : option.name : null, (0, _validate.isValidNode)(option.description) ? (0, _validate.isText)(option.description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [styles.optionDesc, {
+      color: tokens.colors.optionDesc,
+      marginTop: tokens.spacing.gap,
+      fontSize: tokens.typography.optionDesc
+    }]
+  }, option.description) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.optionDescNode, {
+      marginTop: tokens.spacing.gap
+    }]
+  }, option.description) : null);
+};
+const ShareSheetCancel = ({
+  cancelText,
+  tokens,
+  onPress
+}) => {
+  const cancelPress = (0, _hooks.useAriaPress)({
+    onPress,
+    extraProps: {
+      testID: 'rv-share-sheet-cancel',
+      accessibilityRole: 'button'
+    }
+  });
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      backgroundColor: tokens.colors.divider
+    }
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    style: [styles.cancel, {
+      backgroundColor: tokens.colors.background
+    }]
+  }, cancelPress.interactionProps), (0, _validate.isText)(cancelText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [styles.cancelText, {
+      color: tokens.colors.option
+    }]
+  }, cancelText) : cancelText));
+};
+const ShareSheet = props => {
+  const {
+    visible,
+    title,
+    description,
+    cancelText = '取消',
+    options,
+    columns = 4,
+    closeOnSelect = true,
+    safeAreaInsetBottom = true,
+    children,
+    tokensOverride,
+    onSelect,
+    onCancel,
+    onClose,
+    lockScroll = true,
+    overlay = true,
+    round = true,
+    style: popupStyle,
+    placement: _placement,
+    position: _position,
+    ...popupProps
+  } = props;
+  const tokens = (0, _tokens.useShareSheetTokens)(tokensOverride);
+  const groups = (0, _react().useMemo)(() => normalizeOptions(options), [options]);
+  const resolvedColumns = (0, _react().useMemo)(() => (0, _validate.isFiniteNumber)(columns) ? Math.max(1, Math.floor(columns)) : 4, [columns]);
+  const hasTitle = (0, _validate.isValidNode)(title);
+  const hasDescription = (0, _validate.isValidNode)(description);
+  const hasCancelText = (0, _validate.isValidNode)(cancelText);
+  const close = (0, _react().useCallback)(isCancel => {
+    if (isCancel) onCancel?.();
+    onClose?.();
+  }, [onCancel, onClose]);
+  const handleSelect = (0, _react().useCallback)((option, index) => {
+    onSelect?.(option, index);
+    option.onPress?.(option);
+    if (closeOnSelect) close();
+  }, [close, closeOnSelect, onSelect]);
+  const onPopupClose = (0, _react().useCallback)(() => close(true), [close]);
+  const wrapperStyle = (0, _react().useMemo)(() => [styles.wrapper, {
+    backgroundColor: tokens.colors.background
+  }], [tokens.colors.background]);
+  const groupRowStyle = (0, _react().useMemo)(() => [styles.optionsRow, {
+    paddingLeft: tokens.spacing.gap,
+    paddingVertical: 12
+  }], [tokens.spacing.gap]);
+  const groupNodes = (0, _react().useMemo)(() => {
+    if (!groups.length) return null;
+    let globalIndex = 0;
+    return groups.map((group, groupIndex) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: groupIndex
+    }, groupIndex ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: (0, _hairline.createHairlineView)({
+        position: 'top',
+        color: tokens.colors.border,
+        left: tokens.spacing.horizontal,
+        right: tokens.spacing.horizontal
+      })
+    }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: groupRowStyle
+    }, group.map(option => {
+      const currentIndex = globalIndex++;
+      return /*#__PURE__*/_react().default.createElement(ShareSheetOptionItem, {
+        key: option.key ?? currentIndex,
+        option: option,
+        index: currentIndex,
+        columns: resolvedColumns,
+        tokens: tokens,
+        onSelect: handleSelect
+      });
+    }))));
+  }, [groupRowStyle, groups, handleSelect, resolvedColumns, tokens, tokens.colors.border, tokens.spacing.horizontal]);
+  const headerNode = (0, _react().useMemo)(() => {
+    if (!hasTitle && !hasDescription) return null;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: styles.header
+    }, hasTitle ? (0, _validate.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [styles.title, {
+        color: tokens.colors.title,
+        fontSize: tokens.typography.title
+      }]
+    }, title) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: styles.node
+    }, title) : null, hasDescription ? (0, _validate.isText)(description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [styles.description, {
+        color: tokens.colors.description,
+        fontSize: tokens.typography.description
+      }]
+    }, description) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: styles.node
+    }, description) : null);
+  }, [description, hasDescription, hasTitle, title, tokens.colors.description, tokens.colors.title, tokens.typography.description, tokens.typography.title]);
+  return /*#__PURE__*/_react().default.createElement(_popup.default, _extends({}, popupProps, {
+    visible: visible,
+    placement: "bottom",
+    round: round,
+    safeAreaInsetBottom: safeAreaInsetBottom,
+    overlay: overlay,
+    lockScroll: lockScroll,
+    onClose: onPopupClose,
+    style: [styles.popupOverride, popupStyle]
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: wrapperStyle
+  }, headerNode, groupNodes, children, hasCancelText ? /*#__PURE__*/_react().default.createElement(ShareSheetCancel, {
+    cancelText: cancelText,
+    tokens: tokens,
+    onPress: onPopupClose
+  }) : null));
+};
+const styles = _reactNative().StyleSheet.create({
+  popupOverride: {
+    padding: 0
+  },
+  wrapper: {
+    width: '100%'
+  },
+  header: {
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 12,
+    alignItems: 'center'
+  },
+  title: {
+    fontWeight: 'normal',
+    textAlign: 'center',
+    marginTop: 4
+  },
+  description: {
+    textAlign: 'center',
+    marginTop: 4
+  },
+  node: {
+    alignItems: 'center',
+    marginTop: 4
+  },
+  optionsRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  option: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 12
+  },
+  optionText: {
+    fontWeight: '500',
+    textAlign: 'center',
+    paddingHorizontal: 4
+  },
+  optionDesc: {
+    textAlign: 'center',
+    paddingHorizontal: 16
+  },
+  optionDescNode: {
+    alignItems: 'center',
+    paddingHorizontal: 16
+  },
+  cancel: {
+    paddingVertical: 14,
+    marginTop: 8,
+    alignItems: 'center'
+  },
+  cancelText: {
+    fontSize: 16,
+    fontWeight: '500'
+  }
+});
+ShareSheet.displayName = 'ShareSheet';
+var _default = exports.default = ShareSheet;

package/dist/cjs/share-sheet/index.js

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

package/dist/cjs/share-sheet/tokens.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useShareSheetTokens = void 0;
+var _designSystem = require("../../design-system");
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize
+  } = foundations;
+  return {
+    colors: {
+      background: '#ffffff',
+      title: palette.default[900],
+      description: palette.default[500],
+      option: palette.default[900],
+      optionDesc: palette.default[500],
+      border: palette.default[200],
+      divider: palette.default[100]
+    },
+    spacing: {
+      horizontal: spacing.md,
+      vertical: spacing.sm,
+      gap: spacing.xs
+    },
+    sizing: {
+      icon: 48
+    },
+    typography: {
+      title: fontSize.md,
+      description: fontSize.xs,
+      option: fontSize.xs,
+      optionDesc: fontSize.xxs
+    }
+  };
+};
+const useShareSheetTokens = exports.useShareSheetTokens = (0, _designSystem.createComponentTokensHook)('shareSheet', createTokens);

package/dist/cjs/sidebar/Sidebar.js

@@ -0,0 +1,102 @@
+"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;
+}
+var _designSystem = require("../../design-system");
+var _hooks = require("../../hooks");
+var _SidebarContext = require("./SidebarContext");
+var _tokens = require("./tokens");
+var _utils = require("../../utils");
+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 SidebarBase = props => {
+  const {
+    children,
+    sideStyle,
+    style,
+    tokensOverride,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useSidebarTokens)(tokensOverride);
+  const items = (0, _react().useMemo)(() => {
+    const out = [];
+    const list = _react().default.Children.toArray(children);
+    for (let i = 0; i < list.length; i++) {
+      const child = list[i];
+      if (! /*#__PURE__*/_react().default.isValidElement(child)) continue;
+      out.push({
+        element: child,
+        index: i
+      });
+    }
+    return out;
+  }, [children]);
+  const firstIndex = items[0]?.index ?? 0;
+  const [activeIndex, setActiveIndex] = (0, _hooks.useControllableValue)(props, {
+    defaultValue: firstIndex,
+    valuePropName: 'value',
+    defaultValuePropName: 'defaultValue',
+    trigger: 'onChange'
+  });
+  let currentIndex = firstIndex;
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].index === activeIndex) {
+      currentIndex = activeIndex;
+      break;
+    }
+  }
+  const contextValue = (0, _react().useMemo)(() => ({
+    activeIndex: currentIndex,
+    onSelect: setActiveIndex
+  }), [currentIndex, setActiveIndex]);
+  const clonedItems = (0, _react().useMemo)(() => {
+    return items.map(item => {
+      const key = item.element.key ?? item.index;
+      const merged = (0, _designSystem.mergeTokensOverride)(tokensOverride, item.element.props.tokensOverride);
+      return /*#__PURE__*/_react().default.cloneElement(item.element, {
+        key,
+        index: item.index,
+        tokensOverride: merged
+      });
+    });
+  }, [items, tokensOverride]);
+  const activeItem = (0, _react().useMemo)(() => {
+    return items.find(item => item.index === currentIndex)?.element;
+  }, [currentIndex, items]);
+  const activeContentStyle = activeItem?.props?.contentStyle;
+  const activeContent = activeItem?.props?.children;
+  const activeContentNode = activeContent == null || activeContent === false ? null : (0, _utils.isText)(activeContent) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, null, activeContent) : activeContent;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
+    style: [tokens.layout.container, {
+      backgroundColor: tokens.colors.background
+    }, style]
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.side, {
+      width: tokens.sizing.width,
+      borderRightColor: tokens.colors.border
+    }, sideStyle],
+    accessibilityRole: "tablist"
+  }, /*#__PURE__*/_react().default.createElement(_SidebarContext.SidebarContext.Provider, {
+    value: contextValue
+  }, clonedItems)), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.content, activeContentStyle]
+  }, activeContentNode));
+};
+SidebarBase.displayName = 'Sidebar';
+var _default = exports.default = SidebarBase;

package/dist/cjs/sidebar/SidebarContext.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSidebarContext = exports.SidebarContext = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var React = _react;
+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 SidebarContext = exports.SidebarContext = /*#__PURE__*/React().createContext(null);
+const useSidebarContext = () => (0, _react().useContext)(SidebarContext);
+exports.useSidebarContext = useSidebarContext;

package/dist/cjs/sidebar/SidebarItem.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _hooks = require("../../hooks");
+var _utils = require("../../utils");
+var _badge = _interopRequireDefault(require("../badge"));
+var _SidebarContext = require("./SidebarContext");
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 SidebarItem = props => {
+  const {
+    title,
+    badge,
+    disabled: disabledProp,
+    dot,
+    onClick,
+    textStyle,
+    badgeStyle,
+    contentStyle: _contentStyle,
+    style,
+    index = 0,
+    children: _children,
+    tokensOverride,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useSidebarTokens)(tokensOverride);
+  const context = (0, _SidebarContext.useSidebarContext)();
+  if (!context) {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.warn('[SidebarItem] 需要作为 Sidebar 子节点使用。');
+    }
+    return null;
+  }
+  const disabled = disabledProp ?? tokens.defaults.disabled;
+  const isActive = context.activeIndex === index;
+  const titleColor = disabled ? tokens.colors.disabled : isActive ? tokens.colors.titleActive : tokens.colors.title;
+  const press = (0, _hooks.useAriaPress)({
+    disabled,
+    onPress: () => {
+      onClick?.(index);
+      context.onSelect(index);
+    },
+    extraProps: {
+      accessibilityRole: 'tab',
+      accessibilityState: {
+        selected: isActive,
+        disabled
+      },
+      testID: `rv-sidebar-item-${index}`
+    }
+  });
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, rest, press.interactionProps, {
+    style: [tokens.layout.item, {
+      height: tokens.sizing.itemHeight
+    }, style]
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.indicatorWrapper
+  }, isActive && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.indicator, {
+      width: tokens.sizing.indicatorWidth,
+      borderRadius: tokens.sizing.indicatorWidth,
+      backgroundColor: tokens.colors.indicator
+    }]
+  })), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.itemContent
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.titleRow
+  }, (0, _utils.isRenderable)(title) ? (0, _utils.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.title, {
+      color: titleColor,
+      fontSize: tokens.typography.fontSize,
+      fontWeight: tokens.typography.fontWeight
+    }, textStyle]
+  }, title) : title : null, (0, _utils.isRenderable)(badge) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.badge, badgeStyle]
+  }, (0, _utils.isText)(badge) ? /*#__PURE__*/_react().default.createElement(_badge.default, {
+    content: badge
+  }) : badge), dot && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.dot, {
+      backgroundColor: tokens.colors.indicator
+    }]
+  }))));
+};
+SidebarItem.displayName = 'Sidebar.Item';
+var _default = exports.default = SidebarItem;

package/dist/cjs/sidebar/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SidebarItem", {
+  enumerable: true,
+  get: function () {
+    return _SidebarItem.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useSidebarTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.useSidebarTokens;
+  }
+});
+var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+var _SidebarItem = _interopRequireDefault(require("./SidebarItem"));
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Sidebar = Object.assign(_Sidebar.default, {
+  Item: _SidebarItem.default
+});
+var _default = exports.default = Sidebar;