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

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _picker = _interopRequireDefault(require("../picker"));
+var _utils = require("./utils");
+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 Area = props => {
+  const {
+    areaList,
+    columnsNum = 3,
+    value,
+    defaultValue,
+    onChange,
+    onConfirm,
+    ...pickerProps
+  } = props;
+  const resolvedColumnsNum = columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3;
+  const columns = _react().default.useMemo(() => (0, _utils.buildAreaColumns)(areaList, resolvedColumnsNum), [areaList, resolvedColumnsNum]);
+  const handleChange = _react().default.useCallback((values, options) => {
+    onChange?.(values.map(String), options);
+  }, [onChange]);
+  const handleConfirm = _react().default.useCallback((values, options) => {
+    onConfirm?.(values.map(String), options);
+  }, [onConfirm]);
+  return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
+    columns: columns,
+    value: value,
+    defaultValue: defaultValue,
+    onChange: handleChange,
+    onConfirm: onConfirm ? handleConfirm : undefined
+  }));
+};
+Area.displayName = 'Area';
+var _default = exports.default = Area;

package/dist/cjs/components/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/components/area/types.d.ts

@@ -0,0 +1,27 @@
+import type * as React from 'react'
+
+import type { PickerProps, PickerOption } from '../picker/types'
+
+export interface AreaList {
+  province_list?: Record<string, string>
+  city_list?: Record<string, string>
+  county_list?: Record<string, string>
+}
+
+export interface AreaOption extends PickerOption {
+  label: React.ReactNode
+  value: string
+  children?: AreaOption[]
+}
+
+export interface AreaProps
+  extends Omit<PickerProps, 'columns' | 'onChange' | 'value' | 'defaultValue' | 'onConfirm'> {
+  areaList: AreaList
+  columnsNum?: 1 | 2 | 3
+  value?: string[]
+  defaultValue?: string[]
+  onChange?: (values: string[], options: (AreaOption | undefined)[]) => void
+  onConfirm?: (values: string[], options: (AreaOption | undefined)[]) => void
+}
+
+export type AreaColumnType = 'province' | 'city' | 'county'

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

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildAreaColumns = void 0;
+const sortEntries = records => {
+  if (!records) return [];
+  return Object.entries(records).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);
+  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]);
+    }
+  });
+  const countyByCity = new Map();
+  sortEntries(areaList.county_list).forEach(([code, name]) => {
+    const cityKey = getCityCode(code);
+    const option = {
+      label: name,
+      value: code
+    };
+    const existing = countyByCity.get(cityKey);
+    if (existing) {
+      existing.push(option);
+    } else {
+      countyByCity.set(cityKey, [option]);
+    }
+  });
+  return provinces.map(([code, name]) => {
+    const provinceOption = {
+      label: name,
+      value: code
+    };
+    if (columnsNum > 1) {
+      const provinceKey = getProvinceCode(code);
+      const cityOptions = citiesByProvince.get(provinceKey)?.map(city => ({
+        ...city
+      })) ?? [];
+      provinceOption.children = cityOptions;
+      if (columnsNum > 2) {
+        provinceOption.children = cityOptions.map(cityOption => {
+          const cityKey = getCityCode(cityOption.value);
+          const counties = countyByCity.get(cityKey)?.map(county => ({
+            ...county
+          })) ?? [];
+          return counties.length ? {
+            ...cityOption,
+            children: counties
+          } : cityOption;
+        });
+      }
+    }
+    return provinceOption;
+  });
+};
+exports.buildAreaColumns = buildAreaColumns;

package/dist/cjs/components/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 _validate = require("../../utils/validate");
+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, _validate.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) : null;
+  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/components/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/components/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/components/avatar/types.d.ts

@@ -0,0 +1,64 @@
+import type React from 'react'
+import type {
+  PressableProps,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+  ImageSourcePropType,
+  ImageStyle,
+} from 'react-native'
+
+import type { DeepPartial } from '../../types'
+
+export type AvatarShape = 'circle' | 'square'
+export type AvatarSize = 'small' | 'medium' | 'large'
+
+export interface AvatarTokens {
+  defaults: {
+    size: AvatarSize
+    shape: AvatarShape
+  }
+  layout: {
+    container: ViewStyle
+    text: TextStyle
+    image: ImageStyle
+    iconWrapper: ViewStyle
+  }
+  colors: {
+    background: string
+    text: string
+  }
+  typography: {
+    fontWeight: TextStyle['fontWeight']
+    fallbackTextScale: number
+  }
+  sizing: {
+    sizes: Record<AvatarSize, number>
+    iconMaxSize: number
+    loadingSize: number
+  }
+  radii: {
+    squareMin: number
+    squareDivisor: number
+  }
+}
+
+import type { ImageFit } from '../image/types'
+
+export interface AvatarProps extends Omit<PressableProps, 'style'> {
+  src?: string
+  source?: ImageSourcePropType
+  fit?: ImageFit
+  icon?: React.ReactNode
+  text?: string
+  size?: AvatarSize | number
+  width?: number
+  height?: number
+  shape?: AvatarShape
+  color?: string
+  backgroundColor?: string
+  textStyle?: StyleProp<TextStyle>
+  contentStyle?: StyleProp<ViewStyle>
+  style?: StyleProp<ViewStyle>
+  tokensOverride?: DeepPartial<AvatarTokens>
+}

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

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = 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 _number = require("../../utils/number");
+var _validate = require("../../utils/validate");
+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 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
+  } = _react().default.useMemo(() => {
+    const numericContent = (0, _number.isNumericLike)(content) ? Number(content) : null;
+    const shouldHide = numericContent === 0 && !resolvedShowZero;
+    const isVisible = dot || (0, _validate.isRenderable)(content) && !shouldHide;
+    if (!isVisible || dot) return {
+      visible: isVisible,
+      formattedContent: null
+    };
+    const numericMax = (0, _number.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] = _react().default.useState({
+    width: 0,
+    height: 0
+  });
+  const handleLayout = _react().default.useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width !== size.width || height !== size.height) {
+      setSize({
+        width,
+        height
+      });
+    }
+  }, [size.width, size.height]);
+  const transformStyle = _react().default.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 = _react().default.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 = _react().default.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 = _react().default.useMemo(() => {
+    if (!offset) return undefined;
+    const [x, y] = offset;
+    return hasChildren ? {
+      right: x,
+      top: y
+    } : {
+      marginLeft: x,
+      marginTop: y
+    };
+  }, [offset, hasChildren]);
+  const badgeElement = _react().default.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) {
+    if (onPress) {
+      return /*#__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);
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+      ref: ref,
+      style: [tokens.layout.wrapper, style]
+    }, rest), children, badgeElement);
+  }
+  if (!visible) return null;
+  if (onPress) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+      ref: ref,
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => [tokens.layout.pressableStandalone, pressed && {
+        opacity: tokens.defaults.pressedOpacity
+      }]
+    }, rest), badgeElement);
+  }
+  return /*#__PURE__*/_react().default.cloneElement(badgeElement, {
+    ref,
+    ...rest
+  });
+});
+Badge.displayName = 'Badge';

package/dist/cjs/components/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/components/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' // Ensure wrapper shrinks to children
+      },
+      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);