react-native-system-ui 0.0.1 → 0.0.2

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

@@ -1,192 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Cell = void 0;
-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;
-}
-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 _CellContext = require("./CellContext");
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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, _validate.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 {
-    title,
-    value,
-    label,
-    extra,
-    icon,
-    rightIcon,
-    border: borderProp,
-    clickable,
-    isLink,
-    required,
-    center,
-    size: sizeProp,
-    arrowDirection: arrowDirectionProp,
-    tokensOverride,
-    children,
-    style,
-    titleStyle,
-    valueStyle,
-    labelStyle,
-    contentStyle,
-    onPress,
-    disabled,
-    android_ripple,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useCellTokens)(tokensOverride);
-  const group = _react().default.useContext(_CellContext.CellGroupContext);
-  const border = borderProp ?? tokens.defaults.border;
-  const size = sizeProp ?? tokens.defaults.size;
-  const arrowDirection = arrowDirectionProp ?? tokens.defaults.arrowDirection;
-  const lineHeight = tokens.typography.lineHeight;
-  const hasTitle = (0, _validate.isRenderable)(title);
-  const hasValue = (0, _validate.isRenderable)(value);
-  const hasLabel = (0, _validate.isRenderable)(label);
-  const hasExtra = (0, _validate.isRenderable)(extra);
-  const hasChildren = (0, _validate.isRenderable)(children);
-  const hasIcon = (0, _validate.isRenderable)(icon);
-  const hasRightIcon = (0, _validate.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 = [size === 'large' ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style];
-  const hairline = (0, _hooks.useHairline)({
-    show: showBorder,
-    containerStyle: containerStyles,
-    color: tokens.colors.border,
-    width: tokens.borders.width,
-    defaultPaddingHorizontal: tokens.sizing.paddingHorizontal
-  });
-  const customContentStyle = [tokens.layout.customContent, {
-    justifyContent: center ? 'center' : 'flex-start'
-  }, contentStyle];
-  const bodyContent = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, hasIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.iconWrapper, {
-      marginRight: tokens.spacing.iconGap,
-      minHeight: tokens.sizing.iconSize,
-      minWidth: tokens.sizing.iconSize
-    }]
-  }, icon), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.body
-  }, (hasTitle || required) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.titleRow, {
-      minHeight: lineHeight
-    }]
-  }, required && /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: {
-      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,
-    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: [{
-      marginTop: tokens.spacing.labelMarginTop
-    }, labelStyle],
-    numberOfLines: 2
-  }, label)), /*#__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,
-    numberOfLines: 1
-  }, value) : 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: {
-      marginLeft: tokens.spacing.extraGap
-    }
-  }, extra), 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 resolvedOnPress = onPress ?? undefined;
-  const {
-    interactionProps,
-    states
-  } = (0, _hooks.useAriaPress)({
-    disabled: !isInteractive,
-    onPress: resolvedOnPress
-  });
-  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';

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

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CellGroup = void 0;
-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 _hairline = require("../../utils/hairline");
-var _Cell = require("./Cell");
-var _CellContext = require("./CellContext");
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CellGroup = ({
-  children,
-  title,
-  border,
-  inset,
-  card,
-  style,
-  bodyStyle,
-  tokensOverride
-}) => {
-  const tokens = (0, _tokens.useCellTokens)(tokensOverride);
-  const resolvedBorder = border ?? tokens.defaults.groupBorder;
-  const resolvedInset = inset ?? tokens.defaults.groupInset;
-  const resolvedCard = card ?? tokens.defaults.groupCard;
-  const showInset = resolvedInset || resolvedCard;
-  const showOuterBorder = resolvedBorder && !showInset;
-  const childArray = _react().default.Children.toArray(children);
-  const isCellElement = child => {
-    if (! /*#__PURE__*/_react().default.isValidElement(child)) return false;
-    const type = child.type;
-    return type === _Cell.Cell || type?.displayName === 'Cell';
-  };
-  const lastCellIndex = (() => {
-    for (let i = childArray.length - 1; i >= 0; i--) {
-      const child = childArray[i];
-      if (isCellElement(child)) return i;
-    }
-    return -1;
-  })();
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [{
-      marginBottom: resolvedCard ? 0 : tokens.sizing.groupMarginBottom
-    }, style]
-  }, title ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: {
-      color: tokens.colors.groupTitle,
-      fontSize: tokens.typography.groupTitleSize,
-      paddingHorizontal: tokens.sizing.groupTitlePaddingHorizontal,
-      paddingVertical: tokens.sizing.groupTitlePaddingVertical
-    }
-  }, title) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [{
-      backgroundColor: tokens.colors.groupBodyBackground
-    }, showInset && {
-      overflow: 'hidden',
-      borderRadius: tokens.radii.groupInset,
-      marginHorizontal: tokens.sizing.groupInsetMarginHorizontal,
-      backgroundColor: tokens.colors.background
-    }, resolvedCard ? tokens.layout.groupCardShadow : null, bodyStyle]
-  }, 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
-      }
-    }, child);
-  }), showOuterBorder ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: (0, _hairline.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, {
-    style: (0, _hairline.createHairlineView)({
-      position: 'bottom',
-      color: tokens.colors.border,
-      left: 0,
-      right: 0,
-      enabled: tokens.borders.width > 0,
-      width: tokens.borders.width
-    })
-  })) : null));
-};
-exports.CellGroup = CellGroup;

package/dist/cjs/components/cell/types.d.ts

@@ -1,117 +0,0 @@
-import type React from 'react'
-import type { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native'
-
-import type { DeepPartial } from '../../types'
-
-export type CellArrowDirection = 'left' | 'right' | 'up' | 'down'
-export type CellSize = 'normal' | 'large'
-
-export interface CellTokens {
-  defaults: {
-    border: boolean
-    size: CellSize
-    arrowDirection: CellArrowDirection
-    activeOpacity: number
-    groupBorder: boolean
-    groupInset: boolean
-    groupCard: boolean
-  }
-  layout: {
-    container: ViewStyle
-    containerLarge: ViewStyle
-    center: ViewStyle
-    body: ViewStyle
-    titleRow: ViewStyle
-    value: TextStyle
-    valueOnly: TextStyle
-    valueContainer: ViewStyle
-    valueOnlyContainer: ViewStyle
-    valueCenter: ViewStyle
-    customContent: ViewStyle
-    iconWrapper: ViewStyle
-    rightIconWrapper: ViewStyle
-    hairline: ViewStyle
-    groupCardShadow: ViewStyle
-    arrowTransforms: Record<CellArrowDirection, ViewStyle>
-  }
-  colors: {
-    background: string
-    ripple: string
-    title: string
-    label: string
-    value: string
-    required: string
-    border: string
-    arrow: string
-    groupTitle: string
-    groupBodyBackground: string
-  }
-  typography: {
-    titleSize: number
-    lineHeight: number
-    titleWeight: TextStyle['fontWeight']
-    largeTitleSize: number
-    labelSize: number
-    largeLabelSize: number
-    valueSize: number
-    largeValueSize: number
-    groupTitleSize: number
-  }
-  sizing: {
-    paddingVertical: number
-    paddingHorizontal: number
-    largePaddingVertical: number
-    arrowSize: number
-    iconSize: number
-    groupMarginBottom: number
-    groupTitlePaddingHorizontal: number
-    groupTitlePaddingVertical: number
-    groupInsetMarginHorizontal: number
-  }
-  radii: {
-    groupInset: number
-  }
-  borders: {
-    width: number
-  }
-  spacing: {
-    iconGap: number
-    valueGap: number
-    extraGap: number
-    labelMarginTop: number
-  }
-}
-
-export interface CellProps extends Omit<PressableProps, 'style' | 'children'> {
-  title?: React.ReactNode
-  value?: React.ReactNode
-  label?: React.ReactNode
-  extra?: React.ReactNode
-  icon?: React.ReactNode
-  rightIcon?: React.ReactNode
-  border?: boolean
-  clickable?: boolean
-  isLink?: boolean
-  required?: boolean
-  center?: boolean
-  size?: CellSize
-  arrowDirection?: CellArrowDirection
-  tokensOverride?: DeepPartial<CellTokens>
-  children?: React.ReactNode
-  titleStyle?: StyleProp<TextStyle>
-  valueStyle?: StyleProp<TextStyle>
-  labelStyle?: StyleProp<TextStyle>
-  contentStyle?: StyleProp<ViewStyle>
-  style?: StyleProp<ViewStyle>
-}
-
-export interface CellGroupProps {
-  children?: React.ReactNode
-  title?: React.ReactNode
-  border?: boolean
-  inset?: boolean
-  card?: boolean
-  style?: StyleProp<ViewStyle>
-  bodyStyle?: StyleProp<ViewStyle>
-  tokensOverride?: DeepPartial<CellTokens>
-}

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

@@ -1,245 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Checkbox = void 0;
-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;
-}
-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 _validate = require("../../utils/validate");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useCheckboxTokens)(tokensOverride);
-  const group = _react().default.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 = _react().default.useRef(null);
-
-  // Merge refs
-  _react().default.useImperativeHandle(ref, () => internalRef.current);
-  const standaloneState = (0, _toggle().useToggleState)({
-    isSelected: props.checked,
-    defaultSelected: props.defaultChecked,
-    onChange: props.onChange
-  });
-  const isGroup = !!group && serializedValue !== undefined && bindGroup;
-  const {
-    onBlur,
-    onFocus,
-    ...compatibleRest
-  } = rest;
-  _react().default.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 = props.accessibilityLabel ?? props['aria-label'] ?? ((0, _validate.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,
-      accessibilityLabel: 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,
-      accessibilityLabel: 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 => {
-      props.onClick?.(e);
-      if (isGroup && group?.max && !isChecked && group.state.value.length >= group.max) {
-        return;
-      }
-      if (originalOnPress) {
-        originalOnPress(e);
-        return;
-      }
-
-      // Fallback: should be rare, but keeps behavior predictable.
-      if (isGroup && group && serializedValue !== undefined) {
-        if (isChecked) group.state.removeValue(serializedValue);else group.state.addValue(serializedValue);
-        return;
-      }
-      if (props.checked !== undefined) {
-        props.onChange?.(!props.checked);
-        return;
-      }
-      if (props.onChange) {
-        standaloneState.setSelected(!standaloneState.isSelected);
-      }
-    }
-  } : {};
-  const labelNode = children === null || children === undefined || children === false ? 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
-    }, 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") : null);
-  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) : null;
-  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
-      } // Optional: add simple feedback
-      ],
-      hitSlop: hitSlop
-    }), content);
-  }
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.container, style]
-  }, content);
-});
-Checkbox.displayName = 'Checkbox';
-var _default = exports.default = Checkbox;