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

package/dist/cjs/checkbox/Checkbox.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Checkbox = 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 _checkbox() {
+  const data = require("@react-native-aria/checkbox");
+  _checkbox = function () {
+    return data;
+  };
+  return data;
+}
+function _toggle() {
+  const data = require("@react-stately/toggle");
+  _toggle = function () {
+    return data;
+  };
+  return data;
+}
+var _CheckboxContext = require("./CheckboxContext");
+var _tokens = require("./tokens");
+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 Checkbox = exports.Checkbox = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    children,
+    name,
+    value,
+    iconRender,
+    bindGroup: bindGroupProp,
+    shape,
+    iconSize,
+    checkedColor,
+    labelPosition,
+    labelDisabled,
+    disabled,
+    style,
+    labelStyle,
+    tokensOverride,
+    hitSlop = 8,
+    accessibilityLabel,
+    ['aria-label']: ariaLabel,
+    onClick,
+    onChange,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useCheckboxTokens)(tokensOverride);
+  const group = (0, _react().useContext)(_CheckboxContext.CheckboxGroupContext);
+  const bindGroup = bindGroupProp ?? tokens.defaults.bindGroup;
+  const resolvedShape = shape ?? group?.shape ?? tokens.defaults.shape;
+  const resolvedIconSize = iconSize ?? group?.iconSize ?? tokens.defaults.iconSize;
+  const resolvedCheckedColor = checkedColor ?? group?.checkedColor ?? tokens.colors.checkedBackground;
+  const resolvedIconRender = iconRender ?? group?.iconRender;
+  const resolvedLabelPosition = labelPosition ?? tokens.defaults.labelPosition;
+  const resolvedLabelDisabled = labelDisabled ?? group?.labelDisabled ?? tokens.defaults.labelDisabled;
+  const resolvedDisabled = Boolean(disabled || group?.state.isDisabled);
+  const rawValue = value ?? name;
+  const serializedValue = rawValue == null ? undefined : String(rawValue);
+  const internalRef = (0, _react().useRef)(null);
+  (0, _react().useImperativeHandle)(ref, () => internalRef.current);
+  const standaloneState = (0, _toggle().useToggleState)({
+    isSelected: props.checked,
+    defaultSelected: props.defaultChecked,
+    onChange
+  });
+  const isGroup = !!group && serializedValue !== undefined && bindGroup;
+  const {
+    onBlur,
+    onFocus,
+    ...compatibleRest
+  } = rest;
+  (0, _react().useEffect)(() => {
+    if (group && bindGroup && serializedValue !== undefined && rawValue !== undefined) {
+      group.registerValue(serializedValue, rawValue, resolvedDisabled);
+      return () => group.unregisterValue(serializedValue);
+    }
+    return undefined;
+  }, [bindGroup, group, serializedValue, rawValue, resolvedDisabled]);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel ?? ((0, _utils.isText)(children) ? String(children) : undefined) ?? serializedValue ?? 'checkbox';
+  let inputProps;
+  let isChecked;
+  if (isGroup && group) {
+    const {
+      inputProps: groupInputProps
+    } = (0, _checkbox().useCheckboxGroupItem)({
+      ...compatibleRest,
+      value: serializedValue,
+      isDisabled: resolvedDisabled,
+      'aria-label': resolvedAccessibilityLabel
+    }, group.state, internalRef);
+    inputProps = groupInputProps;
+    isChecked = group.state.isSelected(serializedValue);
+  } else {
+    const {
+      inputProps: standaloneProps
+    } = (0, _checkbox().useCheckbox)({
+      ...compatibleRest,
+      isDisabled: resolvedDisabled,
+      value: serializedValue,
+      'aria-label': resolvedAccessibilityLabel
+    }, standaloneState, internalRef);
+    inputProps = standaloneProps;
+    isChecked = props.checked !== undefined ? props.checked : standaloneState.isSelected;
+  }
+  const borderRadius = resolvedShape === 'round' ? resolvedIconSize / 2 : tokens.radii.square;
+  const borderColor = resolvedDisabled ? tokens.colors.disabledBorder : isChecked ? resolvedCheckedColor : tokens.colors.border;
+  const backgroundColor = resolvedDisabled ? tokens.colors.disabledBackground : isChecked ? resolvedCheckedColor : tokens.colors.background;
+  const labelColor = resolvedDisabled || resolvedLabelDisabled ? tokens.colors.labelDisabled : tokens.colors.label;
+  const spacingStyle = resolvedLabelPosition === 'left' ? {
+    marginRight: tokens.spacing.gap
+  } : {
+    marginLeft: tokens.spacing.gap
+  };
+  const originalOnPress = inputProps?.onPress;
+  const mergedInputProps = inputProps ? {
+    ...inputProps,
+    onPress: e => {
+      onClick?.(e);
+      if (isGroup && group?.max && !isChecked && group.state.value.length >= group.max) {
+        return;
+      }
+      if (originalOnPress) {
+        originalOnPress(e);
+        return;
+      }
+      if (isGroup && group && serializedValue !== undefined) {
+        if (isChecked) group.state.removeValue(serializedValue);else group.state.addValue(serializedValue);
+        return;
+      }
+      if (props.checked !== undefined) {
+        onChange?.(!props.checked);
+        return;
+      }
+      if (onChange) {
+        standaloneState.setSelected(!standaloneState.isSelected);
+      }
+    }
+  } : {};
+  const labelNode = children === null || children === undefined || children === false ? null : (0, _utils.isText)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    accessible: false,
+    style: [tokens.layout.label, {
+      color: labelColor,
+      fontSize: tokens.typography.fontSize,
+      lineHeight: tokens.typography.fontSize * tokens.typography.lineHeightMultiplier,
+      fontFamily: tokens.typography.fontFamily,
+      fontWeight: tokens.typography.fontWeight
+    }, labelStyle]
+  }, children) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    accessible: false,
+    style: labelStyle
+  }, children);
+  const iconBaseStyle = {
+    width: resolvedIconSize,
+    height: resolvedIconSize,
+    borderRadius,
+    borderColor,
+    backgroundColor,
+    borderWidth: tokens.borders.width
+  };
+  const defaultIcon = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.icon, iconBaseStyle]
+  }, isChecked && /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.checkmark, {
+      color: tokens.colors.checkmark,
+      fontSize: resolvedIconSize * tokens.icon.scale
+    }]
+  }, "\u2713"));
+  let iconVisual = defaultIcon;
+  if (resolvedIconRender) {
+    iconVisual = resolvedIconRender({
+      checked: Boolean(isChecked),
+      disabled: Boolean(resolvedDisabled)
+    }) ?? null;
+  }
+  const interactive = !resolvedDisabled && !resolvedLabelDisabled;
+  const labelWrapper = labelNode && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.labelWrapper, spacingStyle],
+    pointerEvents: resolvedLabelDisabled ? 'none' : undefined,
+    accessible: false
+  }, labelNode);
+  const iconWrapperStyle = [tokens.layout.iconWrapper, resolvedLabelPosition === 'left' ? {
+    marginLeft: tokens.spacing.gap
+  } : {
+    marginRight: tokens.spacing.gap
+  }];
+  const iconWrapper = interactive ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: iconWrapperStyle
+  }, iconVisual) : /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, mergedInputProps, {
+    ref: internalRef,
+    disabled: resolvedDisabled,
+    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: isChecked,
+      disabled: !!resolvedDisabled
+    },
+    style: iconWrapperStyle,
+    hitSlop: hitSlop
+  }), iconVisual);
+  const content = resolvedLabelPosition === 'left' ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, labelWrapper, iconWrapper) : /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, iconWrapper, labelWrapper);
+  if (interactive) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, mergedInputProps, {
+      ref: internalRef,
+      disabled: resolvedDisabled,
+      accessibilityLabel: resolvedAccessibilityLabel,
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        checked: isChecked,
+        disabled: !!resolvedDisabled
+      },
+      style: ({
+        pressed
+      }) => [tokens.layout.container, style, _reactNative().Platform.OS === 'web' && {
+        cursor: 'pointer'
+      }, pressed && {
+        opacity: 0.8
+      }],
+      hitSlop: hitSlop
+    }), content);
+  }
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.container, style]
+  }, content);
+});
+Checkbox.displayName = 'Checkbox';
+var _default = exports.default = Checkbox;

package/dist/cjs/checkbox/CheckboxContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroupContext = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CheckboxGroupContext = exports.CheckboxGroupContext = /*#__PURE__*/_react().default.createContext(null);

package/dist/cjs/checkbox/CheckboxGroup.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroup = 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 _checkbox() {
+  const data = require("@react-native-aria/checkbox");
+  _checkbox = function () {
+    return data;
+  };
+  return data;
+}
+function _checkbox2() {
+  const data = require("@react-stately/checkbox");
+  _checkbox2 = function () {
+    return data;
+  };
+  return data;
+}
+var _CheckboxContext = require("./CheckboxContext");
+var _tokens = require("./tokens");
+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 serialize = value => String(value);
+const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled: disabledProp,
+    direction: directionProp,
+    shape,
+    iconSize,
+    checkedColor,
+    iconRender,
+    labelDisabled,
+    max,
+    gap: gapProp,
+    children,
+    style,
+    tokensOverride,
+    accessibilityLabel,
+    accessibilityHint,
+    ...viewProps
+  } = props;
+  const tokens = (0, _tokens.useCheckboxTokens)(tokensOverride);
+  const disabled = disabledProp ?? tokens.defaults.groupDisabled;
+  const direction = directionProp ?? tokens.defaults.groupDirection;
+  const gap = Math.max(0, gapProp ?? tokens.spacing.groupGap);
+  const supportsGap = _reactNative().Platform.OS === 'web';
+  const registryRef = (0, _react().useRef)(new Map());
+  const state = (0, _checkbox2().useCheckboxGroupState)({
+    value: value?.map(serialize),
+    defaultValue: defaultValue?.map(serialize),
+    onChange: next => {
+      onChange?.(next.map(key => registryRef.current.get(key)?.value ?? key));
+    },
+    isDisabled: disabled
+  });
+  const {
+    groupProps
+  } = (0, _checkbox().useCheckboxGroup)({
+    isDisabled: disabled,
+    'aria-label': accessibilityLabel,
+    'aria-describedby': accessibilityHint
+  }, state);
+  const groupPropsRecord = groupProps ?? {};
+  const {
+    [' aria-disabled']: __ariaDisabledTypo,
+    ...restGroupProps
+  } = groupPropsRecord;
+  const resolvedGroupProps = {
+    ...restGroupProps,
+    'aria-disabled': disabled
+  };
+  const registerValue = (0, _react().useCallback)((key, raw, itemDisabled) => {
+    registryRef.current.set(key, {
+      value: raw,
+      disabled: itemDisabled
+    });
+  }, []);
+  const unregisterValue = (0, _react().useCallback)(key => {
+    registryRef.current.delete(key);
+  }, []);
+  const childrenArray = _react().default.Children.toArray(children).filter(child => child != null && !(0, _utils.isBoolean)(child));
+  const itemStyleForIndex = index => {
+    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 toggleAll = (0, _react().useCallback)((options = {}) => {
+    const opts = (0, _utils.isBoolean)(options) ? {
+      checked: options
+    } : options;
+    const {
+      checked: targetChecked,
+      skipDisabled
+    } = opts;
+    const current = new Set(state.value ?? []);
+    const nextKeys = [];
+    registryRef.current.forEach((meta, key) => {
+      const isDisabledItem = !!meta.disabled || disabled;
+      if (skipDisabled && isDisabledItem) {
+        if (current.has(key)) nextKeys.push(key);
+        return;
+      }
+      const shouldSelect = targetChecked === true ? true : targetChecked === false ? false : !current.has(key);
+      if (shouldSelect) {
+        nextKeys.push(key);
+      }
+    });
+    state.setValue(nextKeys);
+  }, [disabled, state]);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    toggleAll
+  }), [toggleAll]);
+  const contextValue = (0, _react().useMemo)(() => ({
+    state,
+    direction,
+    shape,
+    iconSize,
+    iconRender,
+    checkedColor,
+    labelDisabled,
+    max,
+    registerValue,
+    unregisterValue
+  }), [state, direction, shape, iconSize, iconRender, checkedColor, labelDisabled, max]);
+  return /*#__PURE__*/_react().default.createElement(_CheckboxContext.CheckboxGroupContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, resolvedGroupProps, viewProps, {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    style: [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, supportsGap ? {
+      columnGap: direction === 'horizontal' ? gap : undefined,
+      rowGap: gap
+    } : null, 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);
+  })));
+});

package/dist/cjs/checkbox/index.js

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

package/dist/cjs/checkbox/tokens.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCheckboxTokens = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+const createCheckboxTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii,
+    fontSize,
+    typography
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  return {
+    defaults: {
+      shape: 'round',
+      iconSize: 20,
+      labelPosition: 'right',
+      labelDisabled: false,
+      bindGroup: true,
+      groupDisabled: false,
+      groupDirection: 'vertical'
+    },
+    layout: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      iconWrapper: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      icon: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      checkmark: {
+        textAlign: 'center',
+        includeFontPadding: false
+      },
+      label: {
+        includeFontPadding: false
+      },
+      labelWrapper: {
+        flexShrink: 1
+      },
+      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
+    },
+    spacing: {
+      gap: spacing.sm,
+      groupGap: spacing.md
+    },
+    radii: {
+      square: radii.xs
+    },
+    borders: {
+      width: _reactNative().StyleSheet.hairlineWidth
+    },
+    icon: {
+      scale: 0.65
+    }
+  };
+};
+const useCheckboxTokens = exports.useCheckboxTokens = (0, _designSystem.createComponentTokensHook)('checkbox', createCheckboxTokens);