react-native-system-ui 0.0.7 → 1.0.1

package/dist/cjs/components/checkbox/Checkbox.js

@@ -35,15 +35,26 @@ function _toggle() {
 var _CheckboxContext = require("./CheckboxContext");
 var _tokens = require("./tokens");
 var _utils = require("../../utils");
+var _validate = require("../../utils/validate");
 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 EMPTY_CHECKBOX_GROUP_STATE = {
+  value: [],
+  isDisabled: false,
+  isReadOnly: false,
+  isSelected: () => false,
+  setValue: () => {},
+  addValue: () => {},
+  removeValue: () => {},
+  toggleValue: () => {}
+};
+const CheckboxImpl = (p, ref) => {
   const {
     children,
     name,
     value,
     iconRender,
-    bindGroup: bindGroupProp,
+    bindGroup: bgp,
     shape,
     iconSize,
     checkedColor,
@@ -55,189 +66,186 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react().default.forwardRef((pr
     tokensOverride,
     hitSlop = 8,
     accessibilityLabel,
-    ['aria-label']: ariaLabel,
+    ['aria-label']: al,
     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,
+  } = p;
+  const t = (0, _tokens.useCheckboxTokens)(tokensOverride);
+  const g = (0, _react().useContext)(_CheckboxContext.CheckboxGroupContext);
+  const bg = bgp ?? t.defaults.bindGroup;
+  const rs = shape ?? g?.shape ?? t.defaults.shape;
+  const ris = iconSize ?? g?.iconSize ?? t.defaults.iconSize;
+  const rcc = checkedColor ?? g?.checkedColor ?? t.colors.checkedBackground;
+  const rir = iconRender ?? g?.iconRender;
+  const rlp = labelPosition ?? t.defaults.labelPosition;
+  const rld = labelDisabled ?? g?.labelDisabled ?? t.defaults.labelDisabled;
+  const rd = Boolean(disabled || g?.state.isDisabled);
+  const rv = value ?? name;
+  const sv = rv == null ? undefined : String(rv);
+  const ir = (0, _react().useRef)(null);
+  (0, _react().useImperativeHandle)(ref, () => ir.current);
+  const ss = (0, _toggle().useToggleState)({
+    isSelected: p.checked,
+    defaultSelected: p.defaultChecked,
     onChange
   });
-  const isGroup = !!group && serializedValue !== undefined && bindGroup;
+  const ig = !!g && sv !== undefined && bg;
   const {
     onBlur,
     onFocus,
-    ...compatibleRest
+    ...cr
   } = rest;
   (0, _react().useEffect)(() => {
-    if (group && bindGroup && serializedValue !== undefined && rawValue !== undefined) {
-      group.registerValue(serializedValue, rawValue, resolvedDisabled);
-      return () => group.unregisterValue(serializedValue);
+    if (g && bg && sv !== undefined && rv !== undefined) {
+      g.registerValue(sv, rv, rd);
+      return () => g.unregisterValue(sv);
     }
+    ;
     return undefined;
-  }, [bindGroup, group, serializedValue, rawValue, resolvedDisabled]);
-  const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel ?? ((0, _utils.isText)(children) ? String(children) : undefined) ?? serializedValue ?? 'checkbox';
-  let inputProps;
-  let isChecked;
-  const ariaRef = internalRef;
-  if (isGroup && group) {
-    const {
-      inputProps: groupInputProps
-    } = (0, _checkbox().useCheckboxGroupItem)({
-      ...compatibleRest,
-      value: serializedValue,
-      isDisabled: resolvedDisabled,
-      'aria-label': resolvedAccessibilityLabel
-    }, group.state, ariaRef);
-    inputProps = groupInputProps;
-    isChecked = group.state.isSelected(serializedValue);
-  } else {
-    const {
-      inputProps: standaloneProps
-    } = (0, _checkbox().useCheckbox)({
-      ...compatibleRest,
-      isDisabled: resolvedDisabled,
-      value: serializedValue,
-      'aria-label': resolvedAccessibilityLabel
-    }, standaloneState, ariaRef);
-    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
+  }, [bg, g, sv, rv, rd]);
+  const ral = accessibilityLabel ?? al ?? ((0, _validate.isText)(children) ? String(children) : undefined) ?? sv ?? 'checkbox';
+  const ar = ir;
+  const {
+    inputProps: gip
+  } = (0, _checkbox().useCheckboxGroupItem)({
+    ...cr,
+    value: sv ?? '',
+    isDisabled: rd,
+    'aria-label': ral
+  }, ig && g ? g.state : EMPTY_CHECKBOX_GROUP_STATE, ar);
+  const {
+    inputProps: sip
+  } = (0, _checkbox().useCheckbox)({
+    ...cr,
+    isDisabled: rd,
+    value: sv,
+    'aria-label': ral
+  }, ss, ar);
+  const ip = ig && g ? gip : sip;
+  const ic = ig && g ? g.state.isSelected(sv) : p.checked !== undefined ? p.checked : ss.isSelected;
+  const br = rs === 'round' ? ris / 2 : t.radii.square;
+  const bc = rd ? t.colors.disabledBorder : ic ? rcc : t.colors.border;
+  const bgc = rd ? t.colors.disabledBackground : ic ? rcc : t.colors.background;
+  const lc = rd || rld ? t.colors.labelDisabled : t.colors.label;
+  const ss_ = rlp === 'left' ? {
+    marginRight: t.spacing.gap
   } : {
-    marginLeft: tokens.spacing.gap
+    marginLeft: t.spacing.gap
   };
-  const originalOnPress = inputProps?.onPress;
-  const mergedInputProps = inputProps ? {
-    ...inputProps,
+  const oop = ip?.onPress;
+  const mip = ip ? {
+    ...ip,
     onPress: e => {
       onClick?.(e);
-      if (isGroup && group?.max && !isChecked && group.state.value.length >= group.max) {
+      if (ig && g?.max && !ic && g.state.value.length >= g.max) return;
+      if (oop) {
+        oop(e);
         return;
       }
-      if (originalOnPress) {
-        originalOnPress(e);
+      if (ig && g && sv !== undefined) {
+        if (ic) g.state.removeValue(sv);else g.state.addValue(sv);
         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);
+      if (p.checked !== undefined) {
+        onChange?.(!p.checked);
         return;
       }
       if (onChange) {
-        standaloneState.setSelected(!standaloneState.isSelected);
+        ss.setSelected(!ss.isSelected);
       }
     }
   } : {};
-  const labelNode = children === null || children === undefined || children === false ? null : (0, _utils.isText)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  const ln = !(0, _validate.isRenderable)(children) ? null : (0, _validate.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
+    style: [t.layout.label, {
+      color: lc,
+      fontSize: t.typography.fontSize,
+      lineHeight: t.typography.fontSize * t.typography.lineHeightMultiplier,
+      fontFamily: t.typography.fontFamily,
+      fontWeight: t.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 ibs = {
+    width: ris,
+    height: ris,
+    borderRadius: br,
+    backgroundColor: bgc
   };
-  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
+  const di = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [t.layout.icon, ibs]
+  }, ic && /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [t.layout.checkmark, {
+      color: t.colors.checkmark,
+      fontSize: ris * t.icon.scale
     }]
-  }, "\u2713"));
-  let iconVisual = defaultIcon;
-  if (resolvedIconRender) {
-    iconVisual = resolvedIconRender({
-      checked: Boolean(isChecked),
-      disabled: Boolean(resolvedDisabled)
+  }, "\u2713"), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _utils.createHairlineView)({
+      position: 'all',
+      color: bc,
+      borderRadius: br
+    })
+  }));
+  let iv = di;
+  if (rir) {
+    iv = rir({
+      checked: Boolean(ic),
+      disabled: Boolean(rd)
     }) ?? null;
   }
-  const interactive = !resolvedDisabled && !resolvedLabelDisabled;
-  const labelWrapper = labelNode ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.labelWrapper, spacingStyle],
-    pointerEvents: resolvedLabelDisabled ? 'none' : undefined,
+  const i = !rd && !rld;
+  const lw = ln && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [t.layout.labelWrapper, ss_],
+    pointerEvents: rld ? 'none' : undefined,
     accessible: false
-  }, labelNode) : null;
-  const iconWrapperStyle = [tokens.layout.iconWrapper, resolvedLabelPosition === 'left' ? {
-    marginLeft: tokens.spacing.gap
+  }, ln);
+  const iws = [t.layout.iconWrapper, rlp === 'left' ? {
+    marginLeft: t.spacing.gap
   } : {
-    marginRight: tokens.spacing.gap
+    marginRight: t.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,
+  const iw = i ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: iws
+  }, iv) : /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, mip, {
+    ref: ir,
+    disabled: rd,
+    accessibilityLabel: ral,
     accessibilityRole: "checkbox",
     accessibilityState: {
-      checked: isChecked,
-      disabled: !!resolvedDisabled
+      checked: ic,
+      disabled: !!rd
     },
-    style: iconWrapperStyle,
+    style: iws,
     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,
+  }), iv);
+  const cnt = rlp === 'left' ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, lw, iw) : /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, iw, lw);
+  if (i) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, mip, {
+      ref: ir,
+      disabled: rd,
+      accessibilityLabel: ral,
       accessibilityRole: "checkbox",
       accessibilityState: {
-        checked: isChecked,
-        disabled: !!resolvedDisabled
+        checked: ic,
+        disabled: !!rd
       },
       style: ({
         pressed
-      }) => [tokens.layout.container, style, _reactNative().Platform.OS === 'web' && {
+      }) => [t.layout.container, style, _reactNative().Platform.OS === 'web' && {
         cursor: 'pointer'
       }, pressed && {
         opacity: 0.8
       }],
       hitSlop: hitSlop
-    }), content);
+    }), cnt);
   }
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.container, style]
-  }, content);
-});
-Checkbox.displayName = 'Checkbox';
+    style: [t.layout.container, style]
+  }, cnt);
+};
+const CheckboxForwardRef = /*#__PURE__*/_react().default.forwardRef(CheckboxImpl);
+const Checkbox = exports.Checkbox = /*#__PURE__*/_react().default.memo(CheckboxForwardRef);
 var _default = exports.default = Checkbox;

package/dist/cjs/components/checkbox/CheckboxGroup.js

@@ -63,7 +63,6 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
   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),
@@ -80,15 +79,15 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
     'aria-label': accessibilityLabel,
     'aria-describedby': accessibilityHint
   }, state);
-  const groupPropsRecord = groupProps ?? {};
+  const gpr = groupProps ?? {};
   const {
     [' aria-disabled']: __ariaDisabledTypo,
-    ...restGroupProps
-  } = groupPropsRecord;
-  const resolvedGroupProps = (0, _react().useMemo)(() => ({
-    ...restGroupProps,
+    ...restGP
+  } = gpr;
+  const rGroupProps = (0, _react().useMemo)(() => ({
+    ...restGP,
     'aria-disabled': disabled
-  }), [disabled, restGroupProps]);
+  }), [disabled, restGP]);
   const registerValue = (0, _react().useCallback)((key, raw, itemDisabled) => {
     registryRef.current.set(key, {
       value: raw,
@@ -98,46 +97,32 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
   const unregisterValue = (0, _react().useCallback)(key => {
     registryRef.current.delete(key);
   }, []);
-  const childrenArray = (0, _react().useMemo)(() => _react().default.Children.toArray(children).filter(child => child != null && !(0, _utils.isBoolean)(child)), [children]);
-  const childrenLength = childrenArray.length;
-  const itemStyleForIndex = (0, _react().useCallback)(index => {
-    const isLast = index === childrenLength - 1;
-    if (direction === 'horizontal') {
-      return [tokens.layout.groupItem, !isLast && {
-        marginRight: gap
-      }];
-    }
-    return isLast ? tokens.layout.groupItem : [tokens.layout.groupItem, {
-      marginBottom: gap
-    }];
-  }, [childrenLength, direction, gap, tokens.layout.groupItem]);
+  const chArr = (0, _react().useMemo)(() => _react().default.Children.toArray(children).filter(ch => ch != null && !(0, _utils.isBoolean)(ch)), [children]);
   const toggleAll = (0, _react().useCallback)((options = {}) => {
     const opts = (0, _utils.isBoolean)(options) ? {
       checked: options
     } : options;
     const {
-      checked: targetChecked,
+      checked: tgt,
       skipDisabled
     } = opts;
-    const current = new Set(state.value ?? []);
+    const cur = 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);
+      const isDis = !!meta.disabled || disabled;
+      if (skipDisabled && isDis) {
+        if (cur.has(key)) nextKeys.push(key);
         return;
       }
-      const shouldSelect = targetChecked === true ? true : targetChecked === false ? false : !current.has(key);
-      if (shouldSelect) {
-        nextKeys.push(key);
-      }
+      ;
+      if (tgt === true ? true : tgt === false ? false : !cur.has(key)) nextKeys.push(key);
     });
     state.setValue(nextKeys);
   }, [disabled, state]);
   (0, _react().useImperativeHandle)(ref, () => ({
     toggleAll
   }), [toggleAll]);
-  const contextValue = (0, _react().useMemo)(() => ({
+  const ctxVal = (0, _react().useMemo)(() => ({
     state,
     direction,
     shape,
@@ -149,30 +134,15 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
     registerValue,
     unregisterValue
   }), [checkedColor, direction, iconRender, iconSize, labelDisabled, max, registerValue, shape, state, unregisterValue]);
-  const containerStyle = (0, _react().useMemo)(() => [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, supportsGap ? {
+  const ctrStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
     columnGap: direction === 'horizontal' ? gap : undefined,
     rowGap: gap
-  } : null, style], [direction, gap, style, supportsGap, tokens.layout.groupHorizontal, tokens.layout.groupVertical]);
-  const renderedChildren = (0, _react().useMemo)(() => 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);
-  }), [childrenArray, itemStyleForIndex, supportsGap]);
+  }, style];
   return /*#__PURE__*/_react().default.createElement(CheckboxGroupContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, resolvedGroupProps, viewProps, {
+    value: ctxVal
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rGroupProps, viewProps, {
     accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
-    style: containerStyle
-  }), renderedChildren));
+    style: ctrStyle
+  }), chArr));
 });

package/dist/cjs/components/checkbox/tokens.js

@@ -12,6 +12,10 @@ function _reactNative() {
   return data;
 }
 var _designSystem = require("../../design-system");
+const centered = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
 const createCheckboxTokens = foundations => {
   const {
     palette,
@@ -20,7 +24,6 @@ const createCheckboxTokens = foundations => {
     fontSize,
     typography
   } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
     defaults: {
       shape: 'round',
@@ -36,14 +39,8 @@ const createCheckboxTokens = foundations => {
         flexDirection: 'row',
         alignItems: 'center'
       },
-      iconWrapper: {
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      icon: {
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
+      iconWrapper: centered,
+      icon: centered,
       checkmark: {
         textAlign: 'center',
         includeFontPadding: false
@@ -72,7 +69,7 @@ const createCheckboxTokens = foundations => {
       checkedBackground: palette.primary[500],
       disabledBorder: palette.default[300],
       disabledBackground: palette.default[100],
-      checkmark: onPrimary,
+      checkmark: palette.primary.foreground ?? '#ffffff',
       label: palette.default.foreground ?? '#111827',
       labelDisabled: palette.default[400]
     },