react-native-system-ui 0.0.7 → 1.0.0

package/dist/cjs/components/cell/Cell.js

@@ -27,27 +27,12 @@ function _reactNativeSystemIcon() {
 }
 var _hooks = require("../../hooks");
 var _utils = require("../../utils");
+var _useDirection = require("../config-provider/useDirection");
 var _CellContext = require("./CellContext");
 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 TextOrView = ({
-  children,
-  textStyle,
-  viewStyle,
-  numberOfLines
-}) => {
-  if ((0, _utils.isText)(children)) {
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: textStyle,
-      numberOfLines: numberOfLines
-    }, children);
-  }
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: viewStyle
-  }, children);
-};
-const Cell = exports.Cell = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+const CellImpl = (props, ref) => {
   const {
     title,
     value,
@@ -75,23 +60,26 @@ const Cell = exports.Cell = /*#__PURE__*/_react().default.forwardRef((props, ref
     ...rest
   } = props;
   const tokens = (0, _tokens.useCellTokens)(tokensOverride);
+  const dir = (0, _useDirection.useDirection)();
   const group = (0, _react().useContext)(_CellContext.CellGroupContext);
   const border = borderProp ?? tokens.defaults.border;
   const size = sizeProp ?? tokens.defaults.size;
-  const arrowDirection = arrowDirectionProp ?? tokens.defaults.arrowDirection;
+  const arrowDirectionRaw = arrowDirectionProp ?? tokens.defaults.arrowDirection;
+  const arrowDirection = dir === 'rtl' ? arrowDirectionRaw === 'left' ? 'right' : arrowDirectionRaw === 'right' ? 'left' : arrowDirectionRaw : arrowDirectionRaw;
   const lineHeight = tokens.typography.lineHeight;
-  const hasTitle = (0, _utils.isRenderable)(title);
-  const hasValue = (0, _utils.isRenderable)(value);
-  const hasLabel = (0, _utils.isRenderable)(label);
-  const hasExtra = (0, _utils.isRenderable)(extra);
-  const hasChildren = (0, _utils.isRenderable)(children);
-  const hasIcon = (0, _utils.isRenderable)(icon);
-  const hasRightIcon = (0, _utils.isRenderable)(rightIcon);
+  const hasTitle = (0, _utils.isRenderable)(title),
+    hasValue = (0, _utils.isRenderable)(value),
+    hasLabel = (0, _utils.isRenderable)(label),
+    hasExtra = (0, _utils.isRenderable)(extra),
+    hasChildren = (0, _utils.isRenderable)(children),
+    hasIcon = (0, _utils.isRenderable)(icon),
+    hasRightIcon = (0, _utils.isRenderable)(rightIcon);
   const onlyValue = !hasTitle && !hasChildren;
   const showBorder = border && group.border && !group.isLast;
   const showArrow = !!isLink || !!clickable;
   const isInteractive = !disabled && (clickable || !!onPress || !!rest.onLongPress || !!rest.onPressIn || !!rest.onPressOut);
-  const containerStyles = (0, _react().useMemo)(() => [size === 'large' ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style], [center, size, style, tokens.layout.center, tokens.layout.container, tokens.layout.containerLarge]);
+  const isLargeSize = size === 'large';
+  const containerStyles = (0, _react().useMemo)(() => [size === 'large' ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style], [size, center, tokens.layout, style]);
   const hairline = (0, _hooks.useHairline)({
     show: showBorder,
     containerStyle: containerStyles,
@@ -101,8 +89,28 @@ const Cell = exports.Cell = /*#__PURE__*/_react().default.forwardRef((props, ref
   });
   const customContentStyle = (0, _react().useMemo)(() => [tokens.layout.customContent, {
     justifyContent: center ? 'center' : 'flex-start'
-  }, contentStyle], [center, contentStyle, tokens.layout.customContent]);
-  const bodyContent = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, hasIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, contentStyle], [center, tokens.layout.customContent, contentStyle]);
+  const {
+    interactionProps,
+    states
+  } = (0, _hooks.useAriaPress)({
+    disabled: !isInteractive,
+    onPress: onPress ?? undefined
+  });
+  const Component = isInteractive ? _reactNative().Pressable : _reactNative().View;
+  const componentProps = isInteractive ? {
+    android_ripple: android_ripple ?? {
+      color: tokens.colors.ripple
+    },
+    accessibilityRole: 'button',
+    ...interactionProps
+  } : {};
+  return /*#__PURE__*/_react().default.createElement(Component, _extends({
+    ref: ref,
+    style: [containerStyles, isInteractive && states.pressed && {
+      opacity: tokens.defaults.activeOpacity
+    }]
+  }, componentProps, rest), hasIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.iconWrapper, {
       marginRight: tokens.spacing.iconGap,
       minHeight: tokens.sizing.iconSize,
@@ -119,73 +127,52 @@ const Cell = exports.Cell = /*#__PURE__*/_react().default.forwardRef((props, ref
       color: tokens.colors.required,
       marginRight: tokens.spacing.iconGap / 2
     }
-  }, "*"), hasTitle && /*#__PURE__*/_react().default.createElement(TextOrView, {
-    textStyle: [{
-      color: tokens.colors.title,
-      fontSize: size === 'large' ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
-      fontWeight: tokens.typography.titleWeight
-    }, titleStyle],
-    viewStyle: titleStyle,
+  }, "*"), hasTitle && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: titleStyle
+  }, (0, _utils.renderTextOrNode)(title, [{
+    color: tokens.colors.title,
+    fontSize: isLargeSize ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
+    fontWeight: tokens.typography.titleWeight
+  }, titleStyle], {
     numberOfLines: 1
-  }, title)), hasLabel && /*#__PURE__*/_react().default.createElement(TextOrView, {
-    textStyle: [{
-      marginTop: tokens.spacing.labelMarginTop,
-      color: tokens.colors.label,
-      fontSize: size === 'large' ? tokens.typography.largeLabelSize : tokens.typography.labelSize
-    }, labelStyle],
-    viewStyle: [{
+  }))), hasLabel && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [{
       marginTop: tokens.spacing.labelMarginTop
-    }, labelStyle],
+    }, labelStyle]
+  }, (0, _utils.renderTextOrNode)(label, [{
+    color: tokens.colors.label,
+    fontSize: isLargeSize ? tokens.typography.largeLabelSize : tokens.typography.labelSize
+  }, labelStyle], {
     numberOfLines: 2
-  }, label)), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }))), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.valueContainer, {
       minHeight: lineHeight,
       marginLeft: tokens.spacing.valueGap
     }, !center && onlyValue && tokens.layout.valueOnlyContainer, center && tokens.layout.valueCenter]
-  }, hasValue ? /*#__PURE__*/_react().default.createElement(TextOrView, {
-    textStyle: [tokens.layout.value, onlyValue && tokens.layout.valueOnly, {
-      color: tokens.colors.value,
-      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
-    }, valueStyle],
-    viewStyle: customContentStyle,
+  }, hasValue ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: customContentStyle
+  }, (0, _utils.renderTextOrNode)(value, [tokens.layout.value, onlyValue && tokens.layout.valueOnly, {
+    color: tokens.colors.value,
+    fontSize: isLargeSize ? tokens.typography.largeValueSize : tokens.typography.valueSize
+  }, valueStyle], {
     numberOfLines: 1
-  }, value) : hasChildren ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  })) : hasChildren && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: customContentStyle
-  }, children) : null), hasExtra && /*#__PURE__*/_react().default.createElement(TextOrView, {
-    textStyle: {
-      marginLeft: tokens.spacing.extraGap,
-      color: tokens.colors.value,
-      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
-    },
-    viewStyle: {
+  }, children)), hasExtra && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
       marginLeft: tokens.spacing.extraGap
     }
-  }, extra), hasRightIcon ? rightIcon : showArrow ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, (0, _utils.renderTextOrNode)(extra, {
+    marginLeft: tokens.spacing.extraGap,
+    color: tokens.colors.value,
+    fontSize: isLargeSize ? tokens.typography.largeValueSize : tokens.typography.valueSize
+  })), hasRightIcon ? rightIcon : showArrow && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.rightIconWrapper, tokens.layout.arrowTransforms[arrowDirection]]
   }, /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
     size: tokens.sizing.arrowSize,
     fill: tokens.colors.arrow
-  })) : null);
-  const {
-    interactionProps,
-    states
-  } = (0, _hooks.useAriaPress)({
-    disabled: !isInteractive,
-    onPress: onPress ?? undefined
-  });
-  const Component = isInteractive ? _reactNative().Pressable : _reactNative().View;
-  const componentProps = isInteractive ? {
-    android_ripple: android_ripple ?? {
-      color: tokens.colors.ripple
-    },
-    accessibilityRole: 'button',
-    ...interactionProps
-  } : {};
-  return /*#__PURE__*/_react().default.createElement(Component, _extends({
-    ref: ref,
-    style: [containerStyles, isInteractive && states.pressed && {
-      opacity: tokens.defaults.activeOpacity
-    }]
-  }, componentProps, rest), bodyContent, hairline);
-});
-Cell.displayName = 'Cell';
+  })), hairline);
+};
+const CellForwardRef = /*#__PURE__*/_react().default.forwardRef(CellImpl);
+CellForwardRef.displayName = 'Cell';
+const Cell = exports.Cell = /*#__PURE__*/_react().default.memo(CellForwardRef);

package/dist/cjs/components/cell/CellGroup.js

@@ -23,7 +23,12 @@ var _Cell = require("./Cell");
 var _CellContext = require("./CellContext");
 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); }
-const CellGroup = ({
+const isCellElement = child => {
+  if (! /*#__PURE__*/_react().default.isValidElement(child)) return false;
+  if (child.type === _Cell.Cell) return true;
+  return child.type.displayName === 'Cell';
+};
+const CellGroup = exports.CellGroup = /*#__PURE__*/_react().default.memo(({
   children,
   title,
   border,
@@ -35,21 +40,13 @@ const CellGroup = ({
 }) => {
   const tokens = (0, _tokens.useCellTokens)(tokensOverride);
   const resolvedBorder = border ?? tokens.defaults.groupBorder;
-  const resolvedInset = inset ?? tokens.defaults.groupInset;
+  const showInset = (inset ?? tokens.defaults.groupInset) || (card ?? tokens.defaults.groupCard);
   const resolvedCard = card ?? tokens.defaults.groupCard;
-  const showInset = resolvedInset || resolvedCard;
   const showOuterBorder = resolvedBorder && !showInset;
   const childArray = (0, _react().useMemo)(() => _react().default.Children.toArray(children), [children]);
-  const isCellElement = child => {
-    if (! /*#__PURE__*/_react().default.isValidElement(child)) return false;
-    if (child.type === _Cell.Cell) return true;
-    const type = child.type;
-    return type.displayName === 'Cell';
-  };
   const lastCellIndex = (0, _react().useMemo)(() => {
     for (let i = childArray.length - 1; i >= 0; i--) {
-      const child = childArray[i];
-      if (isCellElement(child)) return i;
+      if (isCellElement(childArray[i])) return i;
     }
     return -1;
   }, [childArray]);
@@ -62,9 +59,9 @@ const CellGroup = ({
     marginHorizontal: tokens.sizing.groupInsetMarginHorizontal,
     backgroundColor: tokens.colors.background
   }), [tokens.colors.background, tokens.radii.groupInset, tokens.sizing.groupInsetMarginHorizontal]);
-  const bodyContainerStyle = (0, _react().useMemo)(() => [{
+  const bodyContainerStyle = [{
     backgroundColor: tokens.colors.groupBodyBackground
-  }, showInset ? insetStyle : null, resolvedCard ? tokens.layout.groupCardShadow : null, bodyStyle], [bodyStyle, resolvedCard, showInset, tokens.colors.background, tokens.colors.groupBodyBackground, tokens.layout.groupCardShadow, tokens.radii.groupInset, tokens.sizing.groupInsetMarginHorizontal, insetStyle]);
+  }, showInset ? insetStyle : null, resolvedCard ? tokens.layout.groupCardShadow : null, bodyStyle];
   const renderedTitle = (0, _react().useMemo)(() => title ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: {
       color: tokens.colors.groupTitle,
@@ -75,13 +72,12 @@ const CellGroup = ({
   }, title) : null, [title, tokens.colors.groupTitle, tokens.sizing.groupTitlePaddingHorizontal, tokens.sizing.groupTitlePaddingVertical, tokens.typography.groupTitleSize]);
   const renderedChildren = (0, _react().useMemo)(() => childArray.map((child, index) => {
     const key = /*#__PURE__*/_react().default.isValidElement(child) && child.key != null ? child.key : index;
-    const isCell = isCellElement(child);
     return /*#__PURE__*/_react().default.createElement(_CellContext.CellGroupContext.Provider, {
       key: key,
       value: {
         border: resolvedBorder,
         inset: showInset,
-        isLast: isCell ? index === lastCellIndex : false
+        isLast: isCellElement(child) ? index === lastCellIndex : false
       }
     }, child);
   }), [childArray, lastCellIndex, resolvedBorder, showInset]);
@@ -89,24 +85,15 @@ const CellGroup = ({
     style: containerStyle
   }, renderedTitle, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: bodyContainerStyle
-  }, renderedChildren, showOuterBorder ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: (0, _utils.createHairlineView)({
-      position: 'top',
-      color: tokens.colors.border,
-      left: 0,
-      right: 0,
-      enabled: tokens.borders.width > 0,
-      width: tokens.borders.width
-    })
-  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, renderedChildren, showOuterBorder ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, ['top', 'bottom'].map(pos => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    key: pos,
     style: (0, _utils.createHairlineView)({
-      position: 'bottom',
+      position: pos,
       color: tokens.colors.border,
       left: 0,
       right: 0,
       enabled: tokens.borders.width > 0,
       width: tokens.borders.width
     })
-  })) : null));
-};
-exports.CellGroup = CellGroup;
+  }))) : null));
+});

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,185 @@ 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;