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

package/dist/es/tabs/index.js

@@ -0,0 +1,8 @@
+import TabsBase from './Tabs';
+import TabPane from './TabPane';
+export { useTabsTokens } from './tokens';
+const Tabs = Object.assign(TabsBase, {
+  TabPane
+});
+export { TabPane };
+export default Tabs;

package/dist/es/tabs/tokens.js

@@ -0,0 +1,95 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    radii
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  return {
+    defaults: {
+      type: 'line',
+      align: 'center',
+      ellipsis: true,
+      swipeThreshold: 5,
+      animated: true,
+      duration: 300,
+      lazyRender: true
+    },
+    colors: {
+      text: palette.default[700],
+      textActive: palette.primary[600],
+      textDisabled: palette.default[400],
+      description: palette.default[500],
+      descriptionActive: palette.default[600],
+      descriptionBackground: palette.default[100],
+      descriptionActiveBackground: palette.primary[600],
+      border: palette.default[200],
+      indicator: palette.primary[600],
+      cardBackground: '#ffffff',
+      cardActiveBackground: palette.primary[600],
+      cardBorder: palette.primary[600],
+      cardActiveBorder: palette.primary[600],
+      cardActiveText: onPrimary,
+      capsuleBackground: 'transparent',
+      capsuleActiveBackground: palette.primary[600],
+      capsuleBorder: 'transparent',
+      capsuleActiveBorder: 'transparent',
+      capsuleText: palette.default[700],
+      capsuleActiveText: onPrimary,
+      badgeText: palette.default[500],
+      jumboBackground: palette.default[50],
+      jumboActiveBackground: '#ffffff',
+      jumboBorder: 'transparent',
+      jumboActiveBorder: palette.primary[400],
+      jumboDescription: palette.default[500],
+      jumboDescriptionActive: onPrimary,
+      jumboDescriptionBackground: palette.default[100],
+      jumboDescriptionActiveBackground: palette.primary[500]
+    },
+    tabList: {
+      height: 44,
+      paddingHorizontal: spacing.lg,
+      paddingVertical: 0,
+      paddingBottom: spacing.md,
+      background: '#ffffff'
+    },
+    typography: {
+      titleSize: fontSize.sm,
+      titleWeight: foundations.typography.weight.medium,
+      titleActiveWeight: foundations.typography.weight.semiBold,
+      descriptionSize: fontSize.xs,
+      jumboTitleSize: fontSize.md,
+      jumboLineHeight: Math.round(fontSize.md * 1.6)
+    },
+    indicator: {
+      height: 3,
+      radius: 999,
+      width: 40,
+      offset: spacing.md
+    },
+    card: {
+      radius: radii.xs,
+      paddingHorizontal: spacing.sm,
+      paddingVertical: spacing.xs,
+      height: 30,
+      marginHorizontal: spacing.md
+    },
+    capsule: {
+      radius: 999,
+      paddingHorizontal: spacing.sm,
+      paddingVertical: spacing.ssm
+    },
+    jumbo: {
+      radius: 16,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      height: 64,
+      descriptionPaddingHorizontal: spacing.sm,
+      descriptionPaddingVertical: spacing.xxs,
+      descriptionRadius: 10
+    }
+  };
+};
+export const useTabsTokens = createComponentTokensHook('tabs', createTokens);

package/dist/es/tabs/useTabsAnimation.js

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+export const useTabsAnimation = ({
+  type,
+  animated,
+  scrollable,
+  align,
+  panes,
+  nameIndexMap,
+  resolvedLineWidth,
+  resolvedDuration,
+  currentName,
+  layoutMap,
+  navContainerWidthRef
+}) => {
+  const indicatorX = useRef(new Animated.Value(0)).current;
+  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const indicatorInitializedRef = useRef(false);
+  const animateIndicator = useCallback((name, immediate) => {
+    if (name == null || type !== 'line') return false;
+    const shouldUseEqualWidth = !scrollable && align !== 'start' && navContainerWidthRef.current > 0 && panes.length > 0;
+    const index = nameIndexMap.get(name) ?? -1;
+    const equalTabWidth = shouldUseEqualWidth ? navContainerWidthRef.current / panes.length : 0;
+    const layout = shouldUseEqualWidth ? {
+      x: Math.max(index, 0) * equalTabWidth,
+      width: equalTabWidth
+    } : layoutMap.current.get(name);
+    if (!layout || index < 0) {
+      return false;
+    }
+    const timing = (value, toValue) => Animated.timing(value, {
+      toValue,
+      duration: immediate || !animated ? 0 : resolvedDuration,
+      useNativeDriver: false
+    });
+    const targetWidth = resolvedLineWidth ?? layout.width;
+    const targetX = resolvedLineWidth ? layout.x + (layout.width - targetWidth) / 2 : layout.x;
+    Animated.parallel([timing(indicatorX, targetX), timing(indicatorWidth, targetWidth)]).start();
+    return true;
+  }, [align, animated, indicatorWidth, indicatorX, nameIndexMap, panes.length, resolvedDuration, resolvedLineWidth, scrollable, type, layoutMap, navContainerWidthRef]);
+  useEffect(() => {
+    if (currentName == null) return;
+    const shouldAnimate = indicatorInitializedRef.current;
+    const didAnimate = animateIndicator(currentName, !shouldAnimate);
+    if (didAnimate && !indicatorInitializedRef.current) {
+      indicatorInitializedRef.current = true;
+    }
+  }, [animateIndicator, currentName]);
+  return {
+    indicatorX,
+    indicatorWidth,
+    indicatorInitializedRef,
+    animateIndicator
+  };
+};

package/dist/es/tabs/useTabsScroll.js

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { cancelFrame, requestFrame } from './utils';
+export const useTabsScroll = ({
+  scrollable,
+  animated,
+  currentName,
+  resolvedDuration,
+  layoutMap,
+  navContainerWidthRef,
+  navContentWidthRef
+}) => {
+  const navScrollRef = useRef(null);
+  const navScrollX = useRef(new Animated.Value(0)).current;
+  const navScrollAnimRef = useRef(null);
+  const navAutoScrollingRef = useRef(false);
+  const navLastScrollXRef = useRef(0);
+  const navAutoScrollFrameRef = useRef(null);
+  const scrollIntoView = useCallback(immediate => {
+    if (!scrollable || currentName == null) return;
+    const layout = layoutMap.current.get(currentName);
+    const containerWidth = navContainerWidthRef.current;
+    if (!layout || !containerWidth) return;
+    const contentWidth = navContentWidthRef.current;
+    const targetX = layout.x - (containerWidth - layout.width) / 2;
+    const maxScroll = Math.max(contentWidth - containerWidth, 0);
+    const clampedX = Math.max(0, Math.min(targetX, maxScroll));
+    if (maxScroll <= 0) {
+      return;
+    }
+    if (Math.abs(clampedX - navLastScrollXRef.current) < 1) {
+      return;
+    }
+    if (navScrollAnimRef.current) {
+      navScrollAnimRef.current.stop();
+      navScrollAnimRef.current = null;
+    }
+    cancelFrame(navAutoScrollFrameRef.current);
+    navAutoScrollFrameRef.current = null;
+    if (immediate || !animated) {
+      navAutoScrollingRef.current = true;
+      navScrollX.setValue(clampedX);
+      navAutoScrollFrameRef.current = requestFrame(() => {
+        navAutoScrollFrameRef.current = null;
+        navAutoScrollingRef.current = false;
+      });
+      return;
+    }
+    navScrollX.setValue(navLastScrollXRef.current);
+    navAutoScrollingRef.current = true;
+    navScrollAnimRef.current = Animated.timing(navScrollX, {
+      toValue: clampedX,
+      duration: resolvedDuration,
+      useNativeDriver: false
+    });
+    navScrollAnimRef.current.start(({
+      finished
+    }) => {
+      navScrollAnimRef.current = null;
+      navAutoScrollingRef.current = false;
+      if (!finished) {
+        return;
+      }
+      navLastScrollXRef.current = clampedX;
+    });
+  }, [animated, currentName, navScrollX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
+  useEffect(() => {
+    if (!scrollable) return;
+    const listenerId = navScrollX.addListener(({
+      value
+    }) => {
+      navLastScrollXRef.current = value;
+      navScrollRef.current?.scrollTo({
+        x: value,
+        y: 0,
+        animated: false
+      });
+    });
+    return () => {
+      navScrollX.removeListener(listenerId);
+    };
+  }, [navScrollX, scrollable]);
+  useEffect(() => {
+    return () => {
+      cancelFrame(navAutoScrollFrameRef.current);
+      navAutoScrollFrameRef.current = null;
+    };
+  }, []);
+  const handleNavScrollBeginDrag = useCallback(event => {
+    navAutoScrollingRef.current = false;
+    if (navScrollAnimRef.current) {
+      navScrollAnimRef.current.stop();
+      navScrollAnimRef.current = null;
+    }
+    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  }, []);
+  const handleNavScroll = useCallback(event => {
+    if (navAutoScrollingRef.current) {
+      return;
+    }
+    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  }, []);
+  return {
+    navScrollRef,
+    navScrollX,
+    scrollIntoView,
+    handleNavScrollBeginDrag,
+    handleNavScroll
+  };
+};

package/dist/es/tabs/utils.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { isFunction } from '../../utils';
+import TabPane from './TabPane';
+const canUseRaf = typeof requestAnimationFrame !== 'undefined' && isFunction(requestAnimationFrame) && typeof cancelAnimationFrame !== 'undefined' && isFunction(cancelAnimationFrame);
+export const requestFrame = canUseRaf ? cb => requestAnimationFrame(cb) : cb => setTimeout(cb, 16);
+export const cancelFrame = id => {
+  if (id == null) return;
+  if (canUseRaf) {
+    cancelAnimationFrame(id);
+  } else {
+    clearTimeout(id);
+  }
+};
+export const isTabPaneElement = child => {
+  if (! /*#__PURE__*/React.isValidElement(child)) return false;
+  if (child.type === TabPane) return true;
+  const type = child.type;
+  return type.displayName === 'Tabs.TabPane';
+};

package/dist/es/tag/Tag.js

@@ -0,0 +1,95 @@
+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 from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { Close } from 'react-native-system-icon';
+import { isFunction, isText } from '../../utils';
+import { useTagTokens } from './tokens';
+export const Tag = props => {
+  const {
+    tokensOverride,
+    children,
+    type: typeProp,
+    size: sizeProp,
+    plain: plainProp,
+    round: roundProp,
+    mark: markProp,
+    color,
+    textColor,
+    show: showProp,
+    closeable,
+    closeIcon,
+    onClose,
+    onPress,
+    textStyle,
+    style,
+    ...rest
+  } = props;
+  const tokens = useTagTokens(tokensOverride);
+  const type = typeProp ?? tokens.defaults.type;
+  const size = sizeProp ?? tokens.defaults.size;
+  const plain = plainProp ?? tokens.defaults.plain;
+  const round = roundProp ?? tokens.defaults.round;
+  const mark = markProp ?? tokens.defaults.mark;
+  const show = showProp ?? tokens.defaults.show;
+  if (!show) {
+    return null;
+  }
+  const tone = tokens.colors.toneMap[type] ?? tokens.colors.toneMap.default;
+  const sizeTokens = tokens.sizing.sizes[size];
+  const backgroundColor = plain ? tokens.colors.plainBackground : color ?? tone.background;
+  const resolvedTextColor = textColor ?? (plain ? color ?? tone.background : tone.text);
+  const borderColor = plain ? color ?? tone.background : 'transparent';
+  const borderWidth = plain ? tokens.borders.width : 0;
+  const borderRadius = round ? tokens.radii.round : sizeTokens.borderRadius;
+  const containerStyle = [tokens.layout.container, {
+    backgroundColor,
+    paddingHorizontal: sizeTokens.paddingHorizontal,
+    paddingVertical: sizeTokens.paddingVertical,
+    borderRadius,
+    borderWidth,
+    borderColor
+  }, mark ? {
+    borderTopLeftRadius: tokens.radii.markLeading,
+    borderBottomLeftRadius: tokens.radii.markLeading,
+    borderTopRightRadius: tokens.radii.round,
+    borderBottomRightRadius: tokens.radii.round
+  } : null, style];
+  const label = children == null || children === false ? null : isText(children) ? /*#__PURE__*/React.createElement(Text, {
+    style: [{
+      color: resolvedTextColor,
+      fontSize: sizeTokens.fontSize,
+      lineHeight: sizeTokens.lineHeight,
+      fontFamily: tokens.typography.fontFamily,
+      fontWeight: tokens.typography.fontWeight
+    }, textStyle]
+  }, children) : children;
+  const close = !closeable ? null : /*#__PURE__*/React.createElement(Pressable, {
+    accessibilityRole: "button",
+    hitSlop: tokens.spacing.closeHitSlop,
+    style: [tokens.layout.close, {
+      marginLeft: tokens.spacing.closeGap
+    }],
+    onPress: event => {
+      event.stopPropagation?.();
+      onClose?.();
+    }
+  }, isFunction(closeIcon) ? closeIcon(resolvedTextColor, tokens.sizing.closeIconSize) : closeIcon ?? /*#__PURE__*/React.createElement(Close, {
+    color: resolvedTextColor,
+    size: tokens.sizing.closeIconSize
+  }));
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, label, close);
+  if (onPress) {
+    return /*#__PURE__*/React.createElement(Pressable, _extends({
+      accessibilityRole: "button",
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => [containerStyle, pressed && {
+        opacity: tokens.defaults.pressedOpacity
+      }]
+    }, rest), content);
+  }
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: containerStyle
+  }, rest), content);
+};

package/dist/es/tag/index.js

@@ -0,0 +1,2 @@
+import { Tag } from './Tag';
+export default Tag;

package/dist/es/tag/tokens.js

@@ -0,0 +1,97 @@
+import { createComponentTokensHook } from '../../design-system';
+import { getHairlineWidth } from '../../utils';
+const buildTone = (palette, key, fallbackText) => ({
+  background: palette[key][500],
+  text: fallbackText ?? palette[key].foreground ?? '#ffffff'
+});
+export const createTagTokens = foundations => {
+  const {
+    palette,
+    radii,
+    typography,
+    opacity,
+    spacing
+  } = foundations;
+  return {
+    defaults: {
+      type: 'default',
+      size: 'small',
+      plain: false,
+      round: false,
+      mark: false,
+      show: true,
+      pressedOpacity: opacity.pressed
+    },
+    layout: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start'
+      },
+      close: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    },
+    colors: {
+      plainBackground: '#ffffff',
+      toneMap: {
+        default: buildTone(palette, 'default', '#ffffff'),
+        primary: buildTone(palette, 'primary'),
+        success: buildTone(palette, 'success'),
+        warning: buildTone(palette, 'warning', palette.warning.foreground ?? palette.warning[900]),
+        danger: buildTone(palette, 'danger')
+      }
+    },
+    typography: {
+      fontFamily: typography.fontFamily,
+      lineHeightMultiplier: typography.lineHeightMultiplier,
+      fontWeight: typography.weight.medium
+    },
+    sizing: {
+      sizes: {
+        mini: {
+          fontSize: 10,
+          paddingHorizontal: 4,
+          paddingVertical: 0,
+          borderRadius: 2,
+          lineHeight: 16
+        },
+        small: {
+          fontSize: 12,
+          paddingHorizontal: 4,
+          paddingVertical: 0,
+          borderRadius: 2,
+          lineHeight: 16
+        },
+        medium: {
+          fontSize: 12,
+          paddingHorizontal: 6,
+          paddingVertical: 2,
+          borderRadius: 4,
+          lineHeight: 16
+        },
+        large: {
+          fontSize: 14,
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          borderRadius: 4,
+          lineHeight: 16
+        }
+      },
+      closeIconSize: 12
+    },
+    radii: {
+      round: radii.pill,
+      markLeading: radii.none
+    },
+    borders: {
+      width: getHairlineWidth()
+    },
+    spacing: {
+      closeGap: 2,
+      closeHitSlop: spacing.sm
+    }
+  };
+};
+export const useTagTokens = createComponentTokensHook('tag', createTagTokens);