react-native-system-ui 0.0.6 → 1.0.0

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

@@ -20,29 +20,19 @@ function _reactNative() {
 }
 var _color = require("../../utils/color");
 var _createPlatformShadow = require("../../utils/createPlatformShadow");
+var _hairline = require("../../utils/hairline");
 var _string = require("../../utils/string");
-var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 var _hooks = require("../../hooks");
 var _ButtonContext = require("./ButtonContext");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const clampShadowLevel = level => {
-  if (level <= 1) return 1;
-  if (level >= 3) return 3;
-  return level;
+const clampShadowLevel = level => level <= 1 ? 1 : level >= 3 ? 3 : level;
+const ROUND_CORNER_STYLE = {
+  overflow: 'hidden'
 };
-const resolveSpinnerSize = (loadingSize, iconSize) => {
-  if ((0, _validate.isNumber)(loadingSize)) {
-    return loadingSize;
-  }
-  const base = Math.max(iconSize, 16);
-  if (loadingSize === 'large') {
-    return base * 1.25;
-  }
-  return base;
-};
-const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props, forwardedRef) => {
+const ButtonImpl = (props, forwardedRef) => {
   const group = (0, _react().useContext)(_ButtonContext.ButtonGroupContext);
   const {
     text,
@@ -52,7 +42,7 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     type: typeProp,
     size: sizeProp,
     color,
-    textColor,
+    textColor: textColorProp,
     plain: plainProp,
     block: blockProp,
     round: roundProp,
@@ -73,116 +63,36 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     style,
     ...pressableProps
   } = props;
-  const buttonTokens = (0, _tokens.useButtonTokens)(tokensOverride);
-  const type = typeProp ?? group?.type ?? buttonTokens.defaults.type;
-  const size = sizeProp ?? group?.size ?? buttonTokens.defaults.size;
-  const plain = plainProp ?? group?.plain ?? buttonTokens.defaults.plain;
-  const block = blockProp ?? group?.block ?? buttonTokens.defaults.block;
-  const round = roundProp ?? group?.round ?? buttonTokens.defaults.round;
-  const square = squareProp ?? group?.square ?? buttonTokens.defaults.square;
-  const hairline = hairlineProp ?? group?.hairline ?? buttonTokens.defaults.hairline;
-  const iconPosition = iconPositionProp ?? group?.iconPosition ?? buttonTokens.defaults.iconPosition;
-  const groupShadow = group?.shadow;
-  const shadowValue = shadowProp ?? groupShadow;
-  const disabled = disabledProp ?? group?.disabled ?? buttonTokens.defaults.disabled;
-  const loading = loadingProp ?? buttonTokens.defaults.loading;
-  const loadingSize = loadingSizeProp ?? buttonTokens.defaults.loadingSize;
-  const allowFontScaling = allowFontScalingProp ?? buttonTokens.defaults.allowFontScaling;
-  const isPlain = plain;
-  const tone = buttonTokens.colors.tones[type] ?? buttonTokens.colors.tones.default;
-  const sizeTokens = buttonTokens.sizing.sizes[size];
-  const normalizedColor = color;
-  let backgroundColor = normalizedColor ?? tone.background;
-  let borderColor = normalizedColor ?? tone.border;
-  let resolvedTextColor = textColor;
-  if (!resolvedTextColor) {
-    resolvedTextColor = normalizedColor ? '#ffffff' : tone.text;
-  }
-  if (isPlain) {
-    backgroundColor = buttonTokens.colors.backgroundPlain;
-    borderColor = normalizedColor ?? tone.border;
-    const fallbackTextColor = type === 'default' && !normalizedColor ? tone.text : normalizedColor ?? tone.border;
-    resolvedTextColor = textColor ?? fallbackTextColor;
-  }
-  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 tokens = (0, _tokens.useButtonTokens)(tokensOverride);
+  const type = typeProp ?? group?.type ?? tokens.defaults.type;
+  const size = sizeProp ?? group?.size ?? tokens.defaults.size;
+  const plain = plainProp ?? group?.plain ?? tokens.defaults.plain;
+  const block = blockProp ?? group?.block ?? tokens.defaults.block;
+  const round = roundProp ?? group?.round ?? tokens.defaults.round;
+  const square = squareProp ?? group?.square ?? tokens.defaults.square;
+  const hairline = hairlineProp ?? group?.hairline ?? tokens.defaults.hairline;
+  const iconPosition = iconPositionProp ?? group?.iconPosition ?? tokens.defaults.iconPosition;
+  const disabled = disabledProp ?? group?.disabled ?? tokens.defaults.disabled;
+  const loading = loadingProp ?? tokens.defaults.loading;
+  const loadingSize = loadingSizeProp ?? tokens.defaults.loadingSize;
+  const allowFontScaling = allowFontScalingProp ?? tokens.defaults.allowFontScaling;
+  const shadowValue = shadowProp ?? group?.shadow;
   const isDisabled = disabled || loading;
-  let resolvedShadowLevel;
-  if ((0, _validate.isFiniteNumber)(shadowValue)) {
-    resolvedShadowLevel = clampShadowLevel(shadowValue);
-  } else if (shadowValue === true) {
-    resolvedShadowLevel = clampShadowLevel(2);
-  }
-  const shouldShowShadow = !!resolvedShadowLevel && !isPlain;
-  const shadowTokens = resolvedShadowLevel ? buttonTokens.shadows[resolvedShadowLevel] : undefined;
-  const shadowStyle = shouldShowShadow && shadowTokens ? (0, _createPlatformShadow.createPlatformShadow)({
-    color: shadowTokens.color,
-    opacity: shadowTokens.opacity,
-    radius: shadowTokens.radius,
-    offsetY: shadowTokens.offsetY,
-    elevation: shadowTokens.elevation
-  }) : undefined;
-  const iconWrapperStyle = iconPosition === 'left' ? {
-    marginRight: buttonTokens.spacing.iconGap
-  } : {
-    marginLeft: buttonTokens.spacing.iconGap
-  };
-  const loadingIconWrapperStyle = {
-    marginRight: buttonTokens.spacing.iconGap
-  };
-  const renderIcon = () => {
-    if (!icon) return null;
-    try {
-      const iconElement = (0, _validate.isFunction)(icon) ? icon(resolvedTextColor, sizeTokens.iconSize) : icon;
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: [buttonTokens.layout.iconWrapper, iconWrapperStyle]
-      }, iconElement);
-    } catch (error) {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) {
-        console.warn('[Button] Failed to render icon:', error);
-      }
-      return null;
-    }
-  };
-  const renderLoading = () => {
-    const spinnerSize = resolveSpinnerSize(loadingSize, sizeTokens.iconSize);
-    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, {
-      style: [buttonTokens.layout.iconWrapper, loadingIconWrapperStyle]
-    }, loadingIndicator ?? defaultIndicator);
-  };
-  const label = loading && loadingText !== undefined ? loadingText : text !== undefined ? text : children;
-  const sharedLabelTextStyle = {
-    fontFamily: buttonTokens.typography.fontFamily,
-    fontWeight: buttonTokens.typography.fontWeight,
-    fontSize: sizeTokens.fontSize,
-    lineHeight: sizeTokens.fontSize * buttonTokens.typography.lineHeightMultiplier,
-    color: resolvedTextColor
-  };
-  const renderText = () => {
-    if (label === undefined || label === null) {
-      return null;
-    }
-    const sharedTextStyle = sharedLabelTextStyle;
-    if ((0, _validate.isText)(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,
-        allowFontScaling: allowFontScaling,
-        maxFontSizeMultiplier: maxFontSizeMultiplier
-      }, content);
-    }
-    return label;
-  };
-  const content = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [buttonTokens.layout.content, contentStyle]
-  }, loading ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, renderLoading(), renderText()) : /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, icon && iconPosition === 'left' && renderIcon(), renderText(), icon && iconPosition === 'right' && renderIcon()));
+  const tone = tokens.colors.tones[type] ?? tokens.colors.tones.default;
+  const sizeTokens = tokens.sizing.sizes[size];
+  const [backgroundColor, borderColor, textColor] = (0, _react().useMemo)(() => {
+    if (plain) return [tokens.colors.backgroundPlain, color ?? tone.border, textColorProp ?? (type === 'default' && !color ? tone.text : color ?? tone.border)];
+    return [color ?? tone.background, color ?? tone.border, textColorProp ?? (color ? '#ffffff' : tone.text)];
+  }, [color, textColorProp, plain, type, tone, tokens.colors.backgroundPlain]);
+  const hasBorder = plain || type === 'default';
+  const useHairlineOverlay = hasBorder && hairline;
+  const borderWidth = hasBorder && !hairline ? tokens.borders.width : 0;
+  const borderRadius = square ? 0 : round ? sizeTokens.height / 2 : sizeTokens.radius;
+  const shadowStyle = (0, _react().useMemo)(() => {
+    if (plain) return undefined;
+    const level = (0, _utils.isFiniteNumber)(shadowValue) ? clampShadowLevel(shadowValue) : shadowValue === true ? 2 : undefined;
+    return level ? (0, _createPlatformShadow.createPlatformShadow)(tokens.shadows[level]) : undefined;
+  }, [shadowValue, plain, tokens.shadows]);
   const {
     onPress,
     onPressIn,
@@ -194,7 +104,6 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     android_ripple: androidRippleProp,
     ...viewProps
   } = pressableProps;
-  const resolvedAccessibilityLabel = accessibilityLabel ?? ((0, _validate.isText)(label) ? String(label) : undefined);
   const {
     interactionProps,
     states
@@ -204,41 +113,96 @@ const Button = exports.Button = /*#__PURE__*/_react().default.forwardRef((props,
     onPressStart: onPressIn || undefined,
     onPressEnd: onPressOut || undefined
   });
-  const resolvedOpacity = disabled ? buttonTokens.states.disabledOpacity : loading ? buttonTokens.states.loadingOpacity : states.pressed ? buttonTokens.states.pressedOpacity : 1;
-  const containerStyle = {
-    minHeight: sizeTokens.height,
-    paddingHorizontal: sizeTokens.paddingHorizontal,
-    borderRadius,
-    backgroundColor,
-    borderColor,
-    borderWidth: resolvedBorderWidth,
-    opacity: resolvedOpacity
+  const opacity = disabled ? tokens.states.disabledOpacity : loading ? tokens.states.loadingOpacity : states.pressed ? tokens.states.pressedOpacity : 1;
+  const computedTextStyle = (0, _react().useMemo)(() => ({
+    fontFamily: tokens.typography.fontFamily,
+    fontWeight: tokens.typography.fontWeight,
+    fontSize: sizeTokens.fontSize,
+    lineHeight: sizeTokens.fontSize * tokens.typography.lineHeightMultiplier,
+    color: textColor
+  }), [tokens.typography, sizeTokens.fontSize, textColor]);
+  const iconGap = tokens.spacing.iconGap;
+  const renderIcon = () => {
+    if (!icon) return null;
+    try {
+      const element = (0, _utils.isFunction)(icon) ? icon(textColor, sizeTokens.iconSize) : icon;
+      const margin = iconPosition === 'left' ? {
+        marginRight: iconGap
+      } : {
+        marginLeft: iconGap
+      };
+      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        style: [tokens.layout.iconWrapper, margin]
+      }, element);
+    } catch (err) {
+      if (__DEV__) console.warn('[Button] Failed to render icon:', err);
+      return null;
+    }
   };
-  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, style];
-  const mergedAccessibilityState = {
+  const renderLoading = () => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.iconWrapper, {
+      marginRight: iconGap
+    }]
+  }, loadingIndicator ?? /*#__PURE__*/_react().default.createElement(_reactNative().ActivityIndicator, {
+    size: loadingSize,
+    color: textColor
+  }));
+  const label = loading && loadingText !== undefined ? loadingText : text !== undefined ? text : children;
+  const renderLabel = () => {
+    if (label == null) return null;
+    if (typeof label === 'string' || typeof label === 'number') {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        style: [tokens.layout.text, computedTextStyle, textStyle],
+        numberOfLines: 1,
+        allowFontScaling: allowFontScaling,
+        maxFontSizeMultiplier: maxFontSizeMultiplier
+      }, (0, _utils.isString)(label) ? (0, _string.ensureSpace)(label, true) : String(label));
+    }
+    return label;
+  };
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === 'string' || typeof label === 'number' ? String(label) : undefined);
+  const mergedAccessibilityState = (0, _react().useMemo)(() => ({
     ...accessibilityState,
     disabled: isDisabled,
     busy: loading
-  };
-  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
-  } : androidRippleProp;
+  }), [accessibilityState, isDisabled, loading]);
+  const resolvedAndroidRipple = (0, _react().useMemo)(() => {
+    if (_reactNative().Platform.OS !== 'android') return androidRippleProp;
+    if (androidRippleProp) return androidRippleProp;
+    const rippleColor = rippleColorProp ?? (plain ? textColor : type === 'default' && !color ? (0, _color.withAlpha)(textColor, 0.15) : tokens.colors.ripple);
+    return {
+      color: rippleColor,
+      borderless: false
+    };
+  }, [androidRippleProp, rippleColorProp, plain, textColor, type, color, tokens.colors.ripple]);
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     ref: forwardedRef,
     disabled: isDisabled,
-    style: baseContainerStyle,
+    style: [tokens.layout.base, {
+      minHeight: sizeTokens.height,
+      paddingHorizontal: sizeTokens.paddingHorizontal,
+      borderRadius: borderRadius,
+      backgroundColor: backgroundColor,
+      borderColor: useHairlineOverlay ? 'transparent' : borderColor,
+      borderWidth: borderWidth,
+      opacity: opacity
+    }, _reactNative().Platform.OS === 'android' && borderRadius > 0 && !shadowStyle ? ROUND_CORNER_STYLE : null, block ? tokens.layout.block : null, shadowStyle, style],
     android_ripple: resolvedAndroidRipple
   }, interactionProps, {
     accessibilityState: mergedAccessibilityState,
     accessibilityRole: accessibilityRole ?? 'button',
     accessibilityLabel: resolvedAccessibilityLabel,
     accessibilityHint: accessibilityHint
-  }, viewProps), content);
-});
-Button.displayName = 'Button';
+  }, viewProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.content, contentStyle]
+  }, loading ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, renderLoading(), renderLabel()) : /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, icon && iconPosition === 'left' && renderIcon(), renderLabel(), icon && iconPosition === 'right' && renderIcon())), useHairlineOverlay && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _hairline.createHairlineView)({
+      position: 'all',
+      color: borderColor,
+      borderRadius
+    })
+  }));
+};
+const ButtonForwardRef = /*#__PURE__*/_react().default.forwardRef(ButtonImpl);
+const Button = exports.Button = /*#__PURE__*/_react().default.memo(ButtonForwardRef);
 var _default = exports.default = Button;

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

@@ -39,8 +39,6 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
 }) => {
   const tokens = (0, _tokens.useButtonTokens)();
   const gap = spacing ?? tokens.spacing.groupGap;
-  const isHorizontal = direction === 'horizontal';
-  const supportsGap = _reactNative().Platform.OS === 'web';
   const groupValue = (0, _react().useMemo)(() => ({
     type,
     size,
@@ -53,47 +51,15 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react().default.memo(({
     iconPosition,
     hairline
   }), [block, disabled, hairline, iconPosition, plain, round, shadow, size, square, type]);
-  const containerStyle = (0, _react().useMemo)(() => {
-    const base = {
-      flexDirection: isHorizontal ? 'row' : 'column',
-      alignItems: 'center'
-    };
-    if (block) {
-      base.width = '100%';
-    }
-    if (supportsGap) {
-      if (isHorizontal) {
-        base.columnGap = gap;
-      } else {
-        base.rowGap = gap;
-      }
-    }
-    return [base, style];
-  }, [block, gap, isHorizontal, style, supportsGap]);
-  const content = (0, _react().useMemo)(() => {
-    if (supportsGap) {
-      return children;
-    }
-    const childArray = _react().default.Children.toArray(children).filter(child => child != null);
-    return childArray.map((child, index) => {
-      if (! /*#__PURE__*/_react().default.isValidElement(child)) return child;
-      const element = child;
-      const isLast = index === childArray.length - 1;
-      const marginStyle = isHorizontal ? {
-        marginRight: isLast ? 0 : gap
-      } : {
-        marginBottom: isLast ? 0 : gap
-      };
-      return /*#__PURE__*/_react().default.cloneElement(element, {
-        style: [element.props.style, marginStyle],
-        key: element.key ?? index
-      });
-    });
-  }, [children, gap, isHorizontal, supportsGap]);
+  const containerStyle = (0, _react().useMemo)(() => [{
+    flexDirection: direction === 'horizontal' ? 'row' : 'column',
+    alignItems: 'center',
+    gap,
+    width: block ? '100%' : undefined
+  }, style], [block, direction, gap, style]);
   return /*#__PURE__*/_react().default.createElement(ButtonGroupContext.Provider, {
     value: groupValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: containerStyle
-  }, content));
-});
-ButtonGroup.displayName = 'ButtonGroup';
+  }, children));
+});

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

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useButtonTokens = void 0;
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
 var _designSystem = require("../../design-system");
 var _utils = require("../../utils");
 const isDarkThemeBackground = color => {
@@ -144,7 +137,7 @@ const createButtonTokens = foundations => {
     },
     borders: {
       width: 1,
-      hairlineWidth: _reactNative().StyleSheet.hairlineWidth
+      hairlineWidth: (0, _utils.getHairlineWidth)()
     },
     spacing: {
       iconGap: spacing.sm,