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

package/dist/es/button/Button.js

@@ -0,0 +1,273 @@
+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); }
+import React, { useContext, useMemo } from 'react';
+import { ActivityIndicator, Platform, Pressable, Text, View } from 'react-native';
+import { withAlpha, extractFirstColorToken } from '../../utils/color';
+import { createPlatformShadow } from '../../utils/createPlatformShadow';
+import { ensureSpace } from '../../utils/string';
+import { isFiniteNumber, isFunction, isNumber, isString, isText } from '../../utils/validate';
+import Loading from '../loading';
+import { useAriaPress } from '../../hooks';
+import { ButtonGroupContext } from './ButtonContext';
+import { useButtonTokens } from './tokens';
+const clampShadowLevel = level => {
+  if (level <= 1) return 1;
+  if (level >= 3) return 3;
+  return level;
+};
+const resolveSpinnerSize = (loadingSize, iconSize) => {
+  if (isNumber(loadingSize)) {
+    return loadingSize;
+  }
+  const base = Math.max(iconSize, 16);
+  if (loadingSize === 'large') {
+    return base * 1.25;
+  }
+  return base;
+};
+export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  const group = useContext(ButtonGroupContext);
+  const {
+    text,
+    children,
+    icon,
+    iconPosition: iconPositionProp,
+    type: typeProp,
+    size: sizeProp,
+    color,
+    buttonColor: buttonColorProp,
+    textColor,
+    dark,
+    mode: modeProp,
+    plain: plainProp,
+    block: blockProp,
+    round: roundProp,
+    square: squareProp,
+    hairline: hairlineProp,
+    shadow: shadowProp,
+    loading: loadingProp,
+    loadingText,
+    loadingIndicator,
+    loadingType: loadingTypeProp,
+    loadingSize: loadingSizeProp,
+    disabled: disabledProp,
+    autoInsertSpace: autoInsertSpaceProp,
+    uppercase: uppercaseProp,
+    allowFontScaling: allowFontScalingProp,
+    maxFontSizeMultiplier,
+    rippleColor: rippleColorProp,
+    contentStyle,
+    textStyle,
+    tokensOverride,
+    style,
+    ...pressableProps
+  } = props;
+  const buttonTokens = 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 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 tone = buttonTokens.colors.tones[type] ?? buttonTokens.colors.tones.default;
+  const sizeTokens = buttonTokens.sizing.sizes[size];
+  const gradientString = isString(buttonColorOverride) ? buttonColorOverride : undefined;
+  const hasGradientSyntax = gradientString?.toLowerCase().includes('gradient') ?? false;
+  const normalizedColor = hasGradientSyntax ? extractFirstColorToken(gradientString) : buttonColorOverride;
+  const allowsGradientFill = derivedMode === 'contained' || derivedMode === 'contained-tonal' || derivedMode === 'elevated';
+  const gradientFillEnabled = hasGradientSyntax && !legacyPlain && allowsGradientFill;
+  const supportsGradientFill = 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;
+  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;
+  }
+  if (legacyPlain) {
+    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 borderRadius = square ? 0 : round ? sizeTokens.height / 2 : sizeTokens.radius;
+  const isDisabled = disabled || loading;
+  let resolvedShadowLevel;
+  if (isFiniteNumber(shadowValue)) {
+    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 shadowTokens = resolvedShadowLevel ? buttonTokens.shadows[resolvedShadowLevel] : undefined;
+  const shadowStyle = shouldShowShadow && shadowTokens ? createPlatformShadow({
+    color: shadowTokens.color,
+    opacity: shadowTokens.opacity,
+    radius: shadowTokens.radius,
+    offsetY: shadowTokens.offsetY,
+    elevation: shadowTokens.elevation
+  }) : undefined;
+  const gradientWebStyle = gradientFillEnabled && supportsGradientFill && gradientString ? {
+    backgroundImage: gradientString
+  } : undefined;
+  const iconWrapperStyle = useMemo(() => iconPosition === 'left' ? {
+    marginRight: buttonTokens.spacing.iconGap
+  } : {
+    marginLeft: buttonTokens.spacing.iconGap
+  }, [buttonTokens.spacing.iconGap, iconPosition]);
+  const loadingIconWrapperStyle = useMemo(() => ({
+    marginRight: buttonTokens.spacing.iconGap
+  }), [buttonTokens.spacing.iconGap]);
+  const renderIcon = () => {
+    if (!icon) return null;
+    try {
+      const iconElement = isFunction(icon) ? icon(resolvedTextColor, sizeTokens.iconSize) : icon;
+      return /*#__PURE__*/React.createElement(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 defaultIndicator = loadingType === 'spinner' ? /*#__PURE__*/React.createElement(Loading, {
+      type: "spinner",
+      size: spinnerSize,
+      color: resolvedTextColor
+    }) : /*#__PURE__*/React.createElement(ActivityIndicator, {
+      size: loadingSize,
+      color: resolvedTextColor
+    });
+    return /*#__PURE__*/React.createElement(View, {
+      style: [buttonTokens.layout.iconWrapper, loadingIconWrapperStyle]
+    }, loadingIndicator ?? defaultIndicator);
+  };
+  const label = loading && loadingText !== undefined ? loadingText : text !== undefined ? text : children;
+  const sharedLabelTextStyle = useMemo(() => ({
+    fontFamily: buttonTokens.typography.fontFamily,
+    fontWeight: buttonTokens.typography.fontWeight,
+    fontSize: sizeTokens.fontSize,
+    lineHeight: sizeTokens.fontSize * buttonTokens.typography.lineHeightMultiplier,
+    color: resolvedTextColor,
+    textTransform: uppercase ? 'uppercase' : undefined
+  }), [buttonTokens.typography.fontFamily, buttonTokens.typography.fontWeight, buttonTokens.typography.lineHeightMultiplier, resolvedTextColor, sizeTokens.fontSize, uppercase]);
+  const renderText = () => {
+    if (label === undefined || label === null) {
+      return null;
+    }
+    const sharedTextStyle = sharedLabelTextStyle;
+    if (isText(label)) {
+      const content = isString(label) ? ensureSpace(label, autoInsertSpace) : String(label);
+      return /*#__PURE__*/React.createElement(Text, {
+        style: [buttonTokens.layout.text, sharedTextStyle, textStyle],
+        numberOfLines: 1,
+        allowFontScaling: allowFontScaling,
+        maxFontSizeMultiplier: maxFontSizeMultiplier
+      }, content);
+    }
+    return label;
+  };
+  const content = /*#__PURE__*/React.createElement(View, {
+    style: [buttonTokens.layout.content, contentStyle]
+  }, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, renderLoading(), renderText()) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPosition === 'left' && renderIcon(), renderText(), icon && iconPosition === 'right' && renderIcon()));
+  const {
+    onPress,
+    onPressIn,
+    onPressOut,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityRole,
+    accessibilityState,
+    android_ripple: androidRippleProp,
+    ...viewProps
+  } = pressableProps;
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (isText(label) ? String(label) : undefined);
+  const {
+    interactionProps,
+    states
+  } = useAriaPress({
+    disabled: isDisabled,
+    onPress: onPress || undefined,
+    onPressStart: onPressIn || undefined,
+    onPressEnd: onPressOut || undefined
+  });
+  const resolvedOpacity = disabled ? buttonTokens.states.disabledOpacity : loading ? buttonTokens.states.loadingOpacity : states.pressed ? buttonTokens.states.pressedOpacity : 1;
+  const containerStyle = useMemo(() => ({
+    minHeight: sizeTokens.height,
+    paddingHorizontal: sizeTokens.paddingHorizontal,
+    borderRadius,
+    backgroundColor,
+    borderColor,
+    borderWidth: resolvedBorderWidth,
+    opacity: resolvedOpacity
+  }), [backgroundColor, borderColor, borderRadius, resolvedBorderWidth, resolvedOpacity, sizeTokens.height, sizeTokens.paddingHorizontal]);
+  const rippleClipStyle = useMemo(() => Platform.OS === 'android' && borderRadius > 0 && !shouldShowShadow ? {
+    overflow: 'hidden'
+  } : null, [borderRadius, shouldShowShadow]);
+  const baseContainerStyle = useMemo(() => [buttonTokens.layout.base, containerStyle, rippleClipStyle, block ? buttonTokens.layout.block : null, shadowStyle, gradientWebStyle, style], [block, buttonTokens.layout.base, buttonTokens.layout.block, containerStyle, gradientWebStyle, rippleClipStyle, shadowStyle, style]);
+  const mergedAccessibilityState = {
+    ...accessibilityState,
+    disabled: isDisabled,
+    busy: loading
+  };
+  const defaultRippleColor = rippleColorProp ?? (derivedMode === 'text' || derivedMode === 'outlined' || legacyPlain ? resolvedTextColor : type === 'default' && !normalizedColor ? withAlpha(resolvedTextColor, 0.15) : buttonTokens.colors.ripple);
+  const resolvedAndroidRipple = useMemo(() => Platform.OS === 'android' ? androidRippleProp ?? {
+    color: defaultRippleColor,
+    borderless: false
+  } : androidRippleProp, [androidRippleProp, defaultRippleColor]);
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    ref: forwardedRef,
+    disabled: isDisabled,
+    style: baseContainerStyle,
+    android_ripple: resolvedAndroidRipple
+  }, interactionProps, {
+    accessibilityState: mergedAccessibilityState,
+    accessibilityRole: accessibilityRole ?? 'button',
+    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityHint: accessibilityHint
+  }, viewProps), content);
+});
+Button.displayName = 'Button';
+export default Button;

package/dist/es/button/ButtonContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const ButtonGroupContext = /*#__PURE__*/React.createContext(null);

package/dist/es/button/ButtonGroup.js

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { Platform, View } from 'react-native';
+import { ButtonGroupContext } from './ButtonContext';
+import { useButtonTokens } from './tokens';
+export const ButtonGroup = /*#__PURE__*/React.memo(({
+  children,
+  direction = 'horizontal',
+  spacing,
+  style,
+  type,
+  size,
+  plain,
+  block,
+  round,
+  square,
+  shadow,
+  disabled,
+  iconPosition,
+  hairline,
+  mode
+}) => {
+  const tokens = useButtonTokens();
+  const gap = spacing ?? tokens.spacing.groupGap;
+  const isHorizontal = direction === 'horizontal';
+  const supportsGap = Platform.OS === 'web';
+  const groupValue = useMemo(() => ({
+    type,
+    size,
+    plain,
+    block,
+    round,
+    square,
+    shadow,
+    disabled,
+    iconPosition,
+    hairline,
+    mode
+  }), [type, size, plain, block, round, square, shadow, disabled, iconPosition, hairline, mode]);
+  const containerStyle = 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];
+  }, [isHorizontal, block, supportsGap, gap, style]);
+  const content = useMemo(() => {
+    if (supportsGap) {
+      return children;
+    }
+    const childArray = React.Children.toArray(children).filter(child => child != null);
+    return childArray.map((child, index) => {
+      if (! /*#__PURE__*/React.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.cloneElement(element, {
+        style: [element.props.style, marginStyle],
+        key: element.key ?? index
+      });
+    });
+  }, [children, supportsGap, isHorizontal, gap]);
+  return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
+    value: groupValue
+  }, /*#__PURE__*/React.createElement(View, {
+    style: containerStyle
+  }, content));
+});
+ButtonGroup.displayName = 'ButtonGroup';

package/dist/es/button/index.js

@@ -0,0 +1,7 @@
+import { Button as ButtonBase } from './Button';
+import { ButtonGroup } from './ButtonGroup';
+const Button = Object.assign(ButtonBase, {
+  Group: ButtonGroup
+});
+export default Button;
+export { Button };

package/dist/es/button/tokens.js

@@ -0,0 +1,175 @@
+import { StyleSheet } from 'react-native';
+import { createComponentTokensHook } from '../../design-system';
+import { hexToRgb } from '../../utils';
+const isDarkThemeBackground = color => {
+  const rgb = hexToRgb(color);
+  return !!rgb && (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 < 140;
+};
+const createButtonTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii,
+    fontSize,
+    typography,
+    opacity
+  } = foundations;
+  const buildTone = (tone, text) => {
+    const ramp = palette[tone];
+    const baseBackground = ramp[500];
+    return {
+      background: baseBackground,
+      border: baseBackground,
+      text: text ?? ramp.foreground ?? '#ffffff',
+      tonalBackground: ramp[100],
+      tonalBorder: ramp[200],
+      tonalText: ramp[700] ?? ramp[800] ?? '#111111'
+    };
+  };
+  const darkTheme = isDarkThemeBackground(palette.default[50]);
+  const baseRadius = Math.max(0, Math.round(radii.xs / 2));
+  const defaultBackground = darkTheme ? palette.default[100] : '#ffffff';
+  const defaultBorder = darkTheme ? palette.default[300] : '#ebedf0';
+  const defaultText = darkTheme ? palette.default.foreground ?? '#f4f6fb' : '#323233';
+  return {
+    defaults: {
+      type: 'default',
+      size: 'normal',
+      plain: false,
+      block: false,
+      round: false,
+      square: false,
+      hairline: false,
+      iconPosition: 'left',
+      mode: 'contained',
+      loading: false,
+      loadingType: 'circular',
+      loadingSize: 'small',
+      disabled: false,
+      autoInsertSpace: true,
+      uppercase: false,
+      allowFontScaling: true
+    },
+    layout: {
+      base: {
+        borderStyle: 'solid',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        alignSelf: 'flex-start'
+      },
+      block: {
+        alignSelf: 'stretch',
+        width: '100%'
+      },
+      content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      iconWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      text: {
+        fontWeight: '400'
+      }
+    },
+    colors: {
+      ripple: 'rgba(255,255,255,0.35)',
+      backgroundTransparent: 'transparent',
+      backgroundPlain: defaultBackground,
+      textDark: '#ffffff',
+      textLight: '#111111',
+      tones: {
+        default: {
+          background: defaultBackground,
+          border: defaultBorder,
+          text: defaultText,
+          tonalBackground: darkTheme ? palette.default[200] : palette.default[100],
+          tonalBorder: defaultBorder,
+          tonalText: defaultText
+        },
+        primary: buildTone('primary'),
+        info: buildTone('info'),
+        success: buildTone('success'),
+        warning: buildTone('warning', palette.warning.foreground ?? '#ffffff'),
+        danger: buildTone('danger')
+      }
+    },
+    typography: {
+      fontFamily: typography.fontFamily,
+      lineHeightMultiplier: typography.lineHeightMultiplier,
+      fontWeight: typography.weight.medium
+    },
+    sizing: {
+      sizes: {
+        large: {
+          height: 50,
+          fontSize: fontSize.lg,
+          paddingHorizontal: fontSize.lg,
+          iconSize: fontSize.lg,
+          radius: baseRadius
+        },
+        normal: {
+          height: 44,
+          fontSize: fontSize.sm,
+          paddingHorizontal: fontSize.md,
+          iconSize: fontSize.sm,
+          radius: baseRadius
+        },
+        small: {
+          height: 32,
+          fontSize: fontSize.xs,
+          paddingHorizontal: fontSize.xs,
+          iconSize: fontSize.xs,
+          radius: baseRadius
+        },
+        mini: {
+          height: 24,
+          fontSize: fontSize.xxs,
+          paddingHorizontal: fontSize.xxs,
+          iconSize: fontSize.xxs,
+          radius: baseRadius
+        }
+      }
+    },
+    borders: {
+      width: 1,
+      hairlineWidth: StyleSheet.hairlineWidth
+    },
+    spacing: {
+      iconGap: spacing.sm,
+      groupGap: spacing.xs
+    },
+    states: {
+      disabledOpacity: opacity.disabled,
+      loadingOpacity: opacity.loading,
+      pressedOpacity: opacity.pressed
+    },
+    shadows: {
+      1: {
+        color: '#0f1a38',
+        opacity: 0.12,
+        radius: 2,
+        offsetY: 2,
+        elevation: 2
+      },
+      2: {
+        color: '#0f1a38',
+        opacity: 0.15,
+        radius: 4,
+        offsetY: 3,
+        elevation: 3
+      },
+      3: {
+        color: '#0f1a38',
+        opacity: 0.2,
+        radius: 6,
+        offsetY: 4,
+        elevation: 5
+      }
+    }
+  };
+};
+export const useButtonTokens = createComponentTokensHook('button', createButtonTokens);