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

package/dist/cjs/radio/RadioGroup.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = 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;
+}
+function _radio() {
+  const data = require("@react-native-aria/radio");
+  _radio = function () {
+    return data;
+  };
+  return data;
+}
+function _radio2() {
+  const data = require("@react-stately/radio");
+  _radio2 = function () {
+    return data;
+  };
+  return data;
+}
+var _RadioContext = require("./RadioContext");
+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 RadioGroup = props => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled: disabledProp,
+    direction: directionProp,
+    iconSize,
+    checkedColor,
+    labelDisabled,
+    gap: gapProp,
+    name,
+    children,
+    style,
+    tokensOverride,
+    accessibilityLabel,
+    accessibilityHint,
+    ...viewProps
+  } = props;
+  const tokens = (0, _tokens.useRadioTokens)(tokensOverride);
+  const disabled = disabledProp ?? tokens.defaults.groupDisabled;
+  const direction = directionProp ?? tokens.defaults.groupDirection;
+  const gap = Math.max(0, gapProp ?? tokens.spacing.groupGap);
+  const registryRef = (0, _react().useRef)(new Map());
+  const registerValue = (0, _react().useCallback)((key, raw) => {
+    registryRef.current.set(key, raw);
+  }, []);
+  const unregisterValue = (0, _react().useCallback)(key => {
+    registryRef.current.delete(key);
+  }, []);
+  const state = (0, _radio2().useRadioGroupState)({
+    value: value == null ? undefined : String(value),
+    defaultValue: defaultValue == null ? undefined : String(defaultValue),
+    isDisabled: disabled,
+    onChange: key => {
+      const raw = registryRef.current.get(key);
+      onChange?.(raw ?? key);
+    },
+    name
+  });
+  const {
+    radioGroupProps
+  } = (0, _radio().useRadioGroup)({
+    isDisabled: disabled,
+    'aria-label': accessibilityLabel,
+    name
+  }, state);
+  const resolvedRadioGroupProps = {
+    ...(radioGroupProps ?? {}),
+    ...(accessibilityHint && {
+      'aria-describedby': accessibilityHint
+    }),
+    'aria-disabled': disabled
+  };
+  const supportsGap = _reactNative().Platform.OS === 'web';
+  const childrenArray = _react().default.Children.toArray(children).filter(child => child != null && typeof child !== 'boolean');
+  const itemStyleForIndex = index => {
+    if (supportsGap) return tokens.layout.groupItem;
+    const isLast = index === childrenArray.length - 1;
+    if (direction === 'horizontal') {
+      return [tokens.layout.groupItem, !isLast && {
+        marginRight: gap
+      }];
+    }
+    return isLast ? tokens.layout.groupItem : [tokens.layout.groupItem, {
+      marginBottom: gap
+    }];
+  };
+  const containerGapStyle = supportsGap ? {
+    columnGap: direction === 'horizontal' ? gap : undefined,
+    rowGap: gap
+  } : null;
+  const contextValue = (0, _react().useMemo)(() => ({
+    state,
+    direction,
+    iconSize,
+    checkedColor,
+    labelDisabled,
+    registerValue,
+    unregisterValue
+  }), [state, direction, iconSize, checkedColor, labelDisabled]);
+  return /*#__PURE__*/_react().default.createElement(_RadioContext.RadioGroupContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, resolvedRadioGroupProps, viewProps, {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    style: [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, containerGapStyle, style]
+  }), supportsGap ? childrenArray : childrenArray.map((child, index) => {
+    const key = /*#__PURE__*/_react().default.isValidElement(child) && child.key !== null ? child.key : index;
+    const itemStyle = itemStyleForIndex(index);
+    if (/*#__PURE__*/_react().default.isValidElement(child) && child.type !== _react().default.Fragment) {
+      const element = child;
+      return /*#__PURE__*/_react().default.cloneElement(element, {
+        style: [element.props.style, itemStyle],
+        key
+      });
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: key,
+      style: itemStyle
+    }, child);
+  })));
+};
+exports.RadioGroup = RadioGroup;

package/dist/cjs/radio/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = void 0;
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function () {
+    return _RadioGroup.RadioGroup;
+  }
+});
+var _Radio = require("./Radio");
+var _RadioGroup = require("./RadioGroup");
+const Radio = exports.Radio = _Radio.Radio;
+Radio.Group = _RadioGroup.RadioGroup;

package/dist/cjs/radio/tokens.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadioTokens = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+const createRadioTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    typography
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  return {
+    defaults: {
+      iconSize: 20,
+      labelPosition: 'right',
+      shape: 'round',
+      labelDisabled: false,
+      groupDisabled: false,
+      groupDirection: 'vertical'
+    },
+    layout: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      iconWrapper: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      labelWrapper: {
+        flexShrink: 1
+      },
+      icon: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      label: {
+        includeFontPadding: false
+      },
+      groupHorizontal: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center'
+      },
+      groupVertical: {
+        flexDirection: 'column'
+      },
+      groupItem: {
+        flexShrink: 0
+      }
+    },
+    colors: {
+      border: palette.default[400],
+      background: '#ffffff',
+      checkedBackground: palette.primary[500],
+      disabledBorder: palette.default[300],
+      disabledBackground: palette.default[100],
+      checkmark: onPrimary,
+      label: palette.default.foreground ?? '#111827',
+      labelDisabled: palette.default[400]
+    },
+    typography: {
+      fontSize: fontSize.md,
+      fontFamily: typography.fontFamily,
+      fontWeight: typography.weight.medium,
+      lineHeightMultiplier: typography.lineHeightMultiplier
+    },
+    sizing: {
+      dotScale: 0.5
+    },
+    radii: {
+      round: 999,
+      square: 2
+    },
+    borders: {
+      width: _reactNative().StyleSheet.hairlineWidth
+    },
+    spacing: {
+      gap: spacing.sm,
+      groupGap: spacing.sm
+    }
+  };
+};
+const useRadioTokens = exports.useRadioTokens = (0, _designSystem.createComponentTokensHook)('radio', createRadioTokens);

package/dist/cjs/rate/Rate.js

@@ -0,0 +1,269 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Rate = 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 _tokens = require("./tokens");
+var _hooks = require("../../hooks");
+var _utils = require("../../utils");
+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 DEFAULT_CHARACTER = '★';
+const Rate = exports.Rate = /*#__PURE__*/_react().default.memo(props => {
+  const {
+    tokensOverride,
+    count: countProp,
+    allowHalf: allowHalfProp,
+    size: sizeProp,
+    gutter: gutterProp,
+    color,
+    voidColor,
+    disabledColor,
+    icon,
+    voidIcon,
+    character,
+    disabled: disabledProp,
+    readOnly: readOnlyProp,
+    touchable: touchableProp,
+    onIconPress,
+    iconStyle,
+    itemStyle,
+    style,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useRateTokens)(tokensOverride);
+  const count = countProp ?? tokens.defaults.count;
+  const allowHalf = allowHalfProp ?? tokens.defaults.allowHalf;
+  const size = sizeProp ?? tokens.defaults.size;
+  const gutter = gutterProp ?? tokens.defaults.gutter;
+  const disabled = disabledProp ?? tokens.defaults.disabled;
+  const readOnly = readOnlyProp ?? tokens.defaults.readOnly;
+  const touchable = touchableProp ?? tokens.defaults.touchable;
+  const resolvedCount = Math.max(1, Math.floor((0, _utils.parseNumber)(count, tokens.defaults.count)));
+  const resolvedSize = Math.max(0, (0, _utils.parseNumber)(size, tokens.defaults.size));
+  const resolvedGutter = Math.max(0, (0, _utils.parseNumber)(gutter, tokens.defaults.gutter));
+  const [rawValue, triggerChange] = (0, _hooks.useControllableValue)(props, {
+    defaultValue: 0
+  });
+  const normalizedValue = (0, _utils.clamp)(Number(rawValue ?? 0), 0, resolvedCount);
+  const displayValue = allowHalf ? readOnly ? normalizedValue : Math.floor(normalizedValue * 2) / 2 : Math.floor(normalizedValue);
+  const interactive = !disabled && !readOnly;
+  const minScore = allowHalf ? 0.5 : 1;
+  const activeTint = disabled ? disabledColor ?? tokens.colors.disabled : color ?? tokens.colors.active;
+  const voidTint = disabled ? disabledColor ?? tokens.colors.disabled : voidColor ?? tokens.colors.inactive;
+  const requestValueChange = nextScore => {
+    if (nextScore === normalizedValue) return false;
+    triggerChange(nextScore);
+    return true;
+  };
+  const evaluatePress = (index, event) => {
+    if (!interactive) return;
+    const baseScore = index + 1;
+    let nextScore = baseScore;
+    if (allowHalf && event) {
+      const nativeEvent = event.nativeEvent;
+      let x;
+      let width;
+      const locationX = nativeEvent.locationX;
+      if ((0, _utils.isFiniteNumber)(locationX)) {
+        x = locationX;
+      } else {
+        const clientX = nativeEvent.clientX;
+        if ((0, _utils.isFiniteNumber)(clientX)) {
+          const rect = event.currentTarget?.getBoundingClientRect?.();
+          if (rect) {
+            x = clientX - rect.left;
+            width = rect.width;
+          }
+        } else {
+          const offsetX = nativeEvent.offsetX;
+          if ((0, _utils.isFiniteNumber)(offsetX)) x = offsetX;
+        }
+      }
+      const threshold = (width ?? resolvedSize) / 2;
+      if (x !== undefined && x <= threshold) {
+        nextScore = baseScore - 0.5;
+      }
+    }
+    nextScore = (0, _utils.clamp)(nextScore, minScore, resolvedCount);
+    if (requestValueChange(nextScore)) onIconPress?.(nextScore);
+  };
+  const valueFromLocationX = locationX => {
+    const stride = resolvedSize + resolvedGutter;
+    if (stride <= 0) return minScore;
+    const maxX = resolvedSize * resolvedCount + resolvedGutter * (resolvedCount - 1);
+    const x = (0, _utils.clamp)(locationX, 0, maxX);
+    const index = (0, _utils.clamp)(Math.floor(x / stride), 0, resolvedCount - 1);
+    const within = x - index * stride;
+    let nextScore = index + 1;
+    if (allowHalf) {
+      const withinIcon = Math.min(within, resolvedSize);
+      if (withinIcon <= resolvedSize / 2) {
+        nextScore -= 0.5;
+      }
+    }
+    return (0, _utils.clamp)(nextScore, minScore, resolvedCount);
+  };
+  const lastMoveValueRef = (0, _react().useRef)(null);
+  const gestureStartRef = (0, _react().useRef)(null);
+  const gestureDirectionRef = (0, _react().useRef)('');
+  const onStartShouldSetResponderCapture = event => {
+    if (!interactive || !touchable) return false;
+    gestureStartRef.current = {
+      pageX: event.nativeEvent.pageX,
+      pageY: event.nativeEvent.pageY
+    };
+    gestureDirectionRef.current = '';
+    lastMoveValueRef.current = null;
+    return false;
+  };
+  const onMoveShouldSetResponderCapture = event => {
+    if (!interactive || !touchable) return false;
+    const start = gestureStartRef.current;
+    if (!start) {
+      gestureStartRef.current = {
+        pageX: event.nativeEvent.pageX,
+        pageY: event.nativeEvent.pageY
+      };
+      return false;
+    }
+    const offsetX = Math.abs(event.nativeEvent.pageX - start.pageX);
+    const offsetY = Math.abs(event.nativeEvent.pageY - start.pageY);
+    if (offsetX > offsetY && offsetX > 10) {
+      gestureDirectionRef.current = 'horizontal';
+      return true;
+    }
+    if (offsetY > offsetX && offsetY > 10) {
+      gestureDirectionRef.current = 'vertical';
+    }
+    return false;
+  };
+  const handleResponderMove = event => {
+    if (!interactive || !touchable) return;
+    if (gestureDirectionRef.current !== 'horizontal') return;
+    event.preventDefault?.();
+    const nextScore = valueFromLocationX(event.nativeEvent.locationX);
+    if (lastMoveValueRef.current === nextScore) return;
+    lastMoveValueRef.current = nextScore;
+    if (requestValueChange(nextScore)) onIconPress?.(nextScore);
+  };
+  const handleResponderEnd = () => {
+    lastMoveValueRef.current = null;
+    gestureStartRef.current = null;
+    gestureDirectionRef.current = '';
+  };
+  const renderIconNode = (renderValue, tintColor) => {
+    if (/*#__PURE__*/_react().default.isValidElement(renderValue)) {
+      const element = renderValue;
+      const defaultStyle = {
+        color: tintColor,
+        fontSize: resolvedSize,
+        lineHeight: resolvedSize,
+        textAlign: 'center',
+        includeFontPadding: false
+      };
+      const layoutStyle = {
+        width: resolvedSize,
+        height: resolvedSize,
+        flexShrink: 0
+      };
+      return /*#__PURE__*/_react().default.cloneElement(element, {
+        style: _reactNative().StyleSheet.flatten([defaultStyle, element.props.style, iconStyle, layoutStyle])
+      });
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [tokens.layout.character, iconStyle, {
+        color: tintColor,
+        fontSize: resolvedSize,
+        lineHeight: resolvedSize,
+        width: resolvedSize,
+        height: resolvedSize,
+        textAlign: 'center'
+      }]
+    }, renderValue ?? DEFAULT_CHARACTER);
+  };
+  const resolvedActiveIcon = icon ?? character ?? DEFAULT_CHARACTER;
+  const resolvedVoidIcon = voidIcon ?? character ?? DEFAULT_CHARACTER;
+  const renderItem = index => {
+    const score = index + 1;
+    const fill = (0, _utils.clamp)(displayValue - index, 0, 1);
+    const marginRight = index === resolvedCount - 1 ? 0 : resolvedGutter;
+    const isFull = fill === 1;
+    const activeIconWrapperStyle = {
+      width: fill * resolvedSize,
+      height: isFull ? resolvedSize : resolvedSize * 1.5,
+      top: isFull ? 0 : -resolvedSize * 0.25,
+      overflow: isFull ? 'visible' : 'hidden'
+    };
+    const activeIconInnerStyle = {
+      width: resolvedSize,
+      height: resolvedSize,
+      marginTop: isFull ? 0 : resolvedSize * 0.25,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'visible'
+    };
+    const iconContent = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [tokens.layout.iconBox, {
+        width: resolvedSize,
+        height: resolvedSize
+      }]
+    }, fill < 1 ? renderIconNode(resolvedVoidIcon, voidTint) : null, fill > 0 ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      pointerEvents: "none",
+      style: [tokens.layout.fill, activeIconWrapperStyle]
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: activeIconInnerStyle
+    }, renderIconNode(resolvedActiveIcon, activeTint))) : null);
+    if (!interactive) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        key: score,
+        style: [tokens.layout.item, {
+          marginRight
+        }, itemStyle],
+        accessibilityRole: "image",
+        accessibilityLabel: `评分 ${score}`
+      }, iconContent);
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+      key: score,
+      accessibilityRole: "button",
+      accessibilityLabel: `评${allowHalf ? '半' : ''}分 ${score}`,
+      onPress: event => evaluatePress(index, event),
+      style: ({
+        pressed
+      }) => [tokens.layout.item, {
+        marginRight
+      }, itemStyle, pressed && {
+        opacity: tokens.states.pressedOpacity
+      }]
+    }, iconContent);
+  };
+  const items = [];
+  for (let i = 0; i < resolvedCount; i++) items.push(renderItem(i));
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
+    style: [tokens.layout.container, style],
+    accessibilityRole: "radiogroup",
+    onStartShouldSetResponderCapture: onStartShouldSetResponderCapture,
+    onMoveShouldSetResponderCapture: onMoveShouldSetResponderCapture,
+    onResponderMove: handleResponderMove,
+    onResponderRelease: handleResponderEnd,
+    onResponderTerminate: handleResponderEnd
+  }), items);
+});
+Rate.displayName = 'Rate';
+var _default = exports.default = Rate;

package/dist/cjs/rate/index.js

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

package/dist/cjs/rate/tokens.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRateTokens = exports.createRateTokens = void 0;
+var _designSystem = require("../../design-system");
+const createRateTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize
+  } = foundations;
+  return {
+    defaults: {
+      count: 5,
+      allowHalf: false,
+      size: fontSize.lg,
+      gutter: spacing.xs,
+      touchable: true,
+      disabled: false,
+      readOnly: false
+    },
+    layout: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      item: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      iconBox: {
+        position: 'relative',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0
+      },
+      character: {
+        includeFontPadding: false
+      },
+      fill: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        overflow: 'hidden'
+      }
+    },
+    colors: {
+      active: palette.warning[500] ?? '#fa8c16',
+      inactive: palette.default[200],
+      disabled: palette.default[400]
+    },
+    states: {
+      pressedOpacity: 0.75
+    }
+  };
+};
+exports.createRateTokens = createRateTokens;
+const useRateTokens = exports.useRateTokens = (0, _designSystem.createComponentTokensHook)('rate', createRateTokens);