react-native-system-ui 0.0.7 → 1.0.0

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

@@ -12,60 +12,42 @@ function _react() {
   return data;
 }
 var _picker = _interopRequireDefault(require("../picker"));
+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 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 sortEntries = record => record ? Object.entries(record).sort(([a], [b]) => a.localeCompare(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]) => ({
+const groupBy = (list, getKey) => {
+  const map = new Map();
+  sortEntries(list).forEach(([code, name]) => {
+    const key = getKey(code);
+    const array = map.get(key);
+    if (array) array.push({
       label: name,
       value: code
-    }));
-  }
-  const citiesByProvince = new Map();
-  sortEntries(areaList.city_list).forEach(([code, name]) => {
-    const provinceKey = getProvinceCode(code);
-    const option = {
+    });else map.set(key, [{
       label: name,
       value: code
-    };
-    const existing = citiesByProvince.get(provinceKey);
-    if (existing) {
-      existing.push(option);
-    } else {
-      citiesByProvince.set(provinceKey, [option]);
-    }
+    }]);
   });
+  return map;
+};
+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 = groupBy(areaList.city_list, getProvinceCode);
   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 countiesByCity = groupBy(areaList.county_list, getCityCode);
+    citiesByProvince.forEach(cityOption => {
+      cityOption.forEach(cityOption2 => {
+        const cityKey = getCityCode(cityOption2.value);
         const counties = countiesByCity.get(cityKey);
-        if (counties && counties.length) {
-          cityOption.children = counties;
-        }
+        if (counties && counties.length) cityOption2.children = counties;
       });
     });
   }
@@ -76,39 +58,38 @@ const buildAreaColumns = (areaList, columnsNum = 3) => {
     };
     const provinceKey = getProvinceCode(code);
     const cities = citiesByProvince.get(provinceKey);
-    if (cities && cities.length) {
-      provinceOption.children = cities;
-    }
+    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)];
+const normalizeCascadeValue = (root, rawValue, depth) => {
+  if (!rawValue) return rawValue;
+  const inputArray = Array.isArray(rawValue) ? rawValue.map(String) : [String(rawValue)];
   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];
+    const wantedValue = inputArray[i];
+    const nextOption = options.find(option => String(option.value) === wantedValue) ?? options[0];
     if (!nextOption) break;
     result.push(String(nextOption.value));
     options = nextOption.children;
   }
   return result;
 };
-const Area = props => {
+const AreaImpl = props => {
+  const tokens = (0, _tokens.useAreaTokens)();
   const {
     areaList,
-    columnsNum = 3,
+    columnsNum: columnsNumProp = tokens.defaults.columnsNum,
     value,
     defaultValue,
     onChange,
     onConfirm,
-    interactionMode = 'sync',
-    ...pickerProps
+    interactionMode: interactionModeProp = tokens.defaults.interactionMode,
+    ...rest
   } = props;
-  const resolvedColumnsNum = (0, _react().useMemo)(() => columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3, [columnsNum]);
+  const resolvedColumnsNum = (0, _react().useMemo)(() => columnsNumProp >= 1 && columnsNumProp <= 3 ? columnsNumProp : tokens.defaults.columnsNum, [columnsNumProp]);
   const {
     province_list,
     city_list,
@@ -119,22 +100,28 @@ const Area = props => {
     city_list,
     county_list
   }, 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]);
-  const handleConfirm = (0, _react().useCallback)((values, options) => {
-    onConfirm?.(values.map(String), options);
-  }, [onConfirm]);
-  return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
+  const normalize = (0, _react().useCallback)(val => val === undefined ? undefined : normalizeCascadeValue(columns, val, resolvedColumnsNum), [columns, resolvedColumnsNum]);
+  const normalizedValue = (0, _react().useMemo)(() => normalize(value), [normalize, value]);
+  const normalizedDefaultValue = (0, _react().useMemo)(() => normalize(defaultValue), [normalize, defaultValue]);
+  const onChangeRef = (0, _react().useRef)(onChange);
+  onChangeRef.current = onChange;
+  const onConfirmRef = (0, _react().useRef)(onConfirm);
+  onConfirmRef.current = onConfirm;
+  const wrappedOnChange = (0, _react().useCallback)((values, options) => {
+    onChangeRef.current?.(values.map(String), options);
+  }, []);
+  const wrappedOnConfirm = (0, _react().useCallback)((values, options) => {
+    onConfirmRef.current?.(values.map(String), options);
+  }, []);
+  return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, rest, {
     columns: columns,
-    interactionMode: interactionMode,
+    interactionMode: interactionModeProp,
     value: normalizedValue,
     defaultValue: normalizedDefaultValue,
-    onChange: onChange ? handleChange : undefined,
-    onConfirm: onConfirm ? handleConfirm : undefined
+    onChange: onChange ? wrappedOnChange : undefined,
+    onConfirm: onConfirm ? wrappedOnConfirm : undefined
   }));
 };
+const Area = /*#__PURE__*/_react().default.memo(AreaImpl);
 Area.displayName = 'Area';
 var _default = exports.default = Area;

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAreaTokens = void 0;
 var _designSystem = require("../../design-system");
-const createAreaTokens = _foundations => {
-  return {};
-};
+const createAreaTokens = _foundations => ({
+  defaults: {
+    columnsNum: 3,
+    interactionMode: 'sync'
+  }
+});
 const useAreaTokens = exports.useAreaTokens = (0, _designSystem.createComponentTokensHook)('area', createAreaTokens);

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

@@ -29,13 +29,12 @@ const AvatarFallbackText = exports.AvatarFallbackText = /*#__PURE__*/_react().de
   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,
+    style: _reactNative().StyleSheet.flatten([tokens.layout.text, {
+      color: color ?? tokens.colors.text,
+      fontWeight: tokens.typography.fontWeight
+    }, style]),
     numberOfLines: 1
   }, children);
 });
@@ -56,17 +55,17 @@ const AvatarImage = exports.AvatarImage = /*#__PURE__*/_react().default.forwardR
   }));
 });
 AvatarImage.displayName = 'Avatar.Image';
-const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+const AvatarImpl = (props, ref) => {
   const {
     src,
     source,
     icon,
     text,
-    size,
-    width,
-    height,
-    shape,
-    fit,
+    size: sizeProp,
+    width: widthProp,
+    height: heightProp,
+    shape: shapeProp,
+    fit: fitProp,
     color,
     backgroundColor,
     style,
@@ -74,36 +73,35 @@ const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props,
     contentStyle,
     children,
     tokensOverride,
-    ...pressableProps
+    ...rest
   } = props;
   const tokens = (0, _tokens.useAvatarTokens)(tokensOverride);
-  const resolvedSize = size ?? tokens.defaults.size;
-  const resolvedShape = shape ?? tokens.defaults.shape;
+  const resolvedSize = sizeProp ?? tokens.defaults.size;
+  const resolvedShape = shapeProp ?? tokens.defaults.shape;
   const baseSize = (0, _utils.isNumber)(resolvedSize) ? resolvedSize : tokens.sizing.sizes[resolvedSize];
-  const avatarWidth = width ?? baseSize;
-  const avatarHeight = height ?? baseSize;
+  const avatarWidth = widthProp ?? baseSize;
+  const avatarHeight = heightProp ?? baseSize;
   const borderRadius = resolvedShape === 'circle' ? Math.min(avatarWidth, avatarHeight) / 2 : Math.max(tokens.radii.squareMin, Math.min(avatarWidth, avatarHeight) / tokens.radii.squareDivisor);
   const transparentContainerStyle = {
     backgroundColor: tokens.colors.transparent
   };
-  const fallbackText = text ? text.trim().slice(0, 2).toUpperCase() : undefined;
   const fallbackContent = icon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.iconWrapper, {
       width: Math.min(avatarWidth, tokens.sizing.iconMaxSize),
       height: Math.min(avatarHeight, tokens.sizing.iconMaxSize)
     }, contentStyle]
-  }, icon) : fallbackText && /*#__PURE__*/_react().default.createElement(AvatarFallbackText, {
+  }, icon) : text && /*#__PURE__*/_react().default.createElement(AvatarFallbackText, {
     color: color,
     style: [{
       fontSize: Math.min(avatarWidth, avatarHeight) * tokens.typography.fallbackTextScale
     }, textStyle]
-  }, fallbackText);
+  }, text.trim().slice(0, 2).toUpperCase());
   const content = children ?? (src || source ? /*#__PURE__*/_react().default.createElement(AvatarImage, {
     src: src,
     source: source,
     containerStyle: transparentContainerStyle,
     style: tokens.layout.image,
-    fit: fit ?? 'cover',
+    fit: fitProp ?? 'cover',
     loadingText: null,
     loadingSize: tokens.sizing.loadingSize,
     showError: true,
@@ -111,13 +109,17 @@ const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props,
   }) : fallbackContent);
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     ref: ref,
+    accessibilityRole: "image",
+    accessibilityLabel: text ?? (src ? 'avatar' : undefined),
     style: [tokens.layout.container, {
       width: avatarWidth,
       height: avatarHeight,
       borderRadius,
       backgroundColor: backgroundColor ?? tokens.colors.background
     }, style]
-  }, pressableProps), content);
-});
-Avatar.displayName = 'Avatar';
+  }, rest), content);
+};
+const AvatarForwardRef = /*#__PURE__*/_react().default.forwardRef(AvatarImpl);
+AvatarForwardRef.displayName = 'Avatar';
+const Avatar = exports.Avatar = /*#__PURE__*/_react().default.memo(AvatarForwardRef);
 var _default = exports.default = Avatar;

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

@@ -22,7 +22,7 @@ var _utils = require("../../utils");
 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 Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+const BadgeImpl = (props, ref) => {
   const {
     children,
     content,
@@ -31,9 +31,9 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
     dot: dotProp,
     max,
     offset,
-    showZero,
+    showZero: showZeroProp,
     badgeStyle,
-    textStyle: userTextStyle,
+    textStyle,
     onPress,
     style,
     tokensOverride,
@@ -41,51 +41,49 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
   } = props;
   const tokens = (0, _tokens.useBadgeTokens)(tokensOverride);
   const dot = dotProp ?? tokens.defaults.dot;
-  const resolvedShowZero = showZero ?? tokens.defaults.showZero;
+  const showZero = showZeroProp ?? tokens.defaults.showZero;
   const hasChildren = _react().default.Children.count(children) > 0;
   const {
     visible,
     formattedContent
   } = (0, _react().useMemo)(() => {
     const numericContent = (0, _utils.isNumericLike)(content) ? Number(content) : null;
-    const shouldHide = numericContent === 0 && !resolvedShowZero;
+    const shouldHide = numericContent === 0 && !showZero;
     const isVisible = dot || (0, _utils.isRenderable)(content) && !shouldHide;
     if (!isVisible || dot) return {
       visible: isVisible,
       formattedContent: null
     };
     const numericMax = (0, _utils.isNumericLike)(max) ? Number(max) : null;
-    const finalContent = numericContent !== null && numericMax !== null && numericContent > numericMax ? `${numericMax}+` : content;
+    const formatted = numericContent !== null && numericMax !== null && numericContent > numericMax ? `${numericMax}+` : content;
     return {
       visible: true,
-      formattedContent: finalContent
+      formattedContent: formatted
     };
-  }, [content, dot, max, resolvedShowZero]);
+  }, [content, dot, max, showZero]);
   const [size, setSize] = (0, _react().useState)({
     width: 0,
     height: 0
   });
-  const handleLayout = (0, _react().useCallback)(e => {
+  const handleLayout = (0, _react().useCallback)(event => {
     const {
       width,
       height
-    } = e.nativeEvent.layout;
-    if (width !== size.width || height !== size.height) {
-      setSize({
-        width,
-        height
-      });
-    }
-  }, [size.width, size.height]);
+    } = event.nativeEvent.layout;
+    setSize(prev => prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
   const transformStyle = (0, _react().useMemo)(() => {
     if (!hasChildren) return undefined;
     if (dot) {
-      const half = tokens.sizing.dotSize / 2;
+      const halfSize = tokens.sizing.dotSize / 2;
       return {
         transform: [{
-          translateX: half
+          translateX: halfSize
         }, {
-          translateY: -half
+          translateY: -halfSize
         }]
       };
     }
@@ -100,7 +98,7 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
       }]
     };
   }, [dot, hasChildren, size.height, size.width, tokens.sizing.dotSize]);
-  const baseBadgeStyle = (0, _react().useMemo)(() => dot ? {
+  const badgeBoxStyle = (0, _react().useMemo)(() => dot ? {
     width: tokens.sizing.dotSize,
     height: tokens.sizing.dotSize,
     borderRadius: tokens.radii.dot,
@@ -115,13 +113,13 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
     borderColor: tokens.colors.border,
     backgroundColor: color ?? tokens.colors.background
   }, [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, {
+  const mergedTextStyle = [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.colors.text, tokens.layout.text, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeight, userTextStyle]);
+  }, textStyle];
   const offsetStyle = (0, _react().useMemo)(() => {
     if (!offset) return undefined;
     const [x, y] = offset;
@@ -136,14 +134,14 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
   const badgeElement = !visible ? null : /*#__PURE__*/_react().default.createElement(_reactNative().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().default.isValidElement(formattedContent) ? formattedContent : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: mergedTextStyle
-  }, formattedContent)));
+    style: [hasChildren ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, badgeBoxStyle, transformStyle, offsetStyle, badgeStyle, !hasChildren ? style : undefined]
+  }, !dot && (0, _utils.renderTextOrNode)(formattedContent, mergedTextStyle));
+  const accessibilityLabel = visible ? dot ? 'has new content' : `${formattedContent}` : undefined;
   if (hasChildren) {
     return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
       ref: ref,
       onPress: onPress,
+      accessibilityLabel: accessibilityLabel,
       style: ({
         pressed
       }) => [tokens.layout.wrapper, style, pressed && {
@@ -163,9 +161,11 @@ const Badge = exports.Badge = /*#__PURE__*/_react().default.forwardRef((props, r
     }) => [tokens.layout.pressableStandalone, pressed && {
       opacity: tokens.defaults.pressedOpacity
     }]
-  }, rest), badgeElement) : (/*#__PURE__*/_react().default.cloneElement(badgeElement, {
+  }, rest), badgeElement) : /*#__PURE__*/_react().default.cloneElement(badgeElement, {
     ref,
     ...rest
-  }));
-});
-Badge.displayName = 'Badge';
+  });
+};
+const BadgeForwardRef = /*#__PURE__*/_react().default.forwardRef(BadgeImpl);
+BadgeForwardRef.displayName = 'Badge';
+const Badge = exports.Badge = /*#__PURE__*/_react().default.memo(BadgeForwardRef);

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

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useBadgeTokens = void 0;
 var _designSystem = require("../../design-system");
+const centered = {
+  alignItems: 'center',
+  justifyContent: 'center'
+};
 const createBadgeTokens = ({
   palette,
   spacing,
@@ -28,15 +32,13 @@ const createBadgeTokens = ({
         position: 'absolute',
         top: 0,
         right: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
+        ...centered,
         zIndex: 1
       },
       badgeStandalone: {
         alignSelf: 'flex-start',
         flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center'
+        ...centered
       },
       pressableStandalone: {
         alignSelf: 'flex-start',
@@ -46,10 +48,6 @@ const createBadgeTokens = ({
         textAlign: 'center',
         includeFontPadding: false,
         textAlignVertical: 'center'
-      },
-      icon: {
-        alignItems: 'center',
-        justifyContent: 'center'
       }
     },
     colors: {