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

package/dist/cjs/area/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Area = _interopRequireDefault(require("./Area"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Area.default;

package/dist/cjs/area/utils.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildAreaColumns = void 0;
+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);
+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;
+  });
+};
+exports.buildAreaColumns = buildAreaColumns;

package/dist/cjs/avatar/Avatar.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Avatar = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _image = _interopRequireDefault(require("../image"));
+var _utils = require("../../utils");
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 transparentContainerStyle = {
+  backgroundColor: 'transparent'
+};
+const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    src,
+    source,
+    icon,
+    text,
+    size,
+    width,
+    height,
+    shape,
+    fit,
+    color,
+    backgroundColor,
+    style,
+    textStyle,
+    contentStyle,
+    tokensOverride,
+    ...pressableProps
+  } = props;
+  const tokens = (0, _tokens.useAvatarTokens)(tokensOverride);
+  const resolvedSize = size ?? tokens.defaults.size;
+  const resolvedShape = shape ?? tokens.defaults.shape;
+  const baseSize = (0, _utils.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().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(_reactNative().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().default.createElement(_image.default, {
+    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().default.createElement(_reactNative().Pressable, _extends({
+    ref: ref,
+    style: [tokens.layout.container, {
+      width: avatarWidth,
+      height: avatarHeight,
+      borderRadius,
+      backgroundColor: backgroundColor ?? tokens.colors.background
+    }, style]
+  }, pressableProps), content);
+});
+Avatar.displayName = 'Avatar';
+var _default = exports.default = Avatar;

package/dist/cjs/avatar/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function () {
+    return _Avatar.Avatar;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Avatar.Avatar;
+  }
+});
+var _Avatar = require("./Avatar");

package/dist/cjs/avatar/tokens.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAvatarTokens = exports.createAvatarTokens = void 0;
+var _designSystem = require("../../design-system");
+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
+  }
+});
+exports.createAvatarTokens = createAvatarTokens;
+const useAvatarTokens = exports.useAvatarTokens = (0, _designSystem.createComponentTokensHook)("avatar", createAvatarTokens);

package/dist/cjs/badge/Badge.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+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 {
+    children,
+    content,
+    color,
+    textColor,
+    dot: dotProp,
+    max,
+    offset,
+    showZero,
+    badgeStyle,
+    textStyle: userTextStyle,
+    onPress,
+    style,
+    tokensOverride,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useBadgeTokens)(tokensOverride);
+  const dot = dotProp ?? tokens.defaults.dot;
+  const resolvedShowZero = showZero ?? 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 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;
+    return {
+      visible: true,
+      formattedContent: finalContent
+    };
+  }, [content, dot, max, resolvedShowZero]);
+  const [size, setSize] = (0, _react().useState)({
+    width: 0,
+    height: 0
+  });
+  const handleLayout = (0, _react().useCallback)(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width !== size.width || height !== size.height) {
+      setSize({
+        width,
+        height
+      });
+    }
+  }, [size.width, size.height]);
+  const transformStyle = (0, _react().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 = (0, _react().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 = (0, _react().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 = (0, _react().useMemo)(() => {
+    if (!offset) return undefined;
+    const [x, y] = offset;
+    return hasChildren ? {
+      right: x,
+      top: y
+    } : {
+      marginLeft: x,
+      marginTop: y
+    };
+  }, [offset, hasChildren]);
+  const badgeElement = (0, _react().useMemo)(() => {
+    if (!visible) return null;
+    return /*#__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)));
+  }, [visible, hasChildren, dot, handleLayout, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, style, formattedContent, mergedTextStyle]);
+  if (hasChildren) {
+    return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+      ref: ref,
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => [tokens.layout.wrapper, style, pressed && {
+        opacity: tokens.defaults.pressedOpacity
+      }]
+    }, rest), children, badgeElement) : /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+      ref: ref,
+      style: [tokens.layout.wrapper, style]
+    }, rest), children, badgeElement);
+  }
+  if (!visible) return null;
+  return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    ref: ref,
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [tokens.layout.pressableStandalone, pressed && {
+      opacity: tokens.defaults.pressedOpacity
+    }]
+  }, rest), badgeElement) : (/*#__PURE__*/_react().default.cloneElement(badgeElement, {
+    ref,
+    ...rest
+  }));
+});
+Badge.displayName = 'Badge';

package/dist/cjs/badge/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Badge = require("./Badge");
+var _default = exports.default = _Badge.Badge;

package/dist/cjs/badge/tokens.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBadgeTokens = void 0;
+var _designSystem = require("../../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
+    }
+  };
+};
+const useBadgeTokens = exports.useBadgeTokens = (0, _designSystem.createComponentTokensHook)('badge', createBadgeTokens);