react-native-system-ui 0.0.1 → 0.0.2

package/dist/cjs/safe-area/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SafeAreaClipProvider", {
+  enumerable: true,
+  get: function () {
+    return _SafeAreaClipper.SafeAreaClipProvider;
+  }
+});
+Object.defineProperty(exports, "SafeAreaClipper", {
+  enumerable: true,
+  get: function () {
+    return _SafeAreaClipper.SafeAreaClipper;
+  }
+});
+exports.renderWithSafeArea = void 0;
+Object.defineProperty(exports, "useSafeAreaClip", {
+  enumerable: true,
+  get: function () {
+    return _SafeAreaClipper.useSafeAreaClip;
+  }
+});
+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 _SafeAreaClipper = require("./SafeAreaClipper");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const renderWithSafeArea = (children, opts, safeAreaTopRef, onSafeAreaTopLayout) => {
+  if (opts.safeArea) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+      style: {
+        width: '100%'
+      }
+    }, children);
+  }
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+    ref: safeAreaTopRef,
+    style: {
+      width: '100%',
+      pointerEvents: 'none'
+    },
+    onLayout: onSafeAreaTopLayout
+  }) : null, children, opts.safeAreaInsetBottom ? /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+    style: {
+      width: '100%',
+      pointerEvents: 'none'
+    }
+  }) : null);
+};
+exports.renderWithSafeArea = renderWithSafeArea;

package/dist/cjs/search/Search.js

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Search = 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 _reactNativeSystemIcon() {
+  const data = require("react-native-system-icon");
+  _reactNativeSystemIcon = function () {
+    return data;
+  };
+  return data;
+}
+var _hooks = require("../../hooks");
+var _validate = require("../../utils/validate");
+var _useLocale = require("../config-provider/useLocale");
+var _field = _interopRequireDefault(require("../field"));
+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 SearchComponent = (props, ref) => {
+  const locale = (0, _useLocale.useLocale)();
+  const {
+    tokensOverride,
+    label,
+    action,
+    actionText,
+    showAction = false,
+    shape: shapeProp,
+    background,
+    style: containerStyle,
+    fieldStyle,
+    fieldContentStyle,
+    clearTrigger,
+    clearable = true,
+    leftIcon,
+    rightIcon,
+    errorMessage,
+    onSearch,
+    onCancel,
+    onChangeText,
+    onSubmitEditing,
+    returnKeyType,
+    inputStyle,
+    align,
+    inputAlign,
+    ...restFieldProps
+  } = props;
+  const tokens = (0, _tokens.useSearchTokens)(tokensOverride);
+  const shape = shapeProp ?? tokens.defaults.shape;
+  const [value, triggerChange] = (0, _hooks.useControllableValue)(props, {
+    defaultValue: ''
+  });
+  const inputValue = value ?? '';
+  const resolvedInputAlign = (0, _react().useMemo)(() => align ?? inputAlign, [align, inputAlign]);
+  const handleChange = (0, _react().useCallback)(next => {
+    triggerChange(next);
+    onChangeText?.(next);
+  }, [onChangeText, triggerChange]);
+  const handleCancel = (0, _react().useCallback)(() => {
+    handleChange('');
+    onCancel?.();
+  }, [handleChange, onCancel]);
+  const handleSubmit = (0, _react().useCallback)(event => {
+    onSearch?.(inputValue);
+    onSubmitEditing?.(event);
+  }, [inputValue, onSearch, onSubmitEditing]);
+  const resolvedBackground = (0, _react().useMemo)(() => background ?? tokens.colors.background, [background, tokens.colors.background]);
+  const resolvedLeftIcon = (0, _react().useMemo)(() => leftIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Search, {
+    size: tokens.icon.size,
+    fill: tokens.colors.icon,
+    color: tokens.colors.icon
+  }), [leftIcon, tokens.colors.icon, tokens.icon.size]);
+  const resolvedClearTrigger = (0, _react().useMemo)(() => clearTrigger ?? tokens.defaults.clearTrigger, [clearTrigger, tokens.defaults.clearTrigger]);
+  const resolvedReturnKeyType = (0, _react().useMemo)(() => returnKeyType ?? 'search', [returnKeyType]);
+  const shouldShowAction = !!action || showAction;
+  const isCustomActionText = /*#__PURE__*/_react().default.isValidElement(actionText);
+  const shouldRenderCancelAction = shouldShowAction && !action && !isCustomActionText;
+  const radius = shape === 'round' ? tokens.radius.round : tokens.radius.square;
+  const inputRef = (0, _react().useRef)(null);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur(),
+    clear: () => handleChange('')
+  }), [handleChange]);
+  const cancelActionPress = (0, _hooks.useAriaPress)({
+    disabled: !shouldRenderCancelAction,
+    onPress: handleCancel,
+    extraProps: {
+      accessibilityRole: 'button',
+      testID: 'rnsu-search-action'
+    }
+  });
+  const containerStyles = (0, _react().useMemo)(() => [styles.container, {
+    paddingHorizontal: tokens.spacing.paddingHorizontal,
+    paddingVertical: tokens.spacing.paddingVertical,
+    backgroundColor: resolvedBackground
+  }, containerStyle], [containerStyle, resolvedBackground, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
+  const contentStyles = (0, _react().useMemo)(() => [styles.content, {
+    borderRadius: radius,
+    paddingHorizontal: tokens.spacing.contentPaddingHorizontal,
+    paddingVertical: tokens.spacing.contentPaddingVertical,
+    backgroundColor: tokens.colors.contentBackground
+  }], [radius, tokens.colors.contentBackground, tokens.spacing.contentPaddingHorizontal, tokens.spacing.contentPaddingVertical]);
+  const labelNode = (0, _react().useMemo)(() => {
+    if (!label) return null;
+    if ((0, _validate.isText)(label)) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        style: {
+          marginRight: tokens.spacing.labelGap,
+          color: tokens.colors.label,
+          fontSize: tokens.typography.label,
+          fontWeight: tokens.typography.labelWeight
+        }
+      }, label);
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: {
+        marginRight: tokens.spacing.labelGap
+      }
+    }, label);
+  }, [label, tokens.colors.label, tokens.spacing.labelGap, tokens.typography.label, tokens.typography.labelWeight]);
+  const actionNode = (0, _react().useMemo)(() => {
+    if (action) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        style: [styles.actionWrapper, {
+          marginLeft: tokens.spacing.actionGap
+        }]
+      }, action);
+    }
+    if (!shouldShowAction) return null;
+    if (isCustomActionText) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        style: [styles.actionWrapper, {
+          marginLeft: tokens.spacing.actionGap
+        }]
+      }, actionText);
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+      style: [styles.actionWrapper, {
+        marginLeft: tokens.spacing.actionGap,
+        opacity: cancelActionPress.states.pressed ? tokens.opacity.actionPressed : 1
+      }]
+    }, cancelActionPress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: {
+        color: tokens.colors.action,
+        fontSize: tokens.typography.action,
+        fontWeight: tokens.typography.actionWeight
+      }
+    }, actionText ?? locale.cancel));
+  }, [action, actionText, cancelActionPress.interactionProps, cancelActionPress.states.pressed, isCustomActionText, locale.cancel, shouldShowAction, tokens.colors.action, tokens.opacity.actionPressed, tokens.spacing.actionGap, tokens.typography.action, tokens.typography.actionWeight]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: containerStyles
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: contentStyles
+  }, labelNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.fieldWrapper
+  }, /*#__PURE__*/_react().default.createElement(_field.default, _extends({
+    ref: inputRef,
+    type: "search",
+    value: inputValue,
+    onChangeText: handleChange,
+    clearable: clearable,
+    clearTrigger: resolvedClearTrigger,
+    leftIcon: resolvedLeftIcon,
+    rightIcon: rightIcon,
+    center: !errorMessage,
+    errorMessage: errorMessage,
+    inputAlign: resolvedInputAlign,
+    border: false,
+    style: [styles.field, fieldStyle],
+    contentStyle: [styles.fieldContent, fieldContentStyle],
+    inputStyle: [styles.input, inputStyle],
+    onSubmitEditing: handleSubmit,
+    returnKeyType: resolvedReturnKeyType
+  }, restFieldProps)))), actionNode);
+};
+const Search = exports.Search = /*#__PURE__*/_react().default.forwardRef(SearchComponent);
+Search.displayName = 'Search';
+const styles = _reactNative().StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  fieldWrapper: {
+    flex: 1
+  },
+  field: {
+    paddingHorizontal: 0,
+    paddingVertical: 0
+  },
+  fieldContent: {
+    paddingVertical: 0
+  },
+  input: {
+    paddingVertical: 0
+  },
+  actionWrapper: {
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = Search;

package/dist/cjs/selector/Selector.js

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Selector = 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 CHECK_MARK = '✓';
+const CHECK_MARK_CORNER_HEIGHT = 8;
+const CHECK_MARK_CORNER_WIDTH = 10;
+const SelectorOptionItemImpl = ({
+  option,
+  active,
+  disabled,
+  multiple,
+  showCheckMark,
+  basis,
+  itemMargin,
+  tokens,
+  itemStyle,
+  labelStyle,
+  descriptionStyle,
+  onToggle
+}) => {
+  const labelContent = option.label;
+  const descriptionContent = option.description;
+  const hasDescription = descriptionContent != null;
+  const accessibilityLabel = (0, _utils.isText)(labelContent) ? String(labelContent) : String(option.value);
+  const accessibilityHint = (0, _utils.isText)(descriptionContent) ? String(descriptionContent) : undefined;
+  const {
+    interactionProps,
+    states
+  } = (0, _hooks.useAriaPress)({
+    disabled,
+    onPress: () => onToggle(option),
+    extraProps: {
+      accessibilityRole: multiple ? 'checkbox' : 'radio',
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityState: multiple ? {
+        checked: active,
+        disabled
+      } : {
+        selected: active,
+        disabled
+      }
+    }
+  });
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, interactionProps, {
+    style: [tokens.layout.pressable, {
+      width: basis
+    }]
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.item, {
+      marginHorizontal: itemMargin,
+      marginVertical: itemMargin,
+      paddingHorizontal: tokens.spacing.paddingHorizontal,
+      paddingVertical: tokens.spacing.paddingVertical,
+      borderRadius: tokens.radii.item,
+      borderColor: active ? tokens.colors.borderActive : tokens.colors.border,
+      backgroundColor: active ? tokens.colors.backgroundActive : tokens.colors.background,
+      opacity: disabled ? tokens.states.disabledOpacity : 1
+    }, states.pressed && {
+      opacity: 0.9
+    }, itemStyle]
+  }, (0, _utils.isText)(labelContent) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.label, {
+      color: active ? tokens.colors.textActive : tokens.colors.text,
+      fontSize: tokens.typography.fontSize,
+      lineHeight: tokens.typography.fontSize * 1.4,
+      fontFamily: tokens.typography.fontFamily,
+      fontWeight: tokens.typography.fontWeight
+    }, labelStyle]
+  }, labelContent) : labelContent, hasDescription ? (0, _utils.isText)(descriptionContent) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.description, {
+      marginTop: tokens.spacing.descriptionMarginTop,
+      color: disabled ? tokens.colors.disabledText : tokens.colors.description,
+      fontSize: tokens.typography.descriptionSize,
+      lineHeight: tokens.typography.descriptionSize * 1.4
+    }, descriptionStyle]
+  }, descriptionContent) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      marginTop: tokens.spacing.descriptionMarginTop
+    }
+  }, descriptionContent) : null, active && showCheckMark ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.checkMarkTriangle, {
+      borderTopWidth: CHECK_MARK_CORNER_HEIGHT,
+      borderBottomWidth: CHECK_MARK_CORNER_HEIGHT,
+      borderLeftWidth: CHECK_MARK_CORNER_WIDTH,
+      borderRightWidth: CHECK_MARK_CORNER_WIDTH,
+      borderBottomColor: tokens.colors.check,
+      borderRightColor: tokens.colors.check
+    }]
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.checkMark, {
+      color: tokens.colors.checkForeground
+    }]
+  }, CHECK_MARK)) : null));
+};
+const SelectorOptionItemMemo = /*#__PURE__*/_react().default.memo(SelectorOptionItemImpl);
+SelectorOptionItemMemo.displayName = 'SelectorOptionItem';
+const SelectorOptionItem = SelectorOptionItemMemo;
+const SelectorImpl = props => {
+  const {
+    tokensOverride,
+    options,
+    columns: columnsProp,
+    multiple: multipleProp,
+    showCheckMark: showCheckMarkProp,
+    disabled: disabledProp,
+    onChange,
+    itemStyle,
+    labelStyle,
+    descriptionStyle,
+    style,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useSelectorTokens)(tokensOverride);
+  const columns = columnsProp ?? tokens.defaults.columns ?? 1;
+  const multiple = multipleProp ?? tokens.defaults.multiple;
+  const showCheckMark = showCheckMarkProp ?? tokens.defaults.showCheckMark;
+  const disabled = Boolean(disabledProp ?? tokens.defaults.disabled);
+  const [value = [], triggerChange] = (0, _hooks.useControllableValue)(props, {
+    defaultValue: []
+  });
+  const optionByValue = (0, _react().useMemo)(() => {
+    const map = new Map();
+    for (const option of options) map.set(option.value, option);
+    return map;
+  }, [options]);
+  const resolvedColumns = Math.max(1, Math.floor(columns));
+  const basis = `${100 / resolvedColumns}%`;
+  const itemMargin = tokens.spacing.gap / 2;
+  const selectedSet = (0, _react().useMemo)(() => new Set(value), [value]);
+  const toggleOption = (0, _react().useCallback)(option => {
+    if (disabled || option.disabled) return;
+    const active = selectedSet.has(option.value);
+    let next;
+    if (multiple) {
+      next = active ? value.filter(item => item !== option.value) : [...value, option.value];
+    } else {
+      next = active ? [] : [option.value];
+    }
+    const items = next.map(v => optionByValue.get(v)).filter(Boolean);
+    triggerChange(next, {
+      items
+    });
+  }, [disabled, multiple, optionByValue, selectedSet, triggerChange, value]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
+    style: [tokens.layout.container, {
+      marginHorizontal: -itemMargin,
+      marginVertical: -itemMargin
+    }, style],
+    accessibilityRole: multiple ? undefined : 'radiogroup'
+  }), options.map(option => /*#__PURE__*/_react().default.createElement(SelectorOptionItem, {
+    key: String(option.value),
+    option: option,
+    active: selectedSet.has(option.value),
+    disabled: disabled || Boolean(option.disabled),
+    multiple: multiple,
+    showCheckMark: showCheckMark,
+    basis: basis,
+    itemMargin: itemMargin,
+    tokens: tokens,
+    itemStyle: itemStyle,
+    labelStyle: labelStyle,
+    descriptionStyle: descriptionStyle,
+    onToggle: toggleOption
+  })));
+};
+const Selector = exports.Selector = /*#__PURE__*/_react().default.memo(SelectorImpl);
+Selector.displayName = 'Selector';
+var _default = exports.default = Selector;

package/dist/cjs/selector/tokens.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectorTokens = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+const createSelectorTokens = ({
+  palette,
+  spacing,
+  radii,
+  typography,
+  fontSize
+}) => ({
+  defaults: {
+    columns: 3,
+    multiple: false,
+    showCheckMark: true,
+    disabled: false
+  },
+  layout: {
+    container: {
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    },
+    pressable: _reactNative().Platform.OS === 'web' ? {
+      outlineStyle: 'solid',
+      outlineWidth: 0
+    } : {},
+    item: {
+      flex: 1,
+      borderWidth: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden'
+    },
+    label: {
+      includeFontPadding: false,
+      textAlign: 'center'
+    },
+    description: {
+      includeFontPadding: false,
+      textAlign: 'center'
+    },
+    checkMark: {
+      position: 'absolute',
+      right: 1,
+      bottom: 1,
+      fontSize: 8,
+      includeFontPadding: false
+    },
+    checkMarkTriangle: {
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      width: 0,
+      height: 0,
+      borderTopColor: 'transparent',
+      borderLeftColor: 'transparent'
+    }
+  },
+  colors: {
+    border: 'transparent',
+    borderActive: 'transparent',
+    background: '#ffffff',
+    backgroundActive: palette.primary[50],
+    text: palette.default[900],
+    textActive: palette.primary[600],
+    description: palette.default[500],
+    disabledText: palette.default[400],
+    check: palette.primary[600],
+    checkForeground: palette.primary.foreground ?? '#fff'
+  },
+  typography: {
+    fontSize: fontSize.md,
+    descriptionSize: fontSize.sm,
+    fontFamily: typography.fontFamily,
+    fontWeight: typography.weight.medium
+  },
+  radii: {
+    item: radii.xs
+  },
+  spacing: {
+    gap: spacing.sm,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.lg,
+    descriptionMarginTop: spacing.xxs
+  },
+  states: {
+    disabledOpacity: 0.45
+  }
+});
+const useSelectorTokens = exports.useSelectorTokens = (0, _designSystem.createComponentTokensHook)('selector', createSelectorTokens);