react-native-system-ui 0.0.5 → 0.0.6

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

@@ -257,28 +257,18 @@ const ActionSheet = props => {
       void requestClose('action');
     }
   }, [onSelect, requestClose, shouldCloseOnClickAction]);
-  return /*#__PURE__*/_react().default.createElement(_popup.default, _extends({
-    visible: visible,
-    placement: "bottom",
-    round: round,
-    safeAreaInsetTop: hasTitle && closeable,
-    safeAreaInsetBottom: safeAreaInsetBottom,
-    overlay: overlay,
-    lockScroll: lockScroll,
-    beforeClose: handlePopupBeforeClose,
-    onClose: handlePopupClose,
-    style: [tokens.layout.popup, popupStyle]
-  }, popupProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.panel, {
-      backgroundColor: tokens.colors.background
-    }]
-  }, hasTitle ? /*#__PURE__*/_react().default.createElement(ActionSheetHeader, {
+  const popupStyleMemo = (0, _react().useMemo)(() => [tokens.layout.popup, popupStyle], [popupStyle, tokens.layout.popup]);
+  const panelStyle = (0, _react().useMemo)(() => [tokens.layout.panel, {
+    backgroundColor: tokens.colors.background
+  }], [tokens.colors.background, tokens.layout.panel]);
+  const headerNode = (0, _react().useMemo)(() => hasTitle ? /*#__PURE__*/_react().default.createElement(ActionSheetHeader, {
     title: title,
     closeable: closeable,
     closeIcon: closeIcon,
     tokens: tokens,
     onClose: handleCloseIcon
-  }) : null, hasDescription ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }) : null, [closeIcon, closeable, handleCloseIcon, hasTitle, title, tokens]);
+  const descriptionNode = (0, _react().useMemo)(() => hasDescription ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.descriptionContainer, (0, _utils.createHairlineBorderBottom)(tokens.colors.border)]
   }, (0, _utils.isText)(description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [tokens.layout.description, {
@@ -287,19 +277,35 @@ const ActionSheet = props => {
     }]
   }, description) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.descriptionNode
-  }, description)) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.actions
-  }, actions.map((action, index) => /*#__PURE__*/_react().default.createElement(ActionSheetItem, {
+  }, description)) : null, [description, hasDescription, tokens.colors.border, tokens.colors.description, tokens.layout.description, tokens.layout.descriptionContainer, tokens.layout.descriptionNode, tokens.typography.description]);
+  const actionNodes = (0, _react().useMemo)(() => actions.map((action, index) => /*#__PURE__*/_react().default.createElement(ActionSheetItem, {
     key: action.key ?? index,
     action: action,
     index: index,
     tokens: tokens,
     onActionPress: handleActionPress
-  }))), children, hasCancelText ? /*#__PURE__*/_react().default.createElement(ActionSheetCancel, {
+  })), [actions, handleActionPress, tokens]);
+  const cancelNode = (0, _react().useMemo)(() => hasCancelText ? /*#__PURE__*/_react().default.createElement(ActionSheetCancel, {
     cancelText: cancelText,
     tokens: tokens,
     onPress: handleCancel
-  }) : null));
+  }) : null, [cancelText, handleCancel, hasCancelText, tokens]);
+  return /*#__PURE__*/_react().default.createElement(_popup.default, _extends({
+    visible: visible,
+    placement: "bottom",
+    round: round,
+    safeAreaInsetTop: hasTitle && closeable,
+    safeAreaInsetBottom: safeAreaInsetBottom,
+    overlay: overlay,
+    lockScroll: lockScroll,
+    beforeClose: handlePopupBeforeClose,
+    onClose: handlePopupClose,
+    style: popupStyleMemo
+  }, popupProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: panelStyle
+  }, headerNode, descriptionNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.actions
+  }, actionNodes), children, cancelNode));
 };
 ActionSheet.displayName = 'ActionSheet';
 var _default = exports.default = ActionSheet;

package/dist/cjs/components/area/Area.js

@@ -12,10 +12,76 @@ function _react() {
   return data;
 }
 var _picker = _interopRequireDefault(require("../picker"));
-var _utils = require("./utils");
 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 compareCode = (a, b) => a < b ? -1 : a > b ? 1 : 0;
+const sortEntries = records => {
+  if (!records) return [];
+  return Object.entries(records).sort(([a], [b]) => compareCode(a, b));
+};
+const getProvinceCode = code => code.slice(0, 2);
+const getCityCode = code => code.slice(0, 4);
+const buildAreaColumns = (areaList, columnsNum = 3) => {
+  const provinces = sortEntries(areaList.province_list);
+  if (columnsNum === 1) {
+    return provinces.map(([code, name]) => ({
+      label: name,
+      value: code
+    }));
+  }
+  const citiesByProvince = new Map();
+  sortEntries(areaList.city_list).forEach(([code, name]) => {
+    const provinceKey = getProvinceCode(code);
+    const option = {
+      label: name,
+      value: code
+    };
+    const existing = citiesByProvince.get(provinceKey);
+    if (existing) {
+      existing.push(option);
+    } else {
+      citiesByProvince.set(provinceKey, [option]);
+    }
+  });
+  if (columnsNum === 3) {
+    const countiesByCity = new Map();
+    sortEntries(areaList.county_list).forEach(([code, name]) => {
+      const cityKey = getCityCode(code);
+      const option = {
+        label: name,
+        value: code
+      };
+      const existing = countiesByCity.get(cityKey);
+      if (existing) {
+        existing.push(option);
+      } else {
+        countiesByCity.set(cityKey, [option]);
+      }
+    });
+    citiesByProvince.forEach(cityOptions => {
+      cityOptions.forEach(cityOption => {
+        const cityKey = getCityCode(cityOption.value);
+        const counties = countiesByCity.get(cityKey);
+        if (counties && counties.length) {
+          cityOption.children = counties;
+        }
+      });
+    });
+  }
+  return provinces.map(([code, name]) => {
+    const provinceOption = {
+      label: name,
+      value: code
+    };
+    const provinceKey = getProvinceCode(code);
+    const cities = citiesByProvince.get(provinceKey);
+    if (cities && cities.length) {
+      provinceOption.children = cities;
+    }
+    return provinceOption;
+  });
+};
 const normalizeCascadeValue = (root, raw, depth) => {
   if (!raw) return raw;
   const input = Array.isArray(raw) ? raw.map(String) : [String(raw)];
@@ -42,19 +108,19 @@ const Area = props => {
     interactionMode = 'sync',
     ...pickerProps
   } = props;
-  const resolvedColumnsNum = columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3;
+  const resolvedColumnsNum = (0, _react().useMemo)(() => columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3, [columnsNum]);
   const {
     province_list,
     city_list,
     county_list
   } = areaList;
-  const columns = (0, _utils.buildAreaColumns)({
+  const columns = (0, _react().useMemo)(() => buildAreaColumns({
     province_list,
     city_list,
     county_list
-  }, resolvedColumnsNum);
-  const normalizedValue = value === undefined ? undefined : normalizeCascadeValue(columns, value, resolvedColumnsNum);
-  const normalizedDefaultValue = defaultValue === undefined ? undefined : normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum);
+  }, resolvedColumnsNum), [city_list, county_list, province_list, resolvedColumnsNum]);
+  const normalizedValue = (0, _react().useMemo)(() => value === undefined ? undefined : normalizeCascadeValue(columns, value, resolvedColumnsNum), [columns, resolvedColumnsNum, value]);
+  const normalizedDefaultValue = (0, _react().useMemo)(() => defaultValue === undefined ? undefined : normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum), [columns, defaultValue, resolvedColumnsNum]);
   const handleChange = (0, _react().useCallback)((values, options) => {
     onChange?.(values.map(String), options);
   }, [onChange]);

package/dist/cjs/components/area/tokens.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAreaTokens = void 0;
+var _designSystem = require("../../design-system");
+const createAreaTokens = _foundations => {
+  return {};
+};
+const useAreaTokens = exports.useAreaTokens = (0, _designSystem.createComponentTokensHook)('area', createAreaTokens);

package/dist/cjs/components/avatar/Avatar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Avatar = void 0;
+exports.default = exports.AvatarImage = exports.AvatarFallbackText = exports.Avatar = void 0;
 function _react() {
   const data = _interopRequireDefault(require("react"));
   _react = function () {
@@ -23,6 +23,39 @@ var _utils = require("../../utils");
 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 AvatarFallbackText = exports.AvatarFallbackText = /*#__PURE__*/_react().default.forwardRef(({
+  children,
+  color,
+  style
+}, ref) => {
+  const tokens = (0, _tokens.useAvatarTokens)();
+  const resolvedStyle = _reactNative().StyleSheet.flatten([tokens.layout.text, {
+    color: color ?? tokens.colors.text,
+    fontWeight: tokens.typography.fontWeight
+  }, style]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    ref: ref,
+    style: resolvedStyle,
+    numberOfLines: 1
+  }, children);
+});
+AvatarFallbackText.displayName = 'Avatar.FallbackText';
+const AvatarImage = exports.AvatarImage = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const tokens = (0, _tokens.useAvatarTokens)();
+  return /*#__PURE__*/_react().default.createElement(_image.default, _extends({
+    ref: ref
+  }, props, {
+    containerStyle: [{
+      backgroundColor: tokens.colors.transparent
+    }, props.containerStyle],
+    style: [tokens.layout.image, props.style],
+    fit: props.fit ?? 'cover',
+    loadingText: props.loadingText ?? null,
+    loadingSize: props.loadingSize ?? tokens.sizing.loadingSize,
+    showError: props.showError ?? true
+  }));
+});
+AvatarImage.displayName = 'Avatar.Image';
 const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const {
     src,
@@ -39,6 +72,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props,
     style,
     textStyle,
     contentStyle,
+    children,
     tokensOverride,
     ...pressableProps
   } = props;
@@ -58,15 +92,13 @@ const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props,
       width: Math.min(avatarWidth, tokens.sizing.iconMaxSize),
       height: Math.min(avatarHeight, tokens.sizing.iconMaxSize)
     }, contentStyle]
-  }, icon) : fallbackText && /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [tokens.layout.text, {
-      color: color ?? tokens.colors.text,
-      fontSize: Math.min(avatarWidth, avatarHeight) * tokens.typography.fallbackTextScale,
-      fontWeight: tokens.typography.fontWeight
-    }, textStyle],
-    numberOfLines: 1
+  }, icon) : fallbackText && /*#__PURE__*/_react().default.createElement(AvatarFallbackText, {
+    color: color,
+    style: [{
+      fontSize: Math.min(avatarWidth, avatarHeight) * tokens.typography.fallbackTextScale
+    }, textStyle]
   }, fallbackText);
-  const content = src || source ? /*#__PURE__*/_react().default.createElement(_image.default, {
+  const content = children ?? (src || source ? /*#__PURE__*/_react().default.createElement(AvatarImage, {
     src: src,
     source: source,
     containerStyle: transparentContainerStyle,
@@ -76,7 +108,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props,
     loadingSize: tokens.sizing.loadingSize,
     showError: true,
     fallback: fallbackContent
-  }) : fallbackContent;
+  }) : fallbackContent);
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     ref: ref,
     style: [tokens.layout.container, {

package/dist/cjs/components/badge/Badge.js

@@ -46,7 +46,7 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
   const {
     visible,
     formattedContent
-  } = (() => {
+  } = (0, _react().useMemo)(() => {
     const numericContent = (0, _utils.isNumericLike)(content) ? Number(content) : null;
     const shouldHide = numericContent === 0 && !resolvedShowZero;
     const isVisible = dot || (0, _utils.isRenderable)(content) && !shouldHide;
@@ -60,7 +60,7 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
       visible: true,
       formattedContent: finalContent
     };
-  })();
+  }, [content, dot, max, resolvedShowZero]);
   const [size, setSize] = (0, _react().useState)({
     width: 0,
     height: 0
@@ -77,7 +77,7 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
       });
     }
   }, [size.width, size.height]);
-  const transformStyle = (() => {
+  const transformStyle = (0, _react().useMemo)(() => {
     if (!hasChildren) return undefined;
     if (dot) {
       const half = tokens.sizing.dotSize / 2;
@@ -99,8 +99,8 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
         translateY: -size.height / 2
       }]
     };
-  })();
-  const baseBadgeStyle = dot ? {
+  }, [dot, hasChildren, size.height, size.width, tokens.sizing.dotSize]);
+  const baseBadgeStyle = (0, _react().useMemo)(() => dot ? {
     width: tokens.sizing.dotSize,
     height: tokens.sizing.dotSize,
     borderRadius: tokens.radii.dot,
@@ -114,15 +114,15 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
     borderWidth: tokens.borders.width,
     borderColor: tokens.colors.border,
     backgroundColor: color ?? tokens.colors.background
-  };
-  const mergedTextStyle = [tokens.layout.text, {
+  }, [color, dot, tokens.borders.width, tokens.colors.background, tokens.colors.border, tokens.colors.dot, tokens.radii.badge, tokens.radii.dot, tokens.sizing.dotSize, tokens.sizing.height, tokens.sizing.minWidth, tokens.sizing.paddingHorizontal, tokens.sizing.paddingVertical]);
+  const mergedTextStyle = (0, _react().useMemo)(() => [tokens.layout.text, {
     color: textColor ?? tokens.colors.text,
     fontSize: tokens.typography.fontSize,
     lineHeight: tokens.typography.lineHeight,
     fontFamily: tokens.typography.fontFamily,
     fontWeight: tokens.typography.fontWeight
-  }, userTextStyle];
-  const offsetStyle = (() => {
+  }, userTextStyle], [textColor, tokens.colors.text, tokens.layout.text, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeight, userTextStyle]);
+  const offsetStyle = (0, _react().useMemo)(() => {
     if (!offset) return undefined;
     const [x, y] = offset;
     return hasChildren ? {
@@ -132,7 +132,7 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
       marginLeft: x,
       marginTop: y
     };
-  })();
+  }, [hasChildren, offset]);
   const badgeElement = !visible ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     pointerEvents: hasChildren ? 'none' : 'auto',
     onLayout: hasChildren && !dot ? handleLayout : undefined,

package/dist/cjs/components/badge/tokens.js

@@ -46,6 +46,10 @@ const createBadgeTokens = ({
         textAlign: 'center',
         includeFontPadding: false,
         textAlignVertical: 'center'
+      },
+      icon: {
+        alignItems: 'center',
+        justifyContent: 'center'
       }
     },
     colors: {

package/dist/cjs/components/button/Button.js

@@ -22,11 +22,9 @@ var _color = require("../../utils/color");
 var _createPlatformShadow = require("../../utils/createPlatformShadow");
 var _string = require("../../utils/string");
 var _validate = require("../../utils/validate");
-var _loading = _interopRequireDefault(require("../loading"));
 var _hooks = require("../../hooks");
 var _ButtonContext = require("./ButtonContext");
 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 clampShadowLevel = level => {
@@ -54,10 +52,7 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     type: typeProp,
     size: sizeProp,
     color,
-    buttonColor: buttonColorProp,
     textColor,
-    dark,
-    mode: modeProp,
     plain: plainProp,
     block: blockProp,
     round: roundProp,
@@ -67,11 +62,8 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     loading: loadingProp,
     loadingText,
     loadingIndicator,
-    loadingType: loadingTypeProp,
     loadingSize: loadingSizeProp,
     disabled: disabledProp,
-    autoInsertSpace: autoInsertSpaceProp,
-    uppercase: uppercaseProp,
     allowFontScaling: allowFontScalingProp,
     maxFontSizeMultiplier,
     rippleColor: rippleColorProp,
@@ -92,60 +84,28 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
   const iconPosition = iconPositionProp ?? group?.iconPosition ?? buttonTokens.defaults.iconPosition;
   const groupShadow = group?.shadow;
   const shadowValue = shadowProp ?? groupShadow;
-  const hasShadowOverride = shadowProp !== undefined || groupShadow !== undefined;
   const disabled = disabledProp ?? group?.disabled ?? buttonTokens.defaults.disabled;
   const loading = loadingProp ?? buttonTokens.defaults.loading;
-  const loadingType = loadingTypeProp ?? buttonTokens.defaults.loadingType;
   const loadingSize = loadingSizeProp ?? buttonTokens.defaults.loadingSize;
-  const autoInsertSpace = autoInsertSpaceProp ?? buttonTokens.defaults.autoInsertSpace;
-  const uppercase = uppercaseProp ?? buttonTokens.defaults.uppercase;
   const allowFontScaling = allowFontScalingProp ?? buttonTokens.defaults.allowFontScaling;
-  const defaultMode = buttonTokens.defaults.mode ?? 'contained';
-  const groupMode = group?.mode;
-  const shouldForcePlainTextMode = plain && !modeProp && !groupMode;
-  const derivedMode = shouldForcePlainTextMode ? 'text' : modeProp ?? groupMode ?? defaultMode;
-  const legacyPlain = shouldForcePlainTextMode;
-  const buttonColorOverride = buttonColorProp ?? color;
+  const isPlain = plain;
   const tone = buttonTokens.colors.tones[type] ?? buttonTokens.colors.tones.default;
   const sizeTokens = buttonTokens.sizing.sizes[size];
-  const gradientString = (0, _validate.isString)(buttonColorOverride) ? buttonColorOverride : undefined;
-  const hasGradientSyntax = gradientString?.toLowerCase().includes('gradient') ?? false;
-  const normalizedColor = hasGradientSyntax ? (0, _color.extractFirstColorToken)(gradientString) : buttonColorOverride;
-  const allowsGradientFill = derivedMode === 'contained' || derivedMode === 'contained-tonal' || derivedMode === 'elevated';
-  const gradientFillEnabled = hasGradientSyntax && !legacyPlain && allowsGradientFill;
-  const supportsGradientFill = _reactNative().Platform.OS === 'web';
-  let backgroundColor = normalizedColor ?? (derivedMode === 'contained' ? tone.background : derivedMode === 'contained-tonal' ? tone.tonalBackground : derivedMode === 'elevated' ? tone.background : buttonTokens.colors.backgroundTransparent);
-  let borderColor = derivedMode === 'outlined' ? normalizedColor ?? tone.border : derivedMode === 'contained-tonal' ? tone.tonalBorder : derivedMode === 'contained' || derivedMode === 'elevated' ? normalizedColor ?? tone.border : buttonTokens.colors.backgroundTransparent;
+  const normalizedColor = color;
+  let backgroundColor = normalizedColor ?? tone.background;
+  let borderColor = normalizedColor ?? tone.border;
   let resolvedTextColor = textColor;
   if (!resolvedTextColor) {
-    if (derivedMode === 'contained-tonal') {
-      resolvedTextColor = tone.tonalText;
-    } else if (derivedMode === 'contained' || derivedMode === 'elevated') {
-      resolvedTextColor = normalizedColor ? '#ffffff' : tone.text;
-    } else {
-      resolvedTextColor = normalizedColor ?? (type === 'default' ? tone.text : tone.border);
-    }
-  }
-  if (dark === true) {
-    resolvedTextColor = buttonTokens.colors.textDark;
-  } else if (dark === false) {
-    resolvedTextColor = buttonTokens.colors.textLight;
-  }
-  if (derivedMode === 'text') {
-    backgroundColor = buttonTokens.colors.backgroundTransparent;
-    borderColor = buttonTokens.colors.backgroundTransparent;
+    resolvedTextColor = normalizedColor ? '#ffffff' : tone.text;
   }
-  if (legacyPlain) {
+  if (isPlain) {
     backgroundColor = buttonTokens.colors.backgroundPlain;
     borderColor = normalizedColor ?? tone.border;
     const fallbackTextColor = type === 'default' && !normalizedColor ? tone.text : normalizedColor ?? tone.border;
     resolvedTextColor = textColor ?? fallbackTextColor;
   }
-  if (gradientFillEnabled && supportsGradientFill) {
-    backgroundColor = buttonTokens.colors.backgroundTransparent;
-  }
-  const shouldRenderBorder = derivedMode === 'outlined' || legacyPlain || derivedMode === 'contained' && type === 'default';
-  const resolvedBorderWidth = gradientFillEnabled && !legacyPlain ? 0 : shouldRenderBorder ? hairline ? buttonTokens.borders.hairlineWidth : buttonTokens.borders.width : 0;
+  const shouldRenderBorder = isPlain || type === 'default';
+  const resolvedBorderWidth = shouldRenderBorder ? hairline ? buttonTokens.borders.hairlineWidth : buttonTokens.borders.width : 0;
   const borderRadius = square ? 0 : round ? sizeTokens.height / 2 : sizeTokens.radius;
   const isDisabled = disabled || loading;
   let resolvedShadowLevel;
@@ -153,10 +113,8 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     resolvedShadowLevel = clampShadowLevel(shadowValue);
   } else if (shadowValue === true) {
     resolvedShadowLevel = clampShadowLevel(2);
-  } else if (!hasShadowOverride && derivedMode === 'elevated') {
-    resolvedShadowLevel = clampShadowLevel(2);
   }
-  const shouldShowShadow = !!resolvedShadowLevel && !gradientFillEnabled && derivedMode !== 'text' && derivedMode !== 'outlined' && !legacyPlain;
+  const shouldShowShadow = !!resolvedShadowLevel && !isPlain;
   const shadowTokens = resolvedShadowLevel ? buttonTokens.shadows[resolvedShadowLevel] : undefined;
   const shadowStyle = shouldShowShadow && shadowTokens ? (0, _createPlatformShadow.createPlatformShadow)({
     color: shadowTokens.color,
@@ -165,9 +123,6 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     offsetY: shadowTokens.offsetY,
     elevation: shadowTokens.elevation
   }) : undefined;
-  const gradientWebStyle = gradientFillEnabled && supportsGradientFill && gradientString ? {
-    backgroundImage: gradientString
-  } : undefined;
   const iconWrapperStyle = iconPosition === 'left' ? {
     marginRight: buttonTokens.spacing.iconGap
   } : {
@@ -192,12 +147,9 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
   };
   const renderLoading = () => {
     const spinnerSize = resolveSpinnerSize(loadingSize, sizeTokens.iconSize);
-    const defaultIndicator = loadingType === 'spinner' ? /*#__PURE__*/_react().default.createElement(_loading.default, {
-      type: "spinner",
-      size: spinnerSize,
-      color: resolvedTextColor
-    }) : /*#__PURE__*/_react().default.createElement(_reactNative().ActivityIndicator, {
-      size: loadingSize,
+    const indicatorSize = (0, _validate.isNumber)(loadingSize) ? spinnerSize : loadingSize;
+    const defaultIndicator = /*#__PURE__*/_react().default.createElement(_reactNative().ActivityIndicator, {
+      size: indicatorSize,
       color: resolvedTextColor
     });
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -210,8 +162,7 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     fontWeight: buttonTokens.typography.fontWeight,
     fontSize: sizeTokens.fontSize,
     lineHeight: sizeTokens.fontSize * buttonTokens.typography.lineHeightMultiplier,
-    color: resolvedTextColor,
-    textTransform: uppercase ? 'uppercase' : undefined
+    color: resolvedTextColor
   };
   const renderText = () => {
     if (label === undefined || label === null) {
@@ -219,7 +170,7 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     }
     const sharedTextStyle = sharedLabelTextStyle;
     if ((0, _validate.isText)(label)) {
-      const content = (0, _validate.isString)(label) ? (0, _string.ensureSpace)(label, autoInsertSpace) : String(label);
+      const content = (0, _validate.isString)(label) ? (0, _string.ensureSpace)(label, true) : String(label);
       return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
         style: [buttonTokens.layout.text, sharedTextStyle, textStyle],
         numberOfLines: 1,
@@ -266,13 +217,13 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
   const rippleClipStyle = _reactNative().Platform.OS === 'android' && borderRadius > 0 && !shouldShowShadow ? {
     overflow: 'hidden'
   } : null;
-  const baseContainerStyle = [buttonTokens.layout.base, containerStyle, rippleClipStyle, block ? buttonTokens.layout.block : null, shadowStyle, gradientWebStyle, style];
+  const baseContainerStyle = [buttonTokens.layout.base, containerStyle, rippleClipStyle, block ? buttonTokens.layout.block : null, shadowStyle, style];
   const mergedAccessibilityState = {
     ...accessibilityState,
     disabled: isDisabled,
     busy: loading
   };
-  const defaultRippleColor = rippleColorProp ?? (derivedMode === 'text' || derivedMode === 'outlined' || legacyPlain ? resolvedTextColor : type === 'default' && !normalizedColor ? (0, _color.withAlpha)(resolvedTextColor, 0.15) : buttonTokens.colors.ripple);
+  const defaultRippleColor = rippleColorProp ?? (isPlain ? resolvedTextColor : type === 'default' && !normalizedColor ? (0, _color.withAlpha)(resolvedTextColor, 0.15) : buttonTokens.colors.ripple);
   const resolvedAndroidRipple = _reactNative().Platform.OS === 'android' ? androidRippleProp ?? {
     color: defaultRippleColor,
     borderless: false

package/dist/cjs/components/button/ButtonContext.js

@@ -3,13 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonGroupContext = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ButtonGroupContext = exports.ButtonGroupContext = /*#__PURE__*/_react().default.createContext(null);
+Object.defineProperty(exports, "ButtonGroupContext", {
+  enumerable: true,
+  get: function () {
+    return _ButtonGroup.ButtonGroupContext;
+  }
+});
+var _ButtonGroup = require("./ButtonGroup");

package/dist/cjs/components/button/ButtonGroup.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonGroup = void 0;
+exports.ButtonGroupContext = exports.ButtonGroup = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -18,9 +18,9 @@ function _reactNative() {
   };
   return data;
 }
-var _ButtonContext = require("./ButtonContext");
 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); }
+const ButtonGroupContext = exports.ButtonGroupContext = /*#__PURE__*/_react().default.createContext(null);
 const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
   children,
   direction = 'horizontal',
@@ -35,14 +35,13 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
   shadow,
   disabled,
   iconPosition,
-  hairline,
-  mode
+  hairline
 }) => {
   const tokens = (0, _tokens.useButtonTokens)();
   const gap = spacing ?? tokens.spacing.groupGap;
   const isHorizontal = direction === 'horizontal';
   const supportsGap = _reactNative().Platform.OS === 'web';
-  const groupValue = {
+  const groupValue = (0, _react().useMemo)(() => ({
     type,
     size,
     plain,
@@ -52,10 +51,9 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
     shadow,
     disabled,
     iconPosition,
-    hairline,
-    mode
-  };
-  const containerStyle = (() => {
+    hairline
+  }), [block, disabled, hairline, iconPosition, plain, round, shadow, size, square, type]);
+  const containerStyle = (0, _react().useMemo)(() => {
     const base = {
       flexDirection: isHorizontal ? 'row' : 'column',
       alignItems: 'center'
@@ -71,8 +69,8 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
       }
     }
     return [base, style];
-  })();
-  const content = (() => {
+  }, [block, gap, isHorizontal, style, supportsGap]);
+  const content = (0, _react().useMemo)(() => {
     if (supportsGap) {
       return children;
     }
@@ -91,8 +89,8 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
         key: element.key ?? index
       });
     });
-  })();
-  return /*#__PURE__*/_react().default.createElement(_ButtonContext.ButtonGroupContext.Provider, {
+  }, [children, gap, isHorizontal, supportsGap]);
+  return /*#__PURE__*/_react().default.createElement(ButtonGroupContext.Provider, {
     value: groupValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: containerStyle

package/dist/cjs/components/button/tokens.js

@@ -53,13 +53,9 @@ const createButtonTokens = foundations => {
       square: false,
       hairline: false,
       iconPosition: 'left',
-      mode: 'contained',
       loading: false,
-      loadingType: 'circular',
       loadingSize: 'small',
       disabled: false,
-      autoInsertSpace: true,
-      uppercase: false,
       allowFontScaling: true
     },
     layout: {
@@ -157,7 +153,7 @@ const createButtonTokens = foundations => {
     states: {
       disabledOpacity: opacity.disabled,
       loadingOpacity: opacity.loading,
-      pressedOpacity: opacity.pressed
+      pressedOpacity: 0.7
     },
     shadows: {
       1: {