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

package/dist/es/action-sheet/tokens.js

@@ -0,0 +1,137 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createActionSheetTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize
+  } = foundations;
+  return {
+    defaults: {
+      closeOnClickAction: false,
+      closeable: true,
+      round: true,
+      safeAreaInsetBottom: true,
+      overlay: true,
+      lockScroll: true
+    },
+    layout: {
+      popup: {
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingBottom: 0
+      },
+      panel: {
+        width: '100%',
+        maxHeight: '80%'
+      },
+      header: {
+        position: 'relative',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16
+      },
+      titleContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      title: {
+        fontWeight: '600',
+        textAlign: 'center'
+      },
+      titleNode: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      closeButton: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: 48,
+        height: 48,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      descriptionContainer: {
+        paddingTop: 12,
+        paddingBottom: 20,
+        paddingHorizontal: 16
+      },
+      description: {
+        textAlign: 'center',
+        lineHeight: 20
+      },
+      descriptionNode: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      actions: {
+        width: '100%'
+      },
+      item: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%'
+      },
+      itemWithIcon: {
+        flexDirection: 'row',
+        justifyContent: 'center'
+      },
+      itemTextWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      itemText: {
+        lineHeight: 24
+      },
+      subname: {
+        marginTop: 4,
+        fontSize: 12,
+        lineHeight: 18
+      },
+      subnameNode: {
+        marginTop: 4
+      },
+      icon: {
+        marginRight: 12
+      },
+      cancelGap: {
+        width: '100%',
+        marginBottom: 0
+      },
+      cancel: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      cancelText: {
+        lineHeight: 24
+      }
+    },
+    colors: {
+      background: '#ffffff',
+      title: palette.default[900],
+      description: palette.default[500],
+      item: palette.default[900],
+      subitem: palette.default[500],
+      cancel: palette.default[900],
+      disabled: palette.default[400],
+      border: palette.default[200],
+      itemBackground: '#ffffff',
+      itemPressedBackground: palette.default[100],
+      cancelBackground: '#ffffff',
+      cancelGapBackground: palette.default[100] ?? '#f1f2f5'
+    },
+    typography: {
+      title: fontSize.lg,
+      item: fontSize.md,
+      description: fontSize.sm
+    },
+    spacing: {
+      horizontal: spacing.md,
+      vertical: 14,
+      cancelGap: 8
+    }
+  };
+};
+export const useActionSheetTokens = createComponentTokensHook('actionSheet', createActionSheetTokens);

package/dist/es/area/Area.js

@@ -0,0 +1,66 @@
+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, { useCallback, useMemo } from 'react';
+import Picker from '../picker';
+import { buildAreaColumns } from './utils';
+const normalizeCascadeValue = (root, raw, depth) => {
+  if (!raw) return raw;
+  const input = Array.isArray(raw) ? raw.map(String) : [String(raw)];
+  const result = [];
+  let options = root;
+  for (let i = 0; i < depth; i += 1) {
+    if (!options?.length) break;
+    const wanted = input[i];
+    const nextOption = options.find(o => String(o.value) === wanted) ?? options[0];
+    if (!nextOption) break;
+    result.push(String(nextOption.value));
+    options = nextOption.children;
+  }
+  return result;
+};
+const Area = props => {
+  const {
+    areaList,
+    columnsNum = 3,
+    value,
+    defaultValue,
+    onChange,
+    onConfirm,
+    interactionMode = 'sync',
+    ...pickerProps
+  } = props;
+  const resolvedColumnsNum = columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3;
+  const {
+    province_list,
+    city_list,
+    county_list
+  } = areaList;
+  const columns = useMemo(() => buildAreaColumns({
+    province_list,
+    city_list,
+    county_list
+  }, resolvedColumnsNum), [province_list, city_list, county_list, resolvedColumnsNum]);
+  const normalizedValue = useMemo(() => {
+    if (value === undefined) return undefined;
+    return normalizeCascadeValue(columns, value, resolvedColumnsNum);
+  }, [columns, resolvedColumnsNum, value]);
+  const normalizedDefaultValue = useMemo(() => {
+    if (defaultValue === undefined) return undefined;
+    return normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum);
+  }, [columns, defaultValue, resolvedColumnsNum]);
+  const handleChange = useCallback((values, options) => {
+    onChange?.(values.map(String), options);
+  }, [onChange]);
+  const handleConfirm = useCallback((values, options) => {
+    onConfirm?.(values.map(String), options);
+  }, [onConfirm]);
+  return /*#__PURE__*/React.createElement(Picker, _extends({}, pickerProps, {
+    columns: columns,
+    interactionMode: interactionMode,
+    value: normalizedValue,
+    defaultValue: normalizedDefaultValue,
+    onChange: onChange ? handleChange : undefined,
+    onConfirm: onConfirm ? handleConfirm : undefined
+  }));
+};
+Area.displayName = 'Area';
+export default Area;

package/dist/es/area/index.js

@@ -0,0 +1,2 @@
+import Area from './Area';
+export default Area;

package/dist/es/area/utils.js

@@ -0,0 +1,67 @@
+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);
+export 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;
+  });
+};

package/dist/es/avatar/Avatar.js

@@ -0,0 +1,72 @@
+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 Image from '../image';
+import { isNumber } from '../../utils';
+import { useAvatarTokens } from './tokens';
+const transparentContainerStyle = {
+  backgroundColor: 'transparent'
+};
+export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    src,
+    source,
+    icon,
+    text,
+    size,
+    width,
+    height,
+    shape,
+    fit,
+    color,
+    backgroundColor,
+    style,
+    textStyle,
+    contentStyle,
+    tokensOverride,
+    ...pressableProps
+  } = props;
+  const tokens = useAvatarTokens(tokensOverride);
+  const resolvedSize = size ?? tokens.defaults.size;
+  const resolvedShape = shape ?? tokens.defaults.shape;
+  const baseSize = isNumber(resolvedSize) ? resolvedSize : tokens.sizing.sizes[resolvedSize];
+  const avatarWidth = width ?? baseSize;
+  const avatarHeight = height ?? baseSize;
+  const borderRadius = resolvedShape === 'circle' ? Math.min(avatarWidth, avatarHeight) / 2 : Math.max(tokens.radii.squareMin, Math.min(avatarWidth, avatarHeight) / tokens.radii.squareDivisor);
+  const fallbackText = text ? text.trim().slice(0, 2).toUpperCase() : undefined;
+  const fallbackContent = icon ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.iconWrapper, {
+      width: Math.min(avatarWidth, tokens.sizing.iconMaxSize),
+      height: Math.min(avatarHeight, tokens.sizing.iconMaxSize)
+    }, contentStyle]
+  }, icon) : fallbackText && /*#__PURE__*/React.createElement(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
+  }, fallbackText);
+  const content = src || source ? /*#__PURE__*/React.createElement(Image, {
+    src: src,
+    source: source,
+    containerStyle: transparentContainerStyle,
+    style: tokens.layout.image,
+    fit: fit ?? 'cover',
+    loadingText: null,
+    loadingSize: tokens.sizing.loadingSize,
+    showError: true,
+    fallback: fallbackContent
+  }) : fallbackContent;
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    ref: ref,
+    style: [tokens.layout.container, {
+      width: avatarWidth,
+      height: avatarHeight,
+      borderRadius,
+      backgroundColor: backgroundColor ?? tokens.colors.background
+    }, style]
+  }, pressableProps), content);
+});
+Avatar.displayName = 'Avatar';
+export default Avatar;

package/dist/es/avatar/index.js

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

package/dist/es/avatar/tokens.js

@@ -0,0 +1,48 @@
+import { createComponentTokensHook } from "../../design-system";
+export const createAvatarTokens = foundations => ({
+  defaults: {
+    size: "medium",
+    shape: "circle"
+  },
+  layout: {
+    container: {
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden"
+    },
+    text: {
+      includeFontPadding: false,
+      textAlignVertical: "center"
+    },
+    image: {
+      width: "100%",
+      height: "100%"
+    },
+    iconWrapper: {
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  },
+  colors: {
+    background: foundations.palette.default[100],
+    text: foundations.palette.default[800]
+  },
+  typography: {
+    fontWeight: "600",
+    fallbackTextScale: 0.5
+  },
+  sizing: {
+    sizes: {
+      small: 24,
+      medium: 32,
+      large: 40
+    },
+    iconMaxSize: 32,
+    loadingSize: 12
+  },
+  radii: {
+    squareMin: 6,
+    squareDivisor: 6
+  }
+});
+export const useAvatarTokens = createComponentTokensHook("avatar", createAvatarTokens);

package/dist/es/badge/Badge.js

@@ -0,0 +1,160 @@
+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, { useCallback, useMemo, useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { isNumericLike, isRenderable } from '../../utils';
+import { useBadgeTokens } from './tokens';
+export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    content,
+    color,
+    textColor,
+    dot: dotProp,
+    max,
+    offset,
+    showZero,
+    badgeStyle,
+    textStyle: userTextStyle,
+    onPress,
+    style,
+    tokensOverride,
+    ...rest
+  } = props;
+  const tokens = useBadgeTokens(tokensOverride);
+  const dot = dotProp ?? tokens.defaults.dot;
+  const resolvedShowZero = showZero ?? tokens.defaults.showZero;
+  const hasChildren = React.Children.count(children) > 0;
+  const {
+    visible,
+    formattedContent
+  } = useMemo(() => {
+    const numericContent = isNumericLike(content) ? Number(content) : null;
+    const shouldHide = numericContent === 0 && !resolvedShowZero;
+    const isVisible = dot || isRenderable(content) && !shouldHide;
+    if (!isVisible || dot) return {
+      visible: isVisible,
+      formattedContent: null
+    };
+    const numericMax = isNumericLike(max) ? Number(max) : null;
+    const finalContent = numericContent !== null && numericMax !== null && numericContent > numericMax ? `${numericMax}+` : content;
+    return {
+      visible: true,
+      formattedContent: finalContent
+    };
+  }, [content, dot, max, resolvedShowZero]);
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0
+  });
+  const handleLayout = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width !== size.width || height !== size.height) {
+      setSize({
+        width,
+        height
+      });
+    }
+  }, [size.width, size.height]);
+  const transformStyle = useMemo(() => {
+    if (!hasChildren) return undefined;
+    if (dot) {
+      const half = tokens.sizing.dotSize / 2;
+      return {
+        transform: [{
+          translateX: half
+        }, {
+          translateY: -half
+        }]
+      };
+    }
+    if (size.width === 0) return {
+      opacity: 0
+    };
+    return {
+      transform: [{
+        translateX: size.width / 2
+      }, {
+        translateY: -size.height / 2
+      }]
+    };
+  }, [hasChildren, dot, tokens.sizing.dotSize, size.width, size.height]);
+  const baseBadgeStyle = useMemo(() => {
+    if (dot) {
+      return {
+        width: tokens.sizing.dotSize,
+        height: tokens.sizing.dotSize,
+        borderRadius: tokens.radii.dot,
+        backgroundColor: color ?? tokens.colors.dot
+      };
+    }
+    return {
+      minWidth: tokens.sizing.minWidth,
+      minHeight: tokens.sizing.height,
+      paddingHorizontal: tokens.sizing.paddingHorizontal,
+      paddingVertical: tokens.sizing.paddingVertical,
+      borderRadius: tokens.radii.badge,
+      borderWidth: tokens.borders.width,
+      borderColor: tokens.colors.border,
+      backgroundColor: color ?? tokens.colors.background
+    };
+  }, [dot, color, tokens]);
+  const mergedTextStyle = 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], [textColor, tokens, userTextStyle]);
+  const offsetStyle = useMemo(() => {
+    if (!offset) return undefined;
+    const [x, y] = offset;
+    return hasChildren ? {
+      right: x,
+      top: y
+    } : {
+      marginLeft: x,
+      marginTop: y
+    };
+  }, [offset, hasChildren]);
+  const badgeElement = useMemo(() => {
+    if (!visible) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      pointerEvents: hasChildren ? 'none' : 'auto',
+      onLayout: hasChildren && !dot ? handleLayout : undefined,
+      style: [hasChildren ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, !hasChildren ? style : undefined]
+    }, !dot && (/*#__PURE__*/React.isValidElement(formattedContent) ? formattedContent : /*#__PURE__*/React.createElement(Text, {
+      style: mergedTextStyle
+    }, formattedContent)));
+  }, [visible, hasChildren, dot, handleLayout, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, style, formattedContent, mergedTextStyle]);
+  if (hasChildren) {
+    return onPress ? /*#__PURE__*/React.createElement(Pressable, _extends({
+      ref: ref,
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => [tokens.layout.wrapper, style, pressed && {
+        opacity: tokens.defaults.pressedOpacity
+      }]
+    }, rest), children, badgeElement) : /*#__PURE__*/React.createElement(View, _extends({
+      ref: ref,
+      style: [tokens.layout.wrapper, style]
+    }, rest), children, badgeElement);
+  }
+  if (!visible) return null;
+  return onPress ? /*#__PURE__*/React.createElement(Pressable, _extends({
+    ref: ref,
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [tokens.layout.pressableStandalone, pressed && {
+      opacity: tokens.defaults.pressedOpacity
+    }]
+  }, rest), badgeElement) : (/*#__PURE__*/React.cloneElement(badgeElement, {
+    ref,
+    ...rest
+  }));
+});
+Badge.displayName = 'Badge';

package/dist/es/badge/index.js

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

package/dist/es/badge/tokens.js

@@ -0,0 +1,73 @@
+import { createComponentTokensHook } from '../../design-system';
+const createBadgeTokens = ({
+  palette,
+  spacing,
+  fontSize,
+  radii,
+  typography
+}) => {
+  const dotSize = 8;
+  return {
+    defaults: {
+      dot: false,
+      showZero: true,
+      pressedOpacity: 0.9
+    },
+    layout: {
+      wrapper: {
+        position: 'relative',
+        alignSelf: 'flex-start'
+      },
+      badgeAbsolute: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1
+      },
+      badgeStandalone: {
+        alignSelf: 'flex-start',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      pressableStandalone: {
+        alignSelf: 'flex-start',
+        flexDirection: 'row'
+      },
+      text: {
+        textAlign: 'center',
+        includeFontPadding: false,
+        textAlignVertical: 'center'
+      }
+    },
+    colors: {
+      background: palette.danger[500],
+      dot: palette.danger[500],
+      text: palette.danger.foreground ?? '#fff',
+      border: '#fff'
+    },
+    typography: {
+      fontSize: fontSize.xs,
+      fontWeight: typography.weight.bold,
+      fontFamily: typography.fontFamily,
+      lineHeight: fontSize.xs * typography.lineHeightMultiplier
+    },
+    sizing: {
+      minWidth: 18,
+      height: 18,
+      paddingHorizontal: spacing.xs,
+      paddingVertical: spacing.xxs,
+      dotSize
+    },
+    radii: {
+      badge: radii.pill,
+      dot: dotSize / 2
+    },
+    borders: {
+      width: 1
+    }
+  };
+};
+export const useBadgeTokens = createComponentTokensHook('badge', createBadgeTokens);